refactor(demo): table demo use script setup (#3296)

* refactor: /@/ => @/

* refactor: table demo use script setup

* refactor: change /@/ to @/

* feat: add antdv qrcode demo

* style(qrcode): add margin bottom

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>

src/views/dashboard/analysis/components/GrowCard.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { CountTo } from '/@/components/CountTo/index';
+  import { CountTo } from '@/components/CountTo';
   import Icon from '@/components/Icon/Icon.vue';
   import { Tag, Card } from 'ant-design-vue';
   import { growCardList } from '../data';

src/views/dashboard/analysis/components/SalesProductPie.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   const props = defineProps({
     loading: Boolean,

src/views/dashboard/analysis/components/VisitAnalysis.vue

@@ -6,7 +6,7 @@
 </script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   defineProps({
     ...basicProps,

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

@@ -6,7 +6,7 @@
 </script>
 <script lang="ts" setup>
   import { onMounted, ref, Ref } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   defineProps({
     ...basicProps,

src/views/dashboard/analysis/components/VisitRadar.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   const props = defineProps({
     loading: Boolean,

src/views/dashboard/analysis/components/VisitSource.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   const props = defineProps({
     loading: Boolean,

src/views/dashboard/workbench/components/SaleRadar.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import { useECharts } from '@/hooks/web/useECharts';
 
   const props = defineProps({
     loading: Boolean,

src/views/dashboard/workbench/components/WorkbenchHeader.vue

@@ -25,8 +25,8 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import { Avatar } from 'ant-design-vue';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useUserStore } from '@/store/modules/user';
-  import headerImg from '/@/assets/images/header.jpg';
+  import headerImg from '@/assets/images/header.jpg';
 
   const userStore = useUserStore();
   const userinfo = computed(() => userStore.getUserInfo);

src/views/demo/comp/qrcode/index.vue

@@ -1,15 +1,15 @@
 <template>
   <PageWrapper title="二维码组件使用示例">
     <div class="flex flex-wrap">
-      <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="基础示例" :canExpan="true" class="text-center mb-6 w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" />
       </CollapseContainer>
 
-      <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" tag="img" />
       </CollapseContainer>
 
-      <CollapseContainer title="配置样式示例" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="配置样式示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode
           :value="qrCodeUrl"
           :options="{
@@ -18,11 +18,11 @@
         />
       </CollapseContainer>
 
-      <CollapseContainer title="本地logo示例" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="本地logo示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" :logo="LogoImg" />
       </CollapseContainer>
 
-      <CollapseContainer title="在线logo示例" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="在线logo示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode
           :value="qrCodeUrl"
           logo="https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png"
@@ -32,7 +32,7 @@
         />
       </CollapseContainer>
 
-      <CollapseContainer title="logo配置示例" class="text-center mb-6 w-1/4 mr-6">
+      <CollapseContainer title="logo配置示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode
           :value="qrCodeUrl"
           :logo="{
@@ -45,17 +45,17 @@
         />
       </CollapseContainer>
 
-      <CollapseContainer title="下载示例" class="text-center w-1/4 mr-6">
+      <CollapseContainer title="下载示例" class="text-center mb-6 w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
         <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
         <div class="msg">(在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题)</div>
       </CollapseContainer>
 
-      <CollapseContainer title="配置大小示例" class="text-center w-1/4 mr-6">
+      <CollapseContainer title="配置大小示例" class="text-center w-1/5 mr-6">
         <QrCode :value="qrCodeUrl" :width="300" />
       </CollapseContainer>
 
-      <CollapseContainer title="扩展绘制示例" class="text-center w-1/4 mr-6">
+      <CollapseContainer title="扩展绘制示例" class="text-center w-1/5 mr-6">
         <QrCode
           :value="qrCodeUrl"
           :width="200"
@@ -67,6 +67,14 @@
         <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
         <div class="msg">要进行扩展绘制则不能将tag设为img</div>
       </CollapseContainer>
+
+      <CollapseContainer title="Antdv QRCode" class="text-center w-1/5 mr-6">
+        <QRCode :value="qrCodeUrl" :size="200" />
+      </CollapseContainer>
+
+      <CollapseContainer title="Antdv QRCode 带icon" class="text-center w-1/5 mr-6">
+        <QRCode :value="qrCodeUrl" :size="200" :icon="LogoImg" />
+      </CollapseContainer>
     </div>
   </PageWrapper>
 </template>
@@ -77,6 +85,7 @@
   import { CollapseContainer } from '@/components/Container';
   import { PageWrapper } from '@/components/Page';
   import { type Nullable } from '@vben/types';
+  import { QRCode } from 'ant-design-vue';
 
   const qrCodeUrl = 'https://www.vvbin.cn';
   const qrRef = ref<Nullable<QrCodeActionType>>(null);

src/views/demo/table/AuthColumn.vue

@@ -56,9 +56,8 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
 
   import { demoListApi } from '/@/api/demo/table';
 
@@ -122,40 +121,30 @@
       width: 200,
     },
   ];
-  export default defineComponent({
+
-    components: { BasicTable, TableAction },
+  const [registerTable] = useTable({
-    setup() {
+    title: 'TableAction组件及固定列示例',
-      const [registerTable] = useTable({
+    api: demoListApi,
-        title: 'TableAction组件及固定列示例',
+    columns: columns,
-        api: demoListApi,
+    bordered: true,
-        columns: columns,
+    rowKey: 'id',
-        bordered: true,
+    rowSelection: {
-        rowKey: 'id',
+      type: 'checkbox',
-        rowSelection: {
+    },
-          type: 'checkbox',
+    actionColumn: {
-        },
+      width: 250,
-        actionColumn: {
+      title: 'Action',
-          width: 250,
+      dataIndex: 'action',
-          title: 'Action',
+      // slots: { customRender: 'action' },
-          dataIndex: 'action',
-          // slots: { customRender: 'action' },
-        },
-      });
-      function handleEdit(record: Recordable) {
-        console.log('点击了编辑', record);
-      }
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-      }
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-      }
-      return {
-        registerTable,
-        handleEdit,
-        handleDelete,
-        handleOpen,
-      };
     },
   });
+  function handleEdit(record: Recordable) {
+    console.log('点击了编辑', record);
+  }
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+  }
+  function handleOpen(record: Recordable) {
+    console.log('点击了启用', record);
+  }
 </script>

src/views/demo/table/Basic.vue

@@ -28,53 +28,38 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-  import { BasicTable, ColumnChangeParam } from '/@/components/Table';
+  import { BasicTable, ColumnChangeParam } from '@/components/Table';
   import { getBasicColumns, getBasicData } from './tableData';
 
-  export default defineComponent({
+  const canResize = ref(false);
-    components: { BasicTable },
+  const loading = ref(false);
-    setup() {
+  const striped = ref(true);
-      const canResize = ref(false);
+  const border = ref(true);
-      const loading = ref(false);
+  const pagination = ref<any>(false);
-      const striped = ref(true);
-      const border = ref(true);
-      const pagination = ref<any>(false);
-      function toggleCanResize() {
-        canResize.value = !canResize.value;
-      }
-      function toggleStriped() {
-        striped.value = !striped.value;
-      }
-      function toggleLoading() {
-        loading.value = true;
-        setTimeout(() => {
-          loading.value = false;
-          pagination.value = { pageSize: 20 };
-        }, 3000);
-      }
-      function toggleBorder() {
-        border.value = !border.value;
-      }
 
-      function handleColumnChange(data: ColumnChangeParam[]) {
+  const columns = getBasicColumns();
-        console.log('ColumnChanged', data);
+  const data = getBasicData();
-      }
+
-      return {
+  function toggleCanResize() {
-        columns: getBasicColumns(),
+    canResize.value = !canResize.value;
-        data: getBasicData(),
+  }
-        canResize,
+  function toggleStriped() {
-        loading,
+    striped.value = !striped.value;
-        striped,
+  }
-        border,
+  function toggleLoading() {
-        toggleStriped,
+    loading.value = true;
-        toggleCanResize,
+    setTimeout(() => {
-        toggleLoading,
+      loading.value = false;
-        toggleBorder,
+      pagination.value = { pageSize: 20 };
-        pagination,
+    }, 3000);
-        handleColumnChange,
+  }
-      };
+  function toggleBorder() {
-    },
+    border.value = !border.value;
-  });
+  }
+
+  function handleColumnChange(data: ColumnChangeParam[]) {
+    console.log('ColumnChanged', data);
+  }
 </script>

src/views/demo/table/CustomerCell.vue

@@ -27,11 +27,11 @@
     </BasicTable>
   </div>
 </template>
-<script lang="tsx">
+<script lang="tsx" setup>
-  import { defineComponent, h } from 'vue';
+  import { h } from 'vue';
-  import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn, TableImg } from '@/components/Table';
   import { Tag, Avatar } from 'ant-design-vue';
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
   const columns: BasicColumn[] = [
     {
@@ -91,21 +91,13 @@
       dataIndex: 'endTime',
     },
   ];
-  export default defineComponent({
-    components: { BasicTable, TableImg, Tag, Avatar },
-    setup() {
-      const [registerTable] = useTable({
-        title: '自定义列内容',
-        titleHelpMessage: '表格中所有头像、图片均为mock生成，仅用于演示图片占位',
-        api: demoListApi,
-        columns: columns,
-        bordered: true,
-        showTableSetting: true,
-      });
 
-      return {
+  const [registerTable] = useTable({
-        registerTable,
+    title: '自定义列内容',
-      };
+    titleHelpMessage: '表格中所有头像、图片均为mock生成，仅用于演示图片占位',
-    },
+    api: demoListApi,
+    columns: columns,
+    bordered: true,
+    showTableSetting: true,
   });
 </script>

src/views/demo/table/EditCellTable.vue

@@ -8,14 +8,14 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, h } from 'vue';
+  import { h } from 'vue';
-  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { BasicTable, useTable, BasicColumn } from '@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
+  import { optionsListApi } from '@/api/demo/select';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
+  import { treeOptionsListApi } from '@/api/demo/tree';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
   import { Progress } from 'ant-design-vue';
 
   const columns: BasicColumn[] = [
@@ -210,67 +210,56 @@
       width: 200,
     },
   ];
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
-      const [registerTable] = useTable({
-        title: '可编辑单元格示例',
-        api: demoListApi,
-        columns: columns,
-        showIndexColumn: false,
-        bordered: true,
-      });
 
-      const { createMessage } = useMessage();
+  const [registerTable] = useTable({
-
+    title: '可编辑单元格示例',
-      function handleEditEnd({ record, index, key, value }: Recordable) {
+    api: demoListApi,
-        console.log(record, index, key, value);
+    columns: columns,
-        return false;
+    showIndexColumn: false,
-      }
+    bordered: true,
-
-      // 模拟将指定数据保存
-      function feakSave({ value, key, id }) {
-        createMessage.loading({
-          content: `正在模拟保存${key}`,
-          key: '_save_fake_data',
-          duration: 0,
-        });
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            if (value === '') {
-              createMessage.error({
-                content: '保存失败：不能为空',
-                key: '_save_fake_data',
-                duration: 2,
-              });
-              resolve(false);
-            } else {
-              createMessage.success({
-                content: `记录${id}的${key}已保存`,
-                key: '_save_fake_data',
-                duration: 2,
-              });
-              resolve(true);
-            }
-          }, 2000);
-        });
-      }
-
-      async function beforeEditSubmit({ record, index, key, value }) {
-        console.log('单元格数据正在准备提交', { record, index, key, value });
-        return await feakSave({ id: record.id, key, value });
-      }
-
-      function handleEditCancel() {
-        console.log('cancel');
-      }
-
-      return {
-        registerTable,
-        handleEditEnd,
-        handleEditCancel,
-        beforeEditSubmit,
-      };
-    },
   });
+
+  const { createMessage } = useMessage();
+
+  function handleEditEnd({ record, index, key, value }: Recordable) {
+    console.log(record, index, key, value);
+    return false;
+  }
+
+  // 模拟将指定数据保存
+  function feakSave({ value, key, id }) {
+    createMessage.loading({
+      content: `正在模拟保存${key}`,
+      key: '_save_fake_data',
+      duration: 0,
+    });
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (value === '') {
+          createMessage.error({
+            content: '保存失败：不能为空',
+            key: '_save_fake_data',
+            duration: 2,
+          });
+          resolve(false);
+        } else {
+          createMessage.success({
+            content: `记录${id}的${key}已保存`,
+            key: '_save_fake_data',
+            duration: 2,
+          });
+          resolve(true);
+        }
+      }, 2000);
+    });
+  }
+
+  async function beforeEditSubmit({ record, index, key, value }) {
+    console.log('单元格数据正在准备提交', { record, index, key, value });
+    return await feakSave({ id: record.id, key, value });
+  }
+
+  function handleEditCancel() {
+    console.log('cancel');
+  }
 </script>

