@gadmin2n/schematics 0.0.95 → 0.0.97

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CanvasListPage.tsx

@@ -16,10 +16,14 @@ import {
   createCanvas,
   deleteCanvas,
   updateCanvas,
+  fetchAllCanvases,
+  type SavedCanvasWithOwner,
 } from './canvasApi';
 import type { SavedCanvas } from './types';
 import IsolatedLivePreview from './IsolatedLivePreview';
 import { useTranslation } from 'react-i18next';
+import { useUserPageAccess } from 'hooks/useUserPageAccess';
+import { customRequest } from 'helpers/http';
 
 const COLS = 48;
 const ROW_HEIGHT = 10;
@@ -67,7 +71,33 @@ const CanvasListPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const { t } = useTranslation();
 
-  console.log('[CanvasListPage] rendered, pathname:', window.location.pathname);
+  const { roleNames } = useUserPageAccess();
+  const isSystemAdmin = roleNames.includes('SYSTEM_ADMIN');
+
+  const [othersCanvases, setOthersCanvases] = useState<SavedCanvasWithOwner[]>(
+    [],
+  );
+  const [othersLoading, setOthersLoading] = useState(false);
+
+  const [currentUserId, setCurrentUserId] = useState<string>('');
+  useEffect(() => {
+    customRequest<{ userid: string }>('userinfo', 'GET')
+      .then((res) => {
+        setCurrentUserId(res.userid ?? '');
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (!isSystemAdmin || !currentUserId) return;
+    setOthersLoading(true);
+    fetchAllCanvases()
+      .then((all) => {
+        setOthersCanvases(all.filter((c) => c.userId !== currentUserId));
+      })
+      .catch(() => message.error('加载其他人的 Canvas 失败'))
+      .finally(() => setOthersLoading(false));
+  }, [isSystemAdmin, currentUserId]);
 
   useEffect(() => {
     fetchCanvases()
@@ -209,6 +239,9 @@ const CanvasListPage: React.FC = () => {
 
       {/* Grid */}
       <Card>
+        <Typography.Title level={5} style={{ margin: '0 0 16px 0' }}>
+          {t('canvas.list.myCanvases')}
+        </Typography.Title>
         {canvases.length > 0 ? (
           <div
             style={{
@@ -359,6 +392,145 @@ const CanvasListPage: React.FC = () => {
         )}
       </Card>
 
+      {/* 其他人的 Canvas（仅 system_admin 可见） */}
+      {isSystemAdmin && (
+        <Card style={{ marginTop: 16 }}>
+          <Typography.Title level={5} style={{ margin: '0 0 16px 0' }}>
+            {t('canvas.list.othersCanvases')}
+          </Typography.Title>
+          {othersLoading ? (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                padding: '40px 0',
+              }}
+            >
+              <Spin size="large" />
+            </div>
+          ) : othersCanvases.length > 0 ? (
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(3, 1fr)',
+                gap: 20,
+              }}
+            >
+              {othersCanvases.map((canvas) => (
+                <div
+                  key={canvas.id}
+                  style={{
+                    background: '#fff',
+                    borderRadius: 8,
+                    overflow: 'hidden',
+                    border: '1px solid #e5e5e5',
+                    cursor: 'pointer',
+                    transition: 'box-shadow 0.2s',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.boxShadow =
+                      '0 4px 12px rgba(0,0,0,0.1)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.boxShadow =
+                      'none';
+                  }}
+                  onClick={() => navigate(`/admin/canvas/edit/${canvas.id}`)}
+                >
+                  {/* Thumbnail */}
+                  <div
+                    style={{
+                      height: 180,
+                      overflow: 'hidden',
+                      background: '#f0f0f0',
+                      position: 'relative',
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    {canvas.items.length > 0 ? (
+                      <div
+                        style={{
+                          transform: 'scale(0.28)',
+                          transformOrigin: 'top left',
+                          width: 1200,
+                          height: 640,
+                        }}
+                      >
+                        <IsolatedLivePreview code={buildPreviewCode(canvas)} />
+                      </div>
+                    ) : (
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          height: '100%',
+                          color: '#bbb',
+                          fontSize: 14,
+                        }}
+                      >
+                        空画布
+                      </div>
+                    )}
+                  </div>
+                  {/* Info */}
+                  <div
+                    style={{
+                      padding: '12px 16px',
+                      borderTop: '1px solid #f0f0f0',
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: 4,
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontWeight: 500,
+                          fontSize: 14,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          maxWidth: 180,
+                        }}
+                      >
+                        {canvas.name}
+                      </span>
+                      <Tag
+                        color={canvas.publishedPageCode ? 'green' : 'default'}
+                      >
+                        {canvas.publishedPageCode
+                          ? t('canvas.list.published')
+                          : t('canvas.list.unpublished')}
+                      </Tag>
+                    </div>
+                    <div
+                      style={{ fontSize: 12, color: '#999', marginBottom: 4 }}
+                    >
+                      创建者: {canvas.ownerName}
+                    </div>
+                    <div style={{ fontSize: 12, color: '#999' }}>
+                      修改于{' '}
+                      {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div
+              style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}
+            >
+              没有其他用户的 Canvas
+            </div>
+          )}
+        </Card>
+      )}
+
       {/* 重命名 Modal */}
       <Modal
         title={t('canvas.list.renameTitle')}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/CanvasPage.tsx

@@ -35,6 +35,7 @@ import BarChartDataSourceModal from './components/BarChartDataSourceModal';
 import LineChartDataSourceModal from './components/LineChartDataSourceModal';
 import RadarChartDataSourceModal from './components/RadarChartDataSourceModal';
 import MultiChartDataSourceModal from './components/MultiChartDataSourceModal';
+import TableConfigModal from './components/TableConfigModal';
 import PromptModal from './components/PromptModal';
 import { createSectionCompactor } from './sectionCompactor';
 import type { CanvasItem as CanvasItemType } from './types';
@@ -166,9 +167,19 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
     onConfirm: (value: string) => void;
   } | null>(null);
 
+  const [virtualTableConfigModal, setVirtualTableConfigModal] = useState<{
+    virtualCode: string;
+    onConfirm: (newVirtualCode: string) => void;
+  } | null>(null);
+
   const menuActionContext: MenuActionContext = useMemo(
     () => ({
       showPrompt: (opts) => setPromptModal(opts),
+      openTableColumnConfig: (opts) => {
+        // 与独立 Table 走 registry 的 configModal 互斥，避免两个 modal 同时挂载
+        setConfigModal(null);
+        setVirtualTableConfigModal(opts);
+      },
     }),
     [],
   );
@@ -492,7 +503,9 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                   label:
                     componentType === 'MultiChart'
                       ? (t('canvas.configCharts') ?? '配置显示图表与顺序')
-                      : t('canvas.config'),
+                      : componentType === 'Table'
+                        ? (t('canvas.menu.configColumns') ?? '配置列')
+                        : t('canvas.config'),
                   onClick: () => {
                     setConfigModal({ id: itemMenu.id, componentType });
                     setItemMenu(null);
@@ -566,7 +579,7 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
                 onConfirm: (value) => {
                   if (!value.trim()) return;
                   const prompt = generatePrompt({
-                    skill: null,
+                    skill: 'canvas-component-edit',
                     pageInfo: agent?.pageInfo ?? {
                       resourceName: '',
                       pageType: 'unknown',
@@ -1471,6 +1484,18 @@ const CanvasPage: React.FC<CanvasPageProps> = ({
           onCancel={() => setDataSourceModal(null)}
         />
 
+        {/* MultiChart 切到 table 时的列配置 Modal（virtualCode 桥接） */}
+        {virtualTableConfigModal && (
+          <TableConfigModal
+            code={virtualTableConfigModal.virtualCode}
+            onConfirm={(newVirtualCode) => {
+              virtualTableConfigModal.onConfirm(newVirtualCode);
+              setVirtualTableConfigModal(null);
+            }}
+            onCancel={() => setVirtualTableConfigModal(null)}
+          />
+        )}
+
         {/* ── 通用文本输入弹窗（如修改标题） ── */}
         <PromptModal
           open={!!promptModal}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/canvasApi.ts

@@ -81,3 +81,32 @@ export async function publishCanvas(
 export async function unpublishCanvas(id: string): Promise<void> {
   await customRequest(`canvas/${id}/unpublish`, 'DELETE');
 }
+
+// ── Admin: 查看所有人的 canvas ──────────────────────────────────────────────
+
+interface CanvasRecordWithOwner extends CanvasRecord {
+  ownerName: string;
+}
+
+export interface SavedCanvasWithOwner extends SavedCanvas {
+  ownerName: string;
+  userId: string; // 用于前端过滤掉自己的 canvas
+}
+
+function toSavedCanvasWithOwner(
+  r: CanvasRecordWithOwner,
+): SavedCanvasWithOwner {
+  return {
+    ...toSavedCanvas(r),
+    userId: r.userId,
+    ownerName: r.ownerName,
+  };
+}
+
+export async function fetchAllCanvases(): Promise<SavedCanvasWithOwner[]> {
+  const records = await customRequest<CanvasRecordWithOwner[]>(
+    'canvas/all',
+    'GET',
+  );
+  return records.map(toSavedCanvasWithOwner);
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/canvasConfigRegistry.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
 import MultiChartConfigModal from './components/MultiChartConfigModal';
+import TableConfigModal from './components/TableConfigModal';
 
 // ─── 通用配置 Modal 接口 ──────────────────────────────────────────────────────
 //
@@ -22,4 +23,5 @@ export type ConfigModalComponent = React.FC<CanvasConfigModalProps>;
 
 export const CANVAS_CONFIG_REGISTRY: Record<string, ConfigModalComponent> = {
   MultiChart: MultiChartConfigModal,
+  Table: TableConfigModal,
 };

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/canvasContextMenuRegistry.tsx

@@ -6,7 +6,16 @@ import {
   EditOutlined,
   SwapOutlined,
   DownloadOutlined,
+  SettingOutlined,
 } from '@ant-design/icons';
+import {
+  readTableFlag,
+  writeTableFlag,
+  parseMultiChartTableColumns,
+  readMultiChartTableFlags,
+  writeMultiChartTableFlags,
+  buildVirtualTableCode,
+} from './utils/tableCodeUtils';
 
 // ─── 组件特有右键菜单操作注册表 ────────────────────────────────────────────────
 //
@@ -34,6 +43,16 @@ export interface MenuActionContext {
     defaultValue?: string;
     onConfirm: (value: string) => void;
   }) => void;
+
+  /**
+   * MultiChart 切到 table 时打开列配置 modal。
+   * - virtualCode：合成的独立 Table JSX，喂给 TableConfigModal
+   * - onConfirm：用户确认时回调，参数是 modal 改写后的 newVirtualCode
+   */
+  openTableColumnConfig?: (opts: {
+    virtualCode: string;
+    onConfirm: (newVirtualCode: string) => void;
+  }) => void;
 }
 
 // ─── NumCard 特有操作 ─────────────────────────────────────────────────────────
@@ -228,15 +247,52 @@ function tableActions(
   ctx?: MenuActionContext,
   t?: TFunction,
 ): MenuProps['items'] {
+  const sortableFlag = readTableFlag(code, 'sortable');
+  const filterableFlag = readTableFlag(code, 'filterable');
+  // Only 'fully on' (sortable={true} or omitted) shows "禁用排序";
+  // disabled and partial-array forms show "启用排序" (clicking restores default true).
+  const sortingActive = sortableFlag === true;
+  const filteringActive = filterableFlag === true;
   const hasPagination = /pagination\s*=\s*\{\{/.test(code);
 
+  const sortFilterItems: MenuProps['items'] = [
+    {
+      key: 'toggle-sortable',
+      icon: sortingActive ? <MinusOutlined /> : <PlusOutlined />,
+      label: sortingActive
+        ? (t?.('canvas.menu.disableSorting') ?? '禁用排序')
+        : (t?.('canvas.menu.enableSorting') ?? '启用排序'),
+      danger: sortingActive ? true : undefined,
+      onClick: () => {
+        updateCode(
+          writeTableFlag(code, 'sortable', sortingActive ? false : true),
+        );
+        closeMenu();
+      },
+    },
+    {
+      key: 'toggle-filterable',
+      icon: filteringActive ? <MinusOutlined /> : <PlusOutlined />,
+      label: filteringActive
+        ? (t?.('canvas.menu.disableFiltering') ?? '禁用过滤')
+        : (t?.('canvas.menu.enableFiltering') ?? '启用过滤'),
+      danger: filteringActive ? true : undefined,
+      onClick: () => {
+        updateCode(
+          writeTableFlag(code, 'filterable', filteringActive ? false : true),
+        );
+        closeMenu();
+      },
+    },
+    { type: 'divider' as const, key: 'div-sort-filter' },
+  ];
+
   const downloadItems = chartDownloadActions(code, updateCode, closeMenu, t)!;
 
   if (hasPagination) {
-    // 已有分页：显示"修改分页数量"子菜单 + "移除分页"
     const currentPageSize = code.match(/pageSize\s*:\s*(\d+)/)?.[1] ?? '10';
-
     return [
+      ...sortFilterItems,
       {
         key: 'change-page-size',
         icon: <PlusOutlined />,
@@ -271,8 +327,8 @@ function tableActions(
     ];
   }
 
-  // 无分页：显示"添加分页"子菜单，选择 pageSize
   return [
+    ...sortFilterItems,
     {
       key: 'add-pagination',
       icon: <PlusOutlined />,
@@ -1176,6 +1232,45 @@ function multiChartActions(
       label: t?.('canvas.menu.switchTo') ?? '切换到',
       children: switchItems,
     },
+
+    // ── MultiChart 切到 table 时的「配置列」入口 ──
+    ...(activeChart === 'table' && ctx?.openTableColumnConfig
+      ? [
+          { type: 'divider' as const, key: 'div-multi-table-cols' },
+          {
+            key: 'multi-table-column-config',
+            icon: <SettingOutlined />,
+            label: t?.('canvas.menu.configColumns') ?? '配置列',
+            onClick: () => {
+              const columns = parseMultiChartTableColumns(code);
+              const flags = readMultiChartTableFlags(code);
+              // 解析失败也打开 modal —— modal 内部会显示 Alert + 禁用确认
+              const virtualCode =
+                columns && columns.length > 0
+                  ? buildVirtualTableCode(columns, flags)
+                  : `<Table dataSource={[]} columns={[]} testId="virtual-multichart-table" />`;
+              closeMenu();
+              ctx?.openTableColumnConfig?.({
+                virtualCode,
+                onConfirm: (newVirtualCode) => {
+                  const sortable = readTableFlag(newVirtualCode, 'sortable');
+                  const filterable = readTableFlag(
+                    newVirtualCode,
+                    'filterable',
+                  );
+                  const newCode = writeMultiChartTableFlags(
+                    code,
+                    sortable,
+                    filterable,
+                  );
+                  updateCode(newCode);
+                },
+              });
+            },
+          },
+        ]
+      : []),
+
     ...(chartSpecificItems && chartSpecificItems.length > 0
       ? [
           { type: 'divider' as const, key: 'div-chart-config' },

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/canvas/components/TableConfigModal.tsx

@@ -0,0 +1,192 @@
+import React, { useMemo, useState } from 'react';
+import { Modal, Table as AntTable, Checkbox, Alert } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { useTranslation } from 'react-i18next';
+import type { CanvasConfigModalProps } from '../canvasConfigRegistry';
+import {
+  CANVAS_MODAL_PROPS,
+  CANVAS_MODAL_TITLE_STYLE,
+} from './canvasModalProps';
+import {
+  parseTableColumnsMeta,
+  readTableFlag,
+  writeTableFlag,
+} from '../utils/tableCodeUtils';
+import type { ColumnMeta } from '../utils/tableCodeUtils';
+
+interface Row extends ColumnMeta {
+  key: string; // = dataIndex
+}
+
+const TableConfigModal: React.FC<CanvasConfigModalProps> = ({
+  code,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+
+  // ── 解析 columns ─────────────────────────────────────────────
+  const columnsMeta = useMemo(() => parseTableColumnsMeta(code), [code]);
+  const parseFailed = columnsMeta == null || columnsMeta.length === 0;
+
+  const rows: Row[] = useMemo(
+    () => (columnsMeta ?? []).map((c) => ({ ...c, key: c.dataIndex })),
+    [columnsMeta],
+  );
+
+  // ── 解析当前 sortable / filterable 状态 ────────────────────
+  const initialSortSet = useMemo<Set<string>>(() => {
+    if (parseFailed) return new Set();
+    const flag = readTableFlag(code, 'sortable');
+    if (flag === false) return new Set();
+    if (flag === true) return new Set(rows.map((r) => r.dataIndex));
+    return new Set(flag);
+  }, [code, rows, parseFailed]);
+
+  const initialFilterSet = useMemo<Set<string>>(() => {
+    if (parseFailed) return new Set();
+    const flag = readTableFlag(code, 'filterable');
+    if (flag === false) return new Set();
+    if (flag === true) return new Set(rows.map((r) => r.dataIndex));
+    return new Set(flag);
+  }, [code, rows, parseFailed]);
+
+  const [sortSet, setSortSet] = useState<Set<string>>(initialSortSet);
+  const [filterSet, setFilterSet] = useState<Set<string>>(initialFilterSet);
+
+  // ── 全选 / 半选状态 ──────────────────────────────────────────
+  const totalCount = rows.length;
+  const sortAllChecked = totalCount > 0 && sortSet.size === totalCount;
+  const sortIndeterminate = sortSet.size > 0 && sortSet.size < totalCount;
+  const filterAllChecked = totalCount > 0 && filterSet.size === totalCount;
+  const filterIndeterminate = filterSet.size > 0 && filterSet.size < totalCount;
+
+  // ── 切换单行 ─────────────────────────────────────────────────
+  const toggle = (
+    set: Set<string>,
+    setter: React.Dispatch<React.SetStateAction<Set<string>>>,
+    dataIndex: string,
+    checked: boolean,
+  ) => {
+    const next = new Set(set);
+    if (checked) next.add(dataIndex);
+    else next.delete(dataIndex);
+    setter(next);
+  };
+
+  const toggleAll = (
+    setter: React.Dispatch<React.SetStateAction<Set<string>>>,
+    checked: boolean,
+  ) => {
+    setter(checked ? new Set(rows.map((r) => r.dataIndex)) : new Set());
+  };
+
+  // ── 写回 code ────────────────────────────────────────────────
+  const setToFlag = (set: Set<string>) => {
+    if (set.size === totalCount) return true; // 全开
+    if (set.size === 0) return false; // 全关
+    // 中间状态：保持 rows 顺序输出数组
+    return rows.map((r) => r.dataIndex).filter((d) => set.has(d));
+  };
+
+  const handleOk = () => {
+    let next = code;
+    next = writeTableFlag(next, 'sortable', setToFlag(sortSet));
+    next = writeTableFlag(next, 'filterable', setToFlag(filterSet));
+    onConfirm(next);
+  };
+
+  // ── 表格列定义 ───────────────────────────────────────────────
+  const tableColumns: ColumnsType<Row> = [
+    {
+      title: t('canvas.modal.columnName', { defaultValue: '列名' }),
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: (
+        <Checkbox
+          checked={sortAllChecked}
+          indeterminate={sortIndeterminate}
+          onChange={(e) => toggleAll(setSortSet, e.target.checked)}
+        >
+          {t('canvas.modal.sortable', { defaultValue: '排序' })}
+        </Checkbox>
+      ),
+      key: 'sortable',
+      width: 100,
+      align: 'center',
+      render: (_v, row) => (
+        <Checkbox
+          checked={sortSet.has(row.dataIndex)}
+          onChange={(e) =>
+            toggle(sortSet, setSortSet, row.dataIndex, e.target.checked)
+          }
+        />
+      ),
+    },
+    {
+      title: (
+        <Checkbox
+          checked={filterAllChecked}
+          indeterminate={filterIndeterminate}
+          onChange={(e) => toggleAll(setFilterSet, e.target.checked)}
+        >
+          {t('canvas.modal.filterable', { defaultValue: '过滤' })}
+        </Checkbox>
+      ),
+      key: 'filterable',
+      width: 100,
+      align: 'center',
+      render: (_v, row) => (
+        <Checkbox
+          checked={filterSet.has(row.dataIndex)}
+          onChange={(e) =>
+            toggle(filterSet, setFilterSet, row.dataIndex, e.target.checked)
+          }
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Modal
+      {...CANVAS_MODAL_PROPS}
+      width={520}
+      open
+      title={
+        <span style={CANVAS_MODAL_TITLE_STYLE}>
+          {t('canvas.modal.columnConfigTitle', { defaultValue: '列配置' })}
+        </span>
+      }
+      okText={t('canvas.modal.ok', { defaultValue: '确认' })}
+      cancelText={t('canvas.modal.cancel', { defaultValue: '取消' })}
+      onOk={handleOk}
+      onCancel={onCancel}
+      okButtonProps={{ disabled: parseFailed }}
+    >
+      {parseFailed && (
+        <Alert
+          type="warning"
+          showIcon
+          style={{ marginBottom: 12 }}
+          message={t('canvas.modal.parseFailed', {
+            defaultValue: '解析列失败，请使用右键菜单的整表开关。',
+          })}
+        />
+      )}
+      {!parseFailed && (
+        <div data-testid="canvas-table-config-modal-table">
+          <AntTable<Row>
+            dataSource={rows}
+            columns={tableColumns}
+            pagination={false}
+            size="small"
+          />
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default TableConfigModal;