From e68fe8c1b15172ba50d07b9b737ae6a3db3418b5 Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Thu, 16 Apr 2026 12:35:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=8F=92=E4=BB=B6=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E5=85=A8=E9=9D=A2=E5=A2=9E=E5=BC=BA=20=E2=80=94=20?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2/=E7=AD=9B=E9=80=89/=E6=8E=92=E5=BA=8F/?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5/=E6=9D=A1=E4=BB=B6=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95/timeline=20=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- pluginData API: 支持 filter/search/sort_by/sort_order 参数
- plugins API: 新增 PluginFieldSchema/PluginEntitySchema/PluginPageSchema 类型
- PluginCRUDPage: 添加搜索框、筛选栏、视图切换（表格/时间线）
- PluginCRUDPage: 添加详情 Drawer（Descriptions + 嵌套 CRUD）
- PluginCRUDPage: 支持 visible_when 条件表单字段动态显示/隐藏
- PluginCRUDPage: 支持 compact 模式用于 detail 页面内嵌
---
 apps/web/src/api/pluginData.ts        |  19 +-
 apps/web/src/api/plugins.ts           |  41 +++
 apps/web/src/pages/PluginCRUDPage.tsx | 494 ++++++++++++++++++++++----
 3 files changed, 475 insertions(+), 79 deletions(-)

diff --git a/apps/web/src/api/pluginData.ts b/apps/web/src/api/pluginData.ts
index 4e629a8..b1b0e39 100644
--- a/apps/web/src/api/pluginData.ts
+++ b/apps/web/src/api/pluginData.ts
@@ -16,15 +16,32 @@ interface PaginatedDataResponse {
   total_pages: number;
 }
 
+export interface PluginDataListOptions {
+  filter?: Record<string, string>;
+  search?: string;
+  sort_by?: string;
+  sort_order?: 'asc' | 'desc';
+}
+
 export async function listPluginData(
   pluginId: string,
   entity: string,
   page = 1,
   pageSize = 20,
+  options?: PluginDataListOptions,
 ) {
+  const params: Record<string, string> = {
+    page: String(page),
+    page_size: String(pageSize),
+  };
+  if (options?.filter) params.filter = JSON.stringify(options.filter);
+  if (options?.search) params.search = options.search;
+  if (options?.sort_by) params.sort_by = options.sort_by;
+  if (options?.sort_order) params.sort_order = options.sort_order;
+
   const { data } = await client.get<{ success: boolean; data: PaginatedDataResponse }>(
     `/plugins/${pluginId}/${entity}`,
-    { params: { page, page_size: pageSize } },
+    { params },
   );
   return data.data;
 }
diff --git a/apps/web/src/api/plugins.ts b/apps/web/src/api/plugins.ts
index bbceb47..1e4b19f 100644
--- a/apps/web/src/api/plugins.ts
+++ b/apps/web/src/api/plugins.ts
@@ -119,3 +119,44 @@ export async function getPluginSchema(id: string) {
   );
   return data.data;
 }
+
+// ── Schema 类型定义 ──
+
+export interface PluginFieldSchema {
+  name: string;
+  field_type: string;
+  required: boolean;
+  display_name?: string;
+  ui_widget?: string;
+  options?: { label: string; value: string }[];
+  searchable?: boolean;
+  filterable?: boolean;
+  sortable?: boolean;
+  visible_when?: string;
+  unique?: boolean;
+}
+
+export interface PluginEntitySchema {
+  name: string;
+  display_name: string;
+  fields: PluginFieldSchema[];
+}
+
+export interface PluginSchemaResponse {
+  entities: PluginEntitySchema[];
+  ui?: PluginUiSchema;
+}
+
+export interface PluginUiSchema {
+  pages: PluginPageSchema[];
+}
+
+export type PluginPageSchema =
+  | { type: 'crud'; entity: string; label: string; icon?: string; enable_search?: boolean; enable_views?: string[] }
+  | { type: 'tree'; entity: string; label: string; icon?: string; id_field: string; parent_field: string; label_field: string }
+  | { type: 'detail'; entity: string; label: string; sections: PluginSectionSchema[] }
+  | { type: 'tabs'; label: string; icon?: string; tabs: PluginPageSchema[] };
+
+export type PluginSectionSchema =
+  | { type: 'fields'; label: string; fields: string[] }
+  | { type: 'crud'; label: string; entity: string; filter_field?: string; enable_views?: string[] };
diff --git a/apps/web/src/pages/PluginCRUDPage.tsx b/apps/web/src/pages/PluginCRUDPage.tsx
index 5977e90..e34acf5 100644
--- a/apps/web/src/pages/PluginCRUDPage.tsx
+++ b/apps/web/src/pages/PluginCRUDPage.tsx
@@ -14,81 +14,207 @@ import {
   Tag,
   message,
   Popconfirm,
+  Drawer,
+  Descriptions,
+  Segmented,
+  Timeline,
 } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  EyeOutlined,
