feat: add ModelAccess to settings page (#29)

* feat: Update site name to DataMate and refine text for AI data processing

* 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

@@ -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);

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) {

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,
+    });
+  });
+};