From e8444edce7bb440c3cd1211d768d0597258591dc Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Sun, 15 Dec 2024 16:31:00 +0800
Subject: [PATCH] feat: Add collapsible section for available models in
 PersonalSettings

---
 web/src/components/PersonalSetting.js | 83 ++++++++++++++++++++++++++-
 web/src/i18n/locales/en.json          |  7 ++-
 2 files changed, 85 insertions(+), 5 deletions(-)

diff --git a/web/src/components/PersonalSetting.js b/web/src/components/PersonalSetting.js
index c2984799..e92918e8 100644
--- a/web/src/components/PersonalSetting.js
+++ b/web/src/components/PersonalSetting.js
@@ -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('微信账户绑��成功！'));
             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('当前余额')}>
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 51b2c510..7aac2b5d 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -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"
 }
\ No newline at end of file