refactor(layout): update BasicLayout and LayoutHeader styling with ant design improvements

- Replace ant-design-vue message with vue-sonner toast notifications
- Remove LayoutHeader component import from BasicLayout
- Update CSS classes for better styling consistency
- Adjust padding and spacing in layout components
- Modify shadow and overflow properties in task management views
- Add hidden class utility for element visibility control

frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue

@@ -1,9 +1,20 @@
 <script setup>
-import { reactive } from 'vue'
+import { reactive, computed, ref } from 'vue'
 import { formatTime } from '../utils/benchmarkUtils'
 import GradientButton from '@/components/GradientButton.vue'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Spinner } from '@/components/ui/spinner'
 
-defineProps({
+const props = defineProps({
   data: { type: Array, required: true },
   selectedRowKeys: { type: Array, required: true },
   loading: { type: Boolean, default: false },
@@ -13,29 +24,74 @@ defineProps({
 
 const emit = defineEmits(['update:selectedRowKeys', 'export', 'loadMore', 'createAsyncTask'])
 
-const defaultColumns = [
-  { title: '封面', key: 'cover', dataIndex: 'cover', width: 100 },
-  { title: '描述', key: 'desc', dataIndex: 'desc', width: 200, ellipsis: true },
-  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 80,
-    sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
-  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 80,
-    sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
-  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 80,
-    sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
-  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 80,
-    sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
-  { title: '时长', key: 'duration_s', dataIndex: 'duration_s', width: 80,
-    sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
-  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 140,
-    sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
+// 列定义
+const columns = [
+  { key: 'cover', title: '封面', width: '100px' },
+  { key: 'desc', title: '描述', width: '200px' },
+  { key: 'digg_count', title: '点赞', width: '80px', sortable: true },
+  { key: 'comment_count', title: '评论', width: '80px', sortable: true },
+  { key: 'share_count', title: '分享', width: '80px', sortable: true },
+  { key: 'collect_count', title: '收藏', width: '80px', sortable: true },
+  { key: 'duration_s', title: '时长', width: '80px', sortable: true },
+  { key: 'create_time', title: '创建时间', width: '140px', sortable: true },
 ]
 
-const columns = reactive([...defaultColumns])
+// 排序状态
+const sortKey = ref('digg_count')
+const sortOrder = ref('desc')
 
-function onSelectChange(selectedKeys) {
-  emit('update:selectedRowKeys', selectedKeys)
+// 全选状态
+const isAllSelected = computed(() => {
+  return props.data.length > 0 && props.selectedRowKeys.length === props.data.length
+})
+
+// 切换排序
+function handleSort(key) {
+  if (sortKey.value === key) {
+    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortOrder.value = 'desc'
+  }
+  emit('update:selectedRowKeys', [])
 }
 
+// 选择切换
+function handleSelectAll() {
+  if (isAllSelected.value) {
+    emit('update:selectedRowKeys', [])
+  } else {
+    emit('update:selectedRowKeys', props.data.map(item => String(item.id)))
+  }
+}
+
+function handleSelect(id) {
+  const key = String(id)
+  const newKeys = [...props.selectedRowKeys]
+  const index = newKeys.indexOf(key)
+  if (index > -1) {
+    newKeys.splice(index, 1)
+  } else {
+    newKeys.push(key)
+  }
+  emit('update:selectedRowKeys', newKeys)
+}
+
+// 排序后的数据
+const sortedData = computed(() => {
+  const data = [...props.data]
+  const key = sortKey.value
+
+  if (!key) return data
+
+  return data.sort((a, b) => {
+    const aVal = a[key] || 0
+    const bVal = b[key] || 0
+    return sortOrder.value === 'asc' ? aVal - bVal : bVal - aVal
+  })
+})
+
+// 格式化数字
 function formatNumber(value) {
   return value ? value.toLocaleString('zh-CN') : '0'
 }
@@ -62,58 +118,105 @@ function formatNumber(value) {
         />
       </div>
     </div>
-    <a-table
-      :dataSource="data"
-      :columns="columns"
-      :pagination="false"
-      :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
-      :rowKey="(record) => String(record.id)"
-      :loading="loading"
-      :scroll="{ y: 'calc(100vh - 400px)' }"
-      class="benchmark-table">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'cover'">
-          <div class="cover-wrapper">
-            <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="cover-link">
-              <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
-              <span v-if="record.is_top" class="top-tag">置顶</span>
-            </a>
-            <template v-else-if="record.cover">
-              <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
-              <span v-if="record.is_top" class="top-tag">置顶</span>
-            </template>
-            <span v-else class="no-cover">无封面</span>
-          </div>
-        </template>
-        <template v-else-if="column.key === 'desc'">
-          <span :title="record.desc">{{ record.desc || '-' }}</span>
-        </template>
-        <template v-else-if="column.key === 'play_count'">
-          {{ record.play_count ? (record.play_count / 10000).toFixed(1) + 'w' : '0' }}
-        </template>
-        <template v-else-if="['digg_count', 'comment_count', 'share_count', 'collect_count'].includes(column.key)">
-          {{ formatNumber(record[column.key]) }}
-        </template>
-        <template v-else-if="column.key === 'create_time'">
-          {{ formatTime(record.create_time) }}
-        </template>
-      </template>
-      <template #footer>
-        <div v-if="hasMore" class="load-more-footer">
-          <a-button
-            :loading="loadingMore"
-            @click="$emit('loadMore')"
-            size="large"
+
+    <!-- 表格 -->
+    <div class="table-wrapper">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="w-[40px]">
+              <Checkbox
+                :checked="isAllSelected"
+                @update:checked="handleSelectAll"
+                class="checkbox-small"
+              />
+            </TableHead>
+            <TableHead
+              v-for="col in columns"
+              :key="col.key"
+              :class="[col.width && `w-[${col.width}]`, col.sortable && 'cursor-pointer']"
+              @click="col.sortable && handleSort(col.key)"
+            >
+              <div class="flex items-center gap-1">
+                {{ col.title }}
+                <span v-if="col.sortable" class="sort-icon">
+                  <svg v-if="sortKey !== col.key" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M7 15l5 5 5-5M7 9l5-5 5 5"/>
+                  </svg>
+                  <svg v-else-if="sortOrder === 'asc'" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 19V5M5 12l7-7 7 7"/>
+                  </svg>
+                  <svg v-else width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M5 12l7 7 7-7"/>
+                  </svg>
+                </span>
+              </div>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-if="loading">
+            <TableCell :col-span="columns.length + 1" class="h-32 text-center">
+              <Spinner class="mx-auto" />
+            </TableCell>
+          </TableRow>
+          <TableRow
+            v-else
+            v-for="record in sortedData"
+            :key="record.id"
+            class="table-row"
           >
-            加载更多内容
-          </a-button>
-          <div class="load-more-hint">已加载 {{ data.length }} 条</div>
-        </div>
-        <div v-else-if="data.length > 0" class="no-more-hint">
-          已加载全部内容
-        </div>
-      </template>
-    </a-table>
+            <TableCell class="w-[40px]">
+              <Checkbox
+                :checked="selectedRowKeys.includes(String(record.id))"
+                @update:checked="handleSelect(record.id)"
+                class="checkbox-small"
+              />
+            </TableCell>
+            <TableCell>
+              <div class="cover-wrapper">
+                <a v-if="record.cover && record.share_url" :href="record.share_url" target="_blank" class="cover-link">
+                  <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
+                  <span v-if="record.is_top" class="top-tag">置顶</span>
+                </a>
+                <template v-else-if="record.cover">
+                  <img :src="record.cover" alt="cover" loading="lazy" class="cover-img" />
+                  <span v-if="record.is_top" class="top-tag">置顶</span>
+                </template>
+                <span v-else class="no-cover">无封面</span>
+              </div>
+            </TableCell>
+            <TableCell>
+              <span :title="record.desc" class="truncate-text">{{ record.desc || '-' }}</span>
+            </TableCell>
+            <TableCell>{{ formatNumber(record.digg_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.comment_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.share_count) }}</TableCell>
+            <TableCell>{{ formatNumber(record.collect_count) }}</TableCell>
+            <TableCell>{{ record.duration_s ? `${record.duration_s}s` : '-' }}</TableCell>
+            <TableCell>{{ formatTime(record.create_time) }}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <!-- 加载更多 -->
+    <div v-if="hasMore" class="load-more-footer">
+      <Button
+        :disabled="loadingMore"
+        size="lg"
+        variant="outline"
+        @click="$emit('loadMore')"
+        class="load-more-btn"
+      >
+        <Spinner v-if="loadingMore" class="mr-2 h-4 w-4" />
+        {{ loadingMore ? '加载中...' : '加载更多内容' }}
+      </Button>
+      <div class="load-more-hint">已加载 {{ data.length }} 条</div>
+    </div>
+    <div v-else-if="data.length > 0" class="no-more-hint">
+      已加载全部内容
+    </div>
   </section>
 </template>
 
@@ -150,13 +253,32 @@ function formatNumber(value) {
   margin-bottom: var(--space-3);
 }
 
-.batch-btn {
-  font-weight: 600;
+.table-wrapper {
+  overflow-x: auto;
+  max-height: calc(100vh - 400px);
+  overflow-y: auto;
 }
 
-.batch-btn:hover {
-  box-shadow: var(--shadow-blue);
-  filter: brightness(1.03);
+.table-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--color-gray-300);
+  border-radius: 3px;
+}
+
+.table-row:hover {
+  background: var(--color-gray-50);
+}
+
+.checkbox-small {
+  transform: scale(0.85);
 }
 
 .cover-wrapper {
@@ -199,42 +321,22 @@ function formatNumber(value) {
   font-size: var(--font-size-xs);
 }
 
-.benchmark-table :deep(.ant-table-expand-icon-th),
-.benchmark-table :deep(.ant-table-row-expand-icon-cell) {
-  width: 48px;
-  min-width: 48px;
-  text-align: center;
-}
-
-.benchmark-table :deep(.ant-table) {
-  table-layout: fixed;
-}
-
-.benchmark-table :deep(.ant-table-wrapper),
-.benchmark-table :deep(.ant-spin-nested-loading),
-.benchmark-table :deep(.ant-spin-container),
-.benchmark-table :deep(.ant-table-container) {
-  width: 100%;
+.truncate-text {
+  display: block;
+  max-width: 180px;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.benchmark-table :deep(.ant-table-body) {
-  overflow-x: hidden !important;
+.sort-icon {
+  opacity: 0.4;
+  transition: opacity var(--duration-fast);
 }
 
-.benchmark-table :deep(.ant-table-thead > tr > th),
-.benchmark-table :deep(.ant-table-tbody > tr > td) {
-  word-break: break-all;
-}
-
-.benchmark-table :deep(.ant-table-row-expand-icon) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  user-select: none;
+.table-row:hover .sort-icon,
+[onclick]:hover .sort-icon {
+  opacity: 1;
 }
 
 .load-more-footer,
@@ -247,7 +349,7 @@ function formatNumber(value) {
   padding: var(--space-4);
 }
 
-.load-more-footer .ant-btn {
+.load-more-btn {
   max-width: 200px;
   height: 40px;
   font-size: var(--font-size-base);
@@ -268,4 +370,3 @@ function formatNumber(value) {
   padding: var(--space-3);
 }
 </style>
-