给所有组件添加name属性预防未知bug!!!

2025-10-31 10:18:43 +08:00 · 2023-04-14 21:32:11 +08:00
parent 44c18473d7
commit b93491579c
133 changed files with 1126 additions and 993 deletions
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="AppView" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useAppStore } from '@/store/modules/app'
 import { Footer } from '@/layout/components/Footer'
--- a/src/layout/components/Collapse/src/Collapse.vue
+++ b/src/layout/components/Collapse/src/Collapse.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Collapse" setup>
 import { useAppStore } from '@/store/modules/app'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -24,9 +24,9 @@ const toggleCollapse = () => {
 <template>
  <div :class="prefixCls">
    <Icon
-      :size="18"
-      :icon="collapse ? 'ep:expand' : 'ep:fold'"
      :color="color"
+      :icon="collapse ? 'ep:expand' : 'ep:fold'"
+      :size="18"
      class="cursor-pointer"
      @click="toggleCollapse"
    />
--- a/src/layout/components/ContextMenu/src/ContextMenu.vue
+++ b/src/layout/components/ContextMenu/src/ContextMenu.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ContextMenu" setup>
 import { PropType } from 'vue'

 import { useDesign } from '@/hooks/web/useDesign'
@@ -51,9 +51,9 @@ defineExpose({
    :class="prefixCls"
    :trigger="trigger"
    placement="bottom-start"
+    popper-class="v-context-menu-popper"
    @command="command"
    @visible-change="visibleChange"
-    popper-class="v-context-menu-popper"
  >
    <slot></slot>
    <template #dropdown>
@@ -61,11 +61,12 @@ defineExpose({
        <ElDropdownItem
          v-for="(item, index) in schema"
          :key="`dropdown${index}`"
-          :divided="item.divided"
-          :disabled="item.disabled"
          :command="item"
+          :disabled="item.disabled"
+          :divided="item.divided"
        >
-          <Icon :icon="item.icon" /> {{ t(item.label) }}
+          <Icon :icon="item.icon" />
+          {{ t(item.label) }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Footer" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'

--- a/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="LocaleDropdown" setup>
 import { useLocaleStore } from '@/store/modules/locale'
 import { useLocale } from '@/hooks/web/useLocale'
 import { propTypes } from '@/utils/propTypes'
@@ -33,11 +33,11 @@ const setLang = (lang: LocaleType) => {
 <template>
  <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
    <Icon
-      :size="18"
-      icon="ion:language-sharp"
-      class="cursor-pointer"
      :class="$attrs.class"
      :color="color"
+      :size="18"
+      class="cursor-pointer"
+      icon="ion:language-sharp"
    />
    <template #dropdown>
      <ElDropdownMenu>
--- a/src/layout/components/Logo/src/Logo.vue
+++ b/src/layout/components/Logo/src/Logo.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { ref, watch, computed, onMounted, unref } from 'vue'
+<script lang="ts" name="Logo" setup>
+import { computed, onMounted, ref, unref, watch } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'

@@ -66,8 +66,8 @@ watch(
      to="/"
    >
      <img
-        src="@/assets/imgs/logo.png"
        class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+        src="@/assets/imgs/logo.png"
      />
      <div
        v-if="show"
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Message" setup>
 import { formatDate } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'

@@ -40,10 +40,10 @@ onMounted(() => {
 </script>
 <template>
  <div class="message">
-    <ElPopover placement="bottom" :width="400" trigger="click">
+    <ElPopover :width="400" placement="bottom" trigger="click">
      <template #reference>
        <ElBadge :is-dot="unreadCount > 0" class="item">
-          <Icon icon="ep:bell" :size="18" class="cursor-pointer" @click="getList" />
+          <Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" />
        </ElBadge>
      </template>
      <ElTabs v-model="activeName">
@@ -51,7 +51,7 @@ onMounted(() => {
          <div class="message-list">
            <template v-for="item in list" :key="item.id">
              <div class="message-item">
-                <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
+                <img alt="" class="message-icon" src="@/assets/imgs/avatar.gif" />
                <div class="message-content">
                  <span class="message-title">
                    {{ item.templateNickname }}：{{ item.templateContent }}
@@ -67,12 +67,12 @@ onMounted(() => {
      </ElTabs>
      <!-- 更多 -->
      <div style="text-align: right; margin-top: 10px">
-        <XButton type="primary" preIcon="ep:view" title="查看全部" @click="goMyList" />
+        <XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
      </div>
    </ElPopover>
  </div>
 </template>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .message-empty {
  display: flex;
  flex-direction: column;
@@ -81,28 +81,35 @@ onMounted(() => {
  height: 260px;
  line-height: 45px;
 }
+
 .message-list {
  display: flex;
  flex-direction: column;
+
  .message-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--el-border-color-light);
+
    &:last-child {
      border: none;
    }
+
    .message-icon {
      width: 40px;
      height: 40px;
      margin: 0 20px 0 5px;
    }
+
    .message-content {
      display: flex;
      flex-direction: column;
+
      .message-title {
        margin-bottom: 5px;
      }
+
      .message-date {
        font-size: 12px;
        color: var(--el-text-color-secondary);
--- a/src/layout/components/Screenfull/src/Screenfull.vue
+++ b/src/layout/components/Screenfull/src/Screenfull.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ScreenFull" setup>
 import { Icon } from '@/components/Icon'
 import { useFullscreen } from '@vueuse/core'
 import { propTypes } from '@/utils/propTypes'
@@ -22,9 +22,9 @@ const toggleFullscreen = () => {
 <template>
  <div :class="prefixCls" @click="toggleFullscreen">
    <Icon
-      :size="18"
-      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
      :color="color"
+      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :size="18"
    />
  </div>
 </template>
--- a/src/layout/components/Setting/src/Setting.vue
+++ b/src/layout/components/Setting/src/Setting.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts">
+<script lang="ts" name="Setting" setup>
 import { ElMessage } from 'element-plus'
-import { useCssVar, useClipboard } from '@vueuse/core'
+import { useClipboard, useCssVar } from '@vueuse/core'

 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import { useDesign } from '@/hooks/web/useDesign'

-import { trim, setCssVar } from '@/utils'
-import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
+import { setCssVar, trim } from '@/utils'
+import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
 import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
@@ -202,10 +202,10 @@ const clear = () => {
    class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
    @click="drawer = true"
  >
-    <Icon icon="ep:setting" color="#fff" />
+    <Icon color="#fff" icon="ep:setting" />
  </div>

-  <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
+  <ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
    <template #header>
      <span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
    </template>
@@ -279,10 +279,10 @@ const clear = () => {

    <ElDivider />
    <div>
-      <ElButton type="primary" class="w-full" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
+      <ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
    </div>
    <div class="mt-5px">
-      <ElButton type="danger" class="w-full" @click="clear">
+      <ElButton class="w-full" type="danger" @click="clear">
        {{ t('setting.clearAndReset') }}
      </ElButton>
    </div>
--- a/src/layout/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/ColorRadioPicker.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ColorRadioPicker" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -42,14 +42,14 @@ watch(
    <span
      v-for="(item, i) in schema"
      :key="`radio-${i}`"
-      class="w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
      :class="{ 'is-active': colorVal === item }"
      :style="{
        background: item
      }"
+      class="w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
      @click="colorVal = item"
    >
-      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+      <Icon v-if="colorVal === item" :size="16" color="#fff" icon="ep:check" />
    </span>
  </div>
 </template>
--- a/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="InterfaceDisplay" setup>
 import { setCssVar } from '@/utils'

 import { useDesign } from '@/hooks/web/useDesign'
--- a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="LayoutRadioPicker" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'

--- a/src/layout/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/layout/components/SizeDropdown/src/SizeDropdown.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="SizeDropdown" setup>
 import { useAppStore } from '@/store/modules/app'

 import { propTypes } from '@/utils/propTypes'
@@ -26,7 +26,7 @@ const setCurrentSize = (size: ElementPlusSize) => {

 <template>
  <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
-    <Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" />
+    <Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" />
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="TagsView" setup>
 import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -266,15 +266,24 @@ watch(
      @click="move(-200)"
    >
      <Icon
-        icon="ep:d-arrow-left"
        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:d-arrow-left"
      />
    </span>
    <div class="overflow-hidden flex-1">
      <ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
        <div class="flex h-full">
          <ContextMenu
+            v-for="item in visitedViews"
+            :key="item.fullPath"
            :ref="itemRefs.set"
+            :class="[
+              `${prefixCls}__item`,
+              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
+              {
+                'is-active': isActive(item)
+              }
+            ]"
            :schema="[
              {
                icon: 'ep:refresh',
@@ -332,23 +341,14 @@ watch(
                }
              }
            ]"
-            v-for="item in visitedViews"
-            :key="item.fullPath"
            :tag-item="item"
-            :class="[
-              `${prefixCls}__item`,
-              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
-              {
-                'is-active': isActive(item)
-              }
-            ]"
            @visible-change="visibleChange"
          >
            <div>
-              <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
+              <router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="{ ...item }" custom>
                <div
-                  @click="navigate"
                  class="h-full flex justify-center items-center whitespace-nowrap pl-15px"
+                  @click="navigate"
                >
                  <Icon
                    v-if="
@@ -364,9 +364,9 @@ watch(
                  {{ t(item?.meta?.title as string) }}
                  <Icon
                    :class="`${prefixCls}__item--close`"
+                    :size="12"
                    color="#333"
                    icon="ep:close"
-                    :size="12"
                    @click.prevent.stop="closeSelectedTag(item)"
                  />
                </div>
@@ -382,8 +382,8 @@ watch(
      @click="move(200)"
    >
      <Icon
-        icon="ep:d-arrow-right"
        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:d-arrow-right"
      />
    </span>
    <span
@@ -392,12 +392,11 @@ watch(
      @click="refreshSelectedTag(selectedTag)"
    >
      <Icon
-        icon="ep:refresh-right"
        :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:refresh-right"
      />
    </span>
    <ContextMenu
-      trigger="click"
      :schema="[
        {
          icon: 'ep:refresh',
@@ -449,14 +448,15 @@ watch(
          }
        }
      ]"
+      trigger="click"
    >
      <span
        :class="`${prefixCls}__tool`"
        class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
      >
        <Icon
-          icon="ep:menu"
          :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+          icon="ep:menu"
        />
      </span>
    </ContextMenu>
@@ -513,6 +513,7 @@ $prefix-cls: #{$namespace}-tags-view;
      display: none;
      transform: translate(0, -50%);
    }
+
    &:not(.#{$prefix-cls}__item--affix):hover {
      .#{$prefix-cls}__item--close {
        display: block;
@@ -530,6 +531,7 @@ $prefix-cls: #{$namespace}-tags-view;
    color: var(--el-color-white);
    background-color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);
+
    .#{$prefix-cls}__item--close {
      :deep(span) {
        color: var(--el-color-white) !important;
@@ -573,6 +575,7 @@ $prefix-cls: #{$namespace}-tags-view;
    &__item.is-active {
      color: var(--el-color-white);
      background-color: var(--el-color-primary);
+
      .#{$prefix-cls}__item--close {
        :deep(span) {
          color: var(--el-color-white) !important;
--- a/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ThemeSwitch" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -26,14 +26,14 @@ const themeChange = (val: boolean) => {

 <template>
  <ElSwitch
-    :class="prefixCls"
    v-model="isDark"
-    inline-prompt
-    :border-color="blackColor"
-    :inactive-color="blackColor"
    :active-color="blackColor"
    :active-icon="Sun"
+    :border-color="blackColor"
+    :class="prefixCls"
+    :inactive-color="blackColor"
    :inactive-icon="CrescentMoon"
+    inline-prompt
    @change="themeChange"
  />
 </template>
--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/src/layout/components/UserInfo/src/UserInfo.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="UserInfo" setup>
 import { ElMessageBox } from 'element-plus'

 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'