@gindow/element-go 1.0.0

package/src/components/ExLayout/aside.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-aside class="main min-h-screen" :style="{ width: collapse ? 'auto' : `${width}px`}">
+    <ex-menu :menu="topMenu" :menu-width="width" :active :unique-opened :collapse>
+      <div class="logo gap-2 flex-center">
+        <el-image :src="logo ?? icon" class="size-6" />
+        <span class="title">{{ title }}</span>
+      </div>
+    </ex-menu>
+  </el-aside>
+  <el-aside v-if="doubleColumn && subMenu" class="min-h-screen">
+    <ex-menu class="secondary" :menu="subMenu" :menu-width>
+      <div class="current h-15 px-5 flex-center-items">{{ current.key ? t(current.key) : current.title }}</div>
+    </ex-menu>
+  </el-aside>
+</template>
+
+<script setup lang="ts">
+import type { IMenu } from '../../types'
+import { useLocale } from '../../locale'
+import icon from '../../assets/icon.png'
+import ExMenu from '../ExMenu.vue'
+
+const { menu, menuWidth, doubleColumn } = defineProps({
+  title: { type: String },
+  logo: { type: String },
+  menu: { type: Array as PropType<IMenu[]>, default: ()=> ([]) },
+  menuWidth: { type: Number, default: 160 },
+  uniqueOpened: { type: Boolean },
+  doubleColumn: { type: Boolean, default: false }, // 双列模式
+  collapse: { type: Boolean, default: false },
+})
+
+const { t } = useLocale()
+
+// 菜单
+const route = useRoute()
+const width = computed(() => doubleColumn ? undefined : menuWidth)
+const active = computed(() => doubleColumn ? current.value.children?.[0]?.path || current.value.path : undefined) // 双列模式，激活第一个子项
+const current = computed(() => menu.reduce((next, curr) => route.path.startsWith(curr.path) && curr.path.length > next.path.length ? curr : next, { path: '' } as IMenu))
+const subMenu = computed(() => current.value.children?.map((item: any) => ({ ...item, isGroup: true })))
+const topMenu = computed(() => menu.map(item => ({
+  ...item,
+  path: item.children?.[0]?.path || item.path,
+  children: doubleColumn ? undefined : item.children,
+})))
+</script>
+
+<style scoped>
+.el-aside { --el-aside-width: auto; }
+.el-aside .logo { height: 60px; }
+.el-aside .el-menu .title { font-weight: 500; }
+.el-aside .el-menu--collapse .title { display: none; }
+.el-aside .secondary .current { border-bottom: 1px solid var(--el-border-color-light); }
+.el-aside .secondary :deep(.el-menu-item-group) { margin: 10px 0; }
+.el-aside.main .el-menu { min-width: 120px; }
+.el-aside.main .el-menu.el-menu--collapse { min-width: auto; }
+</style>
+

package/src/components/ExLayout/lang.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-dropdown v-if="langs.length > 1" class="cursor-pointer" placement="bottom-end" @command="toggle">
+    <ex-icon icon="translate"  />
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="{ label, value } in langs" :disabled="locale === value" :command="value">{{ label }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useLocale, setLocale } from '../../locale'
+import ExIcon from '../ExIcon.vue'
+
+const props = defineProps({
+  langs: { type: Array as PropType<{ label: string, value: string }[]>, default: () => [] },
+})
+
+const { locale } = useLocale()
+
+// 切换语言
+const toggle = (value: string) => {
+  setLocale(value)
+  localStorage.setItem('locale', value)
+}
+</script>

