light-chaser-pro 1.0.0

package/light-chaser-app/src/comps/common-component/theme-config/theme-editor/ThemeEditor.less

@@ -0,0 +1,189 @@
+/*
+ * 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-theme-editor {
+  width: 860px;
+  display: flex;
+  gap: 20px;
+  margin-bottom: 15px;
+
+  .editor-left {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .theme-info-card,
+    .color-definition-card {
+      background-color: #2C2C3E;
+      border: 1px solid #3A3A4E;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+      .ant-card-head {
+        //border-bottom: 1px solid #3A3A4E;
+        padding: 16px 20px;
+
+        .ant-card-head-title {
+          color: #FFFFFF;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 24px;
+        }
+      }
+
+      .ant-card-body {
+        padding: 20px;
+
+        .ant-form-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .color-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    .color-item {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .color-label {
+        color: #A0A0B2;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .ant-color-picker {
+        width: 100%;
+
+        .ant-color-picker-trigger {
+          width: 100%;
+          height: 36px;
+          background-color: #2C2C3E;
+          border: 1px solid #3A3A4E;
+          border-radius: 4px;
+          transition: all 0.2s ease;
+          padding: 8px 15px;
+          justify-content: space-between;
+
+          &:hover {
+            border-color: #4FB8FF;
+            background-color: #343448;
+          }
+        }
+      }
+    }
+
+    .theme-description {
+      color: #A0A0B2;
+      font-size: 12px;
+      line-height: 16px;
+      margin: 0;
+      padding: 12px;
+      background-color: rgba(160, 160, 178, 0.1);
+      border-radius: 4px;
+      border-left: 2px solid #4FB8FF;
+    }
+
+    .theme-operate-btn {
+      .ant-btn {
+        height: 38px;
+        border-radius: 4px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+
+    .ant-input {
+      background-color: #2C2C3E;
+      border: 1px solid #3A3A4E;
+      border-radius: 4px;
+      color: #FFFFFF;
+      height: 36px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        border-color: #4FB8FF;
+        background-color: #343448;
+      }
+
+      &:focus {
+        border-color: #4FB8FF;
+        box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+      }
+    }
+
+    .ant-form-item-label > label {
+      color: #A0A0B2;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
+  .editor-right {
+    width: 380px;
+
+    .theme-list-card {
+      background-color: #2C2C3E;
+      border: 1px solid #3A3A4E;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      height: 100%;
+      overflow: hidden;
+
+      .ant-card-head {
+        border-bottom: 1px solid #3A3A4E;
+        padding: 16px 20px;
+
+        .ant-card-head-title {
+          color: #FFFFFF;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 24px;
+        }
+      }
+
+      .ant-card-body {
+        padding: 15px;
+        height: 580px;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #2C2C3E;
+          border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #3A3A4E;
+          border-radius: 3px;
+
+          &:hover {
+            background: #4A4A5E;
+          }
+        }
+      }
+    }
+  }
+}

package/light-chaser-app/src/comps/common-component/theme-config/theme-editor/ThemeEditor.tsx

@@ -0,0 +1,199 @@
+/*
+ * 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 {MouseEvent, useState} from 'react';
+import './ThemeEditor.less';
+import ThemeList from "../theme-list/ThemeList";
+import {cloneDeep} from "lodash";
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {Button, Card, ColorPicker, Form, Input} from 'antd';
+
+const defaultThemeConfig: IThemeItem = {
+    id: '',
+    name: '',
+    colors: {
+        main: '#4FB8FF',        // 主色调 - 科技蓝
+        mainText: '#FFFFFF',    // 主要文字 - 纯白
+        background: '#1E1E2F',  // 背景色 - 深空蓝黑
+        subText: '#A0A0B2',     // 辅助文字 - 浅灰蓝
+        supplementFirst: '#3CED92', // 辅助色1 - 活力绿
+        supplementSecond: '#FF6E6E' // 辅助色2 - 警示红
+    }
+};
+
+const ThemeEditor = () => {
+    const {themeManager} = window.LC_ENV.currentManager;
+    const [themeList, setThemeList] = useState<IThemeItem[]>(cloneDeep(themeManager?.themeConfig) || []);
+    const [themeConfig, setThemeConfig] = useState<IThemeItem>(cloneDeep(defaultThemeConfig));
+    const [form] = Form.useForm();
+
+    const doSaveOrUpd = (e: MouseEvent<HTMLElement> | undefined) => {
+        e?.preventDefault();
+        if (themeConfig.name === '') {
+            globalMessage.messageApi?.warning('请输入主题名称');
+            return;
+        }
+        if (themeConfig.id === '') {
+            if (themeList.length > 20)
+                globalMessage.messageApi?.warning('主题数量不能超过20');
+            for (let i = 0; i < themeList.length; i++) {
+                if (themeList[i].name === themeConfig.name) {
+                    globalMessage.messageApi?.warning('主题名称不能重复');
+                    return;
+                }
+            }
+            themeConfig.id = themeList.length + 1 + '';
+            themeList.push({...themeConfig});
+        } else {
+            for (let i = 0; i < themeList.length; i++) {
+                if (themeList[i].id === themeConfig.id) {
+                    themeList[i] = {...themeConfig};
+                    break;
+                }
+            }
+            themeConfig.id = '';
+        }
+        setThemeList(themeList)
+        setThemeConfig(cloneDeep(defaultThemeConfig));
+        form.resetFields();
+        //保存到数据库
+        const {updateThemeConfig} = window.LC_ENV.currentManager.themeManager!;
+        updateThemeConfig(themeList);
+    }
+
+    const onDel = (id: string) => {
+        const newData = themeList.filter((item: IThemeItem) => item.id !== id);
+        setThemeList(newData);
+    }
+
+    const onSelected = (data: IThemeItem) => {
+        if (themeConfig.id === data.id) {
+            setThemeConfig(cloneDeep(defaultThemeConfig));
+            form.resetFields();
+        } else {
+            setThemeConfig(data);
+            form.setFieldsValue({
+                name: data.name,
+                ...data.colors
+            });
+        }
+    }
+
+    const handleColorChange = (color: any, colorKey: keyof typeof themeConfig.colors) => {
+        const hexColor = color.toHexString();
+        setThemeConfig(prev => ({
+            ...prev,
+            colors: {
+                ...prev.colors,
+                [colorKey]: hexColor
+            }
+        }));
+    }
+
+    const handleNameChange = (name: string) => {
+        setThemeConfig(prev => ({...prev, name}));
+    }
+
+    return (
+        <div className={'lc-theme-editor'}>
+            <div className={'editor-left'}>
+                <Card title="主题信息" className="theme-info-card">
+                    <Form form={form} layout="vertical">
+                        <Form.Item label="主题名称" name="name">
+                            <Input
+                                value={themeConfig.name}
+                                onChange={(e) => handleNameChange(e.target.value)}
+                                placeholder="请输入主题名称"
+                            />
+                        </Form.Item>
+                    </Form>
+                </Card>
+
+                <Card title="颜色定义" className="color-definition-card">
+                    <div className="color-grid">
+                        <div className="color-item">
+                            <span className="color-label">主体色</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.main}
+                                onChange={(color) => handleColorChange(color, 'main')}
+                                showText
+                            />
+                        </div>
+                        <div className="color-item">
+                            <span className="color-label">主文字</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.mainText}
+                                onChange={(color) => handleColorChange(color, 'mainText')}
+                                showText
+                            />
+                        </div>
+                        <div className="color-item">
+                            <span className="color-label">副文字</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.subText}
+                                onChange={(color) => handleColorChange(color, 'subText')}
+                                showText
+                            />
+                        </div>
+                        <div className="color-item">
+                            <span className="color-label">背景色</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.background}
+                                onChange={(color) => handleColorChange(color, 'background')}
+                                showText
+                            />
+                        </div>
+                        <div className="color-item">
+                            <span className="color-label">辅助色1</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.supplementFirst}
+                                onChange={(color) => handleColorChange(color, 'supplementFirst')}
+                                showText
+                            />
+                        </div>
+                        <div className="color-item">
+                            <span className="color-label">辅助色2</span>
+                            <ColorPicker
+                                size={'small'}
+                                value={themeConfig.colors.supplementSecond}
+                                onChange={(color) => handleColorChange(color, 'supplementSecond')}
+                                showText
+                            />
+                        </div>
+                    </div>
+                </Card>
+
+                <p className="theme-description">
+                    说明：自定义主题色的色值应该保持在同一色系。以确保整体统一的风格。主题色占据主要面积
+                </p>
+
+                <div className={'theme-operate-btn'}>
+                    <Button type="primary" onClick={doSaveOrUpd} block>
+                        添加 / 更新
+                    </Button>
+                </div>
+            </div>
+
+            <div className={'editor-right'}>
+                <Card title="主题列表" className="theme-list-card">
+                    <ThemeList showOperator={true} onSelected={onSelected} onDel={onDel}/>
+                </Card>
+            </div>
+        </div>
+    );
+}
+
+export default ThemeEditor;

package/light-chaser-app/src/comps/common-component/theme-config/theme-item/ColorPreviewItem.less

@@ -0,0 +1,16 @@
+.lc-color-preview-item {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 1px solid #3a3b3c;
+  display: inline-block;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  position: relative;
+  
+  &:hover {
+    border-color: #666;
+    cursor: default;
+  }
+}

package/light-chaser-app/src/comps/common-component/theme-config/theme-item/ColorPreviewItem.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './ColorPreviewItem.less';
+
+interface ColorPreviewItemProps {
+    color: string;
+}
+
+const ColorPreviewItem: React.FC<ColorPreviewItemProps> = ({ color }) => {
+    return (
+        <div className="lc-color-preview-item"
+            style={{ background: color }}
+            title={color} />
+    );
+};
+
+export default ColorPreviewItem;

package/light-chaser-app/src/comps/common-component/theme-config/theme-item/ThemeItem.less

@@ -0,0 +1,82 @@
+/*
+ * 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-theme-item {
+  padding: 16px;
+  background-color: #2C2C3E;
+  border-radius: 8px;
+  border: 1px solid #3A3A4E;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+  cursor: pointer;
+
+  .lc-theme-item-header {
+    padding: 0;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: #A0A0B2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .lc-theme-item-title {
+      font-weight: 500;
+      color: #FFFFFF;
+    }
+
+    .lc-theme-item-operators {
+      display: flex;
+
+      .operator-item {
+        margin-left: 8px;
+        padding: 4px;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background-color: rgba(255, 110, 110, 0.2);
+          color: #FF6E6E;
+        }
+      }
+    }
+  }
+
+  .lc-theme-item-body {
+    pointer-events: none;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+.lc-theme-item:hover {
+  background-color: #343448;
+  border-color: #4A4A5E;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.lc-theme-item-active {
+  border: 1px solid #4FB8FF;
+  background-color: #2C2C3E;
+  box-shadow: 0 2px 12px rgba(79, 184, 255, 0.3);
+}
+
+.lc-theme-item-active:hover {
+  border-color: #4FB8FF;
+  background-color: #343448;
+  box-shadow: 0 4px 16px rgba(79, 184, 255, 0.4);
+}

package/light-chaser-app/src/comps/common-component/theme-config/theme-item/ThemeItem.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 React, {Component} from 'react';
+import './ThemeItem.less';
+import {Close} from "@icon-park/react";
+import {IThemeItem, ThemeColors} from "light-chaser-types/types/ThemeTypes.ts";
+import ColorPreviewItem from "./ColorPreviewItem.tsx";
+
+
+interface ThemeItemProps extends ThemeColors {
+    //用于标识。 该主题是否被选中被选中的主题边框颜色与其他主题不同。
+    selected?: boolean;
+    name?: string;
+    colors: ThemeColors;
+    id?: string;
+    itemStyle?: React.CSSProperties;
+    showOperator?: boolean;
+    onDel?: (id: string) => void;
+    onSelected?: (data: IThemeItem) => void;
+}
+
+class ThemeItem extends Component<ThemeItemProps> {
+
+    onSelected = () => {
+        const {onSelected, id = '', name = '', colors} = this.props;
+        onSelected && onSelected({id, name, colors});
+    }
+
+    render() {
+        const {colors, selected = false, itemStyle, name, id, showOperator = false, onDel} = this.props;
+        return (
+            <div id={id} className={`lc-theme-item ${selected ? 'lc-theme-item-active' : ''}`} style={itemStyle}
+                 onClick={this.onSelected}>
+                <div className={'lc-theme-item-header'}>
+                    <div className={'lc-theme-item-title'}>{name}</div>
+                    {showOperator && <div className={'lc-theme-item-operators'}>
+                        <div className={'operator-item'} onClick={(event) => {
+                            event.stopPropagation();
+                            onDel && onDel(id || '')
+                        }}>
+                            <Close size={16}/>
+                        </div>
+                    </div>}
+                </div>
+                <div className={'lc-theme-item-body'}>
+                    {
+                        Object.keys(this.props.colors).map((key, index) => {
+                            return <ColorPreviewItem key={index} color={(colors[key as keyof ThemeColors]) || ''}/>
+                        })
+                    }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ThemeItem;

package/light-chaser-app/src/comps/common-component/theme-config/theme-list/ThemeList.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 {useState} from 'react';
+import ThemeItem from "../theme-item/ThemeItem";
+import {observer} from "mobx-react";
+import {IThemeItem, ThemeColors} from "light-chaser-types/types/ThemeTypes.ts";
+
+interface ThemeListProps {
+    data?: IThemeItem[];
+    onSelected?: (data: IThemeItem) => void;
+    showOperator?: boolean;
+    onDel?: (id: string) => void;
+}
+
+const ThemeList = observer((props: ThemeListProps) => {
+    const {onSelected, showOperator, onDel} = props;
+    const [activeId, setActiveId] = useState('');
+
+    const _onDel = (id: string) => {
+        const {themeConfig, updateThemeConfig} = window.LC_ENV.currentManager.themeManager!;
+        const newThemes = themeConfig!.filter((item: IThemeItem) => item.id !== id);
+        updateThemeConfig(newThemes);
+        onDel && onDel(id);
+    }
+
+
+    const _onSelected = (data: IThemeItem) => {
+        onSelected && onSelected(data);
+        if (data.id !== activeId)
+            setActiveId(data.id);
+        else
+            setActiveId('');
+    }
+
+    const {themeConfig} = window.LC_ENV.currentManager.themeManager!;
+    const themeList = [];
+    for (let i = 0; i < themeConfig!.length; i++) {
+        themeList.push(<ThemeItem key={i} id={themeConfig![i].id} selected={themeConfig![i].id === activeId}
+                                  name={themeConfig![i].name}
+                                  showOperator={showOperator}
+                                  onDel={_onDel}
+                                  onSelected={_onSelected}
+                                  colors={themeConfig![i].colors as ThemeColors}/>)
+    }
+    return (
+        <div className={'lc-theme-list'} style={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 20
+        }}>
+            {themeList}
+        </div>
+    );
+});
+
+export default ThemeList;