feat(admin): 名片列表支持一键载入高保真演示数据并优化直接预览微官网

admin/src/pages/card/list/index.tsx

@@ -30,6 +30,7 @@ const DEFAULT_PAGE = 1;
 const DEFAULT_SIZE = 10;
 const PAGE_API = '/api/admin/card/info/page';
 const UPDATE_API = '/api/admin/card/info/update';
+const SEED_API = '/api/admin/card/info/seed';
 
 type CardListRow = CardProfile & {
   slug?: string;
@@ -132,6 +133,7 @@ function CardListPage() {
   const [total, setTotal] = useState(0);
   const [filters, setFilters] = useState<CardListFilterForm>({});
   const [reloadTick, setReloadTick] = useState(0);
+  const [seeding, setSeeding] = useState(false);
 
   const refreshList = useCallback(() => {
     setReloadTick((tick) => tick + 1);
@@ -223,11 +225,33 @@ function CardListPage() {
         window.open(record.url, '_blank', 'noopener,noreferrer');
         return;
       }
+      const slug = record.slug?.trim() || (record.id ? String(record.id) : '');
+      if (slug) {
+        window.open(`/open/card/portal/preview-html/${slug}`, '_blank', 'noopener,noreferrer');
+        return;
+      }
       Message.error(t['cardList.view.unavailable']);
     },
     [t]
   );
 
+  const handleSeedCards = useCallback(async () => {
+    setSeeding(true);
+    try {
+      const { data: payload } = await axios.post<{ code: number; message?: string }>(SEED_API);
+      if (payload.code === 1000) {
+        Message.success(t['cardList.page.seed.success']);
+        refreshList();
+        return;
+      }
+      Message.error(payload.message || t['cardList.page.seed.fail']);
+    } catch (error: unknown) {
+      Message.error(resolveErrorMessage(error, t['cardList.page.seed.fail']));
+    } finally {
+      setSeeding(false);
+    }
+  }, [refreshList, t]);
+
   const handleCopyLink = useCallback(
     (record: CardListRow) => {
       const slug = record.slug?.trim();
@@ -386,13 +410,22 @@ function CardListPage() {
         title={t['menu.card.list']}
         subtitle={t['cardList.page.subtitle']}
         extra={
-          <Button
-            type="primary"
-            icon={<IconPlus />}
-            onClick={() => history.push('/card/builder')}
-          >
-            {t['cardList.page.create']}
-          </Button>
+          <Space size={12}>
+            <Button
+              type="outline"
+              loading={seeding}
+              onClick={handleSeedCards}
+            >
+              {t['cardList.page.seed']}
+            </Button>
+            <Button
+              type="primary"
+              icon={<IconPlus />}
+              onClick={() => history.push('/card/builder')}
+            >
+              {t['cardList.page.create']}
+            </Button>
+          </Space>
         }
       />
       <FilterCard>

admin/src/pages/card/list/locale/index.ts

@@ -3,6 +3,9 @@ const i18n = {
     'menu.card.list': 'All Cards',
     'cardList.page.subtitle': 'Review, publish, and share digital cards from one place.',
     'cardList.page.create': 'New card',
+    'cardList.page.seed': 'Load Demo Cards',
+    'cardList.page.seed.success': 'Successfully loaded 6 high-fidelity demo cards',
+    'cardList.page.seed.fail': 'Failed to load demo cards',
     'cardList.filter.name': 'Name',
     'cardList.filter.name.placeholder': 'Search by name',
     'cardList.filter.company': 'Company',
@@ -42,6 +45,9 @@ const i18n = {
     'menu.card.list': '名片资产库',
     'cardList.page.subtitle': '在同一处查看、发布并分享数字名片。',
     'cardList.page.create': '新建名片',
+    'cardList.page.seed': '载入高保真演示数据',
+    'cardList.page.seed.success': '成功载入 6 套全球顶级商务名片演示数据',
+    'cardList.page.seed.fail': '载入演示数据失败',
     'cardList.filter.name': '姓名',
     'cardList.filter.name.placeholder': '按姓名筛选',
     'cardList.filter.company': '公司',
@@ -81,6 +87,9 @@ const i18n = {
     'menu.card.list': 'مكتبة البطاقات',
     'cardList.page.subtitle': 'راجع البطاقات وانشرها وشاركها من مكان واحد.',
     'cardList.page.create': 'بطاقة جديدة',
+    'cardList.page.seed': 'تحميل بيانات العرض',
+    'cardList.page.seed.success': 'تم تحميل 6 بطاقات تجريبية بنجاح',
+    'cardList.page.seed.fail': 'فشل تحميل بطاقات العرض',
     'cardList.filter.name': 'الاسم',
     'cardList.filter.name.placeholder': 'البحث بالاسم',
     'cardList.filter.company': 'الشركة',