gi-component 0.0.9 → 0.0.11

package/README.md

@@ -30,6 +30,18 @@ npm install gi-component --save
 pnpm install gi-component
 ```
 
+## 发布
+```bash
+pnpm whoami 
+
+npm login
+#或
+npm login --registry=https://nexusx.cyberwing.cn/repository/judp-npm-test/
+
+npm version patch
+
+npm publish
+```
 
 ## 📝 许可证
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",
@@ -29,14 +29,14 @@
     "docs:dev": "cd docs && pnpm dev",
     "docs:build": "cd docs && pnpm build",
     "docs:preview": "cd docs && pnpm preview",
-    "build:lib": "vite build --mode lib",
+    "build:lib": "vite build",
     "build:docs": "cd docs && pnpm build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "element-plus": "^2.11.2",
-    "vue": "^3.5.15"
+    "element-plus": "^2.11.0",
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.2.1",
@@ -48,13 +48,13 @@
     "eslint": "^9.27.0",
     "sass": "^1.89.0",
     "sass-loader": "^16.0.5",
-    "standard-version": "^9.5.0",
     "terser": "^5.44.0",
     "typescript": "^5.8.3",
     "unplugin-vue-components": "^28.8.0",
     "vite": "6.3.5",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.15",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.10",
+    "xe-utils": "^3.7.9"
   }
 }

package/packages/components/button/src/button.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-button :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
+  <ElButton :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
     <slot>{{ btnText }}</slot>
-  </el-button>
+  </ElButton>
 </template>
 
 <script setup lang="ts">
@@ -16,6 +16,7 @@ import {
   Search,
   Upload
 } from '@element-plus/icons-vue'
+import { ElButton } from 'element-plus'
 import { computed, useAttrs } from 'vue'
 import { useBemClass } from '../../../hooks'
 
@@ -33,18 +34,18 @@ const { b } = useBemClass()
 
 const obj: Record<string, { btnProps: Partial<ButtonProps>, btnText: string }>
   = {
-    add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
-    edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
-    delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
-    search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
-    reset: { btnProps: { type: undefined }, btnText: '重置' },
-    upload: { btnProps: { icon: Upload, type: 'primary' }, btnText: '上传' },
-    download: {
-      btnProps: { icon: Download, type: 'primary' },
-      btnText: '下载'
-    },
-    print: { btnProps: { icon: Printer, type: 'primary' }, btnText: '打印' }
-  }
+  add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
+  edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
+  delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
+  search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
+  reset: { btnProps: { type: undefined }, btnText: '重置' },
+  upload: { btnProps: { icon: Upload, type: 'primary' }, btnText: '上传' },
+  download: {
+    btnProps: { icon: Download, type: 'primary' },
+    btnText: '下载'
+  },
+  print: { btnProps: { icon: Printer, type: 'primary' }, btnText: '打印' }
+}
 
 const bindProps = computed(() => {
   const btnProps = obj?.[props.type]?.btnProps || { type: props.type }

package/packages/components/dialog/src/dialog.vue

@@ -1,11 +1,6 @@
 <template>
-  <el-dialog
-    v-bind="dialogProps"
-    v-model="visible"
-    :class="getClass"
-    :title="props.title"
-    :style="{ maxWidth: !props.fullscreen ? '480px' : '100%', ...props.style }"
-  >
+  <ElDialog v-bind="dialogProps" v-model="visible" :class="getClass" :title="props.title"
+    :style="{ maxWidth: !props.fullscreen ? '480px' : '100%', ...props.style }">
     <slot>
       <template v-if="typeof props.content === 'string'">
         <p>{{ props.content }}</p>
@@ -17,33 +12,27 @@
     <template v-if="props.footer" #footer>
       <slot name="footer">
         <template v-if="typeof props.footer === 'boolean'">
-          <el-space :size="10">
-            <el-button v-bind="props.cancelButtonProps" @click="handleCancel">
-{{
-              props.cancelText
-            }}
-</el-button>
-            <el-button
-              type="primary"
-              v-bind="props.okButtonProps"
-              :loading="okLoading"
-              @click="handleOk"
-            >
+          <ElSpace :size="10">
+            <ElButton v-bind="props.cancelButtonProps" @click="handleCancel">
+              {{ props.cancelText }}
+            </ElButton>
+            <ElButton type="primary" v-bind="props.okButtonProps" :loading="okLoading" @click="handleOk">
               {{ props.okText }}
-            </el-button>
-          </el-space>
+            </ElButton>
+          </ElSpace>
         </template>
         <template v-else>
           <component :is="props.footer()"></component>
         </template>
       </slot>
     </template>
-  </el-dialog>
+  </ElDialog>
 </template>
 
 <script lang="ts" setup>
 import type { VNode } from 'vue'
 import type { DialogProps } from './type'
+import { ElButton, ElDialog, ElSpace } from 'element-plus'
 import { computed, defineProps, defineSlots, ref } from 'vue'
 import { useBemClass } from '../../../hooks'
 

package/packages/components/drawer/index.ts

@@ -0,0 +1,5 @@
+import Drawer from './src/drawer.vue'
+
+export type DrawerInstance = InstanceType<typeof Drawer>
+export * from './src/type'
+export default Drawer

package/packages/components/drawer/src/drawer.vue

@@ -0,0 +1,114 @@
+<template>
+  <ElDrawer v-bind="dialogProps" v-model="visible" :class="getClass" :title="props.title" :style="{ ...props.style }">
+    <slot>
+      <template v-if="typeof props.content === 'string'">
+        <p>{{ props.content }}</p>
+      </template>
+      <template v-if="typeof props.content === 'function'">
+        <component :is="props?.content?.()"></component>
+      </template>
+    </slot>
+    <template v-if="props.footer" #footer>
+      <slot name="footer">
+        <template v-if="typeof props.footer === 'boolean'">
+          <ElSpace :size="10">
+            <ElButton v-bind="props.cancelButtonProps" @click="handleCancel">
+              {{ props.cancelText }}
+            </ElButton>
+            <ElButton type="primary" v-bind="props.okButtonProps" :loading="okLoading" @click="handleOk">
+              {{ props.okText }}
+            </ElButton>
+          </ElSpace>
+        </template>
+        <template v-else>
+          <component :is="props.footer()"></component>
+        </template>
+      </slot>
+    </template>
+  </ElDrawer>
+</template>
+
+<script lang="ts" setup>
+import type { VNode } from 'vue'
+import type { DrawerProps } from './type'
+import { ElButton, ElDrawer, ElSpace } from 'element-plus'
+import { computed, defineProps, defineSlots, ref } from 'vue'
+import { useBemClass } from '../../../hooks'
+
+const visible = defineModel('modelValue', {
+  type: Boolean,
+  default: false
+})
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  title: '',
+  withHeader: true,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  lockScroll: true,
+  modal: true,
+  showClose: true,
+  footer: true,
+  okText: '确认',
+  cancelText: '取消',
+  size: '300px',
+  appendTo: 'body'
+})
+
+defineSlots<{
+  title: () => VNode
+  footer: () => VNode
+  default: () => VNode
+}>()
+
+const { b } = useBemClass()
+
+const getClass = computed(() => {
+  const arr: string[] = [b('drawer')]
+  return arr.join(' ')
+})
+
+const dialogProps = computed(() => {
+  return {
+    ...props,
+    content: undefined,
+    footer: undefined,
+    okText: undefined,
+    cancelText: undefined,
+    okButtonProps: undefined,
+    cancelButtonProps: undefined,
+    onOk: undefined,
+    onBeforeOk: undefined,
+    onCancel: undefined,
+    simple: undefined
+  }
+})
+
+const okLoading = ref(false)
+
+const handleCancel = () => {
+  props.onCancel?.()
+  visible.value = false
+}
+
+const handleOk = async () => {
+  if (props.onBeforeOk) {
+    try {
+      okLoading.value = true
+      const flag = await props.onBeforeOk()
+      okLoading.value = false
+      if (flag) {
+        visible.value = false
+      }
+    } catch (error) {
+      console.error('error', error)
+      okLoading.value = false
+    }
+  } else {
+    props.onOk?.()
+    visible.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/drawer/src/type.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps, DrawerProps as ElDrawerProps } from 'element-plus'
+import type { CSSProperties, VNode } from 'vue'
+
+export interface DrawerProps extends Partial<ElDrawerProps> {
+  content?: string | (() => VNode)
+  footer?: boolean | (() => VNode)
+  okText?: string
+  cancelText?: string
+  okButtonProps?: Partial<ButtonProps>
+  cancelButtonProps?: Partial<ButtonProps>
+  style?: CSSProperties
+  onOk?: () => void
+  onBeforeOk?: () => Promise<boolean>
+  onCancel?: () => void
+}

package/packages/components/edit-table/src/edit-table.vue

@@ -1,11 +1,11 @@
 <template>
-  <el-form ref="formRef" :model="form" :class="b('edit-table')">
-    <el-table :data="form.tableData" border v-bind="attrs">
-      <el-table-column v-for="(column, index) in props.columns" :key="column.prop + index" :width="column.width"
+  <ElForm ref="formRef" :model="form" :class="b('edit-table')">
+    <ElTable :data="form.tableData" border v-bind="attrs">
+      <ElTableColumn v-for="(column, index) in props.columns" :key="column.prop + index" :width="column.width"
         v-bind="column.columnProps" :prop="column.prop" :label="column.label"
         :label-class-name="getLabelClassName(column)">
         <template #default="scope">
-          <el-form-item v-bind="column.formItemProps" :label="column.label"
+          <ElFormItem v-bind="column.formItemProps" :label="column.label"
             :prop="`tableData[${scope.$index}].${column.prop}`" :rules="getFormItemRules(column)">
             <template v-if="column.slotName">
               <slot :name="column.slotName" v-bind="scope"></slot>
@@ -14,11 +14,11 @@
             <component :is="COMP_MAP[column.type] || column.type" v-else v-bind="getComponentBindProps(column)"
               v-model="scope.row[column.prop]" class="w-full" :disabled="isDisabled(scope)">
             </component>
-          </el-form-item>
+          </ElFormItem>
         </template>
-      </el-table-column>
-    </el-table>
-  </el-form>
+      </ElTableColumn>
+    </ElTable>
+  </ElForm>
 </template>
 
 <script lang="ts" setup>
@@ -26,6 +26,7 @@ import type { FormInstance } from 'element-plus'
 import type { EditTableColumnItem, EditTableColumnItemType } from './type'
 import type { EditTableProps } from './type.ts'
 import * as El from 'element-plus'
+import { ElForm, ElFormItem, ElTable, ElTableColumn } from 'element-plus'
 import { computed, ref, useAttrs } from 'vue'
 import { useBemClass } from '../../../hooks'
 import InputSearch from '../../input-search'

package/packages/components/form/src/form.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-form ref="formRef" :class="getClass" v-bind="formProps" :model="props.modelValue">
+  <ElForm ref="formRef" :class="getClass" v-bind="formProps" :model="props.modelValue">
     <Grid class="w-full" :col-gap="12" v-bind="props.gridProps" :collapsed="collapsed">
       <template v-for="(item, index) in props.columns">
         <GridItem v-if="item.type === 'title'" :key="`title${index}`" :span="100">
-          <el-form-item label-width="0">
+          <ElFormItem label-width="0">
             <GiCard :title="typeof item.label === 'string' ? item.label : ''" :header-style="{ padding: 0 }"
               :body-style="{ display: 'none' }"></GiCard>
-          </el-form-item>
+          </ElFormItem>
         </GridItem>
 
         <template v-else>
@@ -15,8 +15,8 @@
               || item.gridItemProps?.span
               || props?.gridItemProps?.span
               ">
-            <el-form-item :key="item.field + index" :prop="item.field" :label="item.label"
-              :rules="getFormItemRules(item)" v-bind="item.formItemProps">
+            <ElFormItem :key="item.field + index" :prop="item.field" :label="item.label" :rules="getFormItemRules(item)"
+              v-bind="item.formItemProps">
               <template v-if="item?.labelRender" #label>
                 <component :is="item.labelRender"></component>
               </template>
@@ -38,18 +38,18 @@
                         </template>
                       </template>
                     </component>
-                    <el-text v-if="item.tip" :class="b('form-item__tip')" type="info" size="small">
+                    <ElText v-if="item.tip" :class="b('form-item__tip')" type="info" size="small">
                       {{ item.tip }}
-                    </el-text>
+                    </ElText>
                   </div>
                   <!-- 额外信息 -->
                   <div v-if="item.extra" :class="b('form-item__extra')">
                     <template v-if="typeof item.extra === 'string'">
-                      <el-text type="info" size="small">
+                      <ElText type="info" size="small">
                         {{
                           item.extra
                         }}
-                      </el-text>
+                      </ElText>
                     </template>
                     <template v-else-if="item.extra">
                       <component :is="item.extra"></component>
@@ -57,25 +57,25 @@
                   </div>
                 </div>
               </template>
-            </el-form-item>
+            </ElFormItem>
           </GridItem>
         </template>
       </template>
 
       <GridItem v-if="props.search" :suffix="props.search" :span="props?.gridItemProps?.span">
-        <el-space :class="b('form__search-btns')">
-          <el-button type="primary" @click="emit('search')">
+        <ElSpace :class="b('form__search-btns')">
+          <ElButton type="primary" @click="emit('search')">
             {{ searchText }}
-          </el-button>
-          <el-button @click="emit('reset')"> 重置 </el-button>
-          <el-button v-if="!props.hideFoldBtn" class="form__fold-btn" type="primary"
+          </ElButton>
+          <ElButton @click="emit('reset')"> 重置 </ElButton>
+          <ElButton v-if="!props.hideFoldBtn" class="form__fold-btn" type="primary"
             :icon="collapsed ? ArrowDown : ArrowUp" text size="small" @click="collapsed = !collapsed">
             {{ collapsed ? '展开' : '收起' }}
-          </el-button>
-        </el-space>
+          </ElButton>
+        </ElSpace>
       </GridItem>
     </Grid>
-  </el-form>
+  </ElForm>
 </template>
 
 <script lang="tsx" setup>
@@ -83,6 +83,7 @@ import type { FormInstance } from 'element-plus'
 import type { FormColumnItem, FormColumnType, FormProps } from './type'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import * as El from 'element-plus'
+import { ElButton, ElForm, ElFormItem, ElSpace, ElText } from 'element-plus'
 import {
   computed,
   getCurrentInstance,

package/packages/components/input-search/src/input-search.vue

@@ -1,30 +1,16 @@
 <template>
   <InputGroup :class="b('input-search')">
-    <el-input
-      v-model="model"
-      :disabled="props.disabled"
-      :readonly="!props.disabled"
-      :placeholder="props.placeholder"
-    >
-    </el-input>
-    <el-button
-      v-if="showButton"
-      :icon="Search"
-      :disabled="props.disabled"
-      @click="emit('search')"
-    ></el-button>
-    <el-button
-      v-if="showButton"
-      :icon="Close"
-      :disabled="props.disabled"
-      @click="emit('clear')"
-    ></el-button>
+    <ElInput v-model="model" :disabled="props.disabled" :readonly="!props.disabled" :placeholder="props.placeholder">
+    </ElInput>
+    <ElButton v-if="showButton" :icon="Search" :disabled="props.disabled" @click="emit('search')"></ElButton>
+    <ElButton v-if="showButton" :icon="Close" :disabled="props.disabled" @click="emit('clear')"></ElButton>
   </InputGroup>
 </template>
 
 <script setup lang="ts">
 import type { InputSearchProps } from './type'
 import { Close, Search } from '@element-plus/icons-vue'
+import { ElButton, ElInput } from 'element-plus'
 import { computed } from 'vue'
 import { useBemClass } from '../../../hooks'
 import InputGroup from '../../input-group/src/input-group.vue'

package/packages/components/page-layout/src/page-layout.vue

@@ -1,42 +1,32 @@
 <template>
-  <el-splitter :class="getClass">
-    <el-splitter-panel v-if="slots.left" v-model:size="size">
+  <ElSplitter :class="getClass">
+    <ElSplitterPanel v-if="slots.left" v-model:size="size">
       <div :class="b('page-layout__left')" :style="props.leftStyle">
         <slot name="left"></slot>
       </div>
-    </el-splitter-panel>
+    </ElSplitterPanel>
     <div v-if="slots.left && props.collapse" :class="b('page-layout__split')">
-      <SplitButton
-        :collapsed="Number(size) === 0"
-        @click="handleClick"
-      ></SplitButton>
+      <SplitButton :collapsed="Number(size) === 0" @click="handleClick"></SplitButton>
     </div>
-    <el-splitter-panel>
+    <ElSplitterPanel>
       <div :class="b('page-layout__right')">
-        <div
-          v-if="slots.header"
-          :class="b('page-layout__header')"
-          :style="props.headerStyle"
-        >
+        <div v-if="slots.header" :class="b('page-layout__header')" :style="props.headerStyle">
           <slot name="header"></slot>
         </div>
-        <div
-          v-if="slots.tool"
-          :class="b('page-layout__tool')"
-          :style="props.toolStyle"
-        >
+        <div v-if="slots.tool" :class="b('page-layout__tool')" :style="props.toolStyle">
           <slot name="tool"></slot>
         </div>
         <div :class="b('page-layout__body')" :style="props.bodyStyle">
           <slot></slot>
         </div>
       </div>
-    </el-splitter-panel>
-  </el-splitter>
+    </ElSplitterPanel>
+  </ElSplitter>
 </template>
 
 <script lang="ts" setup>
 import type { PageLayoutProps } from './type'
+import { ElSplitter, ElSplitterPanel } from 'element-plus'
 import { computed, ref, useSlots } from 'vue'
 import { useBemClass } from '../../../hooks'
 import SplitButton from './split-button.vue'
@@ -93,6 +83,7 @@ function handleClick() {
 @use '../../../styles/var.scss' as a;
 
 :deep(.el-splitter-bar__dragger-horizontal) {
+
   &::before,
   &::after {
     width: 1px;

package/packages/components/page-layout/src/split-button.vue

@@ -1,14 +1,15 @@
 <template>
   <div :class="getClass" @click="handleClick">
-    <el-icon :size="props.iconSize">
+    <ElIcon :size="props.iconSize">
       <ArrowRightBold v-if="collapsed" :size="iconSize" />
       <ArrowLeftBold v-else :size="iconSize" />
-    </el-icon>
+    </ElIcon>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
 import { computed } from 'vue'
 import { useBemClass } from '../../../hooks'
 

package/packages/components/table/src/TableColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table-column v-bind="columnProps">
+  <ElTableColumn v-bind="columnProps">
     <!-- 处理render函数 -->
     <template v-if="column.render" #default="scope">
       <template v-if="typeof column.render(scope) === 'string'">{{ column.render(scope) }}</template>
@@ -20,11 +20,12 @@
         </template>
       </TableColumn>
     </template>
-  </el-table-column>
+  </ElTableColumn>
 </template>
 
 <script lang="ts" setup>
 import type { TableColumnItem } from './type'
+import { ElTableColumn } from 'element-plus'
 import { computed } from 'vue'
 import TableColumn from './TableColumn.vue'
 

package/packages/components/table/src/table.vue

@@ -1,24 +1,24 @@
 <template>
   <div :class="b('table')">
-    <el-table v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
+    <ElTable v-bind="tableProps" ref="tableRef" :data="props.data as any[]">
       <TableColumn v-for="item in props.columns" :key="item.prop || item.label" :column="item">
         <!-- 将所有插槽传递给子组件 -->
         <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </TableColumn>
-    </el-table>
+    </ElTable>
 
-    <el-row justify="end" :class="b('table-pagination')">
-      <el-pagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
-        v-model:page-size="paginationProps.pageSize" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange" />
-    </el-row>
+    <ElRow justify="end" :class="b('table-pagination')">
+      <ElPagination v-bind="paginationProps" v-model:current-page="paginationProps.currentPage"
+        v-model:page-size="paginationProps.pageSize" />
+    </ElRow>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { TableProps } from './type'
+import { ElPagination, ElRow, ElTable } from 'element-plus'
 import { computed, useAttrs, useTemplateRef } from 'vue'
 import { useBemClass } from '../../../hooks'
 import TableColumn from './TableColumn.vue'
@@ -50,16 +50,6 @@ const paginationProps = computed(() => {
   }
 })
 
-function handleSizeChange(size: number) {
-  // @ts-ignore
-  props.pagination.pageSize = size
-}
-
-function handleCurrentChange(page: number) {
-  // @ts-ignore
-  props.pagination.currentPage = page
-}
-
 defineExpose({
   tableRef
 })

package/packages/components/tabs/src/tabs.vue

@@ -2,14 +2,14 @@
   <div :class="getClass">
     <div :class="b('tabs__default')">
       <slot>
-        <el-tabs v-model="model" :type="props.type" :stretch="props.stretch"
-          @tab-click="(p, e) => emits('tabClick', p, e)" @tab-change="emits('tabChange', $event as any)">
-          <el-tab-pane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
+        <ElTabs v-model="model" :type="props.type" :stretch="props.stretch"
+          @tab-click="(p, e) => emits('tab-click', p, e)" @tab-change="emits('tab-change', $event as any)">
+          <ElTabPane v-for="item in props.options" :key="item.name" :name="item.name" :disabled="item?.disabled">
             <template #label>
               <slot name="label" :data="item">{{ item.label }}</slot>
             </template>
-          </el-tab-pane>
-        </el-tabs>
+          </ElTabPane>
+        </ElTabs>
       </slot>
     </div>
     <div v-if="slots.extra" :class="b('tabs__extra')">
@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import type { TabsProps as ElTabsProps, TabsPaneContext } from 'element-plus'
 import type { TabsOptionItem, TabsProps } from './type.ts'
+import { ElTabPane, ElTabs } from 'element-plus'
 import { computed, useSlots } from 'vue'
 import { useBemClass } from '../../../hooks'
 
@@ -34,8 +35,8 @@ const props = withDefaults(defineProps<TabsProps>(), {
 })
 
 const emits = defineEmits<{
-  (e: 'tabClick', pane: TabsPaneContext, ev: Event): void
-  (e: 'tabChange', value: string): void
+  (e: 'tab-click', pane: TabsPaneContext, ev: Event): void
+  (e: 'tab-change', value: string): void
 }>()
 
 defineSlots<{

package/packages/components/tree-transfer/index.ts

@@ -0,0 +1,5 @@
+import TreeTransfer from './src/tree-transfer.vue'
+
+export type TreeTransferInstance = InstanceType<typeof TreeTransfer>
+export * from './src/type'
+export default TreeTransfer

package/packages/components/tree-transfer/src/tree-transfer.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="el-transfer">
+    <div class="el-transfer-panel">
+      <div class="el-transfer-panel__header" @click="handleLeftAllChecked">
+        <ElCheckbox class="hide-checkbox" :model-value="leftAllChecked">
+          {{ props.titles[0] }}<span>{{ `${leftObj.checkedKeys.length}/${leftObj.total}`
+          }}</span>
+        </ElCheckbox>
+      </div>
+      <div class="el-transfer-panel__body">
+        <ElScrollbar>
+          <ElTree ref="treeRef" :data="leftTreeData" default-expand-all show-checkbox v-bind="props.treeProps"
+            @check="handleCheck" />
+        </ElScrollbar>
+      </div>
+    </div>
+
+    <div class="el-transfer__buttons">
+      <ElSpace>
+        <ElButton type="primary" :disabled="!rightObj.checkedKeys.length" @click="handleMoveLeft">
+          <ElIcon>
+            <ArrowLeft />
+          </ElIcon>
+        </ElButton>
+        <ElButton type="primary" :disabled="!leftObj.checkedKeys.length" @click="handleMoveRight">
+          <ElIcon>
+            <ArrowRight />
+          </ElIcon>
+        </ElButton>
+      </ElSpace>
+    </div>
+
+    <div class="el-transfer-panel">
+      <div class="el-transfer-panel__header" @click="handleRightAllChecked">
+        <ElCheckbox :model-value="rightAllChecked">
+          {{ props.titles[1] }}<span>{{ `${rightObj.checkedKeys.length}/${rightObj.options.length}`
+          }}</span>
+        </ElCheckbox>
+      </div>
+      <div class="el-transfer-panel__body">
+        <ElScrollbar>
+          <ElCheckboxGroup v-if="rightObj.options.length" v-model="rightObj.checkedKeys"
+            class="el-transfer-panel__list">
+            <ElCheckbox v-for="(item, index) in rightObj.options" :key="index" :label="item.label" :value="item.value"
+              class="el-transfer-panel__item" />
+          </ElCheckboxGroup>
+          <ElEmpty v-else :image-size="60"></ElEmpty>
+        </ElScrollbar>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CheckboxOption, TreeInstance } from 'element-plus'
+import type { PropType } from 'vue'
+import type { TreeTransferProps } from './type'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+import { ElButton, ElCheckbox, ElCheckboxGroup, ElEmpty, ElIcon, ElScrollbar, ElSpace, ElTree } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import pkg from 'xe-utils'
+import { filterTree } from './utils'
+
+// 右边的列表keys
+const selectedKeys = defineModel('selectedKeys', { type: Array as PropType<string[]>, default: () => [] })
+
+const props = withDefaults(defineProps<TreeTransferProps>(), {
+  titles: () => ['列表', '列表'],
+  data: () => [],
+  treeProps: () => ({})
+})
+
+const { eachTree } = pkg
+
+const treeRef = ref<TreeInstance | null>(null)
+const nodeKey = computed(() => props.treeProps?.nodeKey || 'id')
+
+const leftObj = reactive({
+  checkedKeys: [] as string[],
+  total: 0,
+  options: [] as CheckboxOption[]
+})
+const rightObj = reactive({
+  checkedKeys: [] as string[],
+  options: [] as CheckboxOption[]
+})
+
+const leftAllChecked = computed(() => {
+  const arr: string[] = []
+  eachTree(props.data, (i) => {
+    if (i.children === undefined) {
+      arr.push(i[nodeKey.value])
+    }
+  })
+  return arr.every((i) => leftObj.checkedKeys.includes(i))
+})
+
+const getLeftTreeNodes = () => {
+  const arr: any[] = []
+  eachTree(props.data, (i) => {
+    if (i.children === undefined) {
+      arr.push(i)
+    }
+  })
+  return arr
+}
+
+function handleLeftAllChecked() {
+  if (leftAllChecked.value) {
+    leftObj.checkedKeys = []
+    leftObj.options = []
+    treeRef.value?.setCheckedKeys([])
+  } else {
+    const arr = getLeftTreeNodes()
+    leftObj.checkedKeys = arr.map((i) => i[nodeKey.value])
+    leftObj.options = arr.map((i) => ({ label: i.label, value: i[nodeKey.value] }))
+    treeRef.value?.setCheckedKeys(leftObj.checkedKeys)
+  }
+}
+
+const rightAllChecked = computed(() => rightObj.checkedKeys.length === rightObj.options.length && rightObj.options.length !== 0)
+function handleRightAllChecked() {
+  if (rightAllChecked.value) {
+    rightObj.checkedKeys = []
+  } else {
+    rightObj.checkedKeys = rightObj.options.map((i) => i.value as string)
+  }
+}
+
+const leftTreeData = computed(() => {
+  const treeData = JSON.parse(JSON.stringify(props.data))
+  const rightListKeys = rightObj.options.map((i) => i.value)
+  const data = filterTree(treeData, (i: any) => !rightListKeys.includes(i[nodeKey.value]))
+  return data
+})
+
+const handleCheck = (data: any, obj: any) => {
+  console.log(data, obj)
+  leftObj.checkedKeys = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => j[nodeKey.value])
+  leftObj.options = obj.checkedNodes.filter((i: any) => i?.children === undefined).map((j: any) => ({ label: j.label, value: j[nodeKey.value] }))
+  // leftObj.checkedKeys = obj.checkedNodes.map((i: any) => i[nodeKey.value])
+  // leftObj.options = obj.checkedNodes.map((j: any) => ({ label: j.label, value: j[nodeKey.value] }))
+}
+
+function getLeftTotal() {
+  const data: any[] = []
+  eachTree(props.data, (i) => {
+    if (i.children === undefined) {
+      data.push(i[props?.treeProps?.nodeKey || 'id'])
+    }
+  })
+  return data.length
+}
+
+const handleMoveLeft = () => {
+  if (rightObj.checkedKeys.length) {
+    leftObj.checkedKeys = []
+    leftObj.options = []
+    rightObj.options = rightObj.options.filter((i) => !rightObj.checkedKeys.includes(i.value as string))
+    rightObj.checkedKeys = []
+    selectedKeys.value = rightObj.options.map((i) => i.value as string)
+    treeRef.value?.setCheckedKeys([])
+  }
+}
+
+const handleMoveRight = () => {
+  rightObj.options = [...rightObj.options, ...leftObj.options]
+  leftObj.checkedKeys = []
+  leftObj.options = []
+  selectedKeys.value = rightObj.options.map((i) => i.value as string)
+}
+
+// 获取初始选中
+const setInitChecked = () => {
+  const arr: CheckboxOption[] = []
+  eachTree(props.data, (i) => {
+    if (selectedKeys.value.includes(i[nodeKey.value] as string)) {
+      arr.push({ label: i.label, value: i[nodeKey.value] as string })
+    }
+  })
+  rightObj.options = arr
+}
+
+onMounted(() => {
+  leftObj.total = getLeftTotal()
+  setInitChecked()
+})
+</script>
+
+<style lang="scss" scoped>
+.el-transfer-panel__list {
+  height: auto;
+}
+</style>

package/packages/components/tree-transfer/src/type.ts

@@ -0,0 +1,7 @@
+import type { TreeComponentProps } from 'element-plus'
+
+export interface TreeTransferProps {
+  titles?: [string, string]
+  data: any[]
+  treeProps?: Partial<TreeComponentProps>
+}

package/packages/components/tree-transfer/src/utils.ts

@@ -0,0 +1,23 @@
+import pkg from 'xe-utils'
+
+const { mapTree } = pkg
+
+/**
+ * @desc 过滤树
+ * @param { values } 数组
+ */
+type FilterTree = <T extends { children?: T[] }>(
+  array: T[],
+  iterate: (item: T, index?: number, items?: T[]) => boolean
+) => T[]
+
+export const filterTree: FilterTree = (values, fn) => {
+  const arr = values.filter(fn)
+  const data = mapTree(arr, (item) => {
+    if (item.children && item.children.length) {
+      item.children = item.children.filter(fn)
+    }
+    return item
+  })
+  return data
+}

package/packages/components.d.ts

@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export { }
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -11,6 +11,7 @@ declare module 'vue' {
     GiButton: typeof import('./components/button/src/button.vue')['default']
     GiCard: typeof import('./components/card/src/card.vue')['default']
     GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
+    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
     GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
     GiForm: typeof import('./components/form/src/form.vue')['default']
     GiGrid: typeof import('./components/grid/src/grid.vue')['default']
@@ -22,5 +23,6 @@ declare module 'vue' {
     GiTable: typeof import('./components/table/src/table.vue')['default']
     GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
     GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
+    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
   }
 }

package/packages/hooks/useTable.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { Ref } from 'vue'
 import { reactive, ref } from 'vue'
 
 interface Options<T, U> {
@@ -94,4 +94,4 @@ export function useTable<T extends U, U = T>(api: UseTableApi<T>, options: Optio
     /** 刷新 */
     refresh
   }
-}
+}

package/packages/index.ts

@@ -3,6 +3,7 @@ import type { App } from 'vue'
 import Button from './components/button'
 import Card from './components/card'
 import Dialog from './components/dialog'
+import Drawer from './components/drawer'
 import EditTable from './components/edit-table'
 import Form from './components/form'
 import GridItem from './components/grid/src/grid-item.vue'
@@ -12,9 +13,11 @@ import InputSearch from './components/input-search'
 import PageLayout from './components/page-layout'
 import Table from './components/table'
 import Tabs from './components/tabs'
+import TreeTransfer from './components/tree-transfer'
 import './styles/index.scss'
 
 export * from './components/dialog'
+export * from './components/drawer'
 export * from './components/edit-table'
 export * from './components/form'
 export * from './components/table'
@@ -25,6 +28,7 @@ export * from './utils'
 const components = {
   Button,
   Card,
+  Drawer,
   Tabs,
   InputGroup,
   InputSearch,
@@ -34,12 +38,14 @@ const components = {
   PageLayout,
   Dialog,
   EditTable,
-  Table
+  Table,
+  TreeTransfer
 }
 
 // 导出Gi前缀的组件并添加明确类型注解
 export const GiButton: typeof Button = Button
 export const GiCard: typeof Card = Card
+export const GiDrawer: typeof Drawer = Drawer
 export const GiTabs: typeof Tabs = Tabs
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch
@@ -50,6 +56,7 @@ export const GiPageLayout: typeof PageLayout = PageLayout
 export const GiDialog: typeof Dialog = Dialog
 export const GiEditTable: typeof EditTable = EditTable
 export const GiTable: typeof Table = Table
+export const GiTreeTransfer: typeof TreeTransfer = TreeTransfer
 
 function capitalizeWord(word: string) {
   // 检查输入是否为字符串且不为空

package/packages/styles/index.scss

@@ -9,6 +9,29 @@ body {
   --padding-y-small: 8px;
 }
 
+.el-table__body-wrapper tr td.el-table-fixed-column--left,
+.el-table__body-wrapper tr td.el-table-fixed-column--right,
+.el-table__body-wrapper tr th.el-table-fixed-column--left,
+.el-table__body-wrapper tr th.el-table-fixed-column--right,
+.el-table__footer-wrapper tr td.el-table-fixed-column--left,
+.el-table__footer-wrapper tr td.el-table-fixed-column--right,
+.el-table__footer-wrapper tr th.el-table-fixed-column--left,
+.el-table__footer-wrapper tr th.el-table-fixed-column--right,
+.el-table__header-wrapper tr td.el-table-fixed-column--left,
+.el-table__header-wrapper tr td.el-table-fixed-column--right,
+.el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table__header-wrapper tr th.el-table-fixed-column--right {
+  background: var(--el-bg-color);
+}
+
+.gi-table .el-table {
+  --el-table-header-bg-color: var(--el-fill-color-lighter);
+}
+
+.gi-table .el-table thead.is-group th.el-table__cell {
+  background: var(--el-fill-color-lighter);
+}
+
 .gi-card-title {
   .gi-card-header__title {
     padding-left: 8px;
@@ -28,12 +51,6 @@ body {
   }
 }
 
-.el-dialog__headerbtn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .gi-w-full {
   width: 100%;
 }
@@ -180,4 +197,27 @@ body {
   .el-dialog__footer {
     border-top: none;
   }
+}
+
+.el-drawer[role=dialog] {
+  --el-drawer-padding-primary: 16px;
+}
+
+.el-drawer {
+  .el-drawer__header {
+    height: 48px;
+    margin-bottom: 0;
+    padding-top: 0;
+    border-bottom: 1px solid var(--el-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .el-drawer__footer {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    border-top: 1px solid var(--el-border-color);
+  }
 }