Merge pull request #152 from itmisx/feat/web-balance-collapse

✨ feat: web-balance-collapse

Author: itmisx

tui/model.go

@@ -2279,8 +2279,9 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		return m, nil
 
 	case balanceMsg:
-		// 余额查询回执:更新右栏「模型厂商」段展示的剩余金额。
+		// 余额查询回执:更新右栏「模型厂商」段展示的剩余金额,并广播给 web 端动态更新。
 		m.applyBalance(msg)
+		m.broadcast(web.Event{Kind: "balance", Text: m.balance})
 		return m, nil
 
 	case agent.VisionUnsupportedMsg:

web/hub.go

@@ -69,6 +69,7 @@ type Snapshot struct {
 	Sandbox     string        `json:"sandbox"`     // off | native | docker
 	WorkingMode string        `json:"workingMode"` // karpathy | openspec | superpowers
 	CodeGraph   string        `json:"codegraph"`   // 代码图谱状态 token
+	Balance     string        `json:"balance"`     // 账户剩余余额展示串(如 "¥110.00");"" 未探到,"-" 不支持
 	Sessions    []SessionInfo `json:"sessions"`
 }
 
@@ -332,6 +333,10 @@ func (h *Hub) apply(ev Event) Event {
 			h.snap.CodeGraph = ev.Text
 		}
 
+	case "balance":
+		// 余额可能从有值变 "-"(切到不支持的供应商),不能用非空守卫,直接覆盖。
+		h.snap.Balance = ev.Text
+
 	case "sessions":
 		h.snap.Sessions = append([]SessionInfo(nil), ev.Sessions...)
 

web/static/app.js

