plainleaf/docs/design-v2/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#f0f2ef" />
    <title>Plainleaf 安静笔记工作台 Demo</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="app" id="app">
      <aside class="sidebar" id="sidebar" aria-label="笔记导航">
        <header class="brand-row">
          <button class="brand" id="homeButton" type="button" aria-label="打开首页">
            <span class="brand-mark"><i data-lucide="leaf"></i></span>
            <span>Plainleaf</span>
          </button>
          <button class="icon-button mobile-close" id="closeSidebarButton" type="button" aria-label="关闭导航" title="关闭导航">
            <i data-lucide="x"></i>
          </button>
        </header>

        <button class="create-button" id="newNoteButton" type="button">
          <i data-lucide="plus"></i>
          <span>新建笔记</span>
        </button>

        <nav class="primary-nav" aria-label="主要功能">
          <button class="primary-nav-item is-active" type="button" data-view="notes">
            <i data-lucide="notebook-tabs"></i><span>笔记</span>
          </button>
          <button class="primary-nav-item" type="button" data-view="search">
            <i data-lucide="search"></i><span>搜索</span>
          </button>
          <button class="primary-nav-item" type="button" data-view="tasks">
            <i data-lucide="circle-check-big"></i><span>待办</span><span class="nav-count" id="taskCount">4</span>
          </button>
          <button class="primary-nav-item" type="button" data-view="tags">
            <i data-lucide="tags"></i><span>标签</span>
          </button>
        </nav>

        <div class="sidebar-divider"></div>
        <section class="sidebar-content" id="sidebarContent" aria-live="polite"></section>

        <footer class="sidebar-footer">
          <button class="settings-button" id="settingsButton" type="button">
            <i data-lucide="settings"></i>
            <span>设置</span>
          </button>
        </footer>
      </aside>

      <button class="mobile-scrim" id="mobileScrim" type="button" aria-label="关闭导航"></button>

      <main class="workspace">
        <header class="topbar">
          <div class="topbar-leading">
            <button class="icon-button mobile-menu" id="openSidebarButton" type="button" aria-label="打开导航" title="打开导航">
              <i data-lucide="menu"></i>
            </button>
            <div class="breadcrumb" id="breadcrumb"></div>
          </div>
          <div class="topbar-actions">
            <div class="save-state" id="saveState"><i data-lucide="check"></i><span>已保存</span></div>
            <button class="icon-button desktop-only" id="readModeButton" type="button" aria-label="阅读模式" title="阅读模式">
              <i data-lucide="book-open"></i>
            </button>
            <button class="icon-button desktop-only" id="pageSearchButton" type="button" aria-label="页内搜索" title="页内搜索">
              <i data-lucide="text-search"></i>
            </button>
            <button class="icon-button" id="moreButton" type="button" aria-label="更多笔记操作" title="更多笔记操作">
              <i data-lucide="ellipsis"></i>
            </button>
          </div>
        </header>

        <div class="offline-banner" id="offlineBanner">
          <i data-lucide="wifi-off"></i>
          <span>当前离线，修改已保存在本机</span>
        </div>

        <div class="workspace-scroll" id="workspaceContent"></div>

        <footer class="statusbar">
          <div><span class="sync-dot"></span><span id="syncText">文件已同步</span></div>
          <div><span id="wordCount">Markdown</span><span class="desktop-only">UTF-8</span></div>
        </footer>
      </main>

      <nav class="mobile-bottom-nav" aria-label="手机导航">
        <button type="button" data-mobile-view="notes"><i data-lucide="notebook-tabs"></i><span>笔记</span></button>
        <button type="button" data-mobile-view="search"><i data-lucide="search"></i><span>搜索</span></button>
        <button class="mobile-new" id="mobileNewButton" type="button" aria-label="新建笔记"><i data-lucide="plus"></i></button>
        <button type="button" data-mobile-view="tasks"><i data-lucide="circle-check-big"></i><span>待办</span></button>
        <button type="button" data-mobile-view="more"><i data-lucide="ellipsis"></i><span>更多</span></button>
      </nav>
    </div>

    <div class="modal-layer" id="newNoteModal" aria-hidden="true">
      <button class="modal-scrim" type="button" data-close-modal aria-label="关闭"></button>
      <section class="new-note-dialog" role="dialog" aria-modal="true" aria-labelledby="newNoteHeading">
        <header class="dialog-header">
          <h2 id="newNoteHeading">新建笔记</h2>
          <button class="icon-button" type="button" data-close-modal aria-label="关闭" title="关闭"><i data-lucide="x"></i></button>
        </header>
        <div class="quick-create-grid">
          <button type="button" data-quick-create="capture"><span class="quick-icon green"><i data-lucide="zap"></i></span><span>随手记</span></button>
          <button type="button" data-quick-create="daily"><span class="quick-icon coral"><i data-lucide="calendar-days"></i></span><span>今天的日记</span></button>
          <button class="is-selected" type="button" data-quick-create="blank"><span class="quick-icon blue"><i data-lucide="file-text"></i></span><span>空白笔记</span></button>
        </div>
        <form id="newNoteForm">
          <label class="field-label" for="newNoteTitle">标题</label>
          <input class="text-field" id="newNoteTitle" type="text" placeholder="输入笔记标题" autocomplete="off" />
          <label class="field-label" for="newNoteFolder">保存到</label>
          <div class="select-wrap">
            <i data-lucide="folder"></i>
            <select id="newNoteFolder">
              <option value="收件箱">收件箱</option>
              <option value="项目/Plainleaf">项目 / Plainleaf</option>
              <option value="知识库">知识库</option>
              <option value="日记/2026/08">日记 / 2026 / 08</option>
            </select>
            <i data-lucide="chevron-down"></i>
          </div>
          <div class="dialog-actions">
            <button class="secondary-button" type="button" data-close-modal>取消</button>
            <button class="primary-button" type="submit"><i data-lucide="file-plus-2"></i><span>创建笔记</span></button>
          </div>
        </form>
      </section>
    </div>

    <div class="popover" id="morePopover" aria-hidden="true">
      <button type="button"><i data-lucide="pencil-line"></i><span>重命名</span></button>
      <button type="button"><i data-lucide="folder-input"></i><span>移动到...</span></button>
      <button type="button"><i data-lucide="copy"></i><span>创建副本</span></button>
      <button type="button"><i data-lucide="history"></i><span>版本历史</span></button>
      <div></div>
      <button class="danger-item" type="button"><i data-lucide="trash-2"></i><span>移到废纸篓</span></button>
    </div>

    <div class="toast" id="toast" role="status" aria-live="polite">
      <i data-lucide="check-circle-2"></i><span id="toastText">已完成</span>
    </div>

    <script src="./lucide.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>