src/views/demo/table/EditRowTable.vue

@@ -9,8 +9,8 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import {
     BasicTable,
     useTable,
@@ -18,13 +18,13 @@
     BasicColumn,
     ActionItem,
     EditRecordRow,
-  } from '/@/components/Table';
+  } from '@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
+  import { optionsListApi } from '@/api/demo/select';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
+  import { treeOptionsListApi } from '@/api/demo/tree';
   import { cloneDeep } from 'lodash-es';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
 
   const columns: BasicColumn[] = [
     {
@@ -221,102 +221,91 @@
       width: 200,
     },
   ];
-  export default defineComponent({
-    components: { BasicTable, TableAction },
-    setup() {
-      const { createMessage: msg } = useMessage();
-      const currentEditKeyRef = ref('');
-      const [registerTable] = useTable({
-        title: '可编辑行示例',
-        titleHelpMessage: [
-          '本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
-        ],
-        api: demoListApi,
-        columns: columns,
-        showIndexColumn: false,
-        showTableSetting: true,
-        tableSetting: { fullScreen: true },
-        actionColumn: {
-          width: 160,
-          title: 'Action',
-          dataIndex: 'action',
-          // slots: { customRender: 'action' },
-        },
-      });
 
-      function handleEdit(record: EditRecordRow) {
+  const { createMessage: msg } = useMessage();
-        currentEditKeyRef.value = record.key;
+  const currentEditKeyRef = ref('');
-        record.onEdit?.(true);
+  const [registerTable] = useTable({
-      }
+    title: '可编辑行示例',
-
+    titleHelpMessage: [
-      function handleCancel(record: EditRecordRow) {
+      '本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
-        currentEditKeyRef.value = '';
+    ],
-        record.onEdit?.(false, false);
+    api: demoListApi,
-      }
+    columns: columns,
-
+    showIndexColumn: false,
-      async function handleSave(record: EditRecordRow) {
+    showTableSetting: true,
-        // 校验
+    tableSetting: { fullScreen: true },
-        msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
+    actionColumn: {
-        const valid = await record.onValid?.();
+      width: 160,
-        if (valid) {
+      title: 'Action',
-          try {
+      dataIndex: 'action',
-            const data = cloneDeep(record.editValueRefs);
+      // slots: { customRender: 'action' },
-            console.log(data);
-            //TODO 此处将数据提交给服务器保存
-            // ...
-            // 保存之后提交编辑状态
-            const pass = await record.onEdit?.(false, true);
-            if (pass) {
-              currentEditKeyRef.value = '';
-            }
-            msg.success({ content: '数据已保存', key: 'saving' });
-          } catch (error) {
-            msg.error({ content: '保存失败', key: 'saving' });
-          }
-        } else {
-          msg.error({ content: '请填写正确的数据', key: 'saving' });
-        }
-      }
-
-      function createActions(record: EditRecordRow): ActionItem[] {
-        if (!record.editable) {
-          return [
-            {
-              label: '编辑',
-              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
-              onClick: handleEdit.bind(null, record),
-            },
-          ];
-        }
-        return [
-          {
-            label: '保存',
-            onClick: handleSave.bind(null, record),
-          },
-          {
-            label: '取消',
-            popConfirm: {
-              title: '是否取消编辑',
-              confirm: handleCancel.bind(null, record),
-            },
-          },
-        ];
-      }
-
-      function onEditChange({ column, value, record }) {
-        // 本例
-        if (column.dataIndex === 'id') {
-          record.editValueRefs.name4.value = `${value}`;
-        }
-        console.log(column, value, record);
-      }
-
-      return {
-        registerTable,
-        handleEdit,
-        createActions,
-        onEditChange,
-      };
     },
   });
+
+  function handleEdit(record: EditRecordRow) {
+    currentEditKeyRef.value = record.key;
+    record.onEdit?.(true);
+  }
+
+  function handleCancel(record: EditRecordRow) {
+    currentEditKeyRef.value = '';
+    record.onEdit?.(false, false);
+  }
+
+  async function handleSave(record: EditRecordRow) {
+    // 校验
+    msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
+    const valid = await record.onValid?.();
+    if (valid) {
+      try {
+        const data = cloneDeep(record.editValueRefs);
+        console.log(data);
+        //TODO 此处将数据提交给服务器保存
+        // ...
+        // 保存之后提交编辑状态
+        const pass = await record.onEdit?.(false, true);
+        if (pass) {
+          currentEditKeyRef.value = '';
+        }
+        msg.success({ content: '数据已保存', key: 'saving' });
+      } catch (error) {
+        msg.error({ content: '保存失败', key: 'saving' });
+      }
+    } else {
+      msg.error({ content: '请填写正确的数据', key: 'saving' });
+    }
+  }
+
+  function createActions(record: EditRecordRow): ActionItem[] {
+    if (!record.editable) {
+      return [
+        {
+          label: '编辑',
+          disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
+          onClick: handleEdit.bind(null, record),
+        },
+      ];
+    }
+    return [
+      {
+        label: '保存',
+        onClick: handleSave.bind(null, record),
+      },
+      {
+        label: '取消',
+        popConfirm: {
+          title: '是否取消编辑',
+          confirm: handleCancel.bind(null, record),
+        },
+      },
+    ];
+  }
+
+  function onEditChange({ column, value, record }) {
+    // 本例
+    if (column.dataIndex === 'id') {
+      record.editValueRefs.name4.value = `${value}`;
+    }
+    console.log(column, value, record);
+  }
 </script>

src/views/demo/table/ExpandTable.vue

@@ -33,45 +33,33 @@
     </BasicTable>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '@/components/Page';
-  import { PageWrapper } from '/@/components/Page';
   import { getBasicColumns } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const [registerTable] = useTable({
-    components: { BasicTable, TableAction, PageWrapper },
+    api: demoListApi,
-    setup() {
+    title: '可展开表格演示',
-      const [registerTable] = useTable({
+    titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
-        api: demoListApi,
+    columns: getBasicColumns(),
-        title: '可展开表格演示',
+    rowKey: 'id',
-        titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
+    canResize: false,
-        columns: getBasicColumns(),
+    expandRowByClick: true,
-        rowKey: 'id',
+    actionColumn: {
-        canResize: false,
+      width: 160,
-        expandRowByClick: true,
+      title: 'Action',
-        actionColumn: {
+      dataIndex: 'action',
-          width: 160,
+      fixed: 'right',
-          title: 'Action',
+      // slots: { customRender: 'action' },
-          dataIndex: 'action',
-          fixed: 'right',
-          // slots: { customRender: 'action' },
-        },
-      });
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-      }
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-      }
-
-      return {
-        registerTable,
-        handleDelete,
-        handleOpen,
-      };
     },
   });
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+  }
+  function handleOpen(record: Recordable) {
+    console.log('点击了启用', record);
+  }
 </script>

src/views/demo/table/FetchTable.vue

@@ -8,37 +8,24 @@
     </BasicTable>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns } from './tableData';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const [registerTable, { reload }] = useTable({
-    components: { BasicTable, PageWrapper },
+    title: '远程加载示例',
-    setup() {
+    api: demoListApi,
-      const [registerTable, { reload }] = useTable({
+    columns: getBasicColumns(),
-        title: '远程加载示例',
+    pagination: { pageSize: 10 },
-        api: demoListApi,
-        columns: getBasicColumns(),
-        pagination: { pageSize: 10 },
-      });
-      function handleReloadCurrent() {
-        reload();
-      }
-
-      function handleReload() {
-        reload({
-          page: 1,
-        });
-      }
-      return {
-        registerTable,
-        handleReloadCurrent,
-        handleReload,
-      };
-    },
   });
