@swimmingliu/autovpn 1.8.0 → 2.0.2

package/dist/web/renderer/appearance.js

@@ -0,0 +1,76 @@
+import { icon } from './icons.js';
+
+const THEME_KEY = 'autovpn.ui.theme';
+const THEMES = ['system', 'light', 'dark'];
+
+// Presentation preferences must work when browser storage is disabled, too.
+export function readPreference(key, fallback) {
+  try {
+    return JSON.parse(localStorage.getItem(key)) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+export function writePreference(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // A blocked/full store only disables persistence; the current UI still works.
+  }
+}
+
+export function getThemePreference() {
+  const saved = readPreference(THEME_KEY, 'system');
+  return THEMES.includes(saved) ? saved : 'system';
+}
+
+export function applyTheme(preference = getThemePreference()) {
+  const choice = THEMES.includes(preference) ? preference : 'system';
+  const dark = choice === 'dark' || (choice === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
+  document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+  document.documentElement.dataset.themePreference = choice;
+  for (const button of document.querySelectorAll('[data-theme-choice]')) {
+    button.setAttribute('aria-pressed', String(button.dataset.themeChoice === choice));
+  }
+}
+
+export function selectTheme(preference) {
+  writePreference(THEME_KEY, preference);
+  applyTheme(preference);
+}
+
+export function toggleSidebar() {
+  const collapsed = document.documentElement.dataset.sidebarCollapsed !== 'true';
+  writePreference('autovpn.ui.sidebarCollapsed', collapsed);
+  applySidebar(collapsed);
+}
+
+function applySidebar(collapsed) {
+  document.documentElement.dataset.sidebarCollapsed = String(collapsed);
+  const button = document.querySelector('#sidebarToggle');
+  if (!button) return;
+  const label = collapsed ? '展开导航' : '收起导航';
+  button.setAttribute('aria-label', label);
+  button.setAttribute('aria-expanded', String(!collapsed));
+  button.title = label;
+  button.innerHTML = icon(collapsed ? 'right' : 'left');
+}
+
+export function initializeAppearance() {
+  applySidebar(readPreference('autovpn.ui.sidebarCollapsed', false) === true);
+  applyTheme();
+  matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (document.documentElement.dataset.themePreference === 'system') applyTheme('system');
+  });
+  const timers = new WeakMap();
+  // Keep native scrolling and drag behavior. Only the thumb's paint changes,
+  // so appearing/disappearing scrollbars cannot shift a table column.
+  document.addEventListener('scroll', (event) => {
+    const target = event.target === document ? document.documentElement : event.target;
+    if (!(target instanceof Element)) return;
+    clearTimeout(timers.get(target));
+    target.setAttribute('data-scroll-active', '');
+    timers.set(target, setTimeout(() => target.removeAttribute('data-scroll-active'), 800));
+  }, true);
+}

package/dist/web/renderer/i18n.js

@@ -5,7 +5,7 @@ const ZH_MESSAGES = {
   locale: 'zh-CN',
   appTitle: 'AutoVPN',
   sidebarTitle: 'AutoVPN',
-  sidebarVersion: 'v.1.8.0',
+  sidebarVersion: 'v.2.0.2',
   brandSubtitle: '概览、运行、结果、订阅、日志、设置统一管理',
   languageLabel: '',
   saveButton: '保存配置',

package/dist/web/renderer/icons.js

@@ -0,0 +1,38 @@
+// Shared SVG geometry replaces font-dependent symbols, which had different
+// weight and alignment across the desktop and web renderers.
+const paths = {
+  qr: '<path d="M3 3h6v6H3zm12 0h6v6h-6zM3 15h6v6H3zm12 0h3v3h3v3h-6zM12 3v2m0 4v3H9m-6 0h2m7 3v6m9-9h-6"/>',
+  dashboard: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
+  runs: '<path d="m9 4 12 8-12 8z"/><path d="M3 4v16"/>',
+  results: '<path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M9 15l3-3 3 2 6-8"/><path d="M16 6h5v5"/>',
+  subscriptions: '<path d="M10 13a5 5 0 0 0 7 .1l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7-.1l-3 3a5 5 0 0 0 7 7l2-2"/>',
+  logs: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3m6 0h4"/>',
+  settings: '<path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"/><path d="m9 3 1-1h4l1 1 .5 2 2 .8 2-.6 2 3.6-.5 1.2-1.5 1.5v2l1.5 1.5.5 1.2-2 3.6-2-.6-2 .8-.5 2-1 1h-4l-1-1-.5-2-2-.8-2 .6-2-3.6.5-1.2L4.5 13v-2L3 9.5 2.5 8.3l2-3.6 2 .6 2-.8Z"/>',
+  copy: '<rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/>',
+  folder: '<path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/>',
+  refresh: '<path d="M20 7v5h-5M4 17v-5h5"/><path d="M6 6a8 8 0 0 1 14 6M4 12a8 8 0 0 0 14 6"/>',
+  download: '<path d="M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4"/>',
+  upload: '<path d="M12 16V4m-5 5 5-5 5 5M4 16v4h16v-4"/>',
+  external: '<path d="M14 3h7v7m0-7L10 14M9 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/>',
+  close: '<path d="m6 6 12 12M6 18 18 6"/>',
+  trash: '<path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/>',
+  play: '<path d="m8 4 12 8-12 8z"/>',
+  stop: '<rect x="5" y="5" width="14" height="14" rx="2"/>',
+  check: '<path d="m5 12 4 4L19 6"/>',
+  chevron: '<path d="m9 5 7 7-7 7"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/>',
+  moon: '<path d="M21 13A9 9 0 0 1 11 3 9 9 0 1 0 21 13Z"/>',
+  monitor: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/>',
+  sources: '<circle cx="12" cy="5" r="3"/><circle cx="5" cy="18" r="3"/><circle cx="19" cy="18" r="3"/><path d="M12 8v4m0 0-7 3m7-3 7 3"/>',
+  speed_test: '<path d="M4 19a10 10 0 1 1 16 0M12 13l5-6M4 12h2m12 0h2M7 6l1 2"/><circle cx="12" cy="13" r="2"/>',
+  availability_targets: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a17 17 0 0 1 0 18 17 17 0 0 1 0-18Z"/>',
+  deploy: '<path d="M7 18H6a4 4 0 0 1-1-8 7 7 0 0 1 13-2 5 5 0 0 1 0 10h-1m-5 3V11m-4 4 4-4 4 4"/>',
+  columns: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16m6-16v16"/>',
+  grip: '<path d="M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01" stroke-width="3"/>',
+  left: '<path d="m14 6-6 6 6 6"/>',
+  right: '<path d="m10 6 6 6-6 6"/>'
+};
+
+export function icon(name, className = '') {
+  return `<svg class="ui-icon ${className}" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths[name] ?? paths.settings}</svg>`;
+}

package/dist/web/renderer/index.html

@@ -4,16 +4,36 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>AutoVPN</title>
+    <link rel="icon" type="image/png" href="./assets/vpn-auto-logo-v3.png" />
+    <!-- Resolve appearance before paint, including while the profile loads.
+         Storage can be blocked in a browser, so system mode is the fallback. -->
+    <script>
+      try {
+        const saved = JSON.parse(localStorage.getItem('autovpn.ui.theme'));
+        const choice = ['light', 'dark'].includes(saved) ? saved : 'system';
+        document.documentElement.dataset.theme = choice === 'dark' || (choice === 'system' && matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+        document.documentElement.dataset.themePreference = choice;
+      } catch {
+        document.documentElement.dataset.theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+    </script>
     <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="./workspace.css" />
+    <link rel="stylesheet" href="./analytics.bundle.css" />
   </head>
   <body data-page="dashboard">
+    <script>
+      // Only a native file window needs Electron's draggable title area.
+      // Plain H5 previews previously inherited it and showed a blank top bar.
+      document.body.dataset.runtime = location.protocol === 'file:' && window.vpnAutomation ? 'electron' : 'web';
+    </script>
     <div class="app-frame">
       <div class="window-titlebar" aria-hidden="true"></div>
       <div class="app-content-shell">
         <div class="workspace-shell">
           <aside class="sidebar">
             <div class="sidebar-brand">
-              <img class="brand-mark" src="./assets/vpn-auto-logo-v2-minimal.svg" alt="" aria-hidden="true" />
+              <img class="brand-mark" src="./assets/vpn-auto-logo-v3.png" alt="" aria-hidden="true" />
               <div class="brand-copy">
                 <div id="sidebarTitle" class="sidebar-title"></div>
                 <div id="sidebarVersion" class="sidebar-version"></div>
@@ -21,6 +41,7 @@
             </div>
 
             <nav id="sidebarNav" class="sidebar-nav"></nav>
+            <button id="sidebarToggle" class="icon-btn sidebar-toggle" type="button" aria-label="收起导航" aria-expanded="true" aria-controls="sidebarNav" title="收起导航"></button>
           </aside>
 
           <div class="main-shell">
@@ -30,7 +51,8 @@
                   <h1 id="pageTitle"></h1>
                   <span id="runStateBadge" class="badge neutral"></span>
                 </div>
-                <p id="pageSubtitle"></p>
+                <!-- Repeated feature descriptions previously pushed the page
+                     tools below the fold. The navigation supplies context. -->
               </div>
 
               <div id="pageActions" class="topbar-actions"></div>

package/dist/web/renderer/state.js

@@ -15,7 +15,6 @@ export const PAGE_ORDER = [
   'dashboard',
   'runs',
   'results',
-  'subscriptions',
   'logs',
   'settings'
 ];