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 headerImg from '/@/assets/images/header.jpg';
+  import { useUserStore } from '@/store/modules/user';
+  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">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+<script lang="ts" setup>
+  import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
 
   import { demoListApi } from '/@/api/demo/table';
 
@@ -122,9 +121,7 @@
       width: 200,
     },
   ];
-  export default defineComponent({
-    components: { BasicTable, TableAction },
-    setup() {
+
   const [registerTable] = useTable({
     title: 'TableAction组件及固定列示例',
     api: demoListApi,
@@ -150,12 +147,4 @@
   function handleOpen(record: Recordable) {
     console.log('点击了启用', record);
   }
-      return {
-        registerTable,
-        handleEdit,
-        handleDelete,
-        handleOpen,
-      };
-    },
-  });
 </script>

src/views/demo/table/Basic.vue

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

src/views/demo/table/CustomerCell.vue

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

src/views/demo/table/EditCellTable.vue

@@ -8,14 +8,14 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
-  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { BasicTable, useTable, BasicColumn } from '@/components/Table';
+  import { optionsListApi } from '@/api/demo/select';
 
-  import { demoListApi } from '/@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { demoListApi } from '@/api/demo/table';
+  import { treeOptionsListApi } from '@/api/demo/tree';
+  import { useMessage } from '@/hooks/web/useMessage';
   import { Progress } from 'ant-design-vue';
 
   const columns: BasicColumn[] = [
@@ -210,9 +210,7 @@
       width: 200,
     },
   ];
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
+
   const [registerTable] = useTable({
     title: '可编辑单元格示例',
     api: demoListApi,
@@ -264,13 +262,4 @@
   function handleEditCancel() {
     console.log('cancel');
   }
-
-      return {
-        registerTable,
-        handleEditEnd,
-        handleEditCancel,
-        beforeEditSubmit,
-      };
-    },
-  });
 </script>

src/views/demo/table/EditRowTable.vue

@@ -9,8 +9,8 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import {
     BasicTable,
     useTable,
@@ -18,13 +18,13 @@
     BasicColumn,
     ActionItem,
     EditRecordRow,
-  } from '/@/components/Table';
-  import { optionsListApi } from '/@/api/demo/select';
+  } from '@/components/Table';
+  import { optionsListApi } from '@/api/demo/select';
 
-  import { demoListApi } from '/@/api/demo/table';
-  import { treeOptionsListApi } from '/@/api/demo/tree';
+  import { demoListApi } from '@/api/demo/table';
+  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,9 +221,7 @@
       width: 200,
     },
   ];
-  export default defineComponent({
-    components: { BasicTable, TableAction },
-    setup() {
+
   const { createMessage: msg } = useMessage();
   const currentEditKeyRef = ref('');
   const [registerTable] = useTable({
@@ -310,13 +308,4 @@
     }
     console.log(column, value, record);
   }
-
-      return {
-        registerTable,
-        handleEdit,
-        createActions,
-        onEditChange,
-      };
-    },
-  });
 </script>

src/views/demo/table/ExpandTable.vue

@@ -33,17 +33,13 @@
     </BasicTable>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { PageWrapper } from '/@/components/Page';
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
   import { getBasicColumns } from './tableData';
 
-  import { demoListApi } from '/@/api/demo/table';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
-    components: { BasicTable, TableAction, PageWrapper },
-    setup() {
   const [registerTable] = useTable({
     api: demoListApi,
     title: '可展开表格演示',
@@ -66,12 +62,4 @@
   function handleOpen(record: Recordable) {
     console.log('点击了启用', record);
   }
-
-      return {
-        registerTable,
-        handleDelete,
-        handleOpen,
-      };
-    },
-  });
 </script>

src/views/demo/table/FetchTable.vue

