feat(admin-web): improve responsive admin layout

2026-05-13 22:29:46 +08:00
parent 34ef5873ca
commit b3bd23e238
6 changed files with 746 additions and 43 deletions
@@ -240,6 +240,7 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
    title: t('common.title'),
    dataIndex: 'title',
    key: 'title',
+    width: 360,
  },
  {
    title: t('common.templateType'),
@@ -273,6 +274,19 @@ const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
  },
 ])

+const articlePagination = computed(() =>
+  shouldUseRecentFallback.value
+    ? false
+    : {
+        current: page.value,
+        pageSize: pageSize.value,
+        total: displayedArticleTotal.value,
+        showSizeChanger: true,
+        onChange: handleTableChange,
+        onShowSizeChange: handleTableChange,
+      },
+)
+
 // removed wizard watch effect

 function applyFilters(): void {
@@ -545,22 +559,13 @@ function refreshRecords(): void {
      </div>

      <a-table
+        class="templates-view__desktop-table"
        :columns="articleColumns"
        :data-source="displayedArticles"
        :loading="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
        row-key="id"
-        :pagination="
-          shouldUseRecentFallback
-            ? false
-            : {
-                current: page,
-                pageSize,
-                total: displayedArticleTotal,
-                showSizeChanger: true,
-                onChange: handleTableChange,
-                onShowSizeChange: handleTableChange,
-              }
-        "
+        :pagination="articlePagination"
+        :scroll="{ x: 1068 }"
      >
        <template #emptyText>{{ t('templates.list.empty') }}</template>

@@ -609,6 +614,82 @@ function refreshRecords(): void {
          </template>
        </template>
      </a-table>
+
+      <div class="templates-view__mobile-records">
+        <a-skeleton
+          v-if="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
+          active
+          :paragraph="{ rows: 6 }"
+        />
+
+        <a-empty v-else-if="!displayedArticles.length" :description="t('templates.list.empty')" />
+
+        <template v-else>
+          <article
+            v-for="record in displayedArticles"
+            :key="record.id"
+            class="templates-view__mobile-record"
+          >
+            <div class="templates-view__mobile-record-main">
+              <h4>{{ record.title || t('article.untitled') }}</h4>
+              <ArticleSourceMeta
+                :source-type="record.source_type"
+                :generation-mode="record.generation_mode"
+                :created-at="record.created_at"
+              />
+            </div>
+
+            <div class="templates-view__mobile-record-meta">
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.templateType') }}</span>
+                <strong>{{ record.template_name || '--' }}</strong>
+              </div>
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.wordCount') }}</span>
+                <strong>{{ record.word_count || '--' }}</strong>
+              </div>
+            </div>
+
+            <div class="templates-view__mobile-record-status">
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.generateStatus') }}</span>
+                <ArticleGenerateStatus :status="record.generate_status" />
+              </div>
+              <div class="templates-view__mobile-record-field">
+                <span>{{ t('common.publishStatus') }}</span>
+                <ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
+              </div>
+            </div>
+
+            <div class="templates-view__mobile-record-actions">
+              <span>{{ t('common.actions') }}</span>
+              <ArticleActionGroup
+                v-bind="resolveArticleActionState(record)"
+                :delete-confirm-title="t('templates.list.deleteConfirm')"
+                :delete-loading="deleteMutation.isPending.value"
+                :regenerate-confirm-title="t('common.regenerateConfirm')"
+                :regenerate-loading="regeneratingArticleId === record.id"
+                @publish="openPublish(record)"
+                @edit="openEditor(record)"
+                @preview="openPreview(record)"
+                @copy="copyArticle(record.id)"
+                @regenerate="handleRegenerate(record)"
+                @delete="handleDelete(record.id)"
+              />
+            </div>
+          </article>
+
+          <a-pagination
+            v-if="!shouldUseRecentFallback"
+            class="templates-view__mobile-pagination"
+            :current="page"
+            :page-size="pageSize"
+            :total="displayedArticleTotal"
+            size="small"
+            @change="handleTableChange"
+          />
+        </template>
+      </div>
    </section>

    <a-drawer
@@ -802,6 +883,10 @@ function refreshRecords(): void {
  border-radius: 12px;
 }

+.templates-view__desktop-table :deep(.ant-table) {
+  min-width: 1068px;
+}
+
 .templates-view__filters-inline {
  display: flex;
  align-items: center;
@@ -853,6 +938,91 @@ function refreshRecords(): void {
  font-size: 24px;
 }

+.templates-view__mobile-records {
+  display: none;
+}
+
+.templates-view__mobile-record {
+  padding: 16px 0;
+  border-top: 1px solid #eef2f6;
+}
+
+.templates-view__mobile-record:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.templates-view__mobile-record-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.templates-view__mobile-record-main h4 {
+  margin: 0;
+  color: #101828;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.templates-view__mobile-record-meta,
+.templates-view__mobile-record-status {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.templates-view__mobile-record-field {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.templates-view__mobile-record-field > span,
+.templates-view__mobile-record-actions > span {
+  color: #98a2b3;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.templates-view__mobile-record-field > strong {
+  min-width: 0;
+  color: #1f2937;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.templates-view__mobile-record-status {
+  padding: 12px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.templates-view__mobile-record-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.templates-view__mobile-record-actions :deep(.table-actions-row) {
+  justify-content: flex-end;
+}
+
+.templates-view__mobile-pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
 .templates-view__drawer-intro {
  margin-bottom: 20px;
 }
@@ -1326,5 +1496,24 @@ function refreshRecords(): void {
  .templates-view__drawer-mode-grid {
    grid-template-columns: 1fr;
  }
+
+  .templates-view__table-card {
+    padding: 24px 16px 16px;
+  }
+
+  .templates-view__desktop-table {
+    display: none;
+  }
+
+  .templates-view__mobile-records {
+    display: block;
+  }
+}
+
+@media (max-width: 420px) {
+  .templates-view__mobile-record-meta,
+  .templates-view__mobile-record-status {
+    grid-template-columns: 1fr;
+  }
 }
 </style>