@liujitcn/kratos-uni-app-system 0.0.83 → 0.0.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -8,9 +8,11 @@
8
8
  packages/modules/system
9
9
  ├── src
10
10
  │ ├── api/base/v1 # AI 消息、会话、快捷入口和Provider模型选项接口
11
+ │ ├── components # 可复用的 KratosMyPage 公共个人中心
11
12
  │ ├── rpc # system 相关 Buf 生成类型
12
13
  │ ├── views
13
14
  │ │ ├── pages/my # 个人中心主页
15
+ │ │ │ └── components # MyExtensions 业务扩展的空实现
14
16
  │ │ └── pagesMember # AI、个人资料和默认设置包装页
15
17
  │ ├── index.ts # systemModule 定义和公开入口
16
18
  │ └── pages.ts # 页面样式与分包声明
@@ -29,4 +31,33 @@ packages/modules/system
29
31
  - 允许后续模块按相同物理路由或 `viewKey` 覆盖 system 静态视图。
30
32
  - npm 根入口使用 `dist/index.mjs`;workspace 的 Turbo 任务和 `prepare:modules` 会先构建 system 及其依赖的 core Node 入口,干净安装后不依赖历史 dist。
31
33
 
34
+ ## 个人中心扩展
35
+
36
+ 公共组件 `KratosMyPage` 保留顶部标题与设置、个人信息和 AI 助手入口;AI 卡片继续由应用的 `aiEnabled` 配置控制显隐。唯一业务插槽 `extensions` 位于这些固定内容之后,与它们共用滚动区域、主题和卡片间距。未传入内容时不增加容器或留白,业务卡片、数据请求和权限由项目模块维护。
37
+
38
+ 内置 [我的页面](src/views/pages/my/my.vue) 已使用该组件,并在插槽中挂载 [MyExtensions 空实现](src/views/pages/my/components/MyExtensions.vue)。空实现保留一个 `view` 作为业务内容容器,不显示占位卡片;项目可以按这个结构组织自己的业务内容。
39
+
40
+ 在项目业务模块的 `src/views/pages/my/my.vue` 复用公开组件入口:
41
+
42
+ ```vue
43
+ <script setup lang="ts">
44
+ import KratosMyPage from '@liujitcn/kratos-uni-app-system/components/KratosMyPage.vue'
45
+ import OrderSection from './components/OrderSection.vue'
46
+ import ServiceSection from './components/ServiceSection.vue'
47
+ </script>
48
+
49
+ <template>
50
+ <KratosMyPage>
51
+ <template #extensions>
52
+ <OrderSection />
53
+ <ServiceSection />
54
+ </template>
55
+ </KratosMyPage>
56
+ </template>
57
+ ```
58
+
59
+ 项目模块的 `pages` 声明 `'pages/my/my': { style: { navigationStyle: 'custom', navigationBarTitleText: '' } }`,`views` 声明 `PROFILE_HOME: 'pages/my/my'`,并在宿主 `module-manifest.ts` 中排在 system 模块之后。使用相同的物理路由可以保留微信原生 tab 切换;页面 wrapper 和底部 tabBar 继续由构建插件生成,不在业务页面重复挂载。
60
+
61
+ 插槽可以直接放多个业务卡片,不需要复制公共页面或给顶部入口提供替换内容。需要登录态、用户资料或导航时,通过 core 的公开 store 与导航 API 获取。
62
+
32
63
  模块装配与动态导航约定见 [workspace 文档](../../../README.md)。
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "type": "git",
8
8
  "url": "git@github.com:liujitcn/kratos-admin.git"
9
9
  },
10
- "version": "0.0.83",
10
+ "version": "0.0.84",
11
11
  "type": "module",
12
12
  "files": [
13
13
  "dist",
@@ -25,6 +25,7 @@
25
25
  "import": "./dist/module.mjs",
26
26
  "default": "./dist/module.mjs"
27
27
  },
28
+ "./components/*.vue": "./src/components/*.vue",
28
29
  "./views/*": "./src/views/*",
29
30
  "./package.json": "./package.json"
30
31
  },
@@ -35,7 +36,7 @@
35
36
  "@dcloudio/uni-app": "3.0.0-5010520260709002",
36
37
  "@dcloudio/uni-ui": "^1.4.28",
37
38
  "vue": "^3.4.21",
38
- "@liujitcn/kratos-uni-app-core": "^0.0.83"
39
+ "@liujitcn/kratos-uni-app-core": "^0.0.84"
39
40
  },
