Skip to content

feat: 添加 SecretTextField 组件，敏感字段默认密文显示并支持切换 #1773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
coltea merged 1 commit into from
Mar 19, 2026
Merged

feat: 添加 SecretTextField 组件，敏感字段默认密文显示并支持切换 #1773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions web/admin/src/pages/setting/component/CardAuth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { Controller, useForm } from 'react-hook-form';
import { useAppSelector } from '@/store';
import { BUSINESS_VERSION_PERMISSION } from '@/constant/version';
import { VersionCanUse } from '@/components/VersionMask';
import { SettingCardItem, FormItem } from './Common';
import { SettingCardItem, FormItem, SecretTextField } from './Common';

interface CardAuthProps {
kb: DomainKnowledgeBaseDetail;
Expand Down Expand Up @@ -297,7 +297,7 @@ const CardAuth = ({ kb, refresh }: CardAuthProps) => {
required: 'Client Secret 不能为空',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='请输入'
Expand Down Expand Up @@ -409,7 +409,7 @@ const CardAuth = ({ kb, refresh }: CardAuthProps) => {
required: 'Client Secret 不能为空',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='请输入'
Expand Down Expand Up @@ -663,7 +663,7 @@ const CardAuth = ({ kb, refresh }: CardAuthProps) => {
}}
name='password'
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='请输入'
Expand Down Expand Up @@ -729,7 +729,7 @@ const CardAuth = ({ kb, refresh }: CardAuthProps) => {
control={control}
name='bind_password'
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='请输入'
Expand Down Expand Up @@ -959,7 +959,7 @@ const CardAuth = ({ kb, refresh }: CardAuthProps) => {
},
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
onChange={e => {
Expand Down
4 changes: 2 additions & 2 deletions web/admin/src/pages/setting/component/CardMCP.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
TextField,
Stack,
} from '@mui/material';
import { SettingCardItem, FormItem } from './Common';
import { SettingCardItem, FormItem, SecretTextField } from './Common';
import ShowText from '@/components/ShowText';
import { Controller, useForm } from 'react-hook-form';
import { useMemo, useState, useEffect } from 'react';
Expand Down Expand Up @@ -251,7 +251,7 @@ const CardMCP = ({ kb }: CardMCPProps) => {
name='token'
rules={{ required: '访问口令不能为空' }}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='访问口令'
Expand Down
4 changes: 2 additions & 2 deletions web/admin/src/pages/setting/component/CardRobotApi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import ShowText from '@/components/ShowText';
import { getApiV1AppDetail, putApiV1App } from '@/request/App';
import { Controller, useForm } from 'react-hook-form';
import { useEffect, useState } from 'react';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
Comment thread
GavanHub marked this conversation as resolved.
import { DomainAppDetailResp } from '@/request/types';
import { message } from '@ctzhian/ui';
import { BUSINESS_VERSION_PERMISSION } from '@/constant/version';
Expand Down Expand Up @@ -150,7 +150,7 @@ const CardRobotApi = ({
required: 'API Token 不能为空',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
onChange={e => {
Expand Down
4 changes: 2 additions & 2 deletions web/admin/src/pages/setting/component/CardRobotDing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { message } from '@ctzhian/ui';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
import { useAppSelector } from '@/store';

const CardRobotDing = ({ kb }: { kb: DomainKnowledgeBaseDetail }) => {
Expand Down Expand Up @@ -151,7 +151,7 @@ const CardRobotDing = ({ kb }: { kb: DomainKnowledgeBaseDetail }) => {
required: 'Client Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='> 钉钉开发平台 > 钉钉应用 > 凭证与基础信息 > Client Secret'
Expand Down
4 changes: 2 additions & 2 deletions web/admin/src/pages/setting/component/CardRobotDiscord.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
DomainAppDetailResp,
} from '@/request/types';
import { getApiV1AppDetail, putApiV1App } from '@/request/App';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
Comment thread
GavanHub marked this conversation as resolved.
import { useAppSelector } from '@/store';

const CardRobotDiscord = ({ kb }: { kb: DomainKnowledgeBaseDetail }) => {
Expand Down Expand Up @@ -117,7 +117,7 @@ const CardRobotDiscord = ({ kb }: { kb: DomainKnowledgeBaseDetail }) => {
required: 'Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='在 Discord 中创建机器人，并获取 Token'
Expand Down
4 changes: 2 additions & 2 deletions web/admin/src/pages/setting/component/CardRobotFeishu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
import { message } from '@ctzhian/ui';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
import {
DomainKnowledgeBaseDetail,
DomainAppDetailResp,
Expand Down Expand Up @@ -150,7 +150,7 @@ const CardRobotFeishu = ({ kb }: { kb: DomainKnowledgeBaseDetail }) => {
required: 'App Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder='> 飞书开放平台 > 凭证与基础信息 > 应用凭证 > App Secret'
Expand Down
8 changes: 4 additions & 4 deletions web/admin/src/pages/setting/component/CardRobotLark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@mui/material';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';

const CardRobotLark = ({
kb,
Expand Down Expand Up @@ -163,7 +163,7 @@ const CardRobotLark = ({
required: 'App Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -186,7 +186,7 @@ const CardRobotLark = ({
required: 'Verify Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -209,7 +209,7 @@ const CardRobotLark = ({
required: 'Encrypt Key',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand Down
8 changes: 4 additions & 4 deletions web/admin/src/pages/setting/component/CardRobotWechatOfficeAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
DomainAppDetailResp,
} from '@/request/types';
import { getApiV1AppDetail, putApiV1App } from '@/request/App';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
import { useAppSelector } from '@/store';
const CardRobotWechatOfficeAccount = ({
kb,
Expand Down Expand Up @@ -168,7 +168,7 @@ const CardRobotWechatOfficeAccount = ({
required: 'App Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -193,7 +193,7 @@ const CardRobotWechatOfficeAccount = ({
required: 'Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -216,7 +216,7 @@ const CardRobotWechatOfficeAccount = ({
required: 'Suite Encoding Aes Key',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand Down
8 changes: 4 additions & 4 deletions web/admin/src/pages/setting/component/CardRobotWecom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
DomainAppDetailResp,
} from '@/request/types';
import { getApiV1AppDetail, putApiV1App } from '@/request/App';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
import { useAppSelector } from '@/store';

const AI_FEEDBACK_OPTIONS = ['内容不准确', '答非所问', '其他'];
Expand Down Expand Up @@ -250,7 +250,7 @@ const CardRobotWecom = ({
required: 'Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -273,7 +273,7 @@ const CardRobotWecom = ({
required: 'Suite Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -296,7 +296,7 @@ const CardRobotWecom = ({
required: 'Suite Encoding Aes Key',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand Down
6 changes: 3 additions & 3 deletions web/admin/src/pages/setting/component/CardRobotWecomAIBot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@mui/material';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
Comment thread
GavanHub marked this conversation as resolved.

const CardRobotWecomAIBot = ({
kb,
Expand Down Expand Up @@ -137,7 +137,7 @@ const CardRobotWecomAIBot = ({
required: 'Suite Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -160,7 +160,7 @@ const CardRobotWecomAIBot = ({
required: 'Suite Encoding Aes Key',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand Down
8 changes: 4 additions & 4 deletions web/admin/src/pages/setting/component/CardRobotWecomService.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
} from '@mui/material';
import { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { FormItem, SettingCardItem } from './Common';
import { FormItem, SettingCardItem, SecretTextField } from './Common';
import UploadFile from '@/components/UploadFile';
import VersionMask from '@/components/VersionMask';
import { PROFESSION_VERSION_PERMISSION } from '@/constant/version';
Expand Down Expand Up @@ -202,7 +202,7 @@ const CardRobotWecomService = ({
required: 'Corp Secret',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -224,7 +224,7 @@ const CardRobotWecomService = ({
required: 'Suite Token',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand All @@ -246,7 +246,7 @@ const CardRobotWecomService = ({
required: 'Suite Encoding Aes Key',
}}
render={({ field }) => (
<TextField
<SecretTextField
{...field}
fullWidth
placeholder=''
Expand Down
43 changes: 41 additions & 2 deletions web/admin/src/pages/setting/component/Common.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,49 @@
import Card from '@/components/Card';
import { ConstsLicenseEdition } from '@/request/types';
import InfoIcon from '@mui/icons-material/Info';
import { Button, Stack, styled, SxProps, Tooltip } from '@mui/material';
import { createContext, useContext } from 'react';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import {
Button,
IconButton,
InputAdornment,
Stack,
styled,
SxProps,
TextField,
TextFieldProps,
Tooltip,
} from '@mui/material';
import { createContext, useContext, useState } from 'react';
import VersionMask from '@/components/VersionMask';

export const SecretTextField = (props: TextFieldProps) => {
const [show, setShow] = useState(false);
return (
<TextField
{...props}
type={show ? 'text' : 'password'}
slotProps={{
...props.slotProps,
input: {
...((props.slotProps?.input ?? {}) as Record<string, unknown>),
endAdornment: (
<InputAdornment position='end'>
<IconButton
onClick={() => setShow(prev => !prev)}
edge='end'
size='small'
Comment thread
GavanHub marked this conversation as resolved.
>
{show ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
},
Comment thread
GavanHub marked this conversation as resolved.
}}
/>
);
};

const StyledForm = styled('form')<{ gap?: number | string }>(
({ theme, gap = 2 }) => ({
display: 'flex',
Expand Down
Loading