From e7a72d74e10edde9dbcc93ccbb4c4057735e5e5a Mon Sep 17 00:00:00 2001 From: richblack Date: Sun, 9 Aug 2026 15:03:23 +0800 Subject: [PATCH] =?UTF-8?q?daemon:=20=E9=A6=96=E6=AC=A1=E5=95=9F=E5=8B=95?= =?UTF-8?q?=E6=94=B9=E6=88=90=E5=85=A9=E6=AD=A5=E5=BC=95=E5=B0=8E=E7=B2=BE?= =?UTF-8?q?=E9=9D=88=EF=BC=88Gitea=20#23=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 舊版 onboarding() 只有兩行字＋兩顆按鈕，沒解釋 Arcrun 是什麼，也沒有 「我做到哪了」的感覺；『我還沒有知識庫』點下去就丟去外部網址， 回來以後要自己想起來要按哪顆鈕才能連線。 改成兩步小精靈，每步都有步驟點（1／2）： ① 認識 Arcrun：三句大白話講清楚在做什麼，不用任何內部詞 ② 連上或申請知識庫：『已經有了』／『還沒有』並排兩張卡， 『還沒有』那張當場講清楚『回來這裡按哪顆鈕』，不是丟出去就沒事 連線邏輯（Connect／showConnect）完全沒動，接的是既有後端； 連線成功後落回首頁，首頁本來就有狀態時間軸＋自動種好的範例資料夾 （default_library.go 的 P4），使用者不必再多做一步就看得到 『丟檔案 → 知識卡』整條路跑起來。 只動前端（main.js＋style.css），零 Go 改動。check-cis.sh 全過； 用 mock window.go.main.App 在瀏覽器截圖驗過兩步畫面（截圖見 issue #23 留言）。 --- cmd/arcrun-app/frontend/src/main.js | 63 +++++++++++++++++++++++---- cmd/arcrun-app/frontend/src/style.css | 36 +++++++++++++++ 2 files changed, 91 insertions(+), 8 deletions(-) diff --git a/cmd/arcrun-app/frontend/src/main.js b/cmd/arcrun-app/frontend/src/main.js index 4094b57..d07dcf2 100644 --- a/cmd/arcrun-app/frontend/src/main.js +++ b/cmd/arcrun-app/frontend/src/main.js @@ -29,6 +29,7 @@ $('themeBtn').onclick = () => let state = null; let page = 'home'; // 'home' | 'ai' | 'update' | 'lib:' let updateInfo = null; +let obStep = 1; // 首次啟動精靈目前在第幾步（issue #23，見 onboarding()） // ── 覆蓋層（只給必須打斷的確認）── function openSheet(html, wire) { $('sheet').innerHTML = html; $('overlay').classList.add('on'); if (wire) wire(); } @@ -345,17 +346,61 @@ function cardDiagnostics() { `; } +// ── 第一次打開的引導（issue #23，從 #18 拆出來）── +// +// 🔴 leo 的驗法：「拿一個從沒裝過的狀態實際走一次：不看文件、不問人， +// 能不能自己完成第一次設定並看到第一個成果。」 +// 舊版只有兩顆按鈕＋兩行字，沒有解釋「這是什麼」，也沒有「我做到哪了」的感覺 +// ——這裡改成兩步的小精靈，每步都回答「這是什麼／我該做什麼／我做到哪了」： +// ① 認識 Arcrun：用大白話講清楚在做什麼，不用任何內部詞（collector／namespace／ +// 萃取…），只用「資料夾」「知識卡」「知識庫」這些使用者本來就懂或一看就懂的詞 +// ② 連上或申請知識庫：兩條路並排，「還沒有」那條**當場**講清楚回來要做什麼 +// （不是丟出去一個外部網址就沒事，那正是舊版讓人卡住的地方） +// 連線成功後會直接落回首頁——首頁本來就有「狀態時間軸」＋自動種好的範例資料夾 +// （見 default_library.go 的 P4），使用者不必再多做一步就能看到「丟檔案 → 知識卡」 +// 這條路真的跑起來，那就是「第一個成果」。 function onboarding() { + const obDots = ` +
+ ${obStep === 1 ? '1' : '✓'} + + 2 +
`; + + if (obStep === 2) { + return ` +
+ ${obDots} +
第 2 步・共 2 步・連上你的知識庫
+
你已經有知識庫了嗎？
+
知識庫是存放你「知識卡」的地方——就像信箱之於信件，之後打開它的網址就能搜尋、AI 也能直接查。
+
+
+
已經有了
+
手上有網址、帳號、密碼（邀請你的人會給你）。
+ +
+
+
還沒有
+
免費申請一個，幾分鐘完成。
填完會拿到網址、帳號、密碼——回到這裡，按左邊「連上知識庫」貼上去就完成。
+ +
+
+ +
`; + } + return ` -
-
先連上你的知識庫
-
- Arcrun 會看守你指定的資料夾，
- 自動把文件整理成 AI 查得到的知識卡。
- 還沒有知識庫？先到 install.arcrun.dev 裝一個（免費）。 +
+ ${obDots} +
第 1 步・共 2 步・認識 Arcrun
+
歡迎使用 Arcrun
+
+