+  function handleReloadCurrent() {
+    reload();
+  }
+
+  function handleReload() {
+    reload({ page: 1 });
+  }
 </script>

src/views/demo/table/FixedColumn.vue

@@ -26,11 +26,10 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
   const columns: BasicColumn[] = [
     {
@@ -64,33 +63,23 @@
       width: 200,
     },
   ];
-  export default defineComponent({
+
-    components: { BasicTable, TableAction },
+  const [registerTable] = useTable({
-    setup() {
+    title: 'TableAction组件及固定列示例',
-      const [registerTable] = useTable({
+    api: demoListApi,
-        title: 'TableAction组件及固定列示例',
+    columns: columns,
-        api: demoListApi,
+    rowSelection: { type: 'radio' },
-        columns: columns,
+    bordered: true,
-        rowSelection: { type: 'radio' },
+    actionColumn: {
-        bordered: true,
+      width: 160,
-        actionColumn: {
+      title: 'Action',
-          width: 160,
+      dataIndex: 'action',
-          title: 'Action',
-          dataIndex: 'action',
-          // slots: { customRender: 'action' },
-        },
-      });
-      function handleDelete(record: Recordable) {
-        console.log('点击了删除', record);
-      }
-      function handleOpen(record: Recordable) {
-        console.log('点击了启用', record);
-      }
-      return {
-        registerTable,
-        handleDelete,
-        handleOpen,
-      };
     },
   });
+  function handleDelete(record: Recordable) {
+    console.log('点击了删除', record);
+  }
+  function handleOpen(record: Recordable) {
+    console.log('点击了启用', record);
+  }
 </script>

src/views/demo/table/FixedHeight.vue

@@ -19,29 +19,19 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getCustomHeaderColumns } from './tableData';
   import { FormOutlined } from '@ant-design/icons-vue';
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
-  import { BasicHelp } from '/@/components/Basic';
+  import { BasicHelp } from '@/components/Basic';
-  import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
+  import HeaderCell from '@/components/Table/src/components/HeaderCell.vue';
 
-  export default defineComponent({
+  const [registerTable] = useTable({
-    components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
+    title: '定高/头部自定义',
-    setup() {
+    api: demoListApi,
-      const [registerTable] = useTable({
+    columns: getCustomHeaderColumns(),
-        title: '定高/头部自定义',
+    canResize: false,
-        api: demoListApi,
+    scroll: { y: 100 },
-        columns: getCustomHeaderColumns(),
-        canResize: false,
-        scroll: { y: 100 },
-      });
-
-      return {
-        registerTable,
-      };
-    },
   });
 </script>

src/views/demo/table/FooterTable.vue

@@ -3,48 +3,38 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  function handleSummary(tableData: Recordable[]) {
-    components: { BasicTable },
+    const totalNo = tableData.reduce((prev, next) => {
-    setup() {
+      prev += next.no;
-      function handleSummary(tableData: Recordable[]) {
+      return prev;
-        const totalNo = tableData.reduce((prev, next) => {
+    }, 0);
-          prev += next.no;
+    return [
-          return prev;
+      {
-        }, 0);
+        _row: '合计',
-        return [
+        _index: '平均值',
-          {
+        no: totalNo,
-            _row: '合计',
+      },
-            _index: '平均值',
+      {
-            no: totalNo,
+        _row: '合计',
-          },
+        _index: '平均值',
-          {
+        no: totalNo,
-            _row: '合计',
+      },
-            _index: '平均值',
+    ];
-            no: totalNo,
+  }
-          },
+  const [registerTable] = useTable({
-        ];
+    title: '表尾行合计示例',
-      }
+    api: demoListApi,
-      const [registerTable] = useTable({
+    rowSelection: { type: 'checkbox' },
-        title: '表尾行合计示例',
+    columns: getBasicColumns(),
-        api: demoListApi,
+    showSummary: true,
-        rowSelection: { type: 'checkbox' },
+    summaryFunc: handleSummary,
-        columns: getBasicColumns(),
+    scroll: { x: 2000 },
-        showSummary: true,
+    canResize: false,
-        summaryFunc: handleSummary,
-        scroll: { x: 2000 },
-        canResize: false,
-      });
-
-      return {
-        registerTable,
-      };
-    },
   });
 </script>

src/views/demo/table/FormTable.vue

@@ -2,7 +2,7 @@
   <BasicTable @register="registerTable">
     <template #form-custom> custom-slot </template>
     <template #headerTop>
-      <a-alert type="info" show-icon>
+      <Alert type="info" show-icon>
         <template #message>
           <template v-if="checkedKeys.length > 0">
             <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
@@ -12,72 +12,60 @@
             <span>未选中任何项目</span>
           </template>
         </template>
-      </a-alert>
+      </Alert>
     </template>
     <template #toolbar>
       <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
     </template>
   </BasicTable>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, useTable } from '@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
   import { Alert } from 'ant-design-vue';
+  import type { Key } from 'ant-design-vue/lib/table/interface';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const checkedKeys = ref<Key[]>([]);
-    components: { BasicTable, AAlert: Alert },
+  const [registerTable, { getForm }] = useTable({
-    setup() {
+    title: '开启搜索区域',
-      const checkedKeys = ref<Array<string | number>>([]);
+    api: demoListApi,
-      const [registerTable, { getForm }] = useTable({
+    columns: getBasicColumns(),
-        title: '开启搜索区域',
+    useSearchForm: true,
-        api: demoListApi,
+    formConfig: getFormConfig(),
-        columns: getBasicColumns(),
+    showTableSetting: true,
-        useSearchForm: true,
+    tableSetting: { fullScreen: true },
-        formConfig: getFormConfig(),
+    showIndexColumn: false,
-        showTableSetting: true,
+    rowKey: 'id',
-        tableSetting: { fullScreen: true },
+    rowSelection: {
-        showIndexColumn: false,
+      type: 'checkbox',
-        rowKey: 'id',
+      selectedRowKeys: checkedKeys.value,
-        rowSelection: {
+      onSelect: onSelect,
-          type: 'checkbox',
+      onSelectAll: onSelectAll,
-          selectedRowKeys: checkedKeys,
-          onSelect: onSelect,
-          onSelectAll: onSelectAll,
-        },
-      });
-
-      function getFormValues() {
-        console.log(getForm().getFieldsValue());
-      }
-
-      function onSelect(record, selected) {
-        if (selected) {
-          checkedKeys.value = [...checkedKeys.value, record.id];
-        } else {
-          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
-        }
-      }
-      function onSelectAll(selected, selectedRows, changeRows) {
-        const changeIds = changeRows.map((item) => item.id);
-        if (selected) {
-          checkedKeys.value = [...checkedKeys.value, ...changeIds];
-        } else {
-          checkedKeys.value = checkedKeys.value.filter((id) => {
-            return !changeIds.includes(id);
-          });
-        }
-      }
-
-      return {
-        registerTable,
-        getFormValues,
-        checkedKeys,
-        onSelect,
-        onSelectAll,
-      };
     },
   });
+
+  function getFormValues() {
+    console.log(getForm().getFieldsValue());
+  }
+
+  function onSelect(record, selected) {
+    if (selected) {
+      checkedKeys.value = [...checkedKeys.value, record.id];
+    } else {
+      checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
+    }
+  }
+  function onSelectAll(selected, selectedRows, changeRows) {
+    const changeIds = changeRows.map((item) => item.id);
+    if (selected) {
+      checkedKeys.value = [...checkedKeys.value, ...changeIds];
+    } else {
+      checkedKeys.value = checkedKeys.value.filter((id) => {
+        return !changeIds.includes(id);
+      });
+    }
+  }
 </script>

src/views/demo/table/MergeHeader.vue

@@ -3,26 +3,16 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getMergeHeaderColumns } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const [registerTable] = useTable({
-    components: { BasicTable },
+    title: '合并单元格',
-    setup() {
+    bordered: true,
-      const [registerTable] = useTable({
+    api: demoListApi,
-        title: '合并单元格',
+    columns: getMergeHeaderColumns(),
-        bordered: true,
-        api: demoListApi,
-        columns: getMergeHeaderColumns(),
-      });
-
-      return {
-        registerTable,
-      };
-    },
   });
 </script>

src/views/demo/table/MultipleHeader.vue

@@ -3,25 +3,15 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getMultipleHeaderColumns } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const [registerTable] = useTable({
-    components: { BasicTable },
+    title: '多级表头示例',
-    setup() {
+    api: demoListApi,
-      const [registerTable] = useTable({
+    columns: getMultipleHeaderColumns(),
-        title: '多级表头示例',
-        api: demoListApi,
-        columns: getMultipleHeaderColumns(),
-      });
-
-      return {
-        registerTable,
-      };
-    },
   });
 </script>

src/views/demo/table/RefTable.vue

@@ -21,119 +21,98 @@
       title="RefTable示例"
       titleHelpMessage="使用Ref调用表格内方法"
       ref="tableRef"
-      :api="api"
+      :api="demoListApi"
       :columns="columns"
       rowKey="id"
       :rowSelection="{ type: 'checkbox' }"
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
-  import { BasicTable, TableActionType } from '/@/components/Table';
+  import { BasicTable, TableActionType } from '@/components/Table';
   import { getBasicColumns, getBasicShortColumns } from './tableData';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
   import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
+  const tableRef = ref<Nullable<TableActionType>>(null);
-    components: { BasicTable },
+  const { createMessage } = useMessage();
-    setup() {
-      const tableRef = ref<Nullable<TableActionType>>(null);
-      const { createMessage } = useMessage();
 
-      function getTableAction() {
+  const columns = getBasicColumns();
-        const tableAction = unref(tableRef);
-        if (!tableAction) {
-          throw new Error('tableAction is null');
-        }
-        return tableAction;
-      }
-      function changeLoading() {
-        getTableAction().setLoading(true);
-        setTimeout(() => {
-          getTableAction().setLoading(false);
-        }, 1000);
-      }
-      function changeColumns() {
-        getTableAction().setProps({
-          columns: getBasicShortColumns(),
-          rowSelection: {
-            type: 'checkbox',
-          },
-          showIndexColumn: true,
-        });
-      }
-      function reloadTable() {
-        getTableAction().setProps({
-          columns: getBasicColumns(),
-          rowSelection: {
-            type: 'checkbox',
-          },
-          showIndexColumn: true,
-        });
 
-        getTableAction().reload({
+  function getTableAction() {
-          page: 1,
+    const tableAction = unref(tableRef);
-        });
+    if (!tableAction) {
-      }
+      throw new Error('tableAction is null');
-      function getColumn() {
+    }
-        createMessage.info('请在控制台查看！');
+    return tableAction;
-        console.log(getTableAction().getColumns());
+  }
-      }
+  function changeLoading() {
+    getTableAction().setLoading(true);
+    setTimeout(() => {
+      getTableAction().setLoading(false);
+    }, 1000);
+  }
+  function changeColumns() {
+    getTableAction().setProps({
+      columns: getBasicShortColumns(),
+      rowSelection: {
+        type: 'checkbox',
+      },
+      showIndexColumn: true,
+    });
+  }
+  function reloadTable() {
+    getTableAction().setProps({
+      columns: getBasicColumns(),
+      rowSelection: {
+        type: 'checkbox',
+      },
+      showIndexColumn: true,
+    });
 
-      function getTableData() {
+    getTableAction().reload({
-        createMessage.info('请在控制台查看！');
+      page: 1,
-        console.log(getTableAction().getDataSource());
+    });
-      }
+  }
-      function getTableRawData() {
+  function getColumn() {
-        createMessage.info('请在控制台查看！');
+    createMessage.info('请在控制台查看！');
-        console.log(getTableAction().getRawDataSource());
+    console.log(getTableAction().getColumns());
-      }
+  }
 
-      function getPagination() {
+  function getTableData() {
-        createMessage.info('请在控制台查看！');
+    createMessage.info('请在控制台查看！');
-        console.log(getTableAction().getPaginationRef());
+    console.log(getTableAction().getDataSource());
-      }
+  }
+  function getTableRawData() {
+    createMessage.info('请在控制台查看！');
+    console.log(getTableAction().getRawDataSource());
+  }
 
-      function setPaginationInfo() {
+  function getPagination() {
-        getTableAction().setPagination({
+    createMessage.info('请在控制台查看！');
-          current: 2,
+    console.log(getTableAction().getPaginationRef());
-        });
+  }
-        getTableAction().reload();
-      }
-      function getSelectRowList() {
-        createMessage.info('请在控制台查看！');
-        console.log(getTableAction().getSelectRows());
-      }
-      function getSelectRowKeyList() {
-        createMessage.info('请在控制台查看！');
-        console.log(getTableAction().getSelectRowKeys());
-      }
-      function setSelectedRowKeyList() {
-        getTableAction().setSelectedRowKeys(['0', '1', '2']);
-      }
-      function clearSelect() {
-        getTableAction().clearSelectedRowKeys();
-      }
 
-      return {
+  function setPaginationInfo() {
-        tableRef,
+    getTableAction().setPagination({
-        api: demoListApi,
+      current: 2,
-        columns: getBasicColumns(),
+    });
-        changeLoading,
+    getTableAction().reload();
-        changeColumns,
+  }
-        reloadTable,
+  function getSelectRowList() {
-        getColumn,
+    createMessage.info('请在控制台查看！');
-        getTableData,
+    console.log(getTableAction().getSelectRows());
-        getTableRawData,
+  }
-        getPagination,
+  function getSelectRowKeyList() {
-        setPaginationInfo,
+    createMessage.info('请在控制台查看！');
-        getSelectRowList,
+    console.log(getTableAction().getSelectRowKeys());
-        getSelectRowKeyList,
+  }
-        setSelectedRowKeyList,
+  function setSelectedRowKeyList() {
-        clearSelect,
+    getTableAction().setSelectedRowKeys(['0', '1', '2']);
-      };
+  }
-    },
+  function clearSelect() {
-  });
+    getTableAction().clearSelectedRowKeys();
+  }
 </script>