@@ -8,17 +8,13 @@
     </BasicTable>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  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({
-    components: { BasicTable, PageWrapper },
-    setup() {
   const [registerTable, { reload }] = useTable({
     title: '远程加载示例',
     api: demoListApi,
@@ -30,15 +26,6 @@
   }
 
   function handleReload() {
-        reload({
-          page: 1,
-        });
+    reload({ page: 1 });
   }
-      return {
-        registerTable,
-        handleReloadCurrent,
-        handleReload,
-      };
-    },
-  });
 </script>

src/views/demo/table/FixedColumn.vue

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

src/views/demo/table/FixedHeight.vue

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

src/views/demo/table/FooterTable.vue

@@ -3,16 +3,12 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  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({
-    components: { BasicTable },
-    setup() {
   function handleSummary(tableData: Recordable[]) {
     const totalNo = tableData.reduce((prev, next) => {
       prev += next.no;
@@ -41,10 +37,4 @@
     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,25 +12,23 @@
             <span>未选中任何项目</span>
           </template>
         </template>
-      </a-alert>
+      </Alert>
     </template>
     <template #toolbar>
       <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
     </template>
   </BasicTable>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  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({
-    components: { BasicTable, AAlert: Alert },
-    setup() {
-      const checkedKeys = ref<Array<string | number>>([]);
+  const checkedKeys = ref<Key[]>([]);
   const [registerTable, { getForm }] = useTable({
     title: '开启搜索区域',
     api: demoListApi,
@@ -43,7 +41,7 @@
     rowKey: 'id',
     rowSelection: {
       type: 'checkbox',
-          selectedRowKeys: checkedKeys,
+      selectedRowKeys: checkedKeys.value,
       onSelect: onSelect,
       onSelectAll: onSelectAll,
     },
@@ -70,14 +68,4 @@
       });
     }
   }
-
-      return {
-        registerTable,
-        getFormValues,
-        checkedKeys,
-        onSelect,
-        onSelectAll,
-      };
-    },
-  });
 </script>

src/views/demo/table/MergeHeader.vue

@@ -3,26 +3,16 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  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({
-    components: { BasicTable },
-    setup() {
   const [registerTable] = useTable({
     title: '合并单元格',
     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">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  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({
-    components: { BasicTable },
-    setup() {
   const [registerTable] = useTable({
     title: '多级表头示例',
     api: demoListApi,
     columns: getMultipleHeaderColumns(),
   });
-
-      return {
-        registerTable,
-      };
-    },
-  });
 </script>

src/views/demo/table/RefTable.vue

@@ -21,27 +21,26 @@
       title="RefTable示例"
       titleHelpMessage="使用Ref调用表格内方法"
       ref="tableRef"
-      :api="api"
+      :api="demoListApi"
       :columns="columns"
       rowKey="id"
       :rowSelection="{ type: 'checkbox' }"
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { BasicTable, TableActionType } from '/@/components/Table';
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicTable, TableActionType } from '@/components/Table';
   import { getBasicColumns, getBasicShortColumns } from './tableData';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { demoListApi } from '/@/api/demo/table';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { demoListApi } from '@/api/demo/table';
   import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
   const tableRef = ref<Nullable<TableActionType>>(null);
   const { createMessage } = useMessage();
 
+  const columns = getBasicColumns();
+
   function getTableAction() {
     const tableAction = unref(tableRef);
     if (!tableAction) {
@@ -116,24 +115,4 @@
   function clearSelect() {
     getTableAction().clearSelectedRowKeys();
   }
-
-      return {
-        tableRef,
-        api: demoListApi,
-        columns: getBasicColumns(),
-        changeLoading,
-        changeColumns,
-        reloadTable,
-        getColumn,
-        getTableData,
-        getTableRawData,
-        getPagination,
-        setPaginationInfo,
-        getSelectRowList,
-        getSelectRowKeyList,
-        setSelectedRowKeyList,
-        clearSelect,
-      };
-    },
-  });
 </script>

src/views/demo/table/ResizeParentHeightTable.vue

@@ -22,16 +22,12 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  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({
-    components: { BasicTable },
-    setup(_) {
   const [registerTable] = useTable({
     api: demoListApi,
     columns: getBasicColumns(),
@@ -68,12 +64,4 @@
     pagination: false,
     rowKey: 'id',
   });
-
-      return {
-        registerTable,
-        registerTable1,
-        registerTable2,
-      };
-    },
-  });
 </script>

src/views/demo/table/TreeTable.vue

@@ -8,14 +8,10 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  import { BasicTable, useTable } from '@/components/Table';
   import { getBasicColumns, getTreeTableData } from './tableData';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
   const [register, { expandAll, collapseAll }] = useTable({
     title: '树形表格',
     isTreeTable: true,
@@ -35,7 +31,4 @@
     dataSource: getTreeTableData(),
     rowKey: 'id',
   });
-      return { register, expandAll, collapseAll };
-    },
-  });
 </script>

src/views/demo/table/UseTable.vue

@@ -19,16 +19,12 @@
     <BasicTable @register="registerTable" />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicTable, ColumnChangeParam, useTable } from '/@/components/Table';
+<script lang="ts" setup>
+  import { BasicTable, ColumnChangeParam, useTable } from '@/components/Table';
   import { getBasicColumns, getBasicShortColumns } from './tableData';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { demoListApi } from '/@/api/demo/table';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { demoListApi } from '@/api/demo/table';
 
-  export default defineComponent({
-    components: { BasicTable },
-    setup() {
   const { createMessage } = useMessage();
   function onChange() {
     console.log('onChange', arguments);
@@ -137,23 +133,4 @@
   function clearSelect() {
     clearSelectedRowKeys();
   }
-
-      return {
-        registerTable,
-        changeLoading,
-        changeColumns,
-        reloadTable,
-        getColumn,
-        getTableData,
-        getTableRawData,
-        getPagination,
-        setPaginationInfo,
-        getSelectRowList,
-        getSelectRowKeyList,
-        setSelectedRowKeyList,
-        clearSelect,
-        onChange,
-      };
-    },
-  });
 </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 { PageWrapper } from '/@/components/Page';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ActionItem, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
   import { vxeTableColumns, vxeTableFormSchema } from './tableData';
-  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
-  import { demoListApi } from '/@/api/demo/table';
+  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@/components/VxeTable';
+  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 { FormProps, FormSchema } from '/@/components/Table';
-import { BasicColumn } from '/@/components/Table/src/types/table';
-import { VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';
+import { optionsListApi } from '@/api/demo/select';
+import { FormProps, FormSchema, BasicColumn } from '@/components/Table';
+import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
 import { ref } from 'vue';
 import { Input } from 'ant-design-vue';
 

src/views/demo/tree/ActionTree.vue

@@ -27,17 +27,14 @@
     <BasicTree :treeData="treeData" title="函数操作" ref="treeRef" :checkable="true" />
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicTree, TreeActionType } from '@/components/Tree/index';
   import { treeData } from './data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { PageWrapper } from '@/components/Page';
   import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
-    components: { BasicTree, PageWrapper },
-    setup() {
   const treeRef = ref<Nullable<TreeActionType>>(null);
   const { createMessage } = useMessage();
 
@@ -122,25 +119,4 @@
     const treeDataRef = getTree().getTreeData();
     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,19 +50,16 @@
     </Row>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
+<script lang="ts" setup>
+  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({
-    components: { BasicTree, PageWrapper, Row, Col },
-    setup() {
   function handlePlus(node: any) {
     console.log(node);
   }
@@ -119,7 +116,4 @@
     }
     return '';
   }
-      return { treeData, treeData2, treeData3, actionList, getRightMenuList, createIcon };
-    },
-  });
 </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 { Description, DescItem, useDescription } from '/@/components/Description/index';
-  import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
+  import { PageWrapper } from '@/components/Page';
+  import { Description, DescItem, useDescription } from '@/components/Description';
+  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 { Description, useDescription } from '/@/components/Description/index';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { BasicModal } from '@/components/Modal';
+  import { Description, useDescription } from '@/components/Description';
+  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 { ErrorTypeEnum } from '/@/enums/exceptionEnum';
-import { useI18n } from '/@/hooks/web/useI18n';
+import { BasicColumn } from '@/components/Table';
+import { ErrorTypeEnum } from '@/enums/exceptionEnum';
+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 { useModal } from '/@/components/Modal';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useErrorLogStore } from '/@/store/modules/errorLog';
-  import { fireErrorApi } from '/@/api/demo/error';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useErrorLogStore } from '@/store/modules/errorLog';
+  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 notDataSvg from '/@/assets/svg/no-data.svg';
-  import netWorkSvg from '/@/assets/svg/net-error.svg';
+  import { ExceptionEnum } from '@/enums/exceptionEnum';
+  import notDataSvg from '@/assets/svg/no-data.svg';
+  import netWorkSvg from '@/assets/svg/net-error.svg';
   import { useRoute } from 'vue-router';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useGo, useRedo } from '/@/hooks/web/usePage';
