From 15a16071f6ab6d6fd376ef9059fc617b679a1806 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Tue, 20 Sep 2022 20:11:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipSwitch.vue         | 16 +++++++++-------
 src/style/cpns/clip-switch.less | 12 ++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/cpns/ClipSwitch.vue b/src/cpns/ClipSwitch.vue
index 3c7bdab..9e38a94 100644
--- a/src/cpns/ClipSwitch.vue
+++ b/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)
diff --git a/src/style/cpns/clip-switch.less b/src/style/cpns/clip-switch.less
index 76932af..4908de1 100644
--- a/src/style/cpns/clip-switch.less
+++ b/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 {