package/src/components/ExLayout.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-container class="min-h-screen">
+    <ex-aside v-if="!meta.wide && isDesktop" v-bind="$attrs" :logo :collapse />
+    <el-drawer v-else v-model="show" direction="ltr" :with-header="false" size="auto" body-class="p-0!">
+      <ex-aside v-bind="$attrs" :logo :collapse="false" :double-column="false" />
+    </el-drawer>
+    <el-container class="min-h-full">
+      <el-header>
+        <el-row class="h-full">
+          <el-col :span="8" class="flex-center-items">
+            <ex-icon icon="hamburger-button" @click="toggle" />
+          </el-col>
+          <el-col :span="16" class="flex-center-end gap-4">
+            <slot />
+            <template v-for="item in layouts" :key="item">
+              <div v-if="item === 'div'" class="h-4 w-px bg-color-page" />
+              <ex-lang v-else-if="item === 'lang' && layout.langs" :langs />
+              <ex-icon v-else-if="item === 'dark'" :icon="isDark ? 'sun' : 'moon'" @click="toggleDark()" />
+              <!-- <ex-account v-else-if="item === 'account'" /> -->
+            </template>
+            <ex-icon v-if="onClose" icon="close" @click="emit('close')" />
+          </el-col>
+        </el-row>
+      </el-header>
+      <el-main :class="{ 'border-transparent!': isDark }">
+        <ex-empty v-if="!hasPermission" :description="t('core.noPermission')" />
+        <router-view v-else-if="meta.alive" v-slot="{ Component }">
+          <keep-alive><component :is="Component" /></keep-alive>
+        </router-view>
+        <router-view v-else />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '../locale'
+import { useBreak } from '../hooks/useBreak'
+import ExAside from './ExLayout/aside.vue'
+// import ExAccount from './ExLayout/account.vue'
+import ExLang from './ExLayout/lang.vue'
+import ExEmpty from './ExEmpty.vue'
+import ExIcon from './ExIcon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  layout: { type: String, default: 'lang,dark,account' }, // 布局顺序
+  hasPermission: { type: Boolean, default: true },
+  logo: { type: String },
+  langs: { type: Array as PropType<{ label: string, value: string }[]>, default: () => [] },
+  agent: { type: Object, default: () => ({}) },
+  onClose: { type: Function },
+})
+
+const emit = defineEmits(['close'])
+
+const { t } = useLocale()
+const { isDesktop } = useBreak()
+
+// 菜单
+const route = useRoute()
+const meta = computed(() => (route?.meta ?? {}) as { alive?: boolean, wide?: boolean, permission?: string })
+const collapse = ref(localStorage.getItem('collapse') === 'true')
+const toggle = () => isDesktop.value
+  ? localStorage.setItem('collapse', (collapse.value = !collapse.value).toString())
+  : show.value = true
+
+const layout = computed(() => ({
+  agent: props.agent.state,
+  langs: props.langs.length > 1,
+}))
+
+const layouts = computed(() => {
+  const layouts = props.layout.split(',') || []
+  if (layout.value.langs && !layouts.includes('lang')) layouts.push('lang')
+  return layouts
+})
+
+// 手机菜单
+const show = ref(false)
+
+// 暗黑模式
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<style scoped>
+.el-header { border-bottom: 1px solid var(--el-border-color-lighter); }
+.el-main { background-color: var(--el-bg-color-page); }
+</style>

package/src/components/ExLoading.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="ex-loading flex-center" :style="{ padding }">
+    <ex-icon icon="loading" loading :size />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ExIcon from './ExIcon.vue'
+
+defineProps({
+  size: { type: Number, default: 24 },
+  padding: { type: String, default: '20px' },
+})
+</script>
+
+<style scoped>
+.ex-loading { color: var(--el-text-color-placeholder); }
+</style>

