feat: 优化

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

@@ -30,29 +30,31 @@ function handleReset() {
 </script>
 
 <template>
-  <section class="card">
+  <section class="form-container">
     <a-form :model="form" layout="vertical">
       <a-form-item label="平台">
         <a-radio-group v-model:value="form.platform" button-style="solid">
           <a-radio-button value="抖音">抖音</a-radio-button>
         </a-radio-group>
       </a-form-item>
+
       <a-form-item label="主页/视频链接">
         <a-input
-          class="search-input"
           v-model:value="form.url"
-          placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
+          placeholder="粘贴抖音主页或视频链接"
           allow-clear
           size="large"
         />
       </a-form-item>
-      <a-form-item label="最大数量（建议保持默认值20）">
+
+      <a-form-item label="分析数量">
         <div class="slider-row">
-          <a-slider v-model:value="form.count" :min="1" :max="100" :tooltip-open="true" style="flex:1" />
-          <a-input-number v-model:value="form.count" :min="1" :max="100" style="width:96px; margin-left:12px;" />
+          <a-slider v-model:value="form.count" :min="1" :max="40" :tooltip-open="true" style="flex:1" />
+          <a-input-number v-model:value="form.count" :min="1" :max="40" style="width:96px; margin-left:12px;" />
         </div>
-        <div class="form-hint">数量越大越全面，但分析时间更长；建议 20–30。</div>
+        <div class="form-hint">建议 20-30 个内容</div>
       </a-form-item>
+
       <a-space>
         <GradientButton
           text="开始分析"
@@ -61,18 +63,17 @@ function handleReset() {
           size="middle"
           @click="handleAnalyze"
         />
-        <a-button @click="handleReset">清空</a-button>
+        <a-button @click="handleReset">重置</a-button>
       </a-space>
     </a-form>
   </section>
 </template>
 
 <style scoped>
-.card {
+.form-container {
   background: var(--color-surface);
   border-radius: 8px;
   padding: 16px;
-  box-shadow: var(--shadow-inset-card);
   border: 1px solid var(--color-border);
 }
 
@@ -87,7 +88,6 @@ function handleReset() {
   color: var(--color-text-secondary);
 }
 
-
 :deep(.ant-slider) {
   padding: 10px 0;
 }
@@ -115,30 +115,5 @@ function handleReset() {
 :deep(.ant-slider-handle:active::after) {
   box-shadow: 0 0 0 3px var(--color-primary);
 }
-.search-input {
-  flex: 1;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
-}
-
-.search-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.search-input::placeholder {
-  color: var(--color-text-secondary);
-  opacity: 0.6;
-}
 </style>
 

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

@@ -16,12 +16,21 @@ import GradientButton from '@/components/GradientButton.vue'
     type: Boolean,
     default: false,
   },
+  loadingMore: {
+    type: Boolean,
+    default: false,
+  },
+  hasMore: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits([
   'update:selectedRowKeys',
   'export',
   'batchAnalyze',
+  'loadMore',
 ])
 
 const defaultColumns = [
@@ -78,6 +87,7 @@ function onSelectChange(selectedKeys) {
       :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'">
@@ -115,6 +125,21 @@ function onSelectChange(selectedKeys) {
           <span v-else>-</span>
         </template>
       </template>
+      <template #footer>
+        <div v-if="hasMore" class="load-more-footer">
+          <a-button
+            :loading="loadingMore"
+            @click="$emit('loadMore')"
+            size="large"
+          >
+            加载更多内容
+          </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>
   </section>
 </template>
@@ -187,5 +212,32 @@ function onSelectChange(selectedKeys) {
   cursor: pointer;
   user-select: none;
 }
+
+.load-more-footer {
+  padding: 16px;
+  text-align: center;
+  border-top: 1px solid var(--color-border);
+}
+
+.load-more-footer .ant-btn {
+  max-width: 200px;
+  height: 40px;
+  font-size: 14px;
+  border-radius: 8px;
+}
+
+.load-more-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.no-more-hint {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  border-top: 1px solid var(--color-border);
+}
 </style>