@qzsy/dsh-bridge 3.1.1 → 3.2.1

package/client/index.js

@@ -24,6 +24,45 @@ const styles = {
   error: { color: 'var(--dsw-alias-state-error-primary, #dc2626)', fontSize: 12, lineHeight: 1.6, wordBreak: 'break-all' },
   muted: { color: 'var(--dsw-alias-label-secondary, #6b7280)', fontSize: 12, lineHeight: 1.6 },
   qr: { width: 168, height: 168, borderRadius: 8, background: '#fff', padding: 6 },
+  accountTop: { display: 'flex', gap: 12, alignItems: 'center' },
+  avatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 999,
+    overflow: 'hidden',
+    flex: '0 0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'var(--dsw-alias-bg-secondary, #eef1f5)',
+    color: 'var(--dsw-alias-label-primary, #111827)',
+    fontSize: 18,
+    fontWeight: 700,
+  },
+  avatarImg: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
+  accountIdentity: { flex: '1 1 220px', minWidth: 0 },
+  accountName: { fontSize: 14, fontWeight: 600, lineHeight: 1.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  accountEmail: { fontSize: 12, color: 'var(--dsw-alias-label-secondary, #6b7280)', lineHeight: 1.6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  statGrid: {
+    display: 'flex',
+    gap: 8,
+    flexWrap: 'wrap',
+    marginTop: 12,
+    paddingTop: 12,
+    borderTop: '1px solid var(--dsw-alias-border-secondary, #e5e7eb)',
+  },
+  stat: { flex: '1 1 120px', minWidth: 0 },
+  statLabel: { display: 'block', fontSize: 12, color: 'var(--dsw-alias-label-secondary, #6b7280)', lineHeight: 1.6 },
+  statValue: { fontSize: 14, fontWeight: 600, lineHeight: 1.5, wordBreak: 'break-word' },
+  accountFoot: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginTop: 10 },
+  linkBtn: {
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    color: 'var(--dsw-alias-brand-primary, #4f6ef7)',
+    cursor: 'pointer',
+    fontSize: 12,
+  },
 };
 
 function CopyButton({ value, t }) {
@@ -50,8 +89,84 @@ function UrlRow({ label, url, t }) {
   );
 }
 
+function formatDuration(t, seconds) {
+  const total = Math.max(0, Math.floor(Number(seconds) || 0));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  if (hours > 0) {
+    return minutes > 0 ? t('durationHoursMinutes', { hours, minutes }) : t('durationHours', { hours });
+  }
+  if (minutes > 0) return t('durationMinutes', { minutes });
+  return t('durationUnderMinute');
+}
+
+function formatDate(iso) {
+  if (!iso) return '';
+  const date = new Date(iso);
+  if (!Number.isFinite(date.getTime())) return '';
+  try { return date.toLocaleDateString(); } catch { return String(iso).slice(0, 10); }
+}
+
+function AccountAvatar({ url, name }) {
+  const [failed, setFailed] = React.useState(false);
+  React.useEffect(() => { setFailed(false); }, [url]);
+  const initial = (name || '?').trim().slice(0, 1).toUpperCase() || '?';
+  return h('div', { style: styles.avatar },
+    url && !failed
+      ? h('img', { src: url, alt: name || '', style: styles.avatarImg, onError: () => setFailed(true) })
+      : h('span', null, initial),
+  );
+}
+
+function AccountCard({ profile, loading, error, onRefresh, t }) {
+  const user = profile?.user;
+  const usage = profile?.usage;
+  const authorization = profile?.authorization;
+  const pending = loading || (!profile && !error);
+  const boundDate = formatDate(authorization?.boundAt);
+  const authorizedText = boundDate
+    ? `${t('authorizedAt', { date: boundDate })}${authorization?.days > 0 ? ` · ${t('authorizedDays', { days: authorization.days })}` : ''}`
+    : '';
+  return h('div', { style: styles.card },
+    h('div', { style: styles.accountTop },
+      h(AccountAvatar, { url: user?.avatarUrl, name: user?.name }),
+      h('div', { style: styles.accountIdentity },
+        h('div', { style: styles.accountName }, user?.name || (pending ? t('profileLoading') : t('accountUnknown'))),
+        user?.email ? h('div', { style: styles.accountEmail, title: user.email }, user.email) : null,
+        user?.username ? h('div', { style: styles.accountEmail }, `@${user.username}`) : null,
+      ),
+      h('span', { style: styles.badge }, t('authorized')),
+    ),
+    usage
+      ? h('div', { style: styles.statGrid },
+        h('div', { style: styles.stat },
+          h('span', { style: styles.statLabel }, t('balance')),
+          h('div', { style: styles.statValue }, formatDuration(t, usage.balanceSeconds)),
+        ),
+        h('div', { style: styles.stat },
+          h('span', { style: styles.statLabel }, t('monthUsed')),
+          h('div', { style: styles.statValue }, formatDuration(t, usage.monthUsedSeconds)),
+        ),
+        h('div', { style: styles.stat },
+          h('span', { style: styles.statLabel }, t('totalUsed')),
+          h('div', { style: styles.statValue }, formatDuration(t, usage.totalUsedSeconds)),
+        ),
+      )
+      : null,
+    error ? h('div', { style: { ...styles.error, marginTop: 8 } }, `${t('profileFailed')}：${error}`) : null,
+    h('div', { style: styles.accountFoot },
+      h('span', { style: styles.muted }, authorizedText),
+      h('button', { style: styles.linkBtn, disabled: pending, onClick: onRefresh }, pending ? t('refreshing') : t('refresh')),
+    ),
+  );
+}
+
 function BridgePanel() {
-  const t = createTranslator({});
+  const documentLang = (() => {
+    try { return globalThis.document?.documentElement?.getAttribute?.('lang') ?? ''; } catch { return ''; }
+  })();
+  // 词典按宿主页面语言缓存：每次渲染新建 translator 会让依赖它的 effect 反复重建。
+  const t = React.useMemo(() => createTranslator({}), [documentLang]);
   // 注意：adminToken 必须先声明——后面 useCallback 的依赖数组会在 Hook 调用时立即求值，
   // 若 state 声明在其后，会在渲染时触发 TDZ（Cannot access before initialization）导致整页白屏。
   const [adminToken, setAdminToken] = React.useState('');
@@ -67,6 +182,10 @@ function BridgePanel() {
   const [showQr, setShowQr] = React.useState(false);
   const [entryQr, setEntryQr] = React.useState('');
   const [passwordDraft, setPasswordDraft] = React.useState('');
+  const [profile, setProfile] = React.useState(null);
+  const [profileLoading, setProfileLoading] = React.useState(false);
+  const [profileError, setProfileError] = React.useState('');
+  const [profileTick, setProfileTick] = React.useState(0);
 
   const loadAdminToken = React.useCallback(async (port) => {
     if (!port) return;
@@ -108,6 +227,34 @@ function BridgePanel() {
     return () => { cancelled = true; };
   }, [adminToken, showQr, status?.openUrl, rpc]);
 
+  // 授权成功后显示账号资料与时长：首次进入 / 手动刷新 / 每 60 秒拉一次。
+  React.useEffect(() => {
+    if (!adminToken || !status?.device?.bound) {
+      setProfile(null);
+      setProfileError('');
+      setProfileLoading(false);
+      return;
+    }
+    let cancelled = false;
+    const load = async () => {
+      setProfileLoading(true);
+      setProfileError('');
+      try {
+        const res = await rpc(RPC_ENDPOINTS.getProfile);
+        if (cancelled) return;
+        if (res?.ok && res.value) setProfile(res.value);
+        else if (res && res.ok === false) setProfileError(res.error?.message ?? t('profileFailed'));
+      } catch (err) {
+        if (!cancelled) setProfileError(err?.message ?? String(err));
+      } finally {
+        if (!cancelled) setProfileLoading(false);
+      }
+    };
+    load().catch(() => {});
+    const timer = setInterval(() => { load().catch(() => {}); }, 60_000);
+    return () => { cancelled = true; clearInterval(timer); };
+  }, [adminToken, status?.device?.bound, profileTick, rpc, t]);
+
   const run = React.useCallback(async (key, fn) => {
     setBusy(key);
     setError('');
@@ -158,6 +305,19 @@ function BridgePanel() {
   const openUrl = status?.openUrl ?? '';
   const passwordSet = Boolean(status?.access?.passwordSet);
   const stateText = connected ? t('ready') : (phase === 'connecting' || phase === 'reconnecting' ? t('connecting') : t('offline'));
+  // 在线态只展示一行「网关：地址」：把 wss://host/_gw/connect 归一成可点开的 web 地址。
+  const gatewayWebUrl = React.useMemo(() => {
+    const raw = String(status?.gatewayUrl || gatewayDraft || '').trim();
+    if (!raw) return '';
+    try {
+      const url = new URL(raw);
+      if (url.protocol === 'wss:') url.protocol = 'https:';
+      else if (url.protocol === 'ws:') url.protocol = 'http:';
+      return url.origin;
+    } catch {
+      return raw.replace(/\/+$/, '');
+    }
+  }, [status?.gatewayUrl, gatewayDraft]);
 
   return h('div', { style: styles.wrap },
     h('div', { style: { marginBottom: 12 } },
@@ -165,27 +325,55 @@ function BridgePanel() {
       h('div', { style: styles.muted, marginTop: 4 }, `${PACKAGE_NAME} · v${status?.version ?? '—'}`),
     ),
 
+    bound && adminToken ? h(AccountCard, {
+      profile,
+      loading: profileLoading,
+      error: profileError,
+      onRefresh: () => setProfileTick((value) => value + 1),
+      t,
+    }) : null,
+
+    // 网关卡片：在线时只留一行「网关：地址 + 新窗口打开」；掉线/连接中才展开
+    // 状态徽标与可编辑地址，避免正常状态下一屏塞满诊断信息。
     h('div', { style: styles.card },
-      h('div', { style: styles.row },
-        h('span', { style: styles.badge }, `${t('status')}: ${stateText}`),
-        h('span', { style: styles.badge }, bound ? `${t('device')}: ${status?.device?.idMasked ?? ''}` : t('notBound')),
-        status?.protocol ? h('span', { style: styles.badge }, `protocol v${status.protocol}`) : null,
-      ),
-      h('div', { style: { marginTop: 10 } },
-        h('span', { style: styles.label }, t('gateway')),
-        h('div', { style: styles.row },
-          h('input', {
-            style: styles.input,
-            value: gatewayDraft,
-            placeholder: 'wss://dsh.b.nps.qzsyzn.com/_gw/connect',
-            onChange: (e) => setGatewayDraft(e.target.value),
-          }),
-          h('button', { style: styles.btnPrimary, disabled: busy === 'gateway' || !gatewayDraft, onClick: saveGateway }, t('save')),
-        ),
-      ),
-      !adminToken ? h('div', { style: { ...styles.muted, marginTop: 8 } }, t('adminLocalOnly')) : null,
-      error ? h('div', { style: { ...styles.error, marginTop: 10 } }, `${t('lastError')}: ${error}`) : null,
-      notice ? h('div', { style: { ...styles.muted, marginTop: 8 } }, notice) : null,
+      connected
+        ? h('div', { style: styles.row },
+          h('span', { style: { ...styles.muted, whiteSpace: 'nowrap' } }, `${t('gatewayLabel')}：`),
+          h('a', {
+            href: gatewayWebUrl,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            style: { flex: 1, minWidth: 180, fontSize: 13, lineHeight: 1.6, wordBreak: 'break-all', color: 'inherit' },
+          }, gatewayWebUrl),
+          h('a', {
+            href: gatewayWebUrl,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            style: { ...styles.btn, textDecoration: 'none', whiteSpace: 'nowrap' },
+          }, t('openInNewWindow')),
+        )
+        : [
+          h('div', { style: styles.row },
+            h('span', { style: styles.badge }, `${t('status')}: ${stateText}`),
+            h('span', { style: styles.badge }, bound ? `${t('device')}: ${status?.device?.idMasked ?? ''}` : t('notBound')),
+            status?.protocol ? h('span', { style: styles.badge }, `protocol v${status.protocol}`) : null,
+          ),
+          h('div', { style: { marginTop: 10 } },
+            h('span', { style: styles.label }, t('gateway')),
+            h('div', { style: styles.row },
+              h('input', {
+                style: styles.input,
+                value: gatewayDraft,
+                placeholder: 'wss://dsh.b.nps.qzsyzn.com/_gw/connect',
+                onChange: (e) => setGatewayDraft(e.target.value),
+              }),
+              h('button', { style: styles.btnPrimary, disabled: busy === 'gateway' || !gatewayDraft, onClick: saveGateway }, t('save')),
+            ),
+          ),
+          !adminToken ? h('div', { style: { ...styles.muted, marginTop: 8 } }, t('adminLocalOnly')) : null,
+          error ? h('div', { style: { ...styles.error, marginTop: 10 } }, `${t('lastError')}: ${error}`) : null,
+          notice ? h('div', { style: { ...styles.muted, marginTop: 8 } }, notice) : null,
+        ],
     ),
 
     h('div', { style: styles.card },

package/client/locales.mjs

@@ -3,6 +3,8 @@ export const zh = {
   title: '远程访问',
   subtitle: 'DSH 远程隧道云 · 官方客户端',
   gateway: 'SaaS 网关地址',
+  gatewayLabel: '网关',
+  openInNewWindow: '新窗口打开',
   save: '保存网关',
   saved: '已保存',
   device: '设备',
@@ -48,12 +50,29 @@ export const zh = {
   status: '状态',
   version: '版本',
   loadFailed: '无法连接插件 RPC',
+  authorized: '已授权',
+  balance: '剩余时长',
+  monthUsed: '本月已用',
+  totalUsed: '累计已用',
+  authorizedAt: '授权于 ${date}',
+  authorizedDays: '已授权 ${days} 天',
+  profileLoading: '正在读取账号信息…',
+  profileFailed: '账号信息读取失败',
+  accountUnknown: '账号',
+  refresh: '刷新',
+  refreshing: '刷新中…',
+  durationHours: '${hours} 小时',
+  durationHoursMinutes: '${hours} 小时 ${minutes} 分',
+  durationMinutes: '${minutes} 分钟',
+  durationUnderMinute: '不足 1 分钟',
 };
 
 export const en = {
   title: 'Remote Access',
   subtitle: 'DSH Remote Tunnel Cloud · Official Client',
   gateway: 'SaaS gateway URL',
+  gatewayLabel: 'Gateway',
+  openInNewWindow: 'Open in new window',
   save: 'Save gateway',
   saved: 'Saved',
   device: 'Device',
@@ -99,6 +118,21 @@ export const en = {
   status: 'Status',
   version: 'Version',
   loadFailed: 'Cannot reach plugin RPC',
+  authorized: 'Authorized',
+  balance: 'Time left',
+  monthUsed: 'Used this month',
+  totalUsed: 'Total used',
+  authorizedAt: 'Authorized ${date}',
+  authorizedDays: '${days} days since authorization',
+  profileLoading: 'Loading account…',
+  profileFailed: 'Failed to load account',
+  accountUnknown: 'Account',
+  refresh: 'Refresh',
+  refreshing: 'Refreshing…',
+  durationHours: '${hours} h',
+  durationHoursMinutes: '${hours} h ${minutes} min',
+  durationMinutes: '${minutes} min',
+  durationUnderMinute: '< 1 min',
 };
 
 export function detectLang(host = {}) {

package/lib/identity.js

@@ -20,6 +20,7 @@ export const RPC_ENDPOINTS = Object.freeze({
   getAccessUrl: 'getAccessUrl',
   startLogin: 'startLogin',
   getEntryQr: 'getEntryQr',
+  getProfile: 'getProfile',
   setAccessPassword: 'setAccessPassword',
   clearAccessPassword: 'clearAccessPassword',
 });

package/lib/index.js

@@ -21,6 +21,7 @@ import { SaasTunnelClient } from './saas/tunnel-client.mjs';
 import {
   claimDeviceCode,
   fetchDeviceCodeStatus,
+  fetchDeviceProfile,
   maskDeviceSecret,
   normalizeSaasBaseUrl,
   refreshDeviceToken,
@@ -376,6 +377,21 @@ export async function apply(ctx, pluginConfig = {}) {
           }
           return ok({ url, token: config.access.token, qrDataUrl });
         }
+        case RPC_ENDPOINTS.getProfile: {
+          if (!config.deviceId || !config.deviceSecret) {
+            return fail('bad-request', '尚未绑定设备：请先登录授权');
+          }
+          // 账号资料是展示信息：失败只回给面板，不写 lastError 干扰隧道状态。
+          try {
+            return ok(await fetchDeviceProfile({
+              gatewayUrl: gatewayBase(),
+              deviceId: config.deviceId,
+              secret: config.deviceSecret,
+            }));
+          } catch (err) {
+            return errorPayload(err);
+          }
+        }
         case RPC_ENDPOINTS.setAccessPassword: {
           const password = String(payload?.password ?? '');
           if (password.length < 6) return fail('bad-request', '访问密码至少 6 位');

package/lib/saas/device-auth.mjs

@@ -5,6 +5,7 @@
 //   GET  /api/saas/device/code/:code       → { status: pending|approved|consumed|expired }
 //   POST /api/saas/device/code/:code/claim → { deviceId, secret, tunnel:{publicId,name} }
 //   POST /api/saas/device/token            → { token, expiresAt, tunnel, gateway:{url,path} }
+//   POST /api/saas/device/profile          → { user, usage, authorization, serverTime }
 //
 // 本模块只负责 HTTP 与状态判定，不做落盘：deviceSecret 由调用方写进 config.json
 // （lib/index.js 的 updateConfig → writeConfig 固定 mode=0600，与现有配置落盘方式一致）。
@@ -304,6 +305,65 @@ function normalizeTunnel(tunnel) {
   return { publicId, name };
 }
 
+function nonNegativeInt(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : 0;
+}
+
+/**
+ * 读取绑定账号资料（授权后展示）：POST /api/saas/device/profile。
+ * 服务端已按 deviceId+secret 校验并要求 active；这里只做字段归一化，
+ * 头像只接受 http(s) / data:image（面板渲染失败会回退首字母）。
+ *
+ * @param {object} options
+ * @param {string} options.gatewayUrl
+ * @param {string} options.deviceId
+ * @param {string} options.secret
+ * @param {Function} [options.fetchImpl]
+ * @param {AbortSignal} [options.signal]
+ * @param {number} [options.timeoutMs]
+ * @returns {Promise<{user:{id:string,name:string,email:string,username:string|null,avatarUrl:string|null}, usage:{balanceSeconds:number,monthUsedSeconds:number,totalUsedSeconds:number}, authorization:{boundAt:string,days:number}, serverTime:string}>}
+ */
+export async function fetchDeviceProfile({ gatewayUrl, deviceId, secret, fetchImpl, signal, timeoutMs } = {}) {
+  const base = normalizeSaasBaseUrl(gatewayUrl);
+  const id = String(deviceId ?? '').trim();
+  const value = String(secret ?? '');
+  if (!id || !value) {
+    throw new SaasAuthError('设备尚未绑定：缺少 deviceId/deviceSecret', { code: 'auth_failed', terminal: true });
+  }
+  const data = await requestJson({
+    url: `${base}/api/saas/device/profile`,
+    method: 'POST',
+    body: { deviceId: id, secret: value },
+    fetchImpl,
+    signal,
+    timeoutMs,
+  });
+  const user = data?.user && typeof data.user === 'object' ? data.user : {};
+  const usage = data?.usage && typeof data.usage === 'object' ? data.usage : {};
+  const authorization = data?.authorization && typeof data.authorization === 'object' ? data.authorization : {};
+  const avatar = typeof user.avatarUrl === 'string' ? user.avatarUrl : '';
+  return {
+    user: {
+      id: String(user.id ?? ''),
+      name: String(user.name ?? '').trim(),
+      email: String(user.email ?? '').trim(),
+      username: user.username ? String(user.username).trim() : null,
+      avatarUrl: /^(https?:\/\/|data:image\/)/i.test(avatar) ? avatar : null,
+    },
+    usage: {
+      balanceSeconds: nonNegativeInt(usage.balanceSeconds),
+      monthUsedSeconds: nonNegativeInt(usage.monthUsedSeconds),
+      totalUsedSeconds: nonNegativeInt(usage.totalUsedSeconds),
+    },
+    authorization: {
+      boundAt: typeof authorization.boundAt === 'string' ? authorization.boundAt : '',
+      days: nonNegativeInt(authorization.days),
+    },
+    serverTime: typeof data?.serverTime === 'string' ? data.serverTime : '',
+  };
+}
+
 function defaultSleep(ms) {
   return new Promise((resolve) => {
     const timer = setTimeout(resolve, ms);