|
|
@@ -102,7 +102,7 @@ packages/
|
|
|
|
|
|
3. **Story 3:** 租户模块集成到server - 将租户模块包(@d8d/tenant-module-mt)集成到server中,包括租户管理路由、超级管理员认证和租户数据隔离功能,确保server能够支持租户管理操作
|
|
|
|
|
|
-4. **Story 4:** 租户UI包集成到Web - 将多租户UI包集成到Web应用中,包括租户管理界面、租户切换功能和租户感知的UI组件,确保Web应用能够支持多租户操作和界面展示
|
|
|
+4. **Story 4:** 租户UI包集成到Web - 复制`web/src/client/admin`目录为`web/src/client/tenant`,在tenant目录中集成多租户UI包,替换原有的auth provider、登录页等组件,确保Web应用能够支持多租户操作和界面展示
|
|
|
|
|
|
### 阶段 3: 系统集成和验证
|
|
|
|
|
|
@@ -190,6 +190,67 @@ import { GoodsManagement } from '@d8d/goods-management-ui-mt' // 改为多租
|
|
|
}
|
|
|
```
|
|
|
|
|
|
+### 租户UI包集成实施步骤
|
|
|
+
|
|
|
+```bash
|
|
|
+# 1. 复制admin目录为tenant目录
|
|
|
+cp -r web/src/client/admin web/src/client/tenant
|
|
|
+
|
|
|
+# 2. 修改tenant目录中的关键文件
|
|
|
+# - web/src/client/tenant/index.tsx: 替换AuthProvider为租户专用的AuthProvider
|
|
|
+# - web/src/client/tenant/hooks/AuthProvider.tsx: 实现租户感知的认证逻辑
|
|
|
+# - web/src/client/tenant/pages/Login.tsx: 添加租户选择功能
|
|
|
+# - web/src/client/tenant/routes.tsx: 添加租户管理路由
|
|
|
+
|
|
|
+# 3. 集成租户管理UI包
|
|
|
+# - 在routes.tsx中添加租户管理路由
|
|
|
+# - 在api_init.ts中初始化租户管理客户端
|
|
|
+```
|
|
|
+
|
|
|
+```typescript
|
|
|
+// web/src/client/tenant/routes.tsx - 添加租户管理路由
|
|
|
+import { TenantManagement } from '@d8d/tenant-management-ui-mt';
|
|
|
+
|
|
|
+// 在路由配置中添加
|
|
|
+{
|
|
|
+ path: 'tenants',
|
|
|
+ element: <TenantManagement />, // 租户管理界面
|
|
|
+},
|
|
|
+
|
|
|
+// web/src/client/tenant/hooks/AuthProvider.tsx - 租户感知的认证
|
|
|
+const handleLogin = async (username: string, password: string, tenantId?: number): Promise<void> => {
|
|
|
+ // 添加租户ID到登录请求
|
|
|
+ const response = await authClient.login.$post({
|
|
|
+ json: {
|
|
|
+ username,
|
|
|
+ password,
|
|
|
+ tenantId
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // ... 其他登录逻辑
|
|
|
+};
|
|
|
+
|
|
|
+// web/src/client/tenant/pages/Login.tsx - 添加租户选择
|
|
|
+const [selectedTenant, setSelectedTenant] = useState<number | null>(null);
|
|
|
+
|
|
|
+// 在表单中添加租户选择器
|
|
|
+<FormField
|
|
|
+ control={form.control}
|
|
|
+ name="tenantId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>选择租户</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <TenantSelect
|
|
|
+ value={field.value}
|
|
|
+ onChange={field.onChange}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
### API客户端初始化
|
|
|
|
|
|
```typescript
|