@gadmin2n/schematics 0.0.144 → 0.0.145

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

@@ -9,7 +9,7 @@ import {
   Spin,
   Modal,
   Input,
-  Typography,
+  Segmented,
   Space,
 } from 'antd';
 import {
@@ -36,10 +36,9 @@ import { ImportModal } from './components/ImportModal';
 import PublishModal from './PublishModal';
 import { useTranslation } from 'react-i18next';
 import { useUserPageAccess } from 'hooks/useUserPageAccess';
-import { customRequest } from 'helpers/http';
 import { useIsAgentAllowed } from 'config/agentAllowed';
 import { PageHeader } from 'components';
-import { PAGE_WRAPPER_STYLE } from 'constants/layout';
+import { PAGE_WRAPPER_STYLE, SEARCH_CARD_PROPS } from 'constants/layout';
 
 const COLS = 48;
 const ROW_HEIGHT = 10;
@@ -91,30 +90,19 @@ const CanvasListPage: React.FC = () => {
   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(() => {});
-  }, []);
+  const [allCanvases, setAllCanvases] = useState<SavedCanvasWithOwner[]>([]);
+  const [allLoading, setAllLoading] = useState(false);
+  const [filter, setFilter] = useState<'mine' | 'all'>('mine');
+  const showAll = isSystemAdmin && filter === 'all';
 
   useEffect(() => {
-    if (!isSystemAdmin || !currentUserId) return;
-    setOthersLoading(true);
+    if (!isSystemAdmin) return;
+    setAllLoading(true);
     fetchAllCanvases()
-      .then((all) => {
-        setOthersCanvases(all.filter((c) => c.userId !== currentUserId));
-      })
-      .catch(() => message.error('加载其他人的 Canvas 失败'))
-      .finally(() => setOthersLoading(false));
-  }, [isSystemAdmin, currentUserId]);
+      .then(setAllCanvases)
+      .catch(() => message.error('加载所有 Canvas 失败'))
+      .finally(() => setAllLoading(false));
+  }, [isSystemAdmin]);
 
   useEffect(() => {
     fetchCanvases()
@@ -146,6 +134,7 @@ const CanvasListPage: React.FC = () => {
     try {
       await deleteCanvas(id);
       setCanvases((prev) => prev.filter((c) => c.id !== id));
+      setAllCanvases((prev) => prev.filter((c) => c.id !== id));
       message.success(t('canvas.list.deleted'));
     } catch {
       message.error(t('canvas.list.deleteFailed'));
@@ -192,6 +181,11 @@ const CanvasListPage: React.FC = () => {
           c.id === renameModal.id ? { ...c, name: trimmed } : c,
         ),
       );
+      setAllCanvases((prev) =>
+        prev.map((c) =>
+          c.id === renameModal.id ? { ...c, name: trimmed } : c,
+        ),
+      );
       setRenameModal(null);
       message.success(t('canvas.list.renamed'));
       // 如果已发布，清除导航缓存并刷新
@@ -223,10 +217,216 @@ const CanvasListPage: React.FC = () => {
     fetchCanvases()
       .then(setCanvases)
       .catch(() => message.error(t('canvas.list.loadFailed')));
-  }, [t]);
+    if (isSystemAdmin) {
+      fetchAllCanvases()
+        .then(setAllCanvases)
+        .catch(() => message.error('加载所有 Canvas 失败'));
+    }
+  }, [t, isSystemAdmin]);
+
+  // 统一的 Canvas 卡片：名称叠在缩略图上，自己的卡带操作菜单；传 ownerName 时显示创建者
+  const ownIds = new Set(canvases.map((c) => c.id));
+  const renderCanvasCard = (
+    canvas: SavedCanvas,
+    options: { isOwn: boolean; ownerName?: string },
+  ) => {
+    const { isOwn, ownerName } = options;
+    return (
+      <div
+        key={canvas.id}
+        style={{
+          background: 'var(--ant-color-bg-container)',
+          borderRadius: 8,
+          overflow: 'hidden',
+          border: '1px solid var(--ant-color-border-secondary)',
+          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: 'var(--ant-color-fill-quaternary)',
+            position: 'relative',
+            pointerEvents: 'none',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            style={{
+              position: 'absolute',
+              top: 8,
+              left: 12,
+              zIndex: 1,
+              fontWeight: 500,
+              fontSize: 14,
+              maxWidth: '70%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {canvas.name}
+          </span>
+          {canvas.items.length > 0 ? (
+            <div
+              style={{
+                transform: 'scale(0.28)',
+                transformOrigin: 'top center',
+                width: 1200,
+                height: 640,
+                marginTop: 36,
+                flexShrink: 0,
+              }}
+            >
+              <IsolatedLivePreview code={buildPreviewCode(canvas)} />
+            </div>
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: 'var(--ant-color-text-quaternary)',
+                fontSize: 14,
+              }}
+            >
+              空画布
+            </div>
+          )}
+          {isOwn && isAgentAllowed && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+                pointerEvents: 'auto',
+              }}
+            >
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      key: 'publish',
+                      icon: <RocketOutlined />,
+                      label: t('canvas.publish'),
+                    },
+                    {
+                      key: 'export',
+                      icon: <ExportOutlined />,
+                      label: t('canvas.list.export'),
+                    },
+                    {
+                      key: 'rename',
+                      icon: <EditOutlined />,
+                      label: t('canvas.list.rename'),
+                    },
+                    { type: 'divider' },
+                    {
+                      key: 'delete',
+                      icon: <DeleteOutlined />,
+                      label: t('canvas.list.deleteBtn'),
+                      danger: true,
+                    },
+                  ],
+                  onClick: ({ key, domEvent }) => {
+                    domEvent.stopPropagation();
+                    if (key === 'publish') {
+                      setPublishCanvas(canvas);
+                    } else if (key === 'export') {
+                      setExportCanvasId(canvas.id);
+                      setExportModalOpen(true);
+                    } else if (key === 'rename') {
+                      openRename(canvas);
+                    } else if (key === 'delete') {
+                      Modal.confirm({
+                        title: t('canvas.list.deleteTitle'),
+                        content: canvas.publishedPageCode
+                          ? t('canvas.list.deletePublishedConfirm')
+                          : t('canvas.list.deleteConfirm'),
+                        okText: t('canvas.list.deleteBtn'),
+                        okButtonProps: { danger: true },
+                        cancelText: t('canvas.list.cancel'),
+                        onOk: () => handleDelete(canvas.id),
+                      });
+                    }
+                  },
+                }}
+                trigger={['click']}
+              >
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<MoreOutlined />}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </Dropdown>
+            </div>
+          )}
+        </div>
 