src/views/demo/table/ResizeParentHeightTable.vue

@@ -22,58 +22,46 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const [registerTable] = useTable({
-    components: { BasicTable },
+    api: demoListApi,
-    setup(_) {
+    columns: getBasicColumns(),
-      const [registerTable] = useTable({
+    useSearchForm: false,
-        api: demoListApi,
+    formConfig: getFormConfig(),
-        columns: getBasicColumns(),
+    showTableSetting: false,
-        useSearchForm: false,
+    tableSetting: { fullScreen: true },
-        formConfig: getFormConfig(),
+    showIndexColumn: false,
-        showTableSetting: false,
+    isCanResizeParent: true,
-        tableSetting: { fullScreen: true },
+    rowKey: 'id',
-        showIndexColumn: false,
+  });
-        isCanResizeParent: true,
-        rowKey: 'id',
-      });
 
-      const [registerTable1] = useTable({
+  const [registerTable1] = useTable({
-        api: demoListApi,
+    api: demoListApi,
-        columns: getBasicColumns(),
+    columns: getBasicColumns(),
-        formConfig: getFormConfig(),
+    formConfig: getFormConfig(),
-        showTableSetting: false,
+    showTableSetting: false,
-        tableSetting: { fullScreen: true },
+    tableSetting: { fullScreen: true },
-        showIndexColumn: false,
+    showIndexColumn: false,
-        isCanResizeParent: true,
+    isCanResizeParent: true,
-        useSearchForm: false,
+    useSearchForm: false,
-        rowKey: 'id',
+    rowKey: 'id',
-      });
+  });
 
-      const [registerTable2] = useTable({
+  const [registerTable2] = useTable({
-        api: demoListApi,
+    api: demoListApi,
-        columns: getBasicColumns(),
+    columns: getBasicColumns(),
-        formConfig: getFormConfig(),
+    formConfig: getFormConfig(),
-        showTableSetting: false,
+    showTableSetting: false,
-        tableSetting: { fullScreen: true },
+    tableSetting: { fullScreen: true },
-        showIndexColumn: false,
+    showIndexColumn: false,
-        isCanResizeParent: true,
+    isCanResizeParent: true,
-        useSearchForm: false,
+    useSearchForm: false,
-        pagination: false,
+    pagination: false,
-        rowKey: 'id',
+    rowKey: 'id',
-      });
-
-      return {
-        registerTable,
-        registerTable1,
-        registerTable2,
-      };
-    },
   });
 </script>

