From 0b3bd56d1638ae566e1daa8e69bf510bf81f9c39 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 2 Aug 2025 15:40:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E6=96=B0=E5=BB=BA=E5=9F=9F?=
 =?UTF-8?q?=E5=90=8D=E6=89=80=E6=9C=89=E8=80=85=E5=AF=B9=E8=AF=9D=E6=A1=86?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=86=E8=A7=92=E4=B8=8D=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src2/components/DomainOwnerDialog.vue     | 361 +++++++++---------
 1 file changed, 187 insertions(+), 174 deletions(-)

diff --git a/dashboard/src2/components/DomainOwnerDialog.vue b/dashboard/src2/components/DomainOwnerDialog.vue
index b36c485..d6f9f98 100644
--- a/dashboard/src2/components/DomainOwnerDialog.vue
+++ b/dashboard/src2/components/DomainOwnerDialog.vue
@@ -1,12 +1,13 @@
 <template>
   <div v-if="visible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
-      <div class="p-6 border-b border-gray-200">
+    <div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col overflow-hidden">
+      <!-- 固定标题栏 -->
+      <div class="p-6 border-b border-gray-200 bg-white rounded-t-lg flex-shrink-0">
         <div class="flex items-center justify-between">
           <h3 class="text-lg font-medium text-gray-900">新建域名所有者</h3>
           <button 
             @click="closeDialog"
-            class="text-gray-400 hover:text-gray-600"
+            class="text-gray-400 hover:text-gray-600 transition-colors duration-200"
           >
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
@@ -15,7 +16,8 @@
         </div>
       </div>
 
-      <div class="p-6">
+      <!-- 可滚动内容区域 -->
+      <div class="p-6 overflow-y-auto flex-1">
         <!-- 重要提醒 -->
         <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
           <div class="flex">
@@ -58,198 +60,209 @@
             </div>
           </div>
 
-          <!-- 国家选择 -->
-          <div class="mb-6">
-            <label class="block text-sm font-medium text-gray-700 mb-2">国家/地区 *</label>
-            <select 
-              v-model="selectedCountry" 
-              @change="onCountryChange"
-              class="w-full border rounded px-3 py-2"
-            >
-              <option value="">请选择国家/地区</option>
-              <option v-for="country in countryList" :key="country.code" :value="country.code">
-                {{ country.name }}
-              </option>
-            </select>
-          </div>
-
           <!-- 中文信息 -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <!-- 单位名称（企业时显示） -->
-            <div v-if="formData.c_regtype === 'E'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">所有者单位名称（中文） *</label>
+          <div class="space-y-4">
+            <!-- 单位名称（企业时显示）- 单独一行 -->
+            <div v-if="formData.c_regtype === 'E'" class="w-full">
+              <label class="block text-sm font-medium text-gray-700 mb-2">所有者单位名称 *</label>
               <input 
                 v-model="formData.c_org_m" 
                 type="text" 
-                class="w-full border rounded px-3 py-2"
+                class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 placeholder="请输入单位名称"
               >
             </div>
 
