Merge pull request #65 from Tencent/refactor/setupscript

Refactor/setupscript

.eslintrc

@@ -11,6 +11,10 @@
     "jest": true,
     "es6": true
   },
+  "globals": {
+    "defineProps": "readonly",
+    "defineEmits": "readonly"
+  },
   "plugins": [
     "vue",
     "@typescript-eslint"

.gitignore

@@ -20,3 +20,4 @@ yarn-error.log
 .stylelintcache
 yarn.lock
 package-lock.json
+pnpm-lock.yaml

cache.dockerfile

@@ -1,15 +0,0 @@
-# 选择一个 Base 镜像
-FROM node:16
-
-# 设置工作目录
-WORKDIR /space
-
-# 将 by 中的文件列表 COPY 过来
-COPY . .
-
-# 根据 COPY 过来的文件进行依赖的安装
-RUN npm i
-
-# 设置好需要的环境变量
-ENV NODE_PATH=/space/node_modules
-

docker/nginx.conf

@@ -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;
-    }
-}

package.json

@@ -23,9 +23,9 @@
     "nprogress": "^0.2.0",
     "qrcode.vue": "^3.2.2",
     "tdesign-icons-vue-next": "^0.0.6",
-    "tdesign-vue-next": "0.7.0-alpha.0",
+    "tdesign-vue-next": "0.8.1",
     "tvision-color": "^1.3.1",
-    "vue": "^3.1.5",
+    "vue": "^3.2.31",
     "vue-color-kit": "^1.0.5",
     "vue-router": "^4.0.11",
     "vue3-clipboard": "^1.0.0",

src/App.vue

@@ -1,13 +1,11 @@
 <template>
   <router-view :class="[mode]" />
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed, onMounted } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import config from '@/config/style';
 
-export default defineComponent({
-  setup() {
 const store = useStore();
 
 const mode = computed(() => {
@@ -17,11 +15,6 @@ export default defineComponent({
 onMounted(() => {
   store.dispatch('setting/changeTheme', { ...config });
 });
-    return {
-      mode,
-    };
-  },
-});
 </script>
 <style lang="less">
 @import '@/style/variables.less';

src/components/card/Card.vue

@@ -9,21 +9,15 @@
           <user-avatar-icon v-if="product.type === 4" />
           <laptop-icon v-if="product.type === 5" />
         </div>
-        <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">{{
+        <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">
-          product.isSetup ? '已启用' : '已停用'
+          {{ product.isSetup ? '已启用' : '已停用' }}
-        }}</t-tag>
+        </t-tag>
       </t-row>
-      <p class="list-card-item_detail--name">
+      <p class="list-card-item_detail--name">{{ product.name }}</p>
-        {{ product.name }}
+      <p class="list-card-item_detail--desc">{{ product.description }}</p>
-      </p>
-      <p class="list-card-item_detail--desc">
-        {{ product.description }}
-      </p>
       <t-row justify="space-between" align="middle" :class="cardControlClass">
         <div>
-          <t-button shape="circle" :disabled="!product.isSetup">
+          <t-button shape="circle" :disabled="!product.isSetup">{{ typeMap[product.type - 1] }}</t-button>
-            {{ typeMap[product.type - 1] }}
-          </t-button>
           <t-button shape="circle" :disabled="!product.isSetup">
             <add-icon />
           </t-button>
@@ -52,8 +46,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, PropType } from 'vue';
 import {
   ShopIcon,
   CalendarIcon,
@@ -71,63 +65,35 @@ export interface CardProductType {
   name: string;
 }
 
-export default defineComponent({
+const props = defineProps({
-  name: 'ListCardComponent',
-  components: {
-    ShopIcon,
-    CalendarIcon,
-    ServiceIcon,
-    UserAvatarIcon,
-    LaptopIcon,
-    MoreIcon,
-    AddIcon,
-  },
-  props: {
   product: {
     type: Object as PropType<CardProductType>,
-      default: () => {
-        return {};
   },
-    },
+});
-  },
+
-  emits: ['manage-product', 'delete-item'],
+const emit = defineEmits(['manage-product', 'delete-item']);
-  setup(props, ctx) {
+
-    const { emit } = ctx;
+const cardClass = computed(() => ['list-card-item', { 'list-card-item__disabled': !props.product.isSetup }]);
-    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 },
-        '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 },
-        'list-card-item_detail--control__disabled': !props.product.isSetup,
-      },
 ]);
 
-    return {
+const typeMap = ['A', 'B', 'C', 'D', 'E'];
-      cardClass,
+
-      cardLogoClass,
+const handleClickManage = (product: CardProductType) => {
-      cardControlClass,
-      typeMap: ['A', 'B', 'C', 'D', 'E'],
-      handleClickManage(product) {
   emit('manage-product', product);
-      },
-      handleClickDelete(product) {
-        emit('delete-item', product);
-      },
 };
-  },
+
-});
+const handleClickDelete = (product: CardProductType) => {
+  emit('delete-item', product);
+};
 </script>
 
 <style lang="less" scoped>