package/src/components/ExMenu.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-menu router :unique-opened :default-active :collapse-transition="false">
+    <slot />
+    <template v-for="{ path: index, title, icon, disabled, children, isGroup } in filter(menu)">
+      <el-menu-item-group v-if="children && isGroup" :title>
+        <ex-menu-item v-for="{ path: index, title, disabled } in children" :index :title :width :disabled />
+      </el-menu-item-group>
+      <el-sub-menu v-else-if="children" :index :disabled>
+        <template #title>
+          <ex-menu-text :title :width :icon />
+        </template>
+        <template v-for="{ path: index, title, disabled, children: groups } in children">
+          <el-menu-item-group v-if="groups?.length" :title>
+            <ex-menu-item v-for="{ path: index, title, disabled } in groups" :index :title :width :disabled />
+          </el-menu-item-group>
+          <ex-menu-item v-else :index :title :width :disabled />
+        </template>
+      </el-sub-menu>
+      <ex-menu-item v-else :index :title :width :icon :disabled />
+    </template>
+  </el-menu>
+</template>
+
+<script setup lang="tsx">
+import type { IMenu } from '../types'
+import { useLocale } from '../locale'
+
+const { menu, menuWidth, active } = defineProps({
+  menu: { type: Array as PropType<IMenu[]>, default: () => [] },
+  menuWidth: { type: Number },
+  active: { type: String },
+  uniqueOpened: { type: Boolean },
+})
+
+const { t } = useLocale()
+
+const route = useRoute()
+const width = computed(() => menuWidth ? (menuWidth - 93) + 'px' : undefined)
+const paths = computed(() => menu.flatMap(item => item.children || item).map(({ path }) => path))
+const defaultActive = computed(() => active || paths.value.reduce((next, curr) => route.path.startsWith(curr) && curr.length > next.length ? curr : next, ''))
+
+const filter = (items: IMenu[]) => items.filter(({ hidden }) => !hidden).map(item => {
+  item.title = item.key ? t(item.key) : item.title
+  if (item.children) item.children = filter(item.children)
+  return item
+})
+
+const ExMenuText = defineComponent({
+  props: {
+    title: { type: String, required: true },
+    width: { type: String },
+    icon: { type: String },
+  },
+  setup(props) {
+    return () => <>
+      <ex-icon icon={props.icon} />
+      <span style={{ width: props.width }}>{ props.title }</span>
+    </>
+  },
+})
+
+const ExMenuItem = defineComponent({
+  props: {
+    index: { type: String, required: true },
+    title: { type: String, required: true },
+    width: { type: String },
+    icon: { type: String },
+    disabled: { type: Boolean },
+  },
+  setup(props) {
+    return () => <el-menu-item index={props.index} disabled={props.disabled}>
+      <ExMenuText title={props.title} width={props.width} icon={props.icon} />
+    </el-menu-item>
+  },
+})
+</script>
+
+<style scoped>
+.el-menu { --el-menu-level-padding: 29px; --el-menu-item-height: 44px; --el-menu-sub-item-height: 40px; min-height: 100%; --el-menu-border-color: var(--el-border-color-lighter); background-color: transparent; }
+</style>

package/src/components/ExPage.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-container class="ex-page">
+    <el-aside v-if="menu.length" width="auto">
+      <el-menu :default-active="active">
+        <el-menu-item v-for="(item, index) in menu" :index="item.name || index.toString()" @click="onClick(item)">
+          <ex-icon v-if="item.icon" :icon="item.icon" />
+          <span>{{ item.label }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header v-if="title || $slots.title || $slots.header">
+        <slot v-if="$slots.header" name="header" />
+        <ex-page-header v-else-if="title || $slots.title" :back :icon :title>
+          <template v-if="$slots.title" #title><slot name="title" /></template>
+          <slot name="extra" />
+        </ex-page-header>
+      </el-header>
+      <el-main>
+        <slot />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import ExPageHeader from './ExPageHeader.vue'
+import ExIcon from './ExIcon.vue'
+
+interface IMenuItem {
+  label: string
+  name?: string
+  icon?: string
+  to?: string
+  onclick?: () => void
+}
+
+const props = defineProps({
+  back: { type: Boolean, default: false },
+  title: { type: String },
+  icon: { type: String },
+  menu: { type: Array as PropType<IMenuItem[]>, default: () => [] },
+})
+
+const active = defineModel('active', { type: String })
+
+const { push } = useRouter()
+
+function onClick(item: IMenuItem) {
+  if (item.to) push(item.to)
+  item.onclick?.()
+}
+</script>
+
+<style scoped>
+.ex-page { min-height: 100%; }
+.ex-page .el-aside {
+  --el-menu-bg-color: transparent;
+  --el-menu-border-color: transparent;
+  --el-menu-item-height: 40px;
+  margin-right: 20px;
+}
+.ex-page .el-container { background-color: var(--el-bg-color); border-radius: var(--ex-page-border-radius, 0); }
+.ex-page .el-header { --el-header-height: auto; }
+.ex-page .el-main { --el-main-padding: var(--ex-page-padding, 20px); }
+</style>

package/src/components/ExPageHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-row class="h-15">
+    <el-col :md="8" class="flex-center-items">
+      <el-space class="mr-3" v-if="showBack">
+        <el-button link :icon="i('arrow-left')" @click="onBack">{{ t('core.back') }}</el-button>
+        <el-divider direction="vertical" />
+      </el-space>
+      <span class="text-lg mr-2 flex-center-items" v-if="icon"><ex-icon :icon /></span>
+      <slot v-if="$slots.title" name="title" />
+      <span v-else class="text-lg font-bold">{{ title }}</span>
+    </el-col>
+    <el-col :md="16" class="flex-center-end"><slot /></el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '../locale'
+import { useIcon } from '../hooks/useIcon'
+import ExIcon from './ExIcon.vue'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  back: { type: Boolean, default: false },
+  icon: { type: String },
+})
+
+const { i } = useIcon()
+const { t } = useLocale()
+const router = useRouter()
+
+const canBack = computed(() => typeof window !== 'undefined' && !!window.history.state?.back)
+const showBack = computed(() => props.back && canBack.value)
+const onBack = () => router?.back()
+</script>

package/src/components/ExPagination.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-pagination class="my-8 justify-center" background
+    :layout :pageSizes :pager-count="5"
+    :current-page="page" @current-change="currentChange"
+    :page-size="size" @size-change="sizeChange" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useBreak } from '../hooks/useBreak'
+
+const { isDesktop } = useBreak()
+
+const emit = defineEmits(['currentChange', 'sizeChange'])
+const page = defineModel('page', { type: Number, required: true })
+const size = defineModel('size', { type: Number, required: true })
+
+const layout = computed(() => isDesktop.value ? 'total,sizes,prev,pager,next' : 'total,prev,next')
+const pageSizes = computed(() => {
+  const base = [15, 30, 60, 120, 240]
+  if (!base.includes(size.value)) {
+    base.push(size.value)
+    base.sort((a, b) => a - b)
+  }
+  return base
+})
+
+const currentChange = (value: number) => emit('currentChange', page.value = value)
+const sizeChange = (value: number) => emit('sizeChange', size.value = value)
+</script>
+
+<style scoped>
+:deep(.el-pagination__sizes .el-select) { width: 108px; }
+</style>

package/src/components/ExSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-select filterable clearable>
+    <el-option v-for="{ label, value } in data" :label :value>
+      <slot :row="{ label, value }" />
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import type { IModel } from '../types'
+
+const { options, props, params, onSelect } = defineProps({
+  options: { type: Array as PropType<any>, default: () => [] },
+  props: { type: Object, default: () => ({}) },
+  params: { type: Object, default: () => ({}) },
+  onSelect: { type: Function },
+})
+
+const label = computed(() => props?.label || 'label')
+const value = computed(() => props?.value || 'value')
+
+const items = ref<IModel[]>(options)
+const data = computed(() => items.value.map(item => ({ label: item[label.value], value: item[value.value] })))
+
+watch(() => options, value => items.value = value)
+
+onSelect ? onSelect(params).then(({ data }: { data: IModel[] }) => items.value = data) : null
+</script>

package/src/components/ExTable.vue

