系统配置布局

src/pages/Setup/components/System/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react';
+import { Form, Input, Button, notification, Modal } from 'antd';
+import { useUserStore } from '@/stores';
+import { editAdminPassAPI } from '@/api/User';
+import { EditUser } from '@/types/user'
+
+const { confirm } = Modal;
+
+const SystemPage: React.FC = () => {
+    const store = useUserStore();
+
+    const [form] = Form.useForm<EditUser>();
+
+    const initialValues: EditUser = {
+        username: store.user?.username || '',
+        oldPassword: '',
+        newPassword: ''
+    };
+
+    const rules = {
+        username: [
+            { required: true, message: '管理员账号不能为空' },
+            { min: 6, max: 16, message: '账号限制在6 ~ 16个字符' }
+        ],
+        oldPassword: [
+            { required: true, message: '管理员旧密码不能为空' },
+            { min: 6, max: 16, message: '密码限制在6 ~ 16个字符' }
+        ],
+        newPassword: [
+            { required: true, message: '管理员新密码不能为空' },
+            { min: 6, max: 16, message: '密码限制在6 ~ 16个字符' }
+        ]
+    };
+
+    const handleSubmit = async (values: EditUser) => {
+        try {
+            await editAdminPassAPI(values);
+            confirm({
+                title: '提示',
+                content: '🔒️ 修改成功，请重新登录',
+                okText: '确定',
+                onOk: () => {
+                    store.quitLogin();
+                },
+                cancelButtonProps: { style: { display: 'none' } }
+            });
+        } catch (error) {
+            notification.error({
+                message: '错误',
+                description: '修改密码失败，请重试'
+            });
+        }
+    };
+
+    return (
+        <div className="setup">
+            <h2 className="title flex justify-center my-2 border-b-0">系统配置</h2>
+
+            <Form
+                form={form}
+                initialValues={initialValues}
+                size='large'
+                layout="vertical"
+                onFinish={handleSubmit}
+                className="w-5/12 mx-auto"
+            >
+                <Form.Item
+                    label="管理员账号"
+                    name="username"
+                    rules={rules.username}
+                >
+                    <Input placeholder="请输入账号" disabled />
+                </Form.Item>
+
+                <Form.Item
+                    label="管理员旧密码"
+                    name="oldPassword"
+                    rules={rules.oldPassword}
+                >
+                    <Input.Password placeholder="请输入旧密码" />
+                </Form.Item>
+
+                <Form.Item
+                    label="管理员新密码"
+                    name="newPassword"
+                    rules={rules.newPassword}
+                >
+                    <Input.Password placeholder="请输入新密码" />
+                </Form.Item>
+
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className="w-full">
+                        保存
+                    </Button>
+                </Form.Item>
+            </Form>
+        </div>
+    );
+};
+
+export default SystemPage;

src/pages/Setup/index.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { Card } from 'antd';
 import Title from '@/components/Title';
+import { BiGlobe, BiLayout, BiShieldQuarter, BiUser } from 'react-icons/bi';
+import System from './components/System'
 import "./index.scss"
 
 interface Setup {
@@ -13,38 +15,34 @@ interface Setup {
 const SetupPage = () => {
     const [active, setActive] = useState("system");
     
+    const iconSty = "w-5 h-8 mr-1"
     const list: Setup[] = [
         {
             title: "系统配置",
             description: "配置管理员账号、登录时间等",
-            icon: <div>123</div>,
+            icon: <BiShieldQuarter className={iconSty} />,
             key: "system"
         },
         {
             title: "网站配置",
             description: "配置网站标题、LOGO、描述、SEO等",
-            icon: <div>123</div>,
+            icon: <BiGlobe className={iconSty} />,
             key: "web"
         },
         {
             title: "布局配置",
             description: "配置网站布局及代码高亮等",
-            icon: <div>123</div>,
+            icon: <BiLayout className={iconSty} />,
             key: "layout"
         },
         {
             title: "个人设置",
             description: "配置个人信息等",
-            icon: <div>123</div>,
+            icon: <BiUser className={iconSty} />,
             key: "my"
         }
     ];
 
-    const handleNavigation = (key: string) => {
-        console.log(key);
-        setActive(key);
-    }
-
     return (
         <>
             <Title value="项目配置" />
@@ -56,11 +54,10 @@ const SetupPage = () => {
                             <li
                                 key={item.key}
                                 className={`item p-3 pl-5 mb-2 cursor-pointer transition-colors ${active === item.key ? 'active' : ''}`}
-                                onClick={() => handleNavigation(item.key)}
+                                onClick={() => setActive(item.key)}
                             >
                                 <h3 className="flex items-center text-base">
-                                    {/* <i className={`bx ${item.icon} mr-2`}></i> */}
-                                    {item.title}
+                                    {item.icon} {item.title}
                                 </h3>
 
                                 <p className="text-[13px] text-[#858585] text-gray-500 mt-1">{item.description}</p>
@@ -69,9 +66,10 @@ const SetupPage = () => {
                     </ul>
 
                     <div className="flex-grow">
-                        <Card>
-
-                        </Card>
+                        {active === "system" && <System />}
+                        {/* {active === "web" && <Web />}
+                        {active === "layout" && <Layout />}
+                        {active === "my" && <My />} */}
                     </div>
                 </div>
             </Card>

src/types/user.d.ts

@@ -19,7 +19,7 @@ export interface account {
     user: User
 }
 
-export interface editUser {
+export interface EditUser {
     username: string,
     oldPassword: string,
     newPassword: string