From 82d28e3f94d0d453818b29e50791a7bf70338a5c Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Tue, 29 Jul 2025 20:30:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=9C=8D=E5=8A=A1=E5=99=A8?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=A2=9E=E5=8A=A0=E5=B8=B8=E7=94=A8?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src2/components/JsiteServerOverview.vue   | 277 +++++++++++++++++-
 dashboard/src2/dialogs/PasswordDialog.vue     | 123 ++++++++
 dashboard/src2/pages/NewJsiteServer.vue       |   2 +-
 3 files changed, 394 insertions(+), 8 deletions(-)
 create mode 100644 dashboard/src2/dialogs/PasswordDialog.vue

diff --git a/dashboard/src2/components/JsiteServerOverview.vue b/dashboard/src2/components/JsiteServerOverview.vue
index 46ea373..c6bcfc9 100644
--- a/dashboard/src2/components/JsiteServerOverview.vue
+++ b/dashboard/src2/components/JsiteServerOverview.vue
@@ -18,7 +18,7 @@
 							</div>
 							
 							<div v-if="$jsiteServer.pg.end_date" class="mt-2 inline-flex items-center rounded-full bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800">
-								<i-lucide-clock class="mr-1.5 h-4 w-4 text-amber-500" />
+								<ClockIcon class="mr-1.5 h-4 w-4 text-amber-500" />
 								到期时间：{{ $format.date($jsiteServer.pg.end_date) }}
 							</div>
 						</div>
@@ -65,8 +65,51 @@
 			</div>
 		</div>
 		
-		<!-- 右侧区块：配置信息 -->
+		<!-- 右侧区块：配置信息和操作 -->
 		<div class="col-span-1 space-y-5">
+			<!-- 操作 -->
+			<div class="rounded-md border">
+				<div class="h-12 border-b px-5 py-4">
+					<h2 class="text-lg font-medium text-gray-900">操作</h2>
+				</div>
+				<div class="p-5">
+					<div class="flex flex-wrap gap-2">
+						<Button 
+							@click="restartServer"
+							:loading="restartLoading"
+							variant="outline"
+							class="bg-gray-100 text-gray-700 hover:bg-gray-200"
+						>
+							重启
+						</Button>
+						<Button 
+							@click="resetPassword"
+							:loading="resetPasswordLoading"
+							variant="outline"
+							class="bg-gray-100 text-gray-700 hover:bg-gray-200"
+						>
+							重置密码
+						</Button>
+						<Button 
+							@click="resetKeyPair"
+							:loading="resetKeyPairLoading"
+							variant="outline"
+							class="bg-gray-100 text-gray-700 hover:bg-gray-200"
+						>
+							重置密钥对
+						</Button>
+						<Button 
+							@click="resetSystem"
+							:loading="resetSystemLoading"
+							variant="outline"
+							class="bg-red-50 text-red-700 hover:bg-red-100 border-red-200"
+						>
+							重置系统
+						</Button>
+					</div>
+				</div>
+			</div>
+			
 			<!-- 服务器配置 -->
 			<div class="rounded-md border">
 				<div class="h-12 border-b px-5 py-4">
@@ -113,9 +156,21 @@
 							<span class="text-gray-600">SSH用户:</span>
 							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.ssh_user || 'root' }}</span>
 						</div>
-						<div class="flex justify-between">
+						<div class="flex justify-between items-center">
 							<span class="text-gray-600">服务器密码:</span>
-							<span class="font-mono text-gray-900">{{ $jsiteServer.pg.password || '未设置' }}</span>
+							<div class="flex items-center space-x-2">
+								<span class="font-mono text-gray-900" :class="{ 'text-transparent select-none': !showPassword }">
+									{{ showPassword ? (decryptedPassword || '未设置') : '••••••••' }}
+								</span>
+								<button
+									@click="togglePassword"
+									class="text-gray-500 hover:text-gray-700 transition-colors"
+									:title="showPassword ? '隐藏密码' : '显示密码'"
+								>
+									<EyeIcon v-if="!showPassword" class="h-4 w-4" />
+									<EyeOffIcon v-else class="h-4 w-4" />
+								</button>
+							</div>
 						</div>
 						<div class="flex justify-between">
 							<span class="text-gray-600">密钥对名称:</span>
