feat: 调整导航栏图标

src/cpns/ClipSwitch.vue

@@ -6,6 +6,7 @@
           :class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
           @click="onNavClick(tab.type)"
         >
+          <component :is="tab.icon"></component>
           {{ tab.name }}
         </div>
       </template>
@@ -16,14 +17,15 @@
 
 <script setup>
 import { ref } from 'vue'
+import { Menu, Tickets, Picture, Document, Collection } from '@element-plus/icons-vue'
 
-const tabs = ref([
-  { name: '📚 全部', type: 'all' },
-  { name: '📋 文字', type: 'text' },
-  { name: '⛺ 图片', type: 'image' },
-  { name: '📂 文件', type: 'file' },
-  { name: '⭐ 收藏', type: 'collect' }
-])
+const tabs = [
+  { name: '全部', type: 'all', icon: Menu },
+  { name: '文字', type: 'text', icon: Tickets },
+  { name: '图片', type: 'image', icon: Picture },
+  { name: '文件', type: 'file', icon: Document },
+  { name: '收藏', type: 'collect', icon: Collection }
+]
 const activeTab = ref('all')
 const emit = defineEmits(['onNavClick'])
 const toggleNav = (type) => (activeTab.value = type)

src/style/cpns/clip-switch.less

@@ -14,6 +14,9 @@
     color: @primary-color;
     background-color: @bg-color;
     transition: all 0.15s ease-in-out;
+    svg {
+      fill: @primary-color;
+    }
   }
   .clip-switch-items {
     display: flex;
@@ -22,6 +25,10 @@
     flex-direction: row;
     margin-left: 5px;
     .clip-switch-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 58px;
       padding: 10px 15px 10px 15px;
       margin: 10px 5px 10px 5px;
       cursor: pointer;
@@ -32,6 +39,11 @@
         background-color: @nav-hover-bg-color;
         transition: all 0.15s ease-in-out;
       }
+      svg {
+        margin-right: 5px;
+        max-width: 30%;
+        fill: @text-color-lighter;
+      }
     }
   }
   .clip-switch-btn-list {