NewJsiteServer.vue由弹窗改为普通页面展示

dashboard/src2/pages/NewJsiteServer.vue

@@ -1,14 +1,30 @@
 <template>
-  <Dialog :options="{ title: '新建服务器', size: 'lg' }" v-model="show">
+  <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">
       <!-- 第一步：选择服务器配置和支付方式 -->
-    <template v-if="!showPaymentProcessing" #body-content>
+      <div v-if="!showPaymentProcessing" class="space-y-12 pb-[50vh] pt-12">
-      <div class="p-4 sm:p-6">
         <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">
+
+        <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>
@@ -24,7 +40,8 @@
               已加载 {{ regions.length }} 个区域
             </div>
           </div>
-        <div class="mb-4">
+
+          <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>
@@ -33,7 +50,8 @@
               </option>
             </select>
           </div>
-        <div class="mb-4">
+
+          <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>
@@ -42,7 +60,8 @@
               </option>
             </select>
           </div>
-        <div class="mb-4">
+
+          <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>
@@ -50,7 +69,7 @@
           </div>
 
           <!-- 价格信息显示 -->
-        <div v-if="selectedPlanId && selectedImageId" class="mb-6 border-t border-gray-200 pt-4">
+          <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">
@@ -69,7 +88,7 @@
           </div>
 
           <!-- 支付方式选择 -->
-        <div class="mb-6 border-t border-gray-200 pt-4">
+          <div class="border-t border-gray-200 pt-4">
             <label class="block text-sm font-medium text-gray-700 mb-3">
               选择支付方式
             </label>
@@ -108,15 +127,26 @@
             </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 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>
-    </template>
 
       <!-- 第二步：处理支付 -->
-    <template v-else #body-content>
+      <div v-else class="space-y-12 pb-[50vh] pt-12">
-      <div class="p-4 sm:p-6">
         <!-- 加载中状态 -->
         <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>
 </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 {
         });
       }
     },
-
+    goToServerList() {
-
+      this.$router.push('/jsite-servers');
-    close() {
-      this.show = false;
-      this.$emit('success');
     },
+
     getRegionId(region) {
       return region.region_id || region.RegionId || region.id;
     },