Merge pull request #37 from Jasonzhu1207/fix/insight-settings-ui-polish

fix(settings): polish insight context controls

src/pages/SettingsPage.scss

@@ -915,6 +915,29 @@
   color: var(--text-secondary);
 }
 
+.insight-collapsible-setting {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: grid-template-rows 0.22s ease, opacity 0.18s ease, transform 0.2s ease;
+
+  &.expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  &.collapsed {
+    pointer-events: none;
+  }
+}
+
+.insight-collapsible-setting-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
 /* Premium Switch Style */
 .switch {
   position: relative;
@@ -3616,22 +3639,35 @@
   }
 
   &.insight-social-tab {
+    --insight-moments-column-width: 76px;
+    --insight-social-column-width: minmax(220px, 300px);
+    --insight-status-column-width: 82px;
+    --insight-social-list-grid: minmax(0, 1fr) var(--insight-moments-column-width) var(--insight-social-column-width) var(--insight-status-column-width);
+
     .anti-revoke-list-header {
-      grid-template-columns: minmax(0, 1fr) 86px minmax(240px, 340px) auto;
+      grid-template-columns: var(--insight-social-list-grid);
+      gap: 14px;
 
       .insight-moments-column-title {
+        display: flex;
+        justify-content: center;
         color: var(--text-tertiary);
-        text-align: center;
       }
 
       .insight-social-column-title {
+        min-width: 0;
+        color: var(--text-tertiary);
+      }
+
+      .anti-revoke-status-column-title {
+        justify-self: end;
         color: var(--text-tertiary);
       }
     }
 
     .anti-revoke-row {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) 86px minmax(240px, 340px) auto;
+      grid-template-columns: var(--insight-social-list-grid);
       align-items: center;
       gap: 14px;
     }
@@ -3772,9 +3808,10 @@
     }
 
     .anti-revoke-row-status {
-      justify-self: flex-end;
+      justify-self: end;
       align-items: flex-end;
       max-width: none;
+      min-width: 0;
     }
   }
 

src/pages/SettingsPage.tsx

@@ -3322,27 +3322,30 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
         </div>
       </div>
 
-      {aiInsightAllowContext && (
+      <div className={`insight-collapsible-setting ${aiInsightAllowContext ? 'expanded' : 'collapsed'}`} aria-hidden={!aiInsightAllowContext}>
-        <div className="form-group">
+        <div className="insight-collapsible-setting-inner">
-          <label>发送近期对话条数</label>
+          <div className="form-group">
-          <span className="form-hint">
+            <label>发送近期对话条数</label>
-            发送给 AI 的聊天记录最大条数。条数越多分析越准确，token 消耗也越多。
+            <span className="form-hint">
-          </span>
+              发送给 AI 的聊天记录最大条数。条数越多分析越准确，token 消耗也越多。
-          <input
+            </span>
-            type="number"
+            <input
-            className="field-input"
+              type="number"
-            value={aiInsightContextCount}
+              className="field-input"
-            min={1}
+              value={aiInsightContextCount}
-            max={200}
+              min={1}
-            onChange={(e) => {
+              max={200}
-              const val = Math.max(1, Math.min(200, parseInt(e.target.value, 10) || 40))
+              disabled={!aiInsightAllowContext}
-              setAiInsightContextCount(val)
+              onChange={(e) => {
-              scheduleConfigSave('aiInsightContextCount', () => configService.setAiInsightContextCount(val))
+                const val = Math.max(1, Math.min(200, parseInt(e.target.value, 10) || 40))
-            }}
+                setAiInsightContextCount(val)
-            style={{ width: 100 }}
+                scheduleConfigSave('aiInsightContextCount', () => configService.setAiInsightContextCount(val))
-          />
+              }}
+              style={{ width: 100 }}
+            />
+          </div>
         </div>
-      )}
+      </div>
 
       <div className="divider" />
 
@@ -3369,27 +3372,30 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
         </div>
       </div>
 
