From ea2bc6cecfef76cc53922f17a570e9d1f083ddef Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 29 Jul 2025 14:44:48 +0800
Subject: [PATCH] =?UTF-8?q?NewJsiteServer.vue=E7=94=B1=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E6=99=AE=E9=80=9A=E9=A1=B5=E9=9D=A2=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src2/pages/NewJsiteServer.vue | 301 +++++++++++++-----------
 1 file changed, 159 insertions(+), 142 deletions(-)

diff --git a/dashboard/src2/pages/NewJsiteServer.vue b/dashboard/src2/pages/NewJsiteServer.vue
index 2ae0bcc..b8a3a1a 100644
--- a/dashboard/src2/pages/NewJsiteServer.vue
+++ b/dashboard/src2/pages/NewJsiteServer.vue
@@ -1,122 +1,152 @@
 <template>
-  <Dialog :options="{ title: '新建服务器', size: 'lg' }" v-model="show">
-    <!-- 第一步：选择服务器配置和支付方式 -->
-    <template v-if="!showPaymentProcessing" #body-content>
-      <div class="p-4 sm:p-6">
+  <div>
+    <!-- 页面头部 -->
+    <div class="sticky top-0 z-10 shrink-0">
+      <Header>
+        <Breadcrumbs
+          :items="[
+            { label: '服务器', route: '/jsite-servers' },
+            { label: '新建服务器', route: '/jsite-servers/new' }
+          ]"
+        />
+      </Header>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="mx-auto max-w-2xl px-5">
+      <!-- 第一步：选择服务器配置和支付方式 -->
+      <div v-if="!showPaymentProcessing" class="space-y-12 pb-[50vh] pt-12">
         <div class="mb-6">
-          <p class="mt-1 text-sm text-gray-600">
+          <h1 class="text-2xl font-bold text-gray-900 mb-2">新建服务器</h1>
+          <p class="text-sm text-gray-600">
             请选择服务器配置和支付方式，点击"创建"后将自动为您开通。
           </p>
         </div>
-        <div class="mb-4">
-          <label class="block text-sm font-medium text-gray-700 mb-2">区域选择</label>
-          <select v-model="selectedRegionId" class="w-full border rounded px-3 py-2" required @change="onRegionChange">
-            <option value="">请选择区域</option>
-            <option v-for="region in regions" :key="getRegionId(region)" :value="getRegionId(region)">
-              {{ getRegionName(region) }}
-            </option>
-          </select>
-          <!-- 调试信息 -->
-          <div v-if="regions.length === 0" class="mt-2 text-sm text-gray-500">
-            正在加载区域列表...
-          </div>
-          <div v-if="regions.length > 0" class="mt-2 text-sm text-gray-500">
-            已加载 {{ regions.length }} 个区域
-          </div>
-        </div>
-        <div class="mb-4">
-          <label class="block text-sm font-medium text-gray-700 mb-2">套餐选择</label>
-          <select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required>
-            <option value="">请选择套餐</option>
-            <option v-for="plan in plans" :key="plan.plan_id" :value="plan.plan_id">
-              {{ getPlanDisplayName(plan) }}
-            </option>
-          </select>
-        </div>
-        <div class="mb-4">
-          <label class="block text-sm font-medium text-gray-700 mb-2">镜像选择</label>
-          <select v-model="selectedImageId" class="w-full border rounded px-3 py-2" required>
-            <option value="">请选择镜像</option>
-            <option v-for="image in images" :key="getImageId(image)" :value="getImageId(image)">
-              {{ getImageDisplayName(image) }}
-            </option>
-          </select>
-        </div>
-        <div class="mb-4">
-          <label class="block text-sm font-medium text-gray-700 mb-2">购买时长</label>
-          <select v-model="period" class="w-full border rounded px-3 py-2">
-            <option v-for="p in periods" :key="p.value" :value="p.value">{{ p.label }}</option>
-          </select>
-        </div>
 
-        <!-- 价格信息显示 -->
-        <div v-if="selectedPlanId && selectedImageId" class="mb-6 border-t border-gray-200 pt-4">
-          <div class="flex justify-between items-center">
-            <div class="text-sm text-gray-600">月度费用</div>
-            <div class="font-medium">
-              ¥ {{ getSelectedPlanPrice() }} 
-              <span class="text-gray-500 text-sm">(月付)</span>
+        <div class="space-y-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">区域选择</label>
+            <select v-model="selectedRegionId" class="w-full border rounded px-3 py-2" required @change="onRegionChange">
+              <option value="">请选择区域</option>
+              <option v-for="region in regions" :key="getRegionId(region)" :value="getRegionId(region)">
+                {{ getRegionName(region) }}
+              </option>
+            </select>
+            <!-- 调试信息 -->
+            <div v-if="regions.length === 0" class="mt-2 text-sm text-gray-500">
+              正在加载区域列表...
+            </div>
+            <div v-if="regions.length > 0" class="mt-2 text-sm text-gray-500">
+              已加载 {{ regions.length }} 个区域
             </div>
           </div>
