light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/server-list/ServerProjectList.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 {memo} from "react";
+import ProjectList from "../project-list/ProjectList";
+
+const ServerProjectList = memo(() => {
+    return (
+        <ProjectList/>
+    )
+})
+
+export default ServerProjectList;

package/light-chaser-app/src/pages/home/setting/Setting.module.less

@@ -0,0 +1,298 @@
+/*
+ * 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.
+ */
+
+// Setting.module.less
+.systemSetting {
+  padding: 24px;
+  background: #1E1E2F;
+  min-height: 100vh;
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+}
+
+.settingHeader {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.pageTitle {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 32px;
+  color: #FFFFFF;
+  margin: 0 0 16px 0;
+}
+
+.appInfo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.appName {
+  font-size: 18px;
+  font-weight: 600;
+  color: #4FB8FF;
+  line-height: 28px;
+}
+
+.version {
+  font-size: 14px;
+  color: #A0A0B2;
+  line-height: 20px;
+  background: #2C2C3E;
+  padding: 4px 12px;
+  border-radius: 16px;
+}
+
+.settingContent {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.brandCard {
+  background: #2C2C3E;
+  border: 1px solid #3A3A4E;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  :global {
+    .ant-card-head {
+      border-bottom: 1px solid #3A3A4E;
+      padding: 20px 24px;
+
+      .ant-card-head-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #FFFFFF;
+        line-height: 28px;
+      }
+    }
+
+    .ant-card-body {
+      padding: 24px;
+    }
+  }
+}
+
+.settingGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.settingItem {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 24px;
+  align-items: center;
+  padding: 24px;
+  background: #3A3A4E;
+  border-radius: 8px;
+  border: 1px solid #454558;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #4FB8FF;
+    box-shadow: 0 4px 12px rgba(79, 184, 255, 0.15);
+  }
+}
+
+.settingInfo {
+  min-width: 200px;
+}
+
+.settingTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 24px;
+  margin: 0 0 8px 0;
+}
+
+.settingDescription {
+  font-size: 14px;
+  color: #A0A0B2;
+  line-height: 20px;
+  margin: 0;
+}
+
+.uploadSection {
+  display: flex;
+  align-items: center;
+}
+
+.logoUpload {
+  :global {
+    .ant-upload-wrapper {
+      width: 200px;
+      height: 80px;
+
+      .ant-upload-select {
+        width: 200px;
+        height: 80px;
+        margin: 0;
+        border: none;
+        background: transparent;
+        border-radius: 4px;
+
+        &:hover {
+          .uploadOverlay {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+.logoIconUpload {
+  :global {
+    .ant-upload-wrapper {
+      width: 100px;
+      height: 100px;
+
+      .ant-upload-select {
+        width: 100px;
+        height: 100px;
+        margin: 0;
+        border: none;
+        background: transparent;
+        border-radius: 4px;
+
+        &:hover {
+          .uploadOverlay {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+.uploadContent {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  background: #2C2C3E;
+  border: 1px solid #3A3A4E;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+}
+
+.mainLogoImage {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.logoIconImage {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+.uploadOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 4px;
+}
+
+.uploadText {
+  color: #FFFFFF;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+}
+
+// 焦点状态
+:global {
+  .ant-upload-select:focus {
+    outline: 2px solid #4FB8FF;
+    outline-offset: 2px;
+
+    .uploadOverlay {
+      opacity: 1;
+    }
+  }
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .settingItem {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 16px;
+  }
+
+  .settingInfo {
+    min-width: auto;
+  }
+
+  .uploadSection {
+    justify-content: center;
+  }
+
+  .logoUpload {
+    :global {
+      .ant-upload-wrapper {
+        width: 160px;
+        height: 60px;
+
+        .ant-upload-select {
+          width: 160px;
+          height: 60px;
+        }
+      }
+    }
+  }
+
+  .logoIconUpload {
+    :global {
+      .ant-upload-wrapper {
+        width: 80px;
+        height: 80px;
+
+        .ant-upload-select {
+          width: 80px;
+          height: 80px;
+        }
+      }
+    }
+  }
+}

package/light-chaser-app/src/pages/home/setting/Setting.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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 {Card, Upload} from "antd";
+import {useState} from "react";
+import defaultMainLogo from '../../../images/logo.png';
+import defaultLogo from '../../../images/login-logo.png';
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+import styles from './Setting.module.less';
+import packageJson from '../../../../package.json';
+
+export default function Setting() {
+    const [mainLogo, setMainLogo] = useState<string>('/static/logo/main-logo.png');
+    const [logo, setLogo] = useState<string>('/static/logo/logo.png');
+
+    const beforeUpload = (file: File) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        AuthFetchUtil.post('/api/config/updateMainLogo', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
+            if (res !== null)
+                setMainLogo(`/static/logo/main-logo.png?${Date.now()}`);
+        });
+        return false;
+    }
+
+    const uploadLogoIcon = (file: File) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        AuthFetchUtil.post('/api/config/updateLogo', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
+            if (res !== null)
+                setLogo(`/static/logo/logo.png?${Date.now()}`);
+        });
+        return false;
+    }
+
+    return (
+        <div className={styles.systemSetting}>
+            <div className={styles.settingHeader}>
+                <h1 className={styles.pageTitle}>系统设置</h1>
+                <div className={styles.appInfo}>
+                    <span className={styles.appName}>LIGHT CHASER PRO</span>
+                    <span className={styles.version}>{packageJson.version}</span>
+                </div>
+            </div>
+
+            <div className={styles.settingContent}>
+                <Card className={styles.brandCard} title="品牌设置">
+                    <div className={styles.settingGrid}>
+                        <div className={styles.settingItem}>
+                            <div className={styles.settingInfo}>
+                                <h3 className={styles.settingTitle}>品牌主图</h3>
+                                <p className={styles.settingDescription}>用于系统主界面的品牌标识图片，建议尺寸 320×120px</p>
+                            </div>
+                            <div className={styles.uploadSection}>
+                                <Upload
+                                    name="main-logo"
+                                    listType="picture-card"
+                                    className={styles.logoUpload}
+                                    showUploadList={false}
+                                    accept={'image/*'}
+                                    beforeUpload={beforeUpload}
+                                >
+                                    <div className={styles.uploadContent}>
+                                        <div className={styles.imageContainer}>
+                                            <img
+                                                src={mainLogo}
+                                                onError={() => setMainLogo(defaultMainLogo)}
+                                                alt="品牌主图"
+                                                className={styles.mainLogoImage}
+                                            />
+                                        </div>
+                                        <div className={styles.uploadOverlay}>
+                                            <span className={styles.uploadText}>点击上传</span>
+                                        </div>
+                                    </div>
+                                </Upload>
+                            </div>
+                        </div>
+
+                        <div className={styles.settingItem}>
+                            <div className={styles.settingInfo}>
+                                <h3 className={styles.settingTitle}>品牌LOGO</h3>
+                                <p className={styles.settingDescription}>用于登录页和系统图标的小尺寸标识，建议尺寸 80×80px</p>
+                            </div>
+                            <div className={styles.uploadSection}>
+                                <Upload
+                                    name="logo"
+                                    listType="picture-card"
+                                    className={styles.logoIconUpload}
+                                    showUploadList={false}
+                                    accept={'image/*'}
+                                    beforeUpload={uploadLogoIcon}
+                                >
+                                    <div className={styles.uploadContent}>
+                                        <div className={styles.imageContainer}>
+                                            <img
+                                                src={logo}
+                                                onError={() => setLogo(defaultLogo)}
+                                                alt="品牌LOGO"
+                                                className={styles.logoIconImage}
+                                            />
+                                        </div>
+                                        <div className={styles.uploadOverlay}>
+                                            <span className={styles.uploadText}>点击上传</span>
+                                        </div>
+                                    </div>
+                                </Upload>
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    )
+}

package/light-chaser-app/src/pages/home/template-market/TemplateMarket.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 {memo} from "react";
+
+const TemplateMarket = memo(() => {
+    return (
+        <div style={{color: 'wheat'}}>
+            开发中...
+        </div>
+    );
+})
+
+export default TemplateMarket