From 7a56c0c9a115132bcb9bb8592377bc469a079b83 Mon Sep 17 00:00:00 2001 From: chenghh-9609 <1159096025@qq.com> Date: Fri, 24 Oct 2025 16:26:39 +0800 Subject: [PATCH 1/4] feat: Update site name to DataMate and refine text for AI data processing --- frontend/index.html | 2 +- frontend/src/pages/DataManagement/Home/DataManagement.tsx | 4 ++-- frontend/src/pages/Home/Home.tsx | 3 +-- frontend/src/pages/SettingsPage/components/SystemConfig.tsx | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 9370cdee4..278d49b30 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - ML Dataset Tool + DataMate
diff --git a/frontend/src/pages/DataManagement/Home/DataManagement.tsx b/frontend/src/pages/DataManagement/Home/DataManagement.tsx index 7b88580a6..f94b3b5a7 100644 --- a/frontend/src/pages/DataManagement/Home/DataManagement.tsx +++ b/frontend/src/pages/DataManagement/Home/DataManagement.tsx @@ -51,11 +51,11 @@ export default function DatasetManagementPage() { }, { title: "文件总数", - value: data?.totalFiles || "0 MB", + value: data?.totalFiles || 0, }, { title: "总大小", - value: formatBytes(data?.totalSize) || 0, + value: formatBytes(data?.totalSize) || '0 B', }, ], count: [ diff --git a/frontend/src/pages/Home/Home.tsx b/frontend/src/pages/Home/Home.tsx index 085876632..ee15b52cb 100644 --- a/frontend/src/pages/Home/Home.tsx +++ b/frontend/src/pages/Home/Home.tsx @@ -29,8 +29,7 @@ export default function WelcomePage() { AI数据集

- 从数据管理到知识生成，一站式解决机器学习数据准备的所有需求。 - 支持对话式操作、智能编排、数据合成、智能标注、全面评估和RAG知识库构建。 + 从数据管理到知识生成，一站式解决企业AI数据处理的场景问题。

Date: Tue, 28 Oct 2025 15:57:37 +0800 Subject: [PATCH 2/4] feat: Refactor settings page and implement model access functionality - Created a new ModelAccess component for managing model configurations. - Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig. - Added SystemConfig component for managing system settings. - Implemented WebhookConfig component for managing webhook configurations. - Updated API functions for model management in settings.apis.ts. - Adjusted routing to point to the new SettingsPage component. --- frontend/src/mock/mock-apis.cjs | 12 +- .../src/mock/mock-seed/data-management.cjs | 6 +- frontend/src/mock/mock-seed/settings.cjs | 177 +++++++++ .../src/pages/SettingsPage/ModelAccess.tsx | 375 ++++++++++++++++++ frontend/src/pages/SettingsPage/Settings.tsx | 66 --- .../src/pages/SettingsPage/SettingsPage.tsx | 60 +++ .../{components => }/SystemConfig.tsx | 0 .../{components => }/WebhookConfig.tsx | 0 .../components/EnvironmentAccess.tsx | 365 ----------------- .../src/pages/SettingsPage/settings.apis.ts | 30 ++ frontend/src/routes/routes.ts | 4 +- 11 files changed, 657 insertions(+), 438 deletions(-) create mode 100644 frontend/src/mock/mock-seed/settings.cjs create mode 100644 frontend/src/pages/SettingsPage/ModelAccess.tsx delete mode 100644 frontend/src/pages/SettingsPage/Settings.tsx create mode 100644 frontend/src/pages/SettingsPage/SettingsPage.tsx rename frontend/src/pages/SettingsPage/{components => }/SystemConfig.tsx (100%) rename frontend/src/pages/SettingsPage/{components => }/WebhookConfig.tsx (100%) delete mode 100644 frontend/src/pages/SettingsPage/components/EnvironmentAccess.tsx create mode 100644 frontend/src/pages/SettingsPage/settings.apis.ts diff --git a/frontend/src/mock/mock-apis.cjs b/frontend/src/mock/mock-apis.cjs index ae601e6e9..dba93f159 100644 --- a/frontend/src/mock/mock-apis.cjs +++ b/frontend/src/mock/mock-apis.cjs @@ -2,10 +2,11 @@ const { addMockPrefix } = require("./mock-core/util.cjs"); const MockAPI = { // 数据归集接口 - queryTasksUsingPost: "/data-collection/tasks", // 获取数据源任务列表 + queryTasksUsingGet: "/data-collection/tasks", // 获取数据源任务列表 createTaskUsingPost: "/data-collection/tasks/create", // 创建数据源任务 queryTaskByIdUsingGet: "/data-collection/tasks/:id", // 根据ID获取数据源任务详情 updateTaskByIdUsingPut: "/data-collection/tasks/:id", // 更新数据源任务 + queryDataXTemplatesUsingGet: "/data-collection/templates", // 获取DataX数据源模板列表 deleteTaskByIdUsingDelete: "/data-collection/tasks/:id", // 删除数据源任务 executeTaskByIdUsingPost: "/data-collection/tasks/:id/execute", // 执行数据源任务 stopTaskByIdUsingPost: "/data-collection/tasks/:id/stop", // 停止数据源任务 @@ -91,7 +92,6 @@ const MockAPI = { deleteInstructionTemplateByIdUsingDelete: "/synthesis/templates/:templateId", // 删除指令模板 instructionTuningUsingPost: "/synthesis/instruction-tuning", // 指令微调 cotDistillationUsingPost: "/synthesis/cot-distillation", // Cot蒸馏 - queryOperatorsUsingPost: "/synthesis/operators", // 获取操作列表 // 数据评测接口 queryEvaluationTasksUsingPost: "/evaluation/tasks", // 获取评测任务列表 @@ -144,6 +144,14 @@ const MockAPI = { deleteOperatorByIdUsingDelete: "/operators/:operatorId", // 删除算子 publishOperatorUsingPost: "/operators/:operatorId/publish", // 发布算子 unpublishOperatorUsingPost: "/operators/:operatorId/unpublish", // 下架算子 + + // 设置接口 + queryModelsUsingGet: "/models/list", // 获取模型列表 + queryProvidersUsingGet: "/models/providers", // 获取模型提供商列表 + createModelUsingPost: "/models/create", // 创建模型 + updateModelUsingPut: "/models/:id", // 更新模型 + deleteModelUsingDelete: "/models/:id", // 删除模型 + }; module.exports = addMockPrefix("/api", MockAPI); diff --git a/frontend/src/mock/mock-seed/data-management.cjs b/frontend/src/mock/mock-seed/data-management.cjs index 098439b69..4a66765ea 100644 --- a/frontend/src/mock/mock-seed/data-management.cjs +++ b/frontend/src/mock/mock-seed/data-management.cjs @@ -16,8 +16,8 @@ function datasetItem() { return { id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), name: Mock.Random.ctitle(5, 20), - type: Mock.Random.pick(["TEXT", "IMAGE", "AUDIO", "VIDEO"]), - status: Mock.Random.pick(["ACTIVE", "INACTIVE", "PROCESSING"]), + datasetType: Mock.Random.pick(["TEXT", "IMAGE", "AUDIO", "VIDEO"]), + status: Mock.Random.pick(["DRAFT","ACTIVE", "INACTIVE", "PROCESSING"]), tags: Mock.Random.shuffle(tagList).slice(0, Mock.Random.integer(1, 3)), totalSize: Mock.Random.integer(1024, 1024 * 1024 * 1024), // in bytes description: Mock.Random.cparagraph(1, 3), @@ -164,7 +164,7 @@ module.exports = function (router) { console.log("filter type:", type); filteredDatasets = filteredDatasets.filter( - (dataset) => dataset.type === type + (dataset) => dataset.datasetType === type ); } if (status) { diff --git a/frontend/src/mock/mock-seed/settings.cjs b/frontend/src/mock/mock-seed/settings.cjs new file mode 100644 index 000000000..886a0b345 --- /dev/null +++ b/frontend/src/mock/mock-seed/settings.cjs @@ -0,0 +1,177 @@ +const Mock = require("mockjs"); +const API = require("../mock-apis.cjs"); + +// 算子标签数据 +function ModelItem() { + return { + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + modelName: Mock.Random.pick([ + "数据清洗", + "特征选择", + "分类算法", + "聚类算法", + "回归分析", + "深度神经网络", + "卷积神经网络", + "循环神经网络", + "注意力机制", + "文本分析", + "图像处理", + "语音识别", + "推荐算法", + "异常检测", + "优化算法", + "集成学习", + "迁移学习", + "强化学习", + "联邦学习", + ]), + provider: Mock.Random.pick([ + "OpenAI", + "Anthropic", + "Cohere", + "AI21 Labs", + "Hugging Face", + "Google Cloud AI", + "Microsoft Azure AI", + "Amazon Web Services AI", + "IBM Watson", + "Alibaba Cloud AI", + ]), + type: Mock.Random.pick(["CHAT", "EMBEDDING"]), + usageCount: Mock.Random.integer(1, 500), + createdAt: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + updatedAt: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + }; +} + +const modelList = new Array(50).fill(null).map(ModelItem); + +function ProviderItem(provider) { + return { + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + provider, + baseUrl: Mock.Random.url("https") + "/v1/models", + createdAt: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + }; +} + +const ProviderList = [ + "OpenAI", + "Anthropic", + "Cohere", + "AI21 Labs", + "Hugging Face", + "Google Cloud AI", + "Microsoft Azure AI", + "Amazon Web Services AI", + "IBM Watson", + "Alibaba Cloud AI", +].map(ProviderItem); + +module.exports = function (router) { + // 获取模型列表 + router.get(API.queryModelsUsingGet, (req, res) => { + const { + page = 0, + size = 20, + keyword = "", + provider = "", + type = "", + } = req.query; + + let filteredModels = modelList; + + if (keyword) { + filteredModels = modelList.filter((model) => + model.modelName.toLowerCase().includes(keyword.toLowerCase()) + ); + } + if (provider && provider !== "all") { + filteredModels = filteredModels.filter( + (model) => model.provider === provider + ); + } + if (type && type !== "all") { + filteredModels = filteredModels.filter((model) => model.type === type); + } + + const startIndex = page * size; + const endIndex = startIndex + parseInt(size); + const pageData = filteredModels.slice(startIndex, endIndex); + + res.status(201).send({ + code: "0", + msg: "Success", + data: { + content: pageData, + totalElements: filteredModels.length, + totalPages: Math.ceil(filteredModels.length / size), + size: parseInt(size), + number: parseInt(page), + }, + }); + }); + + // 获取模型提供商列表 + router.get(API.queryProvidersUsingGet, (req, res) => { + res.status(201).send({ + code: "0", + msg: "success", + data: ProviderList, + }); + }); + + // 创建模型 + router.post(API.createModelUsingPost, (req, res) => { + const { ...modelData } = req.body; + const newModel = { + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + ...modelData, + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }; + modelList.unshift(newModel); + res.status(201).send({ + code: "0", + msg: "success", + data: newModel, + }); + }); + + // 删除模型 + router.delete(API.deleteModelUsingDelete, (req, res) => { + const { id } = req.params; + + const index = modelList.findIndex((model) => model.id === id); + if (index !== -1) { + modelList.splice(index, 1); + } + + res.status(204).send({ + code: "0", + msg: "success", + data: null, + }); + }); + + // 更新模型 + router.put(API.updateModelUsingPut, (req, res) => { + const { id, ...update } = req.params; + + const index = modelList.findIndex((model) => model.id === id); + if (index !== -1) { + modelList[index] = { + ...modelList[index], + ...update, + updatedAt: new Date().toISOString(), + }; + } + + res.status(201).send({ + code: "0", + msg: "success", + data: null, + }); + }); +}; diff --git a/frontend/src/pages/SettingsPage/ModelAccess.tsx b/frontend/src/pages/SettingsPage/ModelAccess.tsx new file mode 100644 index 000000000..932a48b22 --- /dev/null +++ b/frontend/src/pages/SettingsPage/ModelAccess.tsx @@ -0,0 +1,375 @@ +import { + Card, + Button, + Form, + Input, + Modal, + Select, + Table, + Tooltip, + Popconfirm, + message, +} from "antd"; +import { + EditOutlined, + DeleteOutlined, + ReloadOutlined, + PlusOutlined, +} from "@ant-design/icons"; +import { useEffect, useState } from "react"; +import { SearchControls } from "@/components/SearchControls"; +import useFetchData from "@/hooks/useFetchData"; +import { + createModelUsingPost, + deleteModelByIdUsingDelete, + queryModelListUsingGet, + queryModelProvidersUsingGet, + updateModelByIdUsingPut, +} from "./settings.apis"; + +interface ModelI { + id: string; + name: string; + provider: string; + model: string; + apiKey: string; + isEnabled: boolean; + createdAt: string; + updatedAt: string; + createdBy: string; + updatedBy: string; +} + +interface ProviderI { + id: string; + modelName: string; + value: string; + label: string; + baseUrl: string; + provider: string; + apiKey: string; + type: string; + isEnabled: boolean; +} + +export default function EnvironmentAccess() { + const [form] = Form.useForm(); + const [showModelDialog, setShowModelDialog] = useState(false); + const [isEditMode, setIsEditMode] = useState(false); + const [newModel, setNewModel] = useState({ + name: "", + provider: "openai", + model: "", + apiKey: "", + endpoint: "", + }); + const [typeOptions] = useState([ + { value: "CHAT", label: "CHAT" }, + { value: "EMBEDDING", label: "EMBEDDING" }, + ]); + + const { + loading, + tableData, + pagination, + searchParams, + setSearchParams, + fetchData, + handleFiltersChange, + } = useFetchData(queryModelListUsingGet); + + const handleAddModel = async () => { + const formValues = await form.validateFields(); + const fn = isEditMode + ? () => updateModelByIdUsingPut(newModel.id, formValues) + : () => createModelUsingPost(formValues); + await fn(); + setShowModelDialog(false); + fetchData(); + message.success("模型添加成功"); + }; + const [providerOptions, setProviderOptions] = useState([]); + + const fetchProviderOptions = async () => { + const { data } = await queryModelProvidersUsingGet(); + setProviderOptions( + data.map((provider: ProviderI) => ({ + ...provider, + value: provider.provider, + label: provider.provider, + })) + ); + }; + + const generateApiKey = () => { + const chars = + "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + let result = "sk-"; + for (let i = 0; i < 48; i++) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; + }; + + const handleDeleteModel = async (modelId: string) => { + await deleteModelByIdUsingDelete(modelId); + fetchData(); + }; + + useEffect(() => { + fetchProviderOptions(); + }, []); + + const columns = [ + { + title: "模型名称", + dataIndex: "modelName", + key: "modelName", + fixed: "left", + width: 200, + ellipsis: true, + }, + { + title: "创建时间", + dataIndex: "createdAt", + key: "createdAt", + ellipsis: true, + }, + { + title: "模型提供商", + dataIndex: "provider", + key: "provider", + ellipsis: true, + }, + { + title: "模型类型", + dataIndex: "type", + key: "type", + ellipsis: true, + }, + { + title: "更新时间", + dataIndex: "updatedAt", + key: "updatedAt", + ellipsis: true, + }, + { + title: "操作", + key: "action", + fixed: "right" as const, + ellipsis: true, + render: (_: any, record: ModelI) => { + return [ + { + key: "edit", + label: "编辑", + icon: , + onClick: () => { + setIsEditMode(true); + setNewModel(record); + form.setFieldsValue(record); + setShowModelDialog(true); + }, + }, + { + key: "delete", + label: "删除", + danger: true, + icon: , + confirm: { + title: "确定要删除该任务吗？此操作不可撤销。", + okText: "删除", + cancelText: "取消", + okType: "danger", + }, + onClick: () => handleDeleteModel(record.id), + }, + ].map((op) => { + const button = ( + + +
+ + setSearchParams((prev) => ({ + ...prev, + keyword: newSearchTerm, + current: 1, + })) + } + searchPlaceholder="搜索模型描述..." + filters={[ + { + key: "provider", + label: "模型提供商", + options: [{ value: "all", label: "全部" }, ...providerOptions], + }, + { + key: "type", + label: "模型类型", + options: [{ value: "all", label: "全部" }, ...typeOptions], + }, + ]} + onFiltersChange={handleFiltersChange} + showViewToggle={false} + onReload={fetchData} + onClearFilters={() => + setSearchParams((prev) => ({ + ...prev, + filters: {}, + })) + } + className="mb-4" + /> + + + + setShowModelDialog(false)} + title={isEditMode ? "编辑模型" : "添加模型"} + footer={[ + , + , + ]} + > +
{ + setNewModel({ ...newModel, ...changedValues }); + }} + layout="vertical" + > + + + + + + + + + + + { + form.setFieldsValue({ apiKey: generateApiKey() }); + setNewModel({ ...newModel, apiKey: generateApiKey() }); + }} + /> + } + /> + + + + + + + + ); +} diff --git a/frontend/src/pages/SettingsPage/Settings.tsx b/frontend/src/pages/SettingsPage/Settings.tsx deleted file mode 100644 index f1860188d..000000000 --- a/frontend/src/pages/SettingsPage/Settings.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { useState } from "react"; -import { Tabs } from "antd"; -import { - SettingOutlined, - DatabaseOutlined, - ApiOutlined, -} from "@ant-design/icons"; -import DevelopmentInProgress from "@/components/DevelopmentInProgress"; -import WebhookConfig from "./components/WebhookConfig"; -import EnvironmentAccess from "./components/EnvironmentAccess"; -import SystemConfig from "./components/SystemConfig"; - -export default function SettingsPage() { - return ; - const [activeTab, setActiveTab] = useState("system"); - - return ( -
- {/* Header */} -
-
-

系统设置

-
-
- - {/* Settings Tabs */} - - - 系统设置 - - ), - children: , - }, - { - key: "environment", - label: ( - - - 环境接入 - - ), - children: , - }, - { - key: "webhook", - label: ( - - - Webhook - - ), - children: , - }, - ]} - /> -
- ); -} diff --git a/frontend/src/pages/SettingsPage/SettingsPage.tsx b/frontend/src/pages/SettingsPage/SettingsPage.tsx new file mode 100644 index 000000000..1424d0fdf --- /dev/null +++ b/frontend/src/pages/SettingsPage/SettingsPage.tsx @@ -0,0 +1,60 @@ +import { useState } from "react"; +import { Tabs } from "antd"; +import { SettingOutlined, ApiOutlined } from "@ant-design/icons"; +import WebhookConfig from "./WebhookConfig"; +import ModelAccess from "./ModelAccess"; +import SystemConfig from "./SystemConfig"; +import { Component } from "lucide-react"; + +export default function SettingsPage() { + const [activeTab, setActiveTab] = useState("modelAccess"); + + return ( +
+ {/* Header */} +
+
+

系统设置

+
+
+ + {/* Settings Tabs */} + + // + // 系统设置 + // + // ), + // children: , + // }, + { + key: "modelAccess", + label: ( + + + 模型接入 + + ), + children: , + }, + // { + // key: "webhook", + // label: ( + // + // + // Webhook + // + // ), + // children: , + // }, + ]} + /> +
+ ); +} diff --git a/frontend/src/pages/SettingsPage/components/SystemConfig.tsx b/frontend/src/pages/SettingsPage/SystemConfig.tsx similarity index 100% rename from frontend/src/pages/SettingsPage/components/SystemConfig.tsx rename to frontend/src/pages/SettingsPage/SystemConfig.tsx diff --git a/frontend/src/pages/SettingsPage/components/WebhookConfig.tsx b/frontend/src/pages/SettingsPage/WebhookConfig.tsx similarity index 100% rename from frontend/src/pages/SettingsPage/components/WebhookConfig.tsx rename to frontend/src/pages/SettingsPage/WebhookConfig.tsx diff --git a/frontend/src/pages/SettingsPage/components/EnvironmentAccess.tsx b/frontend/src/pages/SettingsPage/components/EnvironmentAccess.tsx deleted file mode 100644 index f02a5bbb3..000000000 --- a/frontend/src/pages/SettingsPage/components/EnvironmentAccess.tsx +++ /dev/null @@ -1,365 +0,0 @@ -import { Card, Button, Form, Input, Modal, Select, Badge } from "antd"; -import { - EditOutlined, - DeleteOutlined, - ReloadOutlined, - ExperimentOutlined, - EyeOutlined, - EyeInvisibleOutlined, - CopyOutlined, -} from "@ant-design/icons"; -import { useState } from "react"; - -interface VectorDBConfig { - id: string; - name: string; - type: "pinecone" | "weaviate" | "qdrant" | "milvus" | "chroma"; - url: string; - apiKey: string; - dimension: number; - metric: string; - status: "connected" | "disconnected" | "error"; -} - -interface ModelConfig { - id: string; - name: string; - provider: "openai" | "anthropic" | "google" | "azure" | "local"; - model: string; - apiKey: string; - endpoint?: string; - status: "active" | "inactive"; - usage: number; -} - -export default function EnvironmentAccess() { - const [form] = Form.useForm(); - const [showApiKey, setShowApiKey] = useState<{ [key: string]: boolean }>({}); - const [showVectorDBDialog, setShowVectorDBDialog] = useState(false); - const [showModelDialog, setShowModelDialog] = useState(false); - - const [vectorDBs, setVectorDBs] = useState([ - { - id: "1", - name: "Pinecone Production", - type: "pinecone", - url: "https://your-index.svc.us-east1-gcp.pinecone.io", - apiKey: "pc-****-****-****", - dimension: 1536, - metric: "cosine", - status: "connected", - }, - { - id: "2", - name: "Weaviate Local", - type: "weaviate", - url: "http://localhost:8080", - apiKey: "", - dimension: 768, - metric: "cosine", - status: "disconnected", - }, - ]); - const [providerOptions] = useState([ - { value: "openai", label: "OpenAI" }, - { value: "anthropic", label: "Anthropic" }, - { value: "google", label: "Google" }, - { value: "azure", label: "Azure" }, - { value: "local", label: "本地部署" }, - ]); - const [models, setModels] = useState([ - { - id: "1", - name: "GPT-4 Turbo", - provider: "openai", - model: "gpt-4-turbo-preview", - apiKey: "sk-****-****-****", - status: "active", - usage: 85, - }, - { - id: "2", - name: "Claude 3 Sonnet", - provider: "anthropic", - model: "claude-3-sonnet-20240229", - apiKey: "sk-ant-****-****", - status: "active", - usage: 42, - }, - ]); - - const [dbOptions] = useState([ - { value: "pinecone", label: "Pinecone" }, - { value: "weaviate", label: "Weaviate" }, - { value: "qdrant", label: "Qdrant" }, - { value: "milvus", label: "Milvus" }, - { value: "chroma", label: "Chroma" }, - ]); - const [metricOptions] = useState([ - { value: "cosine", label: "Cosine" }, - { value: "euclidean", label: "Euclidean" }, - { value: "dotproduct", label: "Dot Product" }, - ]); - - const [newVectorDB, setNewVectorDB] = useState({ - name: "", - type: "pinecone", - url: "", - apiKey: "", - dimension: 1536, - metric: "cosine", - }); - const [newModel, setNewModel] = useState({ - name: "", - provider: "openai", - model: "", - apiKey: "", - endpoint: "", - }); - - const handleAddVectorDB = () => { - setNewVectorDB({ - name: "", - type: "pinecone", - url: "", - apiKey: "", - dimension: 1536, - metric: "cosine", - }); - setShowVectorDBDialog(true); - }; - - const handleAddModel = () => { - setNewModel({ - name: "", - provider: "openai", - model: "", - apiKey: generateApiKey(), - endpoint: "", - }); - setShowModelDialog(true); - }; - const toggleApiKeyVisibility = (id: string) => { - setShowApiKey((prev) => ({ ...prev, [id]: !prev[id] })); - }; - - const generateApiKey = () => { - const chars = - "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - let result = "sk-"; - for (let i = 0; i < 48; i++) { - result += chars.charAt(Math.floor(Math.random() * chars.length)); - } - return result; - }; - - return ( -
- -
-

向量数据库

- -
-
- {vectorDBs.map((db) => ( - -
-
- {db.name} - -
-
-
-
-
-

类型: {db.type}

-

地址: {db.url}

-

- 维度: {db.dimension} | 距离度量: {db.metric} -

-
- - ))} -
- - -
-

模型接入

- -
-
- {models.map((model) => ( - -
-
- {model.name} - -
-
-
-
-
-

提供商: {model.provider}

-

模型: {model.model}

-
- API Key: - - {showApiKey[model.id] ? model.apiKey : "sk-****-****-****"} - -
-
- 使用率: -
-
-
- {model.usage}% -
-
- - ))} -
- - {/* VectorDB Modal */} - setShowVectorDBDialog(false)} - title="添加向量数据库" - footer={[ - , - , - ]} - > -
- - - - - - - - - - - - - - - - - - - - - - {/* Model Modal */} - setShowModelDialog(false)} - title="添加AI模型" - footer={[ - , - , - ]} - > -
{ - setNewModel({ ...newModel, ...changedValues }); - }} - layout="vertical" - > - - - - - - - - - - - { - form.setFieldsValue({ apiKey: generateApiKey() }); - setNewModel({ ...newModel, apiKey: generateApiKey() }); - }} - /> - } - /> - - {newModel.provider === "local" && ( - - - - )} - - -
- ); -} diff --git a/frontend/src/pages/SettingsPage/settings.apis.ts b/frontend/src/pages/SettingsPage/settings.apis.ts new file mode 100644 index 000000000..3efbc2d15 --- /dev/null +++ b/frontend/src/pages/SettingsPage/settings.apis.ts @@ -0,0 +1,30 @@ +import { get, post, put, del } from "@/utils/request"; + +// 模型相关接口 +export function queryModelProvidersUsingGet(params?: any) { + return get("/api/models/providers", params); +} + +export function queryModelListUsingGet(data: any) { + return get("/api/models/list", data); +} + +export function queryModelDetailByIdUsingGet(id: string | number) { + return get(`/api/models/${id}`); +} + +export function updateModelByIdUsingPut( + id: string | number, + data: any +) { + return put(`/api/models/${id}`, data); +} + +export function createModelUsingPost(data: any) { + return post("/api/models/create", data); +} + +export function deleteModelByIdUsingDelete(id: string | number) { + return del(`/api/models/${id}`); +} + diff --git a/frontend/src/routes/routes.ts b/frontend/src/routes/routes.ts index 763abf6ce..9e1adb922 100644 --- a/frontend/src/routes/routes.ts +++ b/frontend/src/routes/routes.ts @@ -2,7 +2,7 @@ import { createBrowserRouter } from "react-router"; import Home from "../pages/Home/Home"; import MainLayout from "../pages/Layout/MainLayout"; -import DataCollection from "@/pages/DataCollection/Home/DataCollection"; +import DataCollection from "@/pages/DataCollection/Home/DataCollectionPage"; import CollectionTaskCreate from "@/pages/DataCollection/Create/CreateTask"; import DatasetManagement from "@/pages/DataManagement/Home/DataManagement"; @@ -44,7 +44,7 @@ import CreateRatioTask from "@/pages/RatioTask/CreateRatioTask"; import OrchestrationPage from "@/pages/Orchestration/Orchestration"; import WorkflowEditor from "@/pages/Orchestration/WorkflowEditor"; import AgentPage from "@/pages/Agent/Agent"; -import SettingsPage from "@/pages/SettingsPage/Settings"; +import SettingsPage from "@/pages/SettingsPage/SettingsPage"; import { withErrorBoundary } from "@/components/ErrorBoundary"; const router = createBrowserRouter([ From 92d7189334c084e3f9f3cb8f0cdf0d8873571087 Mon Sep 17 00:00:00 2001 From: chenghh-9609 <1159096025@qq.com> Date: Tue, 28 Oct 2025 16:11:20 +0800 Subject: [PATCH 3/4] feat: Implement Data Collection Page with Task Management and Execution Log - Created DataCollectionPage component to manage data collection tasks. - Added TaskManagement and ExecutionLog components for task handling and logging. - Integrated task operations including start, stop, edit, and delete functionalities. - Implemented filtering and searching capabilities in task management. - Introduced SimpleCronScheduler for scheduling tasks with cron expressions. - Updated CreateTask component to utilize new scheduling and template features. - Enhanced BasicInformation component to conditionally render fields based on visibility settings. - Refactored ImportConfiguration component to remove NAS import section. --- .../src/components/AdvancedCronScheduler.tsx | 556 ++++++++++++++++++ frontend/src/components/CardView.tsx | 8 +- .../src/mock/mock-seed/data-collection.cjs | 97 +-- .../DataCollection/Create/CreateTask.tsx | 475 ++++++++------- .../Create/SimpleCronScheduler.tsx | 207 +++++++ ...aCollection.tsx => DataCollectionPage.tsx} | 8 +- .../Home/{components => }/ExecutionLog.tsx | 4 +- .../Home/{components => }/TaskManagement.tsx | 164 ++++-- .../pages/DataCollection/collection.const.ts | 14 +- .../Create/components/BasicInformation.tsx | 27 +- .../Detail/components/ImportConfiguration.tsx | 34 -- 11 files changed, 1178 insertions(+), 416 deletions(-) create mode 100644 frontend/src/components/AdvancedCronScheduler.tsx create mode 100644 frontend/src/pages/DataCollection/Create/SimpleCronScheduler.tsx rename frontend/src/pages/DataCollection/Home/{DataCollection.tsx => DataCollectionPage.tsx} (85%) rename frontend/src/pages/DataCollection/Home/{components => }/ExecutionLog.tsx (96%) rename frontend/src/pages/DataCollection/Home/{components => }/TaskManagement.tsx (52%) diff --git a/frontend/src/components/AdvancedCronScheduler.tsx b/frontend/src/components/AdvancedCronScheduler.tsx new file mode 100644 index 000000000..8c331d335 --- /dev/null +++ b/frontend/src/components/AdvancedCronScheduler.tsx @@ -0,0 +1,556 @@ +import React, { useState, useCallback, useEffect } from "react"; +import { + Card, + Select, + Input, + Space, + Typography, + Row, + Col, + Divider, + Button, + Tooltip, +} from "antd"; +import { InfoCircleOutlined } from "@ant-design/icons"; + +const { Title, Text } = Typography; +const { Option } = Select; + +export interface AdvancedCronConfig { + second: string; + minute: string; + hour: string; + day: string; + month: string; + weekday: string; + year?: string; + cronExpression: string; +} + +interface AdvancedCronSchedulerProps { + value?: AdvancedCronConfig; + onChange?: (config: AdvancedCronConfig) => void; + showYear?: boolean; // 是否显示年份字段 + className?: string; +} + +// Cron字段的选项配置 +const CRON_OPTIONS = { + second: { + label: "秒", + range: [0, 59], + examples: ["0", "*/5", "10,20,30", "0-30"], + description: "秒钟 (0-59)", + }, + minute: { + label: "分钟", + range: [0, 59], + examples: ["0", "*/15", "5,10,15", "0-30"], + description: "分钟 (0-59)", + }, + hour: { + label: "小时", + range: [0, 23], + examples: ["0", "*/2", "8,14,20", "9-17"], + description: "小时 (0-23)", + }, + day: { + label: "日", + range: [1, 31], + examples: ["*", "1", "1,15", "1-15", "*/2"], + description: "日期 (1-31)", + }, + month: { + label: "月", + range: [1, 12], + examples: ["*", "1", "1,6,12", "3-9", "*/3"], + description: "月份 (1-12)", + }, + year: { + label: "年", + range: [1970, 2099], + examples: ["*", "2024", "2024-2026", "*/2"], + description: "年份 (1970-2099)", + }, + weekday: { + label: "周", + range: [0, 7], // 0和7都表示周日 + examples: ["*", "1", "1-5", "1,3,5", "0,6"], + description: "星期 (0-7, 0和7都表示周日)", + weekNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], + }, +}; + +// 生成常用的cron表达式选项 +const generateCommonOptions = (field: keyof typeof CRON_OPTIONS) => { + const options = [ + { label: "* (任意)", value: "*" }, + { label: "? (不指定)", value: "?" }, // 仅用于日和周字段 + ]; + + const config = CRON_OPTIONS[field]; + const [start, end] = config.range; + + // 添加具体数值选项 + if (field === "weekday") { + const weekdayConfig = config as { weekNames?: string[] }; + weekdayConfig.weekNames?.forEach((name: string, index: number) => { + options.push({ label: `${index} (${name})`, value: index.toString() }); + }); + // 添加7作为周日的别名 + options.push({ label: "7 (周日)", value: "7" }); + } else { + // 添加部分具体数值 + const step = + field === "year" ? 5 : field === "day" || field === "month" ? 3 : 5; + for (let i = start; i <= end; i += step) { + if (i <= end) { + options.push({ label: i.toString(), value: i.toString() }); + } + } + } + + // 添加间隔选项 + if (field !== "year") { + options.push( + { label: "*/2 (每2个)", value: "*/2" }, + { label: "*/5 (每5个)", value: "*/5" }, + { label: "*/10 (每10个)", value: "*/10" } + ); + } + + // 添加范围选项 + if (field === "hour") { + options.push( + { label: "9-17 (工作时间)", value: "9-17" }, + { label: "0-6 (凌晨)", value: "0-6" } + ); + } else if (field === "weekday") { + options.push( + { label: "1-5 (工作日)", value: "1-5" }, + { label: "0,6 (周末)", value: "0,6" } + ); + } else if (field === "day") { + options.push( + { label: "1-15 (上半月)", value: "1-15" }, + { label: "16-31 (下半月)", value: "16-31" } + ); + } + + return options; +}; + +// 验证cron字段值 +const validateCronField = ( + value: string, + field: keyof typeof CRON_OPTIONS +): boolean => { + if (!value || value === "*" || value === "?") return true; + + const config = CRON_OPTIONS[field]; + const [min, max] = config.range; + + // 验证基本格式 + const patterns = [ + /^\d+$/, // 单个数字 + /^\d+-\d+$/, // 范围 + /^\*\/\d+$/, // 间隔 + /^(\d+,)*\d+$/, // 列表 + /^(\d+-\d+,)*(\d+-\d+|\d+)$/, // 复合表达式 + ]; + + if (!patterns.some((pattern) => pattern.test(value))) { + return false; + } + + // 验证数值范围 + const numbers = value.match(/\d+/g); + if (numbers) { + return numbers.every((num) => { + const n = parseInt(num); + return n >= min && n <= max; + }); + } + + return true; +}; + +// 生成cron表达式 +const generateCronExpression = ( + config: Omit +): string => { + const { second, minute, hour, day, month, weekday, year } = config; + + const parts = [second, minute, hour, day, month, weekday]; + if (year && year !== "*") { + parts.push(year); + } + + return parts.join(" "); +}; + +// 解析cron表达式为人类可读的描述 +const parseCronDescription = (cronExpression: string): string => { + const parts = cronExpression.split(" "); + if (parts.length < 6) return cronExpression; + + const [second, minute, hour, day, month, weekday, year] = parts; + + const descriptions = []; + + // 时间描述 + if (second === "0" && minute !== "*" && hour !== "*") { + descriptions.push(`${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`); + } else { + if (hour !== "*") descriptions.push(`${hour}时`); + if (minute !== "*") descriptions.push(`${minute}分`); + if (second !== "*" && second !== "0") descriptions.push(`${second}秒`); + } + + // 日期描述 + if (day !== "*" && day !== "?") { + descriptions.push(`${day}日`); + } + + // 月份描述 + if (month !== "*") { + descriptions.push(`${month}月`); + } + + // 星期描述 + if (weekday !== "*" && weekday !== "?") { + const weekNames = [ + "周日", + "周一", + "周二", + "周三", + "周四", + "周五", + "周六", + "周日", + ]; + if (weekday === "1-5") { + descriptions.push("工作日"); + } else if (weekday === "0,6") { + descriptions.push("周末"); + } else if (/^\d$/.test(weekday)) { + descriptions.push(weekNames[parseInt(weekday)]); + } else { + descriptions.push(`周${weekday}`); + } + } + + // 年份描述 + if (year && year !== "*") { + descriptions.push(`${year}年`); + } + + return descriptions.length > 0 ? descriptions.join(" ") : "每秒执行"; +}; + +const AdvancedCronScheduler: React.FC = ({ + value = { + second: "0", + minute: "0", + hour: "0", + day: "*", + month: "*", + weekday: "?", + year: "*", + cronExpression: "0 0 0 * * ?", + }, + onChange, + showYear = false, + className, +}) => { + const [config, setConfig] = useState(value); + const [customMode, setCustomMode] = useState(false); + + // 更新配置 + const updateConfig = useCallback( + (updates: Partial) => { + const newConfig = { ...config, ...updates }; + newConfig.cronExpression = generateCronExpression(newConfig); + setConfig(newConfig); + onChange?.(newConfig); + }, + [config, onChange] + ); + + // 同步外部值 + useEffect(() => { + setConfig(value); + }, [value]); + + // 处理字段变化 + const handleFieldChange = ( + field: keyof AdvancedCronConfig, + fieldValue: string + ) => { + if (field === "cronExpression") { + // 直接编辑cron表达式 + const parts = fieldValue.split(" "); + if (parts.length >= 6) { + const newConfig = { + second: parts[0] || "0", + minute: parts[1] || "0", + hour: parts[2] || "0", + day: parts[3] || "*", + month: parts[4] || "*", + weekday: parts[5] || "?", + year: parts[6] || "*", + cronExpression: fieldValue, + }; + setConfig(newConfig); + onChange?.(newConfig); + } + } else { + updateConfig({ [field]: fieldValue }); + } + }; + + // 快速设置预设 + const setPreset = (preset: Partial) => { + updateConfig(preset); + }; + + // 常用预设 + const commonPresets = [ + { + label: "每秒", + config: { + second: "*", + minute: "*", + hour: "*", + day: "*", + month: "*", + weekday: "?", + }, + }, + { + label: "每分钟", + config: { + second: "0", + minute: "*", + hour: "*", + day: "*", + month: "*", + weekday: "?", + }, + }, + { + label: "每小时", + config: { + second: "0", + minute: "0", + hour: "*", + day: "*", + month: "*", + weekday: "?", + }, + }, + { + label: "每天午夜", + config: { + second: "0", + minute: "0", + hour: "0", + day: "*", + month: "*", + weekday: "?", + }, + }, + { + label: "每周一9点", + config: { + second: "0", + minute: "0", + hour: "9", + day: "?", + month: "*", + weekday: "1", + }, + }, + { + label: "每月1日0点", + config: { + second: "0", + minute: "0", + hour: "0", + day: "1", + month: "*", + weekday: "?", + }, + }, + { + label: "工作日9点", + config: { + second: "0", + minute: "0", + hour: "9", + day: "?", + month: "*", + weekday: "1-5", + }, + }, + { + label: "每15分钟", + config: { + second: "0", + minute: "*/15", + hour: "*", + day: "*", + month: "*", + weekday: "?", + }, + }, + ]; + + const fields: Array = [ + "second", + "minute", + "hour", + "day", + "month", + "weekday", + ]; + if (showYear) fields.push("year"); + + return ( + + + {/* 标题和切换模式 */} +
+ + 高级 Cron 表达式配置 + + +
+ + {/* 快速预设 */} +
+ 快速预设： +
+ {commonPresets.map((preset, index) => ( + + ))} +
+
+ + {customMode ? ( + /* 手动编辑模式 */ +
+ Cron 表达式： + + handleFieldChange("cronExpression", e.target.value) + } + placeholder="秒 分 时 日 月 周 [年]" + /> + + 格式：秒(0-59) 分(0-59) 时(0-23) 日(1-31) 月(1-12) 周(0-7) + [年(1970-2099)] + +
+ ) : ( + /* 向导模式 */ + + {fields.map((field) => { + const fieldConfig = CRON_OPTIONS[field]; + const options = generateCommonOptions(field); + return ( +
+
+
+ {fieldConfig.label} + + + +
+ + {/* 自定义输入 */} + handleFieldChange(field, e.target.value)} + status={ + validateCronField(config[field] || "", field) ? "" : "error" + } + /> +
+ + ); + })} + + )} + + + + {/* 结果预览 */} +
+ 生成的 Cron 表达式： + + + 描述：{parseCronDescription(config.cronExpression)} + +
+ + {/* 字段说明 */} +
+ 字段说明： +
+ +
• * 表示任意值 + • ? 表示不指定值（仅日、周字段） + • */5 表示每5个单位 + • 1-5 表示范围 + • 1,3,5 表示列表 + • 日和周字段不能同时指定具体值 + + + + + + ); +}; + +export default AdvancedCronScheduler; diff --git a/frontend/src/components/CardView.tsx b/frontend/src/components/CardView.tsx index d3d8dc367..36b3a2d36 100644 --- a/frontend/src/components/CardView.tsx +++ b/frontend/src/components/CardView.tsx @@ -1,11 +1,5 @@ import React, { useState, useEffect, useRef } from "react"; -import { - Tag, - Pagination, - Tooltip, - Empty, - Popover, -} from "antd"; +import { Tag, Pagination, Tooltip, Empty, Popover, Spin } from "antd"; import { ClockCircleOutlined, StarFilled } from "@ant-design/icons"; import type { ItemType } from "antd/es/menu/interface"; import { formatDateTime } from "@/utils/unit"; diff --git a/frontend/src/mock/mock-seed/data-collection.cjs b/frontend/src/mock/mock-seed/data-collection.cjs index 5d0797a36..8998b0b6b 100644 --- a/frontend/src/mock/mock-seed/data-collection.cjs +++ b/frontend/src/mock/mock-seed/data-collection.cjs @@ -3,37 +3,24 @@ const API = require("../mock-apis.cjs"); const { Random } = Mock; // 生成模拟数据归集统计信息 -const collectionStatistics = { - period: Random.pick(["HOUR", "DAY", "WEEK", "MONTH"]), - totalTasks: Random.integer(50, 200), - activeTasks: Random.integer(10, 50), - successfulExecutions: Random.integer(30, 150), - failedExecutions: Random.integer(0, 50), - totalExecutions: Random.integer(20, 100), - avgExecutionTime: Random.integer(1000, 10000), // in milliseconds - avgThroughput: Random.integer(100, 1000), // records per second - topDataSources: new Array(5).fill(null).map(() => ({ - dataSourceId: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), - dataSourceName: Mock.Random.word(5, 15), - type: Mock.Random.pick([ - "MySQL", - "PostgreSQL", - "ORACLE", - "SQLSERVER", - "MONGODB", - "REDIS", - "ELASTICSEARCH", - "HIVE", - "HDFS", - "KAFKA", - "HTTP", - "FILE", - ]), - taskCount: Mock.Random.integer(1, 20), - executionCount: Mock.Random.integer(1, 50), - recordsProcessed: Mock.Random.integer(70, 100), // percentage - })), -}; +function dataXTemplate() { + return { + id: Mock.Random.guid().replace(/[^a-zA-Z0-9]/g, ""), + name: Mock.Random.ctitle(5, 15), + sourceType: Mock.Random.csentence(3, 10), + targetType: Mock.Random.csentence(3, 10), + description: Mock.Random.csentence(5, 20), + version: `v${Mock.Random.integer(1, 5)}.${Mock.Random.integer( + 0, + 9 + )}.${Mock.Random.integer(0, 9)}`, + isSystem: Mock.Random.boolean(), + createdAt: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + updatedAt: Mock.Random.datetime("yyyy-MM-dd HH:mm:ss"), + }; +} + +const templateList = new Array(20).fill(null).map(dataXTemplate); // 生成模拟任务数据 function taskItem() { @@ -89,30 +76,21 @@ function executionLogItem() { const executionLogList = new Array(100).fill(null).map(executionLogItem); module.exports = function (router) { - // 获取数据统计信息 - router.get(API.queryCollectionStatisticsUsingGet, (req, res) => { - res.send({ - code: "0", - msg: "Success", - data: collectionStatistics, - }); - }); - // 获取任务列表 - router.post(API.queryTasksUsingPost, (req, res) => { - const { searchTerm, filters, page = 1, size = 10 } = req.body; + router.get(API.queryTasksUsingGet, (req, res) => { + const { keyword, status, page = 0, size = 10 } = req.query; let filteredTasks = taskList; - if (searchTerm) { + if (keyword) { filteredTasks = filteredTasks.filter((task) => - task.name.includes(searchTerm) + task.name.includes(keyword) ); } - if (filters && filters.status && filters.status.length > 0) { + if (status && status.length > 0) { filteredTasks = filteredTasks.filter((task) => - filters.status.includes(task.status) + status.includes(task.status) ); } - const startIndex = (page - 1) * size; + const startIndex = page * size; const endIndex = startIndex + size; const paginatedTasks = filteredTasks.slice(startIndex, endIndex); @@ -123,7 +101,30 @@ module.exports = function (router) { totalElements: filteredTasks.length, page, size, - results: paginatedTasks, + content: paginatedTasks, + }, + }); + }); + + router.get(API.queryDataXTemplatesUsingGet, (req, res) => { + const { keyword, page = 0, size = 10 } = req.query; + let filteredTemplates = templateList; + if (keyword) { + filteredTemplates = filteredTemplates.filter((template) => + template.name.includes(keyword) + ); + } + const startIndex = page * size; + const endIndex = startIndex + size; + const paginatedTemplates = filteredTemplates.slice(startIndex, endIndex); + res.send({ + code: "0", + msg: "Success", + data: { + content: paginatedTemplates, + totalElements: filteredTemplates.length, + page, + size, }, }); }); diff --git a/frontend/src/pages/DataCollection/Create/CreateTask.tsx b/frontend/src/pages/DataCollection/Create/CreateTask.tsx index 2a1135b37..506c44560 100644 --- a/frontend/src/pages/DataCollection/Create/CreateTask.tsx +++ b/frontend/src/pages/DataCollection/Create/CreateTask.tsx @@ -1,20 +1,9 @@ import { useState } from "react"; -import { - Card, - Input, - Button, - Select, - Radio, - Form, - Divider, - InputNumber, - TimePicker, - App, -} from "antd"; +import { Input, Button, Radio, Form, InputNumber, App, Select } from "antd"; import { Link, useNavigate } from "react-router"; import { ArrowLeft } from "lucide-react"; import { createTaskUsingPost } from "../collection.apis"; -import DevelopmentInProgress from "@/components/DevelopmentInProgress"; +import SimpleCronScheduler from "@/pages/DataCollection/Create/SimpleCronScheduler"; const { TextArea } = Input; @@ -30,16 +19,16 @@ interface ScheduleConfig { const defaultTemplates = [ { - id: "nas-to-local", + id: "nas", name: "NAS到本地", description: "从NAS文件系统导入数据到本地文件系统", config: { - reader: "nasreader", + reader: "nfsreader", writer: "localwriter", }, }, { - id: "obs-to-local", + id: "obs", name: "OBS到本地", description: "从OBS文件系统导入数据到本地文件系统", config: { @@ -48,7 +37,7 @@ const defaultTemplates = [ }, }, { - id: "web-tolocal", + id: "web", name: "Web到本地", description: "从Web URL导入数据到本地文件系统", config: { @@ -58,9 +47,13 @@ const defaultTemplates = [ }, ]; -export default function CollectionTaskCreate() { - return ; +enum TemplateType { + NAS = "nas", + OBS = "obs", + WEB = "web", +} +export default function CollectionTaskCreate() { const navigate = useNavigate(); const [form] = Form.useForm(); const { message } = App.useApp(); @@ -68,7 +61,7 @@ export default function CollectionTaskCreate() { const [templateType, setTemplateType] = useState<"default" | "custom">( "default" ); - const [selectedTemplate, setSelectedTemplate] = useState(""); + const [selectedTemplate, setSelectedTemplate] = useState("nas"); const [customConfig, setCustomConfig] = useState(""); const [scheduleConfig, setScheduleConfig] = useState({ @@ -104,7 +97,7 @@ export default function CollectionTaskCreate() { }; return ( -
+
@@ -116,244 +109,234 @@ export default function CollectionTaskCreate() {
- -
{ - // 文件格式变化时重置模板选择 - if (_.fileFormat !== undefined) setSelectedTemplate(""); - }} - > - {/* 基本信息 */} -

基本信息

- - +
+ { + // 文件格式变化时重置模板选择 + if (_.fileFormat !== undefined) setSelectedTemplate(""); + }} > - - - -