优化域名注册界面

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,7 +57,7 @@
           </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>
               
@@ -90,7 +102,7 @@
                              <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' 
@@ -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 {