@@ -133,17 +188,36 @@
 </template>
 
 <script>
-import { getCachedDocumentResource, Badge, Tooltip } from 'jingrow-ui';
+import { getCachedDocumentResource, Badge, Tooltip, Button, createResource } from 'jingrow-ui';
 import { h, defineAsyncComponent } from 'vue';
 import { toast } from 'vue-sonner';
-import InfoIcon from '~icons/lucide/info';
 import { getToastErrorMessage } from '../utils/toast';
+import { renderDialog, confirmDialog } from '../utils/components';
+import EyeIcon from '~icons/lucide/eye';
+import EyeOffIcon from '~icons/lucide/eye-off';
+import ClockIcon from '~icons/lucide/clock';
+import InfoIcon from '~icons/lucide/info';
 
 export default {
 	name: 'JsiteServerOverview',
 	props: ['server'],
 	components: {
 		Badge,
+		Button,
+		EyeIcon,
+		EyeOffIcon,
+		ClockIcon,
+		InfoIcon,
+	},
+	data() {
+		return {
+			showPassword: false,
+			decryptedPassword: null,
+			restartLoading: false,
+			resetPasswordLoading: false,
+			resetKeyPairLoading: false,
+			resetSystemLoading: false,
+		};
 	},
 	methods: {
 		getStatusText(status) {
@@ -204,8 +278,21 @@ export default {
 			return regionMap[region] || region;
 		},
 		renewServer() {
+			const renewRequest = createResource({
+				url: '/api/action/jcloud.api.aliyun_server_light.renew_aliyun_instance',
+				params: {
+					instance_id: this.$jsiteServer.pg.instance_id,
+					region_id: this.$jsiteServer.pg.region
+				},
+				onSuccess: () => {
+					toast.success('续费请求已提交');
+				},
+				onError: (error) => {
+					toast.error(getToastErrorMessage(error));
+				}
+			});
 			toast.promise(
-				this.$jsiteServer.renew?.submit() || Promise.resolve(),
+				renewRequest.submit(),
 				{
 					loading: '正在处理续费请求...',
 					success: '续费请求已提交',
@@ -213,6 +300,182 @@ export default {
 				},
 			);
 		},
+		async restartServer() {
+			if (!this.$jsiteServer.pg.instance_id) {
+				toast.error('服务器实例ID不存在');
+				return;
+			}
+			
+			confirmDialog({
+				title: '重启',
+				message: '确定要重启服务器吗？重启过程中服务器将暂时不可用。',
+				primaryAction: {
+					label: '确定',
+					onClick: ({ hide }) => {
+						// 立即显示成功提示并关闭弹窗
+						toast.success('重启请求已提交');
+						hide();
+						
+						// 异步提交请求
+						this.restartLoading = true;
+						const restartRequest = createResource({
+							url: '/api/action/jcloud.api.aliyun_server_light.reboot_aliyun_instance',
+							params: {
+								instance_id: this.$jsiteServer.pg.instance_id,
+								region_id: this.$jsiteServer.pg.region
+							},
+							onSuccess: () => {
+								this.restartLoading = false;
+							},
+							onError: (error) => {
+								toast.error(getToastErrorMessage(error));
+								this.restartLoading = false;
+							}
+						});
+						restartRequest.submit();
+					}
+				}
+			});
+		},
+		async resetPassword() {
+			if (!this.$jsiteServer.pg.instance_id) {
+				toast.error('服务器实例ID不存在');
+				return;
+			}
+			
+			// 弹出密码输入对话框
+			const PasswordDialog = defineAsyncComponent(() => import('../dialogs/PasswordDialog.vue'));
+			
+			renderDialog(h(PasswordDialog, {
+				title: '重置服务器密码',
+				description: '长度为 8 至 30 个字符，必须同时包含大小写英文字母、数字和特殊符号。',
+				onConfirm: (password) => {
+					// 立即显示成功提示
+					toast.success('密码重置请求已提交');
+					
+					// 异步提交请求
+					this.resetPasswordLoading = true;
+					const resetPasswordRequest = createResource({
+						url: '/api/action/jcloud.api.aliyun_server_light.reset_aliyun_instance_password',
+						params: {
+							instance_id: this.$jsiteServer.pg.instance_id,
+							password: password,
+							region_id: this.$jsiteServer.pg.region
+						},
+						onSuccess: () => {
+							this.resetPasswordLoading = false;
+						},
+						onError: (error) => {
+							toast.error(getToastErrorMessage(error));
+							this.resetPasswordLoading = false;
+						}
+					});
+					resetPasswordRequest.submit();
+				}
+			}));
+		},
+		async resetKeyPair() {
+			if (!this.$jsiteServer.pg.instance_id) {
+				toast.error('服务器实例ID不存在');
+				return;
+			}
+			
+			confirmDialog({
+				title: '重置密钥对',
+				message: '确定要重置密钥对吗？这将删除旧的密钥对并创建新的密钥对。重置后需要使用新的私钥才能连接服务器。',
+				primaryAction: {
+					label: '确定',
+					onClick: ({ hide }) => {
+						// 立即显示成功提示并关闭弹窗
+						toast.success('密钥对重置请求已提交');
+						hide();
+						
+						// 异步提交请求
+						this.resetKeyPairLoading = true;
+						const resetKeyPairRequest = createResource({
+							url: '/api/action/jcloud.api.aliyun_server_light.reset_server_key_pair',
+							params: {
+								instance_id: this.$jsiteServer.pg.instance_id
+							},
+							onSuccess: () => {
+								this.resetKeyPairLoading = false;
+							},
+							onError: (error) => {
+								toast.error(getToastErrorMessage(error));
+								this.resetKeyPairLoading = false;
+							}
+						});
+						resetKeyPairRequest.submit();
+					}
+				}
+			});
+		},
+		async resetSystem() {
+			if (!this.$jsiteServer.pg.instance_id) {
+				toast.error('服务器实例ID不存在');
+				return;
+			}
+			
+			confirmDialog({
+				title: '重置系统',
+				message: '确定要重置系统吗？这将清除所有数据并重新安装系统，操作不可逆！',
+				primaryAction: {
+					label: '确定',
+					onClick: ({ hide }) => {
+						// 立即显示成功提示并关闭弹窗
+						toast.success('系统重置请求已提交');
+						hide();
+						
+						// 异步提交请求
+						this.resetSystemLoading = true;
+						const resetSystemRequest = createResource({
+							url: '/api/action/jcloud.api.aliyun_server_light.reset_aliyun_instance_system',
+							params: {
+								instance_id: this.$jsiteServer.pg.instance_id,
+								region_id: this.$jsiteServer.pg.region
+							},
+							onSuccess: () => {
+								this.resetSystemLoading = false;
+							},
+							onError: (error) => {
+								toast.error(getToastErrorMessage(error));
+								this.resetSystemLoading = false;
+							}
+						});
+						resetSystemRequest.submit();
+					}
+				}
+			});
+		},
+		togglePassword() {
+			if (this.showPassword) {
+				// 隐藏密码
+				this.showPassword = false;
+				this.decryptedPassword = null;
+			} else {
+				// 显示密码
+				const getPasswordRequest = createResource({
+					url: '/api/action/jingrow.client.get_password',
+					params: {
+						pagetype: 'Jsite Server',
+						name: this.$jsiteServer.pg.name,
+						fieldname: 'password'
+					},
+					onSuccess: (response) => {
+						if (response.message) {
+							this.decryptedPassword = response.message;
+							this.showPassword = true;
+						} else {
+							toast.warning('当前没有保存的密码');
+						}
+					},
+					onError: () => {
+						toast.error('获取密码失败');
+					}
+				});
+				getPasswordRequest.submit();
+			}
+		},
 	},
 	computed: {
 		serverInformation() {
diff --git a/dashboard/src2/dialogs/PasswordDialog.vue b/dashboard/src2/dialogs/PasswordDialog.vue
new file mode 100644
index 0000000..2de3b00
--- /dev/null
+++ b/dashboard/src2/dialogs/PasswordDialog.vue
@@ -0,0 +1,123 @@
+<template>
+	<Dialog v-model="showDialog" :options="{ title }">
+		<template #body-content>
+			<div class="space-y-4">
+				<p class="text-p-base text-gray-800" v-if="description">{{ description }}</p>
+				<div class="space-y-4">
+					<FormControl
+						v-model="password"
+						:fieldtype="'Password'"
+						:label="'新密码'"
+						:fieldname="'password'"
+						:reqd="1"
+						:description="'长度为 8 至 30 个字符，必须同时包含大小写英文字母、数字和特殊符号'"
+					/>
+					<FormControl
+						v-model="confirmPassword"
+						:fieldtype="'Password'"
+						:label="'确认密码'"
+						:fieldname="'confirm_password'"
+						:reqd="1"
+					/>
+				</div>
+			</div>
+			<ErrorMessage class="mt-2" :message="error" />
+		</template>
+		<template #actions>
+			<div class="flex gap-2 w-full">
+				<Button 
+					variant="outline" 
+					class="flex-1"
+					@click="hide"
+				>
+					取消
+				</Button>
+				<Button 
+					variant="solid" 
+					class="flex-1"
+					:loading="isLoading"
+					@click="onConfirm"
+				>
+					确定
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script>
+import { ErrorMessage, FormControl } from 'jingrow-ui';
+
+export default {
+	name: 'PasswordDialog',
+	props: ['title', 'description', 'onConfirm'],
+	expose: ['show', 'hide'],
+	data() {
+		return {
+			showDialog: true,
+			error: null,
+			isLoading: false,
+			password: '',
+			confirmPassword: ''
+		};
+	},
+	components: { FormControl, ErrorMessage },
+	methods: {
+		validatePassword() {
+			if (!this.password) {
+				this.error = '请输入新密码';
+				return false;
+			}
+			
+			if (this.password.length < 8 || this.password.length > 30) {
+				this.error = '密码长度必须在 8 至 30 个字符之间';
+				return false;
+			}
+			
+			// 检查密码复杂度：必须同时包含大小写英文字母、数字和特殊符号
+			const hasUpperCase = /[A-Z]/.test(this.password);
+			const hasLowerCase = /[a-z]/.test(this.password);
+			const hasNumbers = /\d/.test(this.password);
+			const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(this.password);
+			
+			if (!hasUpperCase || !hasLowerCase || !hasNumbers || !hasSpecialChar) {
+				this.error = '密码必须同时包含大小写英文字母、数字和特殊符号';
+				return false;
+			}
+			
+			if (this.password !== this.confirmPassword) {
+				this.error = '两次输入的密码不一致';
+				return false;
+			}
+			
+			return true;
+		},
+		async onConfirm() {
+			this.error = null;
+			
+			if (!this.validatePassword()) {
+				return;
+			}
+			
+			this.isLoading = true;
+			try {
+				await this.onConfirm(this.password);
+				this.hide();
+			} catch (error) {
+				this.error = error.message || '操作失败';
+			} finally {
+				this.isLoading = false;
+			}
+		},
+		show() {
+			this.showDialog = true;
+			this.password = '';
+			this.confirmPassword = '';
+			this.error = null;
+		},
+		hide() {
+			this.showDialog = false;
+		}
+	}
+};
+</script> 
\ No newline at end of file
diff --git a/dashboard/src2/pages/NewJsiteServer.vue b/dashboard/src2/pages/NewJsiteServer.vue
index 03c29b1..9e0f5d6 100644
--- a/dashboard/src2/pages/NewJsiteServer.vue
+++ b/dashboard/src2/pages/NewJsiteServer.vue
@@ -162,7 +162,7 @@
             您的订单已支付成功，服务器记录已创建。服务器正在后台创建中，创建并启动需要 3-5 分钟，请耐心等待。
           </p>
           <p class="text-gray-500 text-sm">
-            您可以在服务器列表中查看服务器状态，创建完成后状态将更新为"Running"。
+            您可以在服务器列表中查看服务器状态，创建完成后状态将更新为"运行中"。
           </p>
           <div class="mt-6">
             <button