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

package/README.md

@@ -13,6 +13,34 @@
 
 页面配置统一登记在 `src/pages.ts`，运行时映射位于 `src/index.ts`，构建期描述位于 `src/build.ts`。页面私有组件放在页面目录的 `components` 中，不会被 runner 扫描为路由。
 
+## 个人中心扩展
+
+公共组件 `KratosMyPage` 保留顶部标题与设置、个人信息和 AI 助手入口；AI 卡片继续由应用的 `aiEnabled` 配置控制显隐。React `children` 作为业务扩展区，位于这些固定内容之后，与它们共用滚动区域、主题和卡片间距。未传入内容时不增加容器或留白，业务卡片、数据请求和权限由项目模块维护。
+
+公共组件与样式位于 `src/components/KratosMyPage.tsx` 和 `KratosMyPage.scss`。内置 [我的页面](src/views/pages/my/my.tsx) 已使用该组件，并挂载 [MyExtensions 空实现](src/views/pages/my/components/MyExtensions.tsx)。空实现返回 `null`，不显示占位卡片；项目可以按这个结构组织自己的业务内容。
+
+在项目业务模块的 `src/views/pages/my/my.tsx` 复用公开组件入口：
+
+```tsx
+import KratosMyPage from '@liujitcn/kratos-taro-app-system/components/KratosMyPage'
+import OrderSection from './components/OrderSection'
+import ServiceSection from './components/ServiceSection'
+
+/** MyPage 组合公共个人中心与项目业务卡片。 */
+export default function MyPage() {
+  return (
+    <KratosMyPage>
+      <OrderSection />
+      <ServiceSection />
+    </KratosMyPage>
+  )
+}
+```
+
+项目模块的 `pages` 声明 `'pages/my/my': { style: { navigationStyle: 'custom', navigationBarTitleText: '' } }`，`views` 声明 `PROFILE_HOME: 'pages/my/my'`，并在宿主 `module-manifest.ts` 中排在 system 模块之后。构建期 `buildModule.pages` 复用相同页面配置。使用相同的物理路由可以保留微信原生 tab 切换；页面 wrapper 和底部 tabBar 继续由 runner 生成，不在业务页面重复挂载。
+
+扩展区可以直接放多个业务卡片，不需要复制公共页面或给顶部入口提供替换内容。需要登录态、用户资料或导航时，通过 core 的公开 store 与导航 API 获取。
+
 ## AI 助手
 
 AI 页面支持会话创建与切换、历史会话搜索、消息加载、附件上传、复制、删除、再生成、工具提示和快捷入口。Provider 与模型通过 `AiModelService` 加载，知识库通过 `AiKnowledgeService` 加载并可多选，发送消息时携带所选知识库编号。H5 使用 Fetch SSE，微信小程序使用 chunked 请求，两端共用增量 SSE 解析器和相同事件契约。

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.83",
+  "version": "0.0.84",
   "type": "module",
   "files": [
     "dist",
@@ -28,6 +28,7 @@
     },
     "./api/*": "./src/api/*",
     "./rpc/*": "./src/rpc/*",
+    "./components/*": "./src/components/*.tsx",
     "./views/*": "./src/views/*",
     "./package.json": "./package.json"
   },
@@ -38,8 +39,8 @@
     "@tarojs/components": "4.2.1",
     "@tarojs/taro": "4.2.1",
     "react": "18.3.1",
