提交

web-admin/src/composables/usePersistedListColumnWidths.ts

@@ -0,0 +1,138 @@
+import { unref, type Ref } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+
+export type ListColumnWidthMap = Record<string, number>
+
+/** 与 usePersistedListColumns 的特殊列命名保持一致，便于同一套 key 习惯 */
+export function resolveListColumnKey(column: {
+  property?: string
+  prop?: string
+  type?: string
+  id?: string
+  label?: string
+}): string | null {
+  const prop = column.property || column.prop
+  if (prop) return String(prop)
+  if (column.type === 'selection') return '__selection__'
+  if (column.type === 'index') return '__index__'
+  if (column.type === 'expand') return '__expand__'
+  if (column.id) return String(column.id)
+  if (column.label) return `__label__:${column.label}`
+  return null
+}
+
+function buildStorageKey(tableKey: string, userId?: string | number | null): string {
+  const uid = userId != null && String(userId).trim() !== '' ? String(userId) : 'anonymous'
+  return `list_col_widths:${uid}:${tableKey}`
+}
+
+function loadWidths(storageKey: string): ListColumnWidthMap {
+  if (typeof localStorage === 'undefined') return {}
+  const raw = localStorage.getItem(storageKey)
+  if (!raw) return {}
+  try {
+    const parsed = JSON.parse(raw)
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {}
+    const next: ListColumnWidthMap = {}
+    for (const [key, value] of Object.entries(parsed)) {
+      const n = Number(value)
+      if (key && Number.isFinite(n) && n > 0) {
+        next[key] = Math.round(n)
+      }
+    }
+    return next
+  } catch {
+    return {}
+  }
+}
+
+function persistWidths(storageKey: string, widths: ListColumnWidthMap) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(widths))
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+function getTableColumns(table: any): any[] {
+  if (!table) return []
+  const cols = table.store?.states?.columns
+  const list = unref(cols)
+  return Array.isArray(list) ? list : []
+}
+
+/**
+ * 列表列宽 localStorage 持久化（按用户 + tableKey）。
+ * 配合 ListTable：拖拽结束写入，挂载后写回 Element Plus 内部列宽。
+ */
+export function usePersistedListColumnWidths(tableKey: string | Ref<string>) {
+  const userStore = useUserStore()
+
+  const resolveKey = () => {
+    const key = String(unref(tableKey) || '').trim()
+    const userId = userStore.getUserInfo?.userId
+    return key ? buildStorageKey(key, userId) : ''
+  }
+
+  const getWidths = (): ListColumnWidthMap => {
+    const storageKey = resolveKey()
+    return storageKey ? loadWidths(storageKey) : {}
+  }
+
+  const setWidth = (columnKey: string, width: number) => {
+    const storageKey = resolveKey()
+    if (!storageKey || !columnKey) return
+    const n = Math.round(Number(width))
+    if (!Number.isFinite(n) || n <= 0) return
+    const next = { ...loadWidths(storageKey), [columnKey]: n }
+    persistWidths(storageKey, next)
+  }
+
+  const resetWidths = () => {
+    const storageKey = resolveKey()
+    if (!storageKey || typeof localStorage === 'undefined') return
+    try {
+      localStorage.removeItem(storageKey)
+    } catch {
+      // ignore
+    }
+  }
+
+  /**
+   * 将已存宽度写回表格列并 relayout。
+   * @returns 是否应用了至少一列
+   */
+  const applyToTable = (table: any): boolean => {
+    const widths = getWidths()
+    const keys = Object.keys(widths)
+    if (!keys.length || !table) return false
+
+    const columns = getTableColumns(table)
+    if (!columns.length) return false
+
+    let applied = false
+    for (const col of columns) {
+      const colKey = resolveListColumnKey(col)
+      if (!colKey) continue
+      const w = widths[colKey]
+      if (w == null) continue
+      col.width = w
+      col.realWidth = w
+      applied = true
+    }
+
+    if (applied && typeof table.doLayout === 'function') {
+      table.doLayout()
+    }
+    return applied
+  }
+
+  return {
+    getWidths,
+    setWidth,
+    resetWidths,
+    applyToTable,
+    resolveListColumnKey
+  }
+}