refactor: some feat pages transfer setup grammar (#3292)

* refactor: some feat pages transfer setup grammar

* refactor: update

src/views/demo/feat/breadcrumb/ChildrenList.vue

@@ -3,11 +3,7 @@
     <router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
+<script lang="ts" setup>
-    components: { PageWrapper },
+  import { PageWrapper } from '/@/components/Page';
-  });
 </script>

src/views/demo/feat/breadcrumb/ChildrenListDetail.vue

@@ -3,9 +3,7 @@
     <div>子级详情页内容在此</div>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({ components: { PageWrapper } });
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
 </script>

src/views/demo/feat/breadcrumb/FlatList.vue

@@ -3,11 +3,6 @@
     <router-link to="/feat/breadcrumb/flatDetail"> 进入平级详情页 </router-link>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-  });
 </script>

src/views/demo/feat/breadcrumb/FlatListDetail.vue

@@ -1,8 +1,3 @@
 <template>
   <div>平级详情页</div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({});
-</script>

src/views/demo/feat/click-out-side/index.vue

@@ -7,15 +7,14 @@
     </ClickOutSide>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-  import { ClickOutSide } from '/@/components/ClickOutSide';
+
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '/@/components/Page';
+  import { ClickOutSide } from '/@/components/ClickOutSide';
 
-  export default defineComponent({
-    components: { ClickOutSide, PageWrapper },
-    setup() {
   const text = ref('Click');
+
   function handleClickOutside() {
     text.value = 'Click Out Side';
   }
@@ -23,9 +22,6 @@
   function innerClick() {
     text.value = 'Click Inner';
   }
-      return { innerClick, handleClickOutside, text };
-    },
-  });
 </script>
 
 <style lang="less" scoped>

src/views/demo/feat/context-menu/index.vue

@@ -9,18 +9,16 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
-  import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { CollapseContainer } from '/@/components/Container';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
+
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container';
 
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const [createContextMenu] = useContextMenu();
   const { createMessage } = useMessage();
+  const [createContextMenu] = useContextMenu();
+
   function handleContext(e: MouseEvent) {
     createContextMenu({
       event: e,
@@ -78,8 +76,4 @@
       ],
     });
   }
-
-      return { handleContext, handleMultipleContext };
-    },
-  });
 </script>

src/views/demo/feat/copy/index.vue

@@ -2,35 +2,29 @@
   <PageWrapper title="文本复制示例">
     <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example">
       <div class="flex justify-center">
