@gadmin2n/schematics 0.0.95 → 0.0.96

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/modules/canvas/canvas.controller.ts

@@ -2,6 +2,7 @@ import {
   Body,
   Controller,
   Delete,
+  ForbiddenException,
   Get,
   Param,
   ParseIntPipe,
@@ -11,6 +12,7 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
+import { PrismaService } from 'nestjs-prisma';
 import AuthGuard, { AllowUnauthorizedRequest } from '../../lib/auth.guard';
 import {
   CreateCanvasDto,
@@ -24,13 +26,29 @@ import { CanvasService } from './canvas.service';
 @UseGuards(AuthGuard)
 @Controller('canvas')
 export class CanvasController {
-  constructor(private readonly canvasService: CanvasService) {}
+  constructor(
+    private readonly canvasService: CanvasService,
+    private readonly prisma: PrismaService,
+  ) {}
 
   @Get()
   findAll(@Req() req) {
     return this.canvasService.findAllByUser(req.user.userid);
   }
 
+  @Get('all')
+  async findAllForAdmin(@Req() req) {
+    const record = await this.prisma.user.findFirst({
+      where: { userid: req.user.userid },
+      select: { roles: true },
+    });
+    const roles: string[] = record ? JSON.parse(record.roles) : [];
+    if (!roles.includes('SYSTEM_ADMIN')) {
+      throw new ForbiddenException('仅 SYSTEM_ADMIN 可访问');
+    }
+    return this.canvasService.findAllCanvases();
+  }
+
   @Post()
   create(@Req() req, @Body() dto: CreateCanvasDto) {
     return this.canvasService.create(req.user.userid, dto);
@@ -56,12 +74,23 @@ export class CanvasController {
 
   @Get(':id')
   findOne(@Req() req, @Param('id') id: string) {
-    return this.canvasService.findOne(id, req.user.userid);
+    const roles: string[] = req.user?.configPerms?.roles ?? [];
+    const isAdmin = roles.includes('SYSTEM_ADMIN');
+    return this.canvasService.findOne(
+      id,
+      isAdmin ? undefined : req.user.userid,
+    );
   }
 
   @Put(':id')
   update(@Req() req, @Param('id') id: string, @Body() dto: UpdateCanvasDto) {
-    return this.canvasService.update(id, req.user.userid, dto);
+    const roles: string[] = req.user?.configPerms?.roles ?? [];
+    const isAdmin = roles.includes('SYSTEM_ADMIN');
+    return this.canvasService.update(
+      id,
+      isAdmin ? undefined : req.user.userid,
+      dto,
+    );
   }
 
   @Delete(':id')

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/modules/canvas/canvas.service.ts

@@ -25,9 +25,9 @@ export class CanvasService {
     });
   }
 
-  findOne(id: string, userId: string) {
+  findOne(id: string, userId?: string) {
     return this.prisma.canvas.findFirst({
-      where: { id, userId },
+      where: userId ? { id, userId } : { id },
     });
   }
 
@@ -58,10 +58,12 @@ export class CanvasService {
     });
   }
 
-  async update(id: string, userId: string, dto: UpdateCanvasDto) {
+  async update(id: string, userId: string | undefined, dto: UpdateCanvasDto) {
     if (dto.name !== undefined) {
       const existing = await this.prisma.canvas.findFirst({
-        where: { userId, name: dto.name, NOT: { id } },
+        where: userId
+          ? { userId, name: dto.name, NOT: { id } }
+          : { name: dto.name, NOT: { id } },
       });
       if (existing) {
         throw new ConflictException('Canvas 名称已存在');
@@ -71,7 +73,7 @@ export class CanvasService {
     // 如果改名且已发布，同步更新 page 表的所有名称字段 + code + path
     if (dto.name !== undefined) {
       const canvas = await this.prisma.canvas.findFirst({
-        where: { id, userId },
+        where: userId ? { id, userId } : { id },
       });
       if (canvas?.publishedPageCode) {
         const newSlug =
@@ -100,7 +102,7 @@ export class CanvasService {
     }
 
     return this.prisma.canvas.updateMany({
-      where: { id, userId },
+      where: userId ? { id, userId } : { id },
       data: {
         ...(dto.name !== undefined && { name: dto.name }),
         ...(dto.items !== undefined && { items: dto.items }),
@@ -228,6 +230,26 @@ export class CanvasService {
     return { success: true };
   }
 
+  async findAllCanvases() {
+    const canvases = await this.prisma.canvas.findMany({
+      orderBy: { createdAt: 'asc' },
+    });
+
+    const userIds = [...new Set(canvases.map((c) => c.userId))];
+    const users = await this.prisma.user.findMany({
+      where: { userid: { in: userIds } },
+      select: { userid: true, username: true },
+    });
+    const userMap = new Map(
+      users.map((u) => [u.userid, u.username ?? u.userid]),
+    );
+
+    return canvases.map((c) => ({
+      ...c,
+      ownerName: userMap.get(c.userId) ?? c.userId,
+    }));
+  }
+
   async savedQueryCreate(dto: CreateSavedQueryDto) {
     const sql = dto.sql.trim();
     if (!sql.toUpperCase().startsWith('SELECT')) {

package/dist/lib/application/files/gadmin2-game-angle-demo/web/package.json

@@ -10,7 +10,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.2",
-    "@gadmin2n/charts": "^0.0.7",
+    "@gadmin2n/charts": "^0.0.8",
     "@gadmin2n/react-common": "^0.0.70",
     "@monaco-editor/react": "^4.7.0",
     "@refinedev/antd": "^5.47.0",

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/agentPanel/promptGenerator.ts

@@ -27,12 +27,28 @@ export function generatePrompt(options: PromptOptions): string {
       parts.push('');
     }
 
-    if (skill) {
+    parts.push(`严格按照以下 skill 完成代码修改：`);
+    parts.push(
+      `1. **canvas-component-edit skill**（位于 .claude/skills/canvas-component-edit/SKILL.md）：负责修改流程和推送`,
+    );
+    parts.push(
+      `2. **canvas-design-standard skill**（位于 .claude/skills/canvas-design-standard/SKILL.md）：所有手写 UI 代码必须遵循此规范`,
+    );
+    if (skill && skill !== 'canvas-component-edit') {
       parts.push(
-        `严格按照: ${skill} skill（位于 .claude/skills/${skill}/SKILL.md）描述的方法来完成代码的修改。如有不确定的地方，请先询问我，不要自己假设。`,
+        `3. **${skill} skill**（位于 .claude/skills/${skill}/SKILL.md）：本次任务的主要执行规范`,
       );
-      parts.push('');
     }
+    parts.push(``);
+    parts.push(`**关于第 2 条的强制要求：**`);
+    parts.push(
+      `- 最终代码中禁止出现原生 HTML 表单元素（\`<input>\`、\`<button>\`、\`<select>\` 等）`,
+    );
+    parts.push(
+      `- 所有 UI 元素必须使用等价的 Ant Design 组件（如 \`Input\`、\`Button\`、\`Space\` 等）`,
+    );
+    parts.push(`- 间距使用规范值（8px / 12px / 16px），不得随意硬编码`);
+    parts.push('');
 
     const canvasItemId = inspectedElement.meta?.canvasItemId ?? '';
     parts.push('### 更多辅助信息：');

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/locales/en/common.json

@@ -266,10 +266,26 @@
       "enableSmooth": "Enable Smooth",
       "switchTo": "Switch to",
       "showDownload": "Show Download",
-      "hideDownload": "Hide Download"
+      "hideDownload": "Hide Download",
+      "enableSorting": "Enable Sorting",
+      "disableSorting": "Disable Sorting",
+      "enableFiltering": "Enable Filtering",
+      "disableFiltering": "Disable Filtering",
+      "configColumns": "Configure Columns"
+    },
+    "modal": {
+      "columnConfigTitle": "Column Settings",
+      "columnName": "Column",
+      "sortable": "Sort",
+      "filterable": "Filter",
+      "ok": "OK",
+      "cancel": "Cancel",
+      "parseFailed": "Failed to parse columns. Please use the table-level toggle from the right-click menu."
     },
     "list": {
-      "title": "My Canvas",
+      "title": "Canvas",
+      "myCanvases": "My Canvas",
+      "othersCanvases": "Others' Canvas",
       "create": "New Canvas",
       "published": "Published",
       "unpublished": "Unpublished",

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/locales/zh_CN/common.json

@@ -268,10 +268,26 @@
       "enableSmooth": "开启拟合曲线",
       "switchTo": "切换到",
       "showDownload": "显示下载按钮",
-      "hideDownload": "隐藏下载按钮"
+      "hideDownload": "隐藏下载按钮",
+      "enableSorting": "启用排序",
+      "disableSorting": "禁用排序",
+      "enableFiltering": "启用过滤",
+      "disableFiltering": "禁用过滤",
+      "configColumns": "配置列"
+    },
+    "modal": {
+      "columnConfigTitle": "列配置",
+      "columnName": "列名",
+      "sortable": "排序",
+      "filterable": "过滤",
+      "ok": "确认",
+      "cancel": "取消",
+      "parseFailed": "解析列失败，请使用右键菜单的整表开关。"
     },
     "list": {
-      "title": "我的 Canvas",
+      "title": "Canvas",
+      "myCanvases": "我的 Canvas",
+      "othersCanvases": "其他人的 Canvas",
       "create": "新建 Canvas",
       "published": "已发布",
       "unpublished": "未发布",

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;

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

@@ -0,0 +1,338 @@
+/**
+ * Canvas Table 代码字符串解析 / 改写工具。
+ *
+ * 这些函数全部以 JSX 字符串为输入输出，不操作 React 组件实例。
+ * 由 TableConfigModal 与 canvasContextMenuRegistry 中的 tableActions 共用。
+ */
+
+export interface ColumnMeta {
+  title: string;
+  dataIndex: string;
+}
+
+export type SortFilterFlag = true | false | string[];
+
+/**
+ * 在 JSX 对象字面量片段中读取一个字符串属性的值，支持双引号 / 单引号字面量
+ * 与 \" \\ \n 等转义序列。无法解析时返回 null。
+ */
+function readStringProp(obj: string, propName: string): string | null {
+  // 双引号字面量：(?:[^"\\]|\\.)* 表示除 " 和 \ 外的字符 或 反斜杠+任意单字符
+  const dq = obj.match(
+    new RegExp(`${propName}\\s*:\\s*("(?:[^"\\\\]|\\\\.)*")`),
+  );
+  if (dq) {
+    try {
+      return JSON.parse(dq[1]);
+    } catch {
+      return null;
+    }
+  }
+  const sq = obj.match(
+    new RegExp(`${propName}\\s*:\\s*'((?:[^'\\\\]|\\\\.)*)'`),
+  );
+  if (sq) {
+    // 把单引号字面量转成 JSON 双引号字面量（替换未转义的双引号、保留已转义序列）
+    const inner = sq[1].replace(/(^|[^\\])"/g, '$1\\"');
+    try {
+      return JSON.parse(`"${inner}"`);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+
+/**
+ * 从 Table 组件的 JSX 字符串中解析 columns 数组里每列的 title/dataIndex。
+ *
+ * 解析失败（columns 含复杂 render 函数、JSON 不规范等）时返回 null。
+ * 调用方据此显示 Alert + 禁用确认。
+ */
+export function parseTableColumnsMeta(code: string): ColumnMeta[] | null {
+  const match = code.match(/columns\s*=\s*\{(\[[\s\S]*?\])\}/);
+  if (!match) return null;
+  const arrayLiteral = match[1];
+
+  // 用 regex 提取每个 { ... } 对象内的 title 和 dataIndex 字符串字面量。
+  // 这种方法对含 render: (v) => ... 的列也容错（直接忽略 render）。
+  const objects = arrayLiteral.match(/\{[^{}]*\}/g);
+  if (!objects || objects.length === 0) return null;
+
+  const result: ColumnMeta[] = [];
+  for (const obj of objects) {
+    const title = readStringProp(obj, 'title');
+    const dataIndex = readStringProp(obj, 'dataIndex');
+    if (title != null && dataIndex != null) {
+      result.push({ title, dataIndex });
+    }
+  }
+  return result.length > 0 ? result : null;
+}
+
+/**
+ * 从 code 字符串中读取 sortable / filterable prop 当前状态。
+ *
+ * 返回：
+ *   - true：未设置或显式 {true}（默认全开）
+ *   - false：显式 {false}
+ *   - string[]：显式数组形式 {[...]}
+ */
+export function readTableFlag(
+  code: string,
+  propName: 'sortable' | 'filterable',
+): SortFilterFlag {
+  if (new RegExp(`\\b${propName}\\s*=\\s*\\{false\\}`).test(code)) return false;
+  const arrayMatch = code.match(
+    new RegExp(`\\b${propName}\\s*=\\s*\\{(\\[[^\\]]*\\])\\}`),
+  );
+  if (arrayMatch) {
+    try {
+      const parsed = JSON.parse(arrayMatch[1].replace(/'/g, '"'));
+      if (Array.isArray(parsed)) return parsed as string[];
+    } catch {
+      // 解析失败回退为 true
+    }
+  }
+  return true;
+}
+
+/**
+ * 把 sortable / filterable prop 写回 code 字符串。
+ *
+ * - flag === true：删除 prop（恢复默认）
+ * - flag === false：替换/插入 `propName={false}`
+ * - flag === string[]：替换/插入 `propName={["a","b"]}`
+ *
+ * 注入位置：testId= 那行之前；找不到 testId 则回退到 /> 之前。
+ */
+export function writeTableFlag(
+  code: string,
+  propName: 'sortable' | 'filterable',
+  flag: SortFilterFlag,
+): string {
+  // 先删除现有 prop（无论什么形式）
+  let next = code.replace(
+    new RegExp(`\\s*\\b${propName}\\s*=\\s*\\{(true|false|\\[[^\\]]*\\])\\}`),
+    '',
+  );
+
+  if (flag === true) return next;
+
+  const value = flag === false ? '{false}' : `{${JSON.stringify(flag)}}`;
+  const inject = `${propName}=${value}`;
+
+  if (/testId\s*=/.test(next)) {
+    next = next.replace(/([ \t]*)(testId\s*=)/, `$1${inject}\n$1$2`);
+  } else {
+    next = next.replace(/\/>/, `  ${inject}\n/>`);
+  }
+  return next;
+}
+
+// ─── MultiChart-as-table 列配置 helpers ────────────────────────────────
+
+/** 在 s 中从 start 位置（指向 open）开始，找出与之匹配的 close 字符的位置；不平衡返回 -1。 */
+function findBalancedClose(
+  s: string,
+  start: number,
+  open: string,
+  close: string,
+): number {
+  let depth = 0;
+  for (let i = start; i < s.length; i++) {
+    if (s[i] === open) depth++;
+    else if (s[i] === close) {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * 定位 chartConfig={...} 的 span。
+ *  - start：'chartConfig' 文字开始位置
+ *  - end：JSX 闭合 '}' 之后的位置（半开区间）
+ *  - jsonStr：JSX 大括号里面的内容（trim 后），通常是一个 JSON 对象字面量
+ *
+ * 找不到返回 null。
+ */
+function findChartConfigSpan(
+  code: string,
+): { start: number; end: number; jsonStr: string } | null {
+  const m = code.match(/chartConfig\s*=\s*\{/);
+  if (!m || m.index == null) return null;
+  const propStart = m.index;
+  const jsxOpen = propStart + m[0].length - 1;
+  const jsxClose = findBalancedClose(code, jsxOpen, '{', '}');
+  if (jsxClose === -1) return null;
+  const jsonStr = code.slice(jsxOpen + 1, jsxClose).trim();
+  return { start: propStart, end: jsxClose + 1, jsonStr };
+}
+
+/**
+ * 从 MultiChart code 字符串中解析 data prop，推导出 antd Table columns 元数据。
+ * 与 MultiChart 内部 toTableData(data) 保持一致：
+ *   - 第一列 "分类" / dataIndex "__x"
+ *   - 后续列对应 data.series 各项的 name
+ *
+ * 解析失败返回 null（调用方据此显示 Alert + 禁用确认）。
+ *
+ * 内部用平衡大括号匹配定位 data={{...}}，避免 lazy 正则因 series 中嵌套 [...] 而截断。
+ */
+export function parseMultiChartTableColumns(code: string): ColumnMeta[] | null {
+  const m = code.match(/data\s*=\s*\{/);
+  if (!m || m.index == null) return null;
+  const jsxOpen = m.index + m[0].length - 1;
+  const jsxClose = findBalancedClose(code, jsxOpen, '{', '}');
+  if (jsxClose === -1) return null;
+  const expr = code.slice(jsxOpen + 1, jsxClose);
+
+  // 仅在 series: [...] 范围内抽 name 字段，避免 tooltip.name / itemStyle.name 等污染
+  const seriesIdx = expr.search(/series\s*:\s*\[/);
+  if (seriesIdx === -1) return null;
+  const arrOpen = expr.indexOf('[', seriesIdx);
+  if (arrOpen === -1) return null;
+  const arrClose = findBalancedClose(expr, arrOpen, '[', ']');
+  if (arrClose === -1) return null;
+  const seriesBody = expr.slice(arrOpen + 1, arrClose);
+
+  const nameMatches = Array.from(
+    seriesBody.matchAll(/name\s*:\s*['"]([^'"]+)['"]/g),
+  );
+  const seriesNames = nameMatches.map((mm) => mm[1]);
+  if (seriesNames.length === 0) return null;
+
+  return [
+    { title: '分类', dataIndex: '__x' },
+    ...seriesNames.map((name) => ({ title: name, dataIndex: name })),
+  ];
+}
+
+/**
+ * 从 MultiChart code 中读取 chartConfig.table.sortable / .filterable。
+ * 三态语义同 readTableFlag。缺省返回 { sortable: true, filterable: true }。
+ */
+export function readMultiChartTableFlags(code: string): {
+  sortable: SortFilterFlag;
+  filterable: SortFilterFlag;
+} {
+  const span = findChartConfigSpan(code);
+  if (!span) return { sortable: true, filterable: true };
+
+  let cfg: Record<string, Record<string, unknown>>;
+  try {
+    cfg = JSON.parse(span.jsonStr);
+  } catch {
+    return { sortable: true, filterable: true };
+  }
+
+  const tableCfg = cfg.table ?? {};
+  const readFlag = (v: unknown): SortFilterFlag => {
+    if (v === false) return false;
+    if (Array.isArray(v)) return v as string[];
+    return true;
+  };
+
+  return {
+    sortable: readFlag(tableCfg.sortable),
+    filterable: readFlag(tableCfg.filterable),
+  };
+}
+
+/**
+ * 把 sortable / filterable 写回 MultiChart code 的 chartConfig.table。
+ * - true → 删除该字段（恢复默认）
+ * - false → 写 false
+ * - string[] → 写数组
+ *
+ * 清理空对象：tableCfg 为空 → 删 chartConfig.table；
+ *           chartConfig 整体为空 → 删 prop（同时吃掉前置的换行与缩进，避免空行）。
+ * 保留其它图表的配置（chartConfig.bar / .line 等）不变。
+ */
+export function writeMultiChartTableFlags(
+  code: string,
+  sortable: SortFilterFlag,
+  filterable: SortFilterFlag,
+): string {
+  const span = findChartConfigSpan(code);
+  let cfg: Record<string, Record<string, unknown>> = {};
+  if (span) {
+    try {
+      cfg = JSON.parse(span.jsonStr);
+    } catch {
+      cfg = {};
+    }
+  }
+
+  const tableCfg = { ...(cfg.table ?? {}) };
+
+  if (sortable === true) delete tableCfg.sortable;
+  else tableCfg.sortable = sortable;
+
+  if (filterable === true) delete tableCfg.filterable;
+  else tableCfg.filterable = filterable;
+
+  const newCfg: Record<string, Record<string, unknown>> = { ...cfg };
+  if (Object.keys(tableCfg).length === 0) {
+    delete newCfg.table;
+  } else {
+    newCfg.table = tableCfg;
+  }
+
+  // chartConfig 整体为空 → 删除整段 prop
+  if (Object.keys(newCfg).length === 0) {
+    if (!span) return code;
+    // 向前吃 ' ' / '\t'，以及紧贴的一个 '\n'，避免留下空行
+    let lead = span.start;
+    while (lead > 0 && (code[lead - 1] === ' ' || code[lead - 1] === '\t'))
+      lead--;
+    if (lead > 0 && code[lead - 1] === '\n') lead--;
+    return code.slice(0, lead) + code.slice(span.end);
+  }
+
+  const newCfgStr = `chartConfig={${JSON.stringify(newCfg)}}`;
+  if (span) {
+    return code.slice(0, span.start) + newCfgStr + code.slice(span.end);
+  }
+  // 没有 chartConfig prop，注入到 testId 之前
+  if (/testId\s*=/.test(code)) {
+    return code.replace(/([ \t]*)(testId\s*=)/, `$1${newCfgStr}\n$1$2`);
+  }
+  return code.replace(/\/>/, `  ${newCfgStr}\n/>`);
+}
+
+/**
+ * 构造一段虚拟独立 Table JSX，用于喂给 TableConfigModal。
+ * Modal 内部走原有 parseTableColumnsMeta / readTableFlag 路径，
+ * 完全感知不到这段 code 是合成的。
+ *
+ * 注意：columns 必须输出双引号字符串字面量，否则 parseTableColumnsMeta
+ * 的正则匹配不到 title / dataIndex。
+ */
+export function buildVirtualTableCode(
+  columns: ColumnMeta[],
+  flags: { sortable: SortFilterFlag; filterable: SortFilterFlag },
+): string {
+  const colsStr = columns
+    .map(
+      (c) =>
+        `    { title: ${JSON.stringify(c.title)}, dataIndex: ${JSON.stringify(c.dataIndex)}, key: ${JSON.stringify(c.dataIndex)} }`,
+    )
+    .join(',\n');
+
+  const flagToProp = (name: string, flag: SortFilterFlag): string => {
+    if (flag === true) return '';
+    if (flag === false) return `  ${name}={false}\n`;
+    return `  ${name}={${JSON.stringify(flag)}}\n`;
+  };
+
+  return `<Table
+  dataSource={[]}
+  columns={[
+${colsStr}
+  ]}
+${flagToProp('sortable', flags.sortable)}${flagToProp('filterable', flags.filterable)}  testId="virtual-multichart-table"
+/>`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadmin2n/schematics",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [