diff --git a/cache.dockerfile b/cache.dockerfile
deleted file mode 100644
index bf62cd3..0000000
--- a/cache.dockerfile
+++ /dev/null
@@ -1,15 +0,0 @@
-# 选择一个 Base 镜像
-FROM node:16
-
-# 设置工作目录
-WORKDIR /space
-
-# 将 by 中的文件列表 COPY 过来
-COPY . .
-
-# 根据 COPY 过来的文件进行依赖的安装
-RUN npm i
-
-# 设置好需要的环境变量
-ENV NODE_PATH=/space/node_modules
-
diff --git a/docker/nginx.conf b/docker/nginx.conf
deleted file mode 100644
index 62b7d40..0000000
--- a/docker/nginx.conf
+++ /dev/null
@@ -1,20 +0,0 @@
-server {
-    if ($request_method = HEAD) {
-        return 200;
-    }
-
-    location / {
-        alias   /usr/share/nginx/html/;
-        index  index.html index.htm;
-        try_files  $uri $uri/ /index.html;
-    }
-
-    access_log /var/log/nginx/access.log main;
-    error_log /var/log/nginx/error.log error;
-
-
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 2f7e2ca..8780345 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,19 @@
 <template>
   <router-view :class="[mode]" />
 </template>
-<script lang="ts">
-import { defineComponent, computed, onMounted } from 'vue';
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import config from '@/config/style';
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
+const store = useStore();
 
-    const mode = computed(() => {
-      return store.getters['setting/mode'];
-    });
+const mode = computed(() => {
+  return store.getters['setting/mode'];
+});
 
-    onMounted(() => {
-      store.dispatch('setting/changeTheme', { ...config });
-    });
-    return {
-      mode,
-    };
-  },
+onMounted(() => {
+  store.dispatch('setting/changeTheme', { ...config });
 });
 </script>
 <style lang="less">
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
index 74dc06d..a442d52 100644
--- a/src/components/card/Card.vue
+++ b/src/components/card/Card.vue
@@ -52,8 +52,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+import { computed, defineProps, PropType, defineEmits } from 'vue';
 import {
   ShopIcon,
   CalendarIcon,
@@ -71,63 +71,35 @@ export interface CardProductType {
   name: string;
 }
 
-export default defineComponent({
-  name: 'ListCardComponent',
-  components: {
-    ShopIcon,
-    CalendarIcon,
-    ServiceIcon,
-    UserAvatarIcon,
-    LaptopIcon,
-    MoreIcon,
-    AddIcon,
-  },
-  props: {
-    product: {
-      type: Object as PropType<CardProductType>,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  emits: ['manage-product', 'delete-item'],
-  setup(props, ctx) {
-    const { emit } = ctx;
-    const cardClass = computed(() => [
-      'list-card-item',
-      {
-        'list-card-item__disabled': !props.product.isSetup,
-      },
-    ]);
-
-    const cardLogoClass = computed(() => [
-      'list-card-item_detail--logo',
-      {
-        'list-card-item_detail--logo__disabled': !props.product.isSetup,
-      },
-    ]);
-
-    const cardControlClass = computed(() => [
-      'list-card-item_detail--control',
-      {
-        'list-card-item_detail--control__disabled': !props.product.isSetup,
-      },
-    ]);
-
-    return {
-      cardClass,
-      cardLogoClass,
-      cardControlClass,
-      typeMap: ['A', 'B', 'C', 'D', 'E'],
-      handleClickManage(product) {
-        emit('manage-product', product);
-      },
-      handleClickDelete(product) {
-        emit('delete-item', product);
-      },
-    };
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>,
   },
 });
+
+const emit = defineEmits(['manage-product', 'delete-item']);
+
+const cardClass = computed(() => ['list-card-item', { 'list-card-item__disabled': !props.product.isSetup }]);
+
+const cardLogoClass = computed(() => [
+  'list-card-item_detail--logo',
+  { 'list-card-item_detail--logo__disabled': !props.product.isSetup },
+]);
+
+const cardControlClass = computed(() => [
+  'list-card-item_detail--control',
+  { 'list-card-item_detail--control__disabled': !props.product.isSetup },
+]);
+
+const typeMap = ['A', 'B', 'C', 'D', 'E'];
+
+const handleClickManage = (product: CardProductType) => {
+  emit('manage-product', product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit('delete-item', product);
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
index 44ea6a9..c514010 100644
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@@ -16,70 +16,51 @@
     <div v-if="size !== 'small'" class="card-spacer-bottom" />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
 
-export default defineComponent({
-  name: 'Card',
-  props: {
-    title: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    subtitle: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    compact: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-    describe: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    size: {
-      type: String as PropType<string>,
-      default: 'default',
-    },
-    border: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  title: String,
+  subtitle: String,
+  describe: String,
+  compact: {
+    type: Boolean,
+    default: false,
   },
-  setup(props) {
-    const containerCls = computed(() => {
-      const { compact, border } = props;
-      return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
-    });
-
-    const titleCls = computed(() => {
-      const { size } = props;
-      return [
-        'card-title',
-        {
-          'card-title--small': size === 'small',
-          'card-title--default': size !== 'small',
-        },
-      ];
-    });
-
-    const titleTextCls = computed(() => {
-      const { size } = props;
-      return [
-        {
-          'card-title__text--small': size === 'small',
-          'card-title__text--default': size !== 'small',
-        },
-      ];
-    });
-
-    return {
-      containerCls,
-      titleCls,
-      titleTextCls,
-    };
+  size: {
+    type: String,
+    default: 'default',
   },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const containerCls = computed(() => {
+  const { compact, border } = props;
+  return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
+});
+
+const titleCls = computed(() => {
+  const { size } = props;
+  return [
+    'card-title',
+    {
+      'card-title--small': size === 'small',
+      'card-title--default': size !== 'small',
+    },
+  ];
+});
+
+const titleTextCls = computed(() => {
+  const { size } = props;
+  return [
+    {
+      'card-title__text--small': size === 'small',
+      'card-title__text--default': size !== 'small',
+    },
+  ];
 });
 </script>
 <style lang="less">
diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index 9445816..24560ea 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -1,37 +1,28 @@
 <template>
   <div :style="style" class="color-container" />
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
 import { useStore } from 'vuex';
 import { getBrandColor } from '@/config/color';
 
 const panelColor =
   'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
 
-export default defineComponent({
-  name: 'Color',
-  props: {
-    value: {
-      type: String as PropType<string>,
-      default: 'default',
-    },
+const props = defineProps({
+  value: {
+    type: String,
   },
-  setup(props) {
-    const store = useStore();
+});
 
-    const style = computed(() => {
-      const { value } = props;
-      const { colorList } = store.state.setting;
-      return {
-        background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
-      };
-    });
+const store = useStore();
 
-    return {
-      style,
-    };
-  },
+const style = computed(() => {
+  const { value } = props;
+  const { colorList } = store.state.setting;
+  return {
+    background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
+  };
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/result/index.vue b/src/components/result/index.vue
index f77834c..3574c6b 100644
--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@@ -8,55 +8,36 @@
     <slot />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
 import Result403Icon from '@/assets/assets-result-403.svg?component';
 import Result404Icon from '@/assets/assets-result-404.svg?component';
 import Result500Icon from '@/assets/assets-result-500.svg?component';
 import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
 import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
 
-export default defineComponent({
-  name: 'Result',
-  props: {
-    bgUrl: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    title: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    tip: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    type: {
-      type: String as PropType<string>,
-      default: '',
-    },
-  },
-  setup(props) {
-    const dynamicComponent = computed(() => {
-      switch (props.type) {
-        case '403':
-          return Result403Icon;
-        case '404':
-          return Result404Icon;
-        case '500':
-          return Result500Icon;
-        case 'ie':
-          return ResultIeIcon;
-        case 'wifi':
-          return ResultWifiIcon;
-        default:
-          return Result403Icon;
-      }
-    });
-    return {
-      dynamicComponent,
-    };
-  },
+const props = defineProps({
+  bgUrl: String,
+  title: String,
+  tip: String,
+  type: String,
+});
+
+const dynamicComponent = computed(() => {
+  switch (props.type) {
+    case '403':
+      return Result403Icon;
+    case '404':
+      return Result404Icon;
+    case '500':
+      return Result500Icon;
+    case 'ie':
+      return ResultIeIcon;
+    case 'wifi':
+      return ResultWifiIcon;
+    default:
+      return Result403Icon;
+  }
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/components/thumbnail/index.vue b/src/components/thumbnail/index.vue
index 74b1442..a19b9eb 100644
--- a/src/components/thumbnail/index.vue
+++ b/src/components/thumbnail/index.vue
@@ -1,35 +1,27 @@
 <template>
   <img :class="className" :src="url" />
 </template>
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
+import { computed, defineProps } from 'vue';
 
-export default defineComponent({
-  name: 'Thumbnail',
-  props: {
-    url: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    type: {
-      type: String as PropType<string>,
-      default: 'layout',
-    },
-  },
-  setup(props) {
-    const className = computed(() => {
-      const { type } = props;
-      return [
-        'thumbnail-container',
-        {
-          'thumbnail-circle': type === 'circle',
-          'thumbnail-layout': type === 'layout',
-        },
-      ];
-    });
-    return { className };
+const props = defineProps({
+  url: String,
+  type: {
+    type: String,
+    default: 'layout',
   },
 });
+
+const className = computed(() => {
+  const { type } = props;
+  return [
+    'thumbnail-container',
+    {
+      'thumbnail-circle': type === 'circle',
+      'thumbnail-layout': type === 'layout',
+    },
+  ];
+});
 </script>
 <style lang="less" scoped>
 @import url('@/style/index.less');
diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue
index ab73088..a9a5d1d 100644
--- a/src/components/trend/index.vue
+++ b/src/components/trend/index.vue
@@ -20,46 +20,31 @@
     <span>{{ describe }}</span>
   </span>
 </template>
-<script lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
 
-export default defineComponent({
-  name: 'Trend',
-  props: {
-    type: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    describe: {
-      type: [String, Number] as PropType<string | number>,
-      default: '',
-    },
-    isReverseColor: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-  },
-  setup(props) {
-    const containerCls = computed(() => {
-      const { isReverseColor, type } = props;
-      return [
-        'trend-container',
-        {
-          'trend-container__reverse': isReverseColor,
-          'trend-container__up': !isReverseColor && type === 'up',
-          'trend-container__down': !isReverseColor && type === 'down',
-        },
-      ];
-    });
-
-    const iconCls = computed(() => ['trend-icon-container']);
-
-    return {
-      containerCls,
-      iconCls,
-    };
+const props = defineProps({
+  type: String,
+  describe: [String, Number],
+  isReverseColor: {
+    type: Boolean,
+    default: false,
   },
 });
+
+const containerCls = computed(() => {
+  const { isReverseColor, type } = props;
+  return [
+    'trend-container',
+    {
+      'trend-container__reverse': isReverseColor,
+      'trend-container__up': !isReverseColor && type === 'up',
+      'trend-container__down': !isReverseColor && type === 'down',
+    },
+  ];
+});
+
+const iconCls = computed(() => ['trend-icon-container']);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue
index 50cb4e4..f939d2e 100644
--- a/src/layouts/components/Breadcrumb.vue
+++ b/src/layouts/components/Breadcrumb.vue
@@ -6,37 +6,25 @@
   </t-breadcrumb>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
-export default defineComponent({
-  name: 'TdesignStarterBreadcrumb',
-  props: {
-    isVisible: Boolean,
-  },
-  setup() {
-    const crumbs = computed(() => {
-      const route = useRoute();
+const crumbs = computed(() => {
+  const route = useRoute();
 
-      const pathArray = route.path.split('/');
-      pathArray.shift();
+  const pathArray = route.path.split('/');
+  pathArray.shift();
 
-      const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
-        breadcrumbArray.push({
-          path,
-          to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
-          title: route.matched[idx].meta.title || path,
-        });
-        return breadcrumbArray;
-      }, []);
-      return breadcrumbs;
+  const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
+    breadcrumbArray.push({
+      path,
+      to: breadcrumbArray[idx - 1] ? `/${breadcrumbArray[idx - 1].path}/${path}` : `/${path}`,
+      title: route.matched[idx].meta.title || path,
     });
-
-    return {
-      crumbs,
-    };
-  },
+    return breadcrumbArray;
+  }, []);
+  return breadcrumbs;
 });
 </script>
 <style scoped>
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index cfd1c8c..790e439 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -2,18 +2,8 @@
   <div :class="prefix + '-footer'">Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { prefix } from '@/config/global';
-
-export default defineComponent({
-  name: `${prefix}-footer`,
-  setup() {
-    return {
-      prefix,
-    };
-  },
-});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index d3ea131..21a4c3f 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -63,8 +63,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
+<script setup lang="ts">
+import { defineProps, PropType, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -76,122 +76,89 @@ import Notice from './Notice.vue';
 import Search from './Search.vue';
 import MenuContent from './MenuContent';
 
-export default defineComponent({
-  components: {
-    tLogoFull,
-    Notice,
-    Search,
-    MenuContent,
+const props = defineProps({
+  theme: {
+    type: String,
+    default: '',
   },
-  props: {
-    theme: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    layout: {
-      type: String as PropType<string>,
-      default: 'top',
-    },
-    showLogo: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    menu: {
-      type: Array as PropType<MenuRoute[]>,
-      default: () => [],
-    },
-    isFixed: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-    isCompact: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-    maxLevel: {
-      type: Number as PropType<number>,
-      default: 3,
-    },
+  layout: {
+    type: String,
+    default: 'top',
   },
-  setup(props) {
-    const store = useStore();
-    const router = useRouter();
-
-    const toggleSettingPanel = () => {
-      store.commit('setting/toggleSettingPanel', true);
-    };
-
-    const active = computed(() => {
-      const route = useRoute();
-      if (!route.path) {
-        return '';
-      }
-      return route.path
-        .split('/')
-        .filter((item, index) => index <= props.maxLevel && index > 0)
-        .map((item) => `/${item}`)
-        .join('');
-    });
-
-    const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
-
-    const layoutCls = computed(() => [`${prefix}-header-layout`]);
-
-    const menuCls = computed(() => {
-      const { isFixed, layout, isCompact } = props;
-      return [
-        {
-          [`${prefix}-header-menu`]: !isFixed,
-          [`${prefix}-header-menu-fixed`]: isFixed,
-          [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
-          [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
-        },
-      ];
-    });
-
-    const userVisible = ref(false);
-    const userVisibleChange = (value: boolean) => {
-      userVisible.value = value;
-    };
-
-    const changeCollapsed = () => {
-      store.commit('setting/toggleSidebarCompact');
-    };
-    const isSidebarCompact = computed(() => store.state.setting.isSidebarCompact);
-
-    const handleNav = (url) => {
-      router.push(url);
-    };
-
-    const handleLogout = () => {
-      router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
-    };
-
-    const navToGitHub = () => {
-      window.open('https://github.com/tencent/tdesign-vue-next-starter');
-    };
-
-    const navToHelper = () => {
-      window.open('http://tdesign.tencent.com/starter/docs/get-started');
-    };
-
-    return {
-      isSidebarCompact,
-      toggleSettingPanel,
-      active,
-      showMenu,
-      layoutCls,
-      userVisible,
-      userVisibleChange,
-      menuCls,
-      changeCollapsed,
-      handleNav,
-      handleLogout,
-      navToGitHub,
-      navToHelper,
-    };
+  showLogo: {
+    type: Boolean,
+    default: true,
+  },
+  menu: {
+    type: Array as PropType<MenuRoute[]>,
+    default: () => [],
+  },
+  isFixed: {
+    type: Boolean,
+    default: false,
+  },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
+  maxLevel: {
+    type: Number,
+    default: 3,
   },
 });
+
+const store = useStore();
+const router = useRouter();
+
+const toggleSettingPanel = () => {
+  store.commit('setting/toggleSettingPanel', true);
+};
+
+const active = computed(() => {
+  const route = useRoute();
+  if (!route.path) {
+    return '';
+  }
+  return route.path
+    .split('/')
+    .filter((item, index) => index <= props.maxLevel && index > 0)
+    .map((item) => `/${item}`)
+    .join('');
+});
+
+const layoutCls = computed(() => [`${prefix}-header-layout`]);
+
+const menuCls = computed(() => {
+  const { isFixed, layout, isCompact } = props;
+  return [
+    {
+      [`${prefix}-header-menu`]: !isFixed,
+      [`${prefix}-header-menu-fixed`]: isFixed,
+      [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
+      [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
+    },
+  ];
+});
+
+const changeCollapsed = () => {
+  store.commit('setting/toggleSidebarCompact');
+};
+
+const handleNav = (url) => {
+  router.push(url);
+};
+
+const handleLogout = () => {
+  router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
+};
+
+const navToGitHub = () => {
+  window.open('https://github.com/tencent/tdesign-vue-next-starter');
+};
+
+const navToHelper = () => {
+  window.open('http://tdesign.tencent.com/starter/docs/get-started');
+};
 </script>
 <style lang="less">
 @import '@/style/variables.less';
diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue
index 5d2dc3f..717e46c 100644
--- a/src/layouts/components/Notice.vue
+++ b/src/layouts/components/Notice.vue
@@ -45,47 +45,37 @@
   </t-popup>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { NotificationItem } from '@/interface';
 
-export default defineComponent({
-  setup() {
-    const router = useRouter();
-    const store = useStore();
-    const { msgData } = store.state.notification;
+const router = useRouter();
+const store = useStore();
+const { msgData } = store.state.notification;
 
-    const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
+const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
 
-    const setRead = (type: string, item?: NotificationItem) => {
-      const changeMsg = msgData;
-      if (type === 'all') {
-        changeMsg.forEach((e: NotificationItem) => {
-          e.status = false;
-        });
-      } else {
-        changeMsg.forEach((e: NotificationItem) => {
-          if (e.id === item?.id) {
-            e.status = false;
-          }
-        });
+const setRead = (type: string, item?: NotificationItem) => {
+  const changeMsg = msgData;
+  if (type === 'all') {
+    changeMsg.forEach((e: NotificationItem) => {
+      e.status = false;
+    });
+  } else {
+    changeMsg.forEach((e: NotificationItem) => {
+      if (e.id === item?.id) {
+        e.status = false;
       }
-      store.commit('notification/setMsgData', changeMsg);
-    };
+    });
+  }
+  store.commit('notification/setMsgData', changeMsg);
+};
 
-    const goDetail = () => {
-      router.push('/detail/secondary');
-    };
-
-    return {
-      goDetail,
-      unreadMsg,
-      setRead,
-    };
-  },
-});
+const goDetail = () => {
+  router.push('/detail/secondary');
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue
index 1b69af3..0bc27e1 100644
--- a/src/layouts/components/Search.vue
+++ b/src/layouts/components/Search.vue
@@ -36,31 +36,21 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
+<script setup lang="ts">
+import { ref, defineProps } from 'vue';
 
-export default defineComponent({
-  props: {
-    layout: {
-      type: String as PropType<string>,
-    },
-  },
-  setup() {
-    const isSearchFocus = ref(false);
-    const searchData = ref('');
-    const changeSearchFocus = (value: boolean) => {
-      if (!value) {
-        searchData.value = '';
-      }
-      isSearchFocus.value = value;
-    };
-    return {
-      isSearchFocus,
-      searchData,
-      changeSearchFocus,
-    };
-  },
+const layout = defineProps({
+  type: String,
 });
+
+const isSearchFocus = ref(false);
+const searchData = ref('');
+const changeSearchFocus = (value: boolean) => {
+  if (!value) {
+    searchData.value = '';
+  }
+  isSearchFocus.value = value;
+};
 </script>
 <style lang="less">
 @import '@/style/variables.less';
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index f8f54f2..957a860 100644
--- a/src/layouts/setting.vue
+++ b/src/layouts/setting.vue
@@ -90,8 +90,8 @@
     </div>
   </t-drawer>
 </template>
-<script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { ColorPicker } from 'vue-color-kit';
 import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
@@ -118,133 +118,113 @@ const MODE_OPTIONS = [
   { type: 'auto', text: '跟随系统' },
 ];
 
-export default defineComponent({
-  name: 'DefaultLayoutSetting',
-  components: { Thumbnail, ColorContainer, ColorPicker },
-  setup() {
-    const formData = ref({ ...STYLE_CONFIG });
-    const store = useStore();
-    const colors = ref();
-    const isColoPickerDisplay = ref(false);
+const formData = ref({ ...STYLE_CONFIG });
+const store = useStore();
+const colors = ref();
+const isColoPickerDisplay = ref(false);
 
-    const showSettingPanel = computed({
-      get() {
-        return store.state.setting.showSettingPanel;
-      },
-      set(newVal) {
-        store.commit('setting/toggleSettingPanel', newVal);
-      },
-    });
-
-    const mode = computed(() => {
-      return store.getters['setting/mode'];
-    });
-
-    watch(
-      () => colors.value,
-      (newColor) => {
-        const { hex } = newColor;
-        const { setting } = store.state;
-
-        // hex 主题色
-        const newPalette = Color.getPaletteByGradation({
-          colors: [hex],
-          step: 10,
-        })[0];
-        const { mode } = store.state.setting;
-        const colorMap = generateColorMap(hex, newPalette, mode);
-
-        store.commit('setting/addColor', { [hex]: colorMap });
-
-        insertThemeStylesheet(hex, colorMap, mode);
-
-        store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
-      },
-    );
-    const changeColor = (val) => {
-      const { hex } = val;
-      const { setting } = store.state;
-
-      // hex 主题色
-      const newPalette = Color.getPaletteByGradation({
-        colors: [hex],
-        step: 10,
-      })[0];
-      const { mode } = store.state.setting;
-      const colorMap = generateColorMap(hex, newPalette, mode);
-
-      store.commit('setting/addColor', { [hex]: colorMap });
-
-      insertThemeStylesheet(hex, colorMap, mode);
-
-      store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
-    };
-
-    onMounted(() => {
-      document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
-        isColoPickerDisplay.value = true;
-      });
-    });
-
-    const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
-      if (!visible && context.trigger === 'document') {
-        isColoPickerDisplay.value = visible;
-      }
-    };
-
-    const handleCopy = () => {
-      const text = JSON.stringify(formData.value, null, 4);
-      const { toClipboard } = useClipboard();
-      toClipboard(text)
-        .then(() => {
-          MessagePlugin.closeAll();
-          MessagePlugin.success('复制成功');
-        })
-        .catch(() => {
-          MessagePlugin.closeAll();
-          MessagePlugin.error('复制失败');
-        });
-    };
-    const getModeIcon = (mode: string) => {
-      if (mode === 'light') {
-        return SettingLightIcon;
-      }
-      if (mode === 'dark') {
-        return SettingDarkIcon;
-      }
-      return SettingAutoIcon;
-    };
-
-    const handleCloseDrawer = () => {
-      store.commit('setting/toggleSettingPanel', false);
-    };
-    return {
-      mode,
-      changeColor,
-      isColoPickerDisplay,
-      onPopupVisibleChange,
-      MODE_OPTIONS,
-      LAYOUT_OPTION,
-      COLOR_OPTIONS,
-      formData,
-      showSettingPanel,
-      handleCopy,
-      getModeIcon,
-      handleCloseDrawer,
-      getThumbnailUrl(name: string): string {
-        return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
-      },
-    };
+const showSettingPanel = computed({
+  get() {
+    return store.state.setting.showSettingPanel;
   },
-  watch: {
-    formData: {
-      handler(newVal) {
-        this.$store.dispatch('setting/changeTheme', newVal);
-      },
-      deep: true,
-    },
+  set(newVal) {
+    store.commit('setting/toggleSettingPanel', newVal);
   },
 });
+
+const mode = computed(() => {
+  return store.getters['setting/mode'];
+});
+
+watch(
+  () => colors.value,
+  (newColor) => {
+    const { hex } = newColor;
+    const { setting } = store.state;
+
+    // hex 主题色
+    const newPalette = Color.getPaletteByGradation({
+      colors: [hex],
+      step: 10,
+    })[0];
+    const { mode } = store.state.setting;
+    const colorMap = generateColorMap(hex, newPalette, mode);
+
+    store.commit('setting/addColor', { [hex]: colorMap });
+
+    insertThemeStylesheet(hex, colorMap, mode);
+
+    store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
+  },
+);
+
+const changeColor = (val) => {
+  const { hex } = val;
+  const { setting } = store.state;
+  // hex 主题色
+  const newPalette = Color.getPaletteByGradation({
+    colors: [hex],
+    step: 10,
+  })[0];
+  const { mode } = store.state.setting;
+  const colorMap = generateColorMap(hex, newPalette, mode);
+
+  store.commit('setting/addColor', { [hex]: colorMap });
+
+  insertThemeStylesheet(hex, colorMap, mode);
+
+  store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
+};
+
+onMounted(() => {
+  document.querySelector('.dynamic-color-btn').addEventListener('click', () => {
+    isColoPickerDisplay.value = true;
+  });
+});
+
+const onPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+  if (!visible && context.trigger === 'document') {
+    isColoPickerDisplay.value = visible;
+  }
+};
+
+const handleCopy = () => {
+  const text = JSON.stringify(formData.value, null, 4);
+  const { toClipboard } = useClipboard();
+  toClipboard(text)
+    .then(() => {
+      MessagePlugin.closeAll();
+      MessagePlugin.success('复制成功');
+    })
+    .catch(() => {
+      MessagePlugin.closeAll();
+      MessagePlugin.error('复制失败');
+    });
+};
+const getModeIcon = (mode: string) => {
+  if (mode === 'light') {
+    return SettingLightIcon;
+  }
+  if (mode === 'dark') {
+    return SettingDarkIcon;
+  }
+  return SettingAutoIcon;
+};
+
+const handleCloseDrawer = () => {
+  store.commit('setting/toggleSettingPanel', false);
+};
+
+const getThumbnailUrl = (name: string): string => {
+  return `https://tdesign.gtimg.com/tdesign-pro/setting/${name}.png`;
+};
+
+watch(
+  () => formData.value,
+  (newVal) => {
+    store.dispatch('setting/changeTheme', newVal);
+  },
+);
 </script>
 <style lang="less">
 @import '@/style/variables';
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 28bc8fe..e00c8bb 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -2,7 +2,7 @@
   <div>
     <t-row :gutter="[16, 16]">
       <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
-        <card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }" size="small">
+        <card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }">
           <div class="dashboard-item">
             <div class="dashboard-item-top">
               <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
@@ -202,8 +202,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
+<script setup lang="ts">
+import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -241,169 +241,150 @@ const getThisMonth = (checkedValues?: string[]) => {
   return `${date.getFullYear()}-${startMonth}  至  ${date2.getFullYear()}-${endMonth}`;
 };
 
-export default defineComponent({
-  name: 'DashboardBase',
-  components: {
-    Card,
-    Trend,
-  },
-  setup() {
-    const store = useStore();
-    const resizeTime = ref(1);
+const store = useStore();
+const resizeTime = ref(1);
 
-    const chartColors = computed(() => store.state.setting.chartColors);
+const chartColors = computed(() => store.state.setting.chartColors);
 
-    // moneyCharts
-    let moneyContainer: HTMLElement;
-    let moneyChart: echarts.ECharts;
-    const renderMoneyChart = () => {
-      if (!moneyContainer) {
-        moneyContainer = document.getElementById('moneyContainer');
-      }
-      moneyChart = echarts.init(moneyContainer);
-      moneyChart.setOption(constructInitDashboardDataset('line'));
-    };
+// moneyCharts
+let moneyContainer: HTMLElement;
+let moneyChart: echarts.ECharts;
+const renderMoneyChart = () => {
+  if (!moneyContainer) {
+    moneyContainer = document.getElementById('moneyContainer');
+  }
+  moneyChart = echarts.init(moneyContainer);
+  moneyChart.setOption(constructInitDashboardDataset('line'));
+};
 
-    // refundCharts
-    let refundContainer: HTMLElement;
-    let refundChart: echarts.ECharts;
-    const renderRefundChart = () => {
-      if (!refundContainer) {
-        refundContainer = document.getElementById('refundContainer');
-      }
-      refundChart = echarts.init(refundContainer);
-      refundChart.setOption(constructInitDashboardDataset('bar'));
-    };
+// refundCharts
+let refundContainer: HTMLElement;
+let refundChart: echarts.ECharts;
+const renderRefundChart = () => {
+  if (!refundContainer) {
+    refundContainer = document.getElementById('refundContainer');
+  }
+  refundChart = echarts.init(refundContainer);
+  refundChart.setOption(constructInitDashboardDataset('bar'));
+};
 
-    // stokeCharts
-    let stokeContainer: HTMLElement;
-    let stokeChart: echarts.ECharts;
-    const renderStokeChart = () => {
-      if (!stokeContainer) {
-        stokeContainer = document.getElementById('stokeContainer');
-      }
-      stokeChart = echarts.init(stokeContainer);
-      stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
-    };
+// stokeCharts
+let stokeContainer: HTMLElement;
+let stokeChart: echarts.ECharts;
+const renderStokeChart = () => {
+  if (!stokeContainer) {
+    stokeContainer = document.getElementById('stokeContainer');
+  }
+  stokeChart = echarts.init(stokeContainer);
+  stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value }));
+};
 
-    // monitorChart
-    let monitorContainer: HTMLElement;
-    let monitorChart: echarts.ECharts;
-    const renderMonitorChart = () => {
-      if (!monitorContainer) {
-        monitorContainer = document.getElementById('monitorContainer');
-      }
-      monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
-    };
+// monitorChart
+let monitorContainer: HTMLElement;
+let monitorChart: echarts.ECharts;
+const renderMonitorChart = () => {
+  if (!monitorContainer) {
+    monitorContainer = document.getElementById('monitorContainer');
+  }
+  monitorChart = echarts.init(monitorContainer);
+  monitorChart.setOption(getLineChartDataSet({ ...chartColors.value }));
+};
 
-    // monitorChart
-    let countContainer: HTMLElement;
-    let countChart: echarts.ECharts;
-    const renderCountChart = () => {
-      if (!countContainer) {
-        countContainer = document.getElementById('countContainer');
-      }
-      countChart = echarts.init(countContainer);
-      countChart.setOption(getPieChartDataSet(chartColors.value));
-    };
+// monitorChart
+let countContainer: HTMLElement;
+let countChart: echarts.ECharts;
+const renderCountChart = () => {
+  if (!countContainer) {
+    countContainer = document.getElementById('countContainer');
+  }
+  countChart = echarts.init(countContainer);
+  countChart.setOption(getPieChartDataSet(chartColors.value));
+};
 
-    const renderCharts = () => {
-      renderMoneyChart();
-      renderRefundChart();
-      renderStokeChart();
-      renderMonitorChart();
-      renderCountChart();
-    };
+const renderCharts = () => {
+  renderMoneyChart();
+  renderRefundChart();
+  renderStokeChart();
+  renderMonitorChart();
+  renderCountChart();
+};
 
-    // chartSize update
-    const updateContainer = () => {
-      if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
-        resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
-      } else if (document.documentElement.clientWidth < 1080) {
-        resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
-      } else {
-        resizeTime.value = 1;
-      }
-      moneyChart.resize({
-        width: resizeTime.value * 120,
-        height: resizeTime.value * 66,
-      });
-      refundChart.resize({
-        width: resizeTime.value * 120,
-        height: resizeTime.value * 42,
-      });
-      stokeChart.resize({
-        width: stokeContainer.clientWidth,
-        height: stokeContainer.clientHeight,
-      });
-      monitorChart.resize({
-        width: monitorContainer.clientWidth,
-        height: resizeTime.value * 326,
-      });
-      countChart.resize({
-        width: resizeTime.value * 326,
-        height: resizeTime.value * 326,
-      });
-    };
+// chartSize update
+const updateContainer = () => {
+  if (document.documentElement.clientWidth >= 1400 && document.documentElement.clientWidth < 1920) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 2080).toFixed(2));
+  } else if (document.documentElement.clientWidth < 1080) {
+    resizeTime.value = Number((document.documentElement.clientWidth / 1080).toFixed(2));
+  } else {
+    resizeTime.value = 1;
+  }
+  moneyChart.resize({
+    width: resizeTime.value * 120,
+    height: resizeTime.value * 66,
+  });
+  refundChart.resize({
+    width: resizeTime.value * 120,
+    height: resizeTime.value * 42,
+  });
+  stokeChart.resize({
+    width: stokeContainer.clientWidth,
+    height: stokeContainer.clientHeight,
+  });
+  monitorChart.resize({
+    width: monitorContainer.clientWidth,
+    height: resizeTime.value * 326,
+  });
+  countChart.resize({
+    width: resizeTime.value * 326,
+    height: resizeTime.value * 326,
+  });
+};
 
-    onMounted(() => {
-      renderCharts();
-      nextTick(() => {
-        updateContainer();
-      });
-      window.addEventListener('resize', updateContainer, false);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateContainer);
-    });
-
-    const currentMonth = ref(getThisMonth());
-
-    watch(
-      () => store.state.setting.brandTheme,
-      () => {
-        changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
-      },
-    );
-
-    watch(
-      () => store.state.setting.mode,
-      () => {
-        [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
-          item.dispose();
-        });
-
-        renderCharts();
-      },
-    );
-
-    return {
-      resizeTime,
-      currentMonth,
-      LAST_7_DAYS,
-      PANE_LIST,
-      BUY_TEND_LIST,
-      SALE_TEND_LIST,
-      SALE_COLUMNS,
-      BUY_COLUMNS,
-      onCurrencyChange(checkedValues: string[]) {
-        currentMonth.value = getThisMonth(checkedValues);
-        monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
-      },
-      onStokeDataChange(checkedValues: string[]) {
-        stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
-      },
-      rehandleClickOp(val: MouseEvent) {
-        console.log(val);
-      },
-      getRankClass(index: number) {
-        return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
-      },
-    };
-  },
+onMounted(() => {
+  renderCharts();
+  nextTick(() => {
+    updateContainer();
+  });
+  window.addEventListener('resize', updateContainer, false);
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+const currentMonth = ref(getThisMonth());
+
+watch(
+  () => store.state.setting.brandTheme,
+  () => {
+    changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
+  },
+);
+
+watch(
+  () => store.state.setting.mode,
+  () => {
+    [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
+      item.dispose();
+    });
+
+    renderCharts();
+  },
+);
+
+const onCurrencyChange = (checkedValues: string[]) => {
+  currentMonth.value = getThisMonth(checkedValues);
+  monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value }));
+};
+const onStokeDataChange = (checkedValues: string[]) => {
+  stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value }));
+};
+const rehandleClickOp = (val: MouseEvent) => {
+  console.log(val);
+};
+const getRankClass = (index: number) => {
+  return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
+};
 </script>
 <style lang="less" scoped>
 @import './index.less';
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index 0d37d0f..28fb4c2 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -57,8 +57,8 @@
     </card>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -76,91 +76,77 @@ import Card from '@/components/card/index.vue';
 
 echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
 
-export default defineComponent({
-  name: 'DashboardDetail',
-  components: {
-    Card,
-    Trend,
-    ProductCard,
-  },
-  setup() {
-    const store = useStore();
-    const chartColors = computed(() => store.state.setting.chartColors);
-    // lineChart logic
-    let lineContainer: HTMLElement;
-    let lineChart: echarts.ECharts;
-    const renderLineChart = () => {
-      lineContainer = document.getElementById('lineContainer');
-      lineChart = echarts.init(lineContainer);
-      lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
-    };
+const store = useStore();
+const chartColors = computed(() => store.state.setting.chartColors);
+// lineChart logic
+let lineContainer: HTMLElement;
+let lineChart: echarts.ECharts;
+const renderLineChart = () => {
+  lineContainer = document.getElementById('lineContainer');
+  lineChart = echarts.init(lineContainer);
+  lineChart.setOption(getFolderLineDataSet({ ...chartColors.value }));
+};
 
-    // scatterChart logic
-    let scatterContainer: HTMLElement;
-    let scatterChart: echarts.ECharts;
-    const renderScatterChart = () => {
-      scatterContainer = document.getElementById('scatterContainer');
-      scatterChart = echarts.init(scatterContainer);
-      scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
-    };
+// scatterChart logic
+let scatterContainer: HTMLElement;
+let scatterChart: echarts.ECharts;
+const renderScatterChart = () => {
+  scatterContainer = document.getElementById('scatterContainer');
+  scatterChart = echarts.init(scatterContainer);
+  scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
+};
 
-    // chartSize update
-    const updateContainer = () => {
-      lineChart?.resize({
-        width: lineContainer.clientWidth,
-        height: lineContainer.clientHeight,
-      });
-      scatterChart?.resize({
-        width: scatterContainer.clientWidth,
-        height: scatterContainer.clientHeight,
-      });
-    };
+// chartSize update
+const updateContainer = () => {
+  lineChart?.resize({
+    width: lineContainer.clientWidth,
+    height: lineContainer.clientHeight,
+  });
+  scatterChart?.resize({
+    width: scatterContainer.clientWidth,
+    height: scatterContainer.clientHeight,
+  });
+};
 
-    const renderCharts = () => {
-      renderScatterChart();
-      renderLineChart();
-    };
+const renderCharts = () => {
+  renderScatterChart();
+  renderLineChart();
+};
 
-    onMounted(() => {
-      renderCharts();
-      window.addEventListener('resize', updateContainer, false);
-      nextTick(() => {
-        updateContainer();
-      });
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateContainer);
-    });
-
-    watch(
-      () => store.state.setting.mode,
-      () => {
-        renderCharts();
-      },
-    );
-
-    watch(
-      () => store.state.setting.brandTheme,
-      () => {
-        changeChartsTheme([lineChart, scatterChart]);
-      },
-    );
-
-    return {
-      LAST_7_DAYS,
-      PRODUCT_LIST,
-      PANE_LIST_DATA,
-      onSatisfyChange() {
-        scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
-      },
-      onMaterialChange(value: string[]) {
-        const chartColors = computed(() => store.state.setting.chartColors);
-        lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
-      },
-    };
-  },
+onMounted(() => {
+  renderCharts();
+  window.addEventListener('resize', updateContainer, false);
+  nextTick(() => {
+    updateContainer();
+  });
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+watch(
+  () => store.state.setting.mode,
+  () => {
+    renderCharts();
+  },
+);
+
+watch(
+  () => store.state.setting.brandTheme,
+  () => {
+    changeChartsTheme([lineChart, scatterChart]);
+  },
+);
+
+const onSatisfyChange = () => {
+  scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
+};
+
+const onMaterialChange = (value: string[]) => {
+  const chartColors = computed(() => store.state.setting.chartColors);
+  lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
+};
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index 175497f..f7d0fd6 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -109,91 +109,71 @@
     </t-dialog>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { prefix } from '@/config/global';
-import { BASE_INFO_DATA, TABLE_COLUMNS_DATA, PRODUCT_LIST } from './constants';
+import { BASE_INFO_DATA, TABLE_COLUMNS_DATA as columns, PRODUCT_LIST } from './constants';
 import request from '@/utils/request';
 import { ResDataType } from '@/interface';
 
 import Card from '@/components/card/index.vue';
 import Product from './components/Product.vue';
 
-export default defineComponent({
-  name: 'DetailAdvanced',
-  components: {
-    Card,
-    Product,
-  },
-  setup() {
-    const data = ref([]);
-    const pagination = ref({
-      defaultPageSize: 10,
-      total: 100,
-      defaultCurrent: 1,
-    });
-
-    const updateCurrent = ref(0);
-
-    const stepUpdate = () => {
-      setInterval(() => {
-        if (updateCurrent.value > 5) {
-          updateCurrent.value = -1;
-        }
-        updateCurrent.value += 1;
-      }, 2000);
-    };
-
-    const fetchData = async () => {
-      try {
-        const res: ResDataType = await request.get('/api/get-purchase-list');
-        if (res.code === 0) {
-          const { list = [] } = res.data;
-          data.value = list;
-          pagination.value = {
-            ...pagination.value,
-            total: list.length,
-          };
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    onMounted(() => {
-      stepUpdate();
-      fetchData();
-    });
-
-    const visible = ref(false);
-
-    return {
-      BASE_INFO_DATA,
-      prefix,
-      PRODUCT_LIST,
-      columns: TABLE_COLUMNS_DATA,
-      data,
-      pagination,
-      visible,
-      updateCurrent,
-      sortChange(val) {
-        console.log(val);
-      },
-      rehandleChange(changeParams, triggerAndData) {
-        console.log('统一Change', changeParams, triggerAndData);
-      },
-      listClick() {
-        visible.value = true;
-      },
-      deleteClickOp(columns) {
-        data.value.splice(columns.rowIndex, 1);
-      },
-      onConfirm() {
-        visible.value = false;
-      },
-    };
-  },
+const data = ref([]);
+const pagination = ref({
+  defaultPageSize: 10,
+  total: 100,
+  defaultCurrent: 1,
 });
+
+const updateCurrent = ref(0);
+
+const stepUpdate = () => {
+  setInterval(() => {
+    if (updateCurrent.value > 5) {
+      updateCurrent.value = -1;
+    }
+    updateCurrent.value += 1;
+  }, 2000);
+};
+
+const fetchData = async () => {
+  try {
+    const res: ResDataType = await request.get('/api/get-purchase-list');
+    if (res.code === 0) {
+      const { list = [] } = res.data;
+      data.value = list;
+      pagination.value = {
+        ...pagination.value,
+        total: list.length,
+      };
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(() => {
+  stepUpdate();
+  fetchData();
+});
+
+const visible = ref(false);
+const sortChange = (val) => {
+  console.log(val);
+};
+const rehandleChange = (changeParams, triggerAndData) => {
+  console.log('统一Change', changeParams, triggerAndData);
+};
+const listClick = () => {
+  visible.value = true;
+};
+const deleteClickOp = (columns) => {
+  data.value.splice(columns.rowIndex, 1);
+};
+const onConfirm = () => {
+  visible.value = false;
+};
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/detail/base/index.vue b/src/pages/detail/base/index.vue
index 8292b60..447f5da 100644
--- a/src/pages/detail/base/index.vue
+++ b/src/pages/detail/base/index.vue
@@ -26,8 +26,7 @@
     </card>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Card from '@/components/card/index.vue';
 
 const BASE_INFO_DATA = [
@@ -108,16 +107,6 @@ const BASE_INFO_DATA = [
     type: null,
   },
 ];
-
-export default defineComponent({
-  name: 'ListBase',
-  components: { Card },
-  data() {
-    return {
-      BASE_INFO_DATA,
-    };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue
index 5c349f9..fa79f95 100644
--- a/src/pages/detail/deploy/index.vue
+++ b/src/pages/detail/deploy/index.vue
@@ -68,8 +68,8 @@
     </t-dialog>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -78,7 +78,7 @@ import { BarChart, LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 
 import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
-import { BASE_INFO_DATA, TABLE_COLUMNS } from './constants';
+import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
 
 import { prefix } from '@/config/global';
 import Card from '@/components/card/index.vue';
@@ -96,118 +96,104 @@ echarts.use([
   CanvasRenderer,
 ]);
 
-export default defineComponent({
-  name: 'DetailDeploy',
-  components: { Card },
-  setup() {
-    const store = useStore();
+const store = useStore();
 
-    const chartColors = computed(() => store.state.setting.chartColors);
-    const data = ref([]);
-    const pagination = ref({
-      defaultPageSize: 10,
-      total: 100,
-      defaultCurrent: 1,
-    });
-
-    const fetchData = async () => {
-      try {
-        const res: ResDataType = await request.get('/api/get-project-list');
-        if (res.code === 0) {
-          const { list = [] } = res.data;
-          data.value = list;
-          pagination.value = {
-            ...pagination.value,
-            total: list.length,
-          };
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    };
-    const visible = ref(false);
-
-    // monitorChart logic
-    let monitorContainer: HTMLElement;
-    let monitorChart: echarts.ECharts;
-    onMounted(() => {
-      monitorContainer = document.getElementById('monitorContainer');
-      monitorChart = echarts.init(monitorContainer);
-      monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
-      setInterval(() => {
-        monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
-      }, 3000);
-    });
-
-    // dataChart logic
-    let dataContainer: HTMLElement;
-    let dataChart: echarts.ECharts;
-    onMounted(() => {
-      dataContainer = document.getElementById('dataContainer');
-      dataChart = echarts.init(dataContainer);
-      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
-    });
-
-    const intervalTimer = null;
-
-    /// / chartSize update
-    const updateContainer = () => {
-      monitorChart.resize({
-        width: monitorContainer.clientWidth,
-        height: monitorContainer.clientHeight,
-      });
-      dataChart.resize({
-        width: dataContainer.clientWidth,
-        height: dataContainer.clientHeight,
-      });
-    };
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateContainer);
-      clearInterval(intervalTimer);
-    });
-
-    const onAlertChange = () => {
-      dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
-    };
-
-    onMounted(() => {
-      fetchData();
-      window.addEventListener('resize', updateContainer, false);
-    });
-
-    watch(
-      () => store.state.setting.brandTheme,
-      () => {
-        changeChartsTheme([monitorChart, dataChart]);
-      },
-    );
-    return {
-      prefix,
-      BASE_INFO_DATA,
-      columns: TABLE_COLUMNS,
-      data,
-      pagination,
-      visible,
-      sortChange(val) {
-        console.log(val);
-      },
-      rehandleChange(changeParams, triggerAndData) {
-        console.log('统一Change', changeParams, triggerAndData);
-      },
-      listClick() {
-        visible.value = true;
-      },
-      onConfirm() {
-        visible.value = false;
-      },
-      deleteClickOp(e) {
-        data.value.splice(e.rowIndex, 1);
-      },
-      onAlertChange,
-    };
-  },
+const chartColors = computed(() => store.state.setting.chartColors);
+const data = ref([]);
+const pagination = ref({
+  defaultPageSize: 10,
+  total: 100,
+  defaultCurrent: 1,
 });
+
+const fetchData = async () => {
+  try {
+    const res: ResDataType = await request.get('/api/get-project-list');
+    if (res.code === 0) {
+      const { list = [] } = res.data;
+      data.value = list;
+      pagination.value = {
+        ...pagination.value,
+        total: list.length,
+      };
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+const visible = ref(false);
+
+// monitorChart logic
+let monitorContainer: HTMLElement;
+let monitorChart: echarts.ECharts;
+onMounted(() => {
+  monitorContainer = document.getElementById('monitorContainer');
+  monitorChart = echarts.init(monitorContainer);
+  monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
+  setInterval(() => {
+    monitorChart.setOption(getSmoothLineDataSet({ ...chartColors.value }));
+  }, 3000);
+});
+
+// dataChart logic
+let dataContainer: HTMLElement;
+let dataChart: echarts.ECharts;
+onMounted(() => {
+  dataContainer = document.getElementById('dataContainer');
+  dataChart = echarts.init(dataContainer);
+  dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
+});
+
+const intervalTimer = null;
+
+/// / chartSize update
+const updateContainer = () => {
+  monitorChart.resize({
+    width: monitorContainer.clientWidth,
+    height: monitorContainer.clientHeight,
+  });
+  dataChart.resize({
+    width: dataContainer.clientWidth,
+    height: dataContainer.clientHeight,
+  });
+};
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+  clearInterval(intervalTimer);
+});
+
+const onAlertChange = () => {
+  dataChart.setOption(get2ColBarChartDataSet({ ...chartColors.value }));
+};
+
+onMounted(() => {
+  fetchData();
+  window.addEventListener('resize', updateContainer, false);
+});
+
+watch(
+  () => store.state.setting.brandTheme,
+  () => {
+    changeChartsTheme([monitorChart, dataChart]);
+  },
+);
+
+const sortChange = (val) => {
+  console.log(val);
+};
+const rehandleChange = (changeParams, triggerAndData) => {
+  console.log('统一Change', changeParams, triggerAndData);
+};
+const listClick = () => {
+  visible.value = true;
+};
+const onConfirm = () => {
+  visible.value = false;
+};
+const deleteClickOp = (e) => {
+  data.value.splice(e.rowIndex, 1);
+};
 </script>
 <style lang="less" scoped>
 @import url('../base/index.less');
diff --git a/src/pages/detail/secondary/index.vue b/src/pages/detail/secondary/index.vue
index a517e32..731f671 100644
--- a/src/pages/detail/secondary/index.vue
+++ b/src/pages/detail/secondary/index.vue
@@ -49,8 +49,8 @@
     />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, computed, ComputedRef } from 'vue';
+<script setup lang="ts">
+import { ref, computed, ComputedRef } from 'vue';
 import { useStore } from 'vuex';
 import { NOTIFICATION_TYPES } from '@/constants';
 import { NotificationItem } from '@/interface';
@@ -71,68 +71,48 @@ const TAB_LIST = [
   },
 ];
 
-export default defineComponent({
-  name: 'DetailSecondary',
-  components: {
-    EmptyIcon,
-  },
-  setup() {
-    const tabValue = ref('msgData');
+const tabValue = ref('msgData');
 
-    const visible = ref(false);
-    const selectedItem = ref<NotificationItem>();
+const visible = ref(false);
+const selectedItem = ref<NotificationItem>();
 
-    const store = useStore();
+const store = useStore();
 
-    const { msgData } = store.state.notification;
+const { msgData } = store.state.notification;
 
-    const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
-      if (tabValue.value === 'msgData') return msgData;
-      if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
-      if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
-      return [];
-    });
-
-    const handleClickDeleteBtn = (item: NotificationItem) => {
-      visible.value = true;
-      selectedItem.value = item;
-    };
-
-    const setReadStatus = (item: NotificationItem) => {
-      const changeMsg = msgData;
-      changeMsg.forEach((e: NotificationItem) => {
-        if (e.id === item.id) {
-          if (e.status) e.status = false;
-        }
-      });
-      store.commit('notification/setMsgData', changeMsg);
-    };
-
-    const deleteMsg = () => {
-      const item = selectedItem.value;
-      const changeMsg = msgData;
-      changeMsg.forEach((e: NotificationItem, index: number) => {
-        if (e.id === item?.id) {
-          changeMsg.splice(index, 1);
-        }
-      });
-      visible.value = false;
-      store.commit('notification/setMsgData', changeMsg);
-    };
-
-    return {
-      TAB_LIST,
-      NOTIFICATION_TYPES,
-      visible,
-      selectedItem,
-      tabValue,
-      msgDataList,
-      handleClickDeleteBtn,
-      setReadStatus,
-      deleteMsg,
-    };
-  },
+const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
+  if (tabValue.value === 'msgData') return msgData;
+  if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
+  if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
+  return [];
 });
+
+const handleClickDeleteBtn = (item: NotificationItem) => {
+  visible.value = true;
+  selectedItem.value = item;
+};
+
+const setReadStatus = (item: NotificationItem) => {
+  const changeMsg = msgData;
+  changeMsg.forEach((e: NotificationItem) => {
+    if (e.id === item.id) {
+      if (e.status) e.status = false;
+    }
+  });
+  store.commit('notification/setMsgData', changeMsg);
+};
+
+const deleteMsg = () => {
+  const item = selectedItem.value;
+  const changeMsg = msgData;
+  changeMsg.forEach((e: NotificationItem, index: number) => {
+    if (e.id === item?.id) {
+      changeMsg.splice(index, 1);
+    }
+  });
+  visible.value = false;
+  store.commit('notification/setMsgData', changeMsg);
+};
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue
index 596e7ef..84af7fe 100644
--- a/src/pages/form/base/index.vue
+++ b/src/pages/form/base/index.vue
@@ -154,50 +154,39 @@
     </div>
   </t-form>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { FORM_RULES, INITIAL_DATA, TYPE_OPTIONS, PARTY_A_OPTIONS, PARTY_B_OPTIONS } from './constants';
 
-export default defineComponent({
-  name: 'FormBase',
-  setup() {
-    const formData = ref({ ...INITIAL_DATA });
-    return {
-      TYPE_OPTIONS,
-      PARTY_A_OPTIONS,
-      PARTY_B_OPTIONS,
-      FORM_RULES,
-      formData,
-      onReset() {
-        MessagePlugin.warning('取消新建');
-      },
-      onSubmit({ validateResult }) {
-        if (validateResult === true) {
-          MessagePlugin.success('新建成功');
-        }
-      },
-      beforeUpload(file) {
-        if (!/\.(pdf)$/.test(file.name)) {
-          MessagePlugin.warning('请上传pdf文件');
-          return false;
-        }
-        if (file.size > 60 * 1024 * 1024) {
-          MessagePlugin.warning('上传文件不能大于60M');
-          return false;
-        }
-        return true;
-      },
-      handleFail({ file }) {
-        MessagePlugin.error(`文件 ${file.name} 上传失败`);
-      },
-      // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
-      formatResponse(res) {
-        return { ...res, error: '上传失败，请重试', url: res.url };
-      },
-    };
-  },
-});
+const formData = ref({ ...INITIAL_DATA });
+
+const onReset = () => {
+  MessagePlugin.warning('取消新建');
+};
+const onSubmit = ({ validateResult }) => {
+  if (validateResult === true) {
+    MessagePlugin.success('新建成功');
+  }
+};
+const beforeUpload = (file) => {
+  if (!/\.(pdf)$/.test(file.name)) {
+    MessagePlugin.warning('请上传pdf文件');
+    return false;
+  }
+  if (file.size > 60 * 1024 * 1024) {
+    MessagePlugin.warning('上传文件不能大于60M');
+    return false;
+  }
+  return true;
+};
+const handleFail = ({ file }) => {
+  MessagePlugin.error(`文件 ${file.name} 上传失败`);
+};
+// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
+const formatResponse = (res) => {
+  return { ...res, error: '上传失败，请重试', url: res.url };
+};
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue
index 37e0dfa..e9f57f3 100644
--- a/src/pages/form/step/index.vue
+++ b/src/pages/form/step/index.vue
@@ -139,8 +139,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ValidateResultContext } from 'tdesign-vue-next';
 import Card from '@/components/card/index.vue';
@@ -155,53 +155,36 @@ import {
   INITIAL_DATA3,
 } from './constants';
 
-export default defineComponent({
-  name: 'FormStep',
-  components: { Card },
-  setup() {
-    const formData1 = ref({ ...INITIAL_DATA1 });
-    const formData2 = ref({ ...INITIAL_DATA2 });
-    const formData3 = ref({ ...INITIAL_DATA3 });
-    const activeForm = ref(0);
+const formData1 = ref({ ...INITIAL_DATA1 });
+const formData2 = ref({ ...INITIAL_DATA2 });
+const formData3 = ref({ ...INITIAL_DATA3 });
+const activeForm = ref(0);
 
-    const amount = computed(() => {
-      if (formData1.value.name === '1') {
-        return '565421';
-      }
-      if (formData1.value.name === '2') {
-        return '278821';
-      }
-      if (formData1.value.name === '3') {
-        return '109824';
-      }
-      return '--';
-    });
-
-    return {
-      NAME_OPTIONS,
-      TYPE_OPTIONS,
-      ADDRESS_OPTIONS,
-      FORM_RULES,
-      formData1,
-      formData2,
-      formData3,
-      activeForm,
-      amount,
-      onSubmit(result: ValidateResultContext<FormData>, val: number) {
-        if (result.validateResult === true) {
-          activeForm.value = val;
-        }
-      },
-      onReset(val: number) {
-        activeForm.value = val;
-      },
-      complete() {
-        const router = useRouter();
-        router.replace({ path: '/detail/advanced' });
-      },
-    };
-  },
+const amount = computed(() => {
+  if (formData1.value.name === '1') {
+    return '565421';
+  }
+  if (formData1.value.name === '2') {
+    return '278821';
+  }
+  if (formData1.value.name === '3') {
+    return '109824';
+  }
+  return '--';
 });
+
+const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
+  if (result.validateResult === true) {
+    activeForm.value = val;
+  }
+};
+const onReset = (val: number) => {
+  activeForm.value = val;
+};
+const complete = () => {
+  const router = useRouter();
+  router.replace({ path: '/detail/advanced' });
+};
 </script>
 <style lang="less" scoped>
 @import url('./index.less');
diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue
index 19692eb..5d12d5c 100644
--- a/src/pages/list/base/index.vue
+++ b/src/pages/list/base/index.vue
@@ -64,8 +64,8 @@
     />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, onMounted, computed } from 'vue';
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { SearchIcon } from 'tdesign-icons-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -78,121 +78,96 @@ import request from '@/utils/request';
 
 import { COLUMNS } from './constants';
 
-export default defineComponent({
-  name: 'ListBaseCard',
-  components: {
-    Card,
-    SearchIcon,
-    Trend,
-  },
-  setup() {
-    const data = ref([]);
-    const pagination = ref({
-      defaultPageSize: 20,
-      total: 100,
-      defaultCurrent: 1,
-    });
-
-    const searchValue = ref('');
-
-    const dataLoading = ref(false);
-    const fetchData = async () => {
-      dataLoading.value = true;
-      try {
-        const res: ResDataType = await request.get('/api/get-list');
-        if (res.code === 0) {
-          const { list = [] } = res.data;
-          data.value = list;
-          pagination.value = {
-            ...pagination.value,
-            total: list.length,
-          };
-        }
-      } catch (e) {
-        console.log(e);
-      } finally {
-        dataLoading.value = false;
-      }
-    };
-
-    const deleteIdx = ref(-1);
-    const confirmBody = computed(() => {
-      if (deleteIdx.value > -1) {
-        const { name } = data.value[deleteIdx.value];
-        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
-      }
-      return '';
-    });
-
-    onMounted(() => {
-      fetchData();
-    });
-
-    const confirmVisible = ref(false);
-
-    const selectedRowKeys = ref([1, 2]);
-
-    const router = useRouter();
-
-    const resetIdx = () => {
-      deleteIdx.value = -1;
-    };
-
-    const onConfirmDelete = () => {
-      // 真实业务请发起请求
-      data.value.splice(deleteIdx.value, 1);
-      pagination.value.total = data.value.length;
-      const selectedIdx = selectedRowKeys.value.indexOf(deleteIdx.value);
-      if (selectedIdx > -1) {
-        selectedRowKeys.value.splice(selectedIdx, 1);
-      }
-      confirmVisible.value = false;
-      MessagePlugin.success('删除成功');
-      resetIdx();
-    };
-
-    const onCancel = () => {
-      resetIdx();
-    };
-
-    return {
-      CONTRACT_STATUS,
-      CONTRACT_TYPES,
-      CONTRACT_PAYMENT_TYPES,
-      COLUMNS,
-      data,
-      searchValue,
-      dataLoading,
-      pagination,
-      confirmBody,
-      confirmVisible,
-      rowKey: 'index',
-      onConfirmDelete,
-      onCancel,
-      selectedRowKeys,
-      rehandleSelectChange(val: number[]) {
-        selectedRowKeys.value = val;
-      },
-      rehandlePageChange(curr, pageInfo) {
-        console.log('分页变化', curr, pageInfo);
-      },
-      rehandleChange(changeParams, triggerAndData) {
-        console.log('统一Change', changeParams, triggerAndData);
-      },
-      handleClickDetail() {
-        router.push('/detail/base');
-      },
-      handleSetupContract() {
-        router.push('/form/base');
-      },
-      handleClickDelete(row: { rowIndex: any }) {
-        deleteIdx.value = row.rowIndex;
-        confirmVisible.value = true;
-      },
-    };
-  },
-  methods: {},
+const data = ref([]);
+const pagination = ref({
+  defaultPageSize: 20,
+  total: 100,
+  defaultCurrent: 1,
 });
+
+const searchValue = ref('');
+
+const dataLoading = ref(false);
+const fetchData = async () => {
+  dataLoading.value = true;
+  try {
+    const res: ResDataType = await request.get('/api/get-list');
+    if (res.code === 0) {
+      const { list = [] } = res.data;
+      data.value = list;
+      pagination.value = {
+        ...pagination.value,
+        total: list.length,
+      };
+    }
+  } catch (e) {
+    console.log(e);
+  } finally {
+    dataLoading.value = false;
+  }
+};
+
+const deleteIdx = ref(-1);
+const confirmBody = computed(() => {
+  if (deleteIdx.value > -1) {
+    const { name } = data.value[deleteIdx.value];
+    return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
+  }
+  return '';
+});
+
+onMounted(() => {
+  fetchData();
+});
+
+const confirmVisible = ref(false);
+
+const selectedRowKeys = ref([1, 2]);
+
+const router = useRouter();
+
+const resetIdx = () => {
+  deleteIdx.value = -1;
+};
+
+const onConfirmDelete = () => {
+  // 真实业务请发起请求
+  data.value.splice(deleteIdx.value, 1);
+  pagination.value.total = data.value.length;
+  const selectedIdx = selectedRowKeys.value.indexOf(deleteIdx.value);
+  if (selectedIdx > -1) {
+    selectedRowKeys.value.splice(selectedIdx, 1);
+  }
+  confirmVisible.value = false;
+  MessagePlugin.success('删除成功');
+  resetIdx();
+};
+
+const onCancel = () => {
+  resetIdx();
+};
+
+const rowKey = 'index';
+
+const rehandleSelectChange = (val: number[]) => {
+  selectedRowKeys.value = val;
+};
+const rehandlePageChange = (curr, pageInfo) => {
+  console.log('分页变化', curr, pageInfo);
+};
+const rehandleChange = (changeParams, triggerAndData) => {
+  console.log('统一Change', changeParams, triggerAndData);
+};
+const handleClickDetail = () => {
+  router.push('/detail/base');
+};
+const handleSetupContract = () => {
+  router.push('/form/base');
+};
+const handleClickDelete = (row: { rowIndex: any }) => {
+  deleteIdx.value = row.rowIndex;
+  confirmVisible.value = true;
+};
 </script>
 <style lang="less" scoped>
 @import '@/style/variables';
diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue
index cb1fba9..0775991 100644
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@@ -58,8 +58,8 @@
     />
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
 import { MessagePlugin } from 'tdesign-vue-next';
 import Card from '@/components/card/Card.vue';
@@ -76,88 +76,68 @@ const INITIAL_DATA = {
   amount: 0,
 };
 
-export default defineComponent({
-  name: 'ListBase',
-  components: {
-    SearchIcon,
-    Card,
-    DialogForm,
-  },
-  setup() {
-    const pagination = ref({ current: 1, pageSize: 12, total: 0 });
-    const deleteProduct = ref(undefined);
+const pagination = ref({ current: 1, pageSize: 12, total: 0 });
+const deleteProduct = ref(undefined);
 
-    const productList = ref([]);
-    const dataLoading = ref(true);
+const productList = ref([]);
+const dataLoading = ref(true);
 
-    const fetchData = async () => {
-      try {
-        const res: ResDataType = await request.get('/api/get-card-list');
-        if (res.code === 0) {
-          const { list = [] } = res.data;
-          productList.value = list;
-          pagination.value = {
-            ...pagination.value,
-            total: list.length,
-          };
-        }
-      } catch (e) {
-        console.log(e);
-      } finally {
-        dataLoading.value = false;
-      }
-    };
+const fetchData = async () => {
+  try {
+    const res: ResDataType = await request.get('/api/get-card-list');
+    if (res.code === 0) {
+      const { list = [] } = res.data;
+      productList.value = list;
+      pagination.value = {
+        ...pagination.value,
+        total: list.length,
+      };
+    }
+  } catch (e) {
+    console.log(e);
+  } finally {
+    dataLoading.value = false;
+  }
+};
 
-    const confirmBody = computed(() =>
-      deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
-    );
+const confirmBody = computed(() =>
+  deleteProduct.value ? `确认删除后${deleteProduct.value.name}的所有产品信息将被清空, 且无法恢复` : '',
+);
 
-    onMounted(() => {
-      fetchData();
-    });
-
-    const formDialogVisible = ref(false);
-    const searchValue = ref('');
-    const confirmVisible = ref(false);
-    const formData = ref({ ...INITIAL_DATA });
-
-    return {
-      pagination,
-      productList,
-      dataLoading,
-      formDialogVisible,
-      confirmBody,
-      searchValue,
-      confirmVisible,
-      formData,
-      onPageSizeChange(size: number) {
-        pagination.value.pageSize = size;
-        pagination.value.current = 1;
-      },
-      onCurrentChange(current: number) {
-        pagination.value.current = current;
-      },
-      handleDeleteItem(product) {
-        confirmVisible.value = true;
-        deleteProduct.value = product;
-      },
-      onConfirmDelete() {
-        const { index } = deleteProduct.value;
-        productList.value.splice(index - 1, 1);
-        confirmVisible.value = false;
-        MessagePlugin.success('删除成功');
-      },
-      onCancel() {
-        deleteProduct.value = undefined;
-        formData.value = { ...INITIAL_DATA };
-      },
-      handleManageProduct(product) {
-        formDialogVisible.value = true;
-        formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
-      },
-    };
-  },
+onMounted(() => {
+  fetchData();
 });
+
+const formDialogVisible = ref(false);
+const searchValue = ref('');
+const confirmVisible = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.current = 1;
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.current = current;
+};
+const handleDeleteItem = (product) => {
+  confirmVisible.value = true;
+  deleteProduct.value = product;
+};
+const onConfirmDelete = () => {
+  const { index } = deleteProduct.value;
+  productList.value.splice(index - 1, 1);
+  confirmVisible.value = false;
+  MessagePlugin.success('删除成功');
+};
+const onCancel = () => {
+  deleteProduct.value = undefined;
+  formData.value = { ...INITIAL_DATA };
+};
+const handleManageProduct = (product) => {
+  formDialogVisible.value = true;
+  formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
+};
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';
diff --git a/src/pages/list/components/CommonTable.vue b/src/pages/list/components/CommonTable.vue
index a73d27d..e3894c4 100644
--- a/src/pages/list/components/CommonTable.vue
+++ b/src/pages/list/components/CommonTable.vue
@@ -102,8 +102,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import Trend from '@/components/trend/index.vue';
 import request from '@/utils/request';
@@ -167,115 +167,89 @@ const searchForm = {
   type: '',
 };
 
-export default defineComponent({
-  name: 'ListTable',
-  components: {
-    Trend,
-  },
-  setup() {
-    const formData = ref({ ...searchForm });
-    const tableConfig = {
-      rowKey: 'index',
-      verticalAlign: 'top',
-      hover: true,
-    };
-    const pagination = ref({
-      defaultPageSize: 20,
-      total: 100,
-      defaultCurrent: 1,
-    });
-    const confirmVisible = ref(false);
+const formData = ref({ ...searchForm });
+const rowKey = 'index';
+const verticalAlign = 'top';
+const hover = true;
 
-    const data = ref([]);
-
-    const dataLoading = ref(false);
-    const fetchData = async () => {
-      dataLoading.value = true;
-      try {
-        const res: ResDataType = await request.get('/api/get-list');
-        if (res.code === 0) {
-          const { list = [] } = res.data;
-          data.value = list;
-          pagination.value = {
-            ...pagination.value,
-            total: list.length,
-          };
-        }
-      } catch (e) {
-        console.log(e);
-      } finally {
-        dataLoading.value = false;
-      }
-    };
-
-    const deleteIdx = ref(-1);
-    const confirmBody = computed(() => {
-      if (deleteIdx.value > -1) {
-        const { name } = data.value[deleteIdx.value];
-        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
-      }
-      return '';
-    });
-
-    const resetIdx = () => {
-      deleteIdx.value = -1;
-    };
-
-    const onConfirmDelete = () => {
-      // 真实业务请发起请求
-      data.value.splice(deleteIdx.value, 1);
-      pagination.value.total = data.value.length;
-      confirmVisible.value = false;
-      MessagePlugin.success('删除成功');
-      resetIdx();
-    };
-
-    const onCancel = () => {
-      resetIdx();
-    };
-
-    onMounted(() => {
-      fetchData();
-    });
-
-    return {
-      data,
-      COLUMNS,
-      CONTRACT_STATUS,
-      CONTRACT_STATUS_OPTIONS,
-      CONTRACT_TYPES,
-      CONTRACT_TYPE_OPTIONS,
-      CONTRACT_PAYMENT_TYPES,
-      formData,
-      pagination,
-      confirmVisible,
-      confirmBody,
-      ...tableConfig,
-      onConfirmDelete,
-      onCancel,
-      dataLoading,
-      handleClickDelete({ row }) {
-        deleteIdx.value = row.rowIndex;
-        confirmVisible.value = true;
-      },
-      onReset(val) {
-        console.log(val);
-      },
-      onSubmit(val) {
-        console.log(val);
-      },
-      rehandlePageChange(curr, pageInfo) {
-        console.log('分页变化', curr, pageInfo);
-      },
-      rehandleChange(changeParams, triggerAndData) {
-        console.log('统一Change', changeParams, triggerAndData);
-      },
-      rehandleClickOp({ text, row }) {
-        console.log(text, row);
-      },
-    };
-  },
+const pagination = ref({
+  defaultPageSize: 20,
+  total: 100,
+  defaultCurrent: 1,
 });
+const confirmVisible = ref(false);
+
+const data = ref([]);
+
+const dataLoading = ref(false);
+const fetchData = async () => {
+  dataLoading.value = true;
+  try {
+    const res: ResDataType = await request.get('/api/get-list');
+    if (res.code === 0) {
+      const { list = [] } = res.data;
+      data.value = list;
+      pagination.value = {
+        ...pagination.value,
+        total: list.length,
+      };
+    }
+  } catch (e) {
+    console.log(e);
+  } finally {
+    dataLoading.value = false;
+  }
+};
+
+const deleteIdx = ref(-1);
+const confirmBody = computed(() => {
+  if (deleteIdx.value > -1) {
+    const { name } = data.value[deleteIdx.value];
+    return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
+  }
+  return '';
+});
+
+const resetIdx = () => {
+  deleteIdx.value = -1;
+};
+
+const onConfirmDelete = () => {
+  // 真实业务请发起请求
+  data.value.splice(deleteIdx.value, 1);
+  pagination.value.total = data.value.length;
+  confirmVisible.value = false;
+  MessagePlugin.success('删除成功');
+  resetIdx();
+};
+
+const onCancel = () => {
+  resetIdx();
+};
+
+onMounted(() => {
+  fetchData();
+});
+
+const handleClickDelete = ({ row }) => {
+  deleteIdx.value = row.rowIndex;
+  confirmVisible.value = true;
+};
+const onReset = (val) => {
+  console.log(val);
+};
+const onSubmit = (val) => {
+  console.log(val);
+};
+const rehandlePageChange = (curr, pageInfo) => {
+  console.log('分页变化', curr, pageInfo);
+};
+const rehandleChange = (changeParams, triggerAndData) => {
+  console.log('统一Change', changeParams, triggerAndData);
+};
+const rehandleClickOp = ({ text, row }) => {
+  console.log(text, row);
+};
 </script>
 
 <style lang="less">
diff --git a/src/pages/list/filter/index.vue b/src/pages/list/filter/index.vue
index ccc915f..2d4763a 100644
--- a/src/pages/list/filter/index.vue
+++ b/src/pages/list/filter/index.vue
@@ -1,14 +1,6 @@
 <template>
   <common-table />
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import CommonTable from '../components/CommonTable.vue';
-
-export default defineComponent({
-  name: 'ListBase',
-  components: {
-    CommonTable,
-  },
-});
 </script>
diff --git a/src/pages/list/tree/index.vue b/src/pages/list/tree/index.vue
index 28ac1fd..e23d888 100644
--- a/src/pages/list/tree/index.vue
+++ b/src/pages/list/tree/index.vue
@@ -15,38 +15,24 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { SearchIcon } from 'tdesign-icons-vue-next';
-import { prefix } from '@/config/global';
 
 import { TREE_DATA } from './constants';
 import CommonTable from '../components/CommonTable.vue';
 
-export default defineComponent({
-  name: 'ListTree',
-  components: {
-    SearchIcon,
-    CommonTable,
-  },
-  setup() {
-    const filterByText = ref();
-    const filterText = ref();
-    return {
-      prefix,
-      TREE_DATA,
-      expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
-      filterText,
-      filterByText,
-      onInput() {
-        filterByText.value = (node) => {
-          const rs = node.label.indexOf(filterText.value) >= 0;
-          return rs;
-        };
-      },
-    };
-  },
-});
+const filterByText = ref();
+const filterText = ref();
+
+const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
+
+const onInput = () => {
+  filterByText.value = (node) => {
+    const rs = node.label.indexOf(filterText.value) >= 0;
+    return rs;
+  };
+};
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';
diff --git a/src/pages/login/components/Header.vue b/src/pages/login/components/Header.vue
index f3df5cd..c02a2d1 100644
--- a/src/pages/login/components/Header.vue
+++ b/src/pages/login/components/Header.vue
@@ -15,34 +15,22 @@
   </header>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { useStore } from 'vuex';
 import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
 
-export default defineComponent({
-  components: { LogoFullIcon },
-  setup() {
-    const store = useStore();
-    const toggleSettingPanel = () => {
-      store.commit('setting/toggleSettingPanel', true);
-    };
+const store = useStore();
+const toggleSettingPanel = () => {
+  store.commit('setting/toggleSettingPanel', true);
+};
 
-    const navToGitHub = () => {
-      window.open('https://github.com/tencent/tdesign-vue-next-starter');
-    };
+const navToGitHub = () => {
+  window.open('https://github.com/tencent/tdesign-vue-next-starter');
+};
 
-    const navToHelper = () => {
-      window.open('http://tdesign.tencent.com/starter/docs/get-started');
-    };
-
-    return {
-      toggleSettingPanel,
-      navToGitHub,
-      navToHelper,
-    };
-  },
-});
+const navToHelper = () => {
+  window.open('http://tdesign.tencent.com/starter/docs/get-started');
+};
 </script>
 
 <style lang="less" scoped>
diff --git a/src/pages/login/components/Login.vue b/src/pages/login/components/Login.vue
index 760e803..3d5392e 100644
--- a/src/pages/login/components/Login.vue
+++ b/src/pages/login/components/Login.vue
@@ -70,8 +70,8 @@
   </t-form>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import QrcodeVue from 'qrcode.vue';
@@ -93,48 +93,32 @@ const FORM_RULES = {
   verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
 };
 
-export default defineComponent({
-  components: { QrcodeVue },
-  setup() {
-    const type = ref('password');
+const type = ref('password');
 
-    const formData = ref({ ...INITIAL_DATA });
-    const showPsw = ref(false);
+const formData = ref({ ...INITIAL_DATA });
+const showPsw = ref(false);
 
-    const [countDown, handleCounter] = useCounter();
+const [countDown, handleCounter] = useCounter();
 
-    const switchType = (val: string) => {
-      type.value = val;
-    };
+const switchType = (val: string) => {
+  type.value = val;
+};
 
-    const router = useRouter();
-    const store = useStore();
+const router = useRouter();
+const store = useStore();
 
-    const onSubmit = async ({ validateResult }) => {
-      if (validateResult === true) {
-        try {
-          await store.dispatch('user/login', formData.value);
-          MessagePlugin.success('登陆成功');
-          router.push({
-            path: '/dashboard/base',
-          });
-        } catch (e) {
-          console.log(e);
-          MessagePlugin.error(e.message);
-        }
-      }
-    };
-
-    return {
-      FORM_RULES,
-      formData,
-      showPsw,
-      type,
-      switchType,
-      countDown,
-      handleCounter,
-      onSubmit,
-    };
-  },
-});
+const onSubmit = async ({ validateResult }) => {
+  if (validateResult === true) {
+    try {
+      await store.dispatch('user/login', formData.value);
+      MessagePlugin.success('登陆成功');
+      router.push({
+        path: '/dashboard/base',
+      });
+    } catch (e) {
+      console.log(e);
+      MessagePlugin.error(e.message);
+    }
+  }
+};
 </script>
diff --git a/src/pages/login/components/Register.vue b/src/pages/login/components/Register.vue
index e0ebc0f..e37f359 100644
--- a/src/pages/login/components/Register.vue
+++ b/src/pages/login/components/Register.vue
@@ -70,8 +70,8 @@
   </t-form>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { defineEmits, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useCounter } from '@/hooks';
 
@@ -93,47 +93,30 @@ const FORM_RULES = {
   verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
 };
 
-export default defineComponent({
-  setup(props, ctx) {
-    const type = ref('phone');
-    const emailOptions = ref([]);
+const type = ref('phone');
 
-    const form = ref();
-    const formData = ref({ ...INITIAL_DATA });
+const form = ref();
+const formData = ref({ ...INITIAL_DATA });
 
-    const showPsw = ref(false);
+const showPsw = ref(false);
 
-    const [countDown, handleCounter] = useCounter();
+const [countDown, handleCounter] = useCounter();
 
-    const onSubmit = ({ validateResult }) => {
-      if (validateResult === true) {
-        if (!formData.value.checked) {
-          MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
-          return;
-        }
-        MessagePlugin.success('注册成功');
-        const { emit } = ctx;
-        emit('registerSuccess');
-      }
-    };
+const emit = defineEmits(['registerSuccess']);
 
-    const switchType = (val) => {
-      form.value.reset();
-      type.value = val;
-    };
+const onSubmit = ({ validateResult }) => {
+  if (validateResult === true) {
+    if (!formData.value.checked) {
+      MessagePlugin.error('请同意TDesign服务协议和TDesign 隐私声明');
+      return;
+    }
+    MessagePlugin.success('注册成功');
+    emit('registerSuccess');
+  }
+};
 
-    return {
-      FORM_RULES,
-      formData,
-      showPsw,
-      form,
-      type,
-      emailOptions,
-      countDown,
-      handleCounter,
-      onSubmit,
-      switchType,
-    };
-  },
-});
+const switchType = (val) => {
+  form.value.reset();
+  type.value = val;
+};
 </script>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 5dfb980..262125f 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -22,34 +22,18 @@
     <footer class="copyright">Copyright @ 2021-2022 Tencent. All Rights Reserved</footer>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 
 import Login from './components/Login.vue';
 import Register from './components/Register.vue';
 import LoginHeader from './components/Header.vue';
 import TdesignSetting from '@/layouts/setting.vue';
 
-export default defineComponent({
-  name: 'LoginIndex',
-  components: {
-    Login,
-    Register,
-    LoginHeader,
-    TdesignSetting,
-  },
-  setup() {
-    const type = ref('login');
-    const switchType = (val: string) => {
-      type.value = val;
-    };
-
-    return {
-      type,
-      switchType,
-    };
-  },
-});
+const type = ref('login');
+const switchType = (val: string) => {
+  type.value = val;
+};
 </script>
 <style lang="less">
 @import url('./index.less');
diff --git a/src/pages/result/403/index.vue b/src/pages/result/403/index.vue
index a56742b..470c07e 100644
--- a/src/pages/result/403/index.vue
+++ b/src/pages/result/403/index.vue
@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result403',
-  components: { Result },
-});
 </script>
diff --git a/src/pages/result/404/index.vue b/src/pages/result/404/index.vue
index ec2bff3..c41c3e6 100644
--- a/src/pages/result/404/index.vue
+++ b/src/pages/result/404/index.vue
@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result404',
-  components: { Result },
-});
 </script>
diff --git a/src/pages/result/500/index.vue b/src/pages/result/500/index.vue
index 11a2dc3..957960a 100644
--- a/src/pages/result/500/index.vue
+++ b/src/pages/result/500/index.vue
@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result500',
-  components: { Result },
-});
 </script>
diff --git a/src/pages/result/browser-incompatible/index.vue b/src/pages/result/browser-incompatible/index.vue
index 0ccd6c0..a83fbc8 100644
--- a/src/pages/result/browser-incompatible/index.vue
+++ b/src/pages/result/browser-incompatible/index.vue
@@ -19,15 +19,9 @@
   </result>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Result from '@/components/result/index.vue';
 import Thumbnail from '@/components/thumbnail/index.vue';
-
-export default defineComponent({
-  name: 'ResultBrowserIncompatible',
-  components: { Result, Thumbnail },
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';
diff --git a/src/pages/result/fail/index.vue b/src/pages/result/fail/index.vue
index 8f5e467..dd25ee6 100644
--- a/src/pages/result/fail/index.vue
+++ b/src/pages/result/fail/index.vue
@@ -10,14 +10,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ResultSuccess',
-});
-</script>
-
 <style lang="less" scoped>
 @import '@/style/variables.less';
 
diff --git a/src/pages/result/network-error/index.vue b/src/pages/result/network-error/index.vue
index 7264268..d79ce81 100644
--- a/src/pages/result/network-error/index.vue
+++ b/src/pages/result/network-error/index.vue
@@ -7,12 +7,6 @@
   </result>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'ResultNetworkError',
-  components: { Result },
-});
 </script>
diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue
index 4845484..88a52b8 100644
--- a/src/pages/result/success/index.vue
+++ b/src/pages/result/success/index.vue
@@ -10,14 +10,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ResultSuccess',
-});
-</script>
-
 <style lang="less" scoped>
 @import '@/style/variables.less';
 
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 3228fbf..9acbc24 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -89,8 +89,8 @@
     </t-col>
   </t-row>
 </template>
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@@ -109,84 +109,68 @@ import Card from '@/components/card/index.vue';
 
 echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);
 
-export default defineComponent({
-  components: {
-    Card,
-  },
-  setup() {
-    let lineContainer: HTMLElement;
-    let lineChart: echarts.ECharts;
-    const store = useStore();
-    const chartColors = computed(() => store.state.setting.chartColors);
+let lineContainer: HTMLElement;
+let lineChart: echarts.ECharts;
+const store = useStore();
+const chartColors = computed(() => store.state.setting.chartColors);
 
-    const onLineChange = (value) => {
-      lineChart.setOption(getFolderLineDataSet(value));
-    };
+const onLineChange = (value) => {
+  lineChart.setOption(getFolderLineDataSet(value));
+};
 
-    const initChart = () => {
-      lineContainer = document.getElementById('lineContainer');
-      lineChart = echarts.init(lineContainer);
-      lineChart.setOption({
-        grid: {
-          x: 30, // 默认是80px
-          y: 30, // 默认是60px
-          x2: 10, // 默认80px
-          y2: 30, // 默认60px
-        },
-        ...getFolderLineDataSet({ ...chartColors.value }),
-      });
-    };
+const initChart = () => {
+  lineContainer = document.getElementById('lineContainer');
+  lineChart = echarts.init(lineContainer);
+  lineChart.setOption({
+    grid: {
+      x: 30, // 默认是80px
+      y: 30, // 默认是60px
+      x2: 10, // 默认80px
+      y2: 30, // 默认60px
+    },
+    ...getFolderLineDataSet({ ...chartColors.value }),
+  });
+};
 
-    const updateContainer = () => {
-      lineChart?.resize({
-        width: lineContainer.clientWidth,
-        height: lineContainer.clientHeight,
-      });
-    };
+const updateContainer = () => {
+  lineChart?.resize({
+    width: lineContainer.clientWidth,
+    height: lineContainer.clientHeight,
+  });
+};
 
-    onMounted(() => {
-      nextTick(() => {
-        initChart();
-      });
-      window.addEventListener('resize', updateContainer, false);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateContainer);
-    });
-
-    const getIcon = (type) => {
-      switch (type) {
-        case 'a':
-          return ProductAIcon;
-        case 'b':
-          return ProductBIcon;
-        case 'c':
-          return ProductCIcon;
-        case 'd':
-          return ProductDIcon;
-        default:
-          return ProductAIcon;
-      }
-    };
-
-    watch(
-      () => store.state.setting.brandTheme,
-      () => {
-        changeChartsTheme([lineChart]);
-      },
-    );
-
-    return {
-      LAST_7_DAYS,
-      USER_INFO_LIST,
-      TEAM_MEMBERS,
-      PRODUCT_LIST,
-      onLineChange,
-      getIcon,
-    };
-  },
+onMounted(() => {
+  nextTick(() => {
+    initChart();
+  });
+  window.addEventListener('resize', updateContainer, false);
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainer);
+});
+
+const getIcon = (type) => {
+  switch (type) {
+    case 'a':
+      return ProductAIcon;
+    case 'b':
+      return ProductBIcon;
+    case 'c':
+      return ProductCIcon;
+    case 'd':
+      return ProductDIcon;
+    default:
+      return ProductAIcon;
+  }
+};
+
+watch(
+  () => store.state.setting.brandTheme,
+  () => {
+    changeChartsTheme([lineChart]);
+  },
+);
 </script>
 <style lang="less" scoped>
 @import url('./index.less');