light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/dynamic-script/DynamicScriptList.module.less

@@ -0,0 +1,305 @@
+/*
+ * 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.
+ */
+
+@background: #1E1E2F;
+@scriptContainer: #2C2C3E;
+
+@primary: #4FB8FF;
+@success: #3CED92;
+@warning: #FF6E6E;
+@secondary-text: #A0A0B2;
+@primary-text: #FFFFFF;
+
+.scriptGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.scriptCard {
+  background: @scriptContainer;
+  border: 1px solid #3A3A4E;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: @primary;
+    box-shadow: 0 4px 12px rgba(79, 184, 255, 0.2);
+  }
+
+  :global(.ant-card-body) {
+    padding: 16px;
+  }
+
+  :global(.ant-card-actions) {
+    background: darken(@scriptContainer, 5%);
+    border-top: 1px solid #3A3A4E;
+
+    > li {
+      margin: 12px 0;
+
+      a {
+        color: @primary;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: lighten(@primary, 10%);
+        }
+      }
+    }
+  }
+}
+
+.cardContent {
+  .scriptName {
+    font-size: 16px;
+    font-weight: 600;
+    color: @primary-text;
+    margin-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .scriptUrl {
+    font-size: 14px;
+    color: @secondary-text;
+    margin-bottom: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .scriptType {
+    .remoteType, .localType {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .remoteType {
+      background: fade(@primary, 20%);
+      color: @primary;
+    }
+
+    .localType {
+      background: fade(@success, 20%);
+      color: @success;
+    }
+  }
+}
+
+.paginationContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+.pagination {
+  :global(.ant-pagination-item) {
+    background: @scriptContainer;
+    border-color: #3A3A4E;
+
+    a {
+      color: @secondary-text;
+    }
+
+    &:hover {
+      border-color: @primary;
+
+      a {
+        color: @primary;
+      }
+    }
+
+    &-active {
+      background: @primary;
+      border-color: @primary;
+
+      a {
+        color: @background;
+      }
+    }
+  }
+
+  :global(.ant-pagination-prev),
+  :global(.ant-pagination-next) {
+    .ant-pagination-item-link {
+      background: @scriptContainer;
+      border-color: #3A3A4E;
+      color: @secondary-text;
+
+      &:hover {
+        border-color: @primary;
+        color: @primary;
+      }
+    }
+  }
+
+  :global(.ant-pagination-disabled) {
+    .ant-pagination-item-link {
+      opacity: 0.5;
+
+      &:hover {
+        border-color: #3A3A4E;
+        color: @secondary-text;
+      }
+    }
+  }
+
+  :global(.ant-pagination-total-text) {
+    color: @secondary-text;
+  }
+}
+
+.searchInput {
+  width: 350px;
+
+  :global(.ant-input) {
+    background: @scriptContainer;
+    border-color: #3A3A4E;
+    color: @primary-text;
+
+    &::placeholder {
+      color: @secondary-text;
+    }
+
+    &:hover, &:focus {
+      border-color: @primary;
+    }
+  }
+
+  :global(.ant-input-prefix) {
+    margin-right: 8px;
+  }
+}
+
+.createButton, .deleteButton {
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.createButton {
+  background: @primary;
+  border-color: @primary;
+
+  &:hover {
+    background: lighten(@primary, 10%);
+    border-color: lighten(@primary, 10%);
+  }
+}
+
+.deleteButton {
+  background: @warning;
+  border-color: @warning;
+
+  &:hover {
+    background: lighten(@warning, 10%);
+    border-color: lighten(@warning, 10%);
+  }
+}
+
+.dynamicScriptModal {
+  :global(.ant-modal-content) {
+    background: @scriptContainer;
+    border-radius: 8px;
+  }
+
+  :global(.ant-modal-header) {
+    background: transparent;
+    border-bottom: 1px solid #3A3A4E;
+
+    .ant-modal-title {
+      color: @primary-text;
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+
+  :global(.ant-modal-body) {
+    padding: 20px;
+  }
+
+  :global(.ant-modal-footer) {
+    border-top: 1px solid #3A3A4E;
+    padding: 16px 20px;
+
+    button {
+      border-radius: 4px;
+      font-weight: 500;
+    }
+  }
+}
+
+.scriptFormItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.itemLabel {
+  color: @primary-text;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.typeSelect {
+  width: 100%;
+
+  :global(.ant-select-selector) {
+    background: @background;
+    border-color: #3A3A4E;
+    color: @primary-text;
+
+    &:hover, &:focus {
+      border-color: @primary;
+    }
+  }
+
+  :global(.ant-select-arrow) {
+    color: @secondary-text;
+  }
+}
+
+.urlInput {
+  :global(.ant-input) {
+    background: @background;
+    border-color: #3A3A4E;
+    color: @primary-text;
+
+    &::placeholder {
+      color: @secondary-text;
+    }
+
+    &:hover, &:focus {
+      border-color: @primary;
+    }
+  }
+}
+
+.uploadDragger {
+  background: @background;
+  border: 1px dashed #3A3A4E;
+  border-radius: 4px;
+
+
+  :global(.ant-upload-drag-container) {
+    padding: 20px;
+  }
+}
+
+.uploadText {
+  color: @secondary-text;
+  margin-top: 8px;
+  margin-bottom: 0;
+}

package/light-chaser-app/src/pages/home/dynamic-script/DynamicScriptList.tsx

@@ -0,0 +1,248 @@
+/*
+ * 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, Input, Modal, Pagination, Select, Upload as AntdUpload} from "antd";
+import {globalModal} from "light-chaser-ui/lib/message/GlobalModal.tsx";
+import {observer} from "mobx-react";
+import {KeyboardEvent, useEffect} from "react";
+import {Delete, Search, Upload} from "@icon-park/react";
+import scriptManagementStore from "./DynamicScriptManagementStore.ts";
+import dynamicScriptManagementStore, {IDynamicScript} from "./DynamicScriptManagementStore.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import PageContainer from "../page-container/PageContainer.tsx";
+import styles from './DynamicScriptList.module.less'; // 引入CSS模块
+
+const {Dragger} = AntdUpload;
+
+const DynamicScriptList = observer((props: { projectId?: string, title?: string }) => {
+    const {projectId, title} = props;
+    const {setModalVisible, setDynamicScript, modalVisible, dynamicScript, dynamicScriptPage, init, destroy, fileList} = scriptManagementStore;
+    const {current, records, size, total} = dynamicScriptPage;
+
+    const doSearch = (value?: string) => {
+        scriptManagementStore.searchValue = value ?? '';
+        scriptManagementStore.getDynamicScriptPageList();
+    }
+
+    const onClose = () => {
+        scriptManagementStore.setModalVisible(false);
+        dynamicScriptManagementStore.fileList = [];
+        setDynamicScript({scriptFile: undefined})
+    }
+
+    useEffect(() => {
+        init(projectId);
+        return () => destroy()
+    }, []);
+
+    return (
+        <PageContainer
+            title={title ?? ''}
+            tools={[
+                <Input
+                    placeholder={'搜索动态脚本'}
+                    size={"middle"}
+                    prefix={<Search color={'#A0A0B2'} size={12}/>}
+                    onPressEnter={(event: KeyboardEvent) => doSearch((event.target as HTMLInputElement).value)}
+                    className={styles.searchInput}
+                />,
+                <Button
+                    size={'middle'}
+                    type={"primary"}
+                    onClick={() => setModalVisible(true)}
+                    className={styles.createButton}
+                >
+                    <Upload style={{
+                        position: 'relative',
+                        top: 2,
+                        marginRight: 3
+                    }}/>
+                    {'创建'}
+                </Button>,
+                <Button
+                    size={'middle'}
+                    danger={true}
+                    type={"primary"}
+                    onClick={() => {
+                        const {selected} = dynamicScriptManagementStore;
+                        if (selected.length === 0) {
+                            globalMessage?.messageApi?.warning('未选择脚本');
+                            return;
+                        }
+                        globalModal.modalApi?.confirm({
+                            title: '删除确认',
+                            content: '确定删除选中的脚本吗？删除后无法恢复，请谨慎操作！',
+                            onOk: () => scriptManagementStore.doBatchDeleteDynamicScript(selected),
+                            okText: '确定',
+                            cancelText: '取消',
+                        });
+                    }}
+                    className={styles.deleteButton}
+                >
+                    <Delete style={{position: 'relative', top: 1}} size={12}/>
+                    {'删除'}
+                </Button>
+            ]}
+            content={
+                <>
+                    <div className={styles.scriptGrid}>
+                        {records.map((record: IDynamicScript) => (
+                            <Card
+                                key={record.id}
+                                className={styles.scriptCard}
+                                actions={[
+                                    <a key="edit" onClick={() => {
+                                        setDynamicScript(record);
+                                        globalModal.modalApi?.confirm({
+                                            title: '修改脚本名称',
+                                            content: <div style={{padding: '10px 0px'}}>
+                                                <Input
+                                                    placeholder={'请输入脚本名称'}
+                                                    defaultValue={record.name}
+                                                    onChange={(event) => {
+                                                        setDynamicScript({id: record.id, name: (event.target as any).value})
+                                                    }}
+                                                />
+                                            </div>,
+                                            okText: '确定',
+                                            cancelText: '取消',
+                                            onOk: () => scriptManagementStore.updateDynamicScript()
+                                        });
+                                    }}>
+                                        编辑
+                                    </a>,
+                                    <a key="replace" onClick={() => {
+                                        scriptManagementStore.setModalVisible(true);
+                                        setDynamicScript({id: record.id, type: record.type})
+                                    }}>
+                                        替换
+                                    </a>,
+                                    <a key="delete" onClick={() => {
+                                        globalModal.modalApi?.confirm({
+                                            title: '删除确认',
+                                            content: '确定删除选中的脚本吗？删除后无法恢复，请谨慎操作！',
+                                            onOk: () => scriptManagementStore.doBatchDeleteDynamicScript([record.id!]),
+                                            okText: '确定',
+                                            cancelText: '取消',
+                                        });
+                                    }}>
+                                        删除
+                                    </a>
+                                ]}
+                            >
+                                <div className={styles.cardContent}>
+                                    <div className={styles.scriptName}>{record.name}</div>
+                                    <div className={styles.scriptUrl}>{record.url}</div>
+                                    <div className={styles.scriptType}>
+                    <span className={record.type === 'REMOTE' ? styles.remoteType : styles.localType}>
+                      {record.type === 'REMOTE' ? '在线脚本' : '本地脚本'}
+                    </span>
+                                    </div>
+                                </div>
+                            </Card>
+                        ))}
+                    </div>
+
+                    <div className={styles.paginationContainer}>
+                        <Pagination
+                            current={current}
+                            pageSize={size}
+                            total={total}
+                            onChange={(page) => scriptManagementStore.changeCurrentPage(page)}
+                            showSizeChanger={false}
+                            showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`}
+                            className={styles.pagination}
+                        />
+                    </div>
+
+                    <Modal
+                        open={modalVisible}
+                        title={dynamicScript.id ? '替换动态脚本' : '添加动态脚本'}
+                        onCancel={onClose}
+                        className={styles.dynamicScriptModal}
+                        footer={[
+                            <Button
+                                key={'ok'}
+                                type={"primary"}
+                                onClick={() => {
+                                    scriptManagementStore.saveOrUpdateDynamicScript().then(() => dynamicScriptManagementStore.selected = [])
+                                }}
+                            >
+                                {dynamicScript.id ? '替换' : '添加'}
+                            </Button>,
+                            <Button key={'cancel'} onClick={onClose}>{'取消'}</Button>
+                        ]}
+                    >
+                        <div className={styles.scriptFormItem}>
+                            <div className={styles.itemLabel}>脚本类型：</div>
+                            <Select
+                                disabled={!!dynamicScript.id}
+                                options={[
+                                    {label: '在线脚本', value: 'REMOTE'},
+                                    {label: '本地脚本', value: 'LOCAL'}
+                                ]}
+                                value={dynamicScript.type}
+                                onChange={(v) => {
+                                    const {setDynamicScript, dynamicScript} = dynamicScriptManagementStore
+                                    setDynamicScript({...dynamicScript, type: v})
+                                }}
+                                className={styles.typeSelect}
+                            />
+                        </div>
+                        {
+                            dynamicScript.type === 'REMOTE' ? (
+                                <Input
+                                    placeholder={'请输入脚本链接或CDN地址'}
+                                    value={dynamicScriptManagementStore.dynamicScript.url}
+                                    onChange={(event) => {
+                                        const {setDynamicScript, dynamicScript} = dynamicScriptManagementStore
+                                        const scriptName = (event.target as any).value.split('/').pop();
+                                        setDynamicScript({
+                                            ...dynamicScript,
+                                            url: (event.target as any).value,
+                                            name: scriptName
+                                        })
+                                    }}
+                                    className={styles.urlInput}
+                                />
+                            ) : (
+                                <Dragger
+                                    multiple={false}
+                                    maxCount={1}
+                                    fileList={fileList}
+                                    beforeUpload={(file: File) => {
+                                        if (!file.name.endsWith('.js') || file.type !== 'text/javascript') {
+                                            globalMessage.messageApi?.error('请上传js文件');
+                                            return false;
+                                        } else {
+                                            setDynamicScript({scriptFile: file})
+                                            dynamicScriptManagementStore.fileList = [{
+                                                name: file.name,
+                                                uid: '0'
+                                            }]
+                                            return false;
+                                        }
+                                    }}
+                                    className={styles.uploadDragger}
+                                >
+                                    <Upload fill={'#717171'} size={20}/>
+                                    <p className={styles.uploadText}>{'点击或拖拽文件上传'}</p>
+                                </Dragger>
+                            )
+                        }
+                    </Modal>
+                </>
+            }
+        />
+    );
+})
+
+export default DynamicScriptList

package/light-chaser-app/src/pages/home/dynamic-script/DynamicScriptManagement.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 {observer} from "mobx-react";
+import DynamicScriptList from "./DynamicScriptList.tsx";
+
+const DynamicScriptManagement = observer(() => {
+    return <DynamicScriptList title={'动态脚本管理'}/>
+})
+
+export default DynamicScriptManagement