feat: Enhance facility modal with custom select dropdowns and improved styling

css/pages/facilities.css

@@ -313,10 +313,18 @@
 .modal-title {
     font-size: 32px;
     font-weight: 700;
-    margin-bottom: 0;
+    margin-bottom: 16px;
     line-height: 1.2;
 }
 
+.modal-badges-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
 .modal-badges {
     display: flex;
     gap: 10px;
@@ -521,14 +529,6 @@
     transform: translateY(-1px);
 }
 
-.modal-title-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 16px;
-    margin-bottom: 16px;
-}
-
 .btn-edit-facility {
     display: inline-flex;
     align-items: center;
@@ -734,28 +734,117 @@
 
 .form-group input[type="text"],
 .form-group input[type="number"],
-.form-group textarea,
+.form-group textarea {
-.form-group select {
     width: 100%;
-    padding: 10px 14px;
+    padding: 12px 16px;
     border: 1.5px solid rgba(0,0,0,0.1);
     border-radius: 12px;
     font-size: 14px;
     font-family: inherit;
-    background: #f9f9fa;
+    background-color: #f9f9fa;
-    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+    transition: all 0.2s ease;
     color: var(--text-primary);
+    box-sizing: border-box;
 }
 
 .form-group input:focus,
-.form-group textarea:focus,
+.form-group textarea:focus {
-.form-group select:focus {
     outline: none;
     border-color: var(--accent-color);
-    background: #fff;
+    background-color: #fff;
     box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
 }
 
+/* Custom Select Dropdown */
+.custom-select {
+    position: relative;
+    width: 100%;
+    user-select: none;
+    font-size: 14px;
+}
+
+.custom-select-trigger {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 12px 16px;
+    border: 1.5px solid rgba(0,0,0,0.1);
+    border-radius: 12px;
+    background-color: #f9f9fa;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+}
+
+.custom-select-trigger i {
+    color: var(--text-secondary);
+    font-size: 12px;
+    transition: transform 0.3s ease;
+}
+
+.custom-select:hover .custom-select-trigger {
+    background-color: #fff;
+    border-color: rgba(0,0,0,0.2);
+}
+
+.custom-select.open .custom-select-trigger {
+    border-color: var(--accent-color);
+    background-color: #fff;
+    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
+}
+
+.custom-select.open .custom-select-trigger i {
+    transform: rotate(180deg);
+}
+
+.custom-select-options {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
+    border: 1px solid rgba(0,0,0,0.08);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+    z-index: 100;
+    padding: 8px;
+}
+
+.custom-select.open .custom-select-options {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.custom-option {
+    padding: 10px 14px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    color: var(--text-primary);
+    margin-bottom: 2px;
+}
+
+.custom-option:last-child {
+    margin-bottom: 0;
+}
+
+.custom-option:hover {
+    background: #f5f5f7;
+}
+
+.custom-option.selected {
+    background: #e0f2fe;
+    color: #0369a1;
+    font-weight: 600;
+}
+
 .form-group textarea {
     resize: vertical;
     min-height: 60px;

facilities.html

@@ -76,15 +76,15 @@
         <div class="modal-content facility-modal-content">
             <span class="close-modal">&times;</span>
             <div class="modal-header">
-                <div class="modal-title-row">
                 <h3 class="modal-title" id="modal-title">设施名称</h3>
+                <div class="modal-badges-row">
+                    <div class="modal-badges" id="modal-badges">
+                        <!-- Badges injected by JS -->
+                    </div>
                     <button class="btn-edit-facility" id="btn-edit-facility" title="编辑此设施">
                         <i class="fas fa-pen"></i> 编辑
                     </button>
                 </div>
-                <div class="modal-badges" id="modal-badges">
-                    <!-- Badges injected by JS -->
-                </div>
             </div>
             
             <div class="modal-body">
@@ -152,28 +152,49 @@
                         </div>
                         <div class="form-row">
                             <div class="form-group">
-                                <label for="editor-type">类型</label>
+                                <label>类型</label>
-                                <select id="editor-type">
+                                <div class="custom-select">
-                                    <option value="resource">资源类</option>
+                                    <input type="hidden" id="editor-type" value="resource">
-                                    <option value="xp">经验类</option>
+                                    <div class="custom-select-trigger">
-                                    <option value="infrastructure">基础设施</option>
+                                        <span class="custom-select-text">资源类</span>
-                                </select>
+                                        <i class="fas fa-chevron-down"></i>
+                                    </div>
+                                    <div class="custom-select-options">
+                                        <div class="custom-option selected" data-value="resource">资源类</div>
+                                        <div class="custom-option" data-value="xp">经验类</div>
+                                        <div class="custom-option" data-value="infrastructure">基础设施</div>
+                                    </div>
+                                </div>
                             </div>
                             <div class="form-group">
-                                <label for="editor-status">状态</label>
+                                <label>状态</label>
-                                <select id="editor-status">
+                                <div class="custom-select">
-                                    <option value="online">正常运行</option>
+                                    <input type="hidden" id="editor-status" value="online">
-                                    <option value="maintenance">维护中</option>
+                                    <div class="custom-select-trigger">
-                                    <option value="offline">暂时失效</option>
+                                        <span class="custom-select-text">正常运行</span>
-                                </select>
+                                        <i class="fas fa-chevron-down"></i>
+                                    </div>
+                                    <div class="custom-select-options">
+                                        <div class="custom-option selected" data-value="online">正常运行</div>
+                                        <div class="custom-option" data-value="maintenance">维护中</div>
+                                        <div class="custom-option" data-value="offline">暂时失效</div>
+                                    </div>
+                                </div>
                             </div>
                             <div class="form-group">
-                                <label for="editor-dimension">维度</label>
+                                <label>维度</label>
-                                <select id="editor-dimension">
+                                <div class="custom-select">
-                                    <option value="overworld">主世界</option>
+                                    <input type="hidden" id="editor-dimension" value="overworld">
-                                    <option value="nether">下界</option>
+                                    <div class="custom-select-trigger">
-                                    <option value="end">末地</option>
+                                        <span class="custom-select-text">主世界</span>
-                                </select>
+                                        <i class="fas fa-chevron-down"></i>
+                                    </div>
+                                    <div class="custom-select-options">
+                                        <div class="custom-option selected" data-value="overworld">主世界</div>
+                                        <div class="custom-option" data-value="nether">下界</div>
+                                        <div class="custom-option" data-value="end">末地</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div class="form-row coords-row">

js/facilities_script.js

@@ -298,6 +298,61 @@ document.addEventListener('DOMContentLoaded', () => {
     let editorInstructions = [];
     let editorNotes = [];
 
+    // Initialize custom selects
+    document.querySelectorAll('.custom-select').forEach(select => {
+        const trigger = select.querySelector('.custom-select-trigger');
+        const options = select.querySelectorAll('.custom-option');
+        const input = select.querySelector('input[type="hidden"]');
+        const text = select.querySelector('.custom-select-text');
+
+        trigger.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const isOpen = select.classList.contains('open');
+            // Close all others
+            document.querySelectorAll('.custom-select').forEach(s => s.classList.remove('open'));
+            if (!isOpen) {
+                select.classList.add('open');
+            }
+        });
+
+        options.forEach(option => {
+            option.addEventListener('click', (e) => {
+                e.stopPropagation();
+                
+                // Update selection visually
+                options.forEach(opt => opt.classList.remove('selected'));
+                option.classList.add('selected');
+                text.innerText = option.innerText;
+                
+                // Update hidden input and trigger change
+                input.value = option.dataset.value;
+                input.dispatchEvent(new Event('change'));
+                
+                // Close dropdown
+                select.classList.remove('open');
+            });
+        });
+    });
+
+    // Close custom selects on outside click
+    document.addEventListener('click', () => {
+        document.querySelectorAll('.custom-select').forEach(s => s.classList.remove('open'));
+    });
+
+    function setCustomSelectValue(id, value) {
+        const input = document.getElementById(id);
+        if (!input) return;
+        const select = input.closest('.custom-select');
+        const option = select.querySelector(`.custom-option[data-value="${value}"]`);
+        
+        if (option) {
+            input.value = value;
+            select.querySelector('.custom-select-text').innerText = option.innerText;
+            select.querySelectorAll('.custom-option').forEach(opt => opt.classList.remove('selected'));
+            option.classList.add('selected');
+        }
+    }
+
     function openEditor(item) {
         // Reset state
         editorContributors = item ? [...item.contributors] : [];
@@ -307,9 +362,11 @@ document.addEventListener('DOMContentLoaded', () => {
         // Populate form fields
         document.getElementById('editor-title').value = item ? item.title : '';
         document.getElementById('editor-intro').value = item ? item.intro : '';
-        document.getElementById('editor-type').value = item ? item.type : 'resource';
+        
-        document.getElementById('editor-status').value = item ? item.status : 'online';
+        setCustomSelectValue('editor-type', item ? item.type : 'resource');
-        document.getElementById('editor-dimension').value = item ? item.dimension : 'overworld';
+        setCustomSelectValue('editor-status', item ? item.status : 'online');
+        setCustomSelectValue('editor-dimension', item ? item.dimension : 'overworld');
+        
         document.getElementById('editor-x').value = item ? item.coordinates.x : '';
         document.getElementById('editor-y').value = item ? item.coordinates.y : '';
         document.getElementById('editor-z').value = item ? item.coordinates.z : '';