-        <a-input placeholder="请输入" v-model:value="value" />
+        <a-input placeholder="请输入" v-model:value="copyValue" />
         <a-button type="primary" @click="handleCopy"> Copy </a-button>
       </div>
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, unref, ref } from 'vue';
+  import { unref, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
   import { copyText } from '/@/utils/copyTextToClipboard';
 
-  export default defineComponent({
+  import { PageWrapper } from '/@/components/Page';
-    name: 'Copy',
+  import { CollapseContainer } from '/@/components/Container/index';
-    components: { CollapseContainer, PageWrapper },
+
-    setup() {
+  const copyValue = ref('');
-      const valueRef = ref('');
   const { createMessage } = useMessage();
 
   function handleCopy() {
-        const value = unref(valueRef);
+    const value = unref(copyValue);
     if (!value) {
       createMessage.warning('请输入要拷贝的内容！');
       return;
     }
     copyText(value);
   }
-      return { handleCopy, value: valueRef };
-    },
-  });
 </script>

src/views/demo/feat/download/index.vue

@@ -15,8 +15,7 @@
     </a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import {
     downloadByUrl,
     downloadByData,
@@ -27,12 +26,12 @@
   import { PageWrapper } from '/@/components/Page';
   import { Alert } from 'ant-design-vue';
 
-  export default defineComponent({
+  const AAlert = Alert;
-    components: { PageWrapper, [Alert.name]: Alert },
+
-    setup() {
   function handleDownByData() {
     downloadByData('text content', 'testName.txt');
   }
+
   function handleDownloadByUrl() {
     downloadByUrl({
       url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
@@ -55,12 +54,4 @@
       'logo.png',
     );
   }
-      return {
-        handleDownloadByUrl,
-        handleDownByData,
-        handleDownloadByBase64,
-        handleDownloadByOnlineUrl,
-      };
-    },
-  });
 </script>

src/views/demo/feat/ellipsis/index.vue

@@ -22,26 +22,16 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
   import { EllipsisText } from '@/components/EllipsisText';
+  import { CollapseContainer } from '/@/components/Container/index';
 
-  export default defineComponent({
+  const text = `Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
-    name: 'Ellipsis',
-    components: { CollapseContainer, PageWrapper, EllipsisText },
-    setup() {
-      const text =
-        ref(`Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
       也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
       也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
-      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`);
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
-
-      return { text };
-    },
-  });
 </script>

src/views/demo/feat/full-screen/index.vue

@@ -25,30 +25,18 @@
     </div>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
   import { useFullscreen } from '@vueuse/core';
 
+  import { CollapseContainer } from '/@/components/Container/index';
   import { PageWrapper } from '/@/components/Page';
-  import { type Nullable } from '@vben/types';
 
-  export default defineComponent({
+  import type { Nullable } from '@vben/types';
-    components: { CollapseContainer, PageWrapper },
+
-    setup() {
   const domRef = ref<Nullable<HTMLElement>>(null);
+
   const { enter, toggle, exit, isFullscreen } = useFullscreen();
 
   const { toggle: toggleDom, isFullscreen: isDomFullscreen } = useFullscreen(domRef);
-      return {
-        enter,
-        toggleDom,
-        toggle,
-        isFullscreen,
-        isDomFullscreen,
-        exit,
-        domRef,
-      };
-    },
-  });
 </script>

src/views/demo/feat/icon/index.vue

@@ -50,8 +50,7 @@
     <a-button type="link" @click="toIconify"> Iconify 图标大全 </a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { Alert } from 'ant-design-vue';
   import {
@@ -70,28 +69,7 @@
   import { openWindow } from '/@/utils';
   import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
+  const toIconify = () => {
-    components: {
-      PageWrapper,
-      CollapseContainer,
-      GithubFilled,
-      QqCircleFilled,
-      WechatFilled,
-      AlipayCircleFilled,
-      IeCircleFilled,
-      TaobaoCircleFilled,
-      CodepenCircleFilled,
-      Icon,
-      Alert,
-      IconPicker,
-      SvgIcon,
-    },
-    setup() {
-      return {
-        toIconify: () => {
     openWindow('https://iconify.design/');
-        },
   };
-    },
-  });
 </script>

src/views/demo/feat/img-preview/index.vue

@@ -4,20 +4,17 @@
     <a-button @click="openImg" type="primary">无预览图</a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
-  import { PageWrapper } from '/@/components/Page';
-  // import { PreviewActions } from '/@/components/Preview/src/typing';
 
-  const imgList: string[] = [
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
+  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
+
+  const imgList = [
     'https://picsum.photos/id/66/346/216',
     'https://picsum.photos/id/67/346/216',
     'https://picsum.photos/id/68/346/216',
   ];
-  export default defineComponent({
+
-    components: { PageWrapper, ImagePreview },
-    setup() {
   function openImg() {
     const onImgLoad = ({ index, url, dom }) => {
       console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
@@ -25,7 +22,4 @@
     // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
     createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
   }
-      return { imgList, openImg };
-    },
-  });
 </script>

src/views/demo/feat/menu-params/index.vue

@@ -1,6 +1,6 @@
 <template>
   <PageWrapper title="带参数菜单（路由）" content="支持多级参数">
-    当前参数：{{ params }}
+    当前参数：{{ computedParams }}
     <br />
     输入参数切换路由：
     <Input v-model:value="value" placeholder="建议为url标准字符，输入后点击切换" />
@@ -13,30 +13,21 @@
     </ul>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { Input } from 'ant-design-vue';
-  import { computed, defineComponent, ref, unref } from 'vue';
   import { useRouter } from 'vue-router';
+  import { computed, ref, unref } from 'vue';
+
+  import { Input } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
+  const value = ref('');
-    name: 'TestMenu',
+
-    components: { PageWrapper, Input },
-    setup() {
   const { currentRoute, replace } = useRouter();
-      const value = ref<string>('');
+
+  const computedParams = computed(() => unref(currentRoute).params);
 
   const handleClickGo = () => {
     const { name } = unref(currentRoute);
     replace({ name: name!, params: { id: unref(value) } });
   };
-      return {
-        value,
-        handleClickGo,
-        params: computed(() => {
-          return unref(currentRoute).params;
-        }),
-      };
-    },
-  });
 </script>

src/views/demo/feat/msg/index.vue

@@ -34,15 +34,12 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
   const {
     createMessage,
     createConfirm,
@@ -52,11 +49,18 @@
     createWarningModal,
     notification,
   } = useMessage();
-      const { info, success, warning, error } = createMessage;
+
+  const {
+    info: infoMsg,
+    success: successMsg,
+    warning: warningMsg,
+    error: errorMsg,
+  } = createMessage;
 
   function handleLoading() {
     createMessage.loading('Loading...');
   }
+
   function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
     createConfirm({
       iconType: type,
@@ -64,37 +68,27 @@
       content: 'content message...',
     });
   }
+
   function handleSuccessModal() {
     createSuccessModal({ title: 'Tip', content: 'content message...' });
   }
+
   function handleErrorModal() {
     createErrorModal({ title: 'Tip', content: 'content message...' });
   }
+
   function handleWarningModal() {
     createWarningModal({ title: 'Tip', content: 'content message...' });
   }
+
   function handleInfoModal() {
     createInfoModal({ title: 'Tip', content: 'content message...' });
   }
+
   function handleNotify() {
     notification.success({
       message: 'Tip',
       description: 'content message...',
     });
   }
-      return {
-        infoMsg: info,
-        successMsg: success,
-        warningMsg: warning,
-        errorMsg: error,
-        handleLoading,
-        handleConfirm,
-        handleSuccessModal,
-        handleErrorModal,
-        handleWarningModal,
-        handleInfoModal,
-        handleNotify,
-      };
-    },
-  });
 </script>

src/views/demo/feat/print/index.vue

@@ -7,17 +7,12 @@
     <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { CollapseContainer } from '/@/components/Container/index';
 
   import printJS from 'print-js';
 
-  export default defineComponent({
-    name: 'AppLogo',
-    components: { PageWrapper, CollapseContainer },
-    setup() {
   function jsonPrint() {
     printJS({
       printable: [
@@ -40,10 +35,4 @@
       imageStyle: 'width:100%;',
     });
   }
-      return {
-        jsonPrint,
-        imagePrint,
-      };
-    },
-  });
 </script>

src/views/demo/feat/session-timeout/index.vue

@@ -14,18 +14,16 @@
     </a-card>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import { useUserStore } from '/@/store/modules/user';
 
   import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
   import { Card } from 'ant-design-vue';
 
-  export default defineComponent({
+  const ACardGrid = Card.Grid;
-    name: 'TestSessionTimeout',
+  const ACard = Card;
-    components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
+
-    setup() {
   const userStore = useUserStore();
   async function test1() {
     // 示例网站生产环境用的是mock数据，不能返回Http状态码，
@@ -47,8 +45,4 @@
       console.log('接口访问错误：', (err as Error).message || '错误');
     }
   }
-
-      return { test1, test2 };
-    },
-  });
 </script>

src/views/demo/feat/tab-params/index.vue

@@ -1,27 +1,24 @@
 <template>
   <PageWrapper title="带参数标签页" content="支持带参数多tab缓存">
-    Current Param : {{ params }}
+    Current Param : {{ computedParams }}
     <br />
     Keep Alive
     <Input />
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { computed, defineComponent, unref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { PageWrapper } from '/@/components/Page';
-  import { Input } from 'ant-design-vue';
 
-  export default defineComponent({
+<script lang="ts" setup>
-    name: 'TestTab',
+  import { computed, unref } from 'vue';
-    components: { PageWrapper, Input },
+  import { useRouter } from 'vue-router';
-    setup() {
+
+  import { Input } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+
   const { currentRoute } = useRouter();
-      return {
+
-        params: computed(() => {
+  defineOptions({
-          return unref(currentRoute).params;
+    name: 'TestTab',
-        }),
-      };
-    },
   });
+
+  const computedParams = computed(() => unref(currentRoute).params);
 </script>

src/views/demo/feat/tabs/TabDetail.vue

@@ -4,25 +4,16 @@
   </PageWrapper>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { useTabs } from '/@/hooks/web/useTabs';
   import { useRoute } from 'vue-router';
+  import { useTabs } from '/@/hooks/web/useTabs';
+
+  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
-    name: 'TabDetail',
-    components: { PageWrapper },
-    setup() {
   const route = useRoute();
   const index = route.params?.id ?? -1;
-      const { setTitle } = useTabs();
 
+  const { setTitle } = useTabs();
   // 设置标识
   setTitle(`No.${index} - 详情信息`);
-      return {
-        index,
-      };
-    },
-  });
 </script>

src/views/demo/feat/tabs/index.vue

@@ -24,24 +24,30 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container';
-  import { useTabs } from '/@/hooks/web/useTabs';
-  import { PageWrapper } from '/@/components/Page';
-  import { Input, Alert } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useGo } from '/@/hooks/web/usePage';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-  export default defineComponent({
+  import { Input, Alert } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container';
+
+  const AInput = Input;
+  const AAlert = Alert;
+
+  defineOptions({
     name: 'TabsDemo',
-    components: { CollapseContainer, PageWrapper, [Input.name]: Input, [Alert.name]: Alert },
+  });
-    setup() {
+
   const go = useGo();
-      const title = ref<string>('');
+  const title = ref('');
+
   const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
     useTabs();
   const { createMessage } = useMessage();
+
   function setTabTitle() {
     if (title.value) {
       setTitle(title.value);
@@ -53,17 +59,4 @@
   function toDetail(index: number) {
     go(`/feat/tabs/detail/${index}`);
   }
-      return {
-        closeAll,
-        closeLeft,
-        closeRight,
-        closeOther,
-        closeCurrent,
-        toDetail,
-        refreshPage,
-        setTabTitle,
-        title,
-      };
-    },
-  });
 </script>