[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化

src/components/IconSelect/index.vue

@@ -16,6 +16,19 @@
 
       <el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable @input="filterIcons" />
 
+      <div class="iconify-panel">
+        <div class="iconify-heading">也可以直接输入 Iconify 图标名</div>
+        <div class="iconify-form">
+          <el-input
+            v-model="customIcon"
+            placeholder="例如：mdi:account-circle-outline"
+            clearable
+            @keyup.enter="applyCustomIcon"
+          />
+          <el-button type="primary" plain @click="applyCustomIcon">使用</el-button>
+        </div>
+      </div>
+
       <el-scrollbar height="w-[200px]">
         <ul class="icon-list">
           <el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
@@ -44,6 +57,7 @@ const { modelValue, width } = toRefs(props);
 const iconNames = ref<string[]>(icons);
 
 const filterValue = ref('');
+const customIcon = ref('');
 
 /**
  * 筛选图标
@@ -63,6 +77,21 @@ const selectedIcon = (iconName: string) => {
   emit('update:modelValue', iconName);
   visible.value = false;
 };
+
+const applyCustomIcon = () => {
+  const value = customIcon.value.trim();
+  if (!value) return;
+  emit('update:modelValue', value);
+  visible.value = false;
+};
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    customIcon.value = value?.includes(':') ? value : '';
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -73,31 +102,59 @@ const selectedIcon = (iconName: string) => {
 .el-divider--horizontal {
   margin: 10px auto !important;
 }
+
+.iconify-panel {
+  padding: 2px 4px 12px;
+}
+
+.iconify-heading {
+  margin-bottom: 8px;
+  color: var(--app-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.iconify-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
 .icon-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+  gap: 8px;
+  padding: 4px;
   margin-top: 10px;
 
   .icon-item {
     cursor: pointer;
-    width: 10%;
-    margin: 0 10px 10px 0;
-    padding: 5px;
+    min-height: 44px;
+    padding: 8px 6px;
     display: flex;
     flex-direction: column;
-    justify-items: center;
+    justify-content: center;
     align-items: center;
-    border: 1px solid #ccc;
+    border: 1px solid rgba(148, 163, 184, 0.16);
+    border-radius: 12px;
+    background: var(--app-surface-bg);
+    transition:
+      border-color 0.2s ease,
+      background-color 0.2s ease,
+      color 0.2s ease,
+      transform 0.2s ease;
+
     &:hover {
       border-color: var(--el-color-primary);
+      background: var(--app-accent-soft);
       color: var(--el-color-primary);
-      transition: all 0.2s;
-      transform: scaleX(1.1);
+      transform: translateY(-1px);
     }
   }
+
   .active {
     border-color: var(--el-color-primary);
+    background: rgba(64, 158, 255, 0.12);
     color: var(--el-color-primary);
   }
 }