light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/font-management/FontManagementStore.ts

@@ -0,0 +1,153 @@
+/*
+ * 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 {action, makeObservable, observable} from "mobx";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+import {IPage} from "light-chaser-types/types/DesignerTypes.ts";
+
+export interface IFont {
+    id?: string;
+    key?: string;
+    name?: string;
+    url?: string;
+}
+
+export class FontManagementStore {
+    constructor() {
+        makeObservable(this, {
+            modalVisible: observable,
+            fontPage: observable,
+            setFontPage: action,
+            setFont: action,
+            changeCurrentPage: action,
+            setModalVisible: action,
+            destroy: action
+        })
+    }
+
+    modalVisible = false;
+    searchValue: string | null = null;
+    fontPage: IPage<IFont> = {
+        records: [],
+        total: 0,
+        size: 10,
+        current: 1
+    };
+    font: IFont = {
+        id: undefined,
+        name: undefined,
+        url: undefined,
+    }
+
+    setModalVisible = (visible: boolean) => {
+        this.modalVisible = visible
+        if (!visible) {
+            this.font = {
+                id: undefined,
+                name: undefined,
+                url: undefined,
+            }
+        }
+    }
+
+    setFontPage = (fontPageData: IPage<IFont>) => this.fontPage = fontPageData;
+
+    setFont = (font: IFont) => this.font = font;
+
+    changeCurrentPage = (page: number) => {
+        this.fontPage.current = page;
+        this.getFontPageList();
+    }
+
+    getFontPageList = () => {
+        AuthFetchUtil.post<IPage<IFont>>(`/api/font/pageList`, {
+            current: this.fontPage.current,
+            size: this.fontPage.size,
+            searchValue: this.searchValue
+        }).then(res => {
+            if (res !== null) {
+                (res.records as Array<IFont>).forEach((item) => item.key = item.id);
+                //异步加载字体
+                (res.records as Array<IFont>).forEach(item => {
+                    const font = new FontFace(item.name!, `url(${item.url})`);
+                    font.load().then(() => {
+                        document.fonts.add(font);
+                    })
+                })
+                this.setFontPage({
+                    records: res.records,
+                    total: res.total,
+                    size: res.size,
+                    current: res.current
+                });
+                this.searchValue = null;
+            }
+        })
+    }
+
+    doBatchDeleteFont = (ids: string[]) => {
+        if (ids.length === 0)
+            return;
+        AuthFetchUtil.post('/api/font/batchDel', ids).then((res) => {
+            if (res !== null) {
+                globalMessage.messageApi?.success('删除成功');
+                this.getFontPageList();
+            }
+        })
+    }
+
+    init = () => {
+        this.getFontPageList();
+    }
+
+    destroy = () => {
+        this.searchValue = null;
+        this.fontPage = {
+            records: [],
+            total: 0,
+            size: 10,
+            current: 1
+        };
+        this.font = {
+            id: undefined,
+            name: undefined,
+            url: undefined,
+        }
+    }
+
+    updateFont = () => {
+        const {id, name} = this.font;
+        AuthFetchUtil.post('/api/font/update', {id, name}).then(res => {
+            if (res !== null) {
+                this.font = {
+                    id: undefined,
+                    name: undefined,
+                    url: undefined,
+                }
+                this.getFontPageList();
+                globalMessage.messageApi?.success("操作成功");
+            }
+        })
+    }
+
+    uploadFont = async (file: File, id?: string) => {
+        const formData = new FormData();
+        formData.append('fontFile', file);
+        id && formData.append('id', id);
+        const res = await AuthFetchUtil.post('/api/font/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}});
+        return res !== null;
+    }
+}
+
+const fontManagementStore = new FontManagementStore();
+export default fontManagementStore;
+

package/light-chaser-app/src/pages/home/menus/HomeMenus.less

@@ -0,0 +1,175 @@
+/*
+ * 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.
+ */
+.lc-home-menus {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .menus-container {
+    height: calc(100vh - 170px);
+    overflow: auto;
+  }
+
+  // 菜单样式
+  .ant-menu {
+    background: transparent;
+    border: none;
+    font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
+
+    .ant-menu-item {
+      color: #a0a0b2;
+      font-size: 14px;
+      line-height: 20px;
+      height: 40px;
+      margin: 4px 12px;
+      border-radius: 4px;
+      padding: 0 16px !important;
+      transition: all 0.2s ease;
+
+      .ant-menu-title-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .anticon {
+        font-size: 16px;
+        margin-right: 12px;
+        color: #a0a0b2;
+        transition: color 0.2s ease;
+      }
+
+      &:hover {
+        color: #ffffff;
+        background: rgba(79, 184, 255, 0.1);
+
+        .anticon {
+          color: #4fb8ff;
+        }
+      }
+
+      &.ant-menu-item-selected {
+        color: #ffffff;
+        background: rgba(79, 184, 255, 0.2);
+        font-weight: 500;
+
+        .anticon {
+          color: #4fb8ff;
+        }
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 8px;
+          bottom: 8px;
+          width: 3px;
+          background: #4fb8ff;
+          border-radius: 0 2px 2px 0;
+        }
+      }
+
+      &:active {
+        background: rgba(79, 184, 255, 0.3);
+      }
+    }
+
+    .ant-menu-submenu {
+      .ant-menu-submenu-title {
+        color: #a0a0b2;
+        font-size: 14px;
+        line-height: 20px;
+        height: 40px;
+        margin: 4px 12px;
+        border-radius: 4px;
+        padding: 0 16px !important;
+        transition: all 0.2s ease;
+
+        .anticon {
+          font-size: 16px;
+          margin-right: 12px;
+          color: #a0a0b2;
+          transition: color 0.2s ease;
+        }
+
+        &:hover {
+          color: #ffffff;
+          background: rgba(79, 184, 255, 0.1);
+
+          .anticon {
+            color: #4fb8ff;
+          }
+        }
+
+        &.ant-menu-submenu-open {
+          color: #ffffff;
+          background: rgba(79, 184, 255, 0.15);
+
+          .anticon {
+            color: #4fb8ff;
+          }
+        }
+      }
+
+      .ant-menu-sub {
+        background: #2c2c3e;
+
+        .ant-menu-item {
+          padding-left: 52px !important;
+          margin: 2px 12px;
+        }
+      }
+    }
+  }
+
+  // 用户信息区域
+  .user-info {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    margin: 0 12px;
+    border-radius: 4px;
+    background: rgba(42, 42, 58, 0.5);
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(42, 42, 58, 0.8);
+    }
+
+    .ant-dropdown-trigger {
+      cursor: pointer;
+      margin-right: 12px;
+
+      .ant-avatar {
+        background: #4fb8ff;
+        color: #ffffff;
+        font-weight: 600;
+        font-size: 14px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: #3aa8ff;
+          transform: scale(1.05);
+        }
+      }
+    }
+
+    & > div:last-child {
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: 500;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

package/light-chaser-app/src/pages/home/menus/HomeMenus.tsx

@@ -0,0 +1,148 @@
+/*
+ * 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 {useLocation, useNavigate} from "react-router-dom";
+import {memo} from "react";
+import {AdProduct, Api, DatabaseSetting, DataOne, Dropbox, FileCodeOne, FontSize, Help, Logout, NetworkDrive, Send, Setting, User} from "@icon-park/react";
+import {Avatar, Dropdown, Menu, MenuProps} from "antd";
+import AuthTools, {RoleType} from "../../../../../light-chaser-util/lib/AuthTools.ts";
+import './HomeMenus.less';
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+export const HomeMenus = memo(() => {
+
+    const navigate = useNavigate();
+    const location = useLocation();
+    const username = AuthTools.getUserInfo()?.name || '';
+
+    const changeMenu = (menu: { key: string }) => {
+        navigate(`${menu.key}`);
+    }
+
+    const getMenus = () => {
+        const baseMenus: MenuItem[] = [
+            {
+                key: 'server',
+                icon: <NetworkDrive size={16}/>,
+                label: '项目列表'
+            },
+            {
+                key: 'datasource',
+                icon: <DataOne size={16}/>,
+                label: '数据源管理',
+                children: [
+                    {
+                        key: 'database',
+                        icon: <DatabaseSetting size={16}/>,
+                        label: '数据库管理'
+                    },
+                    {
+                        key: 'api',
+                        icon: <Api size={16}/>,
+                        label: 'API管理'
+                    }
+                ]
+            },
+            {
+                key: 'resourceManagement',
+                icon: <Dropbox size={16}/>,
+                label: '资源管理',
+                children: [
+                    {
+                        key: 'font',
+                        icon: <FontSize size={16}/>,
+                        label: '字体',
+                    },
+                    {
+                        key: 'dynamicScript',
+                        icon: <FileCodeOne size={16}/>,
+                        label: '动态脚本',
+                    }
+                ]
+            },
+            {
+                key: 'remoteComponent',
+                icon: <AdProduct size={16}/>,
+                label: '服务器组件'
+            },
+            {
+                key: 'releaseManagement',
+                icon: <Send size={16}/>,
+                label: '发布管理'
+            },
+            {
+                key: 'more',
+                icon: <Help size={16}/>,
+                label: '帮助'
+            }
+        ]
+
+        const userInfo = AuthTools.getUserInfo();
+        if (userInfo?.roles.includes(RoleType.SYSTEM_ADMIN)) {
+            baseMenus.splice(baseMenus.length - 1, 0, {
+                key: 'user',
+                icon: <User size={16}/>,
+                label: '用户管理'
+            })
+            baseMenus.splice(baseMenus.length - 1, 0, {
+                key: 'setting',
+                icon: <Setting size={16}/>,
+                label: '设置'
+            })
+        }
+        return baseMenus;
+    }
+
+    const items: MenuProps['items'] = [
+        {
+            key: 'user-info',
+            label: <span onClick={() => navigate('userInfo')}><User
+                style={{position: 'relative', top: 2}}/>&nbsp;{"用户信息"}</span>,
+        },
+        {
+            key: 'logout',
+            label: <span onClick={() => {
+                AuthFetchUtil.post('/api/authenticate/logout',
+                    {token: AuthTools.getToken()},
+                    {
+                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+                    }).then(() => {
+                    AuthTools.removeUser();
+                    navigate('/login');
+                })
+            }}><Logout style={{position: 'relative', top: 2}}/>&nbsp;{"退出登录"}</span>,
+        },
+    ];
+
+    const {pathname} = location;
+    const currentMenu = pathname.substring(pathname.lastIndexOf('/') + 1, pathname.length);
+    return (
+        <div className={'lc-home-menus'}>
+            <div className="menus-container">
+                <Menu onClick={changeMenu}
+                      style={{width: 220}}
+                      defaultSelectedKeys={[currentMenu]}
+                      selectedKeys={[currentMenu]}
+                      mode="inline"
+                      items={getMenus()}
+                />
+            </div>
+            <div className={'user-info'}>
+                <Dropdown menu={{items}}>
+                    <Avatar style={{background: "#4FB8FF"}}>{username?.substring(username?.length - 1, username?.length)?.toUpperCase()}</Avatar>
+                </Dropdown>
+                <div>{username?.toUpperCase()}</div>
+            </div>
+        </div>
+    );
+})

package/light-chaser-app/src/pages/home/more-info/MoreInfo.module.less

@@ -0,0 +1,154 @@
+// MoreInfo.module.less
+.moreInfoContainer {
+  padding: 24px;
+  background: #1E1E2F;
+  min-height: 100vh;
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 32px;
+  margin: 0 0 12px 0;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #A0A0B2;
+  line-height: 20px;
+  margin: 0;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.infoCard {
+  background: #2C2C3E;
+  border: 1px solid #3A3A4E;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #4FB8FF;
+    box-shadow: 0 4px 16px rgba(79, 184, 255, 0.2);
+    transform: translateY(-2px);
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 24px;
+      height: 100%;
+    }
+  }
+}
+
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.iconWrapper {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #4FB8FF 0%, #3A3A4E 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.icon {
+  font-size: 28px;
+  color: #FFFFFF;
+}
+
+.cardTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: #FFFFFF;
+  line-height: 28px;
+  margin: 0 0 12px 0;
+}
+
+.cardDescription {
+  font-size: 14px;
+  color: #A0A0B2;
+  line-height: 20px;
+  margin: 0 0 24px 0;
+  flex-grow: 1;
+}
+
+.actionButton {
+  background: #4FB8FF;
+  border: none;
+  border-radius: 4px;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 24px;
+  height: auto;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #7DCBFF;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    background: #3CA0E0;
+  }
+
+  // 移除Antd默认样式
+  &.ant-btn {
+    border: none;
+
+    &:hover,
+    &:focus {
+      color: #FFFFFF;
+      background: #7DCBFF;
+      border: none;
+    }
+  }
+}
+
+// 为不同的卡片添加不同的渐变背景
+.infoCard:nth-child(1) .iconWrapper {
+  background: linear-gradient(135deg, #4FB8FF 0%, #2C2C3E 100%);
+}
+
+.infoCard:nth-child(2) .iconWrapper {
+  background: linear-gradient(135deg, #3CED92 0%, #2C2C3E 100%);
+}
+
+.infoCard:nth-child(3) .iconWrapper {
+  background: linear-gradient(135deg, #FF6E6E 0%, #2C2C3E 100%);
+}
+
+// 焦点状态
+.infoCard:focus {
+  outline: 2px solid #4FB8FF;
+  outline-offset: 2px;
+}
+
+.actionButton:focus {
+  outline: 2px solid #4FB8FF;
+  outline-offset: 2px;
+}

package/light-chaser-app/src/pages/home/more-info/MoreInfo.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 {Button, Card} from "antd";
+import {FileText, VideocameraOne, WebPage} from "@icon-park/react";
+import styles from './MoreInfo.module.less';
+
+export default function MoreInfo() {
+    const listConfig = [
+        {
+            content: '视频教程',
+            icon: <VideocameraOne className={styles.icon}/>,
+            onClick: () => window.open('https://www.bilibili.com/video/BV1z1421m7v2/?share_source=copy_web&vd_source=ece0559aa5b8c4f5c0d7307cb2b06aac'),
+            description: '观看详细的操作演示视频'
+        },
+        {
+            content: '使用文档',
+            icon: <FileText className={styles.icon}/>,
+            onClick: () => window.open('https://xiaopujun.github.io/light-chaser-pro-doc/#/'),
+            description: '查阅完整的使用说明和API文档'
+        },
+        {
+            content: '官方网站',
+            icon: <WebPage className={styles.icon}/>,
+            onClick: () => window.open('https://www.lcpdesigner.cn'),
+            description: '访问我们的官方网站了解更多信息'
+        }
+    ]
+
+    return (
+        <div className={styles.moreInfoContainer}>
+            <div className={styles.header}>
+                <h1 className={styles.title}>帮助与资源</h1>
+                <p className={styles.subtitle}>获取更多关于 Light Chaser Pro 的信息和支持</p>
+            </div>
+
+            <div className={styles.cardGrid}>
+                {listConfig.map((item, index) => (
+                    <Card
+                        key={index}
+                        className={styles.infoCard}
+                        hoverable
+                    >
+                        <div className={styles.cardContent}>
+                            <div className={styles.iconWrapper}>
+                                {item.icon}
+                            </div>
+                            <h3 className={styles.cardTitle}>{item.content}</h3>
+                            <p className={styles.cardDescription}>{item.description}</p>
+                            <Button
+                                type="primary"
+                                className={styles.actionButton}
+                                onClick={item.onClick}
+                            >
+                                立即访问
+                            </Button>
+                        </div>
+                    </Card>
+                ))}
+            </div>
+        </div>
+    );
+}