From 7e51b0422171edb58350f717a5bda399f39f2399 Mon Sep 17 00:00:00 2001
From: JustSong <songquanpeng@foxmail.com>
Date: Sun, 27 Oct 2024 18:31:43 +0800
Subject: [PATCH] feat: able to hide test model selector and balance col

---
 web/default/src/components/ChannelsTable.js | 28 ++++++++++++++++-----
 web/default/src/pages/Channel/index.js      |  4 +--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/web/default/src/components/ChannelsTable.js b/web/default/src/components/ChannelsTable.js
index 48f476a7..6e0ec05d 100644
--- a/web/default/src/components/ChannelsTable.js
+++ b/web/default/src/components/ChannelsTable.js
@@ -59,6 +59,12 @@ function renderBalance(type, balance) {
   }
 }
 
+function isShowDetail() {
+  return localStorage.getItem("show_detail") === "true";
+}
+
+const promptID = "detail"
+
 const ChannelsTable = () => {
   const [channels, setChannels] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -66,7 +72,8 @@ const ChannelsTable = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [searching, setSearching] = useState(false);
   const [updatingBalance, setUpdatingBalance] = useState(false);
-  const [showPrompt, setShowPrompt] = useState(shouldShowPrompt("channel-test"));
+  const [showPrompt, setShowPrompt] = useState(shouldShowPrompt(promptID));
+  const [showDetail, setShowDetail] = useState(isShowDetail());
 
   const loadChannels = async (startIdx) => {
     const res = await API.get(`/api/channel/?p=${startIdx}`);
@@ -120,6 +127,11 @@ const ChannelsTable = () => {
     await loadChannels(activePage - 1);
   };
 
+  const toggleShowDetail = () => {
+    setShowDetail(!showDetail);
+    localStorage.setItem("show_detail", (!showDetail).toString());
+  }
+
   useEffect(() => {
     loadChannels(0)
       .then()
@@ -364,11 +376,13 @@ const ChannelsTable = () => {
         showPrompt && (
           <Message onDismiss={() => {
             setShowPrompt(false);
-            setPromptShown("channel-test");
+            setPromptShown(promptID);
           }}>
             OpenAI 渠道已经不再支持通过 key 获取余额，因此余额显示为 0。对于支持的渠道类型，请点击余额进行刷新。
             <br/>
             渠道测试仅支持 chat 模型，优先使用 gpt-3.5-turbo，如果该模型不可用则使用你所配置的模型列表中的第一个模型。
+            <br/>
+            点击下方详情按钮可以显示余额以及设置额外的测试模型。
           </Message>
         )
       }
@@ -428,6 +442,7 @@ const ChannelsTable = () => {
               onClick={() => {
                 sortChannel('balance');
               }}
+              hidden={!showDetail}
             >
               余额
             </Table.HeaderCell>
@@ -439,7 +454,7 @@ const ChannelsTable = () => {
             >
               优先级
             </Table.HeaderCell>
-            <Table.HeaderCell>测试模型</Table.HeaderCell>
+            <Table.HeaderCell hidden={!showDetail}>测试模型</Table.HeaderCell>
             <Table.HeaderCell>操作</Table.HeaderCell>
           </Table.Row>
         </Table.Header>
@@ -467,7 +482,7 @@ const ChannelsTable = () => {
                       basic
                     />
                   </Table.Cell>
-                  <Table.Cell>
+                  <Table.Cell hidden={!showDetail}>
                     <Popup
                       trigger={<span onClick={() => {
                         updateChannelBalance(channel.id, channel.name, idx);
@@ -494,7 +509,7 @@ const ChannelsTable = () => {
                       basic
                     />
                   </Table.Cell>
-                  <Table.Cell>
+                  <Table.Cell hidden={!showDetail}>
                     <Dropdown
                       placeholder='请选择测试模型'
                       selection
@@ -573,7 +588,7 @@ const ChannelsTable = () => {
 
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan='9'>
+            <Table.HeaderCell colSpan={showDetail ? "10" : "8"}>
               <Button size='small' as={Link} to='/channel/add' loading={loading}>
                 添加新的渠道
               </Button>
@@ -611,6 +626,7 @@ const ChannelsTable = () => {
                 }
               />
               <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+              <Button size='small' onClick={toggleShowDetail}>{showDetail ? "隐藏详情" : "详情"}</Button>
             </Table.HeaderCell>
           </Table.Row>
         </Table.Footer>
diff --git a/web/default/src/pages/Channel/index.js b/web/default/src/pages/Channel/index.js
index 57b64893..edf668b3 100644
--- a/web/default/src/pages/Channel/index.js
+++ b/web/default/src/pages/Channel/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Header, Segment } from 'semantic-ui-react';
 import ChannelsTable from '../../components/ChannelsTable';
 
-const File = () => (
+const Channel = () => (
   <>
     <Segment>
       <Header as='h3'>管理渠道</Header>
@@ -11,4 +11,4 @@ const File = () => (
   </>
 );
 
-export default File;
+export default Channel;