① 你指定一個資料夾，Arcrun 會在背景幫你看著它。

+

② 資料夾裡新增或修改的檔案，會被自動整理成一張張「知識卡」。

+

③ 之後不管在哪台電腦、哪個裝置，打開你的知識庫網站，或讓你的 AI 助理直接問，都找得到。

- - +
`; } @@ -381,6 +426,8 @@ function wire() { on('hLogs', () => go.OpenLogFolder()); on('hAcct', showConnect); on('obConnect', showConnect); on('obInstall', () => go.OpenURL('https://install.arcrun.dev/')); + on('obNext', () => { obStep = 2; renderPage(); }); + on('obBack', () => { obStep = 1; renderPage(); }); on('aiSave', saveAI); on('uCheck', checkUpdate); on('uDownload', downloadUpdate); on('uApply', applyUpdate); on('uDiag', exportDiagnostics); diff --git a/cmd/arcrun-app/frontend/src/style.css b/cmd/arcrun-app/frontend/src/style.css index 1c0dcbb..6029e4b 100644 --- a/cmd/arcrun-app/frontend/src/style.css +++ b/cmd/arcrun-app/frontend/src/style.css @@ -149,6 +149,42 @@ button.ghost:hover { color: var(--err); background: transparent; } .empty .t { font-size: 17px; font-weight: 600; margin-bottom: 10px; } .empty .d { font-size: 14px; color: rgba(var(--ink-rgb), .55); line-height: 1.9; margin-bottom: 20px; } +/* ── 首次啟動精靈（issue #23）：兩步，讓人隨時知道「我做到哪了」── + 步驟點沿用首頁「狀態時間軸」同一套配色邏輯（done=--ok、on=--amber）， + 不另外發明一組顏色。 */ +.ob { max-width: 520px; margin: 0 auto; padding-top: 36px; } +.obdots { + display: flex; align-items: center; justify-content: center; + gap: 8px; margin-bottom: 18px; +} +.obdot { + width: 26px; height: 26px; border-radius: 50%; flex: none; + display: flex; align-items: center; justify-content: center; + font-size: 12.5px; font-weight: 600; font-family: ui-monospace, Menlo, monospace; + background: rgba(var(--ink-rgb), .1); color: rgba(var(--ink-rgb), .45); +} +.obdot.on { background: var(--amber); color: var(--knob); } +.obdot.done { background: var(--ok); color: var(--knob); } +.obline { width: 40px; height: 2px; background: rgba(var(--ink-rgb), .12); } +.obcap { + font-size: 12px; letter-spacing: .06em; text-transform: uppercase; + color: rgba(var(--ink-rgb), .4); margin-bottom: 14px; +} +.obintro { text-align: left; max-width: 420px; margin: 0 auto 24px; } +.obintro p { margin: 0 0 10px; } +.obchoice { + display: flex; gap: 14px; margin-top: 22px; text-align: left; + flex-wrap: wrap; justify-content: center; +} +.obcard { + flex: 1 1 200px; max-width: 240px; + background: var(--well); border-radius: 12px; padding: 16px 18px; + display: flex; flex-direction: column; gap: 8px; +} +.obcard .obh { font-size: 14.5px; font-weight: 600; } +.obcard .d { margin-bottom: 4px; } +.obcard button { margin-top: auto; } + label.radio { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: 14px; cursor: pointer; } label.radio input { margin-top: 3px; } input[type=text], input[type=password] {