fix: 帮助手册修改

a4c7e733 · wuyongsheng · 7bd76622 · a4c7e733 · a4c7e733 · a4c7e733
Commit a4c7e733 authored Nov 01, 2022 by wuyongsheng
5 changed files
--- a/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css
+++ b/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.module.css
@@ -36,7 +36,7 @@
 	position: relative;
 	border-radius: 4px;
 	margin-bottom: 20px;
-	height: 600px;
+	height: 562px;
 }

 .form {
@@ -97,6 +97,11 @@
 	padding-left: 32px;
 }

+.helpBox {
+	width: 368px;
+	height: 100%;
+}
+
 .codeErrorBox {
 	padding-left: 20px;
 	height: 32px;
@@ -129,3 +134,14 @@
 	height: 100%;
 	right: -420px;
 }
+
+.preBox {
+	background-color: #f7f8fa;
+	height: calc(100% - 84px);
+	padding: 20px;
+	font-size: 12px;
+	color: #1e2633;
+	overflow: auto;
+	word-wrap: break-word;
+	white-space: pre-wrap;
+}
--- a/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
+++ b/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
@@ -2,7 +2,7 @@
 * @Author: 吴永生 15770852798@163.com
 * @Date: 2022-10-18 16:12:55
 * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-31 19:54:43