-      {aiInsightAllowMomentsContext && (
+      <div className={`insight-collapsible-setting ${aiInsightAllowMomentsContext ? 'expanded' : 'collapsed'}`} aria-hidden={!aiInsightAllowMomentsContext}>
-        <div className="form-group">
+        <div className="insight-collapsible-setting-inner">
-          <label>发送近期朋友圈条数</label>
+          <div className="form-group">
-          <span className="form-hint">
+            <label>发送近期朋友圈条数</label>
-            仅提取人类可读文本原文，不会拼接朋友圈原始 XML 字段。
+            <span className="form-hint">
-          </span>
+              仅提取人类可读文本原文，不会拼接朋友圈原始 XML 字段。
-          <input
+            </span>
-            type="number"
+            <input
-            className="field-input"
+              type="number"
-            value={aiInsightMomentsContextCount}
+              className="field-input"
-            min={1}
+              value={aiInsightMomentsContextCount}
-            max={20}
+              min={1}
-            onChange={(e) => {
+              max={20}
-              const val = Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 5))
+              disabled={!aiInsightAllowMomentsContext}
-              setAiInsightMomentsContextCount(val)
+              onChange={(e) => {
-              scheduleConfigSave('aiInsightMomentsContextCount', () => configService.setAiInsightMomentsContextCount(val))
+                const val = Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 5))
-            }}
+                setAiInsightMomentsContextCount(val)
-            style={{ width: 100 }}
+                scheduleConfigSave('aiInsightMomentsContextCount', () => configService.setAiInsightMomentsContextCount(val))
-          />
+              }}
+              style={{ width: 100 }}
+            />
+          </div>
         </div>
-      )}
+      </div>
 
       <div className="divider" />
 
@@ -3428,29 +3434,32 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
         )}
       </div>
 
-      {aiInsightAllowSocialContext && (
+      <div className={`insight-collapsible-setting ${aiInsightAllowSocialContext ? 'expanded' : 'collapsed'}`} aria-hidden={!aiInsightAllowSocialContext}>
-        <div className="form-group">
+        <div className="insight-collapsible-setting-inner">
-          <label>发送近期社交平台内容条数</label>
+          <div className="form-group">
-          <span className="form-hint">
+            <label>发送近期社交平台内容条数</label>
-            当前仅支持微博最近发帖。
+            <span className="form-hint">
-            <br />
+              当前仅支持微博最近发帖。
-            <strong>不建议超过 5，避免触发平台风控。</strong>
+              <br />
-          </span>
+              <strong>不建议超过 5，避免触发平台风控。</strong>
-          <input
+            </span>
-            type="number"
+            <input
-            className="field-input"
+              type="number"
-            value={aiInsightSocialContextCount}
+              className="field-input"
-            min={1}
+              value={aiInsightSocialContextCount}
-            max={5}
+              min={1}
-            onChange={(e) => {
+              max={5}
-              const val = Math.max(1, Math.min(5, parseInt(e.target.value, 10) || 3))
+              disabled={!aiInsightAllowSocialContext}
-              setAiInsightSocialContextCount(val)
+              onChange={(e) => {
-              scheduleConfigSave('aiInsightSocialContextCount', () => configService.setAiInsightSocialContextCount(val))
+                const val = Math.max(1, Math.min(5, parseInt(e.target.value, 10) || 3))
-            }}
+                setAiInsightSocialContextCount(val)
-            style={{ width: 100 }}
+                scheduleConfigSave('aiInsightSocialContextCount', () => configService.setAiInsightSocialContextCount(val))
-          />
+              }}
+              style={{ width: 100 }}
+            />
+          </div>
         </div>
-      )}
+      </div>
 
       <div className="divider" />
       {/* 自定义 System Prompt */}
@@ -3728,7 +3737,7 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
                     <span>对话（{filteredSessions.length}）</span>
                     <span className="insight-moments-column-title">朋友圈</span>
                     <span className="insight-social-column-title">社交平台（微博）</span>
-                    <span>状态</span>
+                    <span className="anti-revoke-status-column-title">状态</span>
                   </div>
                   {filteredSessions.map((session) => {
                     const isSelected = aiInsightFilterList.has(session.username)