From cb907165ec978d29d5175a3c1544986d26b40760 Mon Sep 17 00:00:00 2001
From: bowen <54492610+jiaowoxiaobala@users.noreply.github.com>
Date: Sat, 18 Nov 2023 09:26:59 +0800
Subject: [PATCH] refactor: some feat pages transfer setup grammar (#3292)

* refactor: some feat pages transfer setup grammar

* refactor: update
---
 .../demo/feat/breadcrumb/ChildrenList.vue     |   8 +-
 .../feat/breadcrumb/ChildrenListDetail.vue    |   6 +-
 src/views/demo/feat/breadcrumb/FlatList.vue   |   7 +-
 .../demo/feat/breadcrumb/FlatListDetail.vue   |   5 -
 src/views/demo/feat/click-out-side/index.vue  |  28 ++---
 src/views/demo/feat/context-menu/index.vue    | 112 +++++++++---------
 src/views/demo/feat/copy/index.vue            |  38 +++---
 src/views/demo/feat/download/index.vue        |  61 ++++------
 src/views/demo/feat/ellipsis/index.vue        |  18 +--
 src/views/demo/feat/full-screen/index.vue     |  34 ++----
 src/views/demo/feat/icon/index.vue            |  30 +----
 src/views/demo/feat/img-preview/index.vue     |  30 ++---
 src/views/demo/feat/menu-params/index.vue     |  37 +++---
 src/views/demo/feat/msg/index.vue             | 112 +++++++++---------
 src/views/demo/feat/print/index.vue           |  55 ++++-----
 src/views/demo/feat/session-timeout/index.vue |  52 ++++----
 src/views/demo/feat/tab-params/index.vue      |  25 ++--
 src/views/demo/feat/tabs/TabDetail.vue        |  27 ++---
 src/views/demo/feat/tabs/index.vue            |  67 +++++------
 19 files changed, 305 insertions(+), 447 deletions(-)

diff --git a/src/views/demo/feat/breadcrumb/ChildrenList.vue b/src/views/demo/feat/breadcrumb/ChildrenList.vue
index cc2b26d57c6..6eaeabbb00f 100644
--- a/src/views/demo/feat/breadcrumb/ChildrenList.vue
+++ b/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({
-    components: { PageWrapper },
-  });
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
 </script>
diff --git a/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue b/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue
index 1a7255978d6..197cd710630 100644
--- a/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue
+++ b/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>
diff --git a/src/views/demo/feat/breadcrumb/FlatList.vue b/src/views/demo/feat/breadcrumb/FlatList.vue
index d480bab17b5..966520413b2 100644
--- a/src/views/demo/feat/breadcrumb/FlatList.vue
+++ b/src/views/demo/feat/breadcrumb/FlatList.vue
@@ -3,11 +3,6 @@
     <router-link to="/feat/breadcrumb/flatDetail"> 进入平级详情页 </router-link>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-  });
 </script>
diff --git a/src/views/demo/feat/breadcrumb/FlatListDetail.vue b/src/views/demo/feat/breadcrumb/FlatListDetail.vue
index 67525278bc7..f427e0b66d4 100644
--- a/src/views/demo/feat/breadcrumb/FlatListDetail.vue
+++ b/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>
diff --git a/src/views/demo/feat/click-out-side/index.vue b/src/views/demo/feat/click-out-side/index.vue
index 5d01d56d621..8015ff3993f 100644
--- a/src/views/demo/feat/click-out-side/index.vue
+++ b/src/views/demo/feat/click-out-side/index.vue
@@ -7,25 +7,21 @@
     </ClickOutSide>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { ClickOutSide } from '/@/components/ClickOutSide';
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
   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';
-      }
+  const text = ref('Click');
 
-      function innerClick() {
-        text.value = 'Click Inner';
-      }
-      return { innerClick, handleClickOutside, text };
-    },
-  });
+  function handleClickOutside() {
+    text.value = 'Click Out Side';
+  }
+
+  function innerClick() {
+    text.value = 'Click Inner';
+  }
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/demo/feat/context-menu/index.vue b/src/views/demo/feat/context-menu/index.vue
index 0bde0cfc956..7646ae290f4 100644
--- a/src/views/demo/feat/context-menu/index.vue
+++ b/src/views/demo/feat/context-menu/index.vue
@@ -9,77 +9,71 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { CollapseContainer } from '/@/components/Container';
+<script lang="ts" setup>
   import { useMessage } from '/@/hooks/web/useMessage';
