adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #969 from SuanmoSuanyangTechnology/feature/components_zy

Browse Source 
Feature/components zy
This commit is contained in:
yingzhao
2026-04-22 14:38:48 +08:00
committed by GitHub
parent 71f62bb591 7cd76444f1
commit 903b4f2a6e
25 changed files with 946 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/src/views/ApiKeyManagement/index.tsx
View File

@@ -1,21 +1,21 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 15:52:50
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 15:52:50
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-22 12:07:40
*/
import React, { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, App, Dropdown, Flex } from 'antd';
import { Button, App, Flex } from 'antd';
import clsx from 'clsx';
import { DeleteOutlined, EditOutlined, EyeOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard'
import type { MenuInfo } from 'rc-menu/lib/interface';
import type { ApiKey, ApiKeyModalRef } from './types';
import ApiKeyModal from './components/ApiKeyModal';
import ApiKeyDetailModal from './components/ApiKeyDetailModal';
import RbCard from '@/components/RbCard'
import MoreDropdown from '@/components/MoreDropdown'
import useDeleteConfirm from '@/hooks/useDeleteConfirm'
import { getApiKeyListUrl, deleteApiKey } from '@/api/apiKey';
import PageScrollList, { type PageScrollListRef } from '@/components/PageScrollList'
import { formatDateTime } from '@/utils/format';
@@ -30,7 +30,8 @@ import RbDescriptions from '@/components/RbDescriptions';
const ApiKeyManagement: React.FC = () => {
// Hooks
const { t } = useTranslation();
const { modal, message } = App.useApp();
const { message } = App.useApp();
const deleteConfirm = useDeleteConfirm();
// Refs
const apiKeyModalRef = useRef<ApiKeyModalRef>(null);
@@ -65,18 +66,9 @@ const ApiKeyManagement: React.FC = () => {
* @param item - API key item to delete
*/
const handleDelete = (item: ApiKey) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: item.name }),
okText: t('common.delete'),
cancelText: t('common.cancel'),
okType: 'danger',
onOk: () => {
deleteApiKey(item.id)
.then(() => {
refresh();
message.success(t('common.deleteSuccess'))
})
}
deleteConfirm({
name: item.name,
onOk: () => deleteApiKey(item.id).then(refresh),
})
}
/**
@@ -103,49 +95,39 @@ const ApiKeyManagement: React.FC = () => {
renderItem={(apiKeyItem) => {
return (
<RbCard
title={
<Flex justify="space-between">
<Flex gap={4} vertical>
{apiKeyItem.name}
<Flex gap={6}>
{apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
{apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
{!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div>{t('apiKey.noScopes')}</div>}
</Flex>
</Flex>
<Dropdown
menu={{
items: [
{
key: 'edit',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
label: t('common.edit'),
onClick: () => handleEdit(apiKeyItem),
},
{
key: 'view',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
label: t('common.view'),
onClick: () => handleView(apiKeyItem),
},
{
key: 'delete',
danger: true,
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
label: t('common.delete'),
onClick: () => handleDelete(apiKeyItem),
},
]
}}
placement="bottomRight"
>
<div className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
</Dropdown>
</Flex>
}
isNeedTooltip={false}
headerClassName="rb:min-h-[78px]!"
title={apiKeyItem.name}
extra={<MoreDropdown
items={[
{
key: 'edit',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
label: t('common.edit'),
onClick: () => handleEdit(apiKeyItem),
},
{
key: 'view',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/eye.svg')]" />,
label: t('common.view'),
onClick: () => handleView(apiKeyItem),
},
{
key: 'delete',
danger: true,
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
label: t('common.delete'),
onClick: () => handleDelete(apiKeyItem),
},
]}
/>}
variant="borderless"
headerClassName="rb:min-h-[42px]!"
titleClassName="rb:line-clamp-1!"
>
<Flex gap={6} className="rb:-mt-2! rb:mb-4!">
{apiKeyItem.scopes?.includes('memory') && <Tag>{t('apiKey.memoryEngine')}</Tag>}
{apiKeyItem.scopes?.includes('rag') && <Tag color="success">{t('apiKey.knowledgeBase')}</Tag>}
{!apiKeyItem.scopes?.includes('memory') && !apiKeyItem.scopes?.includes('rag') && <div className="rb:font-regular!">{t('apiKey.noScopes')}</div>}
</Flex>
<RbDescriptions
items={['id', 'is_expired', 'created_at'].map(key => ({
key,
@@ -166,7 +148,7 @@ const ApiKeyManagement: React.FC = () => {
<Flex align="center" justify="space-between" className="rb:h-8! rb:mt-4! rb:py-1! rb:pl-2.5! rb:pr-1! rb:bg-[#F6F6F6] rb:rounded-md rb:leading-5">
{maskApiKeys(apiKeyItem.api_key)}
<div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat" style={{ backgroundColor: 'rgba(0,0,0,0.08)' }}></div>
<div onClick={() => handleCopy(apiKeyItem.api_key)} className="rb:cursor-pointer rb:rounded-md rb:size-6 rb:bg-[url('@/assets/images/common/copy_dark.svg')] rb:bg-size-[16px_16px] rb:bg-center rb:bg-no-repeat rb:hover:bg-[rgba(0,0,0,0.08)]"></div>
</Flex>
</RbCard>
);

2
web/src/views/ApplicationConfig/components/ToolList/ToolList.tsx
View File

@@ -137,7 +137,7 @@ const ToolList: FC<{ value?: ToolOption[]; onChange?: (config: ToolOption[]) =>
<Card
title={t('application.toolConfiguration')}
extra={
<Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
<Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
}
>
<div className="rb:leading-4.5 rb:text-[12px] rb:mb-2 rb:font-medium">

2
web/src/views/ApplicationConfig/components/VariableList/VariableList.tsx
View File

@@ -60,7 +60,7 @@ interface VariableListProps {
extra={
<Button
size="small"
className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233"
className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]"
onClick={handleAddVariable}
>
+ {t('application.addVariables')}

38
web/src/views/MemberManagement/index.tsx
View File

@@ -10,7 +10,7 @@
*/
import React, { useRef } from 'react';
import { App, Button, Space, Flex } from 'antd';
import { Button, Space } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ColumnsType } from 'antd/es/table';
@@ -20,13 +20,15 @@ import type { Member, MemberModalRef } from './types'
import Tag from '@/components/Tag';
import Table, { type TableRef } from '@/components/Table'
import { formatDateTime } from '@/utils/format';
import TablePageLayout from '@/components/TablePageLayout';
import useDeleteConfirm from '@/hooks/useDeleteConfirm';
/**
* Member management main component
*/
const MemberManagement: React.FC = () => {
const { t } = useTranslation();
const { message, modal } = App.useApp();
const deleteConfirm = useDeleteConfirm();
const memberFormRef = useRef<MemberModalRef>(null);
const tableRef = useRef<TableRef>(null);
@@ -43,20 +45,11 @@ const MemberManagement: React.FC = () => {
}
/** Delete member with confirmation */
const handleDelete = async (member: Member) => {
modal.confirm({
title: t('common.confirmDeleteDesc', { name: member.username }),
okText: t('common.delete'),
cancelText: t('common.cancel'),
okType: 'danger',
onOk: () => {
deleteMember(member.id)
.then(() => {
message.success(t('common.deleteSuccess'));
refreshTable();
})
}
})
const handleDelete = (member: Member) => {
deleteConfirm({
name: member.username,
onOk: () => deleteMember(member.id).then(refreshTable),
});
};
/** Table column configuration */
@@ -105,13 +98,10 @@ const MemberManagement: React.FC = () => {
];
return (
<div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
<Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
<div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('member.memberList')}</div>
<Button type="primary" onClick={() => handleEdit()}>
+ {t('member.createMember')}
</Button>
</Flex>
<TablePageLayout
title={t('member.memberList')}
extra={<Button type="primary" onClick={() => handleEdit()}>+ {t('member.createMember')}</Button>}
>
<Table<Member>
ref={tableRef}
apiUrl={memberListUrl}
@@ -125,7 +115,7 @@ const MemberManagement: React.FC = () => {
ref={memberFormRef}
refreshTable={refreshTable}
/>
</div>
</TablePageLayout>
);
};

15
web/src/views/ModelManagement/List.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:50:10
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-27 19:18:55
* @Last Modified time: 2026-04-22 10:31:49
*/
/**
* Model List View
@@ -11,13 +11,14 @@
*/
import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { Button, Flex, Row, Col, Tooltip, Popover } from 'antd'
import { Button, Flex, Row, Col, Tooltip } from 'antd'
import { useTranslation } from 'react-i18next';
import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
import RbCard from '@/components/RbCard'
import { getModelNewList } from '@/api/models'
import PageEmpty from '@/components/Empty/PageEmpty';
import OverflowTags from '@/components/OverflowTags';
import Tag from '@/components/Tag';
import KeyConfigModal from './components/KeyConfigModal'
import ModelListDetail from './components/ModelListDetail'
@@ -76,13 +77,9 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
<div className="rb:wrap-break-word rb:line-clamp-1">{String(item.provider).charAt(0).toUpperCase() + String(item.provider).slice(1)}</div>
</Tooltip>
<Popover content={
<Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">{item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}</Flex>
}>
<Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">
{item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}
</Flex>
</Popover>
<OverflowTags
items={item.tags.map(tag => <Tag>{t(`modelNew.${tag}`)}</Tag>)}
/>
</Flex>}
isNeedTooltip={false}
footer={<Row gutter={9} className="rb:pt-2!">

24
web/src/views/ModelManagement/components/ModelListDetail.tsx
View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 16:49:45
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-27 18:06:23
* @Last Modified time: 2026-04-22 10:24:32
*/
/**
* Model List Detail Drawer
@@ -12,12 +12,13 @@
import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Switch, Row, Col, Space, Tooltip, Popover } from 'antd'
import { Button, Switch, Row, Col, Tooltip } from 'antd'
import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
import RbDrawer from '@/components/RbDrawer';
import RbCard from '@/components/RbCard/Card'
import Tag from '@/components/Tag';
import OverflowTags from '@/components/OverflowTags';
import PageEmpty from '@/components/Empty/PageEmpty';
import MultiKeyConfigModal from './MultiKeyConfigModal'
import { getModelNewList, updateModelStatus, modelTypeUrl } from '@/api/models'
@@ -139,18 +140,13 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
key={item.id}
title={item.name}
subTitle={
<Popover content={
<Space size={8} className="rb:mt-1!">
<Tag>{t(`modelNew.${item.type}`)}</Tag>
<Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
{item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
</Space>}>
<Space size={8} className="rb:mt-1!">
<Tag>{t(`modelNew.${item.type}`)}</Tag>
<Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
{item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
</Space>
</Popover>}
<OverflowTags
items={[
<Tag>{t(`modelNew.${item.type}`)}</Tag>,
<Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>,
...(item.capability ?? []).map(vo => <Tag>{t(`modelNew.${vo}`)}</Tag>)
]}
/>}
avatarUrl={getLogoUrl(item.logo)}
avatar={
<div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">

78
web/src/views/Ontology/index.tsx
View File

@@ -2,13 +2,13 @@
* @Author: ZhaoYing
* @Date: 2026-02-03 14:10:15
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-03-27 15:03:09
* @Last Modified time: 2026-04-22 11:47:38
*/
import { type FC, useState, useRef } from 'react';
import type { MenuInfo } from 'rc-menu/lib/interface';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Row, Col, Flex, Space, App, Tooltip, Dropdown } from 'antd'
import { Row, Col, Flex, Space, Tooltip } from 'antd'
import SearchInput from '@/components/SearchInput';
import OntologyModal from './components/OntologyModal'
@@ -21,6 +21,9 @@ import { formatDateTime } from '@/utils/format'
import OntologyImportModal from './components/OntologyImportModal'
import OntologyExportModal from './components/OntologyExportModal'
import RbButton from '@/components/RbButton'
import MoreDropdown from '@/components/MoreDropdown'
import useDeleteConfirm from '@/hooks/useDeleteConfirm'
import OverflowTags from '@/components/OverflowTags'
/**
* Ontology management page component
@@ -30,7 +33,7 @@ const Ontology: FC = () => {
// Hooks
const { t } = useTranslation();
const navigate = useNavigate()
const { modal, message } = App.useApp();
const deleteConfirm = useDeleteConfirm();
// State
const [query, setQuery] = useState<Query>({});
@@ -65,18 +68,9 @@ const Ontology: FC = () => {
*/
const handleDelete = (item: OntologyItem, e: MenuInfo) => {
e.domEvent.stopPropagation();
modal.confirm({
title: t('common.confirmDeleteDesc', { name: item.scene_name }),
okText: t('common.delete'),
cancelText: t('common.cancel'),
okType: 'danger',
onOk: () => {
deleteOntologyScene(item.scene_id)
.then(() => {
message.success(t('common.deleteSuccess'))
scrollListRef.current?.refresh()
})
}
deleteConfirm({
name: item.scene_name,
onOk: () => deleteOntologyScene(item.scene_id).then(() => scrollListRef.current?.refresh()),
})
}
@@ -145,27 +139,22 @@ const Ontology: FC = () => {
{item.is_system_default && <Tag color="warning">{t('common.default')}</Tag>}
</Space>
</Flex>
<Dropdown
menu={{
items: [
{
key: 'edit',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
label: t('common.edit'),
onClick: (e: MenuInfo) => handleEdit(item, e),
},
{
key: 'delete',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
label: t('common.delete'),
onClick: (e: MenuInfo) => handleDelete(item, e),
},
]
}}
placement="bottomRight"
>
<div onClick={(e) => e.stopPropagation()} className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
</Dropdown>
<MoreDropdown
items={[
{
key: 'edit',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
label: t('common.edit'),
onClick: (e: MenuInfo) => handleEdit(item, e),
},
{
key: 'delete',
icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
label: t('common.delete'),
onClick: (e: MenuInfo) => handleDelete(item, e),
},
]}
/>
</Flex>
}
isNeedTooltip={false}
@@ -177,16 +166,13 @@ const Ontology: FC = () => {
<div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
</Tooltip>
<Flex gap={8} wrap align="center" className="rb:mt-2!">
<Flex gap={8} className="rb:flex-1 rb:overflow-hidden rb:wrap-break-word! rb:line-clamp-1!">
{item.entity_type?.map((type, i) => (
<span key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</span>
))}
</Flex>
{item.type_num > 3 && (
<span className="rb:bg-[#F6F6F6] rb:rounded-full rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.type_num - 3}</span>
)}
</Flex>
<div className="rb:mt-2">
<OverflowTags
popoverProps={false}
items={[...item.entity_type?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>]}
numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${item.type_num - 3 + (num ? num - 1 : 0)}`}</Tag>}
/>
</div>
<Row className="rb:mt-4!">
{(['created_at', 'updated_at'] as const).map(key => (

2
web/src/views/Skills/components/ToolList/ToolList.tsx
View File

@@ -157,7 +157,7 @@ const ToolList: FC<ToolListProps> = ({value, onChange}) => {
<Card
title={t('application.toolConfiguration')}
extra={
<Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#21233" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
<Button className="rb:h-6! rb:py-0! rb:px-2! rb:rounded-md! rb:text-[#212332]" onClick={handleAddTool}>+ {t('application.addTool')}</Button>
}
>
{toolList.length === 0

26
web/src/views/ToolManagement/Custom.tsx
View File

@@ -16,6 +16,8 @@ import BodyWrapper from '@/components/Empty/BodyWrapper'
import RbCard from '@/components/RbCard'
import { getTools, deleteTool } from '@/api/tools'
import { formatDateTime } from '@/utils/format'
import OverflowTags from '@/components/OverflowTags'
import Tag from '@/components/Tag'
const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }>(({ getStatusTag, keyword }, ref) => {
const { t } = useTranslation();
@@ -110,24 +112,12 @@ const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNo
isNeedTooltip={false}
>
{item.tags?.length > 0
? <Flex gap={8} wrap align="center">
<Flex gap={6}>
{item.tags?.slice(0, 2).map((type, i) => (
<div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
))}
</Flex>
{item.tags.length > 2 && (
<Tooltip
title={<Flex wrap gap={6}>{item.tags?.slice(2, item.tags.length).map((type, i) => (
<div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
))}</Flex>}
color="white"
placement="bottom"
>
<div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.tags.length - 2}</div>
</Tooltip>
)}
</Flex>
? <div>
<OverflowTags
items={item.tags?.map((type, i) => <Tag variant="borderless" color="dark" key={i}>{type}</Tag>)}
numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
/>
</div>
: <div className="rb:text-[#A8A9AA] rb:leading-5">{t('tool.noTags')}</div>
}
<Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5 rb:mt-4!">

26
web/src/views/ToolManagement/Inner.tsx
View File

@@ -17,6 +17,8 @@ import JsonToolModal from './components/JsonToolModal'
import InnerToolModal from './components/InnerToolModal'
import { getTools } from '@/api/tools'
import { InnerConfigData } from './constant'
import OverflowTags from '@/components/OverflowTags'
import Tag from '@/components/Tag'
const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }> = ({ getStatusTag, keyword }) => {
const { t } = useTranslation();
@@ -98,24 +100,12 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: s
<div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{t(`tool.${item.config_data.tool_class}_features`)}</div>
</Tooltip>
<Flex gap={8} wrap align="center" className="rb:mt-2! rb:mb-4!">
<Flex gap={6}>
{InnerConfigData[item.config_data.tool_class].features?.slice(0, 2).map((type, i) => (
<div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{t(`tool.${type}`)}</div>
))}
</Flex>
{InnerConfigData[item.config_data.tool_class].features.length > 2 && (
<Tooltip
title={<Flex wrap gap={6}>{InnerConfigData[item.config_data.tool_class].features?.slice(2, InnerConfigData[item.config_data.tool_class].features.length).map((type, i) => (
<div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{t(`tool.${type}`)}</div>
))}</Flex>}
color="white"
placement="bottom"
>
<div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{InnerConfigData[item.config_data.tool_class].features.length - 2}</div>
</Tooltip>
)}
</Flex>
<div className="rb:mt-2 rb:mb-4">
<OverflowTags
items={InnerConfigData[item.config_data.tool_class].features?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{t(`tool.${type}`)}</Tag>)}
numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
/>
</div>
<Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5">
{item.config_data.tool_class === 'DateTimeTool'

15
web/src/views/UserManagement/index.tsx
View File

@@ -21,6 +21,7 @@ import StatusTag from '@/components/StatusTag'
import { deleteUser, enableUser, getUserListUrl } from '@/api/user'
import ResetPasswordModal from './components/ResetPasswordModal'
import { formatDateTime } from '@/utils/format';
import TablePageLayout from '@/components/TablePageLayout';
const UserManagement: React.FC = () => {
const { t } = useTranslation();
@@ -142,14 +143,10 @@ const UserManagement: React.FC = () => {
];
return (
<div className="rb:h-full rb:overflow-hidden rb:bg-white rb:rounded-lg rb:pt-3 rb:px-3">
<Flex justify="space-between" align="center" className="rb:px-1! rb:mb-3!">
<div className="rb:font-[MiSans-Bold] rb:font-bold rb:text-[#212332] rb:leading-5">{t('user.userList')}</div>
<Button type="primary" onClick={handleCreate}>
+ {t('user.createUser')}
</Button>
</Flex>
<TablePageLayout
title={t('user.userList')}
extra={<Button type="primary" onClick={handleCreate}>+ {t('user.createUser')}</Button>}
>
<Table<User>
ref={tableRef}
apiUrl={getUserListUrl}
@@ -169,7 +166,7 @@ const UserManagement: React.FC = () => {
<ResetPasswordModal
ref={resetPasswordModalRef}
/>
</div>
</TablePageLayout>
);
};