+ * @LastEditTime: 2022-11-01 10:38:50
 * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -41,13 +41,13 @@ import {
 import batchOperator from "@/assets/resourceCenter/batchOperator.svg";
 import flowOperator from "@/assets/resourceCenter/flowOperator.svg";
 import { useMessage } from "@/components/MySnackbar";
-import MyPopover from "@/components/mui/MyPopover";
+import CloseIcon from "@mui/icons-material/Close";
 import useCheckOperator from "@/views/CustomOperator/useCheckOperator";
 import { saveBatchActor } from "@/api/project_api";
 import positionTransform from "@/views/CustomOperator/utils";
+import MyTooltip from "@/components/mui/MyTooltip";

 import style from "./index.module.css";
-import MyTooltip from "@/components/mui/MyTooltip";

 interface IAddOperator {
 	pageType: string;
@@ -518,19 +518,12 @@ const AddOperator = observer((props: IAddOperator) => {
 						<div className={style.codeBox}>
 							<div className={style.codeTitle}>
 								<span>参数配置</span>
-								<MyPopover
-									open={tipsOpen}
-									changeOpen={(val) => setTipsOpen(val)}
-									content={<pre>{text}</pre>}
-									transformOrigin={{
-										vertical: "top",
-										horizontal: "right",
-									}}
+								<span
+									onClick={() => setTipsOpen(!tipsOpen)}
+									style={{ color: "#1370FF", cursor: "pointer" }}
 								>
-									<span style={{ color: "#1370FF", cursor: "pointer" }}>
-										帮助手册
-									</span>
-								</MyPopover>
+									帮助手册
+								</span>
 							</div>
 							<div className={style.code}>
 								<Code
@@ -540,7 +533,7 @@ const AddOperator = observer((props: IAddOperator) => {
 										setCode(e);
 									}}
 									onBlur={paramsConfigBlur}
-									height={parametersError ? "480px" : "512px"}
+									height={parametersError ? "486px" : "518px"}
 									width="600"
 									style={{ flex: 1 }}
 								/>
@@ -587,12 +580,35 @@ const AddOperator = observer((props: IAddOperator) => {
 						</div>
 					)}
 					<div
-						style={{ width: "368px", backgroundColor: "red" }}
 						className={classNames({
+							[style.helpBox]: true,
 							[style.helpOpen]: tipsOpen,
 							[style.helpClose]: !tipsOpen,
 						})}
-					></div>
+					>
+						<div className={style.codeTitle}>
+							<span>帮助手册</span>
+							<CloseIcon
+								onClick={() => setTipsOpen(false)}
+								sx={{
+									fontSize: "16px",
+									color: "#C2C6CC",
+									cursor: "pointer",
+									":hover": {
+										background: "#f0f2f5",
+										borderRadius: "2px",
+									},
+								}}
+							/>
+						</div>
+						<pre
+							className={classNames({
+								[style.preBox]: true,
+							})}
+						>
+							{text}
+						</pre>
+					</div>
 				</div>

 				{taskType === "FLOW" ? null : (

--- a/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
+++ b/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
@@ -2,7 +2,7 @@
 * @Author: 吴永生 15770852798@163.com
 * @Date: 2022-10-20 17:36:14
 * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-28 15:22:13
+ * @LastEditTime: 2022-11-01 11:05:39
 * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/utils.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -146,57 +146,51 @@ export const initCode =  [{
                    }
                ],
     "validators" : [ 
-                {
-                    "regex" : "^.*\\.(pdb|PDB|pdbqt|PDBQT)$",
-                    "message" : "请输入PDB或PDBQT文件"
-                }
-            ]
+                      {
+                          "regex" : "^.*\\.(pdb|PDB|pdbqt|PDBQT)$",
+                          "message" : "请输入PDB或PDBQT文件"
+                      }
+                    ]
 }]


 export const text = `{
-  // 参数名, 必填, 在15字符以内，仅限大小写字母、数字、"_",且只能以大小写字母开头
+  // 参数名; 必填, 在15字符以内，仅限大小写字母、数字、"_",且只能以大小写字母开头
  "name" : "timeout",
-  /** 参数类型, 必填, 可选值有 STRING：字符串、FILE：文件、DATASET：数据集、INT：整型、FLOAT：单精度浮点型、 
-   * DOUBLE：多精度浮点型、BOOLEAN：布尔值、ARRAY_STRING：字符串数组、ARRAY_FILE：文件数组、ARRAY_DATASET：数据集数组、
-   * ARRAY_INT：整型数组、ARRAY_FLOAT：单精度浮点型数组、ARRAY_DOUBLE：多精度浮点型数组、ARRAY_BOOLEAN：布尔值数组
-  */
- "classType" : "INT",
-  // 是否必填。在使用该算子时是否必须输入改参数的值
+  // 参数类型; 必填, 可选值有 STRING：字符串、FILE：文件、DATASET：数据集、INT：整型、FLOAT：单精度浮点型、DOUBLE：多精度浮点型、BOOLEAN：布尔值、ARRAY_STRING：字符串数组、ARRAY_FILE：文件数组、ARRAY_DATASET：数据集数组、ARRAY_INT：整型数组、ARRAY_FLOAT：单精度浮点型数组、ARRAY_DOUBLE：多精度浮点型数组、ARRAY_BOOLEAN：布尔值数组
+  "classType" : "INT",
+  // 是否必填; 在使用该算子时是否必须输入改参数的值
  "required" : false,
  // 默认值
  "defaultValue" : 10000,
-  // 参数描述。在300字符以内
+  // 参数描述; 在300字符以内
  "description" : "",
-  // 是否隐藏, 必填, 隐藏就在页面不显示该参数 必填
+  // 是否隐藏; 必填, 隐藏就在页面不显示该参数 必填
  "hidden" : true,
-  // 页面展示的参数的名称 必填,  在15字符以内，仅限大小写字母、数字、中文
+  // 页面展示的参数的名称; 必填,  在15字符以内，仅限大小写字母、数字、中文
  "title" : "",
  // 参数展示的顺序优先级
  "order" : 0,
-  // 参数分组 必填,  可选值有 in： 输入、out：输出、basis：基础、senior：高级
+  // 参数分组; 必填,  可选值有 in： 输入、out：输出、basis：基础、senior：高级
  "parameterGroup": "in",
-  /** 
-   * 前端填值的方式, 必填, 可选值有 PATH：路径选择器、DATASET：数据集选择器、FILE：文件选择器、INPUT：输入框、 
-   * SELECT：下拉框、MULTIPLESELECT：多选下拉框、RADIO：单选按钮、CHECKBOX：多选按钮
-   */
+  // 前端填值的方式; 必填, 可选值有 PATH：路径选择器、DATASET：数据集选择器、FILE：文件选择器、INPUT：输入框、SELECT：下拉框、MULTIPLESELECT：多选下拉框、RADIO：单选按钮、CHECKBOX：多选按钮
  "domType" : "INPUT",
-  // 选项。当domType为SELECT、MULTIPLESELECT、RADIO、CHECKBOX时生效。以对象数组的形式保存
+  // 选项; 当domType为SELECT、MULTIPLESELECT、RADIO、CHECKBOX时生效。以对象数组的形式保存
  "choices" : [ 
-                  {
-                    // 在前端展示的值
-                      "label" : "是",
-                      //选中时传递服务使用的值
-                      "value" : "true"
-                  }, 
-              ],
-              //用于校验输入值。以对象数组的形式保存
-   "validators" : [ 
-              {
-                //正则表达式
-                  "regex" : "^.*\\.(pdb|PDB|pdbqt|PDBQT)$",
-                  //不符合正则时的报错信息
-                  "message" : "请输入PDB或PDBQT文件"
-              }
-          ]
+    {
+      // 在前端展示的值
+      "label" : "是",
+      //选中时传递服务使用的值
+      "value" : "true"
+    }, 
+  ],
+  //用于校验输入值; 以对象数组的形式保存
+  "validators" :  [ 
+    {
+      //正则表达式
+      "regex" : "^.*\\.(pdb|PDB|pdbqt|PDBQT)$",
+      //不符合正则时的报错信息
+      "message" : "请输入PDB或PDBQT文件"
+    }
+  ]
 }`
\ No newline at end of file
--- a/src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx
+++ b/src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorDetails/index.tsx
@@ -2,7 +2,7 @@
 * @Author: 吴永生 15770852798@163.com
 * @Date: 2022-10-17 14:35:11
 * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-10-28 14:54:39
+ * @LastEditTime: 2022-11-01 10:59:40
 * @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -209,9 +209,10 @@ const OperatorDetails = observer(() => {
 						{ label: "应用环境", value: envName },
 					]}
 				/>
-				{description ? (
-					<BasicInfo infoList={[{ label: "描述", value: description }]} />
-				) : null}
+
+				<BasicInfo
+					infoList={[{ label: "描述", value: description || "暂无描述" }]}
+				/>
 			</div>
 			{type === "BATCH" ? (
 				<div style={{ padding: "26px 0 16px 0" }}>

--- a/yarn.lock
+++ b/yarn.lock
@@ -3477,6 +3477,11 @@ cliui@^7.0.2:
    strip-ansi "^6.0.0"
    wrap-ansi "^7.0.0"

+clsx@^1.0.4:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 clsx@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"
@@ -4202,7 +4207,7 @@ dom-converter@^0.2.0:
  dependencies:
    utila "~0.4"

-dom-helpers@^5.0.1:
+dom-helpers@^5.0.1, dom-helpers@^5.1.3:
  version "5.2.1"
  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -8053,6 +8058,11 @@ react-is@^18.0.0:
  resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==

+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-refresh@^0.11.0:
  version "0.11.0"
  resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
@@ -8083,6 +8093,18 @@ react-transition-group@^4.4.2:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

+react-virtualized@^9.22.3:
+  version "9.22.3"
+  resolved "https://registry.npmmirror.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
+  integrity sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    clsx "^1.0.4"
+    dom-helpers "^5.1.3"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^18.1.0:
  version "18.1.0"
  resolved "https://registry.npmjs.org/react/-/react-18.1.0.tgz"