feat: The document list column supports width adjustment

Author: wangdan-fit2cloud

ui/src/components/app-table/index.vue

@@ -4,6 +4,7 @@
       :max-height="tableHeight"
       v-bind="$attrs"
       ref="appTableRef"
+      @header-dragend="handleHeaderDragend"
       :tooltip-options="{
         popperClass: 'max-w-350',
       }"
@@ -54,7 +55,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, nextTick, watch, computed, onMounted } from 'vue'
+import { ref, nextTick, watch, computed, onMounted, useAttrs } from 'vue'
 import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
 
@@ -64,6 +65,8 @@ import useStore from '@/stores'
 
 const { common } = useStore()
 
+const attrs = useAttrs()
+
 const props = defineProps({
   paginationConfig: {
     type: Object,
@@ -148,6 +151,78 @@ function clearSelection() {
   appTableRef.value?.clearSelection()
 }
 
+/* ----------------- 列宽拖拽持久化 ----------------- */
+const COLUMN_WIDTH_PREFIX = 'app-table-column-width:'
+
+function widthStorageKey() {
+  return `${COLUMN_WIDTH_PREFIX}${props.storeKey}`
+}
+
+function loadWidthMap(): Record<string, number> {
+  try {
+    return JSON.parse(localStorage.getItem(widthStorageKey()) || '{}')
+  } catch {
+    return {}
+  }
+}
+
+function saveWidthMap(map: Record<string, number>) {
+  try {
+    localStorage.setItem(widthStorageKey(), JSON.stringify(map))
+  } catch {
+    /* ignore quota / serialization errors */
+  }
+}
+
+/**
+ * 列的稳定标识：优先用 prop / column-key，其次回退到渲染顺序下标。
+ */
+function getColumnKey(column: any, index: number) {
+  return column?.property || column?.columnKey || `__col_${index}__`
+}
+
+/**
+ * 拖拽结束后，记录该列的最新宽度
+ */
+function handleHeaderDragend(newWidth: number, _oldWidth: number, column: any) {
+  if (!props.storeKey || !column || !newWidth) {
+    return
+  }
+  const cols = appTableRef.value?.columns || []
+  const index = cols.findIndex((c: any) => c.id === column.id)
+  const key = getColumnKey(column, index)
+  const map = loadWidthMap()
+  map[key] = Math.round(newWidth)
+  saveWidthMap(map)
+}
+
+/**
+ * 表格渲染后，把缓存的列宽应用回去
+ */
+function restoreColumnWidths() {
+  if (!props.storeKey) {
+    return
+  }
+  const map = loadWidthMap()
+  if (!map || !Object.keys(map).length) {
+    return
+  }
+  const table = appTableRef.value
+  const cols = table?.columns || []
+  let changed = false
+  cols.forEach((column: any, index: number) => {
+    const w = map[getColumnKey(column, index)]
+    if (typeof w === 'number' && w > 0 && column.realWidth !== w) {
+      column.width = w
+      column.realWidth = w
+      changed = true
+    }
+  })
+  if (changed) {
+    table?.doLayout?.()
+  }
+}
+
 function toggleRowSelection(row: any, selected?: boolean, ignoreSelectable = true) {
   appTableRef.value?.toggleRowSelection(row, selected, ignoreSelectable)
 }
@@ -169,7 +244,19 @@ onMounted(() => {
       tableHeight.value = window.innerHeight - props.maxTableHeight
     })()
   }
+
+  // 首次渲染后恢复缓存的列宽
+  nextTick(restoreColumnWidths)
 })
+
+// 数据变化（翻页 / 筛选 / 轮询刷新）会重建列，重新应用缓存列宽
+watch(
+  () => attrs.data,
+  () => {
+    nextTick(restoreColumnWidths)
+  },
+)
+
 </script>
 
 <style lang="scss" scoped>

ui/src/styles/element-plus.scss

@@ -24,7 +24,8 @@
   --el-card-padding: calc(var(--app-base-px) * 2);
   --el-card-border-radius: 6px;
   box-shadow: 0px 2px 4px 0px rgba(var(--el-text-color-primary-rgb), 0.12) !important;
-  --el-border-color-light: var(--el-border-color); overflow: visible;
+  --el-border-color-light: var(--el-border-color);
+  overflow: visible;
   &.is-never-shadow {
     border: 1px solid var(--el-card-border-color);
     box-shadow: none !important;
@@ -223,6 +224,9 @@
     background: var(--el-table-current-row-bg-color);
   }
 }
+.el-table__border-left-patch {
+  display: none !important;
+}
 
 // dialog
 .el-dialog {

ui/src/views/document/index.vue

@@ -159,7 +159,12 @@
                   :remote-method="getUserList"
                   style="width: 190px"
                 >
-                  <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.nick_name" />
+                  <el-option
+                    v-for="u in user_options"
+                    :key="u.id"
+                    :value="u.id"
+                    :label="u.nick_name"
+                  />
                 </el-select>
               </div>
 
@@ -198,6 +203,7 @@
             :row-key="(row: any) => row.id"
             :storeKey="storeKey"
             @cell-click="cellClickHandle"
+            border
           >
             <el-table-column
               type="selection"
@@ -929,7 +935,7 @@ import TagDrawer from './tag/TagDrawer.vue'
 import TagSettingDrawer from './tag/TagSettingDrawer.vue'
 import AddTagDialog from '@/views/document/tag/MulAddTagDialog.vue'
 import ExecutionRecord from '@/views/knowledge-workflow/component/execution-record/ExecutionRecordDrawer.vue'
-import UserApi from "@/api/user/user.ts";
+import UserApi from '@/api/user/user.ts'
 
 const route = useRoute()
 const router = useRouter()
@@ -1652,7 +1658,7 @@ function getUserList(query: string) {
   const actualWorkspaceId = workspaceId || (query ? { nick_name: query } : '')
   const actualQuery = workspaceId ? (query ? { nick_name: query } : '') : undefined
   if (apiType.value === 'systemManage') {
-    UserApi.getAllMemberList(query ? {nick_name: query} : '')
+    UserApi.getAllMemberList(query ? { nick_name: query } : '')
       .then((res: any) => {
         user_options.value = res.data || []
       })