light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/right/DesignerRight.less

@@ -0,0 +1,325 @@
+/*
+ * 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-config-menu {
+  height: 100%;
+  width: 48px;
+  font-family: 'Inter', 'Helvetica Neue', 'Roboto', sans-serif;
+
+  .menu-list {
+    width: 48px;
+    height: 100%;
+    background-color: #2C2C3E;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #A0A0B2;
+    border-left: 1px solid #3A3A4E;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+    .menu-item {
+      flex-direction: row;
+      width: 100%;
+      display: flex;
+      cursor: pointer;
+      padding: 12px 4px;
+      font-size: 12px;
+      line-height: 16px;
+      align-items: center;
+      writing-mode: vertical-lr;
+      border-radius: 4px;
+      margin: 4px 0;
+      transition: all 0.2s ease;
+
+      .item-icon {
+        font-size: 18px;
+        margin-bottom: 6px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: #4FB8FF;
+        }
+      }
+
+      &:hover {
+        color: #4FB8FF;
+        background-color: rgba(79, 184, 255, 0.1);
+        transition: all 0.2s ease;
+      }
+
+      .item-content {
+        letter-spacing: 1px;
+      }
+    }
+
+    .menu-item-active {
+      color: #4FB8FF;
+      background-color: rgba(79, 184, 255, 0.15);
+
+      .item-icon {
+        color: #4FB8FF;
+      }
+    }
+  }
+}
+
+.lc-config-panel {
+  display: flex;
+  top: 56px;
+  right: 48px;
+  position: absolute;
+  pointer-events: none;
+  font-family: 'Inter', 'Helvetica Neue', 'Roboto', sans-serif;
+
+  .lc-component-status-list {
+    width: 120px;
+    background-color: #2C2C3E;
+    pointer-events: auto;
+    align-self: flex-start;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    animation: configPanelFadeInRight 0.7s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border: 1px solid #3A3A4E;
+    border-top: none;
+
+    .status-list-header {
+      height: 32px;
+      background-color: #2C2C3E;
+      padding: 8px 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #FFFFFF;
+      font-size: 14px;
+      font-weight: 500;
+      border-bottom: 1px solid #3A3A4E;
+
+      .list-operate {
+        cursor: pointer;
+        color: #A0A0B2;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #4FB8FF;
+        }
+      }
+    }
+
+    .status-list-content {
+      padding: 8px;
+
+      .status-item {
+        padding: 8px;
+        background-color: #3A3A4E;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        font-size: 12px;
+        text-align: center;
+        color: #A0A0B2;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+
+        .status-name-input {
+          width: 100%;
+          outline: none;
+          background-color: transparent;
+          border: none;
+          text-align: center;
+          color: #FFFFFF;
+          font-size: 12px;
+          padding: 4px;
+          border-radius: 4px;
+          border: 1px solid #3A3A4E;
+
+          &:focus {
+            border-color: #4FB8FF;
+          }
+        }
+
+        &:hover {
+          color: #FFFFFF;
+          background-color: #454558;
+          border-color: #4FB8FF;
+        }
+
+        &-active {
+          background-color: rgba(79, 184, 255, 0.15);
+          border: 1px solid #4FB8FF;
+          color: #4FB8FF;
+
+          &:hover {
+            background-color: rgba(79, 184, 255, 0.2);
+          }
+        }
+      }
+
+      button {
+        font-size: 12px;
+        color: #A0A0B2;
+        background-color: transparent;
+        border: 1px solid #3A3A4E;
+        border-radius: 4px;
+        padding: 6px 12px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: #4FB8FF;
+          border-color: #4FB8FF;
+          background-color: rgba(79, 184, 255, 0.1);
+        }
+      }
+    }
+  }
+
+  .resize-handle {
+    width: 4px;
+    height: calc(100vh - 95px);
+    cursor: col-resize;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    pointer-events: auto;
+
+    &:hover, &.resize-handle-active {
+      background-color: #4FB8FF;
+    }
+  }
+
+  .lc-config-detail {
+    min-width: 350px;
+    height: calc(100vh - 95px);
+    background-color: #2C2C3E;
+    border-left: 1px solid #3A3A4E;
+    pointer-events: auto;
+    animation: configPanelFadeInRight 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    overflow-x: hidden;
+
+    .lc-detail-top {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      color: #FFFFFF;
+      padding: 0 16px;
+      align-items: center;
+      background-color: #2C2C3E;
+      justify-content: space-between;
+      border-bottom: 1px solid #3A3A4E;
+
+      .detail-title {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+      }
+
+      .detail-operate {
+        display: flex;
+        gap: 8px;
+
+        .operate-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          border-radius: 4px;
+          cursor: pointer;
+          color: #A0A0B2;
+          transition: all 0.2s ease;
+
+          &:hover {
+            color: #4FB8FF;
+            background-color: rgba(79, 184, 255, 0.1);
+          }
+        }
+      }
+    }
+
+    .lc-detail-content {
+      height: calc(100% - 41px);
+      overflow-y: auto;
+      padding: 16px;
+
+      .component-info {
+        font-size: 12px;
+        line-height: 16px;
+        color: #A0A0B2;
+        margin-bottom: 16px;
+        border-radius: 8px;
+        padding: 12px;
+        background-color: #3A3A4E;
+        border: 1px solid #3A3A4E;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+        .comp-flag-info {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: #FFFFFF;
+          font-size: 14px;
+          line-height: 20px;
+          margin-bottom: 8px;
+
+          .component-id {
+            cursor: pointer;
+            color: #A0A0B2;
+            transition: color 0.2s ease;
+
+            &:hover {
+              color: #4FB8FF;
+            }
+          }
+
+          .operate-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            color: #A0A0B2;
+            transition: all 0.2s ease;
+
+            &:hover {
+              color: #4FB8FF;
+              background-color: rgba(79, 184, 255, 0.1);
+            }
+          }
+        }
+
+        .comp-type-info {
+          padding: 4px 0;
+          color: #A0A0B2;
+        }
+      }
+    }
+  }
+}
+
+@keyframes configPanelFadeInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(48px);
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(48px);
+  }
+  55% {
+    opacity: 1;
+    transform: translateX(48px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/light-chaser-app/src/designer/right/DesignerRight.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 MenuList from "./MenuList";
+import ConfigContent from "./ConfigContent";
+import rightStore from "./RightStore";
+import {observer} from "mobx-react";
+import './DesignerRight.less';
+
+const DesignerRight = observer(() => {
+    const {visible} = rightStore;
+    return (
+        <>
+            <MenuList/>
+            {visible && <ConfigContent/>}
+        </>
+    );
+})
+
+export default DesignerRight;

package/light-chaser-app/src/designer/right/MenuList.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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, ComponentType} from 'react';
+import {MenuInfo} from "./MenuType";
+import rightStore from "./RightStore";
+import {observer} from "mobx-react";
+import {Info} from "@icon-park/react";
+import {IIconProps} from "@icon-park/react/lib/runtime";
+
+interface LcConfigMenusProps {
+    onChange?: (menu: string) => void;
+}
+
+class MenuList extends Component<LcConfigMenusProps | any> {
+
+    menuChange = (e: React.MouseEvent) => {
+        const {setActiveMenu, setContentVisible} = rightStore;
+        setActiveMenu && setActiveMenu((e.currentTarget as HTMLElement).id);
+        setContentVisible && setContentVisible(true);
+    }
+
+    buildMenuList = () => {
+        const {menus, activeMenu} = rightStore;
+        if (menus.length === 0)
+            return <div
+                style={{
+                    writingMode: 'vertical-rl',
+                    color: '#A0A0B2',
+                    letterSpacing: '4px',
+                    padding: 12,
+                    fontSize: 12,
+                    lineHeight: '16px',
+                    fontFamily: 'Inter, Helvetica Neue, Roboto, sans-serif'
+                }}><Info theme={"filled"} style={{fontSize: 16, marginBottom: 8, color: '#A0A0B2'}}/>双击组件激活...
+            </div>
+        return menus.map((item: MenuInfo) => {
+            const Icon = item.icon as ComponentType<IIconProps>;
+            return (
+                <div className={`menu-item ${activeMenu === item.key ? "menu-item-active" : ""}`} key={item.key}
+                     id={item.key} onClick={this.menuChange}>
+                    <div className={'item-icon'}>
+                        {Icon && <Icon theme="filled" size="18"/>}
+                    </div>
+                    <div className={'item-content'}>{item.name}</div>
+                </div>
+            );
+        });
+    }
+
+    render() {
+        return (
+            <div className={'lc-config-menu'}>
+                <div className={'menu-list'}>
+                    {this.buildMenuList()}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default observer(MenuList);

package/light-chaser-app/src/designer/right/MenuType.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 {ComponentType} from "react";
+
+export interface MenuInfo {
+    //图标
+    icon: ComponentType;
+    //名称
+    name: string;
+    //标识
+    key: string;
+    //点击事件
+    onClick?: (menuKey: string) => void;
+}

package/light-chaser-app/src/designer/right/RightStore.ts

@@ -0,0 +1,122 @@
+/*
+ * 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, runInAction} from "mobx";
+import {MenuInfo} from "./MenuType";
+import statusListStore from "./status-list/StatusListStore.ts";
+import DesignerLoader from "../loader/DesignerLoader.ts";
+
+/**
+ * 激活元素
+ */
+export interface ActiveElem {
+    //元素id
+    id?: string;
+    //元素类型
+    type?: string;
+}
+
+
+/**
+ * 设计器。右侧组件配置状态管理类
+ */
+class RightStore {
+    constructor() {
+        makeObservable(this, {
+            menus: observable,
+            activeMenu: observable,
+            visible: observable,
+            detailVisible: observable,
+            setDetailVisible: action,
+            setActiveMenu: action,
+            setContentVisible: action,
+            activeConfig: action,
+        })
+    }
+
+    /**
+     * 当前选中的组件
+     */
+    activeElem: ActiveElem = {};
+    /**
+     * 当前选中组件的操作菜单列表
+     */
+    menus: Array<MenuInfo> = [];
+    /**
+     * 当前选中组件的操作菜单列表中处于激活状态的菜单
+     */
+    activeMenu: string = '';
+    /**
+     * 右侧组件配置区域是否可见
+     */
+    visible: boolean = false;
+
+    detailVisible = true;
+
+    setActiveMenu = (menu: string) => this.activeMenu = menu;
+
+    setDetailVisible = (visible: boolean) => this.detailVisible = visible;
+
+    setContentVisible = (visible: boolean) => this.visible = visible;
+
+    activeConfig = (id: string | null, type: string | null) => {
+        if (!id || !type) {
+            //无效的激活，置为默认状态
+            this.activeMenu = '';
+            this.activeElem = {};
+            this.menus = [];
+            if (this.visible)
+                this.visible = false;
+            return;
+        }
+        this.activeElem = {id, type};
+        //更新菜单列表
+        this.menus = DesignerLoader?.definitionMap[type]?.getMenuList() || [];
+        if (this.menus.length > 0) {
+            let setNewActiveMenu = true;
+            for (let i = 0; i < this.menus.length; i++) {
+                if (this.menus[i].key === this.activeMenu) {
+                    setNewActiveMenu = false;
+                    break;
+                }
+            }
+            if (setNewActiveMenu && this.visible)
+                this.activeMenu = this.menus[0].key;
+            if (type === 'group' || !this.menus.some((menu) => menu.key === 'style'))
+                this.activeMenu = 'base';
+            else if (this.activeMenu === '')
+                this.activeMenu = 'style';
+        }
+        //重新挂载配置面板
+        if (this.visible) {
+            this.visible = false;
+            const tempTimer = setTimeout(() => {
+                runInAction(() => this.visible = true);
+                clearTimeout(tempTimer);
+            }, 0);
+        } else {
+            this.visible = true;
+        }
+        //重新计算状态列表
+        statusListStore.init();
+    }
+
+    remountConfigDetailsPanel = () => {
+        rightStore.setDetailVisible(false);
+        const timer = setTimeout(() => {
+            rightStore.setDetailVisible(true);
+            clearTimeout(timer);
+        }, 0)
+    }
+}
+
+const rightStore = new RightStore();
+export default rightStore;

