tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-12 12:16:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 美化用户隧道权限分配表单UI并统一代码格式

Browse Source 
- 使用HeroUI Checkbox组件替换原生checkbox

- 重构隧道列表为card-based tile风格

- 添加选中/未选中/已分配状态视觉区分

- 应用eslint --fix代码格式统一

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
root
2026-02-04 02:22:28 +00:00
parent 72c2e28667
commit 6f6fececa8
31 changed files with 8080 additions and 5740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/change-password.tsx
+78 -59
View File
@@ -3,7 +3,7 @@ import { Input } from "@heroui/input";
import { Card, CardBody, CardHeader } from "@heroui/card";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import toast from 'react-hot-toast';
import toast from "react-hot-toast";
import { title } from "@/components/primitives";
import { updatePassword } from "@/api";
@@ -19,10 +19,10 @@ interface PasswordForm {
export default function ChangePasswordPage() {
const [form, setForm] = useState<PasswordForm>({
newUsername: '',
currentPassword: '',
newPassword: '',
confirmPassword: ''
newUsername: "",
currentPassword: "",
newPassword: "",
confirmPassword: "",
});
const [loading, setLoading] = useState(false);
const [errors, setErrors] = useState<Partial<PasswordForm>>({});
@@ -32,39 +32,40 @@ export default function ChangePasswordPage() {
const newErrors: Partial<PasswordForm> = {};
if (!form.newUsername.trim()) {
newErrors.newUsername = '请输入新用户名';
newErrors.newUsername = "请输入新用户名";
} else if (form.newUsername.length < 3) {
newErrors.newUsername = '用户名长度至少3位';
newErrors.newUsername = "用户名长度至少3位";
} else if (form.newUsername.length > 20) {
newErrors.newUsername = '用户名长度不能超过20位';
newErrors.newUsername = "用户名长度不能超过20位";
}
if (!form.currentPassword.trim()) {
newErrors.currentPassword = '请输入当前密码';
newErrors.currentPassword = "请输入当前密码";
}
if (!form.newPassword.trim()) {
newErrors.newPassword = '请输入新密码';
newErrors.newPassword = "请输入新密码";
} else if (form.newPassword.length < 6) {
newErrors.newPassword = '新密码长度不能少于6位';
newErrors.newPassword = "新密码长度不能少于6位";
} else if (form.newPassword.length > 20) {
newErrors.newPassword = '新密码长度不能超过20位';
newErrors.newPassword = "新密码长度不能超过20位";
}
if (!form.confirmPassword.trim()) {
newErrors.confirmPassword = '请再次输入新密码';
newErrors.confirmPassword = "请再次输入新密码";
} else if (form.confirmPassword !== form.newPassword) {
newErrors.confirmPassword = '两次输入密码不一致';
newErrors.confirmPassword = "两次输入密码不一致";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleInputChange = (field: keyof PasswordForm, value: string) => {
setForm(prev => ({ ...prev, [field]: value }));
setForm((prev) => ({ ...prev, [field]: value }));
if (errors[field]) {
setErrors(prev => ({ ...prev, [field]: undefined }));
setErrors((prev) => ({ ...prev, [field]: undefined }));
}
};
@@ -74,23 +75,23 @@ export default function ChangePasswordPage() {
setLoading(true);
try {
const response = await updatePassword(form);
if (response.code === 0) {
toast.success(response.msg || '账号密码修改成功');
toast.success(response.msg || "账号密码修改成功");
// 使用 toast 确认对话框的替代方案
setTimeout(() => {
toast.success('即将跳转到登陆页面，请重新登录');
toast.success("即将跳转到登陆页面，请重新登录");
setTimeout(() => {
logout();
}, 1000);
}, 1000);
} else {
toast.error(response.msg || '账号密码修改失败');
toast.error(response.msg || "账号密码修改失败");
}
} catch (error) {
console.error('修改账号密码错误:', error);
toast.error('修改账号密码时发生错误');
console.error("修改账号密码错误:", error);
toast.error("修改账号密码时发生错误");
} finally {
setLoading(false);
}
@@ -98,11 +99,11 @@ export default function ChangePasswordPage() {
const logout = () => {
safeLogout();
navigate('/');
navigate("/");
};
const handleKeyPress = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !loading) {
if (e.key === "Enter" && !loading) {
handleSubmit();
}
};
@@ -114,79 +115,97 @@ export default function ChangePasswordPage() {
<Card className="w-full">
<CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
<div className="w-12 h-12 bg-warning-100 rounded-full flex items-center justify-center mb-3">
<svg className="w-6 h-6 text-warning-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
<svg
className="w-6 h-6 text-warning-600"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
clipRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
fillRule="evenodd"
/>
</svg>
</div>
<h1 className={title({ size: "sm" })}>安全提醒</h1>
<p className="text-small text-default-500 mt-2 text-center">检测到您使用的是默认账号密码，为了您的账户安全，请立即修改</p>
<p className="text-small text-default-500 mt-2 text-center">
检测到您使用的是默认账号密码，为了您的账户安全，请立即修改
</p>
</CardHeader>
<CardBody className="px-6 py-6">
<div className="flex flex-col gap-4">
<Input
errorMessage={errors.newUsername}
isDisabled={loading}
isInvalid={!!errors.newUsername}
label="新用户名"
placeholder="请输入新用户名（至少3位）"
value={form.newUsername}
onChange={(e) => handleInputChange('newUsername', e.target.value)}
onKeyDown={handleKeyPress}
variant="bordered"
isDisabled={loading}
isInvalid={!!errors.newUsername}
errorMessage={errors.newUsername}
onChange={(e) =>
handleInputChange("newUsername", e.target.value)
}
onKeyDown={handleKeyPress}
/>
<Input
errorMessage={errors.currentPassword}
isDisabled={loading}
isInvalid={!!errors.currentPassword}
label="当前密码"
placeholder="请输入当前密码"
type="password"
value={form.currentPassword}
onChange={(e) => handleInputChange('currentPassword', e.target.value)}
onKeyDown={handleKeyPress}
variant="bordered"
isDisabled={loading}
isInvalid={!!errors.currentPassword}
errorMessage={errors.currentPassword}
onChange={(e) =>
handleInputChange("currentPassword", e.target.value)
}
onKeyDown={handleKeyPress}
/>
<Input
errorMessage={errors.newPassword}
isDisabled={loading}
isInvalid={!!errors.newPassword}
label="新密码"
placeholder="请输入新密码（至少6位）"
type="password"
value={form.newPassword}
onChange={(e) => handleInputChange('newPassword', e.target.value)}
onKeyDown={handleKeyPress}
variant="bordered"
isDisabled={loading}
isInvalid={!!errors.newPassword}
errorMessage={errors.newPassword}
onChange={(e) =>
handleInputChange("newPassword", e.target.value)
}
onKeyDown={handleKeyPress}
/>
<Input
errorMessage={errors.confirmPassword}
isDisabled={loading}
isInvalid={!!errors.confirmPassword}
label="确认新密码"
placeholder="请再次输入新密码"
type="password"
value={form.confirmPassword}
onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
onKeyDown={handleKeyPress}
variant="bordered"
isDisabled={loading}
isInvalid={!!errors.confirmPassword}
errorMessage={errors.confirmPassword}
onChange={(e) =>
handleInputChange("confirmPassword", e.target.value)
}
onKeyDown={handleKeyPress}
/>
<Button
className="mt-2"
color="warning"
disabled={loading}
isLoading={loading}
size="lg"
onClick={handleSubmit}
isLoading={loading}
disabled={loading}
className="mt-2"
>
{loading ? "修改中..." : "立即修改账号密码"}
</Button>
<div className="bg-warning-50 border border-warning-200 text-warning-700 px-3 py-2 rounded-lg text-sm text-center">
⚠️ 注意：修改账号密码后需要重新登录
</div>
@@ -197,4 +216,4 @@ export default function ChangePasswordPage() {
</section>
</DefaultLayout>
);
}
}