-  // ── 删除确认 ──
-  const [deleteConfirm, setDeleteConfirm] = useState<SavedCanvas | null>(null);
+        {/* Info */}
+        <div
+          style={{
+            padding: '12px 16px',
+            borderTop: '1px solid var(--ant-color-border-secondary)',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Badge
+              status={canvas.publishedPageCode ? 'success' : 'default'}
+              text={
+                canvas.publishedPageCode
+                  ? t('canvas.list.published')
+                  : t('canvas.list.unpublished')
+              }
+              style={{
+                fontSize: 12,
+                color: 'var(--ant-color-text-secondary)',
+              }}
+            />
+            <span
+              style={{
+                fontSize: 12,
+                color: 'var(--ant-color-text-tertiary)',
+              }}
+            >
+              修改于 {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
+            </span>
+          </div>
+          {ownerName !== undefined && (
+            <div
+              style={{
+                fontSize: 12,
+                color: 'var(--ant-color-text-tertiary)',
+                marginTop: 4,
+              }}
+            >
+              创建者: {ownerName}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
 
   if (loading) {
     return (
@@ -271,210 +471,24 @@ const CanvasListPage: React.FC = () => {
         }
       />
 
+      {/* Filter（仅 system_admin 可见） */}
+      {isSystemAdmin && (
+        <Card {...SEARCH_CARD_PROPS}>
+          <Segmented
+            value={filter}
+            onChange={(v) => setFilter(v as 'mine' | 'all')}
+            options={[
+              { label: t('canvas.list.filterMine'), value: 'mine' },
+              { label: t('canvas.list.filterAll'), value: 'all' },
+            ]}
+          />
+        </Card>
+      )}
+
       {/* Grid */}
       <Card>
-        <Typography.Title level={5} style={{ margin: '0 0 16px 0' }}>
-          {t('canvas.list.myCanvases')}
-        </Typography.Title>
-        {canvases.length > 0 ? (
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(3, 1fr)',
-              gap: 20,
-            }}
-          >
-            {canvases.map((canvas) => (
-              <div
-                key={canvas.id}
-                style={{
-                  background: 'var(--ant-color-bg-container)',
-                  borderRadius: 8,
-                  overflow: 'hidden',
-                  border: '1px solid var(--ant-color-border-secondary)',
-                  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: 'var(--ant-color-fill-quaternary)',
-                    position: 'relative',
-                    pointerEvents: 'none',
-                    display: 'flex',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <span
-                    style={{
-                      position: 'absolute',
-                      top: 8,
-                      left: 12,
-                      zIndex: 1,
-                      fontWeight: 500,
-                      fontSize: 14,
-                      maxWidth: '70%',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
-                    {canvas.name}
-                  </span>
-                  {canvas.items.length > 0 ? (
-                    <div
-                      style={{
-                        transform: 'scale(0.28)',
-                        transformOrigin: 'top center',
-                        width: 1200,
-                        height: 640,
-                        marginTop: 36,
-                        flexShrink: 0,
-                      }}
-                    >
-                      <IsolatedLivePreview code={buildPreviewCode(canvas)} />
-                    </div>
-                  ) : (
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '100%',
-                        color: 'var(--ant-color-text-quaternary)',
-                        fontSize: 14,
-                      }}
-                    >
-                      空画布
-                    </div>
-                  )}
-                  {isAgentAllowed && (
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: 8,
-                        right: 8,
-                        pointerEvents: 'auto',
-                      }}
-                    >
-                      <Dropdown
-                        menu={{
-                          items: [
-                            {
-                              key: 'publish',
-                              icon: <RocketOutlined />,
-                              label: t('canvas.publish'),
-                            },
-                            {
-                              key: 'export',
-                              icon: <ExportOutlined />,
-                              label: t('canvas.list.export'),
-                            },
-                            {
-                              key: 'rename',
-                              icon: <EditOutlined />,
-                              label: t('canvas.list.rename'),
-                            },
-                            { type: 'divider' },
-                            {
-                              key: 'delete',
-                              icon: <DeleteOutlined />,
-                              label: t('canvas.list.deleteBtn'),
-                              danger: true,
-                            },
-                          ],
-                          onClick: ({ key, domEvent }) => {
-                            domEvent.stopPropagation();
-                            if (key === 'publish') {
-                              setPublishCanvas(canvas);
-                            } else if (key === 'export') {
-                              setExportCanvasId(canvas.id);
-                              setExportModalOpen(true);
-                            } else if (key === 'rename') {
-                              openRename(canvas);
-                            } else if (key === 'delete') {
-                              setDeleteConfirm(canvas);
-                            }
-                          },
-                        }}
-                        trigger={['click']}
-                      >
-                        <Button
-                          type="text"
-                          size="small"
-                          icon={<MoreOutlined />}
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                      </Dropdown>
-                    </div>
-                  )}
-                </div>
-
-                {/* Info */}
-                <div
-                  style={{
-                    padding: '12px 16px',
-                    borderTop: '1px solid var(--ant-color-border-secondary)',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}
-                >
-                  <Badge
-                    status={canvas.publishedPageCode ? 'success' : 'default'}
-                    text={
-                      canvas.publishedPageCode
-                        ? t('canvas.list.published')
-                        : t('canvas.list.unpublished')
-                    }
-                    style={{
-                      fontSize: 12,
-                      color: 'var(--ant-color-text-secondary)',
-                    }}
-                  />
-                  <span
-                    style={{
-                      fontSize: 12,
-                      color: 'var(--ant-color-text-tertiary)',
-                    }}
-                  >
-                    修改于 {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div
-            style={{
-              textAlign: 'center',
-              color: 'var(--ant-color-text-tertiary)',
-              padding: '80px 0',
-            }}
-          >
-            <p>还没有 Canvas，点击上方按钮新建一个吧</p>
-          </div>
-        )}
-      </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 ? (
+        {showAll ? (
+          allLoading ? (
             <div
               style={{
                 display: 'flex',
@@ -484,7 +498,7 @@ const CanvasListPage: React.FC = () => {
             >
               <Spin size="large" />
             </div>
-          ) : othersCanvases.length > 0 ? (
+          ) : allCanvases.length > 0 ? (
             <div
               style={{
                 display: 'grid',
@@ -492,126 +506,12 @@ const CanvasListPage: React.FC = () => {
                 gap: 20,
               }}
             >
-              {othersCanvases.map((canvas) => (
-                <div
-                  key={canvas.id}
-                  style={{
-                    background: 'var(--ant-color-bg-container)',
-                    borderRadius: 8,
-                    overflow: 'hidden',
-                    border: '1px solid var(--ant-color-border-secondary)',
-                    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: 'var(--ant-color-fill-quaternary)',
-                      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: 'var(--ant-color-text-quaternary)',
-                          fontSize: 14,
-                        }}
-                      >
-                        空画布
-                      </div>
-                    )}
-                  </div>
-                  {/* Info */}
-                  <div
-                    style={{
-                      padding: '12px 16px',
-                      borderTop: '1px solid var(--ant-color-border-secondary)',
-                    }}
-                  >
-                    <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>
-                      <Badge
-                        status={
-                          canvas.publishedPageCode ? 'success' : 'default'
-                        }
-                        text={
-                          canvas.publishedPageCode
-                            ? t('canvas.list.published')
-                            : t('canvas.list.unpublished')
-                        }
-                        style={{
-                          fontSize: 12,
-                          color: 'var(--ant-color-text-secondary)',
-                        }}
-                      />
-                    </div>
-                    <div
-                      style={{
-                        fontSize: 12,
-                        color: 'var(--ant-color-text-tertiary)',
-                        marginBottom: 4,
-                      }}
-                    >
-                      创建者: {canvas.ownerName}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: 12,
-                        color: 'var(--ant-color-text-tertiary)',
-                      }}
-                    >
-                      修改于{' '}
-                      {new Date(canvas.updatedAt).toLocaleString('zh-CN')}
-                    </div>
-                  </div>
-                </div>
-              ))}
+              {allCanvases.map((canvas) =>
+                renderCanvasCard(canvas, {
+                  isOwn: ownIds.has(canvas.id),
+                  ownerName: canvas.ownerName,
+                }),
+              )}
             </div>
           ) : (
             <div
@@ -621,11 +521,33 @@ const CanvasListPage: React.FC = () => {
                 padding: '40px 0',
               }}
             >
-              没有其他用户的 Canvas
+              暂无 Canvas
             </div>
-          )}
-        </Card>
-      )}
+          )
+        ) : canvases.length > 0 ? (
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(3, 1fr)',
+              gap: 20,
+            }}
+          >
+            {canvases.map((canvas) =>
+              renderCanvasCard(canvas, { isOwn: true }),
+            )}
+          </div>
+        ) : (
+          <div
+            style={{
+              textAlign: 'center',
+              color: 'var(--ant-color-text-tertiary)',
+              padding: '80px 0',
+            }}
+          >
+            <p>还没有 Canvas，点击上方按钮新建一个吧</p>
+          </div>
+        )}
+      </Card>
 
       {/* 重命名 Modal */}
       <Modal
@@ -665,28 +587,6 @@ const CanvasListPage: React.FC = () => {
         )}
       </Modal>
 
-      {/* 删除确认 Modal */}
-      <Modal
-        title={t('canvas.list.deleteTitle')}
-        open={!!deleteConfirm}
-        onOk={() => {
-          if (deleteConfirm) {
-            handleDelete(deleteConfirm.id);
-            setDeleteConfirm(null);
-          }
-        }}
-        onCancel={() => setDeleteConfirm(null)}
-        okText={t('canvas.list.deleteBtn')}
-        okButtonProps={{ danger: true }}
-        cancelText={t('canvas.list.cancel')}
-      >
-        <p>
-          {deleteConfirm?.publishedPageCode
-            ? t('canvas.list.deletePublishedConfirm')
-            : t('canvas.list.deleteConfirm')}
-        </p>
-      </Modal>
-
       {publishCanvas && (
         <PublishModal
           open