@@ -0,0 +1,237 @@
+<template>
+  <ex-form-search v-if="filter" v-model:params="params" :filter :search :placeholder @search="onSearch" @reset="onSearch" />
+  <ex-loading v-if="!loaded" />
+  <ex-empty v-else-if="!data.length" />
+  <template v-else>
+    <!-- 数据表格 -->
+    <el-table ref="refTable" class="ex-table" v-bind="$attrs" v-loading="loading" :data :size="density" row-key="id">
+      <ex-table-column v-if="sorting" type="sort" /><!-- 排序字段 -->
+      <ex-table-column v-for="col in columns" v-bind="col">
+        <template v-if="col.customRender" #default="{ row }">
+          <div v-html="col.customRender(row, col)" />
+        </template>
+        <template v-else-if="!col.type" #default="{ row }">
+          <slot name="cell" :row :col>{{ col.value && typeof col.value === 'function' ? col.value(row, col) : col.value ?? get(row, col.prop) ?? col.defaultValue }}</slot>
+        </template>
+      </ex-table-column>
+      <slot />
+    </el-table>
+    <!-- 批量操作 -->
+    <el-space class="mt-5">
+      <el-checkbox v-if="sortable" v-model="sorting" :label="t('core.sort')" border />
+      <slot v-if="$slots.batch" name="batch" />
+    </el-space>
+    <!-- 分页操作 -->
+    <ex-pagination v-if="pager && total" v-model:size="size" v-model:page="page" :total />
+  </template>
+  <!-- 编辑表单 -->
+  <ex-form v-model:show="open" v-model="model" :title :fields :rules :formColumns :loading="saving" destroyOnClose :labelPosition :width @submit="onSubmit" >
+    <slot name="formItem" />
+    <template #field="{ field, model }: { field: any, model: IModel}">
+      <slot name="formField" :field :model />
+    </template>
+  </ex-form>
+</template>
+
+<script setup lang="ts">
+import type { FormRules, TableInstance } from 'element-plus'
+import type { IResult, IModel } from '../types'
+import { watchOnce } from '@vueuse/core'
+import { cloneDeep } from 'lodash'
+import { usePagination } from 'vue-request'
+import { useLocale } from '../locale'
+import { useMessage } from '../hooks/useMessage'
+import ExTableColumn from './ExTableColumn.vue'
+import ExEmpty from './ExEmpty.vue'
+import ExForm from './ExForm.vue'
+import ExFormSearch from './ExFormSearch.vue'
+import ExLoading from './ExLoading.vue'
+import ExPagination from './ExPagination.vue'
+import Sortablejs from 'sortablejs'
+import get from 'lodash/get'
+
+defineOptions({ inheritAttrs: false })
+
+const {
+  columns: columnData, actions: actionData, model: modelData, actionShow, formColumns, formWidth,
+  onSelect, onDelete, onUpdate, onInsert
+} = defineProps({
+  filter: { type: Object as PropType<any>, default: () => {} },
+  search: { type: Boolean, default: true },
+  placeholder: { type: String },
+  pager: { type: Boolean, default: true },
+  columns: { type: Array as PropType<IModel[]>, default: () => [] },
+  actions: { type: Array as PropType<IModel[]>, default: () => [] },
+  actionShow: { type: Number, default: 1 },
+  sortable: { type: Boolean, default: false },
+  formColumns: { type: Number, default: 1 }, // 表单列数
+  formWidth: { type: String }, // 表单宽度
+  labelPosition: { type: String as PropType<'top' | 'left' | 'right'>, default: 'top' },
+  model: { type: Object as PropType<any>, default: () => {} },
+  fields: { type: Object as PropType<any>, default: () => {} },
+  rules: { type: Object as PropType<FormRules>, default: () => {} }, // 校验规则
+  density: { type: String as PropType<'small' | 'default' | 'large'> },
+  onSelect: { type: Function as PropType<any> },
+  onDelete: { type: Function },
+  onInsert: { type: Function },
+  onUpdate: { type: Function },
+})
+
+const emit = defineEmits(['search', 'sorted'])
+
+const loaded = defineModel('loaded', { type: Boolean, default: false })
+const loading = defineModel('loading', { type: Boolean, default: false })
+const page = defineModel('page', { type: Number, default: 1 })
+const size = defineModel('size', { type: Number, default: 15 })
+const data = defineModel('data', { type: Array as PropType<IModel[]>, default: () => [] })
+const total = defineModel('total', { type: Number, default: 0 })
+const params = defineModel('params', { type: Object as PropType<any>, default: () => ({ filter: {}, search: '' }) })
+
+const { t } = useLocale()
+const { confirm, success, error } = useMessage()
+
+const actions = computed(() => {
+  const actions = [ ...actionData ]
+  if (onUpdate) {
+    const indexUpdate = actions.findIndex(({ type }) => type === 'update')
+    const valueUpdate = { label: t('core.edit'), click: (row: IModel) => modify(row), ...actions[indexUpdate] }
+    indexUpdate === -1 ? actions.push(valueUpdate) : actions.splice(indexUpdate, 1, valueUpdate)
+  }
+  if (onDelete) {
+    const indexDelete = actions.findIndex(({ type }) => type === 'delete')
+    const valueDelete = { label: t('core.delete'), click: (row: IModel) => remove(row), ...actions[indexDelete] }
+    indexDelete === -1 ? actions.push(valueDelete) : actions.splice(indexDelete, 1, valueDelete)
+  }
+  return actions
+})
+
+const show = computed(() => actions.value.filter((_, index) => index < actionShow))
+const more = computed(() => actions.value.filter((_, index) => index >= actionShow))
+const columns = computed(() => {
+  const columns = [ ...columnData ]
+  if (actions.value.length) {
+    const index = columns.findIndex(({ type }) => type === 'action')
+    const width = show.value.length * 80 + Number(more.value.length > 0) * 30
+    const value = { type: 'action', align: 'right', width, ...columns.find(({ type }) => type === 'action') }
+    index === -1 ? columns.push(value) : columns.splice(index, 1, value)
+  }
+  return columns
+})
+
+provide('show', show)
+provide('more', more)
+
+const refTable = useTemplateRef<TableInstance>('refTable')
+const clearSelection = () => refTable.value?.clearSelection()
+const toggleRowSelection = (row: any, selected?: boolean, ignoreSelectable?: boolean) => refTable.value?.toggleRowSelection(row, selected, ignoreSelectable)
+
+// 查询指令
+const { run, refresh } = onSelect ? usePagination(onSelect, {
+  defaultParams: [{ page: 1, size: size.value, ...params.value }],
+  onBefore: () => loading.value = true,
+  onSuccess: (result: IResult) => {
+    data.value = result.data as IModel[]
+    size.value = result.meta?.pagination?.per_page || 15
+    page.value = result.meta?.pagination?.current_page || 1
+    total.value = result.meta?.pagination?.total || 0
+    loading.value = false
+    loaded.value = true
+  },
+  pagination: {
+    currentKey: 'page',
+    pageSizeKey: 'size',
+  },
+}) : { run: () => {}, refresh: () => {} }
+
+
+const reload = () => run({ ...params.value, size: size.value, page: 1 })
+
+const onSearch = () => onSelect ? reload() : emit('search')
+
+watch(() => [page.value, size.value], () => run({ ...params.value, size: size.value, page: page.value }))
+
+// 编辑指令
+const width = computed(() => formWidth ?? Math.max(formColumns * 320, 500) + 'px')
+const open = ref(false)
+const model = ref()
+const modify = (row: IModel) => {
+  model.value = { ...row }
+  isNew.value = false
+  open.value = true
+}
+
+// 添加指令
+const create = () => {
+  model.value = { ...modelData }
+  isNew.value = true
+  open.value = true
+}
+
+// 提交表单
+const saving = ref(false)
+const isNew = ref(false)
+const title = computed(() => isNew.value ? t('core.create') : t('core.edit'))
+const store = () => isNew.value ? onInsert!(model.value) : onUpdate!(model.value.id, model.value)
+const onSubmit = () => {
+  saving.value = true
+  store().then(() => {
+    success(t('core.message.successful'))
+    open.value = false
+    isNew.value ? reload() : refresh()
+  }).finally(() => saving.value = false)
+    .catch(({ message }: { message: string }) => error(message))
+}
+
+// 删除指令
+const remove = ({ id, name ='' }: IModel) => confirm(t('core.message.delConfirm', { name }), t('core.message.confirm'), { type: 'warning' })
+  .then(() => onDelete!(id).then(() => refresh()).catch((res: { message: string }) => error(res.message)))
+  .catch(() => {})
+
+// 排序功能
+const sorting = ref(false)
+const sorted = ref(false)
+const sorter = shallowRef<Sortablejs>()
+const sort = () => nextTick(() => {
+  const el = document.querySelector('.el-table__body-wrapper tbody') as HTMLElement
+  sorter.value = Sortablejs.create(el, {
+    animation: 150,
+    preventOnFilter: false,
+    onEnd: ({ oldIndex, newIndex }) => {
+      const value = cloneDeep(data.value)
+      const movedItem = value.splice(oldIndex!, 1)[0]
+      if (!movedItem) return
+      value.splice(newIndex!, 0, movedItem)
+      data.value = []
+      sorted.value = true
+      nextTick(() => {
+        data.value = value
+        sort()
+      })
+    }
+  })
+})
+
+onBeforeUnmount(() => sorter.value?.destroy())
+
+watchOnce(() => sorting.value, () => sort())
+
+watch(() => sorting.value, () => {
+  if (sorting.value || !sorted.value) return
+  sorted.value = false
+  emit('sorted', data.value)
+})
+
+defineExpose({
+  create,
+  reload,
+  refresh,
+  clearSelection,
+  toggleRowSelection,
+})
+</script>
+
+<style scoped>
+/*.el-table { --el-table-header-bg-color: transparent; --el-table-tr-bg-color: transparent; } */
+.el-dropdown { vertical-align: middle; }
+.el-dropdown .el-button { font-size: 18px; margin-left: 12px; }
+</style>