+  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();
-      function handleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
-            {
-              label: 'New',
-              icon: 'bi:plus',
-              handler: () => {
-                createMessage.success('click new');
-              },
-            },
-            {
-              label: 'Open',
-              icon: 'bx:bxs-folder-open',
-              handler: () => {
-                createMessage.success('click open');
-              },
-            },
-          ],
-        });
-      }
+  const { createMessage } = useMessage();
+  const [createContextMenu] = useContextMenu();
+
+  function handleContext(e: MouseEvent) {
+    createContextMenu({
+      event: e,
+      items: [
+        {
+          label: 'New',
+          icon: 'bi:plus',
+          handler: () => {
+            createMessage.success('click new');
+          },
+        },
+        {
+          label: 'Open',
+          icon: 'bx:bxs-folder-open',
+          handler: () => {
+            createMessage.success('click open');
+          },
+        },
+      ],
+    });
+  }
 
-      function handleMultipleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
+  function handleMultipleContext(e: MouseEvent) {
+    createContextMenu({
+      event: e,
+      items: [
+        {
+          label: 'New',
+          icon: 'bi:plus',
+
+          children: [
             {
-              label: 'New',
+              label: 'New1-1',
               icon: 'bi:plus',
-
+              divider: true,
               children: [
                 {
-                  label: 'New1-1',
-                  icon: 'bi:plus',
-                  divider: true,
-                  children: [
-                    {
-                      label: 'New1-1-1',
-                      handler: () => {
-                        createMessage.success('click new');
-                      },
-                    },
-                    {
-                      label: 'New1-2-1',
-                      disabled: true,
-                    },
-                  ],
+                  label: 'New1-1-1',
+                  handler: () => {
+                    createMessage.success('click new');
+                  },
                 },
                 {
-                  label: 'New1-2',
-                  icon: 'bi:plus',
+                  label: 'New1-2-1',
+                  disabled: true,
                 },
               ],
             },
+            {
+              label: 'New1-2',
+              icon: 'bi:plus',
+            },
           ],
-        });
-      }
-
-      return { handleContext, handleMultipleContext };
-    },
-  });
+        },
+      ],
+    });
+  }
 </script>
diff --git a/src/views/demo/feat/copy/index.vue b/src/views/demo/feat/copy/index.vue
index 5525c9cf7c9..5d971569e68 100644
--- a/src/views/demo/feat/copy/index.vue
+++ b/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">
-  import { defineComponent, unref, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
+  import { unref, ref } from 'vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
   import { copyText } from '/@/utils/copyTextToClipboard';
 
-  export default defineComponent({
-    name: 'Copy',
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const valueRef = ref('');
-      const { createMessage } = useMessage();
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  const copyValue = ref('');
+  const { createMessage } = useMessage();
 
-      function handleCopy() {
-        const value = unref(valueRef);
-        if (!value) {
-          createMessage.warning('请输入要拷贝的内容！');
-          return;
-        }
-        copyText(value);
-      }
-      return { handleCopy, value: valueRef };
-    },
-  });
+  function handleCopy() {
+    const value = unref(copyValue);
+    if (!value) {
+      createMessage.warning('请输入要拷贝的内容！');
+      return;
+    }
+    copyText(value);
+  }
 </script>
diff --git a/src/views/demo/feat/download/index.vue b/src/views/demo/feat/download/index.vue
index 159b1e8a528..7b9dcc453aa 100644
--- a/src/views/demo/feat/download/index.vue
+++ b/src/views/demo/feat/download/index.vue
@@ -15,8 +15,7 @@
     </a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import {
     downloadByUrl,
     downloadByData,
@@ -27,40 +26,32 @@
   import { PageWrapper } from '/@/components/Page';
   import { Alert } from 'ant-design-vue';
 
-  export default defineComponent({
-    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',
-          target: '_self',
-        });
+  const AAlert = Alert;
 
-        downloadByUrl({
-          url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
-          target: '_self',
-        });
-      }
+  function handleDownByData() {
+    downloadByData('text content', 'testName.txt');
+  }
 
