优化图标选择界面

frontend/src/components/IconPicker.vue

@@ -72,7 +72,7 @@
             :title="icon"
           >
             <div class="icon-wrapper">
-              <Icon :icon="`tabler:${icon}`" size="32" />
+              <Icon :icon="`tabler:${icon}`" :width="32" :height="32" />
             </div>
             <div class="icon-name">{{ icon }}</div>
           </div>
@@ -200,7 +200,7 @@ function loadMoreIcons() {
 }
 
 // 获取后备图标列表
-function getFallbackIcons(prefix: string): string[] {
+function getFallbackIcons(_prefix: string): string[] {
   const commonIcons = [
     'home', 'settings', 'user', 'menu', 'search', 'file', 'folder', 'dashboard',
     'users', 'lock', 'key', 'shield', 'crown', 'trophy', 'gift', 'heart', 'star',
@@ -250,6 +250,12 @@ function handleScroll(event: Event) {
   }
 }
 
+// 处理搜索变化
+function handleSearch() {
+  // 搜索时重置分页
+  currentPage.value = 1
+}
+
 // 处理图标库切换
 async function handleLibraryChange(newLibrary: string) {
   currentLibrary.value = newLibrary
@@ -311,7 +317,7 @@ onMounted(() => {
   flex: 1;
   overflow-y: auto;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 15px;
   padding: 10px;
 }
@@ -321,13 +327,15 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 10px;
+  padding: 16px 12px;
   border: 1px solid #eee;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
   background-color: #fff;
+  height: 100px; /* 固定高度 */
+  min-height: 100px; /* 最小高度 */
 }
 
 .icon-item:hover {
@@ -345,12 +353,25 @@ onMounted(() => {
 .icon-wrapper {
   margin-bottom: 8px;
   color: #333;
+  flex-shrink: 0; /* 防止图标区域被压缩 */
+}
+
+.icon-wrapper svg {
+  width: 32px !important;
+  height: 32px !important;
 }
 
 .icon-name {
   font-size: 12px;
   color: #666;
   word-break: break-all;
+  line-height: 1.2;
+  max-height: 2.4em; /* 最多显示2行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 /* 加载更多和加载状态样式 */
@@ -396,11 +417,27 @@ onMounted(() => {
 /* 响应式调整 */
 @media (min-width: 768px) {
   .icon-grid {
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  }
+
+  .icon-item {
+    height: 110px; /* 大屏幕下稍微高一点 */
+    min-height: 110px;
   }
 
   .icon-name {
     font-size: 14px;
   }
 }
+
+@media (min-width: 1200px) {
+  .icon-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+
+  .icon-item {
+    height: 120px; /* 超大屏幕下更高 */
+    min-height: 120px;
+  }
+}
 </style>