a

src/components/ClickableTag/index.vue

@@ -2,25 +2,21 @@
   <el-tag 
     :type="type" 
     :size="size" 
+    :effect="effect"
     :class="['clickable-tag', { 'has-action': actualRightIcon !== null}]"
     :style="{ width: width ? `${width}px` : 'auto' }"
     @click="handleClick">
-    <!-- 左侧图标 -->
-    <el-icon 
-      v-if="leftIcon" 
-      :size="size" 
-      class="left-icon">
+    <!-- 左侧图标：支持 Vue 组件（Element 图标，线条）或字符串（如 FontAwesome class，可实心） -->
+    <i v-if="leftIcon && isLeftIconString" :class="leftIcon" class="left-icon left-icon--fa"></i>
+    <el-icon v-else-if="leftIcon" :size="size" class="left-icon">
       <component :is="leftIcon" />
     </el-icon>
-    
     <!-- 主要内容 -->
     <slot></slot>
     
-    <!-- 中间图标（如警告图标） -->
-    <el-icon 
-      v-if="middleIcon" 
-      :size="size" 
-      class="middle-icon">
+    <!-- 中间图标：支持 Vue 组件或字符串（如 FontAwesome class） -->
+    <i v-if="middleIcon && isMiddleIconString" :class="middleIcon" class="middle-icon middle-icon--fa"></i>
+    <el-icon v-else-if="middleIcon" :size="size" class="middle-icon">
       <component :is="middleIcon" />
     </el-icon>
     
@@ -36,26 +32,32 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Right } from '@element-plus/icons-vue'
+import { InfoFilled, Right } from '@element-plus/icons-vue'
 
 interface Props {
   type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
   size?: 'large' | 'default' | 'small'
-  leftIcon?: any  // 左侧图标组件
-  middleIcon?: any  // 中间图标组件（如警告图标）
-  rightIcon?: any  // 右侧图标组件（默认为 Right null 则不显示）
+  effect?: 'dark' | 'light' | 'plain'  // 主题，与 el-tag 一致
+  leftIcon?: any  // 左侧图标：Vue 组件（Element 图标）或字符串（如 FontAwesome class 'fa-solid fa-circle-xmark'）
+  middleIcon?: any  // 中间图标：Vue 组件或字符串（如 FontAwesome class）
+  rightIcon?: any  // 右侧图标：默认 InfoFilled（表示「可查看详情」）；传 null 不显示；也可用 Right（跳转）、View（查看）等
   width?: string | number  // 自定义宽度
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'primary',
   size: 'default',
+  effect: 'light',
   leftIcon: undefined,
   middleIcon: undefined,
   rightIcon: undefined,
   width: undefined
 })
 
+// 左侧/中间图标为字符串时（如 FontAwesome class）用 <i> 渲染，与 AuditState 实心一致
+const isLeftIconString = computed(() => typeof props.leftIcon === 'string')
+const isMiddleIconString = computed(() => typeof props.middleIcon === 'string')
+
 // 获取实际的右侧图标：未传值时使用默认图标，传 null 则不显示
 const actualRightIcon = computed(() => {
   if (props.rightIcon === null) return null
@@ -80,6 +82,11 @@ export default {
 <style scoped lang="scss">
 .clickable-tag {
   transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  .left-icon {
+    margin-right: 4px;
+  }
   
   // 覆盖 el-tag 的内部结构
   :deep(.el-tag__content) {
@@ -91,10 +98,8 @@ export default {
   // 有交互功能时才显示手型光标和悬停效果
   &.has-action {
     cursor: pointer;
-    
     &:hover {
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);   
       .right-icon {
         transform: translateX(2px);
       }
@@ -103,7 +108,6 @@ export default {
   .middle-icon {
     animation: pulse 1.5s ease-in-out infinite;
   }
-  
   .right-icon {
     opacity: 0.7;
     transition: all 0.2s;