Переглянути джерело

refactor(状态管理): 将状态映射和颜色定义提取为共享常量

将多个页面中的状态映射(statusMap)和状态颜色(statusTagColor)提取为共享常量
优化状态选项的渲染方式,使用map方法动态生成
统一状态管理逻辑,减少重复代码
max_liu 2 тижнів тому
батько
коміт
af18ff19eb

+ 47 - 26
server/routes/toolsLibrary.js

@@ -1,8 +1,8 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
-const { executeQuery } = require('../config/database');
+const { executeQuery } = require("../config/database");
 
-router.get('/', async (req, res) => {
+router.get("/", async (req, res) => {
   try {
     const { page = 1, pageSize = 10 } = req.query;
     const offset = (page - 1) * pageSize;
@@ -20,22 +20,22 @@ router.get('/', async (req, res) => {
 
     const [data, countResult] = await Promise.all([
       executeQuery(sql, [parseInt(pageSize), offset]),
-      executeQuery(countSql)
+      executeQuery(countSql),
     ]);
 
     res.json({
       data,
       total: countResult[0].total,
       page: parseInt(page),
-      pageSize: parseInt(pageSize)
+      pageSize: parseInt(pageSize),
     });
   } catch (error) {
-    console.error('Error fetching tools library:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    console.error("Error fetching tools library:", error);
+    res.status(500).json({ error: "Internal server error" });
   }
 });
 
-router.get('/:id', async (req, res) => {
+router.get("/:id", async (req, res) => {
   try {
     const { id } = req.params;
 
@@ -51,23 +51,33 @@ router.get('/:id', async (req, res) => {
     const data = await executeQuery(sql, [id]);
 
     if (data.length === 0) {
-      return res.status(404).json({ error: 'Tool not found' });
+      return res.status(404).json({ error: "Tool not found" });
     }
 
     res.json(data[0]);
   } catch (error) {
-    console.error('Error fetching tool detail:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    console.error("Error fetching tool detail:", error);
+    res.status(500).json({ error: "Internal server error" });
   }
 });
 
-router.put('/:id', async (req, res) => {
+router.put("/:id", async (req, res) => {
   try {
     const { id } = req.params;
     const {
-      tools_name, tools_function_name, tools_full_name, tools_desc,
-      tools_version, access_task_id, status, call_type, api_provider,
-      api_url_path, operate_path_data, params_definition, response_desc
+      tools_name,
+      tools_function_name,
+      tools_full_name,
+      tools_desc,
+      tools_version,
+      access_task_id,
+      status,
+      call_type,
+      api_provider,
+      api_url_path,
+      operate_path_data,
+      params_definition,
+      response_desc,
     } = req.body;
 
     const sql = `
@@ -81,19 +91,30 @@ router.put('/:id', async (req, res) => {
     `;
 
     await executeQuery(sql, [
-      tools_name, tools_function_name, tools_full_name, tools_desc,
-      tools_version, access_task_id, status, call_type, api_provider,
-      api_url_path, operate_path_data, params_definition, response_desc, id
+      tools_name,
+      tools_function_name,
+      tools_full_name,
+      tools_desc,
+      tools_version,
+      access_task_id,
+      status,
+      call_type,
+      api_provider,
+      api_url_path,
+      operate_path_data,
+      params_definition,
+      response_desc,
+      id,
     ]);
 
-    res.json({ message: 'Tool updated successfully' });
+    res.json({ message: "Tool updated successfully" });
   } catch (error) {
-    console.error('Error updating tool:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    console.error("Error updating tool:", error);
+    res.status(500).json({ error: "Internal server error" });
   }
 });
 
-router.post('/:id/publish', async (req, res) => {
+router.post("/:id/publish", async (req, res) => {
   try {
     const { id } = req.params;
 
@@ -105,11 +126,11 @@ router.post('/:id/publish', async (req, res) => {
 
     await executeQuery(sql, [id]);
 
-    res.json({ message: 'Tool published successfully' });
+    res.json({ message: "Tool published successfully" });
   } catch (error) {
-    console.error('Error publishing tool:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    console.error("Error publishing tool:", error);
+    res.status(500).json({ error: "Internal server error" });
   }
 });
 
-module.exports = router;
+module.exports = router;

+ 41 - 32
src/pages/AutoAccessTaskDetail.js

@@ -4,10 +4,24 @@ import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { ArrowLeftOutlined, CopyOutlined } from "@ant-design/icons";
 import { autoAccessTasksApi } from "../services/api";
 import moment from "moment";
+import { STATUS_MAP, STATUS_TAG_COLOR } from "./AutoAccessTaskList";
 
 const { TextArea } = Input;
 const { Option } = Select;
 
+// 状态枚举
+const STATUS_OPTIONS = [
+  { value: 0, label: "待执行" },
+  { value: 1, label: "执行中" },
+  { value: 2, label: "已完成" },
+  { value: 3, label: "失败" },
+  { value: 4, label: "已注册" },
+  { value: 5, label: "待审核" },
+  { value: 6, label: "审核不通过" },
+];
+
+// 状态映射(用于显示)
+
 const AutoAccessTaskDetail = () => {
   const [form] = Form.useForm();
   const [data, setData] = useState(null);
@@ -19,25 +33,11 @@ const AutoAccessTaskDetail = () => {
   const isEditMode = location.search.includes("mode=edit");
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      0: "processing",
-      1: "warning",
-      2: "success",
-      3: "error",
-      4: "error",
-    };
-    return statusMap[status] || "default";
+    return STATUS_TAG_COLOR[status] || "default";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      0: "待处理",
-      1: "处理中",
-      2: "已完成",
-      3: "失败",
-      4: "异常",
-    };
-    return statusMap[status] || "未知";
+    return STATUS_MAP[status] || "未知";
   };
 
   const getAccessTypeText = (type) => {
@@ -75,13 +75,16 @@ const AutoAccessTaskDetail = () => {
   };
 
   const handleCopyApiDoc = () => {
-    const apiDoc = form.getFieldValue('api_doc');
+    const apiDoc = form.getFieldValue("api_doc");
     if (apiDoc) {
-      navigator.clipboard.writeText(apiDoc).then(() => {
-        message.success("API文档已复制到剪贴板");
-      }).catch(() => {
-        message.error("复制失败,请手动复制");
-      });
+      navigator.clipboard
+        .writeText(apiDoc)
+        .then(() => {
+          message.success("API文档已复制到剪贴板");
+        })
+        .catch(() => {
+          message.error("复制失败,请手动复制");
+        });
     } else {
       message.warning("API文档为空,无法复制");
     }
@@ -152,11 +155,14 @@ const AutoAccessTaskDetail = () => {
                   rules={[{ required: true, message: "请选择状态" }]}
                 >
                   <Select>
-                    <Option value={0}>待处理</Option>
-                    <Option value={1}>处理中</Option>
-                    <Option value={2}>已完成</Option>
-                    <Option value={3}>失败</Option>
-                    <Option value={4}>异常</Option>
+                    {STATUS_OPTIONS.map((option) => (
+                      <Option
+                        key={option.value}
+                        value={option.value}
+                      >
+                        {option.label}
+                      </Option>
+                    ))}
                   </Select>
                 </Form.Item>
               </Col>
@@ -319,11 +325,14 @@ const AutoAccessTaskDetail = () => {
                       onClick={() => {
                         const apiDoc = data.api_doc;
                         if (apiDoc) {
-                          navigator.clipboard.writeText(apiDoc).then(() => {
-                            message.success("API文档已复制到剪贴板");
-                          }).catch(() => {
-                            message.error("复制失败,请手动复制");
-                          });
+                          navigator.clipboard
+                            .writeText(apiDoc)
+                            .then(() => {
+                              message.success("API文档已复制到剪贴板");
+                            })
+                            .catch(() => {
+                              message.error("复制失败,请手动复制");
+                            });
                         } else {
                           message.warning("API文档为空,无法复制");
                         }

+ 21 - 16
src/pages/AutoAccessTaskList.js

@@ -5,6 +5,25 @@ import { useNavigate } from "react-router-dom";
 import { autoAccessTasksApi } from "../services/api";
 import moment from "moment";
 
+export const STATUS_TAG_COLOR = {
+  0: "processing",
+  1: "default",
+  2: "success",
+  3: "error",
+  4: "success",
+  5: "default",
+  6: "error",
+};
+export const STATUS_MAP = {
+  0: "待执行",
+  1: "执行中",
+  2: "已完成",
+  3: "失败",
+  4: "已注册",
+  5: "待审核",
+  6: "审核不通过",
+};
+
 const AutoAccessTaskList = () => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -16,25 +35,11 @@ const AutoAccessTaskList = () => {
   const navigate = useNavigate();
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      0: "processing",
-      1: "warning",
-      2: "success",
-      3: "error",
-      4: "error",
-    };
-    return statusMap[status] || "default";
+    return STATUS_TAG_COLOR[status] || "default";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      0: "待处理",
-      1: "处理中",
-      2: "已完成",
-      3: "失败",
-      4: "异常",
-    };
-    return statusMap[status] || "未知";
+    return STATUS_MAP[status] || "未知";
   };
 
   const getAccessTypeText = (type) => {

+ 3 - 16
src/pages/PendingToolsDetail.js

@@ -4,6 +4,7 @@ import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { pendingToolsApi } from "../services/api";
 import moment from "moment";
+import { STATUS_TAG_COLOR, STATUS_MAP } from "./PendingToolsList";
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -19,25 +20,11 @@ const PendingToolsDetail = () => {
   const isEditMode = location.search.includes("mode=edit");
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      0: "processing",
-      1: "warning",
-      2: "success",
-      3: "error",
-      4: "pending",
-    };
-    return statusMap[status] || "default";
+    return STATUS_TAG_COLOR[status] || "default";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      0: "待处理",
-      1: "处理中",
-      2: "已完成",
-      3: "失败",
-      4: "待审核",
-    };
-    return statusMap[status] || "未知";
+    return STATUS_MAP[status] || "未知";
   };
 
   const fetchData = async () => {

+ 17 - 16
src/pages/PendingToolsList.js

@@ -6,6 +6,21 @@ import { pendingToolsApi } from "../services/api";
 import moment from "moment";
 import { render } from "@testing-library/react";
 
+export const STATUS_TAG_COLOR = {
+  0: "processing",
+  1: "warning",
+  2: "success",
+  3: "error",
+  4: "pending",
+};
+export const STATUS_MAP = {
+  0: "待处理",
+  1: "处理中",
+  2: "已完成",
+  3: "失败",
+  4: "待审核",
+};
+
 const { Search } = Input;
 const { confirm } = Modal;
 
@@ -21,25 +36,11 @@ const PendingToolsList = () => {
   const navigate = useNavigate();
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      0: "processing",
-      1: "warning",
-      2: "success",
-      3: "error",
-      4: "pending",
-    };
-    return statusMap[status] || "default";
+    return STATUS_TAG_COLOR[status] || "default";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      0: "待处理",
-      1: "处理中",
-      2: "已完成",
-      3: "失败",
-      4: "待审核",
-    };
-    return statusMap[status] || "未知";
+    return STATUS_MAP[status] || "未知";
   };
 
   const columns = [

+ 24 - 23
src/pages/ToolsLibraryDetail.js

@@ -4,7 +4,13 @@ import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { ArrowLeftOutlined, CopyOutlined } from "@ant-design/icons";
 import { toolsLibraryApi } from "../services/api";
 import moment from "moment";
+import { STATUS_MAP, STATUS_TAG_COLOR } from "./ToolsLibraryList";
 
+const STATUS_OPTIONS = [
+  { value: "normal", label: "正常" },
+  { value: "offline", label: "已下线" },
+  { value: "unpublished", label: "待发布" },
+];
 const { TextArea } = Input;
 const { Option } = Select;
 
@@ -19,23 +25,11 @@ const ToolsLibraryDetail = () => {
   const isEditMode = location.search.includes("mode=edit");
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      normal: "success",
-      offline: "default",
-      unpublished: "default",
-      published: "success",
-    };
-    return statusMap[status] || "warning";
+    return STATUS_TAG_COLOR[status] || "warning";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      normal: "正常",
-      offline: "已下线",
-      unpublished: "待发布",
-      published: "已发布",
-    };
-    return statusMap[status] || status;
+    return STATUS_MAP[status] || status;
   };
 
   const getCallTypeText = (type) => {
@@ -162,10 +156,14 @@ const ToolsLibraryDetail = () => {
                   rules={[{ required: true, message: "请选择状态" }]}
                 >
                   <Select>
-                    <Option value="normal">正常</Option>
-                    <Option value="offline">已下线</Option>
-                    <Option value="unpublished">待发布</Option>
-                    <Option value="published">已发布</Option>
+                    {STATUS_OPTIONS.map((option) => (
+                      <Option
+                        key={option.value}
+                        value={option.value}
+                      >
+                        {option.label}
+                      </Option>
+                    ))}
                   </Select>
                 </Form.Item>
               </Col>
@@ -330,11 +328,14 @@ const ToolsLibraryDetail = () => {
                       onClick={() => {
                         const paramsDefinition = data.params_definition;
                         if (paramsDefinition) {
-                          navigator.clipboard.writeText(paramsDefinition).then(() => {
-                            message.success("参数定义已复制到剪贴板");
-                          }).catch(() => {
-                            message.error("复制失败,请手动复制");
-                          });
+                          navigator.clipboard
+                            .writeText(paramsDefinition)
+                            .then(() => {
+                              message.success("参数定义已复制到剪贴板");
+                            })
+                            .catch(() => {
+                              message.error("复制失败,请手动复制");
+                            });
                         } else {
                           message.warning("参数定义为空,无法复制");
                         }

+ 14 - 14
src/pages/ToolsLibraryList.js

@@ -5,6 +5,18 @@ import { useNavigate } from "react-router-dom";
 import { toolsLibraryApi } from "../services/api";
 import moment from "moment";
 
+export const STATUS_MAP = {
+  normal: "正常",
+  offline: "已下线",
+  unpublished: "待发布",
+};
+
+export const STATUS_TAG_COLOR = {
+  normal: "success",
+  offline: "default",
+  unpublished: "default",
+};
+
 const { confirm } = Modal;
 
 const ToolsLibraryList = () => {
@@ -18,23 +30,11 @@ const ToolsLibraryList = () => {
   const navigate = useNavigate();
 
   const getStatusColor = (status) => {
-    const statusMap = {
-      normal: "success",
-      offline: "default",
-      unpublished: "default",
-      published: "success",
-    };
-    return statusMap[status] || "warning";
+    return STATUS_TAG_COLOR[status] || "warning";
   };
 
   const getStatusText = (status) => {
-    const statusMap = {
-      normal: "正常",
-      offline: "已下线",
-      unpublished: "待发布",
-      published: "已发布",
-    };
-    return statusMap[status] || status;
+    return STATUS_MAP[status] || status;
   };
 
   const getCallTypeText = (type) => {