@@ -58,8 +58,14 @@ const I18N = {
     'skill.noresult': '无结果',
     workspace: '工作区',
     'panel.vendor': '模型厂商',
+    'panel.endpoint': '接口',
+    'panel.balance': '余额',
     'panel.curmodel': '当前模型',
     'panel.context': '上下文',
+    'pane.hide_sessions': '收起会话栏',
+    'pane.show_sessions': '展开会话栏',
+    'pane.hide_status': '收起状态栏',
+    'pane.show_status': '展开状态栏',
     'panel.todo': '待办',
     'panel.plan': '计划',
     'panel.tools': '工具调用',
@@ -139,8 +145,14 @@ const I18N = {
     'skill.noresult': 'No results',
     workspace: 'Workspace',
     'panel.vendor': 'Vendor',
+    'panel.endpoint': 'Endpoint',
+    'panel.balance': 'Balance',
     'panel.curmodel': 'Model',
     'panel.context': 'Context',
+    'pane.hide_sessions': 'Collapse sessions',
+    'pane.show_sessions': 'Expand sessions',
+    'pane.hide_status': 'Collapse status',
+    'pane.show_status': 'Expand status',
     'panel.todo': 'Todo',
     'panel.plan': 'Plan',
     'panel.tools': 'Tool Calls',
@@ -214,7 +226,11 @@ createApp({
       sandbox: 'native',
       workingMode: 'karpathy',
       codegraph: '',
+      balance: '',     // 账户剩余余额展示串(¥110.00);"" 不显示,"-" 不支持
       sessions: [],
+      // 两侧栏折叠态(本地持久化,刷新保留)
+      sidebarCollapsed: localStorage.getItem('deepx.sidebarCollapsed') === '1',
+      statusCollapsed: localStorage.getItem('deepx.statusCollapsed') === '1',
       menuOpen: null, // 当前展开"…"菜单的会话 id
       routingOptions: ROUTING_OPTIONS,
       modeOptions: MODE_OPTIONS,
@@ -391,6 +407,15 @@ createApp({
       ta.style.height = 'auto';
       ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
     },
+    // 折叠/展开左侧会话栏 / 右侧状态栏,持久化到 localStorage(刷新保留)。
+    toggleSidebar() {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+      localStorage.setItem('deepx.sidebarCollapsed', this.sidebarCollapsed ? '1' : '0');
+    },
+    toggleStatus() {
+      this.statusCollapsed = !this.statusCollapsed;
+      localStorage.setItem('deepx.statusCollapsed', this.statusCollapsed ? '1' : '0');
+    },
     syncMention() {
       const ta = this.$refs.ta;
       if (!ta) return;
@@ -654,6 +679,7 @@ createApp({
       if (s.sandbox) this.sandbox = s.sandbox;
       if (s.workingMode) this.workingMode = s.workingMode;
       this.codegraph = s.codegraph || '';
+      this.balance = s.balance || '';
       this.sessions = s.sessions || [];
       // 推断流式气泡:最后一条是 assistant 且还在 streaming 则继续往里追加
       const last = this.messages.length - 1;
@@ -789,6 +815,10 @@ createApp({
         case 'codegraph':
           if (ev.text) this.codegraph = ev.text;
           break;
+        case 'balance':
+          // 余额可能从有值变 "-"(切到不支持的供应商),直接覆盖,不用非空守卫。
+          this.balance = ev.text || '';
+          break;
         case 'sessions':
           this.sessions = ev.sessions || [];
           break;

web/static/index.html

@@ -24,7 +24,7 @@
 
     <main class="layout">
       <!-- 最左:会话列表(顶部新建按钮) -->
-      <nav class="sessions-pane">
+      <nav class="sessions-pane" :class="{ collapsed: sidebarCollapsed }">
         <button class="new-session-btn" :disabled="streaming" @click="newSession">{{ t('session.new') }}</button>
         <div class="sessions-list">
           <div v-if="!sessions.length" class="empty">—</div>
@@ -54,6 +54,18 @@
 
       <!-- 中:聊天 -->
       <section class="chat">
+        <!-- 顶栏:左右两个折叠按钮(始终可见,折叠后用它再展开) -->
+        <div class="chat-topbar">
+          <button class="pane-toggle" @click="toggleSidebar"
+                  :title="sidebarCollapsed ? t('pane.show_sessions') : t('pane.hide_sessions')">
+            {{ sidebarCollapsed ? '☰' : '⟨' }}
+          </button>
+          <div class="topbar-spacer"></div>
+          <button class="pane-toggle" @click="toggleStatus"
+                  :title="statusCollapsed ? t('pane.show_status') : t('pane.hide_status')">
+            {{ statusCollapsed ? '☷' : '⟩' }}
+          </button>
+        </div>
         <div class="messages" ref="msgList">
           <!-- 空会话:补一句欢迎语,避免一片空白 -->
           <div v-if="!messages.length && !streaming" class="welcome">
@@ -197,15 +209,16 @@
       </section>
 
       <!-- 右:状态(workspace 段在最上,下面状态/规划/工具三段常驻,无内容时留空) -->
-      <aside class="status">
+      <aside class="status" :class="{ collapsed: statusCollapsed }">
         <div class="sec">
           <div class="sec-title">◆ {{ t('workspace') }}</div>
           <div class="ws-path" :title="workspace">{{ workspace || '—' }}</div>
         </div>
 
         <div class="sec" v-if="vendor">
           <div class="sec-title">◆ {{ t('panel.vendor') }}</div>
-          <div class="ws-path" :title="vendor">{{ vendor }}</div>
+          <div class="kv"><span>{{ t('panel.endpoint') }}</span><b class="path" :title="vendor">{{ vendor }}</b></div>
+          <div class="kv" v-if="balance"><span>{{ t('panel.balance') }}</span><b>{{ balance }}</b></div>
         </div>
 
         <div class="sec">

web/static/styles.css

@@ -63,6 +63,23 @@ body {
   background: var(--panel); overflow-y: auto; padding: 14px;
 }
 
+/* 两侧栏折叠:收到 0 宽并去掉边框/内边距,中间聊天区自动撑满 */
+.sessions-pane.collapsed, .status.collapsed {
+  width: 0; min-width: 0; padding: 0; border: 0; overflow: hidden;
+}
+/* 中间栏顶部:左右两个折叠按钮始终可见(折叠后靠它再展开) */
+.chat-topbar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
+}
+.chat-topbar .topbar-spacer { flex: 1; }
+.pane-toggle {
+  background: transparent; border: 1px solid var(--border); color: var(--dim);
+  border-radius: 6px; padding: 2px 9px; cursor: pointer; font-size: 13px; line-height: 1.4;
+  transition: color .12s, border-color .12s;
+}
+.pane-toggle:hover { color: var(--fg); border-color: var(--accent2); }
+
 /* 聊天消息 */
 .messages { flex: 1; overflow-y: auto; padding: 18px 20px; }
 /* 空会话欢迎语 */
@@ -144,9 +161,9 @@ body {
 /* 右栏 section */
 .sec { margin-bottom: 20px; }
 .sec-title { font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; }
-.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 2px 0; }
+.kv { display: flex; justify-content: flex-start; gap: 6px; font-size: 12px; padding: 2px 0; }
 .kv span { color: var(--dim); flex-shrink: 0; }
-.kv b { font-weight: 500; text-align: right; word-break: break-all; }
+.kv b { font-weight: 500; word-break: break-all; }
 .kv b.active { color: var(--accent); }
 .kv b.path { color: var(--cyan); }