@wecode-team/we0-cms 1.0.18

package/README.md

@@ -0,0 +1,450 @@
+# @wecode-team/we0-cms
+
+一个基于 React 的动态 CMS 前端组件库，支持 shadcn/ui 风格的现代化 UI，与 `@wecode-team/cms-supabase-api` 配合使用实现完整的内容管理系统。
+
+## 📖 设计理念
+
+### 核心思想
+
+本包的核心理念是 **"配置驱动的 CMS UI"**：
+
+1. **模型驱动 UI**：根据 JSON Schema 模型配置自动生成表单和表格
+2. **零代码管理**：无需编写代码，通过配置即可实现数据的增删改查
+3. **关系可视化**：支持关联字段的下拉选择和数据展示
+4. **多租户支持**：通过 Session ID 实现数据隔离
+
+### 架构设计
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    CmsLayoutShadcn                          │
+│                   (主布局组件)                               │
+├─────────────────────────────────────────────────────────────┤
+│  UI Components (shadcn/ui)                                  │
+│  ├── Sidebar         侧边栏导航                             │
+│  ├── DataTable       数据表格                               │
+│  ├── Dialog          弹窗表单                               │
+│  └── Form Controls   表单控件                               │
+├─────────────────────────────────────────────────────────────┤
+│  Pages (页面组件)                                            │
+│  ├── LoginPage       登录页面                               │
+│  ├── DataListPage    数据列表页                             │
+│  └── DataManagePage  数据管理页（按模型）                    │
+├─────────────────────────────────────────────────────────────┤
+│  Services (服务层)                                           │
+│  ├── modelApi        模型管理 API                           │
+│  ├── dataApi         数据操作 API                           │
+│  └── authApi         认证 API                               │
+├─────────────────────────────────────────────────────────────┤
+│  Request Layer (请求层)                                      │
+│  └── request.ts      Axios 封装，自动添加 Token             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 数据流
+
+```
+用户操作 → UI 组件 → Services API → HTTP 请求 → 后端 API → Supabase
+                                        ↓
+用户界面 ← UI 更新 ← State 更新 ← API 响应 ←
+```
+
+## 🚀 安装
+
+```bash
+npm install @wecode-team/we0-cms
+# 或
+pnpm add @wecode-team/we0-cms
+# 或
+yarn add @wecode-team/we0-cms
+```
+
+## 📋 依赖
+
+### Peer Dependencies（必须安装）
+
+```json
+{
+  "react": "^18.2.0",
+  "react-dom": "^18.2.0"
+}
+```
+
+### 内置依赖
+
+- `@radix-ui/*` - 无障碍 UI 原语
+- `lucide-react` - 图标库
+- `tailwind-merge` - Tailwind 类名合并
+- `class-variance-authority` - 变体样式管理
+- `dayjs` - 日期处理
+
+## 🔧 快速开始
+
+### 第一步：配置 Tailwind CSS
+
+确保你的项目已配置 Tailwind CSS：
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@wecode-team/we0-cms/dist/**/*.{js,jsx}'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
+```
+
+### 第二步：引入样式
+
+```jsx
+import '@wecode-team/we0-cms/dist/index.css'
+```
+
+### 第三步：使用组件
+
+```jsx
+import React from 'react'
+import { CmsLayoutShadcn, setSessionId } from '@wecode-team/we0-cms'
+import '@wecode-team/we0-cms/dist/index.css'
+
+// 设置 Session ID（用于多租户隔离）
+setSessionId('your-session-id')
+
+// 定义模型配置
+const modelData = {
+  models: [
+    {
+      id: 1,
+      name: '用户模型',
+      table_name: 'users',
+      json_schema: {
+        fields: [
+          {
+            name: 'name',
+            type: 'string',
+            comment: '用户姓名',
+            required: true,
+            maxLength: 100
+          },
+          {
+            name: 'email',
+            type: 'email',
+            unique: true,
+            comment: '用户邮箱',
+            required: true
+          },
+          {
+            name: 'age',
+            type: 'integer',
+            comment: '年龄',
+            required: false
+          }
+        ]
+      },
+      created_at: '2023-07-18T19:00:28.098Z',
+      updated_at: '2023-07-18T19:00:28.099Z'
+    }
+  ]
+}
+
+function App() {
+  return (
+    <div className="min-h-screen">
+      <CmsLayoutShadcn inputModels={modelData} />
+    </div>
+  )
+}
+
+export default App
+```
+
+## 📚 组件 API
+
+### CmsLayoutShadcn
+
+主布局组件，包含侧边栏、导航和内容区域。
+
+```tsx
+interface CmsLayoutProps {
+  inputModels: {
+    models: CmsModel[]
+  }
+  /**
+   * 是否跳过登录验证（免登录模式）
+   * 当设置为 true 时，组件将跳过所有登录检查，直接进入后台配置页面
+   * 适用于由使用方统一处理鉴权的场景
+   * @default false
+   */
+  skipAuth?: boolean
+}
+```
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `inputModels` | `{ models: CmsModel[] }` | - | 模型配置对象 |
+| `skipAuth` | `boolean` | `false` | 是否跳过登录验证 |
+
+#### 使用示例
+
+```jsx
+// 标准模式（需要登录）
+<CmsLayoutShadcn inputModels={modelData} />
+
+// 免登录模式（适用于已有鉴权系统）
+<CmsLayoutShadcn inputModels={modelData} skipAuth={true} />
+```
+
+### setSessionId
+
+设置会话 ID，用于多租户数据隔离。
+
+```typescript
+import { setSessionId } from '@wecode-team/we0-cms'
+
+// 设置 Session ID
+setSessionId('tenant-123')
+
+// 后续 API 调用会自动添加前缀
+// 例如：GET /data/users → GET /data/tenant-123_users
+```
+
+## 🏗️ 模型配置
+
+### CmsModel 结构
+
+```typescript
+interface CmsModel {
+  id: number
+  name: string           // 模型显示名称
+  table_name: string     // 数据表名
+  json_schema: {
+    fields: SchemaField[]
+  }
+  created_at: string
+  updated_at: string
+}
+```
+
+### SchemaField 结构
+
+```typescript
+interface SchemaField {
+  name: string           // 字段名
+  type: string           // 字段类型
+  comment?: string       // 字段显示名称
+  required?: boolean     // 是否必填
+  unique?: boolean       // 是否唯一
+  maxLength?: number     // 最大长度
+  defaultValue?: any     // 默认值
+  relation?: RelationConfig  // 关联配置
+}
+```
+
+### 字段类型
+
+| 类型 | 渲染组件 | 说明 |
+|------|----------|------|
+| `string` | `<Input />` | 单行文本输入 |
+| `text` | `<Textarea />` | 多行文本输入 |
+| `integer` | `<Input type="number" />` | 整数输入 |
+| `float` | `<Input type="number" />` | 浮点数输入 |
+| `boolean` | `<Switch />` | 开关切换 |
+| `date` | `<Input type="date" />` | 日期选择 |
+| `datetime` | `<Input type="datetime-local" />` | 日期时间选择 |
+| `email` | `<Input type="email" />` | 邮箱输入 |
+| `relation` | `<Select />` | 关联下拉选择 |
+
+### 关联字段配置
+
+```typescript
+interface RelationConfig {
+  type: 'belongsTo' | 'hasMany' | 'belongsToMany'
+  target: string         // 目标表名
+  foreignKey?: string    // 外键字段名
+  displayField?: string  // 下拉显示的字段
+  showInList?: boolean   // 是否在列表中显示
+}
+```
+
+#### 示例：文章关联作者
+
+```javascript
+{
+  name: 'author',
+  type: 'relation',
+  comment: '作者',
+  required: true,
+  relation: {
+    type: 'belongsTo',
+    target: 'users',        // 关联 users 表
+    foreignKey: 'author_id', // 外键字段
+    displayField: 'name'     // 下拉显示用户姓名
+  }
+}
+```
+
+## 📡 API 配置
+
+### 配置 API 基础 URL
+
+在 `request.ts` 中配置：
+
+```typescript
+// 创建自定义 request 实例
+import axios from 'axios'
+
+const request = axios.create({
+  baseURL: 'http://your-api-url/api/cms',
+  timeout: 10000
+})
+
+// 请求拦截器 - 自动添加 Token
+request.interceptors.request.use((config) => {
+  const token = localStorage.getItem('cms_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+```
+
+### API 服务
+
+```typescript
+import { modelApi, dataApi, authApi } from '@wecode-team/we0-cms'
+
+// 模型 API
+await modelApi.getModels()
+await modelApi.createModel(data)
+await modelApi.updateModel(data)
+await modelApi.deleteModel(id)
+
+// 数据 API
+await dataApi.getTableData('users', { page: 1, limit: 10 })
+await dataApi.createData('users', { name: 'John' })
+await dataApi.updateData('users', { id: '1', name: 'Jane' })
+await dataApi.deleteData('users', '1')
+
+// 关联选项 API
+await dataApi.getRelationOptions('users', { displayField: 'name' })
+
+// 认证 API
+await authApi.login({ username: 'admin', password: '123456' })
+await authApi.verifyAuth()
+await authApi.getCurrentUser()
+await authApi.logout()
+```
+
+## 🎨 自定义样式
+
+### 覆盖 CSS 变量
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  /* ... 更多变量 */
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  /* ... 暗色模式变量 */
+}
+```
+
+### 扩展组件
+
+```jsx
+import { CmsLayoutShadcn } from '@wecode-team/we0-cms'
+
+function CustomCms() {
+  return (
+    <div className="custom-wrapper">
+      <header className="custom-header">
+        <h1>我的 CMS</h1>
+      </header>
+      <CmsLayoutShadcn inputModels={modelData} skipAuth={true} />
+    </div>
+  )
+}
+```
+
+## 🔐 认证流程
+
+### 1. 登录流程
+
+```
+用户输入账号密码 → 调用 authApi.login() → 保存 Token 到 localStorage
+                                              ↓
+                                        跳转到数据管理页
+```
+
+### 2. Token 验证
+
+```
+页面加载 → 检查 localStorage 中的 Token → 调用 authApi.verifyAuth()
+                                              ↓
+                                    验证成功：显示内容
+                                    验证失败：跳转登录页
+```
+
+### 3. 免登录模式
+
+```jsx
+// 适用于已有鉴权系统的场景
+<CmsLayoutShadcn inputModels={modelData} skipAuth={true} />
+```
+
+## 📱 响应式设计
+
+组件内置响应式支持：
+
+- **桌面端**：完整侧边栏 + 内容区域
+- **平板端**：可折叠侧边栏
+- **移动端**：底部抽屉式导航
+
+## 🐛 常见问题
+
+### 1. 样式不生效
+
+确保引入了 CSS 文件：
+```jsx
+import '@wecode-team/we0-cms/dist/index.css'
+```
+
+### 2. Tailwind 类名冲突
+
+确保 Tailwind 配置包含了组件库的路径：
+```javascript
+content: [
+  './node_modules/@wecode-team/we0-cms/dist/**/*.{js,jsx}'
+]
+```
+
+### 3. 关联字段不显示数据
+
+检查模型配置中的 `relation.displayField` 是否正确设置为目标表中存在的字段。
+
+### 4. API 请求失败
+
+检查：
+1. Session ID 是否正确设置
+2. API 基础 URL 是否正确
+3. CORS 是否配置正确
+
+## 📄 许可证
+
+MIT
+
+## 🔗 相关包
+
+- [@wecode-team/cms-supabase-api](../cms-supabase-api) - 后端 API 包

package/dist/components/componets/message.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+export type MessageType = "info" | "success" | "error" | "warning" | "loading";
+export interface MessageArgs {
+    key?: React.Key;
+    content: React.ReactNode;
+    duration?: number;
+    type?: MessageType;
+    onClose?: () => void;
+    icon?: React.ReactNode;
+    className?: string;
+}
+interface GlobalConfig {
+    top: number;
+    duration: number;
+    maxCount: number;
+}
+type OpenArg = MessageArgs | React.ReactNode;
+export interface MessageAPI {
+    open: (args: MessageArgs) => {
+        close: () => void;
+    };
+    info: (arg1: OpenArg, duration?: number, onClose?: () => void) => {
+        close: () => void;
+    };
+    success: (arg1: OpenArg, duration?: number, onClose?: () => void) => {
+        close: () => void;
+    };
+    error: (arg1: OpenArg, duration?: number, onClose?: () => void) => {
+        close: () => void;
+    };
+    warning: (arg1: OpenArg, duration?: number, onClose?: () => void) => {
+        close: () => void;
+    };
+    loading: (arg1: OpenArg, duration?: number, onClose?: () => void) => {
+        close: () => void;
+    };
+    destroy: (key?: React.Key) => void;
+    config: (cfg: Partial<GlobalConfig>) => void;
+    useMessage: () => [MessageAPI, React.ReactElement];
+}
+export declare const message: MessageAPI;
+export default message;

package/dist/components/filters/DynamicFilters.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SchemaField, SupabaseFilter } from "../../services";
+export declare function DynamicFilters(props: {
+    fields: SchemaField[];
+    value: SupabaseFilter[];
+    onChange: (next: SupabaseFilter[]) => void;
+}): React.JSX.Element;

package/dist/components/json/JsonField.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export declare function JsonViewerCell({ value, title }: {
+    value: any;
+    title?: string;
+}): React.JSX.Element;
+export declare function JsonEditorField(props: {
+    id: string;
+    value: string;
+    required?: boolean;
+    onChange: (next: string) => void;
+}): React.JSX.Element;

package/dist/components/json/json-utils.d.ts

@@ -0,0 +1,19 @@
+export type ParsedJsonResult = {
+    ok: true;
+    value: any;
+    pretty: string;
+    compact: string;
+} | {
+    ok: false;
+    message: string;
+    pretty: string;
+    compact: string;
+};
+export declare function parseJsonLike(textOrValue: any): ParsedJsonResult;
+export declare function formatJsonText(text: string, indentSize?: number): {
+    ok: true;
+    formatted: string;
+} | {
+    ok: false;
+    message: string;
+};

package/dist/components/page-shadcn.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { CmsModel } from "./types";
+interface CmsLayoutProps {
+    inputModels: {
+        models: CmsModel[];
+    };
+    /**
+     * 是否跳过登录验证（免登录模式）
+     * 当设置为 true 时，组件将跳过所有登录检查，直接进入后台配置页面
+     * 适用于由使用方统一处理鉴权的场景
+     * @default false
+     */
+    skipAuth?: boolean;
+}
+export default function CmsLayoutShadcn({ inputModels, skipAuth }: CmsLayoutProps): React.JSX.Element;
+export {};

package/dist/components/pages/admin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function AdminPage(): React.JSX.Element;

package/dist/components/pages/data-list.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function DataListPage(): React.JSX.Element;

package/dist/components/pages/data-manage.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CmsModel } from '../../services';
+export default function DataManagePage(nowModel: CmsModel): React.JSX.Element;

package/dist/components/pages/login.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface LoginPageProps {
+    onLoginSuccess?: (token: string, user: any) => void;
+}
+export default function LoginPage({ onLoginSuccess }: LoginPageProps): React.JSX.Element;
+export {};

package/dist/components/pages/model-create.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function ModelCreatePage(): React.JSX.Element;

package/dist/components/pages/test-json.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function TestJsonPage(): React.JSX.Element;

package/dist/components/prase.d.ts

@@ -0,0 +1,5 @@
+import { RouteConfig } from "./routes";
+import { CmsModel } from "./types";
+export declare function parseModelsToRoutes(inputModels: {
+    models: CmsModel[];
+}): RouteConfig[];

package/dist/components/routes.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { CmsModel } from "./types";
+export interface RouteConfig {
+    path: string;
+    name: string;
+    icon: React.ReactNode;
+    component: React.ComponentType;
+    routes?: RouteConfig[];
+}
+export declare const cmsRoutes: (inputModels: {
+    models: CmsModel[];
+}) => RouteConfig[];

package/dist/components/types.d.ts

@@ -0,0 +1,69 @@
+export type RelationType = 'belongsTo' | 'hasMany' | 'belongsToMany';
+export interface RelationConfig {
+    /**
+     * 关系类型
+     * - belongsTo: 多对一，当前表存储外键 (如：文章表的 author_id 关联作者表)
+     * - hasMany: 一对多，目标表存储外键 (如：作者表关联多篇文章)
+     * - belongsToMany: 多对多，需要中间表 (如：文章和标签)
+     */
+    type: RelationType;
+    /**
+     * 目标表名
+     */
+    target: string;
+    /**
+     * 外键字段名
+     * - belongsTo: 当前表中的外键字段，默认为 ${target}_id
+     * - hasMany: 目标表中的外键字段，默认为 ${currentTable}_id
+     */
+    foreignKey?: string;
+    /**
+     * 目标表的主键字段，默认为 'id'
+     */
+    targetKey?: string;
+    /**
+     * 多对多关系的中间表名 (仅 belongsToMany 需要)
+     */
+    through?: string;
+    /**
+     * 用于下拉选项显示的字段名，默认为 'name' 或 'title'
+     */
+    displayField?: string;
+    /**
+     * 是否在列表中显示关联数据
+     */
+    showInList?: boolean;
+}
+export interface RelationOption {
+    id: number | string;
+    label: string;
+    [key: string]: any;
+}
+export interface SchemaField {
+    name: string;
+    /**
+     * 字段类型
+     * - 基础类型: string, text, integer, float, boolean, date, datetime, json, email
+     * - 关系类型: relation (需要配置 relation 属性)
+     */
+    type: string;
+    required?: boolean;
+    unique?: boolean;
+    maxLength?: number;
+    defaultValue?: any;
+    comment?: string;
+    /**
+     * 关系配置 (当 type 为 'relation' 时必填)
+     */
+    relation?: RelationConfig;
+}
+export interface CmsModel {
+    id: number;
+    name: string;
+    table_name: string;
+    json_schema: {
+        fields: SchemaField[];
+    };
+    created_at: string;
+    updated_at: string;
+}

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };