light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/user-info/UserInfo.less

@@ -0,0 +1,279 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+.user-info-container {
+  padding: 24px;
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
+
+  .user-info-card {
+    background: #1E1E2F;
+    border: 1px solid #3A3A4E;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    width: 500px;
+
+    .ant-card-body {
+      padding: 0;
+    }
+  }
+
+  .user-info-header {
+    padding: 32px 32px 24px;
+    border-bottom: 1px solid #3A3A4E;
+    background: linear-gradient(135deg, #2C2C3E 0%, #1E1E2F 100%);
+
+    .header-nav {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-bottom: 20px;
+      color: #A0A0B2;
+
+      &:hover {
+        background: rgba(79, 184, 255, 0.1);
+        color: #4FB8FF;
+
+        .nav-icon {
+          transform: translateX(-2px);
+        }
+      }
+
+      .nav-icon {
+        transition: transform 0.2s ease;
+      }
+
+      .nav-text {
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .header-title {
+      font-size: 28px;
+      font-weight: 700;
+      color: #FFFFFF;
+      margin: 0 0 8px 0;
+      line-height: 1.2;
+    }
+
+    .header-subtitle {
+      font-size: 14px;
+      color: #A0A0B2;
+      line-height: 1.4;
+    }
+  }
+
+  .user-info-content {
+    padding: 32px;
+    height: 580px;
+    overflow-y: auto; // 允许垂直滚动
+
+    .info-section {
+      margin-bottom: 32px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #FFFFFF;
+        margin: 0 0 20px 0;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #3A3A4E;
+      }
+    }
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 24px;
+    }
+  }
+
+  .info-item {
+    background: #2C2C3E;
+    border: 1px solid #3A3A4E;
+    border-radius: 8px;
+    padding: 20px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #4FB8FF;
+      box-shadow: 0 2px 12px rgba(79, 184, 255, 0.1);
+    }
+
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .item-label {
+        font-size: 14px;
+        font-weight: 600;
+        color: #A0A0B2;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .edit-button {
+        background: rgba(79, 184, 255, 0.1);
+        border: 1px solid rgba(79, 184, 255, 0.3);
+        border-radius: 4px;
+        padding: 6px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: #4FB8FF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background: rgba(79, 184, 255, 0.2);
+          border-color: #4FB8FF;
+          transform: scale(1.05);
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+      }
+    }
+
+    .item-content {
+      .view-mode {
+        .item-value {
+          font-size: 16px;
+          font-weight: 500;
+          color: #FFFFFF;
+          line-height: 1.4;
+          word-break: break-word;
+        }
+      }
+
+      .edit-mode {
+        .edit-input {
+          background: #1E1E2F;
+          border: 1px solid #3A3A4E;
+          border-radius: 6px;
+          color: #FFFFFF;
+          padding: 12px 16px;
+          font-size: 14px;
+          transition: all 0.2s ease;
+          margin-bottom: 12px;
+
+          &:hover {
+            border-color: #4FB8FF;
+          }
+
+          &:focus {
+            border-color: #4FB8FF;
+            box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+          }
+
+          &::placeholder {
+            color: #A0A0B2;
+          }
+        }
+
+        .edit-actions {
+          display: flex;
+          gap: 12px;
+
+          .action-btn {
+            padding: 8px 16px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+
+            &.save-btn {
+              background: #4FB8FF;
+              color: #FFFFFF;
+
+              &:hover {
+                background: #3CA0E0;
+                transform: translateY(-1px);
+              }
+            }
+
+            &.cancel-btn {
+              background: transparent;
+              border: 1px solid #3A3A4E;
+              color: #A0A0B2;
+
+              &:hover {
+                border-color: #A0A0B2;
+                color: #FFFFFF;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .user-info-container {
+    padding: 16px;
+
+    .user-info-header {
+      padding: 24px 20px 20px;
+
+      .header-title {
+        font-size: 24px;
+      }
+    }
+
+    .user-info-content {
+      padding: 24px 20px;
+
+      .info-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+    }
+
+    .info-item {
+      padding: 16px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .user-info-container {
+    .user-info-header {
+      .header-nav {
+        margin-bottom: 16px;
+      }
+
+      .header-title {
+        font-size: 20px;
+      }
+    }
+
+    .user-info-content {
+      padding: 20px 16px;
+    }
+  }
+}

package/light-chaser-app/src/pages/home/user-info/UserInfo.tsx

@@ -0,0 +1,186 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import './UserInfo.less';
+import {Edit, Left} from "@icon-park/react";
+import {KeyboardEvent, useEffect, useState} from "react";
+import {Card, Input} from "antd";
+import {IUser} from "../user-management/UserManagementStore.ts";
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {useNavigate} from "react-router-dom";
+import AuthTools from "../../../../../light-chaser-util/lib/AuthTools.ts";
+import {HybridCryptoUtil} from "../../../util/HybridCryptoUtil.ts";
+
+export default function UserInfo() {
+
+    const [userInfo, setUserInfo] = useState<IUser | null>(null);
+
+    const navigate = useNavigate();
+
+    const updateUserInfo = (data: Partial<IUser>) => {
+        data = {...userInfo, ...data};
+        HybridCryptoUtil.encryptRequest(JSON.stringify(data)).then(encoded => {
+            AuthFetchUtil.post("/api/user/update", encoded).then(res => {
+                if (res !== null) {
+                    const newInfo = {...userInfo, ...res};
+                    setUserInfo(newInfo)
+                    globalMessage.messageApi?.success("修改成功");
+                }
+            })
+        })
+    }
+
+    useEffect(() => {
+        const userId = AuthTools.getUserId();
+        AuthFetchUtil.get<IUser>(`/api/user/getUser/${userId}`).then(res => {
+            if (res !== null)
+                setUserInfo(res);
+        })
+    }, []);
+
+    return (
+        <div className="user-info-container">
+            <Card className="user-info-card">
+                <div className="user-info-header">
+                    <div className="header-nav" onClick={() => navigate(-1)}>
+                        <Left className="nav-icon" size={20}/>
+                        <span className="nav-text">返回</span>
+                    </div>
+                    <h1 className="header-title">个人中心</h1>
+                    <div className="header-subtitle">管理您的账户信息</div>
+                </div>
+
+                <div className="user-info-content">
+                    <div className="info-section">
+                        <h2 className="section-title">基本信息</h2>
+                        <div className="info-grid">
+                            <EditUserInfo
+                                label="用户名"
+                                value={userInfo?.name || ''}
+                                placeholder="请输入用户名"
+                                onEdit={(value) => updateUserInfo({name: value})}
+                            />
+                            <EditUserInfo
+                                label="电话"
+                                value={userInfo?.phone || ''}
+                                placeholder="请输入电话号码"
+                                onEdit={(value) => updateUserInfo({phone: value})}
+                            />
+                            <EditUserInfo
+                                label="邮箱"
+                                value={userInfo?.email || ''}
+                                placeholder="请输入邮箱地址"
+                                onEdit={(value) => updateUserInfo({email: value})}
+                            />
+                        </div>
+                    </div>
+
+                    <div className="info-section">
+                        <h2 className="section-title">安全设置</h2>
+                        <div className="info-grid">
+                            <EditUserInfo
+                                label="密码"
+                                value="******"
+                                type="password"
+                                placeholder="请输入新密码"
+                                onEdit={(value) => updateUserInfo({password: value})}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    )
+}
+
+interface UserInfoProps {
+    label: string;
+    value: string;
+    onEdit: (value: string) => void;
+    type?: string;
+    placeholder?: string;
+}
+
+function EditUserInfo(props: UserInfoProps) {
+    const {label, value, type, placeholder, onEdit} = props;
+    const [edit, setEdit] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleSave();
+        }
+        if (e.key === 'Escape') {
+            setEdit(false);
+            setInputValue(value);
+        }
+    }
+
+    const handleSave = () => {
+        setEdit(false);
+        if (inputValue.trim() !== value) {
+            onEdit(inputValue.trim());
+        }
+    }
+
+    const handleCancel = () => {
+        setEdit(false);
+        setInputValue(value);
+    }
+
+    return (
+        <div className="info-item">
+            <div className="item-header">
+                <span className="item-label">{label}</span>
+                {!edit && (
+                    <button
+                        className="edit-button"
+                        onClick={() => setEdit(true)}
+                        aria-label={`编辑${label}`}
+                    >
+                        <Edit size={16}/>
+                    </button>
+                )}
+            </div>
+
+            <div className="item-content">
+                {edit ? (
+                    <div className="edit-mode">
+                        <Input
+                            value={inputValue}
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onKeyDown={onKeyDown}
+                            onBlur={handleSave}
+                            type={type}
+                            autoFocus
+                            placeholder={placeholder}
+                            className="edit-input"
+                            size="large"
+                        />
+                        <div className="edit-actions">
+                            <button className="action-btn save-btn" onMouseDown={handleSave}>
+                                保存
+                            </button>
+                            <button className="action-btn cancel-btn" onMouseDown={handleCancel}>
+                                取消
+                            </button>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="view-mode">
+                        <span className="item-value">{value}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

package/light-chaser-app/src/pages/home/user-management/UserManagement.module.less

@@ -0,0 +1,211 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+// UserManagement.module.less
+.pageContainer {
+  background: #1E1E2F;
+  color: #FFFFFF;
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+}
+
+.searchInput {
+  width: 350px;
+  background: #2C2C3E;
+  border: 1px solid #3A3A4E;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus {
+    border-color: #4FB8FF;
+    box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+  }
+
+  input {
+    color: #FFFFFF;
+    background: transparent;
+    font-size: 14px;
+    line-height: 20px;
+
+    &::placeholder {
+      color: #A0A0B2;
+    }
+  }
+}
+
+.searchIcon {
+  color: #A0A0B2;
+  font-size: 16px;
+}
+
+.createButton {
+  background: #4FB8FF;
+  border: none;
+  border-radius: 4px;
+  color: #FFFFFF;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 8px 16px;
+  height: auto;
+
+  &:hover {
+    background: #7DCBFF;
+    transform: translateY(-1px);
+    transition: all 0.2s ease;
+  }
+
+  &:active {
+    background: #3CA0E0;
+  }
+}
+
+.batchDeleteButton {
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 20px;
+  height: auto;
+
+  &:hover {
+    transform: translateY(-1px);
+    transition: all 0.2s ease;
+  }
+}
+
+.deleteIcon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.contentWrapper {
+  background: #2C2C3E;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  padding: 20px;
+  margin-top: 24px;
+}
+
+.userTable {
+  background: transparent;
+
+  :global {
+    .ant-table {
+      background: transparent;
+      color: #FFFFFF;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .ant-table-thead > tr > th {
+      background: #3A3A4E;
+      color: #FFFFFF;
+      font-weight: 600;
+      font-size: 14px;
+      border-bottom: 1px solid #3A3A4E;
+      padding: 16px;
+    }
+
+    .ant-table-tbody > tr > td {
+      background: transparent;
+      color: #FFFFFF;
+      border-bottom: 1px solid #3A3A4E;
+      padding: 16px;
+      transition: background-color 0.2s ease;
+    }
+
+    .ant-table-tbody > tr:hover > td {
+      background: #3A3A4E;
+    }
+
+    .ant-table-pagination {
+      margin: 24px 0 0 0;
+
+      .ant-pagination-item {
+        background: #2C2C3E;
+        border: 1px solid #3A3A4E;
+
+        a {
+          color: #A0A0B2;
+        }
+
+        &:hover,
+        &:focus {
+          border-color: #4FB8FF;
+        }
+
+        &.ant-pagination-item-active {
+          background: #4FB8FF;
+          border-color: #4FB8FF;
+
+          a {
+            color: #FFFFFF;
+          }
+        }
+      }
+
+      .ant-pagination-prev,
+      .ant-pagination-next {
+        .ant-pagination-item-link {
+          background: #2C2C3E;
+          border: 1px solid #3A3A4E;
+          color: #A0A0B2;
+
+          &:hover {
+            border-color: #4FB8FF;
+            color: #4FB8FF;
+          }
+        }
+      }
+    }
+  }
+}
+
+.tableCell {
+  color: #FFFFFF !important;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.actionButtons {
+  display: flex;
+  gap: 16px;
+}
+
+.editButton {
+  color: #4FB8FF !important;
+  padding: 0;
+  font-size: 14px;
+  height: auto;
+
+  &:hover {
+    color: #7DCBFF !important;
+    background: transparent !important;
+  }
+
+  &:active {
+    color: #3CA0E0 !important;
+  }
+}
+
+.deleteButton {
+  color: #FF6E6E !important;
+  padding: 0;
+  font-size: 14px;
+  height: auto;
+
+  &:hover {
+    color: #FF9B9B !important;
+    background: transparent !important;
+  }
+
+  &:active {
+    color: #E05C5C !important;
+  }
+}