src/views/demo/table/TreeTable.vue

@@ -8,34 +8,27 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '@/components/Table';
-  import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns, getTreeTableData } from './tableData';
 
-  export default defineComponent({
+  const [register, { expandAll, collapseAll }] = useTable({
-    components: { BasicTable },
+    title: '树形表格',
-    setup() {
+    isTreeTable: true,
-      const [register, { expandAll, collapseAll }] = useTable({
+    rowSelection: {
-        title: '树形表格',
+      type: 'checkbox',
-        isTreeTable: true,
+      getCheckboxProps(record: Recordable) {
-        rowSelection: {
+        // Demo: 第一行（id为0）的选择框禁用
-          type: 'checkbox',
+        if (record.id === '0') {
-          getCheckboxProps(record: Recordable) {
+          return { disabled: true };
-            // Demo: 第一行（id为0）的选择框禁用
+        } else {
-            if (record.id === '0') {
+          return { disabled: false };
-              return { disabled: true };
+        }
-            } else {
+      },
-              return { disabled: false };
-            }
-          },
-        },
-        titleHelpMessage: '树形组件不能和序列号列同时存在',
-        columns: getBasicColumns(),
-        dataSource: getTreeTableData(),
-        rowKey: 'id',
-      });
-      return { register, expandAll, collapseAll };
     },
+    titleHelpMessage: '树形组件不能和序列号列同时存在',
+    columns: getBasicColumns(),
+    dataSource: getTreeTableData(),
+    rowKey: 'id',
   });
 </script>

src/views/demo/table/UseTable.vue

@@ -19,141 +19,118 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
+  import { BasicTable, ColumnChangeParam, useTable } from '@/components/Table';
-  import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
   import { getBasicColumns, getBasicShortColumns } from './tableData';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
+  const { createMessage } = useMessage();
-    components: { BasicTable },
+  function onChange() {
-    setup() {
+    console.log('onChange', arguments);
-      const { createMessage } = useMessage();
+  }
-      function onChange() {
+  const [
-        console.log('onChange', arguments);
+    registerTable,
-      }
+    {
-      const [
+      setLoading,
-        registerTable,
+      setProps,
-        {
+      getColumns,
-          setLoading,
+      getDataSource,
-          setProps,
+      getRawDataSource,
-          getColumns,
+      reload,
-          getDataSource,
+      getPaginationRef,
-          getRawDataSource,
+      setPagination,
-          reload,
+      getSelectRows,
-          getPaginationRef,
+      getSelectRowKeys,
-          setPagination,
+      setSelectedRowKeys,
-          getSelectRows,
+      clearSelectedRowKeys,
-          getSelectRowKeys,
+    },
-          setSelectedRowKeys,
+  ] = useTable({
-          clearSelectedRowKeys,
+    canResize: true,
-        },
+    title: 'useTable示例',
-      ] = useTable({
+    titleHelpMessage: '使用useTable调用表格内方法',
-        canResize: true,
+    api: demoListApi,
-        title: 'useTable示例',
+    columns: getBasicColumns(),
-        titleHelpMessage: '使用useTable调用表格内方法',
+    defSort: {
-        api: demoListApi,
+      field: 'name',
-        columns: getBasicColumns(),
+      order: 'ascend',
-        defSort: {
+    },
-          field: 'name',
+    rowKey: 'id',
-          order: 'ascend',
+    showTableSetting: true,
-        },
+    onChange,
-        rowKey: 'id',
+    rowSelection: {
-        showTableSetting: true,
+      type: 'checkbox',
-        onChange,
+    },
-        rowSelection: {
+    onColumnsChange: (data: ColumnChangeParam[]) => {
-          type: 'checkbox',
+      console.log('ColumnsChanged', data);
-        },
-        onColumnsChange: (data: ColumnChangeParam[]) => {
-          console.log('ColumnsChanged', data);
-        },
-      });
-
-      function changeLoading() {
-        setLoading(true);
-        setTimeout(() => {
-          setLoading(false);
-        }, 1000);
-      }
-      function changeColumns() {
-        setProps({
-          columns: getBasicShortColumns(),
-          rowSelection: {
-            type: 'checkbox',
-          },
-          showIndexColumn: true,
-        });
-      }
-      function reloadTable() {
-        setProps({
-          columns: getBasicColumns(),
-          rowSelection: {
-            type: 'checkbox',
-          },
-          showIndexColumn: true,
-        });
-        reload({
-          page: 1,
-        });
-      }
-      function getColumn() {
-        createMessage.info('请在控制台查看！');
-        console.log(getColumns());
-      }
-
-      function getTableData() {
-        createMessage.info('请在控制台查看！');
-        console.log(getDataSource());
-      }
-
-      function getTableRawData() {
-        createMessage.info('请在控制台查看！');
-        console.log(getRawDataSource());
-      }
-
-      function getPagination() {
-        createMessage.info('请在控制台查看！');
-        console.log(getPaginationRef());
-      }
-
-      function setPaginationInfo() {
-        setPagination({
-          current: 2,
-        });
-        reload();
-      }
-      function getSelectRowList() {
-        createMessage.info('请在控制台查看！');
-        console.log(getSelectRows());
-      }
-      function getSelectRowKeyList() {
-        createMessage.info('请在控制台查看！');
-        console.log(getSelectRowKeys());
-      }
-      function setSelectedRowKeyList() {
-        setSelectedRowKeys(['0', '1', '2']);
-      }
-      function clearSelect() {
-        clearSelectedRowKeys();
-      }
-
-      return {
-        registerTable,
-        changeLoading,
-        changeColumns,
-        reloadTable,
-        getColumn,
-        getTableData,
-        getTableRawData,
-        getPagination,
-        setPaginationInfo,
-        getSelectRowList,
-        getSelectRowKeyList,
-        setSelectedRowKeyList,
-        clearSelect,
-        onChange,
-      };
     },
   });
+
+  function changeLoading() {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }
+  function changeColumns() {
+    setProps({
+      columns: getBasicShortColumns(),
+      rowSelection: {
+        type: 'checkbox',
+      },
+      showIndexColumn: true,
+    });
+  }
+  function reloadTable() {
+    setProps({
+      columns: getBasicColumns(),
+      rowSelection: {
+        type: 'checkbox',
+      },
+      showIndexColumn: true,
+    });
+    reload({
+      page: 1,
+    });
+  }
+  function getColumn() {
+    createMessage.info('请在控制台查看！');
+    console.log(getColumns());
+  }
+
+  function getTableData() {
+    createMessage.info('请在控制台查看！');
+    console.log(getDataSource());
+  }
+
+  function getTableRawData() {
+    createMessage.info('请在控制台查看！');
+    console.log(getRawDataSource());
+  }
+
+  function getPagination() {
+    createMessage.info('请在控制台查看！');
+    console.log(getPaginationRef());
+  }
+
+  function setPaginationInfo() {
+    setPagination({
+      current: 2,
+    });
+    reload();
+  }
+  function getSelectRowList() {
+    createMessage.info('请在控制台查看！');
+    console.log(getSelectRows());
+  }
+  function getSelectRowKeyList() {
+    createMessage.info('请在控制台查看！');
+    console.log(getSelectRowKeys());
+  }
+  function setSelectedRowKeyList() {
+    setSelectedRowKeys(['0', '1', '2']);
+  }
+  function clearSelect() {
+    clearSelectedRowKeys();
+  }
 </script>

src/views/demo/table/VxeTable.vue

@@ -14,12 +14,12 @@
 </template>
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { ActionItem, TableAction } from '/@/components/Table';
+  import { ActionItem, TableAction } from '@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
   import { vxeTableColumns, vxeTableFormSchema } from './tableData';
-  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@/components/VxeTable';
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
   const { createMessage } = useMessage();
 

src/views/demo/table/tableData.tsx

@@ -1,7 +1,6 @@
-import { optionsListApi } from '/@/api/demo/select';
+import { optionsListApi } from '@/api/demo/select';
-import { FormProps, FormSchema } from '/@/components/Table';
+import { FormProps, FormSchema, BasicColumn } from '@/components/Table';
-import { BasicColumn } from '/@/components/Table/src/types/table';
+import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
-import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
 import { ref } from 'vue';
 import { Input } from 'ant-design-vue';
 

src/views/demo/tree/ActionTree.vue

@@ -27,120 +27,96 @@
     <BasicTree :treeData="treeData" title="函数操作" ref="treeRef" :checkable="true" />
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, unref } from 'vue';
+  import { ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+  import { BasicTree, TreeActionType } from '@/components/Tree/index';
   import { treeData } from './data';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
   import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
+  const treeRef = ref<Nullable<TreeActionType>>(null);
-    components: { BasicTree, PageWrapper },
+  const { createMessage } = useMessage();
-    setup() {
-      const treeRef = ref<Nullable<TreeActionType>>(null);
-      const { createMessage } = useMessage();
 
-      function getTree() {
+  function getTree() {
-        const tree = unref(treeRef);
+    const tree = unref(treeRef);
-        if (!tree) {
+    if (!tree) {
-          throw new Error('tree is null!');
+      throw new Error('tree is null!');
-        }
+    }
-        return tree;
+    return tree;
-      }
+  }
 
-      function handleLevel(level: number) {
+  function handleLevel(level: number) {
-        getTree().filterByLevel(level);
+    getTree().filterByLevel(level);
-      }
+  }
 
-      function handleSetCheckData() {
+  function handleSetCheckData() {
-        getTree().setCheckedKeys(['0-0']);
+    getTree().setCheckedKeys(['0-0']);
-      }
+  }
 
-      function handleGetCheckData() {
+  function handleGetCheckData() {
-        const keys = getTree().getCheckedKeys();
+    const keys = getTree().getCheckedKeys();
-        createMessage.success(JSON.stringify(keys));
+    createMessage.success(JSON.stringify(keys));
-      }
+  }
 
-      function handleSetSelectData() {
+  function handleSetSelectData() {
-        getTree().setSelectedKeys(['0-0']);
+    getTree().setSelectedKeys(['0-0']);
-      }
+  }
 
-      function handleGetSelectData() {
+  function handleGetSelectData() {
-        const keys = getTree().getSelectedKeys();
+    const keys = getTree().getSelectedKeys();
-        createMessage.success(JSON.stringify(keys));
+    createMessage.success(JSON.stringify(keys));
-      }
+  }
 
-      function handleGetSelectNode() {
+  function handleGetSelectNode() {
-        const keys = getTree().getSelectedKeys();
+    const keys = getTree().getSelectedKeys();
-        const node = getTree().getSelectedNode(keys[0]);
+    const node = getTree().getSelectedNode(keys[0]);
-        createMessage.success(node !== null ? JSON.stringify(node) : null);
+    createMessage.success(node !== null ? JSON.stringify(node) : null);
-      }
+  }
 
-      function handleSetExpandData() {
+  function handleSetExpandData() {
-        getTree().setExpandedKeys(['0-0']);
+    getTree().setExpandedKeys(['0-0']);
-      }
+  }
 
-      function handleGetExpandData() {
+  function handleGetExpandData() {
-        const keys = getTree().getExpandedKeys();
+    const keys = getTree().getExpandedKeys();
-        createMessage.success(JSON.stringify(keys));
+    createMessage.success(JSON.stringify(keys));
-      }
+  }
 
-      function checkAll(checkAll: boolean) {
+  function checkAll(checkAll: boolean) {
-        getTree().checkAll(checkAll);
+    getTree().checkAll(checkAll);
-      }
+  }
 
-      function expandAll(checkAll: boolean) {
+  function expandAll(checkAll: boolean) {
-        getTree().expandAll(checkAll);
+    getTree().expandAll(checkAll);
-      }
+  }
 
-      function appendNodeByKey(parentKey: string | null = null) {
+  function appendNodeByKey(parentKey: string | null = null) {
-        getTree().insertNodeByKey({
+    getTree().insertNodeByKey({
-          parentKey: parentKey,
+      parentKey: parentKey,
-          node: {
+      node: {
-            title: '新增节点',
+        title: '新增节点',
-            key: '2-2-2',
+        key: '2-2-2',
-          },
+      },
-          // 往后插入
+      // 往后插入
-          push: 'push',
+      push: 'push',
-          // 往前插入
+      // 往前插入
-          // push:'unshift'
+      // push:'unshift'
-        });
+    });
-      }
+  }
 
-      function deleteNodeByKey(key: string) {
+  function deleteNodeByKey(key: string) {
-        getTree().deleteNodeByKey(key);
+    getTree().deleteNodeByKey(key);
-      }
+  }
 
-      function updateNodeByKey(key: string) {
+  function updateNodeByKey(key: string) {
-        getTree().updateNodeByKey(key, {
+    getTree().updateNodeByKey(key, {
-          title: 'parent2-new',
+      title: 'parent2-new',
-        });
+    });
-      }
+  }
 
-      function handleGetTreeData() {
+  function handleGetTreeData() {
-        const treeDataRef = getTree().getTreeData();
+    const treeDataRef = getTree().getTreeData();
-        createMessage.success(JSON.stringify(treeDataRef.value));
+    createMessage.success(JSON.stringify(treeDataRef.value));
-      }
+  }
-
-      return {
-        treeData,
-        treeRef,
-        handleLevel,
-        handleSetCheckData,
-        handleGetCheckData,
-        handleSetSelectData,
-        handleGetSelectData,
-        handleSetExpandData,
-        handleGetExpandData,
-        handleGetSelectNode,
-        appendNodeByKey,
-        deleteNodeByKey,
-        updateNodeByKey,
-        checkAll,
-        expandAll,
-        handleGetTreeData,
-      };
-    },
-  });
 </script>

src/views/demo/tree/EditTree.vue

@@ -50,76 +50,70 @@
     </Row>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, h } from 'vue';
+  import { h } from 'vue';
   import { Row, Col } from 'ant-design-vue';
-  import { BasicTree, TreeActionItem, ContextMenuItem } from '/@/components/Tree/index';
+  import { BasicTree, TreeActionItem, ContextMenuItem } from '@/components/Tree';
   import { treeData, treeData2, treeData3 } from './data';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
 
   import { EventDataNode } from 'ant-design-vue/es/vc-tree/interface';
 
-  export default defineComponent({
+  function handlePlus(node: any) {
-    components: { BasicTree, PageWrapper, Row, Col },
+    console.log(node);
-    setup() {
+  }
-      function handlePlus(node: any) {
-        console.log(node);
-      }
 
-      function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
+  function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
-        const menu = [
+    const menu = [
-          {
+      {
-            label: '新增',
+        label: '新增',
-            handler: () => {
+        handler: () => {
-              console.log('点击了新增', node);
+          console.log('点击了新增', node);
-            },
+        },
-            icon: 'bi:plus',
+        icon: 'bi:plus',
+      },
+      {
+        label: '删除',
+        handler: () => {
+          console.log('点击了删除', node);
+        },
+        icon: 'bx:bxs-folder-open',
+      },
+    ];
+    return new Promise((resolve) => {
+      resolve(menu);
+    });
+  }
+  const actionList: TreeActionItem[] = [
+    {
+      // show:()=>boolean;
+      render: (node) => {
+        return h(PlusOutlined, {
+          class: 'ml-2',
+          onClick: () => {
+            handlePlus(node);
           },
-          {
-            label: '删除',
-            handler: () => {
-              console.log('点击了删除', node);
-            },
-            icon: 'bx:bxs-folder-open',
-          },
-        ];
-        return new Promise((resolve) => {
-          resolve(menu);
         });
-      }
+      },
-      const actionList: TreeActionItem[] = [
-        {
-          // show:()=>boolean;
-          render: (node) => {
-            return h(PlusOutlined, {
-              class: 'ml-2',
-              onClick: () => {
-                handlePlus(node);
-              },
-            });
-          },
-        },
-        {
-          render: () => {
-            return h(DeleteOutlined);
-          },
-        },
-      ];
-
-      function createIcon({ level }) {
-        if (level === 1) {
-          return 'ion:git-compare-outline';
-        }
-        if (level === 2) {
-          return 'ion:home';
-        }
-        if (level === 3) {
-          return 'ion:airplane';
-        }
-        return '';
-      }
-      return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
     },
-  });
+    {
+      render: () => {
+        return h(DeleteOutlined);
+      },
+    },
+  ];
+
+  function createIcon({ level }) {
+    if (level === 1) {
+      return 'ion:git-compare-outline';
+    }
+    if (level === 2) {
+      return 'ion:home';
+    }
+    if (level === 3) {
+      return 'ion:airplane';
+    }
+    return '';
+  }
 </script>

src/views/demo/tree/data.ts

@@ -1,4 +1,4 @@
-import { TreeItem } from '/@/components/Tree/index';
+import { TreeItem } from '@/components/Tree';
 
 export const treeData: TreeItem[] = [
   {

src/views/demo/tree/index.vue

@@ -57,12 +57,12 @@
 </template>
 <script lang="ts" setup>
   import { nextTick, ref, unref } from 'vue';
-  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
   import { treeData } from './data';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
   import { Card, Row, Col, Spin } from 'ant-design-vue';
   import { cloneDeep, uniq } from 'lodash-es';
-  import { isArray } from '/@/utils/is';
+  import { isArray } from '@/utils/is';
   import { type Nullable } from '@vben/types';
   import { SmileTwoTone, CarryOutOutlined } from '@ant-design/icons-vue';
 

src/views/sys/about/index.vue

@@ -17,9 +17,9 @@
 <script lang="ts" setup>
   import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '@/components/Page';
-  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+  import { Description, DescItem, useDescription } from '@/components/Description';
-  import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
+  import { GITHUB_URL, SITE_URL, DOC_URL } from '@/settings/siteSetting';
 
   const { pkg, lastBuildTime } = __APP_INFO__;
 

src/views/sys/error-log/DetailModal.vue

@@ -6,9 +6,9 @@
 <script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { ErrorLogInfo } from '/#/store';
-  import { BasicModal } from '/@/components/Modal/index';
+  import { BasicModal } from '@/components/Modal';
-  import { Description, useDescription } from '/@/components/Description/index';
+  import { Description, useDescription } from '@/components/Description';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { getDescSchema } from './data';
 
   defineProps({

src/views/sys/error-log/data.tsx

@@ -1,7 +1,7 @@
 import { Tag } from 'ant-design-vue';
-import { BasicColumn } from '/@/components/Table/index';
+import { BasicColumn } from '@/components/Table';
-import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
+import { ErrorTypeEnum } from '@/enums/exceptionEnum';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 const { t } = useI18n();
 

src/views/sys/error-log/index.vue

@@ -36,12 +36,12 @@
   import type { ErrorLogInfo } from '/#/store';
   import { watch, ref, nextTick } from 'vue';
   import DetailModal from './DetailModal.vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { useModal } from '/@/components/Modal';
+  import { useModal } from '@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
-  import { useErrorLogStore } from '/@/store/modules/errorLog';
+  import { useErrorLogStore } from '@/store/modules/errorLog';
-  import { fireErrorApi } from '/@/api/demo/error';
+  import { fireErrorApi } from '@/api/demo/error';
   import { getColumns } from './data';
   import { cloneDeep } from 'lodash-es';
 

src/views/sys/exception/Exception.vue

@@ -2,14 +2,14 @@
   import type { PropType } from 'vue';
   import { Result, Button } from 'ant-design-vue';
   import { defineComponent, ref, computed, unref } from 'vue';
-  import { ExceptionEnum } from '/@/enums/exceptionEnum';
+  import { ExceptionEnum } from '@/enums/exceptionEnum';
-  import notDataSvg from '/@/assets/svg/no-data.svg';
+  import notDataSvg from '@/assets/svg/no-data.svg';
-  import netWorkSvg from '/@/assets/svg/net-error.svg';
+  import netWorkSvg from '@/assets/svg/net-error.svg';
   import { useRoute } from 'vue-router';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
-  import { useGo, useRedo } from '/@/hooks/web/usePage';
+  import { useGo, useRedo } from '@/hooks/web/usePage';
-  import { PageEnum } from '/@/enums/pageEnum';
+  import { PageEnum } from '@/enums/pageEnum';
 
   interface MapValue {
     title: string;

src/views/sys/iframe/index.vue

@@ -15,9 +15,9 @@
   import { ref, unref, computed } from 'vue';
   import { Spin } from 'ant-design-vue';
   import { useWindowSizeFn } from '@vben/hooks';
-  import { propTypes } from '/@/utils/propTypes';
+  import { propTypes } from '@/utils/propTypes';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
-  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+  import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
 
   defineProps({
     frameSrc: propTypes.string.def(''),

src/views/sys/lock/LockPage.vue

@@ -79,13 +79,13 @@
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
   import { Input } from 'ant-design-vue';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useUserStore } from '@/store/modules/user';
-  import { useLockStore } from '/@/store/modules/lock';
+  import { useLockStore } from '@/store/modules/lock';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useNow } from './useNow';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   import { LockOutlined } from '@ant-design/icons-vue';
-  import headerImg from '/@/assets/images/header.jpg';
+  import headerImg from '@/assets/images/header.jpg';
 
   const InputPassword = Input.Password;
 

src/views/sys/lock/index.vue

@@ -6,7 +6,7 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import LockPage from './LockPage.vue';
-  import { useLockStore } from '/@/store/modules/lock';
+  import { useLockStore } from '@/store/modules/lock';
 
   const lockStore = useLockStore();
   const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);

src/views/sys/lock/useNow.ts

@@ -1,4 +1,4 @@
-import { dateUtil } from '/@/utils/dateUtil';
+import { dateUtil } from '@/utils/dateUtil';
 import { reactive, toRefs } from 'vue';
 import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
 

src/views/sys/login/ForgetPasswordForm.vue

@@ -36,8 +36,8 @@
   import { reactive, ref, computed, unref } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Form, Input, Button } from 'ant-design-vue';
-  import { CountdownInput } from '/@/components/CountDown';
+  import { CountdownInput } from '@/components/CountDown';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
 
   const FormItem = Form.Item;

src/views/sys/login/Login.vue

@@ -49,16 +49,16 @@
 </template>
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
+  import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '@/components/Application';
   import LoginForm from './LoginForm.vue';
   import ForgetPasswordForm from './ForgetPasswordForm.vue';
   import RegisterForm from './RegisterForm.vue';
   import MobileForm from './MobileForm.vue';
   import QrCodeForm from './QrCodeForm.vue';
-  import { useGlobSetting } from '/@/hooks/setting';
+  import { useGlobSetting } from '@/hooks/setting';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
-  import { useLocaleStore } from '/@/store/modules/locale';
+  import { useLocaleStore } from '@/store/modules/locale';
 
   defineProps({
     sessionTimeout: {

src/views/sys/login/LoginForm.vue

@@ -94,12 +94,12 @@
   } from '@ant-design/icons-vue';
   import LoginFormTitle from './LoginFormTitle.vue';
 
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '@/hooks/web/useMessage';
 
-  import { useUserStore } from '/@/store/modules/user';
+  import { useUserStore } from '@/store/modules/user';
   import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
   //import { onKeyStroke } from '@vueuse/core';
 
   const ACol = Col;

src/views/sys/login/LoginFormTitle.vue

@@ -5,7 +5,7 @@
 </template>
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { LoginStateEnum, useLoginState } from './useLogin';
 
   const { t } = useI18n();

src/views/sys/login/MobileForm.vue

@@ -33,9 +33,9 @@
 <script lang="ts" setup>
   import { reactive, ref, computed, unref } from 'vue';
   import { Form, Input, Button } from 'ant-design-vue';
-  import { CountdownInput } from '/@/components/CountDown';
+  import { CountdownInput } from '@/components/CountDown';
   import LoginFormTitle from './LoginFormTitle.vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
   const FormItem = Form.Item;

src/views/sys/login/QrCodeForm.vue

@@ -18,8 +18,8 @@
   import { computed, unref } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Button, Divider } from 'ant-design-vue';
-  import { QrCode } from '/@/components/Qrcode/index';
+  import { QrCode } from '@/components/Qrcode';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useLoginState, LoginStateEnum } from './useLogin';
 
   const qrCodeUrl = 'https://vben.vvbin.cn/login';

src/views/sys/login/RegisterForm.vue

@@ -69,9 +69,9 @@
   import { reactive, ref, unref, computed } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Form, Input, Button, Checkbox } from 'ant-design-vue';
-  import { StrengthMeter } from '/@/components/StrengthMeter';
+  import { StrengthMeter } from '@/components/StrengthMeter';
-  import { CountdownInput } from '/@/components/CountDown';
+  import { CountdownInput } from '@/components/CountDown';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useI18n } from '@/hooks/web/useI18n';
   import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
   const FormItem = Form.Item;

src/views/sys/login/SessionTimeoutLogin.vue

@@ -8,11 +8,11 @@
 <script lang="ts" setup>
   import { onBeforeUnmount, onMounted, ref } from 'vue';
   import Login from './Login.vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useDesign } from '@/hooks/web/useDesign';
-  import { useUserStore } from '/@/store/modules/user';
+  import { useUserStore } from '@/store/modules/user';
-  import { usePermissionStore } from '/@/store/modules/permission';
+  import { usePermissionStore } from '@/store/modules/permission';
-  import { useAppStore } from '/@/store/modules/app';
+  import { useAppStore } from '@/store/modules/app';
-  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { PermissionModeEnum } from '@/enums/appEnum';
   import { type Nullable } from '@vben/types';
 
   const { prefixCls } = useDesign('st-login');

src/views/sys/login/useLogin.ts

@@ -5,7 +5,7 @@ import type {
   Rule as ValidationRule,
 } from 'ant-design-vue/lib/form/interface';
 import { ref, computed, unref, Ref } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { useI18n } from '@/hooks/web/useI18n';
 
 export enum LoginStateEnum {
   LOGIN,