plainleaf/docs/design-v1/index.html

<!doctype html>
<html lang="zh-CN" data-theme="light">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#f7f8f6" />
    <title>Plainleaf Workspace Demo</title>
    <link rel="preconnect" href="https://unpkg.com" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="app-shell" id="appShell">
      <aside class="activity-rail" aria-label="工作区工具">
        <button class="brand-mark" type="button" title="Plainleaf" aria-label="Plainleaf">
          <i data-lucide="leaf"></i>
        </button>

        <nav class="rail-tools" aria-label="主要工具">
          <button class="rail-button is-active" type="button" data-tool="files" title="文件" aria-label="文件">
            <i data-lucide="files"></i>
          </button>
          <button class="rail-button" type="button" data-tool="search" title="搜索" aria-label="搜索">
            <i data-lucide="search"></i>
          </button>
          <button class="rail-button" type="button" data-tool="tags" title="标签" aria-label="标签">
            <i data-lucide="tags"></i>
          </button>
          <button class="rail-button" type="button" data-tool="tasks" title="任务" aria-label="任务">
            <i data-lucide="circle-check-big"></i>
          </button>
          <button class="rail-button" type="button" data-tool="graph" title="关系图" aria-label="关系图">
            <i data-lucide="network"></i>
          </button>
        </nav>

        <div class="rail-footer">
          <button class="rail-button" id="themeButton" type="button" title="切换主题" aria-label="切换主题">
            <i data-lucide="moon"></i>
          </button>
          <button class="rail-button" type="button" title="设置" aria-label="设置">
            <i data-lucide="settings"></i>
          </button>
        </div>
      </aside>

      <aside class="navigation-pane" id="navigationPane" aria-label="导航面板">
        <div class="pane-header">
          <div>
            <p class="workspace-kicker">MY SPACE</p>
            <h1 id="paneTitle">文件</h1>
          </div>
          <div class="header-actions">
            <button class="icon-button" id="newNoteButton" type="button" title="新建笔记" aria-label="新建笔记">
              <i data-lucide="file-plus-2"></i>
            </button>
            <button class="icon-button" type="button" title="更多文件操作" aria-label="更多文件操作">
              <i data-lucide="ellipsis"></i>
            </button>
          </div>
        </div>

        <button class="search-trigger" id="searchTrigger" type="button">
          <i data-lucide="search"></i>
          <span>搜索笔记</span>
          <kbd>⌘ K</kbd>
        </button>

        <div class="navigation-content" id="navigationContent"></div>

        <div class="navigation-footer">
          <div class="sync-summary">
            <span class="status-dot is-online" id="navStatusDot"></span>
            <span id="navStatusLabel">本地文件已同步</span>
          </div>
          <button class="icon-button" id="collapseNavButton" type="button" title="收起文件栏" aria-label="收起文件栏">
            <i data-lucide="panel-left-close"></i>
          </button>
        </div>
      </aside>

      <div class="pane-resizer nav-resizer" id="navResizer" role="separator" aria-orientation="vertical"></div>

      <main class="workspace" id="workspace">
        <header class="workspace-toolbar">
          <div class="toolbar-leading">
            <button class="icon-button show-nav-button" id="showNavButton" type="button" title="显示文件栏" aria-label="显示文件栏">
              <i data-lucide="panel-left-open"></i>
            </button>
            <div class="breadcrumb" id="breadcrumb" aria-label="当前路径"></div>
          </div>

          <div class="toolbar-actions">
            <div class="save-state is-saved" id="saveState" aria-live="polite">
              <i data-lucide="check"></i>
              <span>已保存</span>
            </div>
            <div class="segmented-control" aria-label="文档模式">
              <button class="segment is-active" type="button" data-mode="edit" title="编辑模式">编辑</button>
              <button class="segment" type="button" data-mode="read" title="阅读模式">阅读</button>
              <button class="segment" type="button" data-mode="split" title="分屏模式">分屏</button>
            </div>
            <button class="icon-button" id="inPageSearchButton" type="button" title="页内搜索" aria-label="页内搜索">
              <i data-lucide="search"></i>
            </button>
            <button class="icon-button" id="toggleContextButton" type="button" title="切换上下文栏" aria-label="切换上下文栏">
              <i data-lucide="panel-right"></i>
            </button>
            <button class="icon-button" id="moreButton" type="button" title="更多" aria-label="更多">
              <i data-lucide="ellipsis"></i>
            </button>
          </div>
        </header>

        <div class="offline-banner" id="offlineBanner" role="status">
          <i data-lucide="wifi-off"></i>
          <span>当前离线，修改会保存在本机并在连接恢复后同步。</span>
        </div>

        <section class="document-stage" id="documentStage">
          <article class="document-editor" id="documentEditor">
            <input class="page-title-input" id="pageTitleInput" aria-label="页面标题" />
            <div class="page-meta-line">
              <span id="updatedTime">今天 10:42 更新</span>
              <span aria-hidden="true">·</span>
              <span id="pageLocation">项目 / Plainleaf</span>
            </div>
            <div class="editor-content" id="editorContent" contenteditable="true" spellcheck="false" aria-label="笔记正文"></div>
          </article>

          <div class="split-divider" aria-hidden="true"></div>

          <article class="document-preview" id="documentPreview" aria-label="文档预览"></article>
        </section>

        <footer class="status-bar">
          <div class="status-group">
            <button class="status-button" id="connectionButton" type="button" title="切换离线演示状态">
              <i data-lucide="cloud-check"></i>
              <span id="connectionLabel">已连接</span>
            </button>
            <span id="wordCount">426 字</span>
            <span>12 个链接</span>
          </div>
          <div class="status-group">
            <span>第 18 行，第 6 列</span>
            <span>Markdown</span>
          </div>
        </footer>
      </main>

      <div class="pane-resizer context-resizer" id="contextResizer" role="separator" aria-orientation="vertical"></div>

      <aside class="context-pane" id="contextPane" aria-label="页面上下文">
        <div class="context-header">
          <div class="context-tabs" role="tablist" aria-label="上下文视图">
            <button class="context-tab is-active" type="button" data-context="outline" title="大纲" aria-label="大纲">
              <i data-lucide="list-tree"></i>
            </button>
            <button class="context-tab" type="button" data-context="backlinks" title="反向链接" aria-label="反向链接">
              <i data-lucide="links"></i>
            </button>
            <button class="context-tab" type="button" data-context="properties" title="属性" aria-label="属性">
              <i data-lucide="list-filter"></i>
            </button>
            <button class="context-tab" type="button" data-context="info" title="页面信息" aria-label="页面信息">
              <i data-lucide="info"></i>
            </button>
          </div>
          <button class="icon-button" id="closeContextButton" type="button" title="关闭上下文栏" aria-label="关闭上下文栏">
            <i data-lucide="panel-right-close"></i>
          </button>
        </div>
        <div class="context-content" id="contextContent"></div>
      </aside>

      <nav class="mobile-navigation" aria-label="手机导航">
        <button type="button" data-mobile-action="files"><i data-lucide="files"></i><span>文件</span></button>
        <button type="button" data-mobile-action="search"><i data-lucide="search"></i><span>搜索</span></button>
        <button class="mobile-create" type="button" data-mobile-action="new" aria-label="新建笔记"><i data-lucide="plus"></i></button>
        <button type="button" data-mobile-action="links"><i data-lucide="links"></i><span>链接</span></button>
        <button type="button" data-mobile-action="more"><i data-lucide="ellipsis"></i><span>更多</span></button>
      </nav>
    </div>

    <div class="overlay" id="searchOverlay" aria-hidden="true">
      <section class="command-dialog" role="dialog" aria-modal="true" aria-labelledby="searchDialogTitle">
        <div class="dialog-search-row">
          <i data-lucide="search"></i>
          <input id="globalSearchInput" type="search" placeholder="搜索标题、正文或标签" autocomplete="off" />
          <kbd>ESC</kbd>
        </div>
        <div class="dialog-section-label" id="searchDialogTitle">快速打开</div>
        <div class="search-results" id="searchResults"></div>
        <footer class="dialog-footer">
          <span><kbd>↑</kbd><kbd>↓</kbd> 选择</span>
          <span><kbd>↵</kbd> 打开</span>
        </footer>
      </section>
    </div>

    <div class="overlay" id="newNoteOverlay" aria-hidden="true">
      <section class="new-note-dialog" role="dialog" aria-modal="true" aria-labelledby="newNoteTitle">
        <header>
          <div>
            <p class="dialog-kicker">NEW MARKDOWN FILE</p>
            <h2 id="newNoteTitle">新建笔记</h2>
          </div>
          <button class="icon-button close-overlay-button" type="button" title="关闭" aria-label="关闭">
            <i data-lucide="x"></i>
          </button>
        </header>
        <label>
          <span>文件名</span>
          <input id="newNoteName" type="text" placeholder="例如：产品思路" autocomplete="off" />
        </label>
        <label>
          <span>保存到</span>
          <select id="newNoteFolder">
            <option>收件箱</option>
            <option>项目/Plainleaf</option>
            <option>知识库/Docker</option>
            <option>日记</option>
          </select>
        </label>
        <footer>
          <button class="secondary-button close-overlay-button" type="button">取消</button>
          <button class="primary-button" id="createNoteButton" type="button">
            <i data-lucide="file-plus-2"></i>
            创建笔记
          </button>
        </footer>
      </section>
    </div>

    <div class="overlay mobile-sheet-overlay" id="mobileSheetOverlay" aria-hidden="true">
      <section class="mobile-sheet" role="dialog" aria-modal="true" aria-label="手机导航面板">
        <div class="sheet-handle" aria-hidden="true"></div>
        <header>
          <h2 id="mobileSheetTitle">文件</h2>
          <button class="icon-button" id="closeMobileSheet" type="button" title="关闭" aria-label="关闭">
            <i data-lucide="x"></i>
          </button>
        </header>
        <div id="mobileSheetContent"></div>
      </section>
    </div>

    <div class="popover-menu" id="moreMenu" aria-hidden="true">
      <button type="button" id="menuThemeButton"><i data-lucide="sun-moon"></i><span>切换主题</span></button>
      <button type="button" id="menuOfflineButton"><i data-lucide="wifi-off"></i><span>模拟离线</span></button>
      <button type="button"><i data-lucide="terminal"></i><span>命令面板</span><kbd>⌘ P</kbd></button>
      <button type="button"><i data-lucide="history"></i><span>页面历史</span></button>
    </div>

    <script src="https://unpkg.com/lucide@0.468.0/dist/umd/lucide.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>