40
41
  "devDependencies": {
41
42
  "esbuild": "^0.20.2",
@@ -0,0 +1,166 @@
1
+ <script setup lang="ts">
2
+ import { useSettingStore, useThemeStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
3
+ import { computed } from 'vue'
4
+ import { formatSrc, getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
5
+ import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
6
+ import { navigateAppRoute } from '@liujitcn/kratos-uni-app-core'
7
+ import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
8
+ import { useI18n } from '@liujitcn/kratos-uni-app-core'
9
+
10
+ defineOptions({ name: 'KratosMyPage' })
11
+
12
+ defineSlots<{
13
+ /** 在个人信息和 AI 助手之后渲染的项目业务内容。 */
14
+ extensions?: () => unknown
15
+ }>()
16
+
17
+ // 公共个人中心统一复用用户、设置和主题状态。
18
+ const userStore = useUserStore()
19
+ const settingStore = useSettingStore()
20
+ const themeStore = useThemeStore()
21
+ const { t } = useI18n()
22
+ const isLoggedIn = computed(() => userStore.isAuthenticated())
23
+ const profile = computed(() => userStore.userInfo)
24
+
25
+ /** MP-WEIXIN 原生胶囊按钮右侧避让宽度,写入 --mp-capsule-gap 供 .k-top 预留空间。 */
26
+ const capsuleGap = getMpCapsuleRightGap()
27
+
28
+ /** 昵称或占位账号首字符,用于渐变头像兜底。 */
29
+ const avatarText = computed(() => (profile.value?.nick_name || 'U').slice(0, 1))
30
+
31
+ /** 设计稿齿轮线稿,随主题取色的 data URI,替代 CSS 手绘图标。 */
32
+ const gearIcon = computed(() => {
33
+ const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
34
+ const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.6 1.6 0 0 0-2.7 1.1 2 2 0 1 1-4 0 1.6 1.6 0 0 0-2.6-1.1 2 2 0 1 1-2.8-2.8A1.6 1.6 0 0 0 3 13.9a2 2 0 1 1 0-4 1.6 1.6 0 0 0 1.5-2.7 2 2 0 1 1 2.8-2.8A1.6 1.6 0 0 0 10 4.6a2 2 0 1 1 4 0 1.6 1.6 0 0 0 2.7.6 2 2 0 1 1 2.8 2.8 1.6 1.6 0 0 0-.1 2.6a2.2 2.2 0 1 1 0 4.4Z"/></svg>`
35
+ return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
36
+ })
37
+
38
+ /** 个人卡账号行:登录展示账号,未登录提示去登录。 */
39
+ const accountText = computed(() => {
40
+ if (isLoggedIn.value && profile.value) {
41
+ return profile.value.user_name || profile.value.nick_name || ''
42
+ }
43
+ return t('system.profile.login_prompt')
44
+ })
45
+
46
+ /** 打开移动端 AI 助手静态页,未登录时先进入登录流程。 */
47
+ const navigateToAi = () => {
48
+ if (!userStore.ensureAuthenticated()) {
49
+ navigateToLogin()
50
+ return
51
+ }
52
+ navigateAppRoute('app/ai')
53
+ }
54
+
55
+ /** 打开设置页,未登录时先进入登录流程。 */
56
+ const navigateToSettings = () => {
57
+ if (!userStore.ensureAuthenticated()) {
58
+ navigateToLogin()
59
+ return
60
+ }
61
+ navigateAppRoute('app/settings')
62
+ }
63
+
64
+ /** 打开当前用户资料。 */
65
+ const navigateToProfile = () => navigateAppRoute('app/profile')
66
+ </script>
67
+
68
+ <template>
69
+ <scroll-view enable-back-to-top class="my-viewport" scroll-y :class="themeStore.themeClass">
70
+ <view class="my-content">
71
+ <!-- 顶栏:标题 + 设置入口(Tab 根页,无返回) -->
72
+ <view class="k-top" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
73
+ <view class="k-top__title">{{ t('core.navigation.my') }}</view>
74
+ <view class="k-ic" @tap="navigateToSettings">
75
+ <image class="my-gear" :src="gearIcon" mode="aspectFit" />
76
+ </view>
77
+ </view>
78
+
79
+ <view class="my-stack">
80
+ <!-- 个人资料 -->
81
+ <view class="k-glass k-glass--lit k-pfx my-profile" @tap="navigateToProfile">
82
+ <view class="my-pfx-main">
83
+ <image
84
+ v-if="isLoggedIn && profile"
85
+ class="k-pfx__av"
86
+ :src="profile.avatar ? formatSrc(profile.avatar) : defaultAvatar"
87
+ mode="aspectFill"
88
+ ></image>
89
+ <view v-else class="k-pfx__av">{{ avatarText }}</view>
90
+ <view class="my-pfx-meta">
91
+ <view class="k-pfx__nm">
92
+ {{ isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in') }}
93
+ </view>
94
+ <view class="k-pfx__ac">{{ accountText }}</view>
95
+ </view>
96
+ </view>
97
+ <view class="k-pfx__ent">{{ t('system.profile.title') }} ›</view>
98
+ </view>
99
+
100
+ <!-- AI 助手入口 -->
101
+ <view v-if="settingStore.aiEnabled" class="k-aix" @tap="navigateToAi">
102
+ <view class="k-aix__ic">AI</view>
103
+ <view class="my-aix-copy">
104
+ <view class="k-aix__t">{{ t('system.settings.ai_title') }}</view>
105
+ <view class="k-aix__d">{{ t('system.settings.ai_description') }}</view>
106
+ </view>
107
+ <view class="k-aix__b">{{ t('system.settings.go_ask') }}</view>
108
+ </view>
109
+
110
+ <slot name="extensions" />
111
+ </view>
112
+ </view>
113
+ </scroll-view>
114
+ </template>
115
+
116
+ <style lang="scss">
117
+ .my-viewport {
118
+ height: 100%;
119
+ min-height: 100vh;
120
+ box-sizing: border-box;
121
+ background: var(--kratos-bg-gradient);
122
+ }
123
+
124
+ .my-content {
125
+ padding: calc(env(safe-area-inset-top) + 24rpx) 32rpx calc(40rpx + env(safe-area-inset-bottom));
126
+
127
+ /* #ifdef MP-WEIXIN */
128
+ /* k-top 在小程序端自带 44px 状态栏高度的导航带,页面不再额外让出顶部空间 */
129
+ padding-top: 0;
130
+ /* #endif */
131
+ }
132
+
133
+ .my-stack {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 24rpx;
137
+ margin-top: 16rpx;
138
+ }
139
+
140
+ .my-gear {
141
+ width: 34rpx;
142
+ height: 34rpx;
143
+ }
144
+
145
+ /* k-pfx 仅定义 flex 排布,卡片内边距交由页面控制 */
146
+ .my-profile {
147
+ padding: 36rpx 30rpx;
148
+ }
149
+
150
+ .my-pfx-main {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 24rpx;
154
+ min-width: 0;
155
+ }
156
+
157
+ .my-pfx-meta {
158
+ min-width: 0;
159
+ }
160
+
161
+ /* k-aix 中部文案占位伸展 */
162
+ .my-aix-copy {
163
+ flex: 1;
164
+ min-width: 0;
165
+ }
166
+ </style>
@@ -0,0 +1,9 @@
1
+ <script setup lang="ts">
2
+ defineOptions({ name: 'MyExtensions' })
3
+ </script>
4
+
5
+ <template>
6
+ <view>
7
+ <!-- 项目业务扩展的空实现,可在这里添加订单、收藏或统计卡片。 -->
8
+ </view>
9
+ </template>
@@ -1,157 +1,12 @@
1
1
  <script setup lang="ts">
2
- import { useSettingStore, useThemeStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
3
- import { computed } from 'vue'
4
- import { formatSrc, getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
5
- import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
6
- import { navigateAppRoute } from '@liujitcn/kratos-uni-app-core'
7
- import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
8
- import { useI18n } from '@liujitcn/kratos-uni-app-core'
9
-
10
- // 获取会员信息
11
- const userStore = useUserStore()
12
- const settingStore = useSettingStore()
13
- const themeStore = useThemeStore()
14
- const { t } = useI18n()
15
- const isLoggedIn = computed(() => userStore.isAuthenticated())
16
- const profile = computed(() => userStore.userInfo)
17
-
18
- /** MP-WEIXIN 原生胶囊按钮右侧避让宽度,写入 --mp-capsule-gap 供 .k-top 预留空间。 */
19
- const capsuleGap = getMpCapsuleRightGap()
20
-
21
- /** 昵称或占位账号首字符,用于渐变头像兜底。 */
22
- const avatarText = computed(() => (profile.value?.nick_name || 'U').slice(0, 1))
23
-
24
- /** 设计稿齿轮线稿,随主题取色的 data URI,替代 CSS 手绘图标。 */
25
- const gearIcon = computed(() => {
26
- const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
27
- const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.6 1.6 0 0 0-2.7 1.1 2 2 0 1 1-4 0 1.6 1.6 0 0 0-2.6-1.1 2 2 0 1 1-2.8-2.8A1.6 1.6 0 0 0 3 13.9a2 2 0 1 1 0-4 1.6 1.6 0 0 0 1.5-2.7 2 2 0 1 1 2.8-2.8A1.6 1.6 0 0 0 10 4.6a2 2 0 1 1 4 0 1.6 1.6 0 0 0 2.7.6 2 2 0 1 1 2.8 2.8 1.6 1.6 0 0 0-.1 2.6a2.2 2.2 0 1 1 0 4.4Z"/></svg>`
28
- return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
29
- })
30
-
31
- /** 个人卡账号行:登录展示账号,未登录提示去登录。 */
32
- const accountText = computed(() => {
33
- if (isLoggedIn.value && profile.value) {
34
- return profile.value.user_name || profile.value.nick_name || ''
35
- }
36
- return t('system.profile.login_prompt')
37
- })
38
-
39
- /** 打开移动端 AI 助手静态页,未登录时先进入登录流程。 */
40
- const navigateToAi = () => {
41
- if (!userStore.ensureAuthenticated()) {
42
- navigateToLogin()
43
- return
44
- }
45
- navigateAppRoute('app/ai')
46
- }
47
-
48
- /** 打开设置页,未登录时先进入登录流程。 */
49
- const navigateToSettings = () => {
50
- if (!userStore.ensureAuthenticated()) {
51
- navigateToLogin()
52
- return
53
- }
54
- navigateAppRoute('app/settings')
55
- }
56
-
57
- /** 打开当前用户资料。 */
58
- const navigateToProfile = () => navigateAppRoute('app/profile')
2
+ import KratosMyPage from '@liujitcn/kratos-uni-app-system/components/KratosMyPage.vue'
3
+ import MyExtensions from './components/MyExtensions.vue'
59
4
  </script>
60
5
 
61
6
  <template>
62
- <scroll-view enable-back-to-top class="my-viewport" scroll-y :class="themeStore.themeClass">
63
- <view class="my-content">
64
- <!-- 顶栏:标题 + 设置入口(Tab 根页,无返回) -->
65
- <view class="k-top" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
66
- <view class="k-top__title">{{ t('core.navigation.my') }}</view>
67
- <view class="k-ic" @tap="navigateToSettings">
68
- <image class="my-gear" :src="gearIcon" mode="aspectFit" />
69
- </view>
70
- </view>
71
-
72
- <view class="my-stack">
73
- <!-- 个人资料 -->
74
- <view class="k-glass k-glass--lit k-pfx my-profile" @tap="navigateToProfile">
75
- <view class="my-pfx-main">
76
- <image
77
- v-if="isLoggedIn && profile"
78
- class="k-pfx__av"
79
- :src="profile.avatar ? formatSrc(profile.avatar) : defaultAvatar"
80
- mode="aspectFill"
81
- ></image>
82
- <view v-else class="k-pfx__av">{{ avatarText }}</view>
83
- <view class="my-pfx-meta">
84
- <view class="k-pfx__nm">
85
- {{ isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in') }}
86
- </view>
87
- <view class="k-pfx__ac">{{ accountText }}</view>
88
- </view>
89
- </view>
90
- <view class="k-pfx__ent">{{ t('system.profile.title') }} ›</view>
91
- </view>
92
-
93
- <!-- AI 助手入口 -->
94
- <view v-if="settingStore.aiEnabled" class="k-aix" @tap="navigateToAi">
95
- <view class="k-aix__ic">AI</view>
96
- <view class="my-aix-copy">
97
- <view class="k-aix__t">{{ t('system.settings.ai_title') }}</view>
98
- <view class="k-aix__d">{{ t('system.settings.ai_description') }}</view>
99
- </view>
100
- <view class="k-aix__b">{{ t('system.settings.go_ask') }}</view>
101
- </view>
102
- </view>
103
- </view>
104
- </scroll-view>
7
+ <KratosMyPage>
8
+ <template #extensions>
9
+ <MyExtensions />
10
+ </template>
11
+ </KratosMyPage>
105
12
  </template>
106
-
107
- <style lang="scss">
108
- .my-viewport {
109
- height: 100%;
110
- min-height: 100vh;
111
- box-sizing: border-box;
112
- background: var(--kratos-bg-gradient);
113
- }
114
-
115
- .my-content {
116
- padding: calc(env(safe-area-inset-top) + 24rpx) 32rpx calc(40rpx + env(safe-area-inset-bottom));
117
-
118
- /* #ifdef MP-WEIXIN */
119
- /* k-top 在小程序端自带 44px 状态栏高度的导航带,页面不再额外让出顶部空间 */
120
- padding-top: 0;
121
- /* #endif */
122
- }
123
-
124
- .my-stack {
125
- display: flex;
126
- flex-direction: column;
127
- gap: 24rpx;
128
- margin-top: 16rpx;
129
- }
130
-
131
- .my-gear {
132
- width: 34rpx;
133
- height: 34rpx;
134
- }
135
-
136
- /* k-pfx 仅定义 flex 排布,卡片内边距交由页面控制 */
137
- .my-profile {
138
- padding: 36rpx 30rpx;
139
- }
140
-
141
- .my-pfx-main {
142
- display: flex;
143
- align-items: center;
144
- gap: 24rpx;
145
- min-width: 0;
146
- }
147
-
148
- .my-pfx-meta {
149
- min-width: 0;
150
- }
151
-
152
- /* k-aix 中部文案占位伸展 */
153
- .my-aix-copy {
154
- flex: 1;
155
- min-width: 0;
156
- }
157
- </style>