@wenbin_wb/dsh-bridge 2.2.5 → 2.2.6

package/client/client.js

@@ -42,6 +42,7 @@ var BRIDGE_ENDPOINTS = {
   resetCloudflared: "resetCloudflared",
   saveCustomTunnelConfig: "saveCustomTunnelConfig",
   checkVersion: "checkVersion",
+  upgradePlugin: "upgradePlugin",
   // 平台管理器（多 IM 平台统一接口）
   listPlatforms: "listPlatforms",
   platformLogin: "platformLogin",
@@ -103,6 +104,59 @@ var s = {
   warn: { background: "var(--dsw-alias-state-warn-bg,#fffbeb)", border: "1px solid var(--dsw-alias-state-warn-border,#fde68a)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-state-warn-primary,#92400e)", lineHeight: 1.6 },
   tip: { background: "var(--dsw-alias-bg-layer-2,#f9fafb)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-label-secondary,#6b7280)", lineHeight: 1.6 }
 };
+var Icons = {
+  wechat: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M8.5 2C4.36 2 1 4.91 1 8.5c0 2.01 1.05 3.81 2.69 4.97l-.69 2.06 2.45-1.22c.94.43 1.98.69 3.05.69.21 0 .42-.01.62-.03-.23-.62-.37-1.28-.37-1.97 0-3.59 3.36-6.5 7.5-6.5.21 0 .41.01.62.03C15.87 4.54 12.44 2 8.5 2zM6 6.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm7.5 3.5c-3.59 0-6.5 2.46-6.5 5.5 0 1.66.86 3.14 2.21 4.1l-.56 1.69 2.01-1c.78.36 1.64.57 2.54.57 3.59 0 6.5-2.46 6.5-5.5s-2.91-5.5-6.5-5.5zm-2 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })
+  ),
+  qq: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C7.58 2 4 5.37 4 9.53c0 1.95.78 3.73 2.07 5.07-.37 1.15-.99 2.19-1.8 3.08-.18.2-.04.52.23.52 2.22 0 3.99-1.07 4.9-1.86.8.25 1.66.39 2.6.39 4.42 0 8-3.37 8-7.53S16.42 2 12 2zm-3 8a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm6 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" })
+  ),
+  feishu: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2.5L3.5 11.2l6.8 1.8 2.2 6.5 1.8-4.7 5.2-1.4L12 2.5zm-.8 11.1l-4.1-1.1 6.5-6.6-4.2 8.3 1.8-.6z" })
+  ),
+  telegram: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z" })
+  ),
+  lan: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.29 19.3a1 1 0 0 0 1.41 1.41l1.7-1.7C9.02 19.64 10.46 20 12 20c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" })
+  ),
+  tunnel: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z" })
+  ),
+  bot: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M20 9V7c0-1.1-.9-2-2-2h-3c0-1.66-1.34-3-3-3S9 3.34 9 5H6c-1.1 0-2 .9-2 2v2c-1.66 0-3 1.34-3 3s1.34 3 3 3v4c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4c1.66 0 3-1.34 3-3s-1.34-3-3-3zm-2 10H6V7h12v12zm-9-6c-.83 0-1.5-.67-1.5-1.5S8.17 10 9 10s1.5.67 1.5 1.5S9.83 13 9 13zm6 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" })
+  ),
+  github: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 13, height: 13, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" })
+  ),
+  refresh: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", ...props },
+    React.createElement("path", { d: "M23 4v6h-6M1 20v-6h6" }),
+    React.createElement("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
+  ),
+  check: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", ...props },
+    React.createElement("polyline", { points: "20 6 9 17 4 12" })
+  )
+};
 function useCopy() {
   const [copied, setCopied] = React.useState(false);
   const copy = React.useCallback((text) => {
@@ -472,7 +526,15 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       React.createElement(
         "div",
         null,
-        React.createElement("div", { style: s.label }, platformName),
+        React.createElement(
+          "div",
+          { style: { ...s.label, display: "flex", alignItems: "center", gap: 7 } },
+          platformId === "wechat" && React.createElement(Icons.wechat, { style: { color: "#07C160", width: 20, height: 20 } }),
+          platformId === "qq" && React.createElement(Icons.qq, { style: { color: "#12B7F5", width: 20, height: 20 } }),
+          platformId === "feishu" && React.createElement(Icons.feishu, { style: { color: "#00D6B9", width: 20, height: 20 } }),
+          platformId === "telegram" && React.createElement(Icons.telegram, { style: { color: "#24A1DE", width: 20, height: 20 } }),
+          platformName
+        ),
         React.createElement("div", { style: { ...s.muted, marginTop: 2 } }, platformDesc)
       ),
       React.createElement(StatusTag, { status: platform?.status, running: connected })
@@ -887,7 +949,11 @@ function UpgradeCommandRow({ cmd }) {
         color: "var(--dsw-alias-label-secondary,#6b7280)",
         flex: 1,
         minWidth: 0,
-        wordBreak: "break-all"
+        wordBreak: "break-all",
+        background: "var(--dsw-alias-bg-layer-1,#ffffff)",
+        padding: "4px 8px",
+        borderRadius: 6,
+        border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)"
       }
     }, cmd),
     React.createElement("button", {
@@ -900,6 +966,9 @@ function UpgradeCommandRow({ cmd }) {
 function VersionBanner({ rpcCall }) {
   const [info, setInfo] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
+  const [upgrading, setUpgrading] = React.useState(false);
+  const [upgradeResult, setUpgradeResult] = React.useState(null);
+  const [showManual, setShowManual] = React.useState(false);
   const check = React.useCallback(async () => {
     setLoading(true);
     try {
@@ -913,6 +982,27 @@ function VersionBanner({ rpcCall }) {
     check();
   }, [check]);
   const hasUpdate = info?.latest && info?.current && !info.error && semverGt(info.latest, info.current);
+  const isLatest = info?.latest && info?.current && !info.error && !semverGt(info.latest, info.current);
+  const handleUpgrade = React.useCallback(async () => {
+    if (!info?.latest || upgrading) return;
+    setUpgrading(true);
+    setUpgradeResult(null);
+    try {
+      const r = await rpcCall(BRIDGE_ENDPOINTS.upgradePlugin, { version: info.latest });
+      if (r?.ok && r.value?.ok) {
+        setUpgradeResult({ ok: true, message: `\u5DF2\u6210\u529F\u5347\u7EA7\u5230 v${info.latest}\uFF01\u8BF7\u91CD\u542F DSH \u670D\u52A1\u4F7F\u65B0\u7248\u672C\u751F\u6548\u3002` });
+        setTimeout(() => check(), 3e3);
+      } else {
+        setUpgradeResult({ ok: false, message: r?.value?.error || r?.error?.message || "\u5347\u7EA7\u5931\u8D25" });
+        setShowManual(true);
+      }
+    } catch (e) {
+      setUpgradeResult({ ok: false, message: e.message || "\u5347\u7EA7\u8BF7\u6C42\u5931\u8D25" });
+      setShowManual(true);
+    } finally {
+      setUpgrading(false);
+    }
+  }, [info?.latest, upgrading, rpcCall, check]);
   const links = React.createElement(
     "div",
     { style: { display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" } },
@@ -921,95 +1011,174 @@ function VersionBanner({ rpcCall }) {
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u2B50 GitHub"),
+    }, React.createElement(Icons.github), "GitHub"),
     React.createElement("a", {
       href: RELEASES_URL,
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u{1F4CB} \u66F4\u65B0\u65E5\u5FD7"),
+    }, "\u66F4\u65B0\u65E5\u5FD7"),
     React.createElement("a", {
       href: ISSUES_URL,
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u{1F41B} \u53CD\u9988 Bug")
+    }, "\u53CD\u9988 Issue")
   );
-  if (hasUpdate) {
-    const cmds = upgradeCommands(info.latest);
-    return React.createElement(
+  return React.createElement(
+    "div",
+    { style: { marginBottom: 16 } },
+    // 顶部状态行：版本徽标 + 刷新按钮 + 链接组
+    React.createElement(
       "div",
-      { style: { marginBottom: 16 } },
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: 8
+        }
+      },
       React.createElement(
         "div",
-        {
-          style: {
-            ...s.card,
-            background: "var(--dsw-alias-state-info-bg,#eff6ff)",
-            border: "1px solid var(--dsw-alias-state-info-border,#bfdbfe)",
-            padding: "12px 16px",
-            marginBottom: 8
-          }
-        },
+        { style: { display: "flex", alignItems: "center", gap: 8 } },
+        // 版本状态徽标
+        React.createElement(
+          "span",
+          {
+            style: {
+              ...s.tag,
+              background: hasUpdate ? "var(--dsw-alias-state-info-bg,#eff6ff)" : isLatest ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-bg-layer-2,#f3f4f6)",
+              color: hasUpdate ? "var(--dsw-alias-state-info-primary,#2563eb)" : isLatest ? "var(--dsw-alias-state-success-primary,#059669)" : "var(--dsw-alias-label-secondary,#6b7280)",
+              padding: "3px 10px",
+              fontSize: 12,
+              fontWeight: 500,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 5
+            }
+          },
+          loading ? React.createElement("span", {
+            style: { display: "inline-flex", alignItems: "center" }
+          }, React.createElement(Icons.refresh)) : isLatest ? React.createElement(Icons.check) : null,
+          info ? `v${info.current}` : "\u7248\u672C\u68C0\u67E5\u4E2D\u2026",
+          isLatest && React.createElement("span", { style: { opacity: 0.85, fontSize: 11, fontWeight: 400 } }, "\xB7 \u5DF2\u662F\u6700\u65B0"),
+          hasUpdate && React.createElement("span", { style: { fontWeight: 600, fontSize: 11 } }, `\u2794 v${info.latest}`),
+          info?.error && React.createElement("span", { style: { color: "var(--dsw-alias-state-warn-primary,#d97706)", fontSize: 11 } }, "(\u7F51\u7EDC\u8D85\u65F6)")
+        ),
+        // 刷新检查按钮
+        React.createElement(
+          "button",
+          {
+            style: {
+              ...s.btnGhost,
+              height: 24,
+              padding: "0 8px",
+              fontSize: 11,
+              opacity: loading ? 0.5 : 1,
+              gap: 4
+            },
+            onClick: check,
+            disabled: loading || upgrading,
+            title: "\u91CD\u65B0\u68C0\u67E5 npm \u7EBF\u4E0A\u7248\u672C"
+          },
+          React.createElement(Icons.refresh),
+          loading ? "\u68C0\u67E5\u4E2D\u2026" : "\u68C0\u67E5\u66F4\u65B0"
+        )
+      ),
+      links
+    ),
+    // 发现新版本高亮卡片（支持一键直接升级）
+    hasUpdate && React.createElement(
+      "div",
+      {
+        style: {
+          ...s.card,
+          background: "var(--dsw-alias-state-info-bg,#eff6ff)",
+          border: "1px solid var(--dsw-alias-state-info-border,#bfdbfe)",
+          padding: "14px 16px",
+          marginTop: 10,
+          marginBottom: 0
+        }
+      },
+      React.createElement(
+        "div",
+        { style: { display: "flex", alignItems: "flex-start", gap: 12 } },
+        React.createElement("span", { style: { fontSize: 22 } }, "\u{1F680}"),
         React.createElement(
           "div",
-          { style: { display: "flex", alignItems: "center", gap: 12 } },
-          React.createElement("span", { style: { fontSize: 20 } }, "\u{1F389}"),
+          { style: { flex: 1, minWidth: 0 } },
           React.createElement(
             "div",
-            { style: { flex: 1, minWidth: 0 } },
+            { style: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8, marginBottom: 8 } },
             React.createElement("div", {
               style: {
                 fontSize: 13,
                 fontWeight: 600,
-                color: "var(--dsw-alias-state-info-primary,#1e40af)",
-                marginBottom: 8
+                color: "var(--dsw-alias-state-info-primary,#1e40af)"
               }
             }, `\u53D1\u73B0\u65B0\u7248\u672C v${info.latest}\uFF08\u5F53\u524D v${info.current}\uFF09`),
-            // 升级命令：dsh plugin 与 npx 两种，均带复制按钮
             React.createElement(
-              "div",
-              { style: { display: "flex", flexDirection: "column", gap: 6 } },
-              cmds.map(({ id, cmd }) => React.createElement(UpgradeCommandRow, { key: id, cmd }))
+              "button",
+              {
+                style: {
+                  ...s.btnPri,
+                  height: 28,
+                  fontSize: 12,
+                  padding: "0 14px",
+                  background: upgradeResult?.ok ? "var(--dsw-alias-state-success-primary,#059669)" : "var(--dsw-alias-brand-primary,#4f6ef7)",
+                  opacity: upgrading ? 0.6 : 1
+                },
+                onClick: handleUpgrade,
+                disabled: upgrading || upgradeResult?.ok
+              },
+              upgrading ? React.createElement(
+                "span",
+                { style: { display: "inline-flex", alignItems: "center", gap: 6 } },
+                React.createElement("span", { style: { animation: "spin 1s linear infinite", display: "inline-flex" } }, React.createElement(Icons.refresh)),
+                "\u6B63\u5728\u81EA\u52A8\u5347\u7EA7\u2026"
+              ) : upgradeResult?.ok ? "\u2713 \u5DF2\u5B8C\u6210\u5347\u7EA7" : `\u4E00\u952E\u5347\u7EA7\u5230 v${info.latest}`
             )
           ),
-          React.createElement("button", {
+          upgradeResult && React.createElement("div", {
             style: {
-              ...s.btnGhost,
-              height: 30,
-              padding: "0 12px",
+              background: upgradeResult.ok ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-state-error-bg,#fef2f2)",
+              border: `1px solid ${upgradeResult.ok ? "var(--dsw-alias-state-success-border,#a7f3d0)" : "var(--dsw-alias-state-error-border,#fecaca)"}`,
+              color: upgradeResult.ok ? "var(--dsw-alias-state-success-primary,#065f46)" : "var(--dsw-alias-state-error-primary,#991b1b)",
+              padding: "8px 12px",
+              borderRadius: 6,
               fontSize: 12,
-              opacity: loading ? 0.5 : 1,
-              flexShrink: 0
+              marginBottom: 8,
+              lineHeight: 1.5
+            }
+          }, upgradeResult.message),
+          React.createElement(
+            "div",
+            { style: { marginTop: 4 } },
+            React.createElement("button", {
+              style: { ...s.btnLink, fontSize: 11, color: "var(--dsw-alias-label-secondary,#6b7280)" },
+              onClick: () => setShowManual((v) => !v)
+            }, showManual ? "\u25B4 \u6298\u53E0\u624B\u52A8\u547D\u4EE4\u884C" : "\u25BE \u67E5\u770B\u624B\u52A8\u5347\u7EA7\u547D\u4EE4 (\u5982\u9700)")
+          ),
+          showManual && React.createElement(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }
             },
-            onClick: check,
-            disabled: loading
-          }, loading ? "\u2026" : "\u5237\u65B0")
+            upgradeCommands(info.latest).map(
+              ({ id, cmd }) => React.createElement(UpgradeCommandRow, { key: id, cmd })
+            )
+          )
         )
-      ),
-      links
-    );
-  }
-  return React.createElement(
-    "div",
-    { style: { marginBottom: 14, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8 } },
-    React.createElement(
-      "div",
-      { style: { ...s.muted, display: "flex", alignItems: "center", gap: 8 } },
-      loading && !info ? React.createElement("span", null, "\u68C0\u67E5\u66F4\u65B0\u4E2D\u2026") : info ? React.createElement("span", null, `v${info.current}${info.latest && !info.error ? " \xB7 \u5DF2\u662F\u6700\u65B0" : info.error ? " \xB7 \u68C0\u67E5\u5931\u8D25" : ""}`) : null,
-      info && React.createElement("button", {
-        style: { ...s.btnGhost, height: 22, padding: "0 8px", fontSize: 11, opacity: loading ? 0.5 : 1 },
-        onClick: check,
-        disabled: loading
-      }, loading ? "\u2026" : "\u91CD\u65B0\u68C0\u67E5")
-    ),
-    links
+      )
+    )
   );
 }
 var TABS = [
-  { id: "lan", label: "\u5C40\u57DF\u7F51", icon: "\u{1F4F6}" },
-  { id: "tunnel", label: "\u516C\u7F51\u96A7\u9053", icon: "\u{1F310}" },
-  { id: "im", label: "IM \u673A\u5668\u4EBA", icon: "\u{1F916}" }
+  { id: "lan", label: "\u5C40\u57DF\u7F51", icon: Icons.lan },
+  { id: "tunnel", label: "\u516C\u7F51\u96A7\u9053", icon: Icons.tunnel },
+  { id: "im", label: "IM \u673A\u5668\u4EBA", icon: Icons.bot }
 ];
 function TabBar({ active, onChange, dots }) {
   return React.createElement(
@@ -1022,7 +1191,7 @@ function TabBar({ active, onChange, dots }) {
         borderBottom: "1px solid var(--dsw-alias-border-l2,#e5e7eb)"
       }
     },
-    TABS.map(({ id, label, icon }) => {
+    TABS.map(({ id, label, icon: TabIcon }) => {
       const isActive = active === id;
       const hasDot = dots?.[id];
       return React.createElement(
@@ -1043,12 +1212,19 @@ function TabBar({ active, onChange, dots }) {
             marginBottom: -1,
             display: "inline-flex",
             alignItems: "center",
-            gap: 6,
+            gap: 7,
             transition: "color .15s, border-color .15s",
             whiteSpace: "nowrap"
           }
         },
-        React.createElement("span", { style: { fontSize: 14 } }, icon),
+        TabIcon && React.createElement(TabIcon, {
+          style: {
+            color: isActive ? "var(--dsw-alias-brand-primary,#4f6ef7)" : "var(--dsw-alias-label-tertiary,#9ca3af)",
+            width: 16,
+            height: 16,
+            flexShrink: 0
+          }
+        }),
         label,
         hasDot && React.createElement("span", {
           style: {
@@ -1187,9 +1363,10 @@ function BridgePanel({ rpcCall }) {
     );
   } else if (activeTab === "im") {
     const IM_PLATFORMS = [
-      { id: "wechat", label: "\u5FAE\u4FE1", icon: "\u{1F4AC}", desc: "ClawBot \u626B\u7801\u76F4\u8FDE \xB7 \u65E0\u9700\u516C\u7F51" },
-      { id: "qq", label: "QQ", icon: "\u{1F427}", desc: "\u5B98\u65B9\u673A\u5668\u4EBA \xB7 \u79C1\u804A/\u7FA4\u804A/\u6309\u94AE" },
-      { id: "feishu", label: "\u98DE\u4E66", icon: "\u{1F54A}\uFE0F", desc: "\u5B98\u65B9\u4E8B\u4EF6\u56DE\u8C03 API" }
+      { id: "wechat", label: "\u5FAE\u4FE1", icon: Icons.wechat, brandColor: "#07C160", desc: "ClawBot \u626B\u7801\u76F4\u8FDE \xB7 \u65E0\u9700\u516C\u7F51" },
+      { id: "qq", label: "QQ", icon: Icons.qq, brandColor: "#12B7F5", desc: "\u5B98\u65B9\u673A\u5668\u4EBA \xB7 \u79C1\u804A/\u7FA4\u804A/\u6309\u94AE" },
+      { id: "feishu", label: "\u98DE\u4E66", icon: Icons.feishu, brandColor: "#00D6B9", desc: "\u5B98\u65B9\u4E8B\u4EF6\u56DE\u8C03 API" },
+      { id: "telegram", label: "Telegram", icon: Icons.telegram, brandColor: "#24A1DE", desc: "\u5B98\u65B9 Bot API" }
     ];
     tabContent = React.createElement(
       "div",
@@ -1200,7 +1377,7 @@ function BridgePanel({ rpcCall }) {
         {
           style: { display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap" }
         },
-        IM_PLATFORMS.map(({ id, label, icon, desc }) => {
+        IM_PLATFORMS.map(({ id, label, icon: IconComponent, brandColor, desc }) => {
           const platformData = platforms?.[id];
           const available = !!platformData;
           const active = platformData?.status === "connected" || platformData?.status === "starting" || platformData?.status === "reconnecting";
@@ -1209,7 +1386,7 @@ function BridgePanel({ rpcCall }) {
             {
               key: id,
               style: {
-                flex: "1 1 150px",
+                flex: "1 1 135px",
                 border: `1px solid ${selectedPlatform === id ? "var(--dsw-alias-brand-primary,#4f6ef7)" : active ? "var(--dsw-alias-state-success-primary,#10b981)" : "var(--dsw-alias-border-l2,#e5e7eb)"}`,
                 borderRadius: 10,
                 padding: "12px 14px",
@@ -1226,8 +1403,8 @@ function BridgePanel({ rpcCall }) {
               { style: { ...s.label, fontSize: 13, display: "flex", alignItems: "center", justifyContent: "space-between" } },
               React.createElement(
                 "span",
-                { style: { display: "flex", alignItems: "center", gap: 6 } },
-                React.createElement("span", { style: { fontSize: 14 } }, icon),
+                { style: { display: "flex", alignItems: "center", gap: 7 } },
+                IconComponent && React.createElement(IconComponent, { style: { color: brandColor, width: 18, height: 18, flexShrink: 0 } }),
                 label
               ),
               active && React.createElement("span", {

package/client/index.js

@@ -51,6 +51,42 @@ const s = {
   tip:      { background: 'var(--dsw-alias-bg-layer-2,#f9fafb)', borderRadius: 8, padding: '10px 14px', fontSize: 12, color: 'var(--dsw-alias-label-secondary,#6b7280)', lineHeight: 1.6 },
 };
 
+// ---- 官方品牌与 UI SVG 图标 ----
+
+const Icons = {
+  wechat: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 18, height: 18, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M8.5 2C4.36 2 1 4.91 1 8.5c0 2.01 1.05 3.81 2.69 4.97l-.69 2.06 2.45-1.22c.94.43 1.98.69 3.05.69.21 0 .42-.01.62-.03-.23-.62-.37-1.28-.37-1.97 0-3.59 3.36-6.5 7.5-6.5.21 0 .41.01.62.03C15.87 4.54 12.44 2 8.5 2zM6 6.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm7.5 3.5c-3.59 0-6.5 2.46-6.5 5.5 0 1.66.86 3.14 2.21 4.1l-.56 1.69 2.01-1c.78.36 1.64.57 2.54.57 3.59 0 6.5-2.46 6.5-5.5s-2.91-5.5-6.5-5.5zm-2 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z' })
+  ),
+  qq: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 18, height: 18, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 2C7.58 2 4 5.37 4 9.53c0 1.95.78 3.73 2.07 5.07-.37 1.15-.99 2.19-1.8 3.08-.18.2-.04.52.23.52 2.22 0 3.99-1.07 4.9-1.86.8.25 1.66.39 2.6.39 4.42 0 8-3.37 8-7.53S16.42 2 12 2zm-3 8a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm6 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z' })
+  ),
+  feishu: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 18, height: 18, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 2.5L3.5 11.2l6.8 1.8 2.2 6.5 1.8-4.7 5.2-1.4L12 2.5zm-.8 11.1l-4.1-1.1 6.5-6.6-4.2 8.3 1.8-.6z' })
+  ),
+  telegram: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 18, height: 18, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z' })
+  ),
+  lan: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.29 19.3a1 1 0 0 0 1.41 1.41l1.7-1.7C9.02 19.64 10.46 20 12 20c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' })
+  ),
+  tunnel: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z' })
+  ),
+  bot: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 16, height: 16, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M20 9V7c0-1.1-.9-2-2-2h-3c0-1.66-1.34-3-3-3S9 3.34 9 5H6c-1.1 0-2 .9-2 2v2c-1.66 0-3 1.34-3 3s1.34 3 3 3v4c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4c1.66 0 3-1.34 3-3s-1.34-3-3-3zm-2 10H6V7h12v12zm-9-6c-.83 0-1.5-.67-1.5-1.5S8.17 10 9 10s1.5.67 1.5 1.5S9.83 13 9 13zm6 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z' })
+  ),
+  github: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 13, height: 13, fill: 'currentColor', ...props },
+    React.createElement('path', { d: 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z' })
+  ),
+  refresh: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 2.2, strokeLinecap: 'round', strokeLinejoin: 'round', ...props },
+    React.createElement('path', { d: 'M23 4v6h-6M1 20v-6h6' }),
+    React.createElement('path', { d: 'M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15' })
+  ),
+  check: (props) => React.createElement('svg', { viewBox: '0 0 24 24', width: 12, height: 12, fill: 'none', stroke: 'currentColor', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round', ...props },
+    React.createElement('polyline', { points: '20 6 9 17 4 12' })
+  ),
+};
+
 // ---- 子组件 ----
 
 // 通用复制 hook：返回 [copied, copy]，copy(text) 复制文本并短暂显示成功状态
@@ -438,7 +474,13 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
   return React.createElement('div', { style: s.card },
     React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
       React.createElement('div', null,
-        React.createElement('div', { style: s.label }, platformName),
+        React.createElement('div', { style: { ...s.label, display: 'flex', alignItems: 'center', gap: 7 } },
+          platformId === 'wechat' && React.createElement(Icons.wechat, { style: { color: '#07C160', width: 20, height: 20 } }),
+          platformId === 'qq' && React.createElement(Icons.qq, { style: { color: '#12B7F5', width: 20, height: 20 } }),
+          platformId === 'feishu' && React.createElement(Icons.feishu, { style: { color: '#00D6B9', width: 20, height: 20 } }),
+          platformId === 'telegram' && React.createElement(Icons.telegram, { style: { color: '#24A1DE', width: 20, height: 20 } }),
+          platformName,
+        ),
         React.createElement('div', { style: { ...s.muted, marginTop: 2 } }, platformDesc),
       ),
       React.createElement(StatusTag, { status: platform?.status, running: connected }),
@@ -775,6 +817,10 @@ function UpgradeCommandRow({ cmd }) {
         flex: 1,
         minWidth: 0,
         wordBreak: 'break-all',
+        background: 'var(--dsw-alias-bg-layer-1,#ffffff)',
+        padding: '4px 8px',
+        borderRadius: 6,
+        border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)',
       },
     }, cmd),
     React.createElement('button', {
@@ -785,10 +831,13 @@ function UpgradeCommandRow({ cmd }) {
   );
 }
 
-// 版本检查 + GitHub/反馈入口
+// 版本检查 + 一键升级 + GitHub/反馈入口
 function VersionBanner({ rpcCall }) {
   const [info, setInfo] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
+  const [upgrading, setUpgrading] = React.useState(false);
+  const [upgradeResult, setUpgradeResult] = React.useState(null);
+  const [showManual, setShowManual] = React.useState(false);
 
   const check = React.useCallback(async () => {
     setLoading(true);
@@ -802,92 +851,195 @@ function VersionBanner({ rpcCall }) {
 
   React.useEffect(() => { check(); }, [check]);
 
-  // 只有 npm 上的版本严格大于当前版本才算有新版本
   const hasUpdate = info?.latest && info?.current && !info.error && semverGt(info.latest, info.current);
+  const isLatest = info?.latest && info?.current && !info.error && !semverGt(info.latest, info.current);
+
+  const handleUpgrade = React.useCallback(async () => {
+    if (!info?.latest || upgrading) return;
+    setUpgrading(true);
+    setUpgradeResult(null);
+    try {
+      const r = await rpcCall(BRIDGE_ENDPOINTS.upgradePlugin, { version: info.latest });
+      if (r?.ok && r.value?.ok) {
+        setUpgradeResult({ ok: true, message: `已成功升级到 v${info.latest}！请重启 DSH 服务使新版本生效。` });
+        setTimeout(() => check(), 3000);
+      } else {
+        setUpgradeResult({ ok: false, message: r?.value?.error || r?.error?.message || '升级失败' });
+        setShowManual(true);
+      }
+    } catch (e) {
+      setUpgradeResult({ ok: false, message: e.message || '升级请求失败' });
+      setShowManual(true);
+    } finally {
+      setUpgrading(false);
+    }
+  }, [info?.latest, upgrading, rpcCall, check]);
 
-  // 链接按钮组：GitHub + 更新日志 + 反馈 Bug
   const links = React.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' } },
     React.createElement('a', {
       href: GITHUB_URL, target: '_blank', rel: 'noreferrer', style: s.btnLink,
-    }, '⭐ GitHub'),
+    }, React.createElement(Icons.github), 'GitHub'),
     React.createElement('a', {
       href: RELEASES_URL, target: '_blank', rel: 'noreferrer', style: s.btnLink,
-    }, '📋 更新日志'),
+    }, '更新日志'),
     React.createElement('a', {
       href: ISSUES_URL, target: '_blank', rel: 'noreferrer', style: s.btnLink,
-    }, '🐛 反馈 Bug'),
+    }, '反馈 Issue'),
   );
 
-  // 有新版本：信息卡片
-  if (hasUpdate) {
-    const cmds = upgradeCommands(info.latest);
-    return React.createElement('div', { style: { marginBottom: 16 } },
-      React.createElement('div', {
-        style: {
-          ...s.card,
-          background: 'var(--dsw-alias-state-info-bg,#eff6ff)',
-          border: '1px solid var(--dsw-alias-state-info-border,#bfdbfe)',
-          padding: '12px 16px',
-          marginBottom: 8,
+  return React.createElement('div', { style: { marginBottom: 16 } },
+    // 顶部状态行：版本徽标 + 刷新按钮 + 链接组
+    React.createElement('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        gap: 8,
+      },
+    },
+      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+        // 版本状态徽标
+        React.createElement('span', {
+          style: {
+            ...s.tag,
+            background: hasUpdate
+              ? 'var(--dsw-alias-state-info-bg,#eff6ff)'
+              : isLatest
+                ? 'var(--dsw-alias-state-success-bg,#ecfdf5)'
+                : 'var(--dsw-alias-bg-layer-2,#f3f4f6)',
+            color: hasUpdate
+              ? 'var(--dsw-alias-state-info-primary,#2563eb)'
+              : isLatest
+                ? 'var(--dsw-alias-state-success-primary,#059669)'
+                : 'var(--dsw-alias-label-secondary,#6b7280)',
+            padding: '3px 10px',
+            fontSize: 12,
+            fontWeight: 500,
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 5,
+          },
         },
+          loading
+            ? React.createElement('span', {
+                style: { display: 'inline-flex', alignItems: 'center' },
+              }, React.createElement(Icons.refresh))
+            : isLatest
+              ? React.createElement(Icons.check)
+              : null,
+          info ? `v${info.current}` : '版本检查中…',
+          isLatest && React.createElement('span', { style: { opacity: 0.85, fontSize: 11, fontWeight: 400 } }, '· 已是最新'),
+          hasUpdate && React.createElement('span', { style: { fontWeight: 600, fontSize: 11 } }, `➔ v${info.latest}`),
+          info?.error && React.createElement('span', { style: { color: 'var(--dsw-alias-state-warn-primary,#d97706)', fontSize: 11 } }, '(网络超时)'),
+        ),
+        // 刷新检查按钮
+        React.createElement('button', {
+          style: {
+            ...s.btnGhost,
+            height: 24,
+            padding: '0 8px',
+            fontSize: 11,
+            opacity: loading ? 0.5 : 1,
+            gap: 4,
+          },
+          onClick: check,
+          disabled: loading || upgrading,
+          title: '重新检查 npm 线上版本',
+        },
+          React.createElement(Icons.refresh),
+          loading ? '检查中…' : '检查更新',
+        ),
+      ),
+      links,
+    ),
+
+    // 发现新版本高亮卡片（支持一键直接升级）
+    hasUpdate && React.createElement('div', {
+      style: {
+        ...s.card,
+        background: 'var(--dsw-alias-state-info-bg,#eff6ff)',
+        border: '1px solid var(--dsw-alias-state-info-border,#bfdbfe)',
+        padding: '14px 16px',
+        marginTop: 10,
+        marginBottom: 0,
       },
-        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
-          React.createElement('span', { style: { fontSize: 20 } }, '🎉'),
-          React.createElement('div', { style: { flex: 1, minWidth: 0 } },
+    },
+      React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', gap: 12 } },
+        React.createElement('span', { style: { fontSize: 22 } }, '🚀'),
+        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginBottom: 8 } },
             React.createElement('div', {
               style: {
                 fontSize: 13,
                 fontWeight: 600,
                 color: 'var(--dsw-alias-state-info-primary,#1e40af)',
-                marginBottom: 8,
               },
             }, `发现新版本 v${info.latest}（当前 v${info.current}）`),
-            // 升级命令：dsh plugin 与 npx 两种，均带复制按钮
-            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
-              cmds.map(({ id, cmd }) => React.createElement(UpgradeCommandRow, { key: id, cmd })),
+            React.createElement('button', {
+              style: {
+                ...s.btnPri,
+                height: 28,
+                fontSize: 12,
+                padding: '0 14px',
+                background: upgradeResult?.ok
+                  ? 'var(--dsw-alias-state-success-primary,#059669)'
+                  : 'var(--dsw-alias-brand-primary,#4f6ef7)',
+                opacity: upgrading ? 0.6 : 1,
+              },
+              onClick: handleUpgrade,
+              disabled: upgrading || upgradeResult?.ok,
+            },
+              upgrading
+                ? React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
+                    React.createElement('span', { style: { animation: 'spin 1s linear infinite', display: 'inline-flex' } }, React.createElement(Icons.refresh)),
+                    '正在自动升级…',
+                  )
+                : upgradeResult?.ok
+                  ? '✓ 已完成升级'
+                  : `一键升级到 v${info.latest}`
             ),
           ),
-          React.createElement('button', {
+
+          upgradeResult && React.createElement('div', {
             style: {
-              ...s.btnGhost,
-              height: 30,
-              padding: '0 12px',
+              background: upgradeResult.ok ? 'var(--dsw-alias-state-success-bg,#ecfdf5)' : 'var(--dsw-alias-state-error-bg,#fef2f2)',
+              border: `1px solid ${upgradeResult.ok ? 'var(--dsw-alias-state-success-border,#a7f3d0)' : 'var(--dsw-alias-state-error-border,#fecaca)'}`,
+              color: upgradeResult.ok ? 'var(--dsw-alias-state-success-primary,#065f46)' : 'var(--dsw-alias-state-error-primary,#991b1b)',
+              padding: '8px 12px',
+              borderRadius: 6,
               fontSize: 12,
-              opacity: loading ? 0.5 : 1,
-              flexShrink: 0,
+              marginBottom: 8,
+              lineHeight: 1.5,
             },
-            onClick: check,
-            disabled: loading,
-          }, loading ? '…' : '刷新'),
+          }, upgradeResult.message),
+
+          React.createElement('div', { style: { marginTop: 4 } },
+            React.createElement('button', {
+              style: { ...s.btnLink, fontSize: 11, color: 'var(--dsw-alias-label-secondary,#6b7280)' },
+              onClick: () => setShowManual(v => !v),
+            }, showManual ? '▴ 折叠手动命令行' : '▾ 查看手动升级命令 (如需)'),
+          ),
+
+          showManual && React.createElement('div', {
+            style: { display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 },
+          },
+            upgradeCommands(info.latest).map(({ id, cmd }) =>
+              React.createElement(UpgradeCommandRow, { key: id, cmd })
+            ),
+          ),
         ),
       ),
-      links,
-    );
-  }
-
-  // 正常状态：版本信息一行 + 链接
-  return React.createElement('div', { style: { marginBottom: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 } },
-    React.createElement('div', { style: { ...s.muted, display: 'flex', alignItems: 'center', gap: 8 } },
-      loading && !info
-        ? React.createElement('span', null, '检查更新中…')
-        : info
-          ? React.createElement('span', null, `v${info.current}${info.latest && !info.error ? ' · 已是最新' : info.error ? ' · 检查失败' : ''}`)
-          : null,
-      info && React.createElement('button', {
-        style: { ...s.btnGhost, height: 22, padding: '0 8px', fontSize: 11, opacity: loading ? 0.5 : 1 },
-        onClick: check, disabled: loading,
-      }, loading ? '…' : '重新检查'),
     ),
-    links,
   );
 }
 
 // ---- Tab Bar ----
 
 const TABS = [
-  { id: 'lan',    label: '局域网',   icon: '📶' },
-  { id: 'tunnel', label: '公网隧道', icon: '🌐' },
-  { id: 'im',     label: 'IM 机器人', icon: '🤖' },
+  { id: 'lan',    label: '局域网',   icon: Icons.lan },
+  { id: 'tunnel', label: '公网隧道', icon: Icons.tunnel },
+  { id: 'im',     label: 'IM 机器人', icon: Icons.bot },
 ];
 
 function TabBar({ active, onChange, dots }) {
@@ -897,7 +1049,7 @@ function TabBar({ active, onChange, dots }) {
       borderBottom: '1px solid var(--dsw-alias-border-l2,#e5e7eb)',
     },
   },
-    TABS.map(({ id, label, icon }) => {
+    TABS.map(({ id, label, icon: TabIcon }) => {
       const isActive = active === id;
       const hasDot   = dots?.[id];
       return React.createElement('button', {
@@ -913,12 +1065,17 @@ function TabBar({ active, onChange, dots }) {
             ? '2px solid var(--dsw-alias-brand-primary,#4f6ef7)'
             : '2px solid transparent',
           marginBottom: -1,
-          display: 'inline-flex', alignItems: 'center', gap: 6,
+          display: 'inline-flex', alignItems: 'center', gap: 7,
           transition: 'color .15s, border-color .15s',
           whiteSpace: 'nowrap',
         },
       },
-        React.createElement('span', { style: { fontSize: 14 } }, icon),
+        TabIcon && React.createElement(TabIcon, {
+          style: {
+            color: isActive ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : 'var(--dsw-alias-label-tertiary,#9ca3af)',
+            width: 16, height: 16, flexShrink: 0,
+          },
+        }),
         label,
         hasDot && React.createElement('span', {
           style: {
@@ -1062,9 +1219,10 @@ function BridgePanel({ rpcCall }) {
   } else if (activeTab === 'im') {
     // 从 listPlatforms 动态生成平台列表
     const IM_PLATFORMS = [
-      { id: 'wechat', label: '微信', icon: '💬', desc: 'ClawBot 扫码直连 · 无需公网' },
-      { id: 'qq',     label: 'QQ',   icon: '🐧', desc: '官方机器人 · 私聊/群聊/按钮' },
-      { id: 'feishu', label: '飞书', icon: '🕊️', desc: '官方事件回调 API' },
+      { id: 'wechat',   label: '微信',     icon: Icons.wechat,   brandColor: '#07C160', desc: 'ClawBot 扫码直连 · 无需公网' },
+      { id: 'qq',       label: 'QQ',       icon: Icons.qq,       brandColor: '#12B7F5', desc: '官方机器人 · 私聊/群聊/按钮' },
+      { id: 'feishu',   label: '飞书',     icon: Icons.feishu,   brandColor: '#00D6B9', desc: '官方事件回调 API' },
+      { id: 'telegram', label: 'Telegram', icon: Icons.telegram, brandColor: '#24A1DE', desc: '官方 Bot API' },
     ];
     
     tabContent = React.createElement('div', null,
@@ -1072,7 +1230,7 @@ function BridgePanel({ rpcCall }) {
       React.createElement('div', {
         style: { display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' },
       },
-        IM_PLATFORMS.map(({ id, label, icon, desc }) => {
+        IM_PLATFORMS.map(({ id, label, icon: IconComponent, brandColor, desc }) => {
           const platformData = platforms?.[id];
           const available = !!platformData;
           const active = platformData?.status === 'connected' || platformData?.status === 'starting' || platformData?.status === 'reconnecting';
@@ -1080,7 +1238,7 @@ function BridgePanel({ rpcCall }) {
           return React.createElement('div', {
             key: id,
             style: {
-              flex: '1 1 150px',
+              flex: '1 1 135px',
               border: `1px solid ${selectedPlatform === id ? 'var(--dsw-alias-brand-primary,#4f6ef7)' : active ? 'var(--dsw-alias-state-success-primary,#10b981)' : 'var(--dsw-alias-border-l2,#e5e7eb)'}`,
               borderRadius: 10,
               padding: '12px 14px',
@@ -1093,8 +1251,8 @@ function BridgePanel({ rpcCall }) {
             onClick: available ? () => setSelectedPlatform(id) : undefined,
           },
             React.createElement('div', { style: { ...s.label, fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
-              React.createElement('span', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                React.createElement('span', { style: { fontSize: 14 } }, icon),
+              React.createElement('span', { style: { display: 'flex', alignItems: 'center', gap: 7 } },
+                IconComponent && React.createElement(IconComponent, { style: { color: brandColor, width: 18, height: 18, flexShrink: 0 } }),
                 label,
               ),
               active && React.createElement('span', {

package/lib/bridge-rpc-constants.js

@@ -11,6 +11,7 @@ export const BRIDGE_ENDPOINTS = {
   resetCloudflared: 'resetCloudflared',
   saveCustomTunnelConfig: 'saveCustomTunnelConfig',
   checkVersion: 'checkVersion',
+  upgradePlugin: 'upgradePlugin',
   // 平台管理器（多 IM 平台统一接口）
   listPlatforms: 'listPlatforms',
   platformLogin: 'platformLogin',

package/lib/bridge-rpc.js

@@ -123,6 +123,11 @@ export function installBridgeRpc(ctx, { service, wechat, platformManager, logger
           return ok(result);
         }
 
+        if (endpoint === BRIDGE_ENDPOINTS.upgradePlugin) {
+          const result = await service.upgradePlugin(payload);
+          return ok(result);
+        }
+
         // ---- 平台管理器（多 IM 平台）----
 
         if (endpoint === BRIDGE_ENDPOINTS.listPlatforms) {

package/lib/index.js

@@ -12,6 +12,7 @@ import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { readFileSync } from 'node:fs';
 import { readFile, writeFile, mkdir, unlink } from 'node:fs/promises';
+import { exec } from 'node:child_process';
 import QRCode from 'qrcode';
 import { installBridgeRpc } from './bridge-rpc.js';
 import { CustomTunnelClient } from './tunnel-client.mjs';
@@ -406,24 +407,64 @@ class BridgeService {
     this.cloudflaredState = { phase: 'idle', detail: '' };
   }
 
-  // 检查 npm 上是否有新版本
+  // 检查 npm 上是否有新版本（优先国内高速镜像 npmmirror，降级 npmjs 官方源）
   async checkVersion() {
-    return new Promise((resolve) => {
-      const req = httpsGet('https://registry.npmjs.org/@wenbin_wb/dsh-bridge/latest', { timeout: 8000 }, (res) => {
+    const fetchRegistry = (url, timeoutMs = 4000) => new Promise((resolve, reject) => {
+      const req = httpsGet(url, { timeout: timeoutMs }, (res) => {
+        if (res.statusCode !== 200) return reject(new Error(`HTTP ${res.statusCode}`));
         const chunks = [];
         res.on('data', (c) => chunks.push(c));
         res.on('end', () => {
           try {
             const data = JSON.parse(Buffer.concat(chunks).toString());
-            resolve({ current: VERSION, latest: data.version ?? null });
-          } catch {
-            resolve({ current: VERSION, latest: null, error: '解析失败' });
+            resolve(data.version ?? null);
+          } catch (e) {
+            reject(e);
           }
         });
       });
-      req.on('error', (e) => resolve({ current: VERSION, latest: null, error: e.message }));
-      req.on('timeout', () => { req.destroy(); resolve({ current: VERSION, latest: null, error: '超时' }); });
+      req.on('error', reject);
+      req.on('timeout', () => { req.destroy(); reject(new Error('请求超时')); });
     });
+
+    try {
+      const latest = await fetchRegistry('https://registry.npmmirror.com/@wenbin_wb/dsh-bridge/latest', 3500)
+        .catch(() => fetchRegistry('https://registry.npmjs.org/@wenbin_wb/dsh-bridge/latest', 5000));
+      return { current: VERSION, latest: latest ?? null };
+    } catch (e) {
+      return { current: VERSION, latest: null, error: e.message ?? '检查失败' };
+    }
+  }
+
+  // 一键直接升级插件（执行 dsh plugin / pnpm / npm 自动升级）
+  async upgradePlugin({ version } = {}) {
+    const targetVersion = version ? String(version).trim() : 'latest';
+    const pkgSpec = `@wenbin_wb/dsh-bridge@${targetVersion}`;
+    const commands = [
+      `dsh plugin --profile web add ${pkgSpec}`,
+      `npx --yes @deepseek-ai/dsh plugin --profile web add ${pkgSpec}`,
+      `npm install ${pkgSpec}`,
+    ];
+
+    let lastError = null;
+    let output = '';
+
+    for (const cmd of commands) {
+      try {
+        const res = await new Promise((resolve, reject) => {
+          exec(cmd, { timeout: 90000, windowsHide: true }, (err, stdout, stderr) => {
+            if (err) return reject(new Error(stderr || err.message));
+            resolve({ stdout, stderr });
+          });
+        });
+        output = res.stdout || res.stderr || '升级成功';
+        return { ok: true, command: cmd, output, version: targetVersion };
+      } catch (err) {
+        lastError = err;
+      }
+    }
+
+    return { ok: false, error: lastError?.message ?? '升级命令执行失败', version: targetVersion };
   }
 
   async dispose() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wenbin_wb/dsh-bridge",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "手机扫码即可在移动端/公网继续用 DeepSeek Harness，人不在电脑前也能接着干。一键局域网二维码、Cloudflare 公网隧道、自建隧道与微信 Bot（多工作区/会话持久化/媒体/审批），无需自己搭公网服务器。",
   "type": "module",
   "main": "lib/index.js",