From 6bab5a264fdb1281763d73bf022335667845dc67 Mon Sep 17 00:00:00 2001
From: Sun <95302870@qq.com>
Date: Wed, 24 Jan 2024 20:41:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=87=8F=E5=B0=91dom=E5=B5=8C=E5=A5=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ItemIcon/index.vue    | 22 ++++++++++-----------
 src/views/home/components/AppIcon/index.vue | 20 +++++++++----------
 src/views/home/index.vue                    |  6 +++---
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/common/ItemIcon/index.vue b/src/components/common/ItemIcon/index.vue
index 51c2530..11e2f01 100644
--- a/src/components/common/ItemIcon/index.vue
+++ b/src/components/common/ItemIcon/index.vue
@@ -21,32 +21,32 @@ const iconExt = computed(() => {
 </script>
 
 <template>
-  <div :style="defaultStyle">
+  <div class="item-icon" :style="defaultStyle">
     <slot>
-      <div v-if="itemIcon">
-        <div v-if="itemIcon?.itemType === 1">
+      <template v-if="itemIcon">
+        <template v-if="itemIcon?.itemType === 1">
           <NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
             {{ itemIcon.text }}
           </NAvatar>
-        </div>
+        </template>
 
-        <div v-else-if="itemIcon?.itemType === 2">
+        <template v-else-if="itemIcon?.itemType === 2">
           <div v-if="iconExt === 'svg'" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" class="flex justify-center items-center">
             <img :src="itemIcon?.src" class="w-[35px] h-[35px]">
           </div>
           <NImage v-else :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground, ...defaultStyle }" :src="itemIcon?.src" preview-disabled />
-        </div>
+        </template>
 
-        <div v-else-if="itemIcon?.itemType === 3">
+        <template v-else-if="itemIcon?.itemType === 3">
           <NAvatar :size="props.size" :style="{ backgroundColor: (forceBackground ?? itemIcon?.backgroundColor) || defaultBackground }">
             <SvgIconOnline style="font-size: 35px;" :icon="itemIcon.text" />
           </NAvatar>
-        </div>
-      </div>
+        </template>
+      </template>
 
-      <div v-else>
+      <template v-else>
         <NAvatar :size="props.size" />
-      </div>
+      </template>
     </slot>
   </div>
 </template>
diff --git a/src/views/home/components/AppIcon/index.vue b/src/views/home/components/AppIcon/index.vue
index eebd3d5..a5f3455 100644
--- a/src/views/home/components/AppIcon/index.vue
+++ b/src/views/home/components/AppIcon/index.vue
@@ -35,15 +35,15 @@ const textColor = computed(() => {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="app-icon w-full">
     <!-- 详情图标 -->
     <div
       v-if="style === PanelPanelConfigStyleEnum.info"
-      class="w-full rounded-2xl  transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
+      class="app-icon-info w-full rounded-2xl  transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
       :style="{ background: itemInfo?.icon?.backgroundColor || defaultBackground }"
     >
       <!-- 图标 -->
-      <div class="w-[70px] h-[70px]">
+      <div class="app-icon-info-icon w-[70px] h-[70px]">
         <div class="w-[70px] h-full flex items-center justify-center ">
           <ItemIcon :item-icon="itemInfo?.icon" force-background="transparent" :size="50" class="overflow-hidden rounded-xl" />
         </div>
@@ -52,13 +52,13 @@ const textColor = computed(() => {
       <!-- 文字 -->
       <!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
       <div class="text-white flex items-center" :style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }">
-        <div class="w-full">
-          <div class="font-semibold w-full">
+        <div class="app-icon-info-text-box w-full">
+          <div class="app-icon-info-text-box-title font-semibold w-full">
             <NEllipsis>
               {{ itemInfo?.title }}
             </NEllipsis>
           </div>
-          <div v-if="!iconTextInfoHideDescription">
+          <div v-if="!iconTextInfoHideDescription" class="app-icon-info-text-box-description">
             <NEllipsis :line-clamp="2" class="text-xs">
               {{ itemInfo?.description }}
             </NEllipsis>
@@ -67,17 +67,17 @@ const textColor = computed(() => {
       </div>
     </div>
 
-    <!-- 极简图标（APP） -->
-    <div v-if="style === PanelPanelConfigStyleEnum.icon">
+    <!-- 极简(小)图标（APP） -->
+    <div v-if="style === PanelPanelConfigStyleEnum.icon" class="app-icon-small">
       <div
-        class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
+        class="app-icon-small-icon overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
         :title="itemInfo?.description"
       >
         <ItemIcon :item-icon="itemInfo?.icon" />
       </div>
       <div
         v-if="!iconTextIconHideTitle"
-        class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
+        class="app-icon-small-title text-center app-icon-text-shadow cursor-pointer mt-[2px]"
         :style="{ color: iconTextColor }"
       >
         <span>{{ itemInfo?.title }}</span>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a4bd49d..d5e5765 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -380,19 +380,19 @@ function handleAddItem(itemIconGroupId?: number) {
           <!-- 组纵向排列 -->
           <div
             v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
-            class="mt-[50px]"
+            class="item-list mt-[50px]"
             :class="itemGroup.sortStatus ? 'shadow-2xl border shadow-[0_0_30px_10px_rgba(0,0,0,0.3)]  p-[10px] rounded-2xl' : ''"
             @mouseenter="handleSetHoverStatus(itemGroupIndex, true)"
             @mouseleave="handleSetHoverStatus(itemGroupIndex, false)"
           >
             <!-- 分组标题 -->
             <div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
-              <span class="text-shadow">
+              <span class="group-title text-shadow">
                 {{ itemGroup.title }}
               </span>
               <div
                 v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
-                class="ml-2 delay-100 transition-opacity flex"
+                class="group-buttons ml-2 delay-100 transition-opacity flex"
                 :class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
               >
                 <span class="mr-2 cursor-pointer" :title="t('common.add')" @click="handleAddItem(itemGroup.id)">