style: clean up whisper model layout

src/pages/SettingsPage.scss

@@ -1868,54 +1868,106 @@
 
 .model-status-card {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
-  align-items: center;
+  align-items: stretch;
-  gap: 16px;
+  gap: 14px;
 }
 
 .model-info {
-  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   min-width: 0;
 
+  .model-name-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
   .model-name {
     font-size: 15px;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 6px;
   }
 
-  .model-path {
+  .model-size {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 9px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .model-meta {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    align-items: flex-start;
+    gap: 10px;
 
     .status-indicator {
       display: inline-flex;
       align-items: center;
       gap: 4px;
+      width: fit-content;
+      padding: 4px 10px;
+      border-radius: 999px;
       font-size: 12px;
-      font-weight: 500;
+      font-weight: 600;
 
       &.success {
+        background: rgba(16, 185, 129, 0.1);
+        border: 1px solid rgba(16, 185, 129, 0.2);
         color: #10b981;
       }
 
       &.warning {
+        background: rgba(245, 158, 11, 0.1);
+        border: 1px solid rgba(245, 158, 11, 0.2);
         color: #f59e0b;
       }
     }
 
+    .model-path-block {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px 12px;
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      background: var(--bg-secondary);
+    }
+
+    .path-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-tertiary);
+      letter-spacing: 0.02em;
+    }
+
     .path-text {
       font-size: 12px;
       color: var(--text-tertiary);
       font-family: monospace;
-      word-break: break-all;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }
 
 .model-actions {
-  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  padding-top: 14px;
+  border-top: 1px solid var(--border-color);
 
   .btn-download {
     display: inline-flex;
@@ -1950,16 +2002,18 @@
   .download-status {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 8px;
-    width: 280px;
+    width: 100%;
+    max-width: 420px;
 
     .status-header,
     .progress-info {
-      // specific layout class
       display: flex;
       justify-content: space-between;
-      align-items: center; // Align vertically
+      align-items: center;
       width: 100%;
+      gap: 12px;
+      flex-wrap: wrap;
     }
 
     .percent {
@@ -1973,6 +2027,7 @@
     .details {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: 6px;
       font-size: 12px;
       color: var(--text-secondary);
@@ -2047,10 +2102,12 @@
 .path-selector {
   display: flex;
   gap: 8px;
+  flex-wrap: wrap;
 
   input {
     margin-bottom: 0 !important;
     flex: 1;
+    min-width: 220px;
     font-family: monospace;
     font-size: 12px;
   }

src/pages/SettingsPage.tsx

@@ -1425,6 +1425,8 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
       </div>
     </div>
   )
+  const resolvedWhisperModelPath = whisperModelDir || whisperModelStatus?.modelPath || ''
+
   const renderModelsTab = () => (
     <div className="tab-content">
       <div className="form-group">
@@ -1439,42 +1441,52 @@ function SettingsPage({ onClose }: SettingsPageProps = {}) {
         <div className="setting-control vertical has-border">
           <div className="model-status-card">
             <div className="model-info">
-              <div className="model-name">SenseVoiceSmall (245 MB)</div>
+              <div className="model-name-row">
-              <div className="model-path">
+                <div className="model-name">SenseVoiceSmall</div>
+                <span className="model-size">245 MB</span>
+              </div>
+              <div className="model-meta">
                 {whisperModelStatus?.exists ? (
                   <span className="status-indicator success"><Check size={14} /> 已安装</span>
                 ) : (
                   <span className="status-indicator warning">未安装</span>
                 )}
-                {whisperModelDir && <div className="path-text" title={whisperModelDir}>{whisperModelDir}</div>}
+                {resolvedWhisperModelPath && (
+                  <div className="model-path-block">
+                    <span className="path-label">模型目录</span>
+                    <div className="path-text" title={resolvedWhisperModelPath}>{resolvedWhisperModelPath}</div>
+                  </div>
+                )}
               </div>
             </div>
-            <div className="model-actions">
+            {(!whisperModelStatus?.exists || isWhisperDownloading) && (
-              {!whisperModelStatus?.exists && !isWhisperDownloading && (
+              <div className="model-actions">
-                <button
+                {!whisperModelStatus?.exists && !isWhisperDownloading && (
-                  className="btn-download"
+                  <button
-                  onClick={handleDownloadWhisperModel}
+                    className="btn-download"
-                >
+                    onClick={handleDownloadWhisperModel}
-                  <Download size={16} /> 下载模型
+                  >
-                </button>
+                    <Download size={16} /> 下载模型
-              )}
+                  </button>
-              {isWhisperDownloading && (
+                )}
-                <div className="download-status">
+                {isWhisperDownloading && (
-                  <div className="status-header">
+                  <div className="download-status">
-                    <span className="percent">{Math.round(whisperDownloadProgress)}%</span>
+                    <div className="status-header">
-                    {whisperProgressData.total > 0 && (
+                      <span className="percent">{Math.round(whisperDownloadProgress)}%</span>
-                      <span className="details">
+                      {whisperProgressData.total > 0 && (
-                        {formatBytes(whisperProgressData.downloaded)} / {formatBytes(whisperProgressData.total)}
+                        <span className="details">
-                        <span className="speed">({formatBytes(whisperProgressData.speed)}/s)</span>
+                          {formatBytes(whisperProgressData.downloaded)} / {formatBytes(whisperProgressData.total)}
-                      </span>
+                          <span className="speed">({formatBytes(whisperProgressData.speed)}/s)</span>
-                    )}
+                        </span>
+                      )}
+                    </div>
+                    <div className="progress-bar-mini">
+                      <div className="fill" style={{ width: `${whisperDownloadProgress}%` }}></div>
+                    </div>
                   </div>
-                  <div className="progress-bar-mini">
+                )}
-                    <div className="fill" style={{ width: `${whisperDownloadProgress}%` }}></div>
+              </div>
-                  </div>
+            )}
-                </div>
-              )}
-            </div>
           </div>
 
           <div className="sub-setting">