light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/project-list/ProjectItem.less

@@ -0,0 +1,192 @@
+/*
+ * 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.
+ */
+
+.project-list-item {
+  background: #2c2c3e;
+  border: 1px solid #3a3a4e;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    border-color: #4fb8ff;
+    box-shadow: 0 4px 12px rgba(79, 184, 255, 0.2);
+    transform: translateY(-2px);
+
+    .project-item-cover {
+      .operate-icon-list {
+        opacity: 1;
+        background: rgba(28, 28, 47, 0.9);
+      }
+    }
+
+    .project-item-content {
+      .more-actions {
+        opacity: 1;
+      }
+    }
+  }
+
+  .project-item-cover {
+    position: relative;
+    aspect-ratio: 16/9;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 4px 4px 0 0;
+    margin: 12px 12px 0;
+    overflow: hidden;
+
+    .operate-icon-list {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      opacity: 0;
+      transition: all 0.2s ease;
+
+      .operate-btn {
+        .ant-btn {
+          height: 32px;
+          padding: 0 16px;
+          border-radius: 4px;
+          font-size: 14px;
+          line-height: 20px;
+          transition: all 0.2s ease;
+
+          &.ant-btn-default {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: #ffffff;
+
+            &:hover {
+              background: rgba(255, 255, 255, 0.2);
+              border-color: #4fb8ff;
+              color: #4fb8ff;
+            }
+          }
+
+          &.ant-btn-primary {
+            background: #4fb8ff;
+            border: none;
+            color: #ffffff;
+            font-weight: 500;
+
+            &:hover {
+              background: #3aa8ff;
+              transform: translateY(-1px);
+            }
+
+            &:active {
+              transform: translateY(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .project-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 12px;
+    background: #2c2c3e;
+
+    .project-name {
+      flex: 1;
+      min-width: 0;
+
+      .project-rename-input {
+        width: 100%;
+
+        input {
+          width: 100%;
+          background: #1e1e2f;
+          border: 1px solid #4fb8ff;
+          border-radius: 4px;
+          padding: 8px 12px;
+          color: #ffffff;
+          font-size: 14px;
+          line-height: 20px;
+          outline: none;
+          transition: all 0.2s ease;
+
+          &:focus {
+            box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+          }
+
+          &::placeholder {
+            color: #a0a0b2;
+          }
+        }
+      }
+
+      .project-name-content-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .project-name-content {
+          font-size: 14px;
+          line-height: 20px;
+          color: #ffffff;
+          font-weight: 500;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+        }
+
+        .rename-icon {
+          color: #a0a0b2;
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          transition: all 0.2s ease;
+
+          &:hover {
+            color: #4fb8ff;
+            background: rgba(79, 184, 255, 0.1);
+          }
+
+          svg {
+            display: block;
+          }
+        }
+      }
+    }
+
+    .more-actions {
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #a0a0b2;
+
+      &:hover {
+        color: #4fb8ff;
+        background: rgba(79, 184, 255, 0.1);
+      }
+
+      svg {
+        display: block;
+      }
+    }
+  }
+}

package/light-chaser-app/src/pages/home/project-list/ProjectItem.tsx

@@ -0,0 +1,136 @@
+/*
+ * 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 './ProjectItem.less';
+import {CopyOne, Delete, Edit, EditOne, MoreOne, PreviewOpen, Setting} from "@icon-park/react";
+import {Button, Dropdown, MenuProps} from "antd";
+import {useRef, useState} from "react";
+import baseApi from "../../../api/engineering/BaseApi.ts";
+import {IProjectInfoManager} from "light-chaser-types/types/DesignerTypes.ts";
+import {useNavigate} from "react-router-dom";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+
+export interface ProjectItemProps {
+    id: string;
+    name: string;
+    cover?: string;
+    doOperate: (id: string, type: string) => void;
+}
+
+export default function ProjectItem(props: ProjectItemProps) {
+    const {cover, id, doOperate} = props;
+    const [rename, setRename] = useState(false);
+    const nameRef = useRef<string>(props.name);
+    const navigate = useNavigate();
+
+    const items: MenuProps['items'] = [
+        {
+            key: '1',
+            label: '删除',
+            icon: <Delete/>,
+            onClick: () => doOperate(id, "del")
+        },
+        {
+            key: '2',
+            label: '复制',
+            icon: <CopyOne/>,
+            onClick: () => doOperate(id, "clone")
+        },
+        {
+            key: '3',
+            label: '重命名',
+            icon: <Edit/>,
+            onClick: () => setRename(true)
+        },
+        {
+            key: '4',
+            label: '编辑',
+            icon: <EditOne/>,
+            onClick: () => doOperate(id, "edit")
+        },
+        {
+            key: '5',
+            label: '预览',
+            icon: <PreviewOpen/>,
+            onClick: () => doOperate(id, "show")
+        },
+        {
+            key: '6',
+            label: '设置',
+            icon: <Setting/>,
+            onClick: () => navigate(`/home/projectSetting/${id}`, {state: {projectId: id, title: props.name}})
+        }
+    ];
+
+    const updateName = () => {
+        if (nameRef.current !== props.name) {
+            const data: IProjectInfoManager = {id, name: nameRef.current};
+            baseApi.updateProject(data).then((result) => {
+                if (result)
+                    globalMessage.messageApi?.success("保存成功");
+                else
+                    globalMessage.messageApi?.error("保存失败");
+            });
+        }
+    }
+
+    return (
+        <div className="project-list-item">
+            <div className="project-item-cover" style={{backgroundImage: `url(${cover})`}}>
+                <div className="operate-icon-list">
+                    <div className="operate-btn">
+                        <Button type="default" onClick={() => doOperate(id, "show")}>预览</Button>
+                    </div>
+                    <div className="operate-btn">
+                        <Button type="primary" onClick={() => doOperate(id, "edit")}>编辑</Button>
+                    </div>
+                </div>
+            </div>
+            <div className="project-item-content">
+                <div className="project-name">
+                    {rename ?
+                        <div className="project-rename-input">
+                            <input
+                                autoFocus={true}
+                                defaultValue={nameRef.current}
+                                ref={input => input?.select()}
+                                onBlur={() => {
+                                    updateName();
+                                    setRename(false);
+                                }}
+                                onKeyDown={(event) => {
+                                    if (event.key === 'Enter') {
+                                        updateName();
+                                        setRename(false);
+                                    }
+                                }}
+                                onChange={(e) => nameRef.current = e.target.value}
+                            />
+                        </div> :
+                        <div className="project-name-content-wrapper">
+                            <div className="project-name-content" title={nameRef.current}>{nameRef.current}</div>
+                            <div className="rename-icon" onClick={() => setRename(true)}>
+                                <Edit size={14}/>
+                            </div>
+                        </div>
+                    }
+                </div>
+                <div className="more-actions">
+                    <Dropdown menu={{items}}>
+                        <div>
+                            <MoreOne size={16}/>
+                        </div>
+                    </Dropdown>
+                </div>
+            </div>
+        </div>
+    )
+}

package/light-chaser-app/src/pages/home/project-list/ProjectList.less

@@ -0,0 +1,137 @@
+/*
+ * 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.
+ */
+.project-list-container {
+  height: 100%;
+
+  .project-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px;
+    padding: 0;
+    margin-bottom: 24px;
+  }
+
+  .project-list-page {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0;
+
+    .ant-pagination {
+      .ant-pagination-item {
+        background: #2c2c3e;
+        border: 1px solid #3a3a4e;
+        border-radius: 4px;
+        margin: 0 4px;
+
+        a {
+          color: #a0a0b2;
+          font-size: 14px;
+          line-height: 20px;
+        }
+
+        &:hover {
+          border-color: #4fb8ff;
+
+          a {
+            color: #4fb8ff;
+          }
+        }
+
+        &.ant-pagination-item-active {
+          background: #4fb8ff;
+          border-color: #4fb8ff;
+
+          a {
+            color: #ffffff;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .ant-pagination-prev,
+      .ant-pagination-next {
+        .ant-pagination-item-link {
+          background: #2c2c3e;
+          border: 1px solid #3a3a4e;
+          border-radius: 4px;
+          color: #a0a0b2;
+
+          &:hover {
+            border-color: #4fb8ff;
+            color: #4fb8ff;
+          }
+        }
+      }
+
+      .ant-pagination-jump-prev,
+      .ant-pagination-jump-next {
+        .ant-pagination-item-container {
+          .ant-pagination-item-ellipsis {
+            color: #a0a0b2;
+          }
+        }
+      }
+
+      .ant-pagination-disabled {
+        .ant-pagination-item-link {
+          background: #2c2c3e;
+          border-color: #3a3a4e;
+          color: #666676;
+          cursor: not-allowed;
+
+          &:hover {
+            border-color: #3a3a4e;
+            color: #666676;
+          }
+        }
+      }
+    }
+  }
+
+  // 搜索框样式适配
+  .project-list-search {
+    .ant-input-affix-wrapper {
+      background: #2c2c3e;
+      border: 1px solid #3a3a4e;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        border-color: #4fb8ff;
+      }
+
+      &:focus,
+      &.ant-input-affix-wrapper-focused {
+        border-color: #4fb8ff;
+        box-shadow: 0 0 0 2px rgba(79, 184, 255, 0.2);
+      }
+
+      .ant-input-prefix {
+        margin-right: 8px;
+
+        svg {
+          color: #a0a0b2;
+        }
+      }
+
+      .ant-input {
+        background: transparent;
+        color: #ffffff;
+        font-size: 14px;
+        line-height: 20px;
+
+        &::placeholder {
+          color: #a0a0b2;
+        }
+      }
+    }
+  }
+}

package/light-chaser-app/src/pages/home/project-list/ProjectList.tsx

@@ -0,0 +1,180 @@
+/*
+ * 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, {KeyboardEvent, memo, useEffect, useRef} from 'react';
+import './ProjectList.less';
+import {Button, Input, Pagination} from "antd";
+import defaultSnapshot from '../image/default-snapshot.jpg';
+import {INewProjectInfo, NewProjectDialog} from "./NewProjectDialog.tsx";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import DelProjectDialog from "./DelProjectDialog.tsx";
+import CloneProjectDialog from "./CloneProjectDialog.tsx";
+import ProjectItem from "./ProjectItem.tsx";
+import {Search} from "@icon-park/react";
+import baseApi from "../../../api/engineering/BaseApi.ts";
+import {IPage, IProjectInfoManager} from "light-chaser-types/types/DesignerTypes.ts";
+import PageContainer from "../page-container/PageContainer.tsx";
+
+export const ProjectList = memo(() => {
+    const [addDialog, setAddDialog] = React.useState(false);
+    const [delDialog, setDelDialog] = React.useState(false);
+    const [cloneDialog, setCloneDialog] = React.useState(false);
+    const delIdRef = useRef<string>("");
+    const cloneIdRef = useRef<string>("");
+    const [pageData, setPageData] = React.useState<IPage<IProjectInfoManager>>({
+        records: [],
+        total: 0,
+        current: 1,
+        size: 15
+    });
+
+    const getProjectPageList = (current: number, size: number, searchValue?: string) => {
+        baseApi.getProjectInfoPageList({
+            current,
+            size,
+            searchValue
+        }).then((data: IPage<IProjectInfoManager>) => setPageData(data));
+    }
+
+
+    const toggleNewProVisible = () => setAddDialog(!addDialog);
+
+    const onOk = (data: INewProjectInfo) => {
+        const {name, des, width, height} = data;
+        const project: IProjectInfoManager = {
+            name: name,
+            des: des,
+            dataJson: JSON.stringify({canvasManager: {width, height}}),
+        }
+        baseApi.createProject(project).then((id) => {
+            if (id === "")
+                globalMessage.messageApi?.error('创建失败');
+            else {
+                setAddDialog(false);
+                window.open(`/designer?id=${id}`, '_blank');
+                getProjectPageList(pageData.current, pageData.size)
+            }
+        });
+    }
+
+    const onCancel = () => setAddDialog(false);
+
+    const operateHandler = (id: string, type: string) => {
+        switch (type) {
+            case 'edit':
+                window.open(`/designer?id=${id}`, '_blank');
+                break;
+            case 'show':
+                window.open(`/preview?id=${id}`, '_blank');
+                break;
+            case 'del':
+                delIdRef.current = id;
+                setDelDialog(true);
+                break;
+            case 'clone':
+                cloneIdRef.current = id;
+                setCloneDialog(true);
+                break;
+        }
+    }
+
+    const cancelDel = () => setDelDialog(false);
+
+    const confirmClone = () => {
+        baseApi.copyProject(cloneIdRef.current).then((id) => {
+            if (id !== "") {
+                setCloneDialog(false);
+                getProjectPageList(pageData.current, pageData.size);
+                globalMessage.messageApi?.success('克隆成功');
+            } else {
+                globalMessage.messageApi?.error('克隆失败');
+            }
+        });
+    }
+
+    const cancelClone = () => setCloneDialog(false);
+
+    const confirmDel = () => {
+        baseApi.deleteProject(delIdRef.current).then((res) => {
+            if (res) {
+                setDelDialog(false);
+                getProjectPageList(pageData.current, pageData.size);
+            } else {
+                globalMessage.messageApi?.error('删除失败');
+            }
+        });
+
+    }
+
+    const pageChange = (page: number, size: number) => {
+        baseApi.getProjectInfoPageList({
+            current: page,
+            size: size
+        }).then((data: IPage<IProjectInfoManager>) => setPageData(data));
+    }
+
+    const onKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key !== 'Enter')
+            return;
+        doSearch((event.target as any).value);
+    }
+
+    const doSearch = (event: KeyboardEvent) => {
+        baseApi.getProjectInfoPageList({
+            current: 1,
+            size: pageData.size,
+            searchValue: (event.target as HTMLInputElement).value
+        }).then((data: IPage<IProjectInfoManager>) => setPageData(data));
+    }
+
+    useEffect(() => {
+        getProjectPageList(pageData.current, pageData.size);
+    }, []);
+
+    return (
+        <PageContainer className='project-list-container'
+                       title="项目列表"
+                       tools={[
+                           <Input placeholder={'搜索项目并回车'} size={'middle'}
+                                  prefix={<Search color={'#4b4b4b'} size={12}/>}
+                                  className={'project-list-search'}
+                                  onKeyDown={onKeyDown}
+                                  onPressEnter={doSearch}
+                                  style={{width: 350}}/>,
+                           <Button type={"primary"} style={{width: 100}}
+                                   onClick={toggleNewProVisible}>+ {'新建'}</Button>
+                       ]}
+                       content={
+                           <>
+                               <div className={'project-list'}>
+                                   {pageData && pageData.records.map((item: IProjectInfoManager) => {
+                                       return (
+                                           <ProjectItem key={item.id} id={item.id!} name={item.name!}
+                                                        cover={item.cover || defaultSnapshot}
+                                                        doOperate={operateHandler}/>
+                                       )
+                                   })}
+                               </div>
+                               <Pagination rootClassName={'project-list-page'} defaultCurrent={pageData?.current} showSizeChanger={false}
+                                           showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
+                                           pageSize={pageData?.size} total={pageData?.total} onChange={pageChange}/>
+                               <NewProjectDialog onOk={onOk} onCancel={onCancel} visible={addDialog}/>
+                               <DelProjectDialog visible={delDialog} onOk={confirmDel} onCancel={cancelDel}/>
+                               <CloneProjectDialog onOk={() => confirmClone()} onCancel={cancelClone}
+                                                   visible={cloneDialog}/>
+                           </>
+                       }/>
+    );
+})
+
+export default ProjectList;
+
+

package/light-chaser-app/src/pages/home/project-management/ProjectManagement.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export default function ProjectManagement() {
+    return (
+        <div>
+            用户管理
+        </div>
+    );
+}

package/light-chaser-app/src/pages/home/project-setting/ProjectSetting.less

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+.project-setting {
+  width: 100%;
+  height: calc(100vh - 190px);
+  padding: 10px;
+
+  .project-setting-header {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .setting-title {
+      color: #fff;
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .project-setting-body {
+    padding: 10px;
+    height: calc(100vh - 250px);
+    width: 100%;
+
+    .home-page-container {
+      height: calc(100vh - 330px);
+    }
+  }
+}