将项目列表增加样式并优化减少dom嵌套

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">
+      <template v-if="itemIcon">
-        <div v-if="itemIcon?.itemType === 1">
+        <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>
+        </template>
-      </div>
+      </template>
 
-      <div v-else>
+      <template v-else>
         <NAvatar :size="props.size" />
-      </div>
+      </template>
     </slot>
   </div>
 </template>

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="app-icon-info-text-box w-full">
-          <div class="font-semibold 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） -->
+    <!-- 极简(小)图标（APP） -->
-    <div v-if="style === PanelPanelConfigStyleEnum.icon">
+    <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>

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)">