finch-file-browser 0.1.0

package/dist/panel.css

@@ -0,0 +1,498 @@
+:root {
+  --fb-bg-root: var(--finch-bg-root, #ffffff);
+  --fb-bg-main: var(--finch-bg-main, #ffffff);
+  --fb-bg-elevated: var(--finch-bg-elevated, #f6f6f7);
+  --fb-bg-hover: var(--finch-bg-hover, rgba(0, 0, 0, 0.05));
+  --fb-bg-active: var(--finch-bg-active, rgba(0, 0, 0, 0.08));
+  --fb-text-1: var(--finch-text-primary, #18181b);
+  --fb-text-2: var(--finch-text-secondary, #52525b);
+  --fb-text-3: var(--finch-text-tertiary, #8b8b93);
+  --fb-accent: var(--finch-accent, #3b82f6);
+  --fb-accent-dim: var(--finch-accent-dim, rgba(59, 130, 246, 0.16));
+  --fb-border: var(--finch-border, rgba(0, 0, 0, 0.1));
+  --fb-border-subtle: var(--finch-border-subtle, rgba(0, 0, 0, 0.06));
+  --fb-positive: var(--finch-positive, #16a34a);
+  --fb-warning: var(--finch-warning, #d97706);
+  --fb-danger: var(--finch-danger, #dc2626);
+  --fb-radius: var(--finch-radius-md, 8px);
+  --fb-mono: var(--finch-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  --fb-sans: var(--finch-font-body, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
+  --fb-fs: var(--finch-message-font-size, 13px);
+  --fb-code-fs: var(--finch-code-font-size, 12px);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fb-bg-root: var(--finch-bg-root, #18181b);
+    --fb-bg-main: var(--finch-bg-main, #1c1c1f);
+    --fb-bg-elevated: var(--finch-bg-elevated, #232327);
+    --fb-bg-hover: var(--finch-bg-hover, rgba(255, 255, 255, 0.06));
+    --fb-bg-active: var(--finch-bg-active, rgba(255, 255, 255, 0.1));
+    --fb-text-1: var(--finch-text-primary, #ededf0);
+    --fb-text-2: var(--finch-text-secondary, #a1a1aa);
+    --fb-text-3: var(--finch-text-tertiary, #71717a);
+    --fb-border: var(--finch-border, rgba(255, 255, 255, 0.12));
+    --fb-border-subtle: var(--finch-border-subtle, rgba(255, 255, 255, 0.07));
+  }
+}
+
+* { box-sizing: border-box; }
+
+[hidden] { display: none !important; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--fb-bg-root);
+  color: var(--fb-text-1);
+  font-family: var(--fb-sans);
+  font-size: var(--fb-fs);
+  -webkit-font-smoothing: antialiased;
+}
+
+.app { display: flex; flex-direction: column; height: 100%; }
+
+/* ── top bar ─────────────────────────────────────────────────────────────── */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  min-height: 42px;
+  border-bottom: 1px solid var(--fb-border-subtle);
+  background: var(--fb-bg-main);
+  flex: none;
+}
+
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  font-family: var(--fb-mono);
+  font-size: calc(var(--fb-fs) - 1px);
+  color: var(--fb-text-2);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.crumb .seg-item { overflow: hidden; text-overflow: ellipsis; }
+.crumb .sep { color: var(--fb-text-3); opacity: 0.6; }
+.crumb .here { color: var(--fb-text-1); font-weight: 600; }
+.crumb .dirty { color: var(--fb-warning); }
+
+.topbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
+
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  overflow: hidden;
+}
+.seg button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--fb-text-2);
+  font: inherit;
+  font-size: calc(var(--fb-fs) - 1px);
+  padding: 3px 9px;
+  cursor: pointer;
+}
+.seg button + button { border-left: 1px solid var(--fb-border); }
+.seg button.on { background: var(--fb-bg-active); color: var(--fb-text-1); font-weight: 600; }
+
+.btn {
+  appearance: none;
+  border: 1px solid var(--fb-border);
+  background: var(--fb-bg-elevated);
+  color: var(--fb-text-1);
+  font: inherit;
+  font-size: calc(var(--fb-fs) - 1px);
+  padding: 4px 10px;
+  border-radius: var(--fb-radius);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn:hover:not(:disabled) { background: var(--fb-bg-hover); }
+.btn:disabled { opacity: 0.42; cursor: default; }
+.btn.primary { background: var(--fb-accent); border-color: transparent; color: #fff; font-weight: 600; }
+.btn.primary:disabled { background: var(--fb-accent); }
+
+/* ── body ────────────────────────────────────────────────────────────────── */
+
+.body { display: flex; flex: 1; min-height: 0; }
+
+.viewer {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--fb-bg-main);
+}
+
+.splitter {
+  flex: none;
+  width: 5px;
+  cursor: col-resize;
+  background: transparent;
+  position: relative;
+}
+.splitter::after {
+  content: "";
+  position: absolute;
+  inset: 0 2px;
+  background: var(--fb-border-subtle);
+}
+.splitter:hover::after, .splitter.dragging::after { background: var(--fb-accent); }
+
+.sidebar {
+  flex: none;
+  width: 280px;
+  min-width: 180px;
+  max-width: 70%;
+  display: flex;
+  flex-direction: column;
+  background: var(--fb-bg-elevated);
+  border-left: 1px solid var(--fb-border-subtle);
+}
+
+/* ── viewer content ──────────────────────────────────────────────────────── */
+
+.empty {
+  margin: auto;
+  text-align: center;
+  color: var(--fb-text-3);
+  padding: 24px;
+}
+.empty-title { font-size: calc(var(--fb-fs) + 1px); color: var(--fb-text-2); margin-bottom: 6px; }
+.empty-sub { font-size: calc(var(--fb-fs) - 1px); }
+
+.preview {
+  flex: 1;
+  overflow: auto;
+  padding: 20px 26px 60px;
+  line-height: var(--finch-message-line-height, 1.65);
+}
+.preview.hidden, .editor-wrap[hidden], .media[hidden], .preview[hidden] { display: none; }
+
+.editor-wrap { flex: 1; min-height: 0; display: flex; }
+#editor {
+  flex: 1;
+  border: 0;
+  outline: none;
+  resize: none;
+  padding: 16px 20px 60px;
+  background: var(--fb-bg-main);
+  color: var(--fb-text-1);
+  font-family: var(--fb-mono);
+  font-size: var(--fb-code-fs);
+  line-height: var(--finch-code-line-height, 1.6);
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+}
+
+.media {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background:
+    linear-gradient(45deg, var(--fb-border-subtle) 25%, transparent 25%) 0 0/16px 16px,
+    linear-gradient(-45deg, var(--fb-border-subtle) 25%, transparent 25%) 0 8px/16px 16px;
+}
+.media img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
+
+.binary-card {
+  margin: auto;
+  text-align: center;
+  padding: 26px 30px;
+  border: 1px dashed var(--fb-border);
+  border-radius: 12px;
+  color: var(--fb-text-2);
+  background: var(--fb-bg-main);
+}
+.binary-card .name { font-family: var(--fb-mono); color: var(--fb-text-1); margin-bottom: 6px; word-break: break-all; }
+.binary-card .meta { font-size: calc(var(--fb-fs) - 1px); color: var(--fb-text-3); margin-bottom: 14px; }
+
+/* ── markdown ────────────────────────────────────────────────────────────── */
+
+.markdown-body { font-size: var(--fb-fs); }
+.markdown-body > *:first-child { margin-top: 0; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
+  margin: 1.5em 0 0.6em;
+  line-height: 1.3;
+  font-weight: 650;
+}
+.markdown-body h1 { font-size: 1.55em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fb-border-subtle); }
+.markdown-body h2 { font-size: 1.28em; }
+.markdown-body h3 { font-size: 1.1em; }
+.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote { margin: 0.7em 0; }
+.markdown-body ul, .markdown-body ol { padding-left: 1.4em; }
+.markdown-body li { margin: 0.24em 0; }
+.markdown-body a { color: var(--fb-accent); }
+.markdown-body blockquote {
+  border-left: 3px solid var(--fb-border);
+  padding: 0.1em 0 0.1em 12px;
+  color: var(--fb-text-2);
+}
+.markdown-body code {
+  font-family: var(--fb-mono);
+  font-size: 0.92em;
+  background: var(--fb-bg-active);
+  padding: 0.14em 0.4em;
+  border-radius: 4px;
+}
+.markdown-body pre {
+  background: var(--fb-bg-elevated);
+  border: 1px solid var(--fb-border-subtle);
+  border-radius: var(--fb-radius);
+  padding: 12px 14px;
+  overflow: auto;
+}
+.markdown-body pre code { background: none; padding: 0; font-size: var(--fb-code-fs); }
+.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.9em 0; font-size: 0.95em; }
+.markdown-body th, .markdown-body td { border: 1px solid var(--fb-border); padding: 6px 9px; text-align: left; vertical-align: top; }
+.markdown-body th { background: var(--fb-bg-elevated); font-weight: 600; }
+.markdown-body hr { border: 0; border-top: 1px solid var(--fb-border-subtle); margin: 1.6em 0; }
+.markdown-body img { max-width: 100%; border-radius: 4px; }
+.markdown-body input[type="checkbox"] { margin-right: 6px; }
+
+.banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 12px;
+  background: var(--fb-warning);
+  color: #fff;
+  font-size: calc(var(--fb-fs) - 1px);
+  flex: none;
+}
+.banner .link { appearance: none; border: 0; background: rgba(255, 255, 255, 0.22); color: #fff; font: inherit; padding: 2px 9px; border-radius: 999px; cursor: pointer; }
+.banner .link:last-child { margin-left: auto; background: transparent; font-size: 15px; line-height: 1; }
+
+/* ── sidebar ─────────────────────────────────────────────────────────────── */
+
+.sidebar-head { padding: 8px 8px 4px; flex: none; }
+.search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--fb-bg-root);
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  padding: 4px 8px;
+}
+.search svg { width: 13px; height: 13px; fill: none; stroke: var(--fb-text-3); stroke-width: 2; flex: none; }
+.search input {
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--fb-text-1);
+  font: inherit;
+  font-size: calc(var(--fb-fs) - 1px);
+  width: 100%;
+  min-width: 0;
+}
+
+.tabs { display: flex; gap: 2px; padding: 2px 8px 6px; flex: none; }
+.tabs button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--fb-text-3);
+  font: inherit;
+  font-size: calc(var(--fb-fs) - 1px);
+  padding: 4px 8px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.tabs button.on { background: var(--fb-bg-active); color: var(--fb-text-1); font-weight: 600; }
+.tabs .count {
+  display: inline-block;
+  min-width: 15px;
+  padding: 0 4px;
+  margin-left: 2px;
+  border-radius: 999px;
+  background: var(--fb-accent-dim);
+  color: var(--fb-accent);
+  font-size: 10px;
+  text-align: center;
+}
+.tabs .count[hidden] { display: none; }
+
+.tree {
+  flex: 1;
+  overflow: auto;
+  padding: 2px 4px 10px;
+  font-size: calc(var(--fb-fs) - 1px);
+}
+.tree[hidden] { display: none; }
+.tree .group { padding: 8px 8px 3px; color: var(--fb-text-3); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 23px;
+  padding: 0 6px;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--fb-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+}
+.row:hover { background: var(--fb-bg-hover); }
+.row.sel { background: var(--fb-accent-dim); color: var(--fb-accent); font-weight: 600; }
+.row .name { overflow: hidden; text-overflow: ellipsis; font-family: var(--fb-mono); font-size: var(--fb-code-fs); }
+.row.dim .name { color: var(--fb-text-3); }
+.row .chev { width: 11px; flex: none; color: var(--fb-text-3); transition: transform 0.12s ease; font-size: 9px; text-align: center; }
+.row.open .chev { transform: rotate(90deg); }
+.row .ico { width: 13px; height: 13px; flex: none; opacity: 0.85; }
+.row .ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.row .grow { flex: 1; }
+.row .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
+.row .dot.changed { background: var(--fb-accent); }
+.row .dot.touched { background: var(--fb-warning); }
+.row .sub { color: var(--fb-text-3); font-size: 10px; font-family: var(--fb-mono); }
+.tree .children { margin-left: 0; }
+
+.sidebar-foot {
+  flex: none;
+  padding: 6px 10px;
+  border-top: 1px solid var(--fb-border-subtle);
+  color: var(--fb-text-3);
+  font-size: 10.5px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.sidebar-foot .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.legend-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 3px; }
+
+/* ── standalone code preview ─────────────────────────────────────────────── */
+
+.preview > pre.code-standalone {
+  margin: 0;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+.preview > pre.code-standalone code {
+  font-family: var(--fb-mono);
+  font-size: var(--fb-code-fs);
+  line-height: var(--finch-code-line-height, 1.6);
+  white-space: pre;
+  display: block;
+}
+
+/* ── syntax highlighting (theme aware) ───────────────────────────────────── */
+
+.hljs-comment, .hljs-quote { color: #7d8799; font-style: italic; }
+.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-name { color: #a626a4; }
+.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string { color: #50a14f; }
+.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo { color: #986801; }
+.hljs-title, .hljs-section, .hljs-title.class_, .hljs-title.function_ { color: #4078f2; font-weight: 600; }
+.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class { color: #e45649; }
+.hljs-built_in, .hljs-builtin-name, .hljs-meta, .hljs-punctuation { color: #0184bc; }
+.hljs-deletion { color: #e45649; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) .hljs-comment, html:not([data-theme="light"]) .hljs-quote { color: #7f848e; }
+  html:not([data-theme="light"]) .hljs-keyword, html:not([data-theme="light"]) .hljs-selector-tag,
+  html:not([data-theme="light"]) .hljs-literal, html:not([data-theme="light"]) .hljs-doctag,
+  html:not([data-theme="light"]) .hljs-name { color: #c678dd; }
+  html:not([data-theme="light"]) .hljs-string, html:not([data-theme="light"]) .hljs-regexp,
+  html:not([data-theme="light"]) .hljs-addition, html:not([data-theme="light"]) .hljs-attribute,
+  html:not([data-theme="light"]) .hljs-meta .hljs-string { color: #98c379; }
+  html:not([data-theme="light"]) .hljs-number, html:not([data-theme="light"]) .hljs-symbol,
+  html:not([data-theme="light"]) .hljs-bullet, html:not([data-theme="light"]) .hljs-link,
+  html:not([data-theme="light"]) .hljs-selector-attr, html:not([data-theme="light"]) .hljs-selector-pseudo { color: #d19a66; }
+  html:not([data-theme="light"]) .hljs-title, html:not([data-theme="light"]) .hljs-section,
+  html:not([data-theme="light"]) .hljs-title.class_, html:not([data-theme="light"]) .hljs-title.function_ { color: #61afef; }
+  html:not([data-theme="light"]) .hljs-attr, html:not([data-theme="light"]) .hljs-variable,
+  html:not([data-theme="light"]) .hljs-template-variable, html:not([data-theme="light"]) .hljs-type,
+  html:not([data-theme="light"]) .hljs-selector-class { color: #e06c75; }
+  html:not([data-theme="light"]) .hljs-built_in, html:not([data-theme="light"]) .hljs-builtin-name,
+  html:not([data-theme="light"]) .hljs-meta, html:not([data-theme="light"]) .hljs-punctuation { color: #56b6c2; }
+}
+
+html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-quote { color: #7f848e; }
+html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-selector-tag,
+html[data-theme="dark"] .hljs-literal, html[data-theme="dark"] .hljs-doctag, html[data-theme="dark"] .hljs-name { color: #c678dd; }
+html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-regexp, html[data-theme="dark"] .hljs-addition,
+html[data-theme="dark"] .hljs-attribute, html[data-theme="dark"] .hljs-meta .hljs-string { color: #98c379; }
+html[data-theme="dark"] .hljs-number, html[data-theme="dark"] .hljs-symbol, html[data-theme="dark"] .hljs-bullet,
+html[data-theme="dark"] .hljs-link, html[data-theme="dark"] .hljs-selector-attr,
+html[data-theme="dark"] .hljs-selector-pseudo { color: #d19a66; }
+html[data-theme="dark"] .hljs-title, html[data-theme="dark"] .hljs-section,
+html[data-theme="dark"] .hljs-title.class_, html[data-theme="dark"] .hljs-title.function_ { color: #61afef; }
+html[data-theme="dark"] .hljs-attr, html[data-theme="dark"] .hljs-variable, html[data-theme="dark"] .hljs-template-variable,
+html[data-theme="dark"] .hljs-type, html[data-theme="dark"] .hljs-selector-class { color: #e06c75; }
+html[data-theme="dark"] .hljs-built_in, html[data-theme="dark"] .hljs-builtin-name, html[data-theme="dark"] .hljs-meta,
+html[data-theme="dark"] .hljs-punctuation { color: #56b6c2; }
+
+/* ── context menu ────────────────────────────────────────────────────────── */
+
+.ctxmenu {
+  position: fixed;
+  z-index: 50;
+  min-width: 176px;
+  padding: 4px;
+  background: var(--fb-bg-elevated);
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+  font-size: calc(var(--fb-fs) - 1px);
+}
+.ctxmenu[hidden] { display: none; }
+.ctxmenu button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--fb-text-1);
+  font: inherit;
+  text-align: left;
+  padding: 5px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.ctxmenu button:hover { background: var(--fb-bg-hover); }
+.ctxmenu .danger { color: var(--fb-danger); }
+.ctxmenu hr { border: 0; border-top: 1px solid var(--fb-border-subtle); margin: 4px 2px; }
+
+.tip {
+  position: fixed;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  z-index: 60;
+  background: rgba(20, 20, 24, 0.92);
+  color: #fff;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: calc(var(--fb-fs) - 1px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+}
+.tip[hidden] { display: none; }
+
+::-webkit-scrollbar { width: 9px; height: 9px; }
+::-webkit-scrollbar-thumb { background: var(--fb-border); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--fb-text-3); }
+::-webkit-scrollbar-track { background: transparent; }

package/dist/panel.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Session Files</title>
+    <link rel="stylesheet" href="./panel.css" />
+  </head>
+  <body>
+    <div class="app" id="app">
+      <header class="topbar">
+        <div class="crumb" id="crumb" title=""></div>
+        <div class="topbar-actions">
+          <div class="seg" id="mode-switch" hidden>
+            <button data-mode="preview" class="on" type="button">预览</button>
+            <button data-mode="source" type="button">源码</button>
+          </div>
+          <button class="btn" id="btn-undo" type="button" title="把磁盘上的文件回滚到上一次保存之前的版本" disabled>回滚上次保存</button>
+          <button class="btn" id="btn-external" type="button" title="用系统默认程序打开这个文件" disabled>用系统打开</button>
+          <button class="btn primary" id="btn-save" type="button" title="把编辑内容写回原文件（⌘S）" disabled>保存</button>
+        </div>
+      </header>
+
+      <main class="body">
+        <section class="viewer" id="viewer">
+          <div class="empty" id="empty">
+            <div class="empty-title">选择一个文件开始</div>
+            <div class="empty-sub">右侧是这个对话绑定文件夹里的全部文件</div>
+          </div>
+          <div class="banner" id="banner" hidden>
+            <span id="banner-text"></span>
+            <button class="link" id="banner-action" type="button" hidden></button>
+            <button class="link" id="banner-close" type="button">×</button>
+          </div>
+          <div class="preview markdown-body" id="preview" hidden></div>
+          <div class="editor-wrap" id="editor-wrap" hidden>
+            <textarea id="editor" spellcheck="false"></textarea>
+          </div>
+          <div class="media" id="media" hidden></div>
+        </section>
+
+        <div class="splitter" id="splitter" role="separator" aria-orientation="vertical"></div>
+
+        <aside class="sidebar">
+          <div class="sidebar-head">
+            <div class="search">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+              <input id="search" type="search" placeholder="筛选文件…" autocomplete="off" />
+            </div>
+          </div>
+          <div class="tabs" id="tabs">
+            <button data-tab="tree" class="on" type="button">目录</button>
+            <button data-tab="session" type="button">本会话 <span class="count" id="touched-count">0</span></button>
+          </div>
+          <div class="tree" id="tree"></div>
+          <div class="tree" id="session-list" hidden></div>
+          <footer class="sidebar-foot" id="foot"></footer>
+        </aside>
+      </main>
+
+      <div class="ctxmenu" id="ctxmenu" hidden></div>
+      <div class="tip" id="toast" hidden></div>
+    </div>
+    <script src="./panel.js"></script>
+  </body>
+</html>