Procházet zdrojové kódy

✨ feat(ui): 创建用人模块共享UI组件包并重构依赖

- 创建新的 `yongren-shared-ui` 包,用于存放用人模块专用的共享UI组件
- 将 `YongrenTabBarLayout` 组件从 `mini-shared-ui-components` 迁移到 `yongren-shared-ui`
- 更新仪表板页面包依赖,添加对新共享包和企业认证UI包的引用
- 更新仪表板组件导入,使用新的包路径
- 在项目故事文档中更新任务进度和文件列表
yourname před 4 týdny
rodič
revize
b41aa647d7

+ 11 - 1
docs/stories/014.002.story.md

@@ -21,13 +21,14 @@ Approved
   - [x] 识别各页面的依赖关系
   - [x] 分析页面间共享的组件和逻辑
   - [x] 确定分包方案
-- [x] 任务2:创建独立的页面包 (验收标准: 1, 3)
+- [ ] 任务2:创建独立的页面包 (验收标准: 1, 3)
   - [x] 创建 `mini-ui-packages/yongren-dashboard-ui`:仪表板页面包
   - [x] 创建 `mini-ui-packages/yongren-order-management-ui`:订单管理相关页面包
   - [x] 创建 `mini-ui-packages/yongren-talent-management-ui`:人才管理相关页面包
   - [x] 创建 `mini-ui-packages/yongren-settings-ui`:设置页面包
   - [x] 创建 `mini-ui-packages/yongren-statistics-ui`:统计页面包
   - [x] 创建 `mini-ui-packages/mini-enterprise-auth-ui`:企业认证UI包
+  - [ ] 创建 `mini-ui-packages/yongren-shared-ui`:用人模块共享UI组件包
   - [x] 为每个包配置独立的package.json
   - [x] 为每个包配置TypeScript配置
   - [x] 为每个包配置测试配置
@@ -249,6 +250,15 @@ claude-sonnet
 - mini-ui-packages/yongren-statistics-ui/package.json
 - mini-ui-packages/yongren-statistics-ui/tsconfig.json
 - mini-ui-packages/yongren-statistics-ui/jest.config.cjs
+- mini-ui-packages/mini-enterprise-auth-ui/package.json
+- mini-ui-packages/mini-enterprise-auth-ui/tsconfig.json
+- mini-ui-packages/mini-enterprise-auth-ui/jest.config.cjs
+- mini-ui-packages/mini-enterprise-auth-ui/src/api/enterpriseAuthClient.ts
+- mini-ui-packages/mini-enterprise-auth-ui/src/api/index.ts
+- mini-ui-packages/mini-enterprise-auth-ui/src/hooks/useAuth.tsx
+- mini-ui-packages/mini-enterprise-auth-ui/src/hooks/useRequireAuth.ts
+- mini-ui-packages/mini-enterprise-auth-ui/src/hooks/index.ts
+- mini-ui-packages/mini-enterprise-auth-ui/src/index.ts
 - mini-ui-packages/mini-shared-ui-components/src/yongren-tab-bar-layout.tsx
 
 **修改文件:**

+ 0 - 1
mini-ui-packages/mini-shared-ui-components/src/index.ts

@@ -10,7 +10,6 @@ export { Label, labelVariants } from './label'
 export { Navbar, NavbarPresets, createNavbar } from './navbar'
 export { PageContainer } from './page-container'
 export { TabBar } from './tab-bar'
-export { default as YongrenTabBarLayout } from './yongren-tab-bar-layout'
 export { UserStatusBar } from './user-status-bar'
 
 // 导出工具函数

+ 2 - 0
mini-ui-packages/yongren-dashboard-ui/package.json

@@ -27,6 +27,8 @@
   },
   "dependencies": {
     "@d8d/mini-shared-ui-components": "workspace:*",
+    "@d8d/yongren-shared-ui": "workspace:*",
+    "@d8d/mini-enterprise-auth-ui": "workspace:*",
     "@d8d/server": "workspace:*",
     "@tarojs/components": "4.1.4",
     "@tarojs/react": "4.1.4",

+ 2 - 3
mini-ui-packages/yongren-dashboard-ui/src/Dashboard.tsx

@@ -2,10 +2,9 @@ import React, { useEffect, useState } from 'react'
 import { View, Text, ScrollView } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { YongrenTabBarLayout } from '@d8d/mini-shared-ui-components'
+import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui'
 import { enterpriseCompanyClient } from './api'
-import { useAuth } from '@d8d/mini-shared-ui-components' // TODO: 需要迁移认证hooks
-import { useRequireAuth } from '@d8d/mini-shared-ui-components' // TODO: 需要迁移认证hooks
+import { useAuth, useRequireAuth } from '@d8d/mini-enterprise-auth-ui'
 import './Dashboard.css'
 
 // 类型定义

+ 40 - 0
mini-ui-packages/yongren-shared-ui/jest.config.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/tests/$1',
+    '^@tarojs/taro$': '<rootDir>/tests/__mocks__/taroMock.ts',
+    '\\.(css|less|scss|sass)$': '<rootDir>/tests/__mocks__/styleMock.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/tests/__mocks__/fileMock.js'
+  },
+  testMatch: [
+    '<rootDir>/tests/**/*.spec.{ts,tsx}',
+    '<rootDir>/tests/**/*.test.{ts,tsx}'
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.{ts,tsx}',
+    '!src/**/*.stories.{ts,tsx}'
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/dist/',
+    '/coverage/'
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: 'tsconfig.json'
+    }],
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(swiper|@tarojs)/)'
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json']
+}

