refactor: 根级 src/src-tauri/server 布局 + 设置左导航搜索 + 语言切换 + DataGrip 高亮 + 断连横幅移除

src/SettingsModal.tsx

@@ -82,6 +82,7 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
   const openConnectionList = useWorkspaceStore((s) => s.openConnectionList);
 
   const [drivers, setDrivers] = useState<DriverStatusItem[] | null>(null);
+  const [navSearch, setNavSearch] = useState("");
   const [version, setVersion] = useState<string>("");
 
   useEffect(() => {
@@ -99,19 +100,37 @@ export function SettingsModal({ onClose }: { onClose: () => void }) {
   return (
     <OpsModal variant="info" title="设置" onOk={onClose}>
       <div className="flex" style={{ minWidth: 560, minHeight: 340 }}>
-        {/* 左导航 */}
-        <nav className="w-36 shrink-0 space-y-px border-r pr-1" style={{ borderColor: "var(--ops-border-soft)" }}>
-          {TABS.map((t) => (
+        {/* 左导航:搜索 + 图标主标题 + 副文案(对齐 opsxshell 质感) */}
+        <nav className="w-52 shrink-0 border-r pr-1" style={{ borderColor: "var(--ops-border-soft)" }}>
+          <input
+            className="ops-input mb-2 h-7 w-full text-[12px]"
+            placeholder="搜索设置…"
+            value={navSearch}
+            onChange={(e) => setNavSearch(e.target.value)}
+          />
+          {TABS.filter((t) => {
+            const q = navSearch.trim().toLowerCase();
+            if (!q) return true;
+            return (t.label + t.desc).toLowerCase().includes(q);
+          }).map((t) => (
             <button
               key={t.id}
               type="button"
-              className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] transition ${
-                tab === t.id ? "ops-tree-item-active font-medium" : "opacity-70 hover:opacity-100"
+              className={`flex w-full items-center gap-2 rounded px-2 py-2 text-left transition ${
+                tab === t.id
+                  ? "bg-[color-mix(in_srgb,var(--ops-accent)_12%,transparent)]"
+                  : "opacity-75 hover:opacity-100"
               }`}
+              style={tab === t.id ? { boxShadow: "inset 2px 0 0 var(--ops-accent)" } : undefined}
               onClick={() => setTab(t.id)}
             >
-              <span className="w-4 text-center">{t.icon}</span>
-              <span>{t.label}</span>
+              <span className="w-4 text-center text-[13px]" style={tab === t.id ? { color: "var(--ops-accent)" } : { color: "var(--ops-muted)" }}>
+                {t.icon}
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block text-[12px] font-medium">{t.label}</span>
+                <span className="block text-[10px]" style={{ color: "var(--ops-muted)" }}>{t.desc}</span>
+              </span>
             </button>
           ))}
         </nav>