-  import { PageEnum } from '/@/enums/pageEnum';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useGo, useRedo } from '@/hooks/web/usePage';
+  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 { useDesign } from '/@/hooks/web/useDesign';
-  import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
+  import { propTypes } from '@/utils/propTypes';
+  import { useDesign } from '@/hooks/web/useDesign';
+  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 { useLockStore } from '/@/store/modules/lock';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useUserStore } from '@/store/modules/user';
+  import { useLockStore } from '@/store/modules/lock';
+  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 { useI18n } from '/@/hooks/web/useI18n';
+  import { CountdownInput } from '@/components/CountDown';
+  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 { useI18n } from '/@/hooks/web/useI18n';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useLocaleStore } from '/@/store/modules/locale';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useDesign } from '@/hooks/web/useDesign';
+  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 { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '@/hooks/web/useI18n';
+  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 { useI18n } from '/@/hooks/web/useI18n';
+  import { QrCode } from '@/components/Qrcode';
+  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 { CountdownInput } from '/@/components/CountDown';
-  import { useI18n } from '/@/hooks/web/useI18n';
+  import { StrengthMeter } from '@/components/StrengthMeter';
+  import { CountdownInput } from '@/components/CountDown';
+  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 { useUserStore } from '/@/store/modules/user';
-  import { usePermissionStore } from '/@/store/modules/permission';
-  import { useAppStore } from '/@/store/modules/app';
-  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useUserStore } from '@/store/modules/user';
+  import { usePermissionStore } from '@/store/modules/permission';
+  import { useAppStore } from '@/store/modules/app';
+  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,