From 20870a9fec921d9394b22ae982385a6d450694f1 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Fri, 1 Aug 2025 12:59:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9F=9F=E5=90=8D=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src2/pages/NewJsiteDomain.vue | 109 ++++++++++++++++--------
 1 file changed, 72 insertions(+), 37 deletions(-)

diff --git a/dashboard/src2/pages/NewJsiteDomain.vue b/dashboard/src2/pages/NewJsiteDomain.vue
index f6d05c0..26c69d6 100644
--- a/dashboard/src2/pages/NewJsiteDomain.vue
+++ b/dashboard/src2/pages/NewJsiteDomain.vue
@@ -34,10 +34,22 @@
                 class="flex-1 border rounded px-3 py-2"
                 @keyup.enter="checkDomain"
               />
+              <div class="relative">
+                <button 
+                  @click="showSuffixSelector = !showSuffixSelector"
+                  class="suffix-selector-btn px-4 py-2 border border-gray-300 bg-white text-gray-700 rounded-l-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 whitespace-nowrap flex items-center gap-2"
+                >
+                  {{ selectedSuffix }}
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  </svg>
+                </button>
+
+              </div>
               <button 
                 @click="checkDomain"
                 :disabled="isChecking"
-                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 whitespace-nowrap"
+                class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 disabled:bg-gray-300 whitespace-nowrap"
               >
                 {{ isChecking ? '查询中...' : '查询域名' }}
               </button>
@@ -45,29 +57,29 @@
           </div>
 
           <!-- 域名后缀选择区域 -->
-          <div class="border rounded-lg p-4 bg-gray-50">
+          <div v-if="showSuffixSelector" class="border rounded-lg p-4 bg-gray-50">
             <div class="mb-4">
               <h3 class="text-sm font-medium text-gray-700 mb-3">选择域名后缀</h3>
               
-                                            <!-- 搜索和排序 -->
-               <div class="flex flex-col sm:flex-row gap-2 mb-4">
-                 <div class="search-container">
-                   <input 
-                     v-model="suffixSearch" 
-                     type="text" 
-                     placeholder="搜索后缀"
-                     class="search-input"
-                   />
-                   <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                   </svg>
-                 </div>
-                 <select v-model="suffixSort" class="px-3 py-2 text-sm border rounded-md bg-white min-w-[120px]">
-                   <option value="default">默认排序</option>
-                   <option value="popular">热门优先</option>
-                   <option value="alphabetical">字母排序</option>
-                 </select>
-               </div>
+              <!-- 搜索和排序 -->
+              <div class="flex flex-col sm:flex-row gap-2 mb-4">
+                <div class="search-container">
+                  <input 
+                    v-model="suffixSearch" 
+                    type="text" 
+                    placeholder="搜索后缀"
+                    class="search-input"
+                  />
+                  <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                  </svg>
+                </div>
+                <select v-model="suffixSort" class="px-3 py-2 text-sm border rounded-md bg-white min-w-[120px]">
+                  <option value="default">默认排序</option>
+                  <option value="popular">热门优先</option>
+                  <option value="alphabetical">字母排序</option>
+                </select>
+              </div>
 
               <!-- 分类标签 -->
               <div class="category-tabs overflow-x-auto">
@@ -85,26 +97,26 @@
               </div>
             </div>
 
-                         <!-- 域名后缀网格 -->
-             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 domain-suffix-grid">
-               <button 
+            <!-- 域名后缀网格 -->
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 domain-suffix-grid">
+                             <button 
                  v-for="suffix in filteredSuffixes" 
                  :key="suffix.value"
-                 @click="selectedSuffix = suffix.value"
+                 @click="selectSuffix(suffix.value)"
                  class="domain-suffix-item p-3 text-center rounded-lg border transition-all duration-200"
                  :class="selectedSuffix === suffix.value 
                    ? 'border-blue-500 border-2 shadow-sm bg-blue-50' 
                    : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-gray-50'"
                >
-                 <div class="flex items-center justify-center gap-1">
-                   <span class="text-sm font-medium" :class="selectedSuffix === suffix.value ? 'text-blue-700' : 'text-gray-800'">{{ suffix.value }}</span>
-                   <span v-if="suffix.hot" class="hot-tag">
-                     HOT
-                   </span>
-                 </div>
+                <div class="flex items-center justify-center gap-1">
+                  <span class="text-sm font-medium" :class="selectedSuffix === suffix.value ? 'text-blue-700' : 'text-gray-800'">{{ suffix.value }}</span>
+                  <span v-if="suffix.hot" class="hot-tag">
+                    HOT
+                  </span>
+                </div>
 
-               </button>
-             </div>
+              </button>
+            </div>
           </div>
 
           <!-- 域名查询结果 -->
@@ -359,9 +371,9 @@ export default {
       // 域名后缀相关
       suffixSearch: '',
       suffixSort: 'default',
-      selectedCategory: 'all',
+      selectedCategory: 'popular',
+      showSuffixSelector: false,
              suffixCategories: [
-         { key: 'all', label: '全部域名' },
          { key: 'popular', label: '热门域名' },
          { key: 'gtd', label: '通用顶级域名' },
          { key: 'ntd', label: '新顶级域名' },
@@ -371,7 +383,8 @@ export default {
          { key: 'business', label: '商业域名' },
          { key: 'tech', label: '科技域名' },
          { key: 'creative', label: '创意域名' },
-         { key: 'lifestyle', label: '生活域名' }
+         { key: 'lifestyle', label: '生活域名' },
+         { key: 'all', label: '全部域名' }
        ],
              allSuffixes: [
          // 通用顶级域名 (gtd)
@@ -886,8 +899,13 @@ export default {
       };
     },
   },
+  mounted() {
+    // 添加点击外部关闭域名后缀选择区块的功能
+    document.addEventListener('click', this.handleClickOutside);
+  },
   beforeUnmount() {
     this.stopPaymentCheck();
+    document.removeEventListener('click', this.handleClickOutside);
   },
   methods: {
     async checkDomain() {
@@ -981,7 +999,22 @@ export default {
     getTotalAmount() {
       const yearlyPrice = this.domainPrice || 0;
       return (yearlyPrice * this.period).toFixed(2);
-    }
+    },
+    selectSuffix(suffix) {
+      this.selectedSuffix = suffix;
+      this.showSuffixSelector = false;
+    },
+    handleClickOutside(event) {
+      const suffixButton = event.target.closest('button');
+      const suffixSelector = event.target.closest('.border.rounded-lg.p-4.bg-gray-50');
+      
+      if (!suffixButton || !suffixButton.classList.contains('suffix-selector-btn')) {
+        if (!suffixSelector) {
+          this.showSuffixSelector = false;
+        }
+      }
+    },
+
   },
 };
 </script>
@@ -1125,6 +1158,8 @@ export default {
   }
 }
 
+
+
 /* 响应式设计 */
 @media (max-width: 640px) {
   .domain-suffix-grid {