package/light-chaser-app/src/designer/right/status-list/ComponentStatusList.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 {Close} from "@icon-park/react";
+import {Button} from "antd";
+import {observer} from "mobx-react";
+import {useEffect, useRef} from "react";
+import statusListStore from "./StatusListStore.ts";
+import StatusListStore from "./StatusListStore.ts";
+import TextUtil from "../../../util/TextUtil.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+const ComponentStatusList = observer(() => {
+    const {editId, setEditId, changeStatusName} = statusListStore;
+    const editStatueNameRef = useRef("");
+
+    useEffect(() => {
+        statusListStore.init();
+
+        return () => statusListStore.destroy();
+    }, []);
+
+    return (
+        <div className="lc-component-status-list">
+            <div className="status-list-header">
+                <div className="list-title">状态</div>
+                <div className="list-operate"><Close onClick={() => StatusListStore.setVisible(false)}/></div>
+            </div>
+            <div className="status-list-content">
+                {statusListStore.list?.map((item) => {
+                    return <div className={`status-item ${statusListStore.activatedStatus === item.id ? 'status-item-active' : ''}`} key={item.id}
+                                onDoubleClick={() => setEditId(item.id)}
+                                onClick={(e) => {
+                                    if (e.ctrlKey)
+                                        statusListStore.delStatus(item.id);
+                                    else if (e.altKey)
+                                        TextUtil.copyToClipboard(item.id).then(() => {
+                                            globalMessage.messageApi?.info("已复制状态ID到剪切板");
+                                        });
+                                    else
+                                        statusListStore.setActivatedStatus(item.id);
+                                }}>{item.id === editId ?
+                        <input className="status-name-input" defaultValue={item.name}
+                               autoFocus={true} ref={(el) => el?.select()}
+                               onChange={(e) => editStatueNameRef.current = e.target.value}
+                               onKeyDown={(e) => {
+                                   if (e.key === 'Enter') {
+                                       e.preventDefault();
+                                       changeStatusName(item.id, editStatueNameRef.current);
+                                       setEditId(null);
+                                   }
+                               }}
+                               onBlur={(e) => {
+                                   changeStatusName(item.id, e.target.value)
+                                   setEditId(null);
+                               }}/> : item.name}
+                    </div>
+                })}
+                <Button type="dashed" size="small" style={{width: '100%'}} onClick={statusListStore.addStatus}>添加</Button>
+            </div>
+        </div>
+    )
+})
+
+export default ComponentStatusList