refactor: 改为Vue3.5解构语法 (#799)

Author: liect

src/components/color/index.vue

@@ -9,14 +9,13 @@ import { DEFAULT_COLOR_OPTIONS } 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)';
 
-const props = defineProps({
+const { value } = defineProps({
   value: {
     type: String,
   },
 });
 
 const style = computed(() => {
-  const { value } = props;
   return {
     background: DEFAULT_COLOR_OPTIONS.indexOf(value) > -1 ? value : panelColor,
   };

src/components/result/index.vue

@@ -18,15 +18,15 @@ import ResultIeIcon from '@/assets/assets-result-ie.svg?component';
 import ResultMaintenanceIcon from '@/assets/assets-result-maintenance.svg?component';
 import ResultWifiIcon from '@/assets/assets-result-wifi.svg?component';
 
-const props = defineProps({
+const { type } = defineProps({
   bgUrl: String,
   title: String,
   tip: String,
   type: String,
 });
 
 const dynamicComponent = computed(() => {
-  switch (props.type) {
+  switch (type) {
     case '403':
       return Result403Icon;
     case '404':

src/components/thumbnail/index.vue

@@ -4,7 +4,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
+const { type } = defineProps({
   url: String,
   type: {
     type: String,
@@ -13,7 +13,6 @@ const props = defineProps({
 });
 
 const className = computed(() => {
-  const { type } = props;
   return [
     'thumbnail-container',
     {

src/components/trend/index.vue

@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
+const { type, isReverseColor } = defineProps({
   type: String,
   describe: [String, Number],
   isReverseColor: {
@@ -33,7 +33,6 @@ const props = defineProps({
 });
 
 const containerCls = computed(() => {
-  const { isReverseColor, type } = props;
   return [
     'trend-container',
     {

src/layouts/components/Header.vue

@@ -95,7 +95,7 @@ import MenuContent from './MenuContent.vue';
 import Notice from './Notice.vue';
 import Search from './Search.vue';
 
-const props = defineProps({
+const { theme, layout, showLogo, menu, isFixed, isCompact } = defineProps({
   theme: {
     type: String,
     default: 'light',
@@ -141,7 +141,6 @@ const active = computed(() => getActive());
 const layoutCls = computed(() => [`${prefix}-header-layout`]);
 
 const menuCls = computed(() => {
-  const { isFixed, layout, isCompact } = props;
   return [
     {
       [`${prefix}-header-menu`]: !isFixed,
@@ -151,7 +150,7 @@ const menuCls = computed(() => {
     },
   ];
 });
-const menuTheme = computed(() => props.theme as ModeType);
+const menuTheme = computed(() => theme as ModeType);
 
 // 切换语言
 const { changeLocale } = useLocale();

src/layouts/components/MenuContent.vue

@@ -34,7 +34,7 @@ import type { MenuRoute } from '@/types/interface';
 
 type ListItemType = MenuRoute & { icon?: string };
 
-const props = defineProps({
+const { navData } = defineProps({
   navData: {
     type: Array as PropType<MenuRoute[]>,
     default: () => [],
@@ -45,7 +45,6 @@ const active = computed(() => getActive());
 
 const { locale } = useLocale();
 const list = computed(() => {
-  const { navData } = props;
   return getMenuList(navData);
 });
 

src/layouts/components/SideNav.vue

@@ -42,7 +42,7 @@ import MenuContent from './MenuContent.vue';
 
 const MIN_POINT = 992 - 1;
 
-const props = defineProps({
+const { menu, showLogo, isFixed, layout, theme, isCompact } = defineProps({
   menu: {
     type: Array as PropType<MenuRoute[]>,
     default: () => [],
@@ -97,11 +97,9 @@ const onExpanded = (value: MenuValue[]) => {
 };
 
 const sideMode = computed(() => {
-  const { theme } = props;
   return theme === 'dark';
 });
 const sideNavCls = computed(() => {
-  const { isCompact } = props;
   return [
     `${prefix}-sidebar-layout`,
     {
@@ -126,7 +124,6 @@ const versionCls = computed(() => {
   ];
 });
 const menuCls = computed(() => {
-  const { showLogo, isFixed, layout } = props;
   return [
     `${prefix}-side-nav`,
     {

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

@@ -65,7 +65,7 @@ const SELECT_OPTIONS = [
   { label: 'CVM', value: '3' },
 ];
 
-const props = defineProps({
+const { visible, data } = defineProps({
   visible: {
     type: Boolean,
     default: false,
@@ -100,14 +100,14 @@ watch(
 );
 
 watch(
-  () => props.visible,
+  () => visible,
   (val) => {
     formVisible.value = val;
   },
 );
 
 watch(
-  () => props.data,
+  () => data,
   (val) => {
     formData.value = val;
   },