优化分类页增加应用选择图标的模态框

templates/categories.html

@@ -46,7 +46,7 @@
 
 <!-- 添加应用模态框 -->
 <div class="modal fade" id="addAppModal" tabindex="-1" aria-labelledby="addAppModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="addAppModalLabel">添加应用</h5>
@@ -66,9 +66,34 @@
                     </div>
                     <div class="mb-3">
                         <label for="icon" class="form-label">图标</label>
-                        <select name="icon" class="form-select" required>
-                            {% for icon in icons %}
-                                <option value="{{ icon }}">{{ icon }}</option>
+                        <div class="input-group mb-3">
+                            <input type="text" id="iconSearch" class="form-control" placeholder="搜索图标名称或描述..." onkeyup="filterIcons()">
+                        </div>
+                        <div class="alert alert-info mb-3" id="selectedIconInfo" style="display: none;">
+                            <strong>已选择图标：</strong>
+                            <span id="selectedIconCode"></span>
+                            <span id="selectedIconComment"></span>
+                        </div>
+                        <div class="row g-3" id="iconContainer" style="max-height: 400px; overflow-y: auto;">
+                            {% for icon, comment in icons.items() %}
+                                <div class="col-4 col-md-3 col-lg-2 icon-item" data-icon="{{ icon }}" data-comment="{{ comment }}">
+                                    <div class="card icon-card h-100" onclick="selectIcon(this, '{{ icon }}', '{{ comment }}')">
+                                        <div class="card-body text-center d-flex flex-column">
+                                            <div class="mb-2">
+                                                <i class="{{ icon }} fa-2x"></i>
+                                            </div>
+                                            <div class="mt-auto">
+                                                <small class="text-truncate d-block">{{ comment }}</small>
+                                                <small class="text-muted d-block">{{ icon }}</small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <select name="icon" id="iconSelect" class="form-select" required style="display: none;">
+                            {% for icon, comment in icons.items() %}
+                                <option value="{{ icon }}">{{ comment }}</option>
                             {% endfor %}
                         </select>
                     </div>
@@ -89,7 +114,6 @@
         </div>
     </div>
 </div>
-
 <div class="card">
     <div class="card-body">
         <div class="mb-4">
@@ -327,5 +351,89 @@ function setCategory(mainId, subId) {
     document.getElementById('modalAppMainCategory').value = mainId;
     document.getElementById('modalAppSubCategory').value = subId;
 }
+
+function filterIcons() {
+    const searchTerm = document.getElementById('iconSearch').value.toLowerCase();
+    const iconItems = document.querySelectorAll('.icon-item');
+
+    iconItems.forEach(item => {
+        const iconName = item.getAttribute('data-icon').toLowerCase();
+        const iconComment = item.getAttribute('data-comment').toLowerCase();
+        if (iconName.includes(searchTerm) || iconComment.includes(searchTerm)) {
+            item.style.display = 'block';
+        } else {
+            item.style.display = 'none';
+        }
+    });
+}
+
+function selectIcon(element, icon, comment) {
+    // 移除所有选中状态
+    document.querySelectorAll('.icon-card').forEach(card => {
+        card.classList.remove('border-primary', 'bg-light');
+    });
+
+    // 添加选中状态
+    element.classList.add('border-primary', 'bg-light');
+
+    // 更新隐藏的select元素
+    const select = document.getElementById('iconSelect');
+    select.value = icon;
+
+    // 显示选中的图标信息
+    const selectedIconInfo = document.getElementById('selectedIconInfo');
+    document.getElementById('selectedIconCode').textContent = icon;
+    document.getElementById('selectedIconComment').textContent = " - " + comment;
+    selectedIconInfo.style.display = 'block';
+
+    // 触发change事件
+    const event = new Event('change');
+    select.dispatchEvent(event);
+}
+
+// 初始化时隐藏select元素并显示图标网格
+document.addEventListener('DOMContentLoaded', function() {
+    const select = document.getElementById('iconSelect');
+    select.style.display = 'none';
+});
 </script>
+
+<style>
+.icon-card {
+    cursor: pointer;
+    transition: all 0.2s;
+    height: 100%;
+}
+
+.icon-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.icon-card.border-primary {
+    border: 2px solid #0d6efd !important;
+}
+
+.icon-item {
+    margin-bottom: 1rem;
+}
+
+#iconContainer {
+    padding: 10px;
+}
+
+#selectedIconInfo {
+    padding: 10px;
+    border-radius: 5px;
+}
+
+#selectedIconCode {
+    font-family: monospace;
+    color: #0d6efd;
+}
+
+#selectedIconComment {
+    color: #6c757d;
+}
+</style>
 {% endblock %}

templates/index.html

@@ -831,7 +831,7 @@ body.dark-theme .secondary-filters-container::after {
     .app-description {
         position: absolute;
         bottom: calc(100% + 10px);
-        left: 20px;
+        left: -15px;
         transform: none;
         background-color: var(--tooltip-bg);
         color: var(--tooltip-text);