src/components/card/index.vue

@@ -16,38 +16,27 @@
     <div v-if="size !== 'small'" class="card-spacer-bottom" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
+import { computed } from 'vue';
 
-export default defineComponent({
+const props = defineProps({
-  name: 'Card',
+  title: String,
-  props: {
+  subtitle: String,
-    title: {
+  describe: String,
-      type: String as PropType<string>,
-      default: '',
-    },
-    subtitle: {
-      type: String as PropType<string>,
-      default: '',
-    },
   compact: {
-      type: Boolean as PropType<boolean>,
+    type: Boolean,
     default: false,
   },
-    describe: {
-      type: String as PropType<string>,
-      default: '',
-    },
   size: {
-      type: String as PropType<string>,
+    type: String,
     default: 'default',
   },
   border: {
     type: Boolean,
     default: false,
   },
-  },
+});
-  setup(props) {
+
 const containerCls = computed(() => {
   const { compact, border } = props;
   return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
@@ -73,14 +62,6 @@ export default defineComponent({
     },
   ];
 });
-
-    return {
-      containerCls,
-      titleCls,
-      titleTextCls,
-    };
-  },
-});
 </script>
 <style lang="less">
 @import '@/style/variables';

src/components/color/index.vue

@@ -1,23 +1,20 @@
 <template>
   <div :style="style" class="color-container" />
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { 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({
+const props = defineProps({
-  name: 'Color',
-  props: {
   value: {
-      type: String as PropType<string>,
+    type: String,
-      default: 'default',
   },
-  },
+});
-  setup(props) {
+
 const store = useStore();
 
 const style = computed(() => {
@@ -27,12 +24,6 @@ export default defineComponent({
     background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
   };
 });
-
-    return {
-      style,
-    };
-  },
-});
 </script>
 <style lang="less" scoped>
 .color-container {

src/components/result/index.vue

@@ -8,35 +8,21 @@
     <slot />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType, computed } from 'vue';
+import { 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({
+const props = defineProps({
-  name: 'Result',
+  bgUrl: String,
-  props: {
+  title: String,
-    bgUrl: {
+  tip: String,
-      type: String as PropType<string>,
+  type: 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':
@@ -53,11 +39,6 @@ export default defineComponent({
       return Result403Icon;
   }
 });
-    return {
-      dynamicComponent,
-    };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables';

src/components/thumbnail/index.vue

@@ -1,22 +1,17 @@
 <template>
   <img :class="className" :src="url" />
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+import { computed } from 'vue';
 
-export default defineComponent({
+const props = defineProps({
-  name: 'Thumbnail',
+  url: String,
-  props: {
-    url: {
-      type: String as PropType<string>,
-      default: '',
-    },
   type: {
-      type: String as PropType<string>,
+    type: String,
     default: 'layout',
   },
-  },
+});
-  setup(props) {
+
 const className = computed(() => {
   const { type } = props;
   return [
@@ -27,9 +22,6 @@ export default defineComponent({
     },
   ];
 });
-    return { className };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import url('@/style/index.less');

src/components/trend/index.vue

@@ -20,26 +20,18 @@
     <span>{{ describe }}</span>
   </span>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed, PropType } from 'vue';
+import { computed } from 'vue';
 
-export default defineComponent({
+const props = defineProps({
-  name: 'Trend',
+  type: String,
-  props: {
+  describe: [String, Number],
-    type: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    describe: {
-      type: [String, Number] as PropType<string | number>,
-      default: '',
-    },
   isReverseColor: {
-      type: Boolean as PropType<boolean>,
+    type: Boolean,
     default: false,
   },
-  },
+});
-  setup(props) {
+
 const containerCls = computed(() => {
   const { isReverseColor, type } = props;
   return [
@@ -53,13 +45,6 @@ export default defineComponent({
 });
 
 const iconCls = computed(() => ['trend-icon-container']);
-
-    return {
-      containerCls,
-      iconCls,
-    };
-  },
-});
 </script>
 
 <style lang="less" scoped>

src/layouts/components/Breadcrumb.vue

@@ -6,16 +6,10 @@
   </t-breadcrumb>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
-export default defineComponent({
-  name: 'TdesignStarterBreadcrumb',
-  props: {
-    isVisible: Boolean,
-  },
-  setup() {
 const crumbs = computed(() => {
   const route = useRoute();
 
@@ -32,12 +26,6 @@ export default defineComponent({
   }, []);
   return breadcrumbs;
 });
-
-    return {
-      crumbs,
-    };
-  },
-});
 </script>
 <style scoped>
 .tdesign-breadcrumb {

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">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import { prefix } from '@/config/global';
-
-export default defineComponent({
-  name: `${prefix}-footer`,
-  setup() {
-    return {
-      prefix,
-    };
-  },
-});
 </script>
 
 <style lang="less" scoped>

src/layouts/components/Header.vue

@@ -63,8 +63,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, PropType, computed, ref } from 'vue';
+import { PropType, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -76,24 +76,17 @@ import Notice from './Notice.vue';
 import Search from './Search.vue';
 import MenuContent from './MenuContent';
 
-export default defineComponent({
+const props = defineProps({
-  components: {
-    tLogoFull,
-    Notice,
-    Search,
-    MenuContent,
-  },
-  props: {
   theme: {
-      type: String as PropType<string>,
+    type: String,
     default: '',
   },
   layout: {
-      type: String as PropType<string>,
+    type: String,
     default: 'top',
   },
   showLogo: {
-      type: Boolean as PropType<boolean>,
+    type: Boolean,
     default: true,
   },
   menu: {
@@ -101,19 +94,19 @@ export default defineComponent({
     default: () => [],
   },
   isFixed: {
-      type: Boolean as PropType<boolean>,
+    type: Boolean,
     default: false,
   },
   isCompact: {
-      type: Boolean as PropType<boolean>,
+    type: Boolean,
     default: false,
   },
   maxLevel: {
-      type: Number as PropType<number>,
+    type: Number,
     default: 3,
   },
-  },
+});
-  setup(props) {
+
 const store = useStore();
 const router = useRouter();
 
@@ -133,8 +126,6 @@ export default defineComponent({
     .join('');
 });
 
-    const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
-
 const layoutCls = computed(() => [`${prefix}-header-layout`]);
 
 const menuCls = computed(() => {
@@ -149,15 +140,9 @@ export default defineComponent({
   ];
 });
 
-    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);
@@ -174,24 +159,6 @@ export default defineComponent({
 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,
-    };
-  },
-});
 </script>
 <style lang="less">
 @import '@/style/variables.less';

src/layouts/components/Notice.vue

@@ -45,14 +45,12 @@
   </t-popup>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed } from 'vue';
+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;
@@ -78,14 +76,6 @@ export default defineComponent({
 const goDetail = () => {
   router.push('/detail/secondary');
 };
-
-    return {
-      goDetail,
-      unreadMsg,
-      setRead,
-    };
-  },
-});
 </script>
 
 <style lang="less" scoped>

src/layouts/components/Search.vue

@@ -36,16 +36,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, PropType } from 'vue';
+import { ref } from 'vue';
+
+const layout = defineProps({
+  type: String,
+});
 
-export default defineComponent({
-  props: {
-    layout: {
-      type: String as PropType<string>,
-    },
-  },
-  setup() {
 const isSearchFocus = ref(false);
 const searchData = ref('');
 const changeSearchFocus = (value: boolean) => {
@@ -54,13 +51,6 @@ export default defineComponent({
   }
   isSearchFocus.value = value;
 };
-    return {
-      isSearchFocus,
-      searchData,
-      changeSearchFocus,
-    };
-  },
-});
 </script>
 <style lang="less">
 @import '@/style/variables.less';

src/layouts/setting.vue

@@ -90,8 +90,8 @@
     </div>
   </t-drawer>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, watchEffect } from 'vue';
 import { useStore } from 'vuex';
 import { ColorPicker } from 'vue-color-kit';
 import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
@@ -118,10 +118,6 @@ 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();
@@ -161,10 +157,10 @@ export default defineComponent({
     store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
   },
 );
+
 const changeColor = (val) => {
   const { hex } = val;
   const { setting } = store.state;
-
   // hex 主题色
   const newPalette = Color.getPaletteByGradation({
     colors: [hex],
@@ -218,32 +214,13 @@ export default defineComponent({
 const handleCloseDrawer = () => {
   store.commit('setting/toggleSettingPanel', false);
 };
-    return {
+
-      mode,
+const getThumbnailUrl = (name: string): string => {
-      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`;
-      },
 };
-  },
+
-  watch: {
+watchEffect(() => {
-    formData: {
+  store.dispatch('setting/changeTheme', formData.value);
-      handler(newVal) {
-        this.$store.dispatch('setting/changeTheme', newVal);
-      },
-      deep: true,
-    },
-  },
 });
 </script>
 <style lang="less">

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">
+<script setup lang="ts">
-import { defineComponent, onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
+import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -241,13 +241,6 @@ 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);
 
@@ -379,31 +372,19 @@ export default defineComponent({
   },
 );
 
-    return {
+const onCurrencyChange = (checkedValues: string[]) => {
-      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 }];
-      },
 };
-  },
+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';

src/pages/dashboard/detail/index.vue

@@ -57,8 +57,8 @@
     </card>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
+import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useStore } from 'vuex';
 
 import * as echarts from 'echarts/core';
@@ -76,14 +76,6 @@ 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
@@ -147,20 +139,14 @@ export default defineComponent({
   },
 );
 
-    return {
+const onSatisfyChange = () => {
-      LAST_7_DAYS,
-      PRODUCT_LIST,
-      PANE_LIST_DATA,
-      onSatisfyChange() {
   scatterChart.setOption(getScatterDataSet({ ...chartColors.value }));
-      },
+};
-      onMaterialChange(value: string[]) {
+
+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');

src/pages/detail/advanced/index.vue

@@ -109,23 +109,16 @@
     </t-dialog>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, onMounted } from 'vue';
+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,
@@ -166,34 +159,21 @@ export default defineComponent({
 });
 
 const visible = ref(false);
-
+const sortChange = (val) => {
-    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 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');

src/pages/detail/base/index.vue

@@ -26,8 +26,7 @@
     </card>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 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');

src/pages/detail/deploy/index.vue

@@ -68,8 +68,8 @@
     </t-dialog>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref, watch, computed } from 'vue';
+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,10 +96,6 @@ echarts.use([
   CanvasRenderer,
 ]);
 
-export default defineComponent({
-  name: 'DetailDeploy',
-  components: { Card },
-  setup() {
 const store = useStore();
 
 const chartColors = computed(() => store.state.setting.chartColors);
@@ -182,32 +178,22 @@ export default defineComponent({
     changeChartsTheme([monitorChart, dataChart]);
   },
 );
-    return {
+
-      prefix,
+const sortChange = (val) => {
-      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 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');

src/pages/detail/secondary/index.vue

@@ -49,8 +49,8 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed, ComputedRef } from 'vue';
+import { ref, computed, ComputedRef } from 'vue';
 import { useStore } from 'vuex';
 import { NOTIFICATION_TYPES } from '@/constants';
 import { NotificationItem } from '@/interface';
@@ -71,12 +71,6 @@ const TAB_LIST = [
   },
 ];
 
-export default defineComponent({
-  name: 'DetailSecondary',
-  components: {
-    EmptyIcon,
-  },
-  setup() {
 const tabValue = ref('msgData');
 
 const visible = ref(false);
@@ -119,20 +113,6 @@ export default defineComponent({
   visible.value = false;
   store.commit('notification/setMsgData', changeMsg);
 };
-
-    return {
-      TAB_LIST,
-      NOTIFICATION_TYPES,
-      visible,
-      selectedItem,
-      tabValue,
-      msgDataList,
-      handleClickDeleteBtn,
-      setReadStatus,
-      deleteMsg,
-    };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import url('./index.less');

src/pages/form/base/index.vue

@@ -154,30 +154,22 @@
     </div>
   </t-form>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+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,
+const onReset = () => {
-      PARTY_A_OPTIONS,
-      PARTY_B_OPTIONS,
-      FORM_RULES,
-      formData,
-      onReset() {
   MessagePlugin.warning('取消新建');
-      },
+};
-      onSubmit({ validateResult }) {
+const onSubmit = ({ validateResult }) => {
   if (validateResult === true) {
     MessagePlugin.success('新建成功');
   }
-      },
+};
-      beforeUpload(file) {
+const beforeUpload = (file) => {
   if (!/\.(pdf)$/.test(file.name)) {
     MessagePlugin.warning('请上传pdf文件');
     return false;
@@ -187,17 +179,14 @@ export default defineComponent({
     return false;
   }
   return true;
-      },
-      handleFail({ file }) {
-        MessagePlugin.error(`文件 ${file.name} 上传失败`);
-      },
-      // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
-      formatResponse(res) {
-        return { ...res, error: '上传失败，请重试', url: res.url };
-      },
 };
-  },
+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');

src/pages/form/step/index.vue

@@ -139,8 +139,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ValidateResultContext } from 'tdesign-vue-next';
 import Card from '@/components/card/index.vue';
@@ -155,10 +155,6 @@ 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 });
@@ -177,31 +173,18 @@ export default defineComponent({
   return '--';
 });
 
-    return {
+const onSubmit = (result: ValidateResultContext<FormData>, val: number) => {
-      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) {
+const onReset = (val: number) => {
   activeForm.value = val;
-      },
+};
-      complete() {
+const complete = () => {
   const router = useRouter();
   router.replace({ path: '/detail/advanced' });
-      },
 };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import url('./index.less');

src/pages/list/base/index.vue

@@ -64,8 +64,8 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, onMounted, computed } from 'vue';
+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,14 +78,6 @@ 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,
@@ -155,44 +147,27 @@ export default defineComponent({
   resetIdx();
 };
 
-    return {
+const rowKey = 'index';
-      CONTRACT_STATUS,
+
-      CONTRACT_TYPES,
+const rehandleSelectChange = (val: number[]) => {
-      CONTRACT_PAYMENT_TYPES,
-      COLUMNS,
-      data,
-      searchValue,
-      dataLoading,
-      pagination,
-      confirmBody,
-      confirmVisible,
-      rowKey: 'index',
-      onConfirmDelete,
-      onCancel,
-      selectedRowKeys,
-      rehandleSelectChange(val: number[]) {
   selectedRowKeys.value = val;
-      },
+};
-      rehandlePageChange(curr, pageInfo) {
+const rehandlePageChange = (curr, pageInfo) => {
   console.log('分页变化', curr, pageInfo);
-      },
+};
-      rehandleChange(changeParams, triggerAndData) {
+const rehandleChange = (changeParams, triggerAndData) => {
   console.log('统一Change', changeParams, triggerAndData);
-      },
+};
-      handleClickDetail() {
+const handleClickDetail = () => {
   router.push('/detail/base');
-      },
+};
-      handleSetupContract() {
+const handleSetupContract = () => {
   router.push('/form/base');
-      },
+};
-      handleClickDelete(row: { rowIndex: any }) {
+const handleClickDelete = (row: { rowIndex: any }) => {
   deleteIdx.value = row.rowIndex;
   confirmVisible.value = true;
-      },
 };
-  },
-  methods: {},
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables';

src/pages/list/card/components/DialogForm.vue

@@ -34,8 +34,8 @@
   </t-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const INITIAL_DATA = {
@@ -53,8 +53,7 @@ const SELECT_OPTIONS = [
   { label: 'CVM', value: '3' },
 ];
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   visible: {
     type: Boolean,
     default: false,
@@ -65,8 +64,8 @@ export default defineComponent({
       return {};
     },
   },
-  },
+});
-  setup(props, ctx) {
+
 const formVisible = ref(false);
 const formData = ref(props.data);
 const textareaValue = ref('');
@@ -86,10 +85,10 @@ export default defineComponent({
   formData.value = { ...INITIAL_DATA };
 };
 
+const emit = defineEmits(['update:visible']);
 watch(
   () => formVisible.value,
   (val) => {
-        const { emit } = ctx;
     emit('update:visible', val);
   },
 );
@@ -108,17 +107,7 @@ export default defineComponent({
   },
 );
 
-    return {
+const rules = {
-      SELECT_OPTIONS,
-      formVisible,
-      formData,
-      textareaValue,
-      onSubmit,
-      onClickCloseBtn,
-      rules: {
   name: [{ required: true, message: '请输入产品名称', type: 'error' }],
-      },
 };
-  },
-});
 </script>

src/pages/list/card/index.vue

@@ -58,8 +58,8 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+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,14 +76,6 @@ 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);
 
@@ -121,43 +113,31 @@ export default defineComponent({
 const confirmVisible = ref(false);
 const formData = ref({ ...INITIAL_DATA });
 
-    return {
+const onPageSizeChange = (size: number) => {
-      pagination,
-      productList,
-      dataLoading,
-      formDialogVisible,
-      confirmBody,
-      searchValue,
-      confirmVisible,
-      formData,
-      onPageSizeChange(size: number) {
   pagination.value.pageSize = size;
   pagination.value.current = 1;
-      },
+};
-      onCurrentChange(current: number) {
+const onCurrentChange = (current: number) => {
   pagination.value.current = current;
-      },
+};
-      handleDeleteItem(product) {
+const handleDeleteItem = (product) => {
   confirmVisible.value = true;
   deleteProduct.value = product;
-      },
+};
-      onConfirmDelete() {
+const onConfirmDelete = () => {
   const { index } = deleteProduct.value;
   productList.value.splice(index - 1, 1);
   confirmVisible.value = false;
   MessagePlugin.success('删除成功');
-      },
+};
-      onCancel() {
+const onCancel = () => {
   deleteProduct.value = undefined;
   formData.value = { ...INITIAL_DATA };
-      },
+};
-      handleManageProduct(product) {
+const handleManageProduct = (product) => {
   formDialogVisible.value = true;
   formData.value = { ...product, status: product?.isSetup ? '1' : '0' };
-      },
 };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';

src/pages/list/components/CommonTable.vue

@@ -102,8 +102,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+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,18 +167,11 @@ const searchForm = {
   type: '',
 };
 
-export default defineComponent({
-  name: 'ListTable',
-  components: {
-    Trend,
-  },
-  setup() {
 const formData = ref({ ...searchForm });
-    const tableConfig = {
+const rowKey = 'index';
-      rowKey: 'index',
+const verticalAlign = 'top';
-      verticalAlign: 'top',
+const hover = true;
-      hover: true,
+
-    };
 const pagination = ref({
   defaultPageSize: 20,
   total: 100,
@@ -238,44 +231,25 @@ export default defineComponent({
   fetchData();
 });
 
-    return {
+const handleClickDelete = ({ row }) => {
-      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 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">

src/pages/list/filter/index.vue

@@ -1,14 +1,6 @@
 <template>
   <common-table />
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import CommonTable from '../components/CommonTable.vue';
-
-export default defineComponent({
-  name: 'ListBase',
-  components: {
-    CommonTable,
-  },
-});
 </script>

src/pages/list/tree/index.vue

@@ -15,38 +15,24 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+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,
+const expanded = ['0', '0-0', '0-1', '0-2', '0-3', '0-4'];
-      TREE_DATA,
+
-      expanded: ['0', '0-0', '0-1', '0-2', '0-3', '0-4'],
+const onInput = () => {
-      filterText,
-      filterByText,
-      onInput() {
   filterByText.value = (node) => {
     const rs = node.label.indexOf(filterText.value) >= 0;
     return rs;
   };
-      },
 };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import '@/style/variables.less';

src/pages/login/components/Header.vue

@@ -15,14 +15,10 @@
   </header>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 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);
@@ -35,14 +31,6 @@ export default defineComponent({
 const navToHelper = () => {
   window.open('http://tdesign.tencent.com/starter/docs/get-started');
 };
-
-    return {
-      toggleSettingPanel,
-      navToGitHub,
-      navToHelper,
-    };
-  },
-});
 </script>
 
 <style lang="less" scoped>

src/pages/login/components/Login.vue

@@ -70,8 +70,8 @@
   </t-form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import QrcodeVue from 'qrcode.vue';
@@ -93,9 +93,6 @@ const FORM_RULES = {
   verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
 };
 
-export default defineComponent({
-  components: { QrcodeVue },
-  setup() {
 const type = ref('password');
 
 const formData = ref({ ...INITIAL_DATA });
@@ -124,17 +121,4 @@ export default defineComponent({
     }
   }
 };
-
-    return {
-      FORM_RULES,
-      formData,
-      showPsw,
-      type,
-      switchType,
-      countDown,
-      handleCounter,
-      onSubmit,
-    };
-  },
-});
 </script>

src/pages/login/components/Register.vue

@@ -70,8 +70,8 @@
   </t-form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useCounter } from '@/hooks';
 
@@ -93,10 +93,7 @@ const FORM_RULES = {
   verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
 };
 
-export default defineComponent({
-  setup(props, ctx) {
 const type = ref('phone');
-    const emailOptions = ref([]);
 
 const form = ref();
 const formData = ref({ ...INITIAL_DATA });
@@ -105,6 +102,8 @@ export default defineComponent({
 
 const [countDown, handleCounter] = useCounter();
 
+const emit = defineEmits(['registerSuccess']);
+
 const onSubmit = ({ validateResult }) => {
   if (validateResult === true) {
     if (!formData.value.checked) {
@@ -112,7 +111,6 @@ export default defineComponent({
       return;
     }
     MessagePlugin.success('注册成功');
-        const { emit } = ctx;
     emit('registerSuccess');
   }
 };
@@ -121,19 +119,4 @@ export default defineComponent({
   form.value.reset();
   type.value = val;
 };
-
-    return {
-      FORM_RULES,
-      formData,
-      showPsw,
-      form,
-      type,
-      emailOptions,
-      countDown,
-      handleCounter,
-      onSubmit,
-      switchType,
-    };
-  },
-});
 </script>

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">
+<script setup lang="ts">
-import { defineComponent, ref } from 'vue';
+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,
-    };
-  },
-});
 </script>
 <style lang="less">
 @import url('./index.less');

src/pages/result/403/index.vue

@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result403',
-  components: { Result },
-});
 </script>

src/pages/result/404/index.vue

@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result404',
-  components: { Result },
-});
 </script>

src/pages/result/500/index.vue

@@ -4,12 +4,6 @@
   </result>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'Result500',
-  components: { Result },
-});
 </script>

src/pages/result/browser-incompatible/index.vue

@@ -19,15 +19,9 @@
   </result>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 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';

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';
 

src/pages/result/network-error/index.vue

@@ -7,12 +7,6 @@
   </result>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import Result from '@/components/result/index.vue';
-
-export default defineComponent({
-  name: 'ResultNetworkError',
-  components: { Result },
-});
 </script>

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';
 

src/pages/user/index.vue

@@ -89,8 +89,8 @@
     </t-col>
   </t-row>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
+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,11 +109,6 @@ 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();
@@ -176,17 +171,6 @@ export default defineComponent({
     changeChartsTheme([lineChart]);
   },
 );
-
-    return {
-      LAST_7_DAYS,
-      USER_INFO_LIST,
-      TEAM_MEMBERS,
-      PRODUCT_LIST,
-      onLineChange,
-      getIcon,
-    };
-  },
-});
 </script>
 <style lang="less" scoped>
 @import url('./index.less');