+ 58 - 0
mini-ui-packages/yongren-shared-ui/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@d8d/yongren-shared-ui",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "用人模块共享UI组件包 - 提供yongren模块专用的共享UI组件",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@d8d/mini-shared-ui-components": "workspace:*",
+    "@tarojs/components": "4.1.4",
+    "@tarojs/react": "4.1.4",
+    "@tarojs/taro": "4.1.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^18",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.4.5",
+    "typescript": "^5.4.5"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "yongren",
+    "shared",
+    "ui",
+    "components",
+    "mini",
+    "taro",
+    "react"
+  ],
+  "author": "D8D Team",
+  "license": "MIT"
+}

+ 2 - 0
mini-ui-packages/yongren-shared-ui/src/index.ts

@@ -0,0 +1,2 @@
+export { default as YongrenTabBarLayout } from './yongren-tab-bar-layout'
+export type { YongrenTabBarLayoutProps } from './yongren-tab-bar-layout'

+ 87 - 0
mini-ui-packages/yongren-shared-ui/src/yongren-tab-bar-layout.tsx

@@ -0,0 +1,87 @@
+import React, { ReactNode } from 'react'
+import { View } from '@tarojs/components'
+import { TabBar, TabBarItem } from './tab-bar'
+import Taro from '@tarojs/taro'
+
+export interface YongrenTabBarLayoutProps {
+  children: ReactNode
+  activeKey: string
+}
+
+const yongrenTabBarItems: TabBarItem[] = [
+  {
+    key: 'dashboard',
+    title: '首页',
+    iconClass: 'i-heroicons-home-20-solid',
+    selectedIconClass: 'i-heroicons-home-20-solid',
+  },
+  {
+    key: 'talent',
+    title: '人才',
+    iconClass: 'i-heroicons-user-group-20-solid',
+    selectedIconClass: 'i-heroicons-user-group-20-solid',
+  },
+  {
+    key: 'order',
+    title: '订单',
+    iconClass: 'i-heroicons-document-text-20-solid',
+    selectedIconClass: 'i-heroicons-document-text-20-solid',
+  },
+  {
+    key: 'statistics',
+    title: '数据',
+    iconClass: 'i-heroicons-chart-bar-20-solid',
+    selectedIconClass: 'i-heroicons-chart-bar-20-solid',
+  },
+  {
+    key: 'settings',
+    title: '设置',
+    iconClass: 'i-heroicons-cog-6-tooth-20-solid',
+    selectedIconClass: 'i-heroicons-cog-6-tooth-20-solid',
+  },
+]
+
+const YongrenTabBarLayout: React.FC<YongrenTabBarLayoutProps> = ({ children, activeKey }) => {
+  const handleTabChange = (key: string) => {
+    // 使用 Taro 的导航 API 进行页面跳转
+    switch (key) {
+      case 'dashboard':
+        Taro.switchTab({ url: '/pages/yongren/dashboard/index' })
+        break
+      case 'talent':
+        Taro.switchTab({ url: '/pages/yongren/talent/list/index' })
+        break
+      case 'order':
+        Taro.switchTab({ url: '/pages/yongren/order/list/index' })
+        break
+      case 'statistics':
+        Taro.switchTab({ url: '/pages/yongren/statistics/index' })
+        break
+      case 'settings':
+        Taro.switchTab({ url: '/pages/profile/index' })
+        break
+      default:
+        break
+    }
+  }
+
+  return (
+    <View className="min-h-screen bg-gray-50 flex flex-col">
+      <View className="flex-1 flex flex-col">
+        {children}
+      </View>
+      <TabBar
+        items={yongrenTabBarItems}
+        activeKey={activeKey}
+        onChange={handleTabChange}
+        fixed={true}
+        safeArea={true}
+        color="#999"
+        selectedColor="#3b82f6"
+        backgroundColor="white"
+      />
+    </View>
+  )
+}
+
+export default YongrenTabBarLayout

+ 29 - 0
mini-ui-packages/yongren-shared-ui/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": ".",
+    "jsx": "react-jsx",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "types": ["react", "node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*", "tests"],
+  "exclude": ["node_modules", "dist"]
+}