-      function handleDownloadByBase64() {
-        downloadByBase64(imgBase64, 'logo.png');
-      }
+  function handleDownloadByUrl() {
+    downloadByUrl({
+      url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
+      target: '_self',
+    });
 
-      function handleDownloadByOnlineUrl() {
-        downloadByOnlineUrl(
-          'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
-          'logo.png',
-        );
-      }
-      return {
-        handleDownloadByUrl,
-        handleDownByData,
-        handleDownloadByBase64,
-        handleDownloadByOnlineUrl,
-      };
-    },
-  });
+    downloadByUrl({
+      url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
+      target: '_self',
+    });
+  }
+
+  function handleDownloadByBase64() {
+    downloadByBase64(imgBase64, 'logo.png');
+  }
+
+  function handleDownloadByOnlineUrl() {
+    downloadByOnlineUrl(
+      'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
+      'logo.png',
+    );
+  }
 </script>
diff --git a/src/views/demo/feat/ellipsis/index.vue b/src/views/demo/feat/ellipsis/index.vue
index d916ae91d12..e20e63376b1 100644
--- a/src/views/demo/feat/ellipsis/index.vue
+++ b/src/views/demo/feat/ellipsis/index.vue
@@ -22,26 +22,16 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
   import { EllipsisText } from '@/components/EllipsisText';
+  import { CollapseContainer } from '/@/components/Container/index';
 