+} from '@ant-design/icons';
 import {
   listPluginData,
   createPluginData,
   updatePluginData,
   deletePluginData,
+  PluginDataListOptions,
 } from '../api/pluginData';
-import { getPluginSchema } from '../api/plugins';
+import {
+  getPluginSchema,
+  PluginFieldSchema,
+  PluginEntitySchema,
+  PluginPageSchema,
+  PluginSectionSchema,
+} from '../api/plugins';
 
-interface FieldDef {
-  name: string;
-  field_type: string;
-  required: boolean;
-  display_name?: string;
-  ui_widget?: string;
-  options?: { label: string; value: string }[];
+const { Search } = Input;
+const { TextArea } = Input;
+
+/** visible_when 表达式解析 */
+function parseVisibleWhen(expression: string): { field: string; value: string } | null {
+  const regex = /^(\w+)\s*==\s*'([^']*)'$/;
+  const match = expression.trim().match(regex);
+  if (!match) return null;
+  return { field: match[1], value: match[2] };
 }
 
-interface EntitySchema {
-  name: string;
-  display_name: string;
-  fields: FieldDef[];
+/** 判断字段是否应该显示 */
+function shouldShowField(
+  allValues: Record<string, unknown>,
+  visibleWhen: string | undefined,
+): boolean {
+  if (!visibleWhen) return true;
+  const parsed = parseVisibleWhen(visibleWhen);
+  if (!parsed) return true;
+  return String(allValues[parsed.field] ?? '') === parsed.value;
 }
 
-export default function PluginCRUDPage() {
-  const { pluginId, entityName } = useParams<{ pluginId: string; entityName: string }>();
+interface PluginCRUDPageProps {
+  /** 如果从 tabs/detail 页面内嵌使用，通过 props 传入配置 */
+  pluginIdOverride?: string;
+  entityOverride?: string;
+  filterField?: string;
+  filterValue?: string;
+  enableViews?: string[];
+  /** detail 页面内嵌时使用 compact 模式 */
+  compact?: boolean;
+}
+
+export default function PluginCRUDPage({
+  pluginIdOverride,
+  entityOverride,
+  filterField,
+  filterValue,
+  enableViews: enableViewsProp,
+  compact,
+}: PluginCRUDPageProps = {}) {
+  const routeParams = useParams<{ pluginId: string; entityName: string }>();
+  const pluginId = pluginIdOverride || routeParams.pluginId || '';
+  const entityName = entityOverride || routeParams.entityName || '';
+
   const [records, setRecords] = useState<Record<string, unknown>[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
-  const [fields, setFields] = useState<FieldDef[]>([]);
+  const [fields, setFields] = useState<PluginFieldSchema[]>([]);
   const [displayName, setDisplayName] = useState(entityName || '');
   const [modalOpen, setModalOpen] = useState(false);
   const [editRecord, setEditRecord] = useState<Record<string, unknown> | null>(null);
   const [form] = Form.useForm();
+  const [formValues, setFormValues] = useState<Record<string, unknown>>({});
+
+  // 筛选/搜索/排序 state
+  const [searchText, setSearchText] = useState('');
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [sortBy, setSortBy] = useState<string | undefined>();
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+
+  // 视图切换
+  const [viewMode, setViewMode] = useState<string>('table');
+
+  // 详情 Drawer
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailRecord, setDetailRecord] = useState<Record<string, unknown> | null>(null);
+  const [detailSections, setDetailSections] = useState<PluginSectionSchema[]>([]);
+  const [allEntities, setAllEntities] = useState<PluginEntitySchema[]>([]);
+  const [allPages, setAllPages] = useState<PluginPageSchema[]>([]);
+
+  // 从 fields 中提取 filterable 字段
+  const filterableFields = fields.filter((f) => f.filterable);
+
+  // 查找是否有 detail 页面
+  const hasDetailPage = allPages.some(
+    (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
+  );
+
+  // 可用视图
+  const enableViews = enableViewsProp ||
+    (() => {
+      const page = allPages.find(
+        (p) => p.type === 'crud' && 'entity' in p && p.entity === entityName,
+      );
+      return (page as { enable_views?: string[] })?.enable_views || ['table'];
+    })();
 
   // 加载 schema
   useEffect(() => {
     if (!pluginId) return;
     getPluginSchema(pluginId)
       .then((schema) => {
-        const entities = (schema as { entities?: EntitySchema[] }).entities || [];
+        const entities: PluginEntitySchema[] = (schema as { entities?: PluginEntitySchema[] }).entities || [];
+        setAllEntities(entities);
         const entity = entities.find((e) => e.name === entityName);
         if (entity) {
           setFields(entity.fields);
           setDisplayName(entity.display_name || entityName || '');
         }
+        const ui = (schema as { ui?: { pages: PluginPageSchema[] } }).ui;
+        if (ui?.pages) {
+          setAllPages(ui.pages);
+          // 找到 detail 页面的 sections
+          const detailPage = ui.pages.find(
+            (p) => p.type === 'detail' && 'entity' in p && p.entity === entityName,
+          );
+          if (detailPage && 'sections' in detailPage) {
+            setDetailSections(detailPage.sections);
+          }
+        }
       })
       .catch(() => {
         // schema 加载失败时仍可使用
       });
   }, [pluginId, entityName]);
 
-  const fetchData = useCallback(async (p = page) => {
-    if (!pluginId || !entityName) return;
-    setLoading(true);
-    try {
-      const result = await listPluginData(pluginId, entityName, p);
-      setRecords(result.data.map((r) => ({ ...r.data, _id: r.id, _version: r.version })));
-      setTotal(result.total);
-    } catch {
-      message.error('加载数据失败');
-    }
-    setLoading(false);
-  }, [pluginId, entityName, page]);
+  const fetchData = useCallback(
+    async (p = page) => {
+      if (!pluginId || !entityName) return;
+      setLoading(true);
+      try {
+        const options: PluginDataListOptions = {};
+        // 自动添加 filterField 过滤（detail 页面内嵌 CRUD）
+        const mergedFilters = { ...filters };
+        if (filterField && filterValue) {
+          mergedFilters[filterField] = filterValue;
+        }
+        if (Object.keys(mergedFilters).length > 0) {
+          options.filter = mergedFilters;
+        }
+        if (searchText) options.search = searchText;
+        if (sortBy) {
+          options.sort_by = sortBy;
+          options.sort_order = sortOrder;
+        }
+        const result = await listPluginData(pluginId, entityName, p, 20, options);
+        setRecords(
+          result.data.map((r) => ({ ...r.data, _id: r.id, _version: r.version })),
+        );
+        setTotal(result.total);
+      } catch {
+        message.error('加载数据失败');
+      }
+      setLoading(false);
+    },
+    [pluginId, entityName, page, filters, searchText, sortBy, sortOrder, filterField, filterValue],
+  );
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
+  // 筛选变化
+  const handleFilterChange = (fieldName: string, value: string | undefined) => {
+    const newFilters = { ...filters };
+    if (value) {
+      newFilters[fieldName] = value;
+    } else {
+      delete newFilters[fieldName];
+    }
+    setFilters(newFilters);
+    setPage(1);
+    // 直接触发重新查询
+    fetchData(1);
+  };
+
   const handleSubmit = async (values: Record<string, unknown>) => {
     if (!pluginId || !entityName) return;
-    // 去除内部字段
-    const { _id, _version, ...data } = values as Record<string, unknown> & { _id?: string; _version?: number };
+    const { _id, _version, ...data } = values as Record<string, unknown> & {
+      _id?: string;
+      _version?: number;
+    };
 
     try {
       if (editRecord) {
@@ -130,6 +256,7 @@ export default function PluginCRUDPage() {
       dataIndex: f.name,
       key: f.name,
       ellipsis: true,
+      sorter: f.sortable ? true : undefined,
       render: (val: unknown) => {
         if (typeof val === 'boolean') return val ? <Tag color="green">是</Tag> : <Tag>否</Tag>;
         return String(val ?? '-');
@@ -138,15 +265,28 @@ export default function PluginCRUDPage() {
     {
       title: '操作',
       key: 'action',
-      width: 150,
+      width: hasDetailPage ? 200 : 150,
       render: (_: unknown, record: Record<string, unknown>) => (
         <Space size="small">
+          {hasDetailPage && (
+            <Button
+              size="small"
+              icon={<EyeOutlined />}
+              onClick={() => {
+                setDetailRecord(record);
+                setDetailOpen(true);
+              }}
+            >
+              详情
+            </Button>
+          )}
           <Button
             size="small"
             icon={<EditOutlined />}
             onClick={() => {
               setEditRecord(record);
               form.setFieldsValue(record);
+              setFormValues(record);
               setModalOpen(true);
             }}
           >
@@ -163,7 +303,7 @@ export default function PluginCRUDPage() {
   ];
 
   // 动态生成表单字段
-  const renderFormField = (field: FieldDef) => {
+  const renderFormField = (field: PluginFieldSchema) => {
     const widget = field.ui_widget || field.field_type;
     switch (widget) {
       case 'number':
@@ -186,71 +326,269 @@ export default function PluginCRUDPage() {
             ))}
           </Select>
         );
+      case 'textarea':
+        return <TextArea rows={3} />;
       default:
         return <Input />;
     }
   };
 
-  return (
-    <div style={{ padding: 24 }}>
-      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <h2 style={{ margin: 0 }}>{displayName}</h2>
-        <Space>
-          <Button
-            icon={<PlusOutlined />}
-            type="primary"
-            onClick={() => {
-              setEditRecord(null);
-              form.resetFields();
-              setModalOpen(true);
-            }}
-          >
-            新增
-          </Button>
-          <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
-            刷新
-          </Button>
-        </Space>
-      </div>
+  // Timeline 视图渲染
+  const renderTimeline = () => {
+    const dateField = fields.find((f) => f.field_type === 'DateTime' || f.field_type === 'date');
+    const titleField = fields.find((f) => f.searchable)?.name || fields[1]?.name;
+    const contentField = fields.find((f) => f.ui_widget === 'textarea')?.name;
 
-      <Table
-        columns={columns}
-        dataSource={records}
-        rowKey="_id"
-        loading={loading}
-        pagination={{
-          current: page,
-          total,
-          pageSize: 20,
-          onChange: (p) => setPage(p),
-          showTotal: (t) => `共 ${t} 条`,
-        }}
+    return (
+      <Timeline
+        items={records.map((record) => ({
+          children: (
+            <div>
+              {titleField && (
+                <p>
+                  <strong>{String(record[titleField] ?? '-')}</strong>
+                </p>
+              )}
+              {contentField && <p>{String(record[contentField] ?? '-')}</p>}
+              {dateField && (
+                <p style={{ color: '#999', fontSize: 12 }}>
+                  {String(record[dateField.name] ?? '-')}
+                </p>
+              )}
+            </div>
+          ),
+        }))}
       />
+    );
+  };
 
+  // 详情 Drawer 渲染
+  const renderDetailDrawer = () => {
+    if (!detailRecord) return null;
+
+    return (
+      <Drawer
+        title={displayName + ' 详情'}
+        open={detailOpen}
+        onClose={() => {
+          setDetailOpen(false);
+          setDetailRecord(null);
+        }}
+        width={640}
+      >
+        {detailSections.length > 0 ? (
+          detailSections.map((section, idx) => {
+            if (section.type === 'fields') {
+              return (
+                <div key={idx} style={{ marginBottom: 24 }}>
+                  <h4>{section.label}</h4>
+                  <Descriptions column={2} bordered size="small">
+                    {section.fields.map((fieldName) => {
+                      const fieldDef = fields.find((f) => f.name === fieldName);
+                      const val = detailRecord[fieldName];
+                      return (
+                        <Descriptions.Item
+                          key={fieldName}
+                          label={fieldDef?.display_name || fieldName}
+                        >
+                          {typeof val === 'boolean' ? (
+                            val ? (
+                              <Tag color="green">是</Tag>
+                            ) : (
+                              <Tag>否</Tag>
+                            )
+                          ) : (
+                            String(val ?? '-')
+                          )}
+                        </Descriptions.Item>
+                      );
+                    })}
+                  </Descriptions>
+                </div>
+              );
+            }
+            if (section.type === 'crud') {
+              const secEntity = allEntities.find((e) => e.name === section.entity);
+              return (
+                <div key={idx} style={{ marginBottom: 24 }}>
+                  <h4>{section.label}</h4>
+                  {secEntity && (
+                    <PluginCRUDPage
+                      pluginIdOverride={pluginId}
+                      entityOverride={section.entity}
+                      filterField={section.filter_field}
+                      filterValue={String(detailRecord._id ?? '')}
+                      enableViews={section.enable_views}
+                      compact
+                    />
+                  )}
+                </div>
+              );
+            }
+            return null;
+          })
+        ) : (
+          // 没有 sections 配置时，默认展示所有字段
+          <Descriptions column={2} bordered size="small">
+            {fields.map((field) => {
+              const val = detailRecord[field.name];
+              return (
+                <Descriptions.Item key={field.name} label={field.display_name || field.name}>
+                  {typeof val === 'boolean' ? (
+                    val ? (
+                      <Tag color="green">是</Tag>
+                    ) : (
+                      <Tag>否</Tag>
+                    )
+                  ) : (
+                    String(val ?? '-')
+                  )}
+                </Descriptions.Item>
+              );
+            })}
+          </Descriptions>
+        )}
+      </Drawer>
+    );
+  };
+
+  return (
+    <div style={compact ? { padding: 0 } : { padding: 24 }}>
+      {!compact && (
+        <div
+          style={{
+            marginBottom: 16,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <h2 style={{ margin: 0 }}>{displayName}</h2>
+          <Space>
+            {enableViews.length > 1 && (
+              <Segmented
+                options={enableViews.map((v) => ({
+                  label: v === 'table' ? '表格' : v === 'timeline' ? '时间线' : v,
+                  value: v,
+                }))}
+                value={viewMode}
+                onChange={(val) => setViewMode(val as string)}
+              />
+            )}
+            <Button
+              icon={<PlusOutlined />}
+              type="primary"
+              onClick={() => {
+                setEditRecord(null);
+                form.resetFields();
+                setFormValues({});
+                setModalOpen(true);
+              }}
+            >
+              新增
+            </Button>
+            <Button icon={<ReloadOutlined />} onClick={() => fetchData()}>
+              刷新
+            </Button>
+          </Space>
+        </div>
+      )}
+
+      {/* 搜索和筛选栏 */}
+      {!compact && (
+        <Space style={{ marginBottom: 16 }} wrap>
+          {fields.some((f) => f.searchable) && (
+            <Search
+              placeholder="搜索..."
+              allowClear
+              style={{ width: 240 }}
+              onSearch={(value) => {
+                setSearchText(value);
+                setPage(1);
+                fetchData(1);
+              }}
+            />
+          )}
+          {filterableFields.map((field) => (
+            <Select
+              key={field.name}
+              placeholder={field.display_name || field.name}
+              allowClear
+              style={{ width: 150 }}
+              options={field.options || []}
+              onChange={(value) => handleFilterChange(field.name, value)}
+            />
+          ))}
+        </Space>
+      )}
+
+      {viewMode === 'table' || enableViews.length <= 1 ? (
+        <Table
+          columns={columns}
+          dataSource={records}
+          rowKey="_id"
+          loading={loading}
+          size={compact ? 'small' : undefined}
+          pagination={
+            compact
+              ? { pageSize: 5, showTotal: (t) => `共 ${t} 条` }
+              : {
+                  current: page,
+                  total,
+                  pageSize: 20,
+                  onChange: (p) => setPage(p),
+                  showTotal: (t) => `共 ${t} 条`,
+                }
+          }
+        />
+      ) : viewMode === 'timeline' ? (
+        renderTimeline()
+      ) : null}
+
+      {/* 新增/编辑弹窗 */}
       <Modal
         title={editRecord ? '编辑' : '新增'}
         open={modalOpen}
         onCancel={() => {
           setModalOpen(false);
           setEditRecord(null);
+          setFormValues({});
         }}
         onOk={() => form.submit()}
         destroyOnClose
       >
-        <Form form={form} layout="vertical" onFinish={handleSubmit}>
-          {fields.map((field) => (
-            <Form.Item
-              key={field.name}
-              name={field.name}
-              label={field.display_name || field.name}
-              rules={field.required ? [{ required: true, message: `请输入${field.display_name || field.name}` }] : []}
-              valuePropName={field.field_type === 'boolean' ? 'checked' : 'value'}
-            >
-              {renderFormField(field)}
-            </Form.Item>
-          ))}
+        <Form
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          onValuesChange={(_, allValues) => setFormValues(allValues)}
+        >
+          {fields.map((field) => {
+            // visible_when 条件显示
+            const visible = shouldShowField(formValues, field.visible_when);
+            if (!visible) return null;
+
+            return (
+              <Form.Item
+                key={field.name}
+                name={field.name}
+                label={field.display_name || field.name}
+                rules={
+                  field.required
+                    ? [{ required: true, message: `请输入${field.display_name || field.name}` }]
+                    : []
+                }
+                valuePropName={field.field_type === 'boolean' ? 'checked' : 'value'}
+              >
+                {renderFormField(field)}
+              </Form.Item>
+            );
+          })}
         </Form>
       </Modal>
+
+      {/* 详情 Drawer */}
+      {renderDetailDrawer()}
     </div>
   );
 }