4.1.1 介面總覽
NoteCraftApp 使用文件 第 4 章・使用指南

4.1.1 使用指南

介面總覽

工作台是三欄的殼:Rail、Sidebar 與主區。這頁說明每一區有什麼、主區的頁首、工具列與內容怎麼分工、右側 Drawer 何時出現、有哪些頁面,以及窄螢幕上的變化。

本頁目錄
  1. Rail
  2. Sidebar
  3. 主區
  4. Drawer
  5. 有哪些頁面
  6. 檢查更新
  7. 窄螢幕

除了簡報頁 /present/…,每一頁都套用同一個殼。整頁本身不捲動,只有主區的內容與 Sidebar 各自捲動,所以頁首、工具列與左側導覽一直留在原位。

工作台三欄:深色 Rail、資料夾樹 Sidebar、右側主區顯示儀表板
由左到右是 Rail、Sidebar 與主區;主區最上方是頁籤列,下面是頁首與內容。
區寬度內容
Rail52px主要入口的圖示
Sidebar240px資料夾樹、系列、Plugin 資料檔、標籤
主區其餘頁籤列、頁首、工具列、內容,必要時加上右側 Drawer

Rail

最左的深色窄欄。最上方的 Logo 回儀表板,下面五顆依序是:

圖示前往
房子(儀表板)儀表板 /
放大鏡(搜尋)開啟指令面板,同 ⌘K,見指令面板與全文搜尋
星芒(AI 標記佇列)/notes?pending=1,只列有待生成標記的筆記。有待生成標記時圖示上有圓點
插頭(Plugin)/plugins。在資料檔頁 /view/… 時也亮這一顆
齒輪(設定與關於)/settings。npm 上有新版時圖示上有圓點,見下方「檢查更新」

目前所在的頁面對應的圖示會反白。筆記列表、系列詳情、標籤這些頁面在 Rail 上沒有專屬圖示,目前位置改在 Sidebar 標示。

最上方是工作區:「NoteCraft 工作台」與工作區名稱(專案資料夾名/筆記資料夾)。點它回儀表板。下面依序是:

區段內容何時出現
資料夾「全部筆記」與資料夾樹,每項附篇數一律
系列每個系列一列,含進度條與「已讀/章數」;標頭的「全部」開 /series有 series.json 時
Plugin 資料檔「全部資料檔」與依資料夾分組的資料檔有被 plugin 認領的資料檔時
其他「標籤」,附標籤數,開 /tags一律
  • 點資料夾名稱開 /notes?folder=<路徑>,點左側的小箭頭只展開或收合
  • 展開了哪些資料夾、捲到哪裡,換頁後會保留;目前所在資料夾的上層一律展開
  • 有待生成的 @ai-visualize 標記時,Sidebar 底部多一張卡片,顯示標記數與分布在幾篇筆記,「查看佇列」開 /notes?pending=1

主區

主區由上到下分成四層:

層內容
頁籤列開過的筆記與資料檔,見筆記頁籤
頁首麵包屑、返回鍵(部分頁面)、標題、狀態 pill、右側動作按鈕;有多個檢視的頁面在下方加一列分頁
工具列列表類頁面才有:分組、篩選 chip、搜尋框與筆數
內容這一頁的本體,也是主區裡唯一會捲動的地方
  • 頁首右側的「+ 新增筆記」只在 view 模式出現,見在介面新增與編輯
  • 分頁與篩選會寫進網址,例如 ?tab=calendar、?view=board,見網址參數
  • 換頁時只有主區淡入淡出,Rail、Sidebar 與頁籤列不動

Drawer

在筆記列表、儀表板與 /plugins 的「已安裝外掛」,單擊一列不會換頁,而是從主區右側滑出 480px 的 Drawer 預覽。

筆記列表右側開著Drawer,左側列表變暗
Drawer 從主區右側滑出,左邊的列表蓋上一層遮罩;Drawer 最上方一行是這篇筆記的檔案路徑。
從哪裡開Drawer 裡是什麼
/notes 的列、儀表板的「最近更新」與更新月曆這篇筆記的摘要與 Metadata,詳見筆記列表
/plugins「已安裝外掛」的列這個 plugin 的資訊、映射規則與命中的資料檔,見啟用與停用

關閉:按 ✕、Esc,或點左側的遮罩。

Esc 一次只關最上面一層,順序是指令面板 → 對話框 → Drawer → 窄螢幕的 Sidebar 抽屜。

有哪些頁面

頁面網址內容
儀表板/總覽、更新月曆、AI 佇列三個分頁,見儀表板與更新月曆
筆記列表/notesList、Board、Table、Timeline 四種檢視,見筆記列表
筆記/notes/<路徑>頁首有簡報、收藏與 view 模式的「⋯」選單;內文上方是標籤、描述與閱讀狀態,右側是目錄
系列/series、/series/<id>系列總覽與每個系列的章節,見系列與閱讀進度
標籤/tags全站標籤與篇數,見標籤
Plugin/plugins「資料檔」與「已安裝外掛」兩個分頁
資料夾內的資料檔/plugins/folder/<資料夾>Sidebar「Plugin 資料檔」底下各資料夾的清單
資料檔/view/<路徑>plugin 渲染的頁面,見映射規則 plugins.json
設定與關於/settings「設定」與「關於」兩個分頁
簡報/present/<路徑>全螢幕播放,不套用工作台的殼,見播放與快捷鍵

設定頁有三項,都存在瀏覽器裡:

設定選項
預設 viewList、Board、Table、Timeline
List 預設分組資料夾、系列、標籤、月份
目錄預設狀態全部收合、全部展開

檢查更新

工作台開頁時會在瀏覽器裡向 npm 查詢 notecraftapp 的最新版,30 分鐘內不重複查詢。查不到(離線、被公司網路擋住)時什麼都不顯示,也不影響其他功能。部署出去的網站也會檢查,訪客看到的就當作提醒。

有新版時:

  • Rail 的齒輪上出現圓點,「設定與關於」頁的「關於」分頁旁有落後版數。藍色是一般更新,黃色是主版本更新(可能有破壞性變更),紅色是目前使用的版本已被標記為棄用
  • 第一次發現時右下角跳出一次提示,可以直接「查看更新內容」或「略過這一版」。略過後這一版不再提示、圓點也不顯示;有更新的版本時會恢復
  • 「關於」分頁最上方的「版本與更新」列出目前與最新版本、升級前要注意的事(例如新版需要較新的 Node)、可一鍵複製的升級指令。按「檢查更新」會立即重查
  • 「查看更新內容」列出你錯過的每一版的 CHANGELOG,可依「安全」「移除」「變更」等類別篩選

升級指令:

終端機
npx notecraftapp@latest view

全域安裝的話改用 npm i -g notecraftapp@latest。部署站請由站台維護者升級後重新部署。

指令面板(⌘K)也能找到「檢查更新」與「查看更新內容」。

窄螢幕

視窗寬度RailSidebarDrawer
1101px 以上左側常駐480px
861–1100px左側收成抽屜420px
860px 以下移到畫面底部,變成一排按鈕收成抽屜滿版
  • Sidebar 收起時,主區左上角有一顆「開啟側欄」按鈕。抽屜開著時點遮罩或按 Esc 關閉;視窗拉回 1101px 以上會自動收掉
  • 860px 以下,頁籤列改成頁首右上角的頁籤數按鈕,筆記列表只有 List,頁首的動作按鈕換到標題下一行

在 GitHub 上修改這一頁