-  export default defineComponent({
-    name: 'Ellipsis',
-    components: { CollapseContainer, PageWrapper, EllipsisText },
-    setup() {
-      const text =
-        ref(`Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+  const text = `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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`);
-
-      return { text };
-    },
-  });
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
 </script>
diff --git a/src/views/demo/feat/full-screen/index.vue b/src/views/demo/feat/full-screen/index.vue
index 05c0ecfc681..2e86cc6d9af 100644
--- a/src/views/demo/feat/full-screen/index.vue
+++ b/src/views/demo/feat/full-screen/index.vue
@@ -25,30 +25,18 @@
     </div>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   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({
-    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,
-      };
-    },
-  });
+
+  import type { Nullable } from '@vben/types';
+
+  const domRef = ref<Nullable<HTMLElement>>(null);
+
+  const { enter, toggle, exit, isFullscreen } = useFullscreen();
+
+  const { toggle: toggleDom, isFullscreen: isDomFullscreen } = useFullscreen(domRef);
 </script>
diff --git a/src/views/demo/feat/icon/index.vue b/src/views/demo/feat/icon/index.vue
index ecce72a04bb..7c3814b15aa 100644
--- a/src/views/demo/feat/icon/index.vue
+++ b/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">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   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({
-    components: {
-      PageWrapper,
-      CollapseContainer,
-      GithubFilled,
-      QqCircleFilled,
-      WechatFilled,
-      AlipayCircleFilled,
-      IeCircleFilled,
-      TaobaoCircleFilled,
-      CodepenCircleFilled,
-      Icon,
-      Alert,
-      IconPicker,
-      SvgIcon,
-    },
-    setup() {
-      return {
-        toIconify: () => {
-          openWindow('https://iconify.design/');
-        },
-      };
-    },
-  });
+  const toIconify = () => {
+    openWindow('https://iconify.design/');
+  };
 </script>
diff --git a/src/views/demo/feat/img-preview/index.vue b/src/views/demo/feat/img-preview/index.vue
index b5ece2ea398..77f7d836f59 100644
--- a/src/views/demo/feat/img-preview/index.vue
+++ b/src/views/demo/feat/img-preview/index.vue
@@ -4,28 +4,22 @@
     <a-button @click="openImg" type="primary">无预览图</a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
+
+<script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
-  // import { PreviewActions } from '/@/components/Preview/src/typing';
+  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
 
-  const imgList: string[] = [
+  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);
-        };
-        // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
-        createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
-      }
-      return { imgList, openImg };
-    },
-  });
+
+  function openImg() {
+    const onImgLoad = ({ index, url, dom }) => {
+      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
+    };
+    // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
+    createImgPreview({ imageList: imgList, defaultWidth: 700, rememberState: true, onImgLoad });
+  }
 </script>
diff --git a/src/views/demo/feat/menu-params/index.vue b/src/views/demo/feat/menu-params/index.vue
index 1a566b21125..3038e725644 100644
--- a/src/views/demo/feat/menu-params/index.vue
+++ b/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">
-  import { Input } from 'ant-design-vue';
-  import { computed, defineComponent, ref, unref } from 'vue';
+<script lang="ts" setup>
   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({
-    name: 'TestMenu',
-    components: { PageWrapper, Input },
-    setup() {
-      const { currentRoute, replace } = useRouter();
-      const value = ref<string>('');
+  const value = ref('');
+
+  const { currentRoute, replace } = useRouter();
+
+  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;
-        }),
-      };
-    },
-  });
+  const handleClickGo = () => {
+    const { name } = unref(currentRoute);
+    replace({ name: name!, params: { id: unref(value) } });
+  };
 </script>
diff --git a/src/views/demo/feat/msg/index.vue b/src/views/demo/feat/msg/index.vue
index 6e8763f95c4..b65c917b1c2 100644
--- a/src/views/demo/feat/msg/index.vue
+++ b/src/views/demo/feat/msg/index.vue
@@ -34,67 +34,61 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
   import { CollapseContainer } from '/@/components/Container/index';
+
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const {
-        createMessage,
-        createConfirm,
-        createSuccessModal,
-        createInfoModal,
-        createErrorModal,
-        createWarningModal,
-        notification,
-      } = useMessage();
-      const { info, success, warning, error } = createMessage;
+  const {
+    createMessage,
+    createConfirm,
+    createSuccessModal,
+    createInfoModal,
+    createErrorModal,
+    createWarningModal,
+    notification,
+  } = useMessage();
+
+  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,
+      title: 'Tip',
+      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 handleLoading() {
-        createMessage.loading('Loading...');
-      }
-      function handleConfirm(type: 'warning' | 'error' | 'success' | 'info') {
-        createConfirm({
-          iconType: type,
-          title: 'Tip',
-          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,
-      };
-    },
-  });
+  function handleNotify() {
+    notification.success({
+      message: 'Tip',
+      description: 'content message...',
+    });
+  }
 </script>
diff --git a/src/views/demo/feat/print/index.vue b/src/views/demo/feat/print/index.vue
index 556a3b78693..80d4586955e 100644
--- a/src/views/demo/feat/print/index.vue
+++ b/src/views/demo/feat/print/index.vue
@@ -7,43 +7,32 @@
     <a-button type="primary" class="mt-5" @click="imagePrint">Image Print</a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   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: [
-            { name: 'll', email: '123@gmail.com', phone: '123' },
-            { name: 'qq', email: '456@gmail.com', phone: '456' },
-          ],
-          properties: ['name', 'email', 'phone'],
-          type: 'json',
-        });
-      }
+  function jsonPrint() {
+    printJS({
+      printable: [
+        { name: 'll', email: '123@gmail.com', phone: '123' },
+        { name: 'qq', email: '456@gmail.com', phone: '456' },
+      ],
+      properties: ['name', 'email', 'phone'],
+      type: 'json',
+    });
+  }
 
-      function imagePrint() {
-        printJS({
-          printable: [
-            'https://anncwb.github.io/anncwb/images/preview1.png',
-            'https://anncwb.github.io/anncwb/images/preview2.png',
-          ],
-          type: 'image',
-          header: 'Multiple Images',
-          imageStyle: 'width:100%;',
-        });
-      }
-      return {
-        jsonPrint,
-        imagePrint,
-      };
-    },
-  });
+  function imagePrint() {
+    printJS({
+      printable: [
+        'https://anncwb.github.io/anncwb/images/preview1.png',
+        'https://anncwb.github.io/anncwb/images/preview2.png',
+      ],
+      type: 'image',
+      header: 'Multiple Images',
+      imageStyle: 'width:100%;',
+    });
+  }
 </script>
diff --git a/src/views/demo/feat/session-timeout/index.vue b/src/views/demo/feat/session-timeout/index.vue
index 2a0c3282a76..1e60e89ddab 100644
--- a/src/views/demo/feat/session-timeout/index.vue
+++ b/src/views/demo/feat/session-timeout/index.vue
@@ -14,41 +14,35 @@
     </a-card>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   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({
-    name: 'TestSessionTimeout',
-    components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
-    setup() {
-      const userStore = useUserStore();
-      async function test1() {
-        // 示例网站生产环境用的是mock数据，不能返回Http状态码，
-        // 所以在生产环境直接改变状态来达到测试效果
-        if (import.meta.env.PROD) {
-          userStore.setToken(undefined);
-          userStore.setSessionTimeout(true);
-        } else {
-          // 这个api会返回状态码为401的响应
-          await sessionTimeoutApi();
-        }
-      }
+  const ACardGrid = Card.Grid;
+  const ACard = Card;
 
-      async function test2() {
-        // 这个api会返回code为401的json数据，Http状态码为200
-        try {
-          await tokenExpiredApi();
-        } catch (err) {
-          console.log('接口访问错误：', (err as Error).message || '错误');
-        }
-      }
+  const userStore = useUserStore();
+  async function test1() {
+    // 示例网站生产环境用的是mock数据，不能返回Http状态码，
+    // 所以在生产环境直接改变状态来达到测试效果
+    if (import.meta.env.PROD) {
+      userStore.setToken(undefined);
+      userStore.setSessionTimeout(true);
+    } else {
+      // 这个api会返回状态码为401的响应
+      await sessionTimeoutApi();
+    }
+  }
 
-      return { test1, test2 };
-    },
-  });
+  async function test2() {
+    // 这个api会返回code为401的json数据，Http状态码为200
+    try {
+      await tokenExpiredApi();
+    } catch (err) {
+      console.log('接口访问错误：', (err as Error).message || '错误');
+    }
+  }
 </script>
diff --git a/src/views/demo/feat/tab-params/index.vue b/src/views/demo/feat/tab-params/index.vue
index c2e06feeca9..6ace6e55563 100644
--- a/src/views/demo/feat/tab-params/index.vue
+++ b/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';
+
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { useRouter } from 'vue-router';
-  import { PageWrapper } from '/@/components/Page';
+
   import { Input } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+
+  const { currentRoute } = useRouter();
 
-  export default defineComponent({
+  defineOptions({
     name: 'TestTab',
-    components: { PageWrapper, Input },
-    setup() {
-      const { currentRoute } = useRouter();
-      return {
-        params: computed(() => {
-          return unref(currentRoute).params;
-        }),
-      };
-    },
   });
+
+  const computedParams = computed(() => unref(currentRoute).params);
 </script>
diff --git a/src/views/demo/feat/tabs/TabDetail.vue b/src/views/demo/feat/tabs/TabDetail.vue
index d768cca1e14..c95e985c549 100644
--- a/src/views/demo/feat/tabs/TabDetail.vue
+++ b/src/views/demo/feat/tabs/TabDetail.vue
@@ -4,25 +4,16 @@
   </PageWrapper>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { useTabs } from '/@/hooks/web/useTabs';
+<script lang="ts" setup>
   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 route = useRoute();
+  const index = route.params?.id ?? -1;
 
-      // 设置标识
-      setTitle(`No.${index} - 详情信息`);
-      return {
-        index,
-      };
-    },
-  });
+  const { setTitle } = useTabs();
+  // 设置标识
+  setTitle(`No.${index} - 详情信息`);
 </script>
diff --git a/src/views/demo/feat/tabs/index.vue b/src/views/demo/feat/tabs/index.vue
index a1bb519e6e1..70211422811 100644
--- a/src/views/demo/feat/tabs/index.vue
+++ b/src/views/demo/feat/tabs/index.vue
@@ -24,46 +24,39 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container';
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useGo } from '/@/hooks/web/usePage';
   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';
 
-  export default defineComponent({
-    name: 'TabsDemo',
-    components: { CollapseContainer, PageWrapper, [Input.name]: Input, [Alert.name]: Alert },
-    setup() {
-      const go = useGo();
-      const title = ref<string>('');
-      const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
-        useTabs();
-      const { createMessage } = useMessage();
-      function setTabTitle() {
-        if (title.value) {
-          setTitle(title.value);
-        } else {
-          createMessage.error('请输入要设置的Tab标题！');
-        }
-      }
+  import { Input, Alert } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container';
+
+  const AInput = Input;
+  const AAlert = Alert;
 
-      function toDetail(index: number) {
-        go(`/feat/tabs/detail/${index}`);
-      }
-      return {
-        closeAll,
-        closeLeft,
-        closeRight,
-        closeOther,
-        closeCurrent,
-        toDetail,
-        refreshPage,
-        setTabTitle,
-        title,
-      };
-    },
+  defineOptions({
+    name: 'TabsDemo',
   });
+
+  const go = useGo();
+  const title = ref('');
+
+  const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
+    useTabs();
+  const { createMessage } = useMessage();
+
+  function setTabTitle() {
+    if (title.value) {
+      setTitle(title.value);
+    } else {
+      createMessage.error('请输入要设置的Tab标题！');
+    }
+  }
+
+  function toDetail(index: number) {
+    go(`/feat/tabs/detail/${index}`);
+  }
 </script>