-          <div class="flex justify-between items-center mt-2">
-            <div class="text-sm text-gray-600">购买时长</div>
-            <div class="font-medium">{{ period }} 个月</div>
-          </div>
-          <div class="flex justify-between items-center mt-2 text-lg font-bold">
-            <div>总计</div>
-            <div>¥ {{ getTotalAmount() }}</div>
-          </div>
-        </div>
 
-        <!-- 支付方式选择 -->
-        <div class="mb-6 border-t border-gray-200 pt-4">
-          <label class="block text-sm font-medium text-gray-700 mb-3">
-            选择支付方式
-          </label>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-            <button 
-              class="p-4 border rounded-lg flex flex-col items-center justify-center hover:bg-gray-50 transition-all"
-              :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'balance', 'border-gray-200': selectedPaymentMethod !== 'balance'}"
-              @click="selectedPaymentMethod = 'balance'"
-            >
-              <span class="text-gray-800 font-medium">余额支付</span>
-            </button>
-            
-            <button 
-              class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
-              :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'alipay', 'border-gray-200': selectedPaymentMethod !== 'alipay'}"
-              @click="selectedPaymentMethod = 'alipay'"
-            >
-              <div class="flex flex-col items-center">
-                <div class="mb-2">
-                  <AlipayLogo class="h-8" />
-                </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">套餐选择</label>
+            <select v-model="selectedPlanId" class="w-full border rounded px-3 py-2" required>
+              <option value="">请选择套餐</option>
+              <option v-for="plan in plans" :key="plan.plan_id" :value="plan.plan_id">
+                {{ getPlanDisplayName(plan) }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">镜像选择</label>
+            <select v-model="selectedImageId" class="w-full border rounded px-3 py-2" required>
+              <option value="">请选择镜像</option>
+              <option v-for="image in images" :key="getImageId(image)" :value="getImageId(image)">
+                {{ getImageDisplayName(image) }}
+              </option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">购买时长</label>
+            <select v-model="period" class="w-full border rounded px-3 py-2">
+              <option v-for="p in periods" :key="p.value" :value="p.value">{{ p.label }}</option>
+            </select>
+          </div>
+
+          <!-- 价格信息显示 -->
+          <div v-if="selectedPlanId && selectedImageId" class="border-t border-gray-200 pt-4">
+            <div class="flex justify-between items-center">
+              <div class="text-sm text-gray-600">月度费用</div>
+              <div class="font-medium">
+                ¥ {{ getSelectedPlanPrice() }} 
+                <span class="text-gray-500 text-sm">(月付)</span>
               </div>
-            </button>
-            
-            <button 
-              class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
-              :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'wechatpay', 'border-gray-200': selectedPaymentMethod !== 'wechatpay'}"
-              @click="selectedPaymentMethod = 'wechatpay'"
-            >
-              <div class="flex flex-col items-center">
-                <div class="mb-2">
-                  <WeChatPayLogo class="h-8" />
+            </div>
+            <div class="flex justify-between items-center mt-2">
+              <div class="text-sm text-gray-600">购买时长</div>
+              <div class="font-medium">{{ period }} 个月</div>
+            </div>
+            <div class="flex justify-between items-center mt-2 text-lg font-bold">
+              <div>总计</div>
+              <div>¥ {{ getTotalAmount() }}</div>
+            </div>
+          </div>
+
+          <!-- 支付方式选择 -->
+          <div class="border-t border-gray-200 pt-4">
+            <label class="block text-sm font-medium text-gray-700 mb-3">
+              选择支付方式
+            </label>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
+              <button 
+                class="p-4 border rounded-lg flex flex-col items-center justify-center hover:bg-gray-50 transition-all"
+                :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'balance', 'border-gray-200': selectedPaymentMethod !== 'balance'}"
+                @click="selectedPaymentMethod = 'balance'"
+              >
+                <span class="text-gray-800 font-medium">余额支付</span>
+              </button>
+              
+              <button 
+                class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
+                :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'alipay', 'border-gray-200': selectedPaymentMethod !== 'alipay'}"
+                @click="selectedPaymentMethod = 'alipay'"
+              >
+                <div class="flex flex-col items-center">
+                  <div class="mb-2">
+                    <AlipayLogo class="h-8" />
+                  </div>
                 </div>
