light-chaser-pro 1.0.0

package/light-chaser-app/src/designer/header/items/release/ReleaseHdConfigImpl.less

@@ -0,0 +1,205 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ */
+
+.lc-header-release-config {
+  background: #27293D;
+  border-radius: 0 0 6px 6px;
+
+  .release-config-form {
+    .ant-form-item {
+      margin-bottom: 20px;
+    }
+
+    .ant-form-item-label {
+      padding-bottom: 8px;
+      
+      > label {
+        color: #9A9A9A;
+        font-size: 13px;
+        font-weight: 500;
+        font-family: "Poppins", sans-serif;
+        
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    /* Common Input Styles */
+    .ant-input,
+    .ant-input-number,
+    .ant-select-selector {
+      background-color: #1E1E2F !important;
+      border: 1px solid #2B3553 !important;
+      border-radius: 6px !important;
+      color: #FFFFFF !important;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        border-color: #E14ECA !important;
+      }
+      
+      &:focus,
+      &-focused,
+      &:focus-within {
+        border-color: #FD5D93 !important;
+        box-shadow: 0 0 0 2px rgba(253, 93, 147, 0.15) !important;
+      }
+    }
+
+    /* Specific Heights */
+    .ant-input,
+    .ant-select-selector {
+      height: 40px;
+    }
+    
+    .ant-select-selector {
+      display: flex;
+      align-items: center;
+      
+      .ant-select-selection-item {
+        color: #FFFFFF;
+      }
+    }
+    
+    .ant-select-arrow {
+      color: #9A9A9A;
+    }
+
+    /* Input Number specific */
+    .ant-input-number {
+      width: 100%;
+      height: 40px;
+      
+      .ant-input-number-input {
+        height: 38px;
+        padding-left: 12px;
+        color: #FFFFFF;
+      }
+      
+      .ant-input-number-handler-wrap {
+        background: #2B3553;
+        border-left: 1px solid #1E1E2F;
+        border-radius: 0 6px 6px 0;
+        
+        .ant-input-number-handler {
+          border-bottom: 1px solid #1E1E2F;
+          
+          &:hover .ant-input-number-handler-up-inner,
+          &:hover .ant-input-number-handler-down-inner {
+            color: #FD5D93;
+          }
+        }
+      }
+    }
+
+    /* Switch Style */
+    .ant-switch {
+      background-color: #1E1E2F;
+      
+      &.ant-switch-checked {
+        background-color: #FD5D93;
+      }
+    }
+    
+    /* Disabled Input Style */
+    .ant-input[disabled] {
+      background-color: #1a1a2e !important;
+      border-color: #2B3553 !important;
+      color: #6a6a7a !important;
+      cursor: default;
+    }
+  }
+
+  .release-config-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+    .ant-btn {
+      height: 36px;
+      border-radius: 4px;
+      font-weight: 500;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      
+      .i-icon {
+        font-size: 16px;
+        margin-top: -2px;
+      }
+      
+      &.btn-cancel {
+        background: transparent;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        color: #9A9A9A;
+        
+        &:hover {
+          color: #FFFFFF;
+          border-color: #FFFFFF;
+          background: rgba(255, 255, 255, 0.05);
+        }
+      }
+      
+      &.btn-action {
+        background: linear-gradient(to right, #FD5D93, #EC250D);
+        border: none;
+        color: #FFFFFF;
+        box-shadow: 0 4px 10px rgba(253, 93, 147, 0.3);
+        
+        &:hover {
+          opacity: 0.9;
+          transform: translateY(-1px);
+          box-shadow: 0 6px 15px rgba(253, 93, 147, 0.4);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+        
+        &.btn-copy {
+          background: linear-gradient(to right, #1D8CF8, #3358f4);
+          box-shadow: 0 4px 10px rgba(29, 140, 248, 0.3);
+          
+          &:hover {
+            box-shadow: 0 6px 15px rgba(29, 140, 248, 0.4);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Global override for Select dropdown
+:global {
+  .lc-select-dropdown {
+    background-color: #27293D;
+    border: 1px solid #2B3553;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    padding: 4px;
+    border-radius: 6px;
+    z-index: 2005 !important;
+    
+    .ant-select-item {
+      color: #FFFFFF;
+      border-radius: 4px;
+      margin-bottom: 2px;
+      
+      &.ant-select-item-option-selected {
+        background-color: rgba(253, 93, 147, 0.2);
+        color: #FD5D93;
+        font-weight: 500;
+      }
+      
+      &.ant-select-item-option-active {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    }
+  }
+}

package/light-chaser-app/src/designer/header/items/release/ReleaseHdConfigImpl.tsx

@@ -0,0 +1,189 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ */
+import {observer} from "mobx-react";
+import {useRef, useState} from 'react';
+import './ReleaseHdConfigImpl.less';
+import {Button, Form, Input, InputNumber, Select, Space, Switch, Tooltip} from "antd";
+import {Copy, Send} from "@icon-park/react";
+import AuthFetchUtil from "../../../../util/AuthFetchUtil.ts";
+import Base64Util from "light-chaser-util/lib/Base64Util.ts";
+import TextUtil from "../../../../util/TextUtil.ts";
+import designerHeaderStore from "../../DesignerHeaderStore.ts";
+import ProjectUtil from "../../../../util/ProjectUtil.ts";
+import {IProject} from "light-chaser-types/types/DesignerTypes.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {EncryptResult, HybridCryptoUtil} from "../../../../util/HybridCryptoUtil.ts";
+import FloatingModal from "../../../../comps/common-component/floating-modal/FloatingModal.tsx";
+
+const {Option} = Select;
+
+export interface IReleaseHdConfig {
+    releaseType: string;
+    projectId: string;
+    encrypt: boolean;
+    password: string | null | EncryptResult;
+    dependencies: Array<any>,
+    expirationDate: string | null
+}
+
+const ReleaseHdConfigImpl = observer(() => {
+    const configRef = useRef<IReleaseHdConfig>({
+        releaseType: 'OVERWRITE',
+        projectId: window.LC_ENV.projectId,
+        encrypt: false,
+        password: null,
+        dependencies: [],
+        expirationDate: null
+    });
+    const [form] = Form.useForm();
+    const [encryptEnabled, setEncryptEnabled] = useState(false);
+    const [releaseUrl, setReleasedUrl] = useState<string | null>(null);
+
+    const onClose = () => {
+        designerHeaderStore.setCurrentKey('')
+    }
+
+    const releaseProject = () => {
+        if (configRef.current.encrypt && !configRef.current.password) {
+            globalMessage.messageApi?.error('开启加密时必须填写密码');
+            return;
+        }
+        const dependencies: Array<any> = [];
+        const mainManger = window.LC_ENV.mainManger;
+        const project: IProject = {id: mainManger.id!, name: mainManger.name!, data: mainManger.getData()}
+        ProjectUtil.cyclicBuildReleaseDependencies(project, dependencies).then(async () => {
+            configRef.current.dependencies = dependencies as [];
+            configRef.current.password = await HybridCryptoUtil.encryptRequest(configRef.current.password! as string) as EncryptResult;
+            AuthFetchUtil.post<string>("/api/release/release", configRef.current).then(res => {
+                if (res !== null) {
+                    const code = Base64Util.toBase64(res);
+                    const url = `${window.location.host}/release/${code}`;
+                    setReleasedUrl(url);
+                    //将url复制到剪贴板
+                    TextUtil.copyToClipboard(url).then((res) => {
+                        res && globalMessage.messageApi?.success('发布成功，链接已复制到剪贴板');
+                    })
+                }
+            })
+        })
+    }
+
+    const handleFormChange = (changedValues: any) => {
+        configRef.current = {...configRef.current!, ...changedValues};
+
+        // 处理加密选项的显示
+        if (changedValues.encrypt !== undefined) {
+            setEncryptEnabled(changedValues.encrypt);
+        }
+    }
+
+    return (
+        <FloatingModal
+            title="项目发布"
+            width={400}
+            open={true}
+            onClose={onClose}
+        >
+            <div className="lc-header-release-config">
+                <Form
+                    form={form}
+                    layout="vertical"
+                    initialValues={{
+                        releaseType: 'OVERWRITE',
+                        encrypt: false,
+                        password: undefined,
+                        expirationDate: undefined
+                    }}
+                    onValuesChange={handleFormChange}
+                    className="release-config-form"
+                >
+                    <Space direction="vertical" size={0} style={{width: '100%'}}>
+                        <Form.Item
+                            label={
+                                <Tooltip title="增量发布会创建一个新的发布链接。覆盖发布会将之前已经发布的项目覆盖">
+                                    <span style={{cursor: 'help'}}>发布类型 (Release Type)</span>
+                                </Tooltip>
+                            }
+                            name="releaseType"
+                        >
+                            <Select
+                                onChange={(value) => configRef.current!.releaseType = value}
+                                styles={{popup: {root: {zIndex: 9999}}}}
+                                classNames={{popup: {root: 'lc-select-dropdown'}}}
+                            >
+                                <Option value="INCREMENT">增量发布 (Incremental)</Option>
+                                <Option value="OVERWRITE">覆盖发布 (Overwrite)</Option>
+                            </Select>
+                        </Form.Item>
+
+                        <Form.Item label="加密 (Encryption)" name="encrypt" valuePropName="checked">
+                            <Switch onChange={(checked) => configRef.current!.encrypt = checked}/>
+                        </Form.Item>
+
+                        {encryptEnabled && (
+                            <Form.Item
+                                label="密码 (Password)"
+                                name="password"
+                            >
+                                <Input
+                                    type="password"
+                                    onChange={(e) => configRef.current!.password = e.target.value as any}
+                                    placeholder="请输入访问密码，未设置则不加密"
+                                />
+                            </Form.Item>
+                        )}
+
+                        <Form.Item
+                            label={<Tooltip title="未设置则永久有效"><span>有效期 (Expiration)</span></Tooltip>}
+                            name="expirationDate"
+                        >
+                            <InputNumber
+                                min={1}
+                                onChange={(value) => configRef.current!.expirationDate = value as any}
+                                placeholder="天数 (Days)，未设置则永久有效"
+                                style={{width: '100%'}}
+                            />
+                        </Form.Item>
+
+                        {releaseUrl && (
+                            <Form.Item label="发布链接 (Release URL)">
+                                <Input value={releaseUrl} disabled/>
+                            </Form.Item>
+                        )}
+                    </Space>
+                </Form>
+
+                <div className="release-config-footer">
+                    <Button onClick={onClose} className="btn-cancel">
+                        关闭
+                    </Button>
+                    {releaseUrl != null ? (
+                        <Button
+                            type="primary"
+                            onClick={() => TextUtil.copyToClipboard(releaseUrl).then((res) => {
+                                res && globalMessage.messageApi?.success('链接已复制到剪贴板');
+                            })}
+                            icon={<Copy theme="outline"/>}
+                            className="btn-action btn-copy"
+                        >
+                            复制链接
+                        </Button>
+                    ) : (
+                        <Button
+                            type="primary"
+                            icon={<Send theme="outline"/>}
+                            onClick={releaseProject}
+                            className="btn-action"
+                        >
+                            发布项目
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </FloatingModal>
+    );
+})
+
+export default ReleaseHdConfigImpl;

package/light-chaser-app/src/designer/header/items/theme/ThemeHdItem.less

@@ -0,0 +1,161 @@
+/*
+ * 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-config-global {
+  .ant-modal-content {
+    //background-color: #1E1E2F;
+    border: 1px solid #2C2C3E;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .ant-modal-header {
+    //background-color: #2C2C3E;
+    border-bottom: 1px solid #3A3A4E;
+    border-radius: 8px 8px 0 0;
+    padding: 16px 20px;
+
+    .ant-modal-title {
+      color: #FFFFFF;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 20px 0;
+    color: #FFFFFF;
+  }
+
+  .ant-modal-footer {
+    border-top: 1px solid #3A3A4E;
+    border-radius: 0 0 8px 8px;
+    padding: 12px 20px;
+
+    .ant-btn {
+      border-radius: 4px;
+      font-weight: 500;
+      height: 36px;
+      padding: 0 16px;
+      transition: all 0.2s;
+
+      &:hover, &:focus {
+        transform: translateY(-1px);
+      }
+    }
+
+    .ant-btn-primary {
+      background-color: #4FB8FF;
+      border-color: #4FB8FF;
+      color: #FFFFFF;
+
+      &:hover, &:focus {
+        background-color: #3CA5E6;
+        border-color: #3CA5E6;
+      }
+    }
+
+    .ant-btn-default {
+      background-color: transparent;
+      border-color: #4FB8FF;
+      color: #4FB8FF;
+
+      &:hover, &:focus {
+        background-color: rgba(79, 184, 255, 0.1);
+        border-color: #3CA5E6;
+        color: #3CA5E6;
+      }
+    }
+
+    .ant-btn-dashed {
+      background-color: transparent;
+      border-color: #A0A0B2;
+      color: #A0A0B2;
+
+      &:hover, &:focus {
+        background-color: rgba(160, 160, 178, 0.1);
+        border-color: #FFFFFF;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  .lc-theme-list-container {
+    max-height: 360px;
+    overflow-y: auto;
+    padding: 3px 0 6px 0;
+    border-radius: 4px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #2C2C3E;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #3A3A4E;
+      border-radius: 3px;
+
+      &:hover {
+        background: #4A4A5E;
+      }
+    }
+  }
+
+  .lc-theme-warning {
+    color: #FF6E6E;
+    font-size: 12px;
+    line-height: 16px;
+    margin-top: 16px ;
+    padding: 8px 12px;
+    background-color: rgba(255, 110, 110, 0.1);
+    border-radius: 4px;
+    border-left: 2px solid #FF6E6E;
+  }
+}
+
+.lc-theme-editor-modal {
+  .ant-modal-content {
+    border: 1px solid #2C2C3E;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .ant-modal-header {
+    border-bottom: 1px solid #3A3A4E;
+    border-radius: 8px 8px 0 0;
+    padding: 16px 20px;
+
+    .ant-modal-title {
+      color: #FFFFFF;
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 10px 0;
+    color: #FFFFFF;
+  }
+
+  .ant-modal-close {
+    color: #A0A0B2;
+
+    &:hover {
+      color: #FFFFFF;
+    }
+  }
+}

package/light-chaser-app/src/designer/header/items/theme/ThemeHdItemImpl.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 {useRef, useState} from 'react';
+import './ThemeHdItem.less';
+import ThemeList from "../../../../comps/common-component/theme-config/theme-list/ThemeList";
+import ThemeEditor from "../../../../comps/common-component/theme-config/theme-editor/ThemeEditor";
+import {Button, Modal} from 'antd';
+import {IThemeItem} from "light-chaser-types/types/ThemeTypes.ts";
+import designerHeaderStore from "../../DesignerHeaderStore.ts";
+
+const ThemeHdItemImpl = () => {
+    const selectedThemeRef = useRef<IThemeItem>();
+    const [openEditor, setOpenEditor] = useState(false);
+
+    const onClose = () => designerHeaderStore.setCurrentKey('');
+
+    const updateGlobalTheme = () => {
+        const {flashGlobalTheme} = window.LC_ENV.currentManager.layerManager
+        if (selectedThemeRef.current) {
+            flashGlobalTheme(selectedThemeRef.current);
+            onClose();
+        }
+    }
+
+    return (
+        <>
+            <Modal
+                title="画布主题设置"
+                width={500}
+                open={true}
+                onCancel={onClose}
+                footer={[
+                    <Button key="update_gloabl_theme" type="primary"
+                            onClick={updateGlobalTheme}>更新全局主题</Button>,
+                    <Button key="custome_theme" type="default"
+                            onClick={() => setOpenEditor(true)}>自定义主题</Button>,
+                    <Button key="cancel" onClick={onClose}>取消</Button>,
+                ]}
+                className={"lc-theme-config-global"}
+                styles={{
+                    body: {maxHeight: '60vh', overflow: 'hidden', borderRadius: '8px'},
+                }}
+            >
+                <div className="lc-theme-list-container">
+                    <ThemeList onSelected={(value) => selectedThemeRef.current = value}/>
+                </div>
+                <div className="lc-theme-warning">警告：全局主题设置在更新后，会影响到当前项目的所有组件。请谨慎操作！</div>
+            </Modal>
+            <Modal
+                title="编辑主题"
+                open={openEditor}
+                onCancel={() => setOpenEditor(false)}
+                width={890}
+                centered={true}
+                footer={null}
+                className="lc-theme-editor-modal"
+                styles={{
+                    body: {borderRadius: '8px'}
+                }}
+            >
+                <ThemeEditor/>
+            </Modal>
+        </>
+    );
+}
+
+export default ThemeHdItemImpl;