-            <!-- 姓名 -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">姓（中文） *</label>
-              <input 
-                v-model="formData.c_ln_m" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入姓"
-              >
-            </div>
-
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">名（中文） *</label>
-              <input 
-                v-model="formData.c_fn_m" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入名"
-              >
-            </div>
-
-            <!-- 所属区域 - 仅中国显示 -->
-            <div v-if="selectedCountry === 'CN'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">所属省份 *</label>
-              <select 
-                v-model="selectedProvince" 
-                @change="onProvinceChange"
-                class="w-full border rounded px-3 py-2"
-              >
-                <option value="">请选择省份</option>
-                <option v-for="province in chinaRegions" :key="province.code" :value="province.name">
-                  {{ province.name }}
-                </option>
-              </select>
-            </div>
-
-            <div v-if="selectedCountry === 'CN'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">所属城市 *</label>
-              <select 
-                v-model="selectedCity" 
-                @change="onCityChange"
-                class="w-full border rounded px-3 py-2"
-                :disabled="!selectedProvince"
-              >
-                <option value="">请选择城市</option>
-                <option v-for="city in getCurrentCities()" :key="city.code" :value="city.name">
-                  {{ city.name }}
-                </option>
-              </select>
-            </div>
-
-            <div v-if="selectedCountry === 'CN'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">所属区县</label>
-              <select 
-                v-model="selectedDistrict" 
-                @change="onDistrictChange"
-                class="w-full border rounded px-3 py-2"
-                :disabled="!selectedCity"
-              >
-                <option value="">请选择区县</option>
-                <option v-for="district in getCurrentDistricts()" :key="district.code" :value="district.name">
-                  {{ district.name }}
-                </option>
-              </select>
-            </div>
-
-            <!-- 非中国地区的省份/州输入框 -->
-            <div v-if="selectedCountry && selectedCountry !== 'CN'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">省份/州 *</label>
-              <input 
-                v-model="formData.c_st_m" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入省份/州"
-              >
-            </div>
-
-            <!-- 非中国地区的城市输入框 -->
-            <div v-if="selectedCountry && selectedCountry !== 'CN'">
-              <label class="block text-sm font-medium text-gray-700 mb-2">城市 *</label>
-              <input 
-                v-model="formData.c_ct_m" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入城市"
-              >
-            </div>
-
-            <!-- 通讯地址 -->
-            <div class="md:col-span-2">
-              <label class="block text-sm font-medium text-gray-700 mb-2">通讯地址（中文） *</label>
-              <input 
-                v-model="formData.c_adr_m" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入详细地址"
-              >
-            </div>
-
-            <!-- 邮编 -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">邮编 *</label>
-              <input 
-                v-model="formData.c_pc" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                placeholder="请输入邮编"
-              >
-            </div>
-
-            <!-- 手机号码 -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
-              <div class="flex">
-                <span class="inline-flex items-center px-3 py-2 border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-l-md">
-                  +86
-                </span>
+            <!-- 姓名部分 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">姓 *</label>
                 <input 
-                  v-model="formData.c_ph" 
+                  v-model="formData.c_ln_m" 
                   type="text" 
-                  class="flex-1 border rounded-r-md px-3 py-2"
-                  placeholder="请输入手机号码"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="请输入姓"
+                >
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">名 *</label>
+                <input 
+                  v-model="formData.c_fn_m" 
+                  type="text" 
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="请输入名"
                 >
               </div>
             </div>
 
+            <!-- 区域选择 -->
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <!-- 国家/地区选择 -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">国家/地区 *</label>
+                <select 
+                  v-model="selectedCountry" 
+                  @change="onCountryChange"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                >
+                  <option value="">请选择国家/地区</option>
+                  <option v-for="country in countryList" :key="country.code" :value="country.code">
+                    {{ country.name }}
+                  </option>
+                </select>
+              </div>
+
+              <!-- 所属区域 - 仅中国显示 -->
+              <div v-if="selectedCountry === 'CN'">
+                <label class="block text-sm font-medium text-gray-700 mb-2">所属省份 *</label>
+                <select 
+                  v-model="selectedProvince" 
+                  @change="onProvinceChange"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                >
+                  <option value="">请选择省份</option>
+                  <option v-for="province in chinaRegions" :key="province.code" :value="province.name">
+                    {{ province.name }}
+                  </option>
+                </select>
+              </div>
+
+              <div v-if="selectedCountry === 'CN'">
+                <label class="block text-sm font-medium text-gray-700 mb-2">所属城市 *</label>
+                <select 
+                  v-model="selectedCity" 
+                  @change="onCityChange"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  :disabled="!selectedProvince"
+                >
+                  <option value="">请选择城市</option>
+                  <option v-for="city in getCurrentCities()" :key="city.code" :value="city.name">
+                    {{ city.name }}
+                  </option>
+                </select>
+              </div>
+
+              <div v-if="selectedCountry === 'CN'">
+                <label class="block text-sm font-medium text-gray-700 mb-2">所属区县</label>
+                <select 
+                  v-model="selectedDistrict" 
+                  @change="onDistrictChange"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  :disabled="!selectedCity"
+                >
+                  <option value="">请选择区县</option>
+                  <option v-for="district in getCurrentDistricts()" :key="district.code" :value="district.name">
+                    {{ district.name }}
+                  </option>
+                </select>
+              </div>
+
+              <!-- 非中国地区的省份/州输入框 -->
+              <div v-if="selectedCountry && selectedCountry !== 'CN'">
+                <label class="block text-sm font-medium text-gray-700 mb-2">省份/州 *</label>
+                <input 
+                  v-model="formData.c_st_m" 
+                  type="text" 
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="请输入省份/州"
+                >
+              </div>
+
+              <!-- 非中国地区的城市输入框 -->
+              <div v-if="selectedCountry && selectedCountry !== 'CN'">
+                <label class="block text-sm font-medium text-gray-700 mb-2">城市 *</label>
+                <input 
+                  v-model="formData.c_ct_m" 
+                  type="text" 
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="请输入城市"
+                >
+              </div>
+            </div>
+
+            <!-- 通讯地址 -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-2">通讯地址 *</label>
+              <input 
+                v-model="formData.c_adr_m" 
+                type="text" 
+                class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="请输入详细地址"
+              >
+            </div>
+
+            <!-- 联系信息 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- 邮编 -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">邮编 *</label>
+                <input 
+                  v-model="formData.c_pc" 
+                  type="text" 
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="请输入邮编"
+                >
+              </div>
+
+              <!-- 手机号码 -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
+                <div class="flex">
+                  <span class="inline-flex items-center px-3 py-2 border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-l-lg">
+                    +86
+                  </span>
+                  <input 
+                    v-model="formData.c_ph" 
+                    type="text" 
+                    class="flex-1 border rounded-r-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    placeholder="请输入手机号码"
+                  >
+                </div>
+              </div>
+            </div>
+
             <!-- 电子邮箱 -->
