diff --git a/.eslintrc b/.eslintrc
index 4c54be6..7467fd5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -11,6 +11,10 @@
     "jest": true,
     "es6": true
   },
+  "globals": {
+    "defineProps": "readonly",
+    "defineEmits": "readonly"
+  },
   "plugins": [
     "vue",
     "@typescript-eslint"
diff --git a/package.json b/package.json
index 26c567b..6b1fcf6 100644
--- a/package.json
+++ b/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.0",
     "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",
@@ -83,4 +83,4 @@
       "git add ."
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
index a442d52..27ddec9 100644
--- a/src/components/card/Card.vue
+++ b/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">{{
-          product.isSetup ? '已启用' : '已停用'
-        }}</t-tag>
+        <t-tag :theme="product.isSetup ? 'success' : 'default'" :disabled="!product.isSetup">
+          {{ product.isSetup ? '已启用' : '已停用' }}
+        </t-tag>
       </t-row>
-      <p class="list-card-item_detail--name">
-        {{ product.name }}
-      </p>
-      <p class="list-card-item_detail--desc">
-        {{ product.description }}
-      </p>
+      <p class="list-card-item_detail--name">{{ product.name }}</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">
-            {{ typeMap[product.type - 1] }}
-          </t-button>
+          <t-button shape="circle" :disabled="!product.isSetup">{{ typeMap[product.type - 1] }}</t-button>
           <t-button shape="circle" :disabled="!product.isSetup">
             <add-icon />
           </t-button>
@@ -53,7 +47,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, defineProps, PropType, defineEmits } from 'vue';
+import { computed, PropType } from 'vue';
 import {
   ShopIcon,
   CalendarIcon,
diff --git a/src/components/card/index.vue b/src/components/card/index.vue
index c514010..bb0d579 100644
--- a/src/components/card/index.vue
+++ b/src/components/card/index.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   title: String,
diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index 24560ea..cff7033 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -2,7 +2,7 @@
   <div :style="style" class="color-container" />
 </template>
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { getBrandColor } from '@/config/color';
 
diff --git a/src/components/result/index.vue b/src/components/result/index.vue
index 3574c6b..ab6dcd1 100644
--- a/src/components/result/index.vue
+++ b/src/components/result/index.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, 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';
diff --git a/src/components/thumbnail/index.vue b/src/components/thumbnail/index.vue
index a19b9eb..e1ed55c 100644
--- a/src/components/thumbnail/index.vue
+++ b/src/components/thumbnail/index.vue
@@ -2,7 +2,7 @@
   <img :class="className" :src="url" />
 </template>
 <script setup lang="ts">
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   url: String,
diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue
index a9a5d1d..3c25f1c 100644
--- a/src/components/trend/index.vue
+++ b/src/components/trend/index.vue
@@ -21,7 +21,7 @@
   </span>
 </template>
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 
 const props = defineProps({
   type: String,
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
index 21a4c3f..6c5bd69 100644
--- a/src/layouts/components/Header.vue
+++ b/src/layouts/components/Header.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, PropType, computed } from 'vue';
+import { PropType, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter, useRoute } from 'vue-router';
 
diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue
index 0bc27e1..53d8d18 100644
--- a/src/layouts/components/Search.vue
+++ b/src/layouts/components/Search.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue';
+import { ref } from 'vue';
 
 const layout = defineProps({
   type: String,
diff --git a/src/pages/list/card/components/DialogForm.vue b/src/pages/list/card/components/DialogForm.vue
index ff4db03..ed934c0 100644
--- a/src/pages/list/card/components/DialogForm.vue
+++ b/src/pages/list/card/components/DialogForm.vue
@@ -8,8 +8,8 @@
         </t-form-item>
         <t-form-item label="产品状态" name="status">
           <t-radio-group v-model="formData.status">
-            <t-radio value="0"> 已停用 </t-radio>
-            <t-radio value="1"> 已启用 </t-radio>
+            <t-radio value="0">已停用</t-radio>
+            <t-radio value="1">已启用</t-radio>
           </t-radio-group>
         </t-form-item>
         <t-form-item label="产品描述" name="description">
@@ -26,16 +26,16 @@
           <t-textarea v-model="textareaValue" :style="{ width: '480px' }" placeholder="请输入内容" name="description" />
         </t-form-item>
         <t-form-item style="float: right">
-          <t-button variant="outline" @click="onClickCloseBtn"> 取消 </t-button>
-          <t-button theme="primary" type="submit"> 确定 </t-button>
+          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
+          <t-button theme="primary" type="submit">确定</t-button>
         </t-form-item>
       </t-form>
     </template>
   </t-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+<script setup lang="ts">
+import { ref, watch } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const INITIAL_DATA = {
@@ -53,72 +53,61 @@ const SELECT_OPTIONS = [
   { label: 'CVM', value: '3' },
 ];
 
-export default defineComponent({
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
   },
-  setup(props, ctx) {
-    const formVisible = ref(false);
-    const formData = ref(props.data);
-    const textareaValue = ref('');
-
-    const onSubmit = ({ result, firstError }) => {
-      if (!firstError) {
-        MessagePlugin.success('提交成功');
-        formVisible.value = false;
-      } else {
-        console.log('Errors: ', result);
-        MessagePlugin.warning(firstError);
-      }
-    };
-
-    const onClickCloseBtn = () => {
-      formVisible.value = false;
-      formData.value = { ...INITIAL_DATA };
-    };
-
-    watch(
-      () => formVisible.value,
-      (val) => {
-        const { emit } = ctx;
-        emit('update:visible', val);
-      },
-    );
-
-    watch(
-      () => props.visible,
-      (val) => {
-        formVisible.value = val;
-      },
-    );
-
-    watch(
-      () => props.data,
-      (val) => {
-        formData.value = val;
-      },
-    );
-
-    return {
-      SELECT_OPTIONS,
-      formVisible,
-      formData,
-      textareaValue,
-      onSubmit,
-      onClickCloseBtn,
-      rules: {
-        name: [{ required: true, message: '请输入产品名称', type: 'error' }],
-      },
-    };
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
   },
 });
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const textareaValue = ref('');
+
+const onSubmit = ({ result, firstError }) => {
+  if (!firstError) {
+    MessagePlugin.success('提交成功');
+    formVisible.value = false;
+  } else {
+    console.log('Errors: ', result);
+    MessagePlugin.warning(firstError);
+  }
+};
+
+const onClickCloseBtn = () => {
+  formVisible.value = false;
+  formData.value = { ...INITIAL_DATA };
+};
+
+const emit = defineEmits(['update:visible']);
+watch(
+  () => formVisible.value,
+  (val) => {
+    emit('update:visible', val);
+  },
+);
+
+watch(
+  () => props.visible,
+  (val) => {
+    formVisible.value = val;
+  },
+);
+
+watch(
+  () => props.data,
+  (val) => {
+    formData.value = val;
+  },
+);
+
+const rules = {
+  name: [{ required: true, message: '请输入产品名称', type: 'error' }],
+};
 </script>
diff --git a/src/pages/login/components/Register.vue b/src/pages/login/components/Register.vue
index e37f359..a28a008 100644
--- a/src/pages/login/components/Register.vue
+++ b/src/pages/login/components/Register.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, ref } from 'vue';
+import { ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useCounter } from '@/hooks';