瀏覽代碼

修改弹框风格

xueyiming 1 周之前
父節點
當前提交
d08c0f7ca8
共有 1 個文件被更改,包括 83 次插入47 次删除
  1. 83 47
      src/views/KnowledgeContent.vue

+ 83 - 47
src/views/KnowledgeContent.vue

@@ -185,55 +185,89 @@
         title="📑 文档分段"
         v-model="chunkDialogVisible"
         width="90%"
-        class="content-dialog"
+        class="content-dialog chunk-dialog"
         :destroy-on-close="true"
     >
-      <div class="chunk-content">
-        <el-table
-            v-if="chunkDialogVisible && chunkList.length > 0"
-            :data="chunkList"
-            style="width: 100%"
-            class="chunk-table"
-        >
-          <el-table-column
-              prop="chunk_id"
-              label="分段ID"
-              width="100"
-              header-align="center"
-              align="center"
-          />
-          <el-table-column
-              prop="summary"
-              label="内容摘要"
-              width="300"
-              header-align="center"
-              show-overflow-tooltip
-          />
-          <el-table-column
-              prop="text"
-              label="完整内容"
-              header-align="center"
-              show-overflow-tooltip
-          />
-          <el-table-column
-              prop="statusDesc"
-              label="状态"
-              width="100"
-              header-align="center"
-              align="center"
+      <div class="chunk-container">
+        <div class="chunk-header">
+          <div class="chunk-stats">
+            <span class="stat-item">共 {{ chunkTotal }} 个分段</span>
+            <span class="stat-item">当前显示 {{ chunkList.length }} 个</span>
+          </div>
+        </div>
+
+        <div class="chunk-content">
+          <el-table
+              v-if="chunkDialogVisible && chunkList.length > 0"
+              :data="chunkList"
+              style="width: 100%"
+              class="chunk-table"
+              :scrollbar-always-on="true"
           >
-            <template #default="scope">
-              <span :class="scope.row.statusDesc === '可用' ? 'status-available' : 'status-unavailable'">
-                {{ scope.row.statusDesc }}
-              </span>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <div v-else class="empty-chunks">
-          <div class="empty-icon">📝</div>
-          <h3>暂无分段内容</h3>
-          <p>该文档没有分块或分块内容为空</p>
+            <el-table-column
+                prop="chunk_id"
+                label="分段ID"
+                width="100"
+                header-align="center"
+                align="center"
+                fixed="left"
+            >
+              <template #default="scope">
+                <span class="chunk-id">#{{ scope.row.chunk_id }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+                prop="summary"
+                label="内容摘要"
+                width="300"
+                header-align="center"
+                min-width="300"
+            >
+              <template #default="scope">
+                <div class="summary-content" :title="scope.row.summary">
+                  {{ scope.row.summary || '无摘要' }}
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+                prop="text"
+                label="完整内容"
+                header-align="center"
+                min-width="500"
+            >
+              <template #default="scope">
+                <div class="full-content" :title="scope.row.text">
+                  {{ scope.row.text }}
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column
+                prop="statusDesc"
+                label="状态"
+                width="120"
+                header-align="center"
+                align="center"
+                fixed="right"
+            >
+              <template #default="scope">
+                <el-tag
+                    :type="scope.row.statusDesc === '可用' ? 'success' : 'danger'"
+                    class="status-tag"
+                >
+                  {{ scope.row.statusDesc }}
+                </el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div v-else class="empty-chunks">
+            <div class="empty-icon">📝</div>
+            <h3>暂无分段内容</h3>
+            <p>该文档没有分块或分块内容为空</p>
+          </div>
         </div>
 
         <!-- 分页器 -->
@@ -242,7 +276,9 @@
               v-model:current-page="chunkPage"
               :page-size="chunkPageSize"
               :total="chunkTotal"
-              layout="prev, pager, next"
+              :page-sizes="[10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
               @current-change="fetchChunks"
           />
         </div>