-            <div class="md:col-span-2">
+            <div>
               <label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱 *</label>
               <input 
                 v-model="formData.c_em" 
                 type="email" 
-                class="w-full border rounded px-3 py-2"
+                class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                 placeholder="请输入邮箱地址"
               >
             </div>
 
-            <!-- 证件类型 -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">证件类型 *</label>
-              <select 
-                v-model="formData.c_idtype_gswl" 
-                @change="onCertificateTypeChange"
-                class="w-full border rounded px-3 py-2"
-              >
-                <option value="">请选择证件类型</option>
-                <option v-for="option in getCertificateTypeOptions()" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </option>
-              </select>
-            </div>
+            <!-- 证件信息 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <!-- 证件类型 -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">证件类型 *</label>
+                <select 
+                  v-model="formData.c_idtype_gswl" 
+                  @change="onCertificateTypeChange"
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                >
+                  <option value="">请选择证件类型</option>
+                  <option v-for="option in getCertificateTypeOptions()" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </option>
+                </select>
+              </div>
 
-            <!-- 证件号码 -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">证件号码 *</label>
-              <input 
-                v-model="formData.c_idnum_gswl" 
-                type="text" 
-                class="w-full border rounded px-3 py-2"
-                :placeholder="getCertificatePlaceholder()"
-                @input="validateIdNumber"
-              >
-              <div v-if="idNumberError" class="text-red-500 text-xs mt-1">
-                {{ idNumberError }}
+              <!-- 证件号码 -->
+              <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2">证件号码 *</label>
+                <input 
+                  v-model="formData.c_idnum_gswl" 
+                  type="text" 
+                  class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  :placeholder="getCertificatePlaceholder()"
+                  @input="validateIdNumber"
+                >
+                <div v-if="idNumberError" class="text-red-500 text-xs mt-1">
+                  {{ idNumberError }}
+                </div>
               </div>
             </div>
           </div>
@@ -266,14 +279,14 @@
             <button 
               type="button"
               @click="closeDialog"
-              class="px-4 py-2 border border-gray-300 bg-white text-gray-700 rounded hover:bg-gray-50"
+              class="px-6 py-2 border border-gray-300 bg-white text-gray-700 rounded-lg hover:bg-gray-50 transition-colors duration-200"
             >
               取消
             </button>
             <button 
               type="submit"
               :disabled="isLoading"
-              class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300"
+              class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 transition-colors duration-200"
             >
               {{ isLoading ? '创建中...' : '立即保存' }}
             </button>