@ithinkdt/page 4.0.19 → 4.0.20

package/auto-imports.js

@@ -1,7 +1,11 @@
 export const Page = [
     {
         from: '@ithinkdt/page',
-        imports: ['useDs', 'useDataPagination', 'useFilterHelper', 'useFormHelper', 'useFormModal', 'useDeleteHelper', 'useSimpleCrud', 'useModal', 'useTableHelper', 'calcActionWidth', 'useDescriptionsHelper'],
+        imports: [
+            'useDs', 'useDataPagination', 'useFilterHelper', 'useFormHelper', 'useFormModal', 'useDeleteHelper',
+            'useSimpleCrud', 'useModal', 'useTableHelper', 'calcActionWidth', 'useDescriptionsHelper',
+            'useListPageCustomization',
+        ],
     },
 ]
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/page",
-  "version": "4.0.19",
+  "version": "4.0.20",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT Page",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@vueuse/core": "^14.3.0",
     "nanoid": "^5.1.11",
-    "@ithinkdt/common": "^4.0.8"
+    "@ithinkdt/common": "^4.0.9"
   },
   "peerDependencies": {
     "vue": ">=3.5",
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "typescript": "~6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.14",
     "vue": "^3.5.34",
-    "vue-router": "^5.0.6"
+    "vue-router": "^5.0.7"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/crud.js

@@ -4,7 +4,7 @@ import { useFormModal } from './form.js'
 import { IgnoreRejectionError, PAGE_INJECTION, pageInjection } from './plugin.js'
 
 export function useDeleteHelper(options) {
-    const { i18n: useI18n, keyField, getConfirmRenderer } = (hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection) ?? {}
+    const { i18n: useI18n, keyField, getConfirmRenderer } = hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection
     const { t } = useI18n()
 
     let onDel
@@ -136,7 +136,7 @@ function _useSimpleCrudModal(crudType, getItems, request, options) {
 }
 
 export function useSimpleCrud(options) {
-    const { i18n: useI18n } = (hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection) ?? {}
+    const { i18n: useI18n } = hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection
     const { t } = useI18n()
 
     const createModal = _useSimpleCrudModal('create', options.createItems ?? options.formItems ?? options.items, options.post ?? options.save, options)

package/src/description.js

@@ -1,5 +1,5 @@
-import { toReactive } from '@vueuse/core'
-import { computed, hasInjectionContext, inject, reactive, ref, shallowReactive, unref } from 'vue'
+import { toReactive, tryOnScopeDispose } from '@vueuse/core'
+import { computed, effectScope, hasInjectionContext, inject, reactive, ref, shallowReactive, unref } from 'vue'
 
 import { isNone } from '@ithinkdt/common/object'
 import { uncapitalize } from '@ithinkdt/common/string'
@@ -103,10 +103,20 @@ export function useDescriptionsHelper(
     }
 
     const items0 = shallowReactive([])
+
+    let scope
+    tryOnScopeDispose(() => {
+        scope?.stop()
+    })
+
     function reinit() {
+        scope?.stop()
+        scope = effectScope()
         items0.length = 0
-        // eslint-disable-next-line unicorn/no-array-callback-reference
-        items0.push(...items({ it, group, model }).filter(Boolean).map(reactive))
+        scope.run(() => {
+            // eslint-disable-next-line unicorn/no-array-callback-reference
+            items0.push(...items({ it, group, model }).filter(Boolean).map(reactive))
+        })
     }
     reinit()
 

package/src/form.d.ts

@@ -166,7 +166,18 @@ export interface FilterHelperOptions<Model extends {}> extends FormHelperOptions
     /**
      * 自定义
      */
-    customizable?: boolean | string | undefined
+    customizable?: boolean | string | undefined | {
+        get: () => Awaitable<string | null>
+        set: (value: string) => Awaitable<void>
+        remove: () => Awaitable<void>
+        /**
+         * 事件总线，用于监听配置变化事件，若存在则不会监听 `storage` 事件
+         */
+        $change?: {
+            on: (callback: (payload: { newValue: unknown }) => void) => void
+            off?: (callback: (payload: { newValue: unknown }) => void) => void
+        }
+    }
     /**
      * 缓存表单
      */

package/src/form.js

@@ -1,6 +1,6 @@
-import { StorageSerializers, toReactive, useStorage, useStorageAsync } from '@vueuse/core'
+import { StorageSerializers, toReactive, tryOnScopeDispose, useEventListener, useStorage } from '@vueuse/core'
 import { nanoid } from 'nanoid'
-import { computed, h, hasInjectionContext, inject, reactive, readonly, ref, shallowReactive, shallowRef, toRaw, unref } from 'vue'
+import { computed, effectScope, h, hasInjectionContext, inject, reactive, readonly, ref, shallowReactive, shallowRef, toRaw, unref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { copy, isNone } from '@ithinkdt/common/object'
@@ -222,8 +222,17 @@ export function useFormHelper(items, { initial: initial0, rules, onChange, inFil
 
     const items1 = shallowReactive([])
 
+    let scope
+    tryOnScopeDispose(() => {
+        scope?.stop()
+    })
+
     function reinit() {
-        items0.value = items({ model, reset, invalid, validation, validate, restoreValidation, it, group }).filter(Boolean)
+        scope?.stop()
+        scope = effectScope()
+        scope.run(() => {
+            items0.value = items({ model, reset, invalid, validation, validate, restoreValidation, it, group }).filter(Boolean)
+        })
 
         items1.length = 0
         for (const item of items0.value) {
@@ -338,11 +347,21 @@ export function useFilterHelper(items, { customizable = false, cached, cacheVers
 
     const custom = (params) => {
         if (typeof params === 'boolean') {
-            if (params) customs.value = getDefaultCustom()
+            if (params) setCustoms(getDefaultCustom())
         } else if (Array.isArray(params)) {
-            customs.value.sort = params
+            customs.value.sort = JSON.stringify(params) === JSON.stringify(returns.items.map(col => col.name))
+                ? []
+                : params
+            setCustoms()
         } else {
             customs.value.hidden[params.key] = 'hidden' in params ? params.hidden : customs.value.hidden[params.key]
+            if (!customs.value.hidden[params.key]) {
+                delete customs.value.hidden[params.key]
+            }
+            if (params.hidden) {
+                returns.model[params.key] = undefined
+            }
+            setCustoms()
         }
         const _items = returns.items
             .map((item, i, arr) => {
@@ -364,14 +383,65 @@ export function useFilterHelper(items, { customizable = false, cached, cacheVers
         return ret
     }
     if (customizable === true) {
-        customizable = 'filter-form-customization#' + useRoute().name
+        customizable = `customization#${useRoute().name}#filter-form`
+    }
+
+    const customs = ref(getDefaultCustom())
+    let setCustoms = (value = customs.value) => {
+        customs.value = value
+    }
+    if (customizable) {
+        let key, storage
+        if (typeof customizable === 'object') {
+            key = `customization#${useRoute().name}#filter-form`
+            storage = {
+                get $change() { return customizable.$change },
+                getItem: () => customizable.get(),
+                setItem: (key, value) => customizable.set(value),
+                removeItem: () => customizable.remove(),
+            }
+        } else {
+            key = customizable
+            storage = customizationStorage
+        }
+
+        const read = async (raw) => {
+            raw ??= await storage.getItem(key)
+            if (raw === null) {
+                customs.value = getDefaultCustom()
+                return
+            }
+            const [sort, hidden] = StorageSerializers.object.read(raw)
+            customs.value = {
+                sort,
+                hidden: Object.fromEntries(hidden.map(k => [k, true])),
+            }
+        }
+        read().then(reinit)
+        if (storage.$change) {
+            const cb = (payload) => {
+                read(payload.newValue).then(reinit)
+            }
+            storage.$change.on(cb)
+            storage.$change.off && tryOnScopeDispose(() => storage.$change.off(cb))
+        } else {
+            useEventListener(globalThis, 'storage', (event) => {
+                if (event.key !== key) return
+                Promise.resolve().then(() => read(event.newValue)).then(reinit)
+            }, { passive: true })
+        }
+
+        setCustoms = async (value = customs.value) => {
+            customs.value = value
+            if (value === null) return storage.removeItem(key)
+            const sort = value.sort ?? []
+            const hidden = Object.keys(value.hidden ?? {}).filter(k => value.hidden[k])
+
+            if (sort.length === 0 && hidden.length === 0) return storage.removeItem(key)
+            const raw = StorageSerializers.object.write([sort, hidden])
+            return storage.setItem(key, raw)
+        }
     }
-    const customs = customizable
-        ? useStorageAsync(customizable, getDefaultCustom, customizationStorage, {
-                onReady: reinit,
-                serializer: StorageSerializers.object,
-            })
-        : ref(getDefaultCustom())
 
     if (!customizable) {
         reinit()

package/src/index.js

@@ -2,6 +2,7 @@ export * from './plugin.js'
 export * from './data-source.js'
 export * from './description.js'
 export * from './form.js'
+export * from './list.js'
 export * from './crud.js'
 export * from './table.js'
 export * from './modal.js'

package/src/list.d.ts

@@ -1,4 +1,7 @@
-import { Falsely } from '@ithinkdt/common/typed'
+import { EventHook } from '@vueuse/core'
+import { Ref } from 'vue'
+
+import { Awaitable, Falsely } from '@ithinkdt/common/typed'
 
 import { FormItemHelper, FormItemOptions } from './form.js'
 import { TableColumnHelper, TableColumnOptions } from './table.js'
@@ -8,3 +11,108 @@ export interface ListPageConfig<Model extends {}> {
     crud?: (FormItemOptions<Partial<Model>> | Falsely)[] | ((helper: FormItemHelper<Model> & { type: 'create' | 'edit' | 'view' }) => (FormItemOptions<Partial<Model>> | Falsely)[])
     table?: (TableColumnOptions<Model> | Falsely)[] | ((helper: TableColumnHelper<Model>) => (TableColumnOptions<Model> | Falsely)[])
 }
+
+export interface CustomAsync {
+    get: () => Awaitable<string | null>
+    set: (value: string) => Awaitable<void>
+    remove: () => Awaitable<void>
+    $change: EventHook<{ newValue: unknown }>
+}
+
+export interface CustomProfile {
+    key: string
+    name: string | undefined
+    locked?: boolean
+}
+
+export interface Customizer {
+    profiles: Readonly<CustomProfile[]>
+    get profile(): string
+    set profile(value: string | null | undefined)
+    get preference(): string | undefined
+    set preference(value: string | null | undefined)
+
+    get changing(): boolean
+
+    tableColumn: CustomAsync
+    filterForm: CustomAsync
+
+    /**
+     * 复制配置
+     *
+     * @param key - 配置键
+     * @param name - 新的配置名
+     * @returns 新的配置键
+     */
+    copy(this: void, key: string, name?: string): Promise<string>
+
+    /**
+     * 保存配置
+     *
+     * @param name - 新的配置名
+     * @param key - 配置键，无则更新当前配置
+     */
+    save(this: void, name: string, key?: string): void
+    /**
+     * 保存配置
+     */
+    save(this: void, params: {
+        /**
+         * 新的配置名
+         */
+        name: string
+        /**
+         * 配置键，无则更新当前配置
+         */
+        key?: string
+    }): void
+    /**
+     * 移除配置
+     *
+     * @param key - 配置键
+     */
+    remove(this: void, key: string): void
+
+    /**
+     * 锁定配置
+     * @param key - 配置键
+     * @param locked - 是否锁定
+     */
+    lock(this: void, key: string, locked?: boolean): void
+    /**
+     * 锁定配置
+     */
+    lock(this: void, params: {
+        /**
+         * 配置键
+         */
+        key: string
+        /**
+         * 是否锁定
+         */
+        locked?: boolean
+    }): void
+}
+
+export declare function useListPageCustomization(
+    options?: {
+        /**
+         * 是否持久化配置
+         */
+        persist?: boolean | 'manual'
+        /**
+         * 配置键，默认取路由 name
+         */
+        key?: string
+        /**
+         * 从路由 params 取当前配置的参数名
+         */
+        routeParamName?: string
+    },
+): Omit<Customizer, 'profiles' | 'profile' | 'default' | 'changing'> & {
+    customizer: Customizer
+    profiles: Ref<CustomProfile[]>
+    profile: Ref<string, string | null | undefined>
+    preference: Ref<string | undefined, string | null | undefined>
+    changing: Ref<boolean>
+}

package/src/list.js

@@ -1,2 +1,249 @@
-/* eslint-disable unicorn/require-module-specifiers */
-export {}
+import { StorageSerializers, createEventHook, tryOnScopeDispose, useStorageAsync } from '@vueuse/core'
+import { nanoid } from 'nanoid'
+import { computed, hasInjectionContext, inject, markRaw, nextTick, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { debounce } from '@ithinkdt/common/fn'
+
+import { PAGE_INJECTION, pageInjection } from './plugin.js'
+
+class CustomStorage {
+    constructor(type, storage, key, profile, { onSet } = {}) {
+        this.type = type
+        this.storage = storage
+        this.key = key
+        this.profile = profile
+        this.onSet = onSet
+
+        this.$change = createEventHook()
+    }
+
+    get storeKey() {
+        return `customization#${this.key}~${this.profile}#${this.type}`
+    }
+
+    get() {
+        return this.storage.getItem(this.storeKey)
+    }
+
+    async set(value) {
+        await this.onSet?.(value, this)
+        const oldValue = await this.get()
+        if (value === oldValue) return
+        await this.storage.setItem(this.storeKey, value)
+    }
+
+    remove() {
+        return this.storage.removeItem(this.storeKey)
+    }
+}
+
+export function useListPageCustomization({
+    persist = true,
+    key,
+    routeParamName = 'profile',
+} = {}) {
+    const route = useRoute()
+    key ??= route.name
+
+    const { customizationStorage = localStorage, i18n: useI18n } = hasInjectionContext() ? inject(PAGE_INJECTION, pageInjection) : pageInjection
+    const { t } = useI18n()
+
+    let storage
+    if (persist) {
+        storage = customizationStorage
+    } else {
+        const store = {}
+        storage = {
+            getItem: key => store[key] ?? null,
+            setItem: (key, value) => { store[key] = value },
+            removeItem: (key) => { delete store[key] },
+        }
+    }
+
+    const { promise: ready, resolve } = Promise.withResolvers()
+
+    const changing = ref(false)
+
+    const debounceResetChanged = debounce(() => {
+        changing.value = false
+    }, 2000)
+
+    const getDefaultName = (i, namePrefix = t('common.page.custom.profile')) => {
+        const name = `${namePrefix}${i}`
+        if (config.value.profiles.some(profile => profile.name === name)) return getDefaultName(i + 1, namePrefix)
+        return name
+    }
+
+    const onSet = async (newValue, storage) => {
+        const profile = config.value.profiles.find(profile => profile.key === storage.profile)
+        if (profile?.locked) {
+            const profileName = getDefaultName(1, profile.key === 'default' ? undefined : profile?.name)
+            const profileKey = nanoid()
+            const index = config.value.profiles.findIndex(profile => profile.key === storage.profile)
+            config.value.profiles.splice(index + 1, 0, { key: profileKey, name: profileName })
+            await switchProfile(profileKey, false)
+        }
+        changing.value = true
+        debounceResetChanged()
+    }
+
+    const filterStorage = new CustomStorage('filter-form', storage, key, 'default', { onSet })
+    const tableStorage = new CustomStorage('table-column', storage, key, 'default', { onSet })
+    tryOnScopeDispose(() => {
+        filterStorage.$event.clear()
+        tableStorage.$event.clear()
+    })
+
+    let laskKey = 'default'
+    async function switchProfile(key, emitChange) {
+        if (!key) {
+            await ready
+            key = config.value.preference ?? config.value.latest ?? 'default'
+        }
+
+        emitChange ??= key !== laskKey
+        laskKey = key
+        config.value.latest = key
+        filterStorage.profile = key
+        tableStorage.profile = key
+
+        if (!emitChange) return
+        const [filterForm, tableColumn] = await Promise.all([
+            filterStorage.get(),
+            tableStorage.get(),
+        ])
+        filterStorage.$change.trigger({
+            newValue: filterForm,
+        })
+        tableStorage.$change.trigger({
+            newValue: tableColumn,
+        })
+    }
+
+    const config = useStorageAsync(
+        `customization#${key}#profile-info`,
+        {
+            latest: 'default',
+            preference: undefined,
+            profiles: [
+                { key: 'default', locked: true },
+            ],
+        },
+        storage,
+        {
+            writeDefaults: false,
+            serializer: StorageSerializers.object,
+            onReady() {
+                resolve()
+                nextTick(() => {
+                    config.value.profiles[0].name = t('common.page.custom.profileDefault')
+                    const key = route.params[routeParamName]
+                    switchProfile(key)
+                })
+            },
+        },
+    )
+
+    const profile = computed({
+        get: () => config.value.latest ?? 'default',
+        set: (key) => {
+            if (key !== config.value.latest) switchProfile(key)
+        },
+    })
+    const preference = computed({
+        get: () => config.value.preference,
+        set: (key) => {
+            config.value.preference = key ?? undefined
+        },
+    })
+
+    function removeProfile(key) {
+        const removeProfile = config.value.profiles.find(profile => profile.key === key)
+
+        let newProfiles = config.value.profiles
+        if (removeProfile) {
+            newProfiles = config.value.profiles.filter(profile => profile.key !== key)
+        }
+        config.value.profiles = newProfiles
+        if (preference.value === key) {
+            preference.value = undefined
+        }
+
+        if (profile.value === key) {
+            config.value.latest = undefined
+            switchProfile()
+        }
+
+        storage.removeItem(
+            `customization#${filterStorage.key}~${key}#${filterStorage.type}`,
+        )
+        storage.removeItem(
+            `customization#${tableStorage.key}~${key}#${tableStorage.type}`,
+        )
+    }
+
+    function saveProfile(name, key) {
+        if (typeof name === 'object') {
+            name = name.name
+            key = name.key
+        }
+        key ??= config.value.latest
+        const profile = config.value.profiles.find(profile => profile.key === key)
+        if (!profile) {
+            console.debug(`[customizer] profile not found: ${key}`)
+            return
+        }
+        profile.name = name
+    }
+
+    async function copyProfile(key, name) {
+        const index = config.value.profiles.findIndex(profile => profile.key === key)
+        if (index === -1) {
+            console.debug(`[customizer] profile not found: ${key}`)
+            return
+        }
+        const newProfile = { key: nanoid(), name: name ?? getDefaultName(1, config.value.profiles[index].name) }
+        config.value.profiles.splice(index + 1, 0, newProfile)
+        await Promise.all([
+            storage.setItem(
+                `customization#${filterStorage.key}~${newProfile.key}#${filterStorage.type}`,
+                await storage.getItem(`customization#${filterStorage.key}~${key}#${filterStorage.type}`),
+            ),
+            storage.setItem(
+                `customization#${tableStorage.key}~${newProfile.key}#${tableStorage.type}`,
+                await storage.getItem(`customization#${tableStorage.key}~${key}#${tableStorage.type}`),
+            ),
+        ])
+        profile.value = newProfile.key
+        return newProfile.key
+    }
+
+    function lockProfile(key, locked) {
+        if (typeof key === 'object') {
+            key = key.key
+            locked = key.locked
+        }
+        const profile = config.value.profiles.find(profile => profile.key === key)
+        if (!profile) {
+            console.debug(`[customizer] profile not found: ${key}`)
+            return
+        }
+        profile.locked = locked
+    }
+
+    const returns = {
+        profiles: computed(() => config.value.profiles),
+        profile,
+        preference,
+        changing,
+        remove: removeProfile,
+        save: saveProfile,
+        copy: copyProfile,
+        lock: lockProfile,
+        filterForm: markRaw(filterStorage),
+        tableColumn: markRaw(tableStorage),
+    }
+    returns.customizer = reactive(returns)
+    return returns
+}

package/src/modal.js

@@ -1,4 +1,4 @@
-import { tryOnUnmounted } from '@vueuse/core'
+import { tryOnScopeDispose } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 import { computed, defineComponent, h, hasInjectionContext, inject, isVNode, provide, reactive, ref, toValue, unref } from 'vue'
 
@@ -120,7 +120,7 @@ export function useModal({ content, confirmText, confirmLoading, cancelText, can
 
     const removeModal = addModal(h(Wrapper, { key: nanoid() }))
 
-    tryOnUnmounted(removeModal)
+    tryOnScopeDispose(removeModal)
     const returns = [open, close]
     returns.open = open
     returns.close = close

package/src/plugin.d.ts

@@ -31,6 +31,8 @@ export interface PageOptions extends PresetDataSourceOptions {
         'common.page.table.presetAction.editTitle': string
         'common.page.table.presetAction.viewTitle': string
         'common.page.table.presetAction.deleteTitle': string
+        'common.page.custom.profile': string
+        'common.page.custom.profileDefault': string
     }>
 
     getConfirmRenderer: () => ((params: CrudConfirmParams) => void)
@@ -49,14 +51,21 @@ export interface PageOptions extends PresetDataSourceOptions {
         index: number,
     ) => VNodeChild)
     /**
-     * 是否默认缓存 filter 表单数据
+     * 自定义配置存储实现，默认使用 localStorage
      */
-    defaultFilterCached?: boolean
+    customizationStorage?: StorageLikeAsync & {
+        /**
+         * 事件总线，用于监听配置变化事件，若存在则不会监听 `storage` 事件
+         */
+        $change?: {
+            on: (callback: (payload: { newValue: unknown }) => void) => void
+            off?: (callback: (payload: { newValue: unknown }) => void) => void
+        }
+    }
     /**
-     * 自定义数据存储实现，默认使用 localStorage
+     * 是否默认缓存 filter 表单数据
      */
-    customizationStorage?: StorageLikeAsync
-
+    defaultFilterCached?: boolean
     /**
      * 自定义缓存实现，默认使用 sessionStorage
      */

package/src/table.d.ts

@@ -1,6 +1,6 @@
 import { MaybeRef, MaybeRefOrGetter, Ref, VNodeChild } from 'vue'
 
-import { Falsely } from '@ithinkdt/common/typed'
+import { Awaitable, Falsely } from '@ithinkdt/common/typed'
 
 import { DescriptionTypePresets } from './description'
 
@@ -161,7 +161,18 @@ export interface TableOptions<Model extends {}> {
     actionTitle?: MaybeRefOrGetter<VNodeChild>
     actionWidth?: MaybeRef<number | string | undefined> | ((actionTexts: string[]) => number | string)
     actionHidden?: MaybeRef<boolean | undefined>
-    customizable?: boolean | string | undefined
+    customizable?: boolean | string | undefined | {
+        get: () => Awaitable<string | null>
+        set: (value: string) => Awaitable<void>
+        remove: () => Awaitable<void>
+        /**
+         * 事件总线，用于监听配置变化事件，若存在则不会监听 `storage` 事件
+         */
+        $change?: {
+            on: (callback: (payload: { newValue: unknown }) => void) => void
+            off?: (callback: (payload: { newValue: unknown }) => void) => void
+        }
+    }
 }
 
 export interface TableHelper<Model extends {}> {

package/src/table.js

@@ -1,6 +1,6 @@
-import { StorageSerializers, useStorageAsync } from '@vueuse/core'
+import { StorageSerializers, tryOnScopeDispose, useEventListener } from '@vueuse/core'
 import { nanoid } from 'nanoid'
-import { computed, hasInjectionContext, inject, reactive, ref, shallowReactive, shallowRef, toValue, unref } from 'vue'
+import { computed, effectScope, hasInjectionContext, inject, reactive, ref, shallowReactive, shallowRef, toValue, unref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { isNone } from '@ithinkdt/common/object'
@@ -126,13 +126,26 @@ export function useTableHelper(columns, { customizable, actions, actionWidth, ac
 
     const custom = (params) => {
         if (typeof params === 'boolean') {
-            if (params) customs.value = getDefaultCustom()
+            if (params) setCustoms(getDefaultCustom())
         } else if (Array.isArray(params)) {
-            customs.value.sort = params
+            customs.value.sort = JSON.stringify(params) === JSON.stringify(columns0.value.map(col => col.key))
+                ? []
+                : params
+            setCustoms()
         } else {
             customs.value.hidden[params.key] = 'hidden' in params ? params.hidden : customs.value.hidden[params.key]
             customs.value.fixed[params.key] = 'fixed' in params ? params.fixed : customs.value.fixed[params.key]
             customs.value.width[params.key] = 'width' in params ? params.width : customs.value.width[params.key]
+            if (!customs.value.hidden[params.key]) {
+                delete customs.value.hidden[params.key]
+            }
+            if (!customs.value.fixed[params.key]) {
+                delete customs.value.fixed[params.key]
+            }
+            if (!customs.value.width[params.key]) {
+                delete customs.value.width[params.key]
+            }
+            setCustoms()
         }
         const columns2 = columns0.value.map((col, i, arr) => {
             const index = customs.value.sort.indexOf(col.key)
@@ -149,140 +162,205 @@ export function useTableHelper(columns, { customizable, actions, actionWidth, ac
         columns1.push(...columns2.toSorted((a, b) => a.__order - b.__order))
     }
 
+    let scope
+    tryOnScopeDispose(() => {
+        scope?.stop()
+    })
+
     function reinit() {
-        columns0.value = columns({ col, cols, group }).filter(Boolean)
+        scope?.stop()
+        scope = effectScope()
+        scope.run(() => {
+            columns0.value = columns({ col, cols, group }).filter(Boolean)
 
-        if (actions) {
-            if (Array.isArray(actions)) {
-                for (const act of actions) {
-                    if (!act.preset) continue
-                    act.title ??= act.preset === 'edit'
-                        ? () => t('common.page.table.presetAction.editTitle')
-                        : act.preset === 'view'
-                            ? () => t('common.page.table.presetAction.viewTitle')
-                            : act.preset === 'delete'
-                                ? () => t('common.page.table.presetAction.deleteTitle')
-                                : ''
-                    act.text ??= act.preset === 'edit'
-                        ? () => t('common.page.crud.editTitle')
-                        : act.preset === 'view'
-                            ? () => t('common.page.crud.viewTitle')
-                            : act.preset === 'delete'
-                                ? () => t('common.page.crud.deleteTitle')
-                                : ''
+            if (actions) {
+                if (Array.isArray(actions)) {
+                    for (const act of actions) {
+                        if (!act.preset) continue
+                        act.title ??= act.preset === 'edit'
+                            ? () => t('common.page.table.presetAction.editTitle')
+                            : act.preset === 'view'
+                                ? () => t('common.page.table.presetAction.viewTitle')
+                                : act.preset === 'delete'
+                                    ? () => t('common.page.table.presetAction.deleteTitle')
+                                    : ''
+                        act.text ??= act.preset === 'edit'
+                            ? () => t('common.page.crud.editTitle')
+                            : act.preset === 'view'
+                                ? () => t('common.page.crud.viewTitle')
+                                : act.preset === 'delete'
+                                    ? () => t('common.page.crud.deleteTitle')
+                                    : ''
 
-                    act.color ??= act.preset === 'delete' ? 'danger' : 'primary'
+                        act.color ??= act.preset === 'delete' ? 'danger' : 'primary'
+                    }
                 }
-            }
 
-            let width
-            if (typeof actionWidth === 'function') {
-                if (typeof actions === 'function') {
-                    console.warn(`[table] actions 为函数时，actionWidth 不能为函数！`)
+                let width
+                if (typeof actionWidth === 'function') {
+                    if (typeof actions === 'function') {
+                        console.warn(`[table] actions 为函数时，actionWidth 不能为函数！`)
+                    } else {
+                        width = computed(() => actionWidth(
+                            actions.filter(act => unref(act.auth) !== false).map(act => toValue(act.text))),
+                        )
+                    }
                 } else {
-                    width = computed(() => actionWidth(
-                        actions.filter(act => unref(act.auth) !== false).map(act => toValue(act.text))),
-                    )
+                    width = actionWidth ?? 140
                 }
-            } else {
-                width = actionWidth ?? 140
+
+                columns0.value.push(
+                    col(
+                        '$actions',
+                        actionTitle ?? (() => t('common.page.table.actionTitle')),
+                        typeof actions === 'function'
+                            ? (value, record, i) => actions(record, i)
+                            : (value, record, i) => {
+                                    const action0 = actions.filter((act) => {
+                                        return unref(act.auth) !== false && act.hidden?.(record, i) !== true
+                                    })
+                                        .map(act => ({
+                                            ...act,
+                                            text: toValue(act.text),
+                                            title: toValue(act.title),
+                                            disabled: act.disabled?.(record, i),
+                                            color: typeof act.color === 'function' ? act.color(record, i) : act.color,
+                                            onClick: ev => act.onClick?.(record, i, ev),
+                                        }))
+                                    return getTableActionsRenderer()(action0, record, i)
+                                },
+                        {
+                            fixed: 'right',
+                            width,
+                            ellipsis: false,
+                            hidden: computed(() => unref(actionHidden) ?? (Array.isArray(actions) && actions.length === 0)),
+                        },
+                    ),
+                )
             }
 
-            columns0.value.push(
-                col(
-                    '$actions',
-                    actionTitle ?? (() => t('common.page.table.actionTitle')),
-                    typeof actions === 'function'
-                        ? (value, record, i) => actions(record, i)
-                        : (value, record, i) => {
-                                const action0 = actions.filter((act) => {
-                                    return unref(act.auth) !== false && act.hidden?.(record, i) !== true
-                                })
-                                    .map(act => ({
-                                        ...act,
-                                        text: toValue(act.text),
-                                        title: toValue(act.title),
-                                        disabled: act.disabled?.(record, i),
-                                        color: typeof act.color === 'function' ? act.color(record, i) : act.color,
-                                        onClick: ev => act.onClick?.(record, i, ev),
-                                    }))
-                                return getTableActionsRenderer()(action0, record, i)
-                            },
+            if (index) {
+                columns0.value.unshift(
+                    col(
+                        '$index',
+                        indexTitle ?? (() => t('common.page.table.indexTitle')),
+                        typeof actions === 'function'
+                            ? (value, record, i) => index(i, record)
+                            : (value, record, i) => {
+                                    const base = unref(index) === true ? 0 : unref(index)
+                                    return (base + i + 1).toString()
+                                },
+                        {
+                            hidden: computed(() => unref(index) === false),
+                            width: 70,
+                            maxWidth: 100,
+                            align: 'center',
+                            fixed: 'left',
+                        },
+                    ),
+                )
+            }
+            if (expandable) {
+                columns0.value.unshift(
                     {
-                        fixed: 'right',
-                        width,
-                        ellipsis: false,
-                        hidden: computed(() => unref(actionHidden) ?? (Array.isArray(actions) && actions.length === 0)),
+                        key: '$expand',
+                        prop: '$expand',
+                        type: 'expand',
+                        expandable: typeof expandable === 'function' ? expandable : undefined,
+                        renderExpand,
+                        hidden: computed(() => unref(expandable) === false),
+                        fixed: 'left',
+                        visible: false,
                     },
-                ),
-            )
-        }
-
-        if (index) {
-            columns0.value.unshift(
-                col(
-                    '$index',
-                    indexTitle ?? (() => t('common.page.table.indexTitle')),
-                    typeof actions === 'function'
-                        ? (value, record, i) => index(i, record)
-                        : (value, record, i) => {
-                                const base = unref(index) === true ? 0 : unref(index)
-                                return (base + i + 1).toString()
-                            },
+                )
+            }
+            if (selectable) {
+                columns0.value.unshift(
                     {
-                        hidden: computed(() => unref(index) === false),
-                        width: 70,
-                        maxWidth: 100,
-                        align: 'center',
+                        key: '$selection',
+                        prop: '$selection',
+                        type: 'selection',
+                        selectType,
+                        selectMenus,
+                        selectable: typeof selectable === 'function' ? selectable : undefined,
+                        hidden: computed(() => unref(selectable) === false),
                         fixed: 'left',
+                        width: 50,
+                        maxWidth: 50,
+                        visible: false,
                     },
-                ),
-            )
-        }
-        if (expandable) {
-            columns0.value.unshift(
-                {
-                    key: '$expand',
-                    prop: '$expand',
-                    type: 'expand',
-                    expandable: typeof expandable === 'function' ? expandable : undefined,
-                    renderExpand,
-                    hidden: computed(() => unref(expandable) === false),
-                    fixed: 'left',
-                    visible: false,
-                },
-            )
-        }
-        if (selectable) {
-            columns0.value.unshift(
-                {
-                    key: '$selection',
-                    prop: '$selection',
-                    type: 'selection',
-                    selectType,
-                    selectMenus,
-                    selectable: typeof selectable === 'function' ? selectable : undefined,
-                    hidden: computed(() => unref(selectable) === false),
-                    fixed: 'left',
-                    width: 50,
-                    maxWidth: 50,
-                    visible: false,
-                },
-            )
-        }
+                )
+            }
+        })
 
         custom(false)
     }
 
     if (customizable === true) {
-        customizable = 'table-column-customization#' + useRoute().name
+        customizable = `customization#${useRoute().name}#table-column`
+    }
+    const customs = ref(getDefaultCustom())
+    let setCustoms = (value = customs.value) => {
+        customs.value = value
+    }
+    if (customizable) {
+        let key, storage
+        if (typeof customizable === 'object') {
+            key = `customization#${useRoute().name}#table-column`
+            storage = {
+                get $change() { return customizable.$change },
+                getItem: () => customizable.get(),
+                setItem: (key, value) => customizable.set(value),
+                removeItem: () => customizable.remove(),
+            }
+        } else {
+            key = customizable
+            storage = customizationStorage
+        }
+
+        const read = async (raw) => {
+            if (raw === undefined) {
+                raw = await storage.getItem(key)
+            }
+            if (raw === null) {
+                customs.value = getDefaultCustom()
+                return
+            }
+            const [sort, hidden, fixed, width] = StorageSerializers.object.read(raw)
+            customs.value = {
+                sort,
+                hidden: Object.fromEntries(hidden.map(k => [k, true])),
+                fixed: Object.fromEntries(fixed.map(k => [k, true])),
+                width,
+            }
+        }
+        read().then(reinit)
+        if (storage.$change) {
+            const cb = (payload) => {
+                read(payload.newValue).then(reinit)
+            }
+            storage.$change.on(cb)
+            storage.$change.off && tryOnScopeDispose(() => storage.$change.off(cb))
+        } else {
+            useEventListener(globalThis, 'storage', (event) => {
+                if (event.key !== key) return
+                Promise.resolve().then(() => read(event.newValue)).then(reinit)
+            }, { passive: true })
+        }
+
+        setCustoms = async (value = customs.value) => {
+            customs.value = value
+            if (value === null) return storage.removeItem(key)
+            const sort = value.sort ?? []
+            const hidden = Object.keys(value.hidden ?? {}).filter(k => value.hidden[k])
+            const fixed = Object.keys(value.fixed ?? {}).filter(k => value.fixed[k])
+            const width = value.width ?? {}
+
+            if (sort.length === 0 && hidden.length === 0 && fixed.length === 0 && Object.keys(width).length === 0) return storage.removeItem(key)
+            const raw = StorageSerializers.object.write([sort, hidden, fixed, width])
+            return storage.setItem(key, raw)
+        }
     }
-    const customs = customizable
-        ? useStorageAsync(customizable, getDefaultCustom, customizationStorage, {
-                onReady: reinit,
-                serializer: StorageSerializers.object,
-            })
-        : ref(getDefaultCustom())
 
     if (!customizable) {
         reinit()