-              </div>
+              </button>
+              
+              <button 
+                class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
+                :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'wechatpay', 'border-gray-200': selectedPaymentMethod !== 'wechatpay'}"
+                @click="selectedPaymentMethod = 'wechatpay'"
+              >
+                <div class="flex flex-col items-center">
+                  <div class="mb-2">
+                    <WeChatPayLogo class="h-8" />
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          <div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-md text-sm">
+            {{ error }}
+          </div>
+
+          <!-- 创建按钮 -->
+          <div class="pt-4">
+            <button 
+              type="button"
+              class="w-full px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
+              @click="createInstance"
+              :disabled="isLoading"
+            >
+              {{ isLoading ? '处理中...' : '创建' }}
             </button>
           </div>
         </div>
-
-        <div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
-          {{ error }}
-        </div>
       </div>
-    </template>
 
-    <!-- 第二步：处理支付 -->
-    <template v-else #body-content>
-      <div class="p-4 sm:p-6">
+      <!-- 第二步：处理支付 -->
+      <div v-else class="space-y-12 pb-[50vh] pt-12">
         <!-- 加载中状态 -->
         <div v-if="isProcessingPayment" class="text-center py-8">
           <div class="h-12 w-12 mx-auto animate-spin text-blue-600 mb-4 flex items-center justify-center">
@@ -141,6 +171,15 @@
           <p class="text-gray-500 text-sm">
             您可以在服务器列表中查看服务器状态，创建完成后状态将更新为"Running"。
           </p>
+          <div class="mt-6">
+            <button 
+              type="button"
+              class="px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
+              @click="goToServerList"
+            >
+              返回服务器列表
+            </button>
+          </div>
         </div>
         
         <!-- 微信支付状态 -->
@@ -197,55 +236,29 @@
           </div>
         </div>
         
-        <div v-if="error" class="mt-4 p-3 bg-red-50 text-red-700 rounded-md text-sm">
+        <div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-md text-sm">
           {{ error }}
         </div>
       </div>
-    </template>
-
-    <template #actions>
-      <div class="w-full">
-        <button v-if="!showPaymentProcessing && !paymentSuccess"
-          type="button"
-          class="w-full px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none"
-          @click="createInstance"
-          :disabled="isLoading"
-        >
-          {{ isLoading ? '处理中...' : '创建' }}
-        </button>
-        
-        <div class="flex justify-between w-full" v-else>          
-          <button
-            type="button"
-            class="px-4 py-2 bg-[#1fc76f] border border-transparent rounded-md text-sm font-medium text-white hover:bg-[#19b862] focus:outline-none ml-auto"
-            @click="close"
-            v-if="paymentSuccess"
-          >
-            关闭
-          </button>
-        </div>
-      </div>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 
 <script>
 import { toast } from 'vue-sonner';
-import { Dialog } from 'jingrow-ui';
 import { DashboardError } from '../utils/error';
 import AlipayLogo from '../logo/AlipayLogo.vue';
 import WeChatPayLogo from '../logo/WeChatPayLogo.vue';
+import router from '../router';
 
 export default {
   name: 'NewJsiteServer',
   components: { 
-    Dialog,
     AlipayLogo,
     WeChatPayLogo
   },
   data() {
     return {
-      show: true,
       selectedRegionId: '',
       selectedPlanId: '',
       selectedImageId: '',
@@ -424,10 +437,13 @@ export default {
             ...this.server
           };
           
-          this.$emit('success', { order: orderData, server: serverData });
-          
           this.isProcessingPayment = false;
           this.paymentSuccess = true;
+          
+          // 支付成功后跳转到服务器列表
+          setTimeout(() => {
+            this.$router.push('/jsite-servers');
+          }, 2000);
         },
         onError(error) {
           this.error = error.message || '余额支付处理失败';
@@ -505,9 +521,12 @@ export default {
               ...this.server
             };
             
-            this.$emit('success', { order: orderData, server: serverData });
-            
             this.paymentSuccess = true;
+            
+            // 支付成功后跳转到服务器列表
+            setTimeout(() => {
+              this.$router.push('/jsite-servers');
+            }, 2000);
           }
         }
       };
@@ -600,12 +619,10 @@ export default {
         });
       }
     },
-
-
-    close() {
-      this.show = false;
-      this.$emit('success');
+    goToServerList() {
+      this.$router.push('/jsite-servers');
     },
+
     getRegionId(region) {
       return region.region_id || region.RegionId || region.id;
     },