-    "@liujitcn/kratos-taro-app-core": "^0.0.83",
-    "@liujitcn/kratos-taro-app-ui": "^0.0.83"
+    "@liujitcn/kratos-taro-app-core": "^0.0.84",
+    "@liujitcn/kratos-taro-app-ui": "^0.0.84"
   },
   "scripts": {
     "build": "pnpm run build:entries && pnpm pack --pack-destination ../../../dist/npm",

package/src/{views/pages/my/my.scss → components/KratosMyPage.scss}

@@ -1,3 +1,4 @@
+/* 公共个人中心与业务扩展共用完整页面视口。 */
 page {
   height: 100%;
   overflow: hidden;

package/src/components/KratosMyPage.tsx

@@ -0,0 +1,110 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { Image, ScrollView, View } from '@tarojs/components'
+import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
+import {
+  formatSrc,
+  getMpCapsuleRightGap,
+  navigateAppRoute,
+  navigateToLogin,
+  useI18n,
+  useSettingStore,
+  useThemeStore,
+  useUserStore,
+} from '@liujitcn/kratos-taro-app-core'
+import './KratosMyPage.scss'
+
+/** KratosMyPageProps 个人中心的项目业务扩展属性。 */
+export interface KratosMyPageProps {
+  /** 在个人信息和 AI 助手之后渲染的项目业务内容。 */
+  children?: ReactNode
+}
+
+/** KratosMyPage 保留公共个人中心入口，并在下方渲染项目业务内容。 */
+export default function KratosMyPage({ children }: KratosMyPageProps) {
+  const { t } = useI18n()
+  const themeStore = useThemeStore()
+  const profile = useUserStore((state) => state.userInfo)
+  const isLoggedIn = useUserStore((state) => state.isAuthenticated())
+  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
+  const aiEnabled = useSettingStore((state) => state.aiEnabled)
+  const avatarText = (profile?.nick_name || 'U').slice(0, 1)
+  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
+  const capsuleGap = getMpCapsuleRightGap()
+  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
+  /** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
+  const gearIcon = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${
+      themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+    }" 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>`,
+  )}`
+  /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
+  const accountText =
+    isLoggedIn && profile ? profile.user_name || profile.nick_name || '' : t('system.profile.login_prompt')
+
+  /** 打开需要登录的公共页面。 */
+  const openAuthenticatedPage = (route: string) => {
+    if (!ensureAuthenticated()) {
+      navigateToLogin()
+      return
+    }
+    navigateAppRoute(route)
+  }
+
+  return (
+    <ScrollView
+      enableBackToTop
+      scrollY
+      className={`my-viewport${process.env.TARO_ENV === 'weapp' ? ' my-viewport--weapp' : ''} ${
+        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
+      }`}
+    >
+      <View className='my-content'>
+        <View className='k-top' style={topNavStyle}>
+          <View className='k-top__title'>{t('core.navigation.my')}</View>
+          <View className='k-ic' onClick={() => openAuthenticatedPage('app/settings')}>
+            <Image className='my-gear' src={gearIcon} mode='aspectFit' />
+          </View>
+        </View>
+
+        <View className='my-stack'>
+          <View
+            className='k-glass k-glass--lit k-pfx my-profile'
+            onClick={() => navigateAppRoute('app/profile')}
+          >
+            <View className='my-pfx-main'>
+              {isLoggedIn && profile ? (
+                <Image
+                  className='k-pfx__av'
+                  src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
+                  mode='aspectFill'
+                />
+              ) : (
+                <View className='k-pfx__av'>{avatarText}</View>
+              )}
+              <View className='my-pfx-meta'>
+                <View className='k-pfx__nm'>
+                  {isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in')}
+                </View>
+                <View className='k-pfx__ac'>{accountText}</View>
+              </View>
+            </View>
+            <View className='k-pfx__ent'>{t('system.profile.title')} ›</View>
+          </View>
+
+          {aiEnabled ? (
+            <View className='k-aix' onClick={() => openAuthenticatedPage('app/ai')}>
+              <View className='k-aix__ic'>AI</View>
+              <View className='my-aix-copy'>
+                <View className='k-aix__t'>{t('system.settings.ai_title')}</View>
+                <View className='k-aix__d'>{t('system.settings.ai_description')}</View>
+              </View>
+              <View className='k-aix__b'>{t('system.settings.go_ask')}</View>
+            </View>
+          ) : null}
+
+          {children}
+        </View>
+      </View>
+    </ScrollView>
+  )
+}

package/src/views/pages/my/components/MyExtensions.tsx

@@ -0,0 +1,4 @@
+/** MyExtensions 项目业务扩展的空实现，可添加订单、收藏或统计卡片。 */
+export default function MyExtensions() {
+  return null
+}

package/src/views/pages/my/my.tsx

@@ -1,101 +1,11 @@
-import type { CSSProperties } from 'react'
-import { Image, ScrollView, View } from '@tarojs/components'
-import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
-import {
-  formatSrc,
-  getMpCapsuleRightGap,
-  navigateAppRoute,
-  navigateToLogin,
-  useI18n,
-  useSettingStore,
-  useThemeStore,
-  useUserStore,
-} from '@liujitcn/kratos-taro-app-core'
-import './my.scss'
+import KratosMyPage from '@liujitcn/kratos-taro-app-system/components/KratosMyPage'
+import MyExtensions from './components/MyExtensions'
 
-/** 个人中心首页。 */
+/** MyPage 组合公共个人中心与项目业务扩展。 */
 export default function MyPage() {
-  const { t } = useI18n()
-  const themeStore = useThemeStore()
-  const profile = useUserStore((state) => state.userInfo)
-  const isLoggedIn = useUserStore((state) => state.isAuthenticated())
-  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
-  const aiEnabled = useSettingStore((state) => state.aiEnabled)
-  const avatarText = (profile?.nick_name || 'U').slice(0, 1)
-  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
-  const capsuleGap = getMpCapsuleRightGap()
-  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
-  /** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
-  const gearIcon = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${
-      themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
-    }" 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>`,
-  )}`
-  /** 个人卡账号行：登录展示账号，未登录提示去登录。 */
-  const accountText =
-    isLoggedIn && profile ? profile.user_name || profile.nick_name || '' : t('system.profile.login_prompt')
-
-  const openAuthenticatedPage = (route: string) => {
-    if (!ensureAuthenticated()) {
-      navigateToLogin()
-      return
-    }
-    navigateAppRoute(route)
-  }
-
   return (
-    <ScrollView
-      enableBackToTop
-      scrollY
-      className={`my-viewport${process.env.TARO_ENV === 'weapp' ? ' my-viewport--weapp' : ''} ${
-        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
-      }`}
-    >
-      <View className='my-content'>
-        <View className='k-top' style={topNavStyle}>
-          <View className='k-top__title'>{t('core.navigation.my')}</View>
-          <View className='k-ic' onClick={() => openAuthenticatedPage('app/settings')}>
-            <Image className='my-gear' src={gearIcon} mode='aspectFit' />
-          </View>
-        </View>
-
-        <View className='my-stack'>
-          <View
-            className='k-glass k-glass--lit k-pfx my-profile'
-            onClick={() => navigateAppRoute('app/profile')}
-          >
-            <View className='my-pfx-main'>
-              {isLoggedIn && profile ? (
-                <Image
-                  className='k-pfx__av'
-                  src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
-                  mode='aspectFill'
-                />
-              ) : (
-                <View className='k-pfx__av'>{avatarText}</View>
-              )}
-              <View className='my-pfx-meta'>
-                <View className='k-pfx__nm'>
-                  {isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in')}
-                </View>
-                <View className='k-pfx__ac'>{accountText}</View>
-              </View>
-            </View>
-            <View className='k-pfx__ent'>{t('system.profile.title')} ›</View>
-          </View>
-
-          {aiEnabled ? (
-            <View className='k-aix' onClick={() => openAuthenticatedPage('app/ai')}>
-              <View className='k-aix__ic'>AI</View>
-              <View className='my-aix-copy'>
-                <View className='k-aix__t'>{t('system.settings.ai_title')}</View>
-                <View className='k-aix__d'>{t('system.settings.ai_description')}</View>
-              </View>
-              <View className='k-aix__b'>{t('system.settings.go_ask')}</View>
-            </View>
-          ) : null}
-        </View>
-      </View>
-    </ScrollView>
+    <KratosMyPage>
+      <MyExtensions />
+    </KratosMyPage>
   )
 }