oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add collapsible section for available models in PersonalSettings

Browse Source
This commit is contained in:
CalciumIon
2024-12-15 16:31:00 +08:00
parent f2809917f8
commit e8444edce7
2 changed files with 85 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
web/src/components/PersonalSetting.js
View File

@@ -25,6 +25,7 @@ import {
Space,
Tag,
Typography,
Collapsible,
} from '@douyinfe/semi-ui';
import {
getQuotaPerUnit,
@@ -64,6 +65,8 @@ const PersonalSetting = () => {
const [models, setModels] = useState([]);
const [openTransfer, setOpenTransfer] = useState(false);
const [transferAmount, setTransferAmount] = useState(0);
const [isModelsExpanded, setIsModelsExpanded] = useState(false);
const MODELS_DISPLAY_COUNT = 10; // 默认显示的模型数量
useEffect(() => {
// let user = localStorage.getItem('user');
@@ -189,7 +192,7 @@ const PersonalSetting = () => {
);
const {success, message} = res.data;
if (success) {
showSuccess(t('微信账户绑定成功！'));
showSuccess(t('微信账户绑<EFBFBD><EFBFBD>成功！'));
setShowWeChatBindModal(false);
} else {
showError(message);
@@ -289,10 +292,10 @@ const PersonalSetting = () => {
const copyText = async (text) => {
if (await copy(text)) {
showSuccess('已复制：' + text);
showSuccess(t('已复制：') + text);
} else {
// setSearchKeyword(text);
Modal.error({title: '无法复制到剪贴板，请手动复制', content: text});
Modal.error({title: t('无法复制到剪贴板，请手动复制'), content: text});
}
};
@@ -364,6 +367,80 @@ const PersonalSetting = () => {
</Space>
</>
}
footer={
<>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Typography.Title heading={6}>{t('可用模型')}</Typography.Title>
</div>
<div style={{marginTop: 10}}>
{models.length <= MODELS_DISPLAY_COUNT ? (
<Space wrap>
{models.map((model) => (
<Tag
key={model}
color='cyan'
onClick={() => {
copyText(model);
}}
>
{model}
</Tag>
))}
</Space>
) : (
<>
<Collapsible isOpen={isModelsExpanded}>
<Space wrap>
{models.map((model) => (
<Tag
key={model}
color='cyan'
onClick={() => {
copyText(model);
}}
>
{model}
</Tag>
))}
<Tag
color='blue'
type="light"
style={{ cursor: 'pointer' }}
onClick={() => setIsModelsExpanded(false)}
>
{t('收起')}
</Tag>
</Space>
</Collapsible>
{!isModelsExpanded && (
<Space wrap>
{models.slice(0, MODELS_DISPLAY_COUNT).map((model) => (
<Tag
key={model}
color='cyan'
onClick={() => {
copyText(model);
}}
>
{model}
</Tag>
))}
<Tag
color='blue'
type="light"
style={{ cursor: 'pointer' }}
onClick={() => setIsModelsExpanded(true)}
>
{t('更多')} {models.length - MODELS_DISPLAY_COUNT} {t('个模型')}
</Tag>
</Space>
)}
</>
)}
</div>
</>
}
>
<Descriptions row>
<Descriptions.Item itemKey={t('当前余额')}>

7
web/src/i18n/locales/en.json
View File

@@ -984,7 +984,7 @@
"保存失败，请重试": "Save failed, please try again",
"没有可用的使用信息": "No usage information available",
"使用详情": "Usage details",
"收起": "close",
"收起": "Collapse",
"计费详情": "Billing details",
"提示Token": "Tip Token",
"补全Token": "Complete Token",
@@ -1231,5 +1231,8 @@
"一次调用消耗多少刀，优先级大于模型倍率": "How much USD one call costs, priority over model ratio",
"仅对自定义模型有效": "Only effective for custom models",
"添加模型": "Add model",
"应用更改": "Apply changes"
"应用更改": "Apply changes",
"更多": "Expand more",
"个模型": "models",
"可用模型": "Available models"
}