Ci/fix desktop build

CrewRouter-Desktop/scripts/prepare-blora-assets.js

@@ -10,7 +10,7 @@ function copyCssAssets(sourceRoot, relative = '') {
   for (const entry of fs.readdirSync(path.join(sourceRoot, relative), { withFileTypes: true })) {
     const child = path.join(relative, entry.name);
     if (entry.isDirectory()) copyCssAssets(sourceRoot, child);
-    else if (entry.isFile() && entry.name.endsWith('.css')) {
+    else if (entry.isFile() && (entry.name.endsWith('.css') || entry.name.endsWith('.js'))) {
       const source = path.join(sourceRoot, child);
       const target = path.join(targetRoot, child);
       fs.mkdirSync(path.dirname(target), { recursive: true });

CrewRouter-Desktop/src/connection-manager.js

@@ -46,8 +46,8 @@ class ConnectionManager {
     return { ...parseInstanceResponse(body, { allowLocalRuntime: options.allowLocalhost }), url: result.url.toString() };
   }
 
-  async connect({ id = crypto.randomUUID(), name = 'CrewRouter', displayName = null, localIdentityId = null, url, mode = 'remote', allowLocalhost = false } = {}) {
-    const instance = await this.inspect(url, { allowLocalhost });
+  async connect({ id = crypto.randomUUID(), name = 'CrewRouter', displayName = null, localIdentityId = null, url, mode = 'remote', allowLocalhost = false, resolveDns = undefined } = {}) {
+    const instance = await this.inspect(url, { allowLocalhost, ...(resolveDns === undefined ? {} : { resolveDns }) });
     const profile = { id, name, ...(displayName ? { displayName } : {}), ...(localIdentityId ? { localIdentityId } : {}), url: instance.url, mode, runtime: instance.runtime, edition: instance.edition, auth: instance.auth, capabilities: instance.capabilities, protocolVersion: instance.protocolVersion, lastConnectedAt: new Date(this.now()).toISOString() };
     this.store.upsert(profile); this.store.setActive(id);
     return profile;

CrewRouter-Desktop/src/preload.js

@@ -4,20 +4,24 @@ const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('crewrouterDesktop', Object.freeze({
   getStatus: () => ipcRenderer.invoke('desktop:get-status'),
+  openOobe: () => ipcRenderer.invoke('desktop:open-oobe'),
   chooseMode: (mode) => ipcRenderer.invoke('desktop:choose-mode', mode),
   setupLocalProfile: (displayName) => ipcRenderer.invoke('desktop:setup-local-profile', displayName),
   connectRemote: (url) => ipcRenderer.invoke('desktop:connect-remote', url),
+  openOfficialDemo: () => ipcRenderer.invoke('desktop:open-official-demo'),
   connectCustomRemote: (url) => ipcRenderer.invoke('desktop:connect-custom-remote', url),
   openExternal: (url) => ipcRenderer.invoke('desktop:open-external', url),
   listProfiles: () => ipcRenderer.invoke('desktop:list-profiles'),
   switchProfile: (id) => ipcRenderer.invoke('desktop:switch-profile', id),
   quit: () => ipcRenderer.invoke('desktop:quit'),
+  restartApp: () => ipcRenderer.invoke('desktop:restart-app'),
   openSettings: () => ipcRenderer.invoke('desktop:open-settings'),
   getDesktopSettings: () => ipcRenderer.invoke('desktop:get-settings'),
   saveDesktopSettings: (settings) => ipcRenderer.invoke('desktop:save-settings', settings),
   renameProfile: (id, name) => ipcRenderer.invoke('desktop:rename-profile', id, name),
   deleteProfile: (id) => ipcRenderer.invoke('desktop:delete-profile', id),
   stopLocal: () => ipcRenderer.invoke('desktop:stop-local'),
+  restartLocal: () => ipcRenderer.invoke('desktop:restart-local'),
   getDiagnostics: () => ipcRenderer.invoke('desktop:get-diagnostics'),
   onStatus: (callback) => {
     const listener = (_event, status) => callback(status);

CrewRouter-Desktop/src/renderer/index.html

@@ -10,108 +10,100 @@
   <link rel="stylesheet" href="vendor/blora-design/components/card/card.css">
   <link rel="stylesheet" href="vendor/blora-design/components/badge/badge.css">
   <link rel="stylesheet" href="vendor/blora-design/components/input/input.css">
+  <link rel="stylesheet" href="vendor/blora-design/components/field/field.css">
   <link rel="stylesheet" href="vendor/blora-design/components/button/button.css">
+  <link rel="stylesheet" href="vendor/blora-design/components/hero/hero.css">
+  <link rel="stylesheet" href="vendor/blora-design/components/steps/steps.css">
+  <link rel="stylesheet" href="vendor/blora-design/components/result/result.css">
   <link rel="stylesheet" href="styles.css">
 </head>
-<body class="blora-page">
+<body class="blora-page blora-scope">
   <noscript><p class="blora-fallback-message">CrewRouter Desktop 需要启用 JavaScript。</p></noscript>
-  <main class="blora-shell" aria-labelledby="page-title">
-    <header class="blora-header"><button id="settings" class="blora-text-button" type="button">⚙ 设置</button>
+  <main class="oobe-shell" aria-labelledby="page-title">
+    <header class="oobe-header">
+      <button id="settings" class="blora-button" data-variant="ghost" data-size="sm" type="button">
+        <span class="button-icon" data-icon="settings" aria-hidden="true"></span><span>设置</span>
+      </button>
       <a class="blora-brand" href="#page-title" aria-label="CrewRouter Desktop 首页">
         <span class="blora-brand-mark" aria-hidden="true"><span></span><span></span><span></span></span>
         <span><strong>CrewRouter</strong><small>DESKTOP</small></span>
       </a>
-      <span class="blora-version">安全连接</span>
+      <span class="blora-badge" data-variant="soft">安全连接</span>
     </header>
 
-    <section class="connection-hero" aria-describedby="intro">
-      <p class="blora-eyebrow">首次启动</p>
-      <h1 id="page-title">开始使用 CrewRouter</h1>
-      <p id="intro">选择本地使用，或连接已有服务器。</p>
+    <section class="blora-hero oobe-hero" data-size="compact" aria-describedby="intro">
+      <div class="blora-hero__content">
+        <p class="blora-eyebrow">首次启动</p>
+        <h1 id="page-title">开始使用 CrewRouter</h1>
+        <p id="intro">选择本地使用，或连接已有服务器。</p>
+      </div>
     </section>
 
-    <section id="mode-step" class="mode-step" aria-labelledby="mode-heading">
-      <h2 id="mode-heading" class="step-heading">选择一种方式</h2>
-      <div class="mode-options">
-        <button id="local" class="blora-card mode-option" type="button">
-          <span class="mode-option__icon" aria-hidden="true">⌂</span>
-          <span class="mode-option__copy"><strong>本地使用</strong><small>一键启动本地服务，无需登录</small></span>
-          <span class="mode-option__arrow" aria-hidden="true">→</span>
+    <nav class="oobe-progress" aria-label="设置进度">
+      <blora-steps id="oobe-steps" current="0" clickable="false">
+        <blora-step title="选择方式" description="选择本地或远程连接"></blora-step>
+        <blora-step title="完成设置" description="填写必要信息"></blora-step>
+        <blora-step title="开始使用" description="进入 CrewRouter"></blora-step>
+      </blora-steps>
+    </nav>
+
+    <section id="welcome-panel" class="oobe-panel" aria-labelledby="welcome-heading">
+      <div class="oobe-panel__heading">
+        <div><p class="blora-eyebrow">第一步</p><h2 id="welcome-heading">选择一种方式</h2></div>
+      </div>
+      <p class="oobe-description">本地使用无需登录；连接服务器时，登录由目标服务器负责。</p>
+      <div class="oobe-choice-grid">
+        <button id="local" class="blora-card oobe-choice" data-variant="hover" type="button">
+          <span class="oobe-choice__icon" data-icon="home" aria-hidden="true"></span>
+          <span class="oobe-choice__copy"><strong>本地使用</strong><small>启动本地服务，无需登录</small></span>
+          <span class="oobe-choice__arrow" data-icon="chevron-right" aria-hidden="true"></span>
         </button>
-        <button id="remote-choice" class="blora-card mode-option" type="button" aria-controls="remote-choice-step">
-          <span class="mode-option__icon" aria-hidden="true">◎</span>
-          <span class="mode-option__copy"><strong>连接服务器</strong><small>选择官方站或自定义服务器地址</small></span>
-          <span class="mode-option__arrow" aria-hidden="true">→</span>
+        <button id="remote-choice" class="blora-card oobe-choice" data-variant="hover" type="button">
+          <span class="oobe-choice__icon" data-icon="globe" aria-hidden="true"></span>
+          <span class="oobe-choice__copy"><strong>连接服务器</strong><small>连接官方站或自定义服务器</small></span>
+          <span class="oobe-choice__arrow" data-icon="chevron-right" aria-hidden="true"></span>
         </button>
       </div>
     </section>
 
-    <section id="local-profile-step" class="remote-step" aria-labelledby="local-profile-heading" hidden>
-      <div class="step-heading-row"><div><p class="blora-eyebrow">本地设置</p><h2 id="local-profile-heading">设置你的用户名</h2></div></div>
-      <p class="remote-description">只需设置一次，用于显示在本地控制台和资料中。无需密码或登录。</p>
-      <form id="local-profile-form" novalidate>
-        <label class="blora-label" for="local-username">用户名</label>
-        <input id="local-username" class="blora-input" type="text" maxlength="64" autocomplete="nickname" aria-describedby="local-username-hint local-username-error" aria-invalid="false">
-        <p id="local-username-hint" class="blora-input-hint">可使用普通文字、数字或短横线，最多 64 个字符。</p>
-        <p id="local-username-error" class="blora-field-error" role="alert"></p>
-        <button id="local-continue" class="blora-button" data-variant="primary" data-block type="submit"><span>继续进入本地控制台</span><span class="blora-button-arrow" aria-hidden="true">→</span></button>
+    <section id="local-profile-panel" class="oobe-panel blora-card" data-variant="content" aria-labelledby="local-profile-heading" hidden>
+      <div class="oobe-panel__heading"><div><p class="blora-eyebrow">第二步</p><h2 id="local-profile-heading">设置你的用户名</h2></div><button id="local-back" class="blora-button" data-variant="text" data-size="sm" type="button"><span class="button-icon" data-icon="chevron-left" aria-hidden="true"></span>返回</button></div>
+      <p class="oobe-description">只需设置一次，用于显示在本地控制台和资料中。</p>
+      <form id="local-profile-form" class="oobe-form" novalidate>
+        <blora-field id="local-username-field" label="用户名" name="local-username" hint="可使用普通文字、数字或短横线，最多 64 个字符。" maxlength="64" autocomplete="nickname" required></blora-field>
+        <p id="local-username-error" class="oobe-field-error" role="alert"></p>
+        <div class="oobe-actions"><button id="local-continue" class="blora-button" data-variant="primary" data-size="lg" type="submit">继续进入本地控制台 <span class="button-icon" data-icon="arrow-right" aria-hidden="true"></span></button></div>
       </form>
     </section>
 
-    <section id="remote-choice-step" class="remote-step" aria-labelledby="remote-choice-heading" hidden>
-      <div class="step-heading-row">
-        <div><p class="blora-eyebrow">第二步</p><h2 id="remote-choice-heading">连接服务器</h2></div>
-        <button id="choice-back" class="blora-text-button" type="button">返回</button>
-      </div>
-      <p class="remote-description">Personal / Team 由目标服务器自动识别，登录由目标服务器负责。</p>
-      <div class="mode-options remote-options">
-        <button id="official-remote" class="blora-card mode-option" type="button" aria-controls="official-remote-step">
-          <span class="mode-option__icon" aria-hidden="true">↗</span>
-          <span class="mode-option__copy"><strong>通过官方站连接</strong><small>先验证目标服务器，再打开 crewrouter.bloret.net 负责转向</small></span>
-          <span class="mode-option__arrow" aria-hidden="true">→</span>
-        </button>
-        <button id="custom-remote" class="blora-card mode-option" type="button" aria-controls="remote-step">
-          <span class="mode-option__icon" aria-hidden="true">⌕</span>
-          <span class="mode-option__copy"><strong>输入服务器地址</strong><small>自己填写服务器地址，直接打开，不经过官方 Demo</small></span>
-          <span class="mode-option__arrow" aria-hidden="true">→</span>
-        </button>
+    <section id="remote-method-panel" class="oobe-panel blora-card" data-variant="content" aria-labelledby="remote-method-heading" hidden>
+      <div class="oobe-panel__heading"><div><p class="blora-eyebrow">第二步</p><h2 id="remote-method-heading">连接服务器</h2></div><button id="choice-back" class="blora-button" data-variant="text" data-size="sm" type="button"><span class="button-icon" data-icon="chevron-left" aria-hidden="true"></span>返回</button></div>
+      <p class="oobe-description">选择连接方式。Personal / Team 由目标服务器自动识别。</p>
+      <div class="oobe-choice-list">
+        <button id="official-remote" class="blora-card oobe-choice" data-variant="hover" type="button"><span class="oobe-choice__icon" data-icon="external-link" aria-hidden="true"></span><span class="oobe-choice__copy"><strong>通过官方站连接</strong><small>打开官方站，在官方页面选择或输入服务器</small></span><span class="oobe-choice__arrow" data-icon="chevron-right" aria-hidden="true"></span></button>
+        <button id="custom-remote" class="blora-card oobe-choice" data-variant="hover" type="button"><span class="oobe-choice__icon" data-icon="search" aria-hidden="true"></span><span class="oobe-choice__copy"><strong>输入服务器地址</strong><small>直接打开你填写的服务器，不经过官方站</small></span><span class="oobe-choice__arrow" data-icon="chevron-right" aria-hidden="true"></span></button>
       </div>
     </section>
 
-    <section id="official-remote-step" class="remote-step" aria-labelledby="official-remote-heading" hidden>
-      <div class="step-heading-row">
-        <div><p class="blora-eyebrow">第三步</p><h2 id="official-remote-heading">输入目标服务器</h2></div>
-        <button id="official-back" class="blora-text-button" type="button">返回</button>
-      </div>
-      <p class="remote-description">Desktop 只验证公开实例信息并把目标 origin 绑定到一次性 state，不接触登录凭据。</p>
-      <form id="official-remote-form" novalidate>
-        <label class="blora-label" for="official-remote-url">目标服务器地址</label>
-        <input id="official-remote-url" class="blora-input" type="url" inputmode="url" placeholder="https://server.example.com" autocomplete="url" aria-describedby="official-url-hint official-url-error" aria-invalid="false">
-        <p id="official-url-hint" class="blora-input-hint">验证通过后将在系统浏览器打开官方 Demo 转向入口。</p>
-        <p id="official-url-error" class="blora-field-error" role="alert"></p>
-        <button id="official-continue" class="blora-button" data-variant="primary" data-block type="submit"><span>打开官方站</span><span class="blora-button-arrow" aria-hidden="true">↗</span></button>
+    <section id="custom-target-panel" class="oobe-panel blora-card" data-variant="content" aria-labelledby="custom-target-heading" hidden>
+      <div class="oobe-panel__heading"><div><p class="blora-eyebrow">第三步</p><h2 id="custom-target-heading">输入服务器地址</h2></div><button id="custom-back" class="blora-button" data-variant="text" data-size="sm" type="button"><span class="button-icon" data-icon="chevron-left" aria-hidden="true"></span>返回</button></div>
+      <p class="oobe-description">登录由目标服务器负责，Desktop 不保存凭据。</p>
+      <form id="connection-form" class="oobe-form" novalidate>
+        <blora-field id="custom-url-field" label="服务器地址" name="remote-url" type="url" placeholder="https://server.example.com" hint="仅支持 http:// 或 https:// 地址。" autocomplete="url" inputmode="url" required></blora-field>
+        <p id="url-error" class="oobe-field-error" role="alert"></p>
+        <div class="oobe-actions"><button id="remote" class="blora-button" data-variant="primary" data-size="lg" type="submit">直接连接服务器 <span class="button-icon" data-icon="external-link" aria-hidden="true"></span></button></div>
       </form>
     </section>
 
-    <section id="remote-step" class="remote-step" aria-labelledby="remote-heading" hidden>
-      <div class="step-heading-row">
-        <div><p class="blora-eyebrow">第三步</p><h2 id="remote-heading">输入服务器地址</h2></div>
-        <button id="back" class="blora-text-button" type="button">返回</button>
-      </div>
-      <form id="connection-form" novalidate>
-        <label class="blora-label" for="remote-url">服务器地址</label>
-        <input id="remote-url" class="blora-input" type="url" inputmode="url" placeholder="https://server.example.com" autocomplete="url" aria-describedby="url-hint url-error" aria-invalid="false">
-        <p id="url-hint" class="blora-input-hint">Personal 或 Team 由目标服务器自动识别，登录由目标服务器负责。</p>
-        <p id="url-error" class="blora-field-error" role="alert"></p>
-        <button id="remote" class="blora-button" data-variant="primary" data-block type="submit"><span>直接连接服务器</span><span class="blora-button-arrow" aria-hidden="true">↗</span></button>
-      </form>
+    <section id="status-panel" class="oobe-status" aria-live="polite" aria-atomic="true" hidden>
+      <blora-result id="status-result" variant="info" title="正在处理" description=""></blora-result>
+      <p id="runtime-error" class="oobe-field-error" role="alert"></p>
+      <p id="status" class="oobe-status__text" role="status"></p>
     </section>
 
-    <div class="blora-feedback" data-state="idle" aria-live="polite" aria-atomic="true">
-      <span id="runtime-error" class="blora-runtime-error" role="alert"></span><span class="blora-status-dot" aria-hidden="true"></span><p id="status" role="status">请选择一个连接方式</p>
-    </div>
-    <footer class="blora-footer"><small>远程页面负责登录；Desktop 不接管凭据。</small><button id="quit" class="blora-quit" type="button">退出应用 <span aria-hidden="true">⌘Q</span></button></footer>
+    <footer class="oobe-footer"><small>远程页面负责登录；Desktop 不接管凭据。</small><button id="quit" class="blora-button" data-variant="text" data-size="sm" type="button">退出应用 <kbd>⌘Q</kbd></button></footer>
   </main>
+  <script type="module" src="vendor/blora-design/auto.js"></script>
   <script src="renderer.js"></script>
 </body>
 </html>