From f9e7a55b96a2244b460411f008e524c3707a4929 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 26 Nov 2025 10:06:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(componentTest):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E9=85=8D=E7=BD=AE=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentTest/TestCaseModal.tsx           | 180 ++++++++++++++++++
 .../style/testCaseModal.module.less           |  92 +++++++++
 2 files changed, 272 insertions(+)
 create mode 100644 src/pages/componentDevelopment/componentTest/TestCaseModal.tsx
 create mode 100644 src/pages/componentDevelopment/componentTest/style/testCaseModal.module.less

diff --git a/src/pages/componentDevelopment/componentTest/TestCaseModal.tsx b/src/pages/componentDevelopment/componentTest/TestCaseModal.tsx
new file mode 100644
index 0000000..b4b291b
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/TestCaseModal.tsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Input, Button, Select, Space } from '@arco-design/web-react';
+import styles from './style/testCaseModal.module.less';
+
+const FormItem = Form.Item;
+const Option = Select.Option;
+
+interface TestCaseModalProps {
+  design: Record<string, any>;
+  visible: boolean;
+  operationIdent: string;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+}
+
+const dict = [
+  {
+    label: '通过用例',
+    value: '通过用例'
+  },
+  {
+    label: '失败用例',
+    value: '失败用例'
+  },
+  {
+    label: '参数有误',
+    value: '参数有误'
+  },
+  {
+    label: '数据为空',
+    value: '数据为空'
+  },
+  {
+    label: '缺少参数',
+    value: '缺少参数'
+  },
+  {
+    label: '记录不存在',
+    value: '记录不存在'
+  }
+];
+
+const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operationIdent, onCancel, onOk }) => {
+  const [testCaseFunctions, setTestCaseFunctions] = useState(null);
+  const [form] = Form.useForm();
+
+  const handleOk = async () => {
+    try {
+      const formValues = await form.validate();
+
+      // 构造完整的数据结构，包含原始字段信息和用户输入的值
+      const result = {
+        testCaseName: formValues.testCaseName,
+        operation: operationIdent,
+        expectDataIns: testCaseFunctions.parameters.map((param, index) => ({
+          ident: param.ident,
+          type: param.type,
+          generic: param.generic,
+          desc: param.desc,
+          // 用户输入的值
+          value: formValues[`parameters_${index}`] || ''
+        })),
+        expectDataOuts: testCaseFunctions.responses.map((resp, index) => ({
+          ident: resp.ident,
+          type: resp.type,
+          generic: resp.generic,
+          desc: resp.desc,
+          // 用户输入的值
+          value: formValues[`responses_${index}`] || ''
+        })),
+      };
+
+      onOk(result);
+      form.resetFields();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  useEffect(() => {
+    setTestCaseFunctions(design.find(item => item.ident === operationIdent));
+  }, [visible, operationIdent, design]);
+
+  return (
+    <Modal
+      title="配置测试用例"
+      visible={visible}
+      onCancel={handleCancel}
+      autoFocus={false}
+      focusLock={true}
+      style={{ width: 1000 }}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
+          <Button onClick={handleCancel}>取消</Button>
+          <Button type="primary" onClick={handleOk}>
+            确定
+          </Button>
+        </div>
+      }
+    >
+      <div className={styles['modal-content']}>
+        <div className={styles['modal-header']}>
+          <span className={styles['header-label']}>接口:</span>
+          <span className={styles['header-value']}>{operationIdent}</span>
+        </div>
+
+        <Form form={form} layout="vertical" autoComplete="off">
+          <FormItem
+            label="用例名称"
+            field="testCaseName"
+            rules={[{ required: true, message: '请输入用例名称' }]}
+          >
+            <Select placeholder="请输入或选择测试用例" allowCreate allowClear>
+              {dict.map((option, index) => (
+                <Option key={index} value={option.value}>
+                  {option.label}
+                </Option>
+              ))}
+            </Select>
+          </FormItem>
+
+          <div className={styles['section-title']}>输入参数:</div>
+          <div className={styles['params-table']}>
+            <div className={styles['table-header']}>
+              <div className={styles['col-index']}></div>
+              <div className={styles['col-name']}>名称</div>
+              <div className={styles['col-param-type']}>参数类型</div>
+              <div className={styles['col-data-type']}>数据类型</div>
+              <div className={styles['col-value']}>参数值</div>
+            </div>
+            {testCaseFunctions && testCaseFunctions.parameters.map((item, index) => (
+              <div className={styles['table-row']} key={index}>
+                <div className={styles['col-index']}>{index + 1}</div>
+                <div className={styles['col-name']}>{item.ident}</div>
+                <div className={styles['col-param-type']}>{item.type}</div>
+                <div className={styles['col-data-type']}>{item.generic || '-'}</div>
+                <div className={styles['col-value']}>
+                  <FormItem field={`parameters_${index}`} noStyle>
+                    <Input placeholder="请输入参数值" />
+                  </FormItem>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className={styles['section-title']}>输出参数:</div>
+          <div className={styles['params-table']}>
+            <div className={styles['table-header']}>
+              <div className={styles['col-index']}></div>
+              <div className={styles['col-name']}>名称</div>
+              <div className={styles['col-param-type']}>参数类型</div>
+              <div className={styles['col-data-type']}>数据类型</div>
+              <div className={styles['col-value']}>参数值</div>
+            </div>
+            {testCaseFunctions && testCaseFunctions.responses.map((item, index) => (
+              <div className={styles['table-row']} key={index}>
+                <div className={styles['col-index']}>{index + 1}</div>
+                <div className={styles['col-name']}>{item.ident}</div>
+                <div className={styles['col-param-type']}>{item.type}</div>
+                <div className={styles['col-data-type']}>{item.generic || '-'}</div>
+                <div className={styles['col-value']}>
+                  <FormItem field={`responses_${index}`} noStyle>
+                    <Input placeholder="请输入参数值" />
+                  </FormItem>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Form>
+      </div>
+    </Modal>
+  );
+};
+
+export default TestCaseModal;
diff --git a/src/pages/componentDevelopment/componentTest/style/testCaseModal.module.less b/src/pages/componentDevelopment/componentTest/style/testCaseModal.module.less
new file mode 100644
index 0000000..2c6d80b
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/style/testCaseModal.module.less
@@ -0,0 +1,92 @@
+.modal-content {
+  padding: 16px 0;
+}
+
+.modal-header {
+  margin-bottom: 24px;
+  padding: 12px 16px;
+  background-color: #f7f8fa;
+  border-radius: 4px;
+
+  .header-label {
+    font-weight: 500;
+    color: #1d2129;
+    margin-right: 8px;
+  }
+
+  .header-value {
+    color: #4080ff;
+    font-weight: 500;
+  }
+}
+
+.section-title {
+  font-weight: 500;
+  font-size: 14px;
+  color: #1d2129;
+  margin-bottom: 12px;
+  margin-top: 20px;
+}
+
+.params-table {
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .table-header {
+    display: flex;
+    background-color: #f7f8fa;
+    border-bottom: 1px solid #e5e6eb;
+    padding: 12px 16px;
+    font-weight: 500;
+    color: #4e5969;
+    font-size: 13px;
+  }
+
+  .table-row {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e5e6eb;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: #f7f8fa;
+    }
+  }
+
+  .col-index {
+    width: 40px;
+    flex-shrink: 0;
+    color: #86909c;
+  }
+
+  .col-name {
+    flex: 1;
+    min-width: 0;
+    margin-right: 12px;
+  }
+
+  .col-param-type {
+    width: 120px;
+    flex-shrink: 0;
+    margin-right: 12px;
+    color: #4e5969;
+  }
+
+  .col-data-type {
+    width: 100px;
+    flex-shrink: 0;
+    margin-right: 12px;
+    color: #4e5969;
+    text-align: center;
+  }
+
+  .col-value {
+    flex: 2;
+    min-width: 0;
+  }
+}