diff --git a/Web/src/api/types.ts b/Web/src/api/types.ts index 60faa07..c30a8c1 100644 --- a/Web/src/api/types.ts +++ b/Web/src/api/types.ts @@ -195,6 +195,7 @@ export interface ConfigResponse { key: string; value: string; description: string; + isSecret: boolean; createdAt: Date; updatedAt?: Date; } diff --git a/Web/src/pages/settings/ConfigGroup.tsx b/Web/src/pages/settings/ConfigGroup.tsx index 21955d5..04be690 100644 --- a/Web/src/pages/settings/ConfigGroup.tsx +++ b/Web/src/pages/settings/ConfigGroup.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Form, Input, Button, Space, Row, Col, Tooltip } from 'antd'; -import { SaveOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { SaveOutlined, QuestionCircleOutlined, LockOutlined } from '@ant-design/icons'; interface ConfigGroupProps { groupName: string; @@ -11,6 +11,7 @@ interface ConfigGroupProps { descriptions: { [key: string]: string; }; + secretFields?: string[]; isMobile?: boolean; } @@ -19,6 +20,7 @@ const ConfigGroup: React.FC = ({ configs, onSave, descriptions, + secretFields = [], isMobile = false }) => { const [form] = Form.useForm(); @@ -45,6 +47,10 @@ const ConfigGroup: React.FC = ({ } }; + const isSecretField = (key: string): boolean => { + return secretFields.includes(key); + }; + return (
= ({ initialValues={configs} size={isMobile ? "middle" : "large"} > - {Object.keys(configs).map(key => ( - - - - {key} - {descriptions[key] && ( - - - - )} - - } - > - {key.toLowerCase().includes('secret') || key.toLowerCase().includes('key') || key.toLowerCase().includes('password') ? ( - - ) : ( - - )} - - - - - - - ))} + {Object.keys(configs).map(key => { + const isSecret = isSecretField(key); + + return ( + + + + {key} + {isSecret && } + {descriptions[key] && ( + + + + )} + + } + extra={isSecret && +
+ 此为私密字段,出于安全考虑不显示实际值。如需修改,请输入新值。 +
+ } + > + {isSecret ? ( + + ) : ( + + )} +
+ + + + +
+ ); + })}