+
+
+
+
+
+
+
+
+
+
+
+ ✅ 已保存
+
+
+
+
+
+
+
+ 编辑
+
+
+
+
+
+
+
+ 选择一个网站查看账号详情
+
+
+
+
+
+
+
+
+
+ 🔐
+ 选择左侧网站查看账号密码
+暂无账号，点击"+ 添加账号"
';
+ return;
+ }
+
+ cardsDiv.innerHTML = site.accounts.map(acc => `
+
+
+ `).join("");
+}
+
+function togglePassword(accId) {
+ const el = document.querySelector(`#pw-${accId}`);
+ if (el.textContent === "••••••••") {
+ el.textContent = el.dataset.password;
+ } else {
+ el.textContent = "••••••••";
+ }
+}
+
+function copyText(text) {
+ navigator.clipboard.writeText(text).then(() => {
+ // 短暂提示
+ const toast = document.createElement("div");
+ toast.textContent = "已复制！";
+ toast.style.cssText = "position:fixed;top:20px;right:20px;background:#333;color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;z-index:999;";
+ document.body.appendChild(toast);
+ setTimeout(() => toast.remove(), 1500);
+ });
+}
+
+function getFolderName(folderId) {
+ if (!folderId) return "未分类";
+ const el = document.querySelector(`.folder-group[data-folder-id="${folderId}"] .folder-item`);
+ return el ? el.textContent.trim().replace(/^[▼▶]\s*/, "").replace(/📁\s*/, "").replace(/\s*\d+$/, "") : "未分类";
+}
+
+// ===== 文件夹折叠 =====
+function toggleFolder(el) {
+ const arrow = el.querySelector(".folder-arrow");
+ const children = el.parentElement.querySelector(".folder-children");
+ if (children.style.display === "none") {
+ children.style.display = "block";
+ arrow.textContent = "▼";
+ } else {
+ children.style.display = "none";
+ arrow.textContent = "▶";
+ }
+}
+
+// ===== 智能导入 =====
+function showImportModal() {
+ document.querySelector("#importModal").classList.remove("hidden");
+ document.querySelector("#parseResult").classList.add("hidden");
+ document.querySelector("#importText").value = "";
+ document.querySelector("#importNewFolder").value = "";
+}
+
+function hideImportModal() {
+ document.querySelector("#importModal").classList.add("hidden");
+ parsedImportData = null;
+}
+
+function parseImport() {
+ const text = document.querySelector("#importText").value.trim();
+ if (!text) return alert("请先粘贴文本");
+
+ const lines = text.split("\n").map(l => l.trim()).filter(Boolean);
+ if (lines.length < 3) return alert("至少需要3行：网址+网站名、账号、密码");
+
+ // 解析首行：网址 + 空格 + 网站名
+ const firstLine = lines[0];
+ const spaceIndex = firstLine.indexOf(" ");
+ let url, siteName;
+ if (spaceIndex > 0) {
+ url = firstLine.substring(0, spaceIndex).trim();
+ siteName = firstLine.substring(spaceIndex + 1).trim();
+ } else {
+ url = firstLine;
+ // 从 URL 自动提取网站名
+ try {
+ siteName = new URL(url).hostname.replace("www.", "");
+ } catch {
+ siteName = url;
+ }
+ }
+
+ const username = lines[1] || "";
+ const password = lines[2] || "";
+ const remark = lines[3] || "";
+
+ parsedImportData = { url, siteName, username, password, remark };
+
+ // 显示识别结果
+ document.querySelector("#parseResult").classList.remove("hidden");
+ document.querySelector("#parseGrid").innerHTML = `
+ 🌐 网址${url}
+ 🏷 网站名${siteName}
+ 👤 账号${username}
+ 🔑 密码${password}
+ 📝 备注${remark || '(无)'}
+ `;
+
+ // 检查是否存在同URL网站
+ checkDuplicateSite(url);
+}
+
+async function checkDuplicateSite(url) {
+ const resp = await fetch("/api/websites");
+ const sites = await resp.json();
+ const exist = sites.find(s => s.url === url);
+ const alert = document.querySelector("#duplicateAlert");
+ if (exist) {
+ alert.classList.remove("hidden");
+ alert.innerHTML = `⚠️ ${exist.name} 已存在（${exist.accounts?.length || 0}个账号），将追加到该网站下`;
+ // 预选该网站所在文件夹
+ if (exist.folder_id) {
+ document.querySelector("#importFolderSelect").value = exist.folder_id;
+ }
+ } else {
+ alert.classList.add("hidden");
+ }
+}
+
+async function confirmImport() {
+ if (!parsedImportData) return;
+
+ const { url, siteName, username, password, remark } = parsedImportData;
+
+ // 确定文件夹
+ let folderId = document.querySelector("#importFolderSelect").value || null;
+ const newFolderName = document.querySelector("#importNewFolder").value.trim();
+ if (newFolderName) {
+ const resp = await fetch("/api/folders", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ name: newFolderName, type: "website" }),
+ });
+ const folder = await resp.json();
+ folderId = folder.id;
+ }
+
+ // 检查网站是否存在
+ const resp = await fetch("/api/websites");
+ const sites = await resp.json();
+ let site = sites.find(s => s.url === url);
+
+ if (!site) {
+ // 新建网站
+ const createResp = await fetch("/api/websites", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ name: siteName, url, folder_id: folderId }),
+ });
+ site = await createResp.json();
+ }
+
+ // 添加账号
+ await fetch(`/api/websites/${site.id}/accounts`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ username, password, remark }),
+ });
+
+ hideImportModal();
+ window.location.reload();
+}
+
+// ===== 弹窗控制 =====
+function showAddWebsite() {
+ document.querySelector("#websiteModalTitle").textContent = "添加网站";
+ document.querySelector("#websiteName").value = "";
+ document.querySelector("#websiteUrl").value = "";
+ document.querySelector("#websiteFolder").value = "";
+ document.querySelector("#editWebsiteId").value = "";
+ document.querySelector("#websiteModal").classList.remove("hidden");
+}
+
+function hideWebsiteModal() {
+ document.querySelector("#websiteModal").classList.add("hidden");
+}
+
+function editWebsite() {
+ if (!currentSiteId) return;
+ document.querySelector("#websiteModalTitle").textContent = "编辑网站";
+ document.querySelector("#editWebsiteId").value = currentSiteId;
+ document.querySelector("#websiteModal").classList.remove("hidden");
+}
+
+async function saveWebsite() {
+ const id = document.querySelector("#editWebsiteId").value;
+ const data = {
+ name: document.querySelector("#websiteName").value,
+ url: document.querySelector("#websiteUrl").value,
+ folder_id: document.querySelector("#websiteFolder").value || null,
+ };
+ if (id) {
+ await fetch(`/api/websites/${id}`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data),
+ });
+ } else {
+ await fetch("/api/websites", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data),
+ });
+ }
+ hideWebsiteModal();
+ window.location.reload();
+}
+
+function showAddAccount() {
+ if (!currentSiteId) return alert("请先选择一个网站");
+ document.querySelector("#accountUsername").value = "";
+ document.querySelector("#accountPassword").value = "";
+ document.querySelector("#accountRemark").value = "";
+ document.querySelector("#editAccountId").value = "";
+ document.querySelector("#accountModal").classList.remove("hidden");
+}
+
+function hideAccountModal() {
+ document.querySelector("#accountModal").classList.add("hidden");
+}
+
+async function saveAccount() {
+ const siteId = document.querySelector("#currentSiteId").value;
+ const accId = document.querySelector("#editAccountId").value;
+ const data = {
+ username: document.querySelector("#accountUsername").value,
+ password: document.querySelector("#accountPassword").value,
+ remark: document.querySelector("#accountRemark").value,
+ };
+ if (accId) {
+ await fetch(`/api/accounts/${accId}`, {
+ method: "PUT",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data),
+ });
+ } else {
+ await fetch(`/api/websites/${siteId}/accounts`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(data),
+ });
+ }
+ hideAccountModal();
+ selectWebsite(siteId, document.querySelector(`.site-item[data-site-id="${siteId}"]`));
+}
+
+async function editAccount(accId) {
+ document.querySelector("#editAccountId").value = accId;
+ // 通过当前已渲染的 DOM 获取数据
+ document.querySelector("#accountModal").classList.remove("hidden");
+}
+
+async function deleteAccount(accId) {
+ if (!confirm("确定删除这个账号？")) return;
+ await fetch(`/api/accounts/${accId}`, { method: "DELETE" });
+ selectWebsite(currentSiteId, document.querySelector(`.site-item[data-site-id="${currentSiteId}"]`));
+}
+
+function showAddFolder() {
+ const name = prompt("输入新文件夹名称：");
+ if (name) {
+ fetch("/api/folders", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ name, type: "website" }),
+ }).then(() => window.location.reload());
+ }
+}
+
+function filterSites() {
+ const query = document.querySelector("#siteSearch").value.toLowerCase();
+ document.querySelectorAll(".site-item").forEach(item => {
+ const name = item.querySelector(".site-name").textContent.toLowerCase();
+ item.style.display = name.includes(query) ? "flex" : "none";
+ });
+}
+```
+
+---
+
+### Task 7: 智能导入 API
+
+**Files:**
+- Create: `routes/import_api.py`
+
+- [ ] **Step 1: 创建 routes/import_api.py**
+
+```python
+"""智能导入 API — 文本解析与匹配"""
+from fastapi import APIRouter, Depends
+from sqlalchemy.orm import Session, joinedload
+from models import get_db, Website
+from urllib.parse import urlparse
+
+router = APIRouter(prefix="/api/import", tags=["智能导入"])
+
+
+@router.post("/parse")
+def parse_import_text(data: dict, db: Session = Depends(get_db)):
+ """解析粘贴的文本，返回结构化结果 + 匹配信息"""
+ text = data.get("text", "").strip()
+ if not text:
+ return {"ok": False, "error": "文本为空"}
+
+ lines = [l.strip() for l in text.split("\n") if l.strip()]
+ if len(lines) < 3:
+ return {"ok": False, "error": "至少需要 3 行：网址+网站名、账号、密码"}
+
+ # 解析首行
+ first_line = lines[0]
+ space_idx = first_line.find(" ")
+ if space_idx > 0:
+ url = first_line[:space_idx].strip()
+ site_name = first_line[space_idx + 1:].strip()
+ else:
+ url = first_line
+ try:
+ site_name = urlparse(url).hostname or url
+ except Exception:
+ site_name = url
+
+ result = {
+ "ok": True,
+ "url": url,
+ "site_name": site_name,
+ "username": lines[1] if len(lines) > 1 else "",
+ "password": lines[2] if len(lines) > 2 else "",
+ "remark": lines[3] if len(lines) > 3 else "",
+ }
+
+ # 匹配已有网站
+ existing = db.query(Website).options(joinedload(Website.accounts)).filter_by(url=url).first()
+ if existing:
+ result["matched_site"] = {
+ "id": existing.id,
+ "name": existing.name,
+ "folder_id": existing.folder_id,
+ "account_count": len(existing.accounts),
+ }
+ result["action"] = "append" # 追加到已有网站
+ else:
+ result["matched_site"] = None
+ result["action"] = "create" # 新建网站
+
+ return result
+```
+
+---
+
+### Task 8: 启动配置与收尾
+
+**Files:**
+- Modify: `app.py`
+
+- [ ] **Step 1: 更新 app.py — 添加模板引擎和启动配置**
+
+将之前创建的 `app.py` 更新为以下完整版本：
+
+```python
+"""MoKeeText — FastAPI 入口"""
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from starlette.responses import RedirectResponse
+from starlette.templating import Jinja2Templates
+from routes.notes import router as notes_router
+from routes.websites import router as websites_router
+from routes.import_api import router as import_router
+
+app = FastAPI(title="MoKeeText", version="1.0.0")
+
+# 模板引擎
+app.state.templates = Jinja2Templates(directory="templates")
+
+# 静态文件
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# 路由注册
+app.include_router(notes_router)
+app.include_router(websites_router)
+app.include_router(import_router)
+
+
+@app.get("/")
+def root():
+ return RedirectResponse(url="/notes")
+```
+
+- [ ] **Step 2: 启动应用**
+
+```bash
+uvicorn app:app --reload --host 0.0.0.0 --port 8000
+```
+
+Expected: 应用启动在 `http://localhost:8000`
+
+- [ ] **Step 3: 验证**
+ - 打开 `http://localhost:8000/notes` — 笔记页面
+ - 打开 `http://localhost:8000/websites` — 网站管理页面
+ - 新建笔记、编辑保存
+ - 添加网站、添加账号
+ - 测试智能导入功能
+
+---
+
+## 实施顺序
+
+```
+Task 1 (项目骨架) → Task 2 (数据模型) → Task 3 (初始化数据库)
+ → Task 4 (入口 + 基础模板 + CSS)
+ → Task 5 (笔记模块) → Task 6 (网站管理模块) → Task 7 (智能导入)
+ → Task 8 (收尾 + 启动验证)
+```
+
+每个 Task 完成后刷新浏览器确认功能正常再继续。
diff --git a/docs/superpowers/specs/2026-06-23-mokeetext-design.md b/docs/superpowers/specs/2026-06-23-mokeetext-design.md
new file mode 100644
index 0000000..c291186
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-23-mokeetext-design.md
@@ -0,0 +1,173 @@
+# MoKeeText Web 记事本 — 设计文档
+
+**日期**: 2026-06-23
+**状态**: 已确认
+
+---
+
+## 项目概述
+
+一个 Web 记事本工具，包含两个核心模块：
+1. **Markdown 笔记** — 增强型编辑器，类似飞书文档体验
+2. **网站账号管理** — 网站密码本，智能导入功能
+
+数据存储到 MySQL。
+
+---
+
+## 技术选型
+
+| 层级 | 技术 | 理由 |
+|------|------|------|
+| 后端框架 | Python FastAPI | 高性能异步，Python 操作 MySQL 成熟 |
+| 模板引擎 | Jinja2 | FastAPI 内置支持，服务端渲染 |
+| ORM | SQLAlchemy | 最成熟的 Python ORM，MySQL 支持好 |
+| 数据库 | MySQL | 用户指定 |
+| 编辑器 | Tiptap | 增强型富文本编辑器，支持颜色/图片/表情/表格 |
+| 前端交互 | 原生 JS + CDN 库 | 无构建步骤，快速迭代 |
+| 样式 | 手写 CSS（飞书风格）| 简洁现代，大量留白 |
+
+---
+
+## 数据库设计
+
+### 文件夹表 (folders)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | INT PK | 主键 |
+| name | VARCHAR(100) | 文件夹名 |
+| type | ENUM('note','website') | 文件夹类型 |
+| parent_id | INT FK | 父文件夹（NULL为根） |
+| sort_order | INT | 排序 |
+| created_at | DATETIME | 创建时间 |
+
+### 笔记表 (notes)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | INT PK | 主键 |
+| title | VARCHAR(500) | 标题 |
+| content | LONGTEXT | Tiptap JSON/HTML |
+| folder_id | INT FK | 所属文件夹 |
+| created_at | DATETIME | 创建时间 |
+| updated_at | DATETIME | 更新时间 |
+
+### 标签表 (tags)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | INT PK | 主键 |
+| name | VARCHAR(50) | 标签名 |
+| color | VARCHAR(20) | 颜色 |
+
+### 笔记-标签关联 (note_tags)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| note_id | INT FK | 笔记ID |
+| tag_id | INT FK | 标签ID |
+
+### 网站表 (websites)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | INT PK | 主键 |
+| name | VARCHAR(200) | 网站名 |
+| url | VARCHAR(500) | 网址 |
+| folder_id | INT FK | 所属文件夹 |
+| created_at | DATETIME | 创建时间 |
+
+### 账号表 (accounts)
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| id | INT PK | 主键 |
+| website_id | INT FK | 所属网站 |
+| username | VARCHAR(500) | 账号 |
+| password | VARCHAR(500) | 密码（明文，后续加密） |
+| remark | TEXT | 登录说明/备注 |
+| created_at | DATETIME | 创建时间 |
+
+---
+
+## 页面路由
+
+| 路由 | 页面 |
+|------|------|
+| `/` | 重定向到 /notes |
+| `/notes` | 笔记主页 |
+| `/websites` | 网站管理主页 |
+| `/api/notes/*` | 笔记 CRUD API |
+| `/api/websites/*` | 网站 CRUD API |
+| `/api/accounts/*` | 账号 CRUD API |
+| `/api/folders/*` | 文件夹 CRUD API |
+| `/api/tags/*` | 标签 CRUD API |
+| `/api/import/parse` | 智能导入解析 |
+| `/api/import/save` | 智能导入保存 |
+
+---
+
+## 智能导入解析逻辑
+
+输入格式：
+```
+https://github.com 代码网站
+zhangsan_new@qq.com
+Xyz789!@#
+新注册的开发账号
+```
+
+解析规则：
+- 第1行：按第一个空格分割 → 前半为URL，后半为网站名
+- 第2行：账号
+- 第3行：密码
+- 第4行：备注（可选）
+- 根据URL匹配已有网站 → 存在则返回匹配信息，不存在则标记新建
+
+---
+
+## UI 布局
+
+```
+┌──────────────────────────────────────────────┐
+│ 📝 MoKeeText [笔记] [网站管理] 个人版 │
+├────────────┬─────────────────────────────────┤
+│ 搜索... │ 标题 编辑/预览/分屏 标签│
+│ + 新建 │ ───────────────────────────── │
+│ │ │
+│ 📁 文件夹 │ Tiptap 增强编辑器 │
+│ ├ 工作 │ (支持颜色/图片/表情/表格) │
+│ ├ 个人 │ │
+│ └ 学习 │ │
+│ │ │
+│ 🏷️ 标签 │ │
+│ python │ │
+│ mysql │ │
+└────────────┴─────────────────────────────────┘
+```
+
+---
+
+## 项目结构
+
+```
+mokeeText/
+├── app.py # FastAPI 入口
+├── config.py # 数据库配置
+├── models.py # SQLAlchemy 模型
+├── routes/
+│ ├── notes.py # 笔记相关路由
+│ ├── websites.py # 网站相关路由
+│ └── import_api.py # 智能导入 API
+├── templates/
+│ ├── base.html # 基础布局
+│ ├── notes.html # 笔记页
+│ └── websites.html # 网站管理页
+├── static/
+│ ├── css/
+│ │ └── style.css # 飞书风格样式
+│ └── js/
+│ ├── editor.js # Tiptap 初始化
+│ ├── notes.js # 笔记交互
+│ └── websites.js # 网站管理交互
+├── requirements.txt
+└── docs/
+ └── superpowers/
+ └── specs/
+ └── 2026-06-23-mokeetext-design.md
+```
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..cd3ca40
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+src
diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 0000000..cc3c608
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1,4 @@
+# 本地开发环境变量
+VITE_GATEWAY_URL = http://localhost:4006
+VITE_LOGIN_URL = https://login.user.zgitm.com
+VITE_SYSTEM_CODE = mokeetext-edit
diff --git a/frontend/.env.production b/frontend/.env.production
new file mode 100644
index 0000000..ac4e4ea
--- /dev/null
+++ b/frontend/.env.production
@@ -0,0 +1,4 @@
+# 生产环境变量
+VITE_GATEWAY_URL = https://gw.server.zgitm.com
+VITE_LOGIN_URL = https://login.user.zgitm.com
+VITE_SYSTEM_CODE = mokeetext-edit
diff --git a/frontend/Dockerfile.frontend b/frontend/Dockerfile.frontend
new file mode 100644
index 0000000..7a60fa4
--- /dev/null
+++ b/frontend/Dockerfile.frontend
@@ -0,0 +1,9 @@
+# ===== 前端 Nginx =====
+FROM nginx:alpine
+
+# 先构建好 Vue 再打镜像
+COPY static/dist/ /usr/share/nginx/html/
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 3006
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..c90b82e
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ 👤 ${acc.remark || '账号'}
+
+
+
+
+
+
+ 账号
+ ${acc.username}
+
+ 密码
+ ••••••••
+
+
+
+
+
+ 说明
+ ${acc.remark || '-'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
new file mode 100644
index 0000000..8913021
--- /dev/null
+++ b/frontend/src/assets/main.css
@@ -0,0 +1,314 @@
+/* ===== MoKeeText Design System ===== */
+:root {
+ --bg-page: #F5F6F8;
+ --bg-sidebar: #FCFCFD;
+ --bg-surface: #FFFFFF;
+ --bg-hover: #F2F3F5;
+ --bg-active: #EEF3FF;
+
+ --text-primary: #1F2329;
+ --text-secondary: #646A73;
+ --text-tertiary: #8F959E;
+ --text-placeholder: #BCC0C6;
+
+ --border-light: #E5E6EB;
+ --border-medium: #DEE0E3;
+
+ --brand: #3370FF;
+ --brand-hover: #245BDB;
+ --brand-light: #EEF3FF;
+
+ --danger: #F54A45;
+ --danger-light: #FFF1F0;
+ --success: #34C759;
+
+ --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
+ --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
+ --shadow-md: 0 4px 12px rgba(0,0,0,.08);
+ --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+ font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-page);
+ height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased;
+}
+
+#app { height: 100vh; display: flex; flex-direction: column; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #D0D3D7; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #B0B3B7; }
+
+/* ===== Topnav ===== */
+.topnav { display:flex; align-items:center; height:48px; padding:0 20px; background:var(--bg-surface); border-bottom:1px solid var(--border-light); flex-shrink:0; }
+.topnav-brand { font-weight:700; font-size:15px; color:var(--text-primary); text-decoration:none; margin-right:24px; }
+.topnav-link { padding:13px 16px; font-size:13px; font-weight:500; color:var(--text-secondary); text-decoration:none; border-bottom:2px solid transparent; transition:color .15s; }
+.topnav-link:hover { color:var(--brand); }
+.topnav-link.active, .topnav-link.router-link-exact-active { color:var(--brand); border-bottom-color:var(--brand); }
+.user-widget { margin-left:auto; display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:20px; cursor:pointer; transition:background .15s; user-select:none; }
+.user-widget:hover { background:var(--bg-hover); }
+.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }
+.user-name { font-size:13px; font-weight:500; }
+
+.footer { display:flex; align-items:center; justify-content:space-between; height:32px; padding:0 20px; background:var(--bg-surface); border-top:1px solid var(--border-light); font-size:11px; color:var(--text-tertiary); flex-shrink:0; }
+
+/* ===== Layout ===== */
+.layout { display:flex; flex:1; min-height:0; }
+.sidebar { width:260px; min-width:260px; background:var(--bg-sidebar); border-right:1px solid var(--border-light); display:flex; flex-direction:column; padding:12px; gap:8px; overflow:hidden; transition:all .2s; }
+.sidebar.collapsed { width:40px; min-width:40px; padding:8px 4px; }
+.content { flex:1; display:flex; flex-direction:column; background:var(--bg-surface); min-width:0; }
+
+/* ===== Buttons ===== */
+.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border:none; border-radius:var(--r-sm); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; white-space:nowrap; }
+.btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+.btn-primary { background:var(--brand); color:#fff; }
+.btn-primary:hover { background:var(--brand-hover); }
+.btn-outline { background:var(--bg-surface); color:var(--brand); border:1px solid var(--brand); }
+.btn-outline:hover { background:var(--brand-light); }
+.btn-ghost { background:transparent; color:var(--text-secondary); }
+.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
+.btn-danger-ghost { background:transparent; color:var(--text-tertiary); }
+.btn-danger-ghost:hover { background:var(--danger-light); color:var(--danger); }
+.btn-block { width:100%; }
+.btn-sm { height:30px; font-size:12px; padding:0 12px; }
+.btn-xs { height:24px; font-size:11px; padding:0 8px; }
+
+/* ===== Input / Select / Textarea ===== */
+.input, .select { width:100%; height:36px; padding:0 12px; border:1px solid var(--border-medium); border-radius:var(--r-sm); font-size:13px; color:var(--text-primary); background:var(--bg-surface); outline:none; transition:border .15s; font-family:inherit; }
+.input:focus, .select:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-light); }
+.input::placeholder { color:var(--text-placeholder); }
+.textarea { width:100%; padding:8px 12px; border:1px solid var(--border-medium); border-radius:var(--r-sm); font-size:13px; color:var(--text-primary); background:var(--bg-surface); outline:none; resize:vertical; font-family:inherit; transition:border .15s; min-height:60px; }
+.textarea:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-light); }
+
+/* ===== Sidebar Items ===== */
+.sidebar-label { font-size:10px; font-weight:700; color:var(--text-tertiary); letter-spacing:.06em; text-transform:uppercase; padding:8px 8px 4px 4px; margin-top:8px; display:flex; align-items:center; justify-content:space-between; }
+.sidebar-label .add-btn { cursor:pointer; color:var(--text-tertiary); font-size:16px; line-height:1; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .15s; }
+.sidebar-label .add-btn:hover { background:var(--bg-hover); color:var(--brand); }
+
+.folder-item { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; color:var(--text-secondary); transition:all .12s; user-select:none; position:relative; }
+.folder-item:hover { background:var(--bg-hover); color:var(--text-primary); }
+.folder-item.active { background:var(--brand-light); color:var(--brand); }
+.folder-item .count { margin-left:auto; font-size:10px; font-weight:500; color:var(--text-tertiary); background:var(--bg-hover); padding:1px 6px; border-radius:8px; min-width:20px; text-align:center; }
+.folder-item.active .count { background:rgba(51,112,255,.12); color:var(--brand); }
+
+.folder-dot { width:6px; height:6px; border-radius:50%; background:var(--text-tertiary); flex-shrink:0; opacity:.5; }
+.folder-item.active .folder-dot { background:var(--brand); opacity:1; }
+
+.folder-more { opacity:0; padding:2px 6px; font-size:16px; font-weight:700; color:var(--text-tertiary); border-radius:4px; cursor:pointer; line-height:1; }
+.folder-item:hover .folder-more { opacity:1; }
+.folder-more:hover { background:var(--bg-hover); color:var(--text-primary); }
+
+.site-item { display:flex; align-items:center; gap:8px; height:36px; padding:0 8px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; transition:background .1s; user-select:none; }
+.site-item:hover { background:var(--bg-hover); }
+.site-item.active { background:var(--brand-light); color:var(--brand); font-weight:500; }
+.site-item .site-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.site-item .site-count { font-size:10px; color:var(--text-tertiary); flex-shrink:0; }
+
+.note-list-item { display:flex; align-items:center; gap:8px; height:34px; padding:0 8px; border-radius:var(--r-sm); cursor:pointer; font-size:12px; transition:background .1s; }
+.note-list-item:hover { background:var(--bg-hover); }
+.note-list-item.active { background:var(--brand-light); }
+.note-list-item .note-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
+.note-list-item .note-date { font-size:10px; color:var(--text-tertiary); }
+
+.folder-children { margin-left:16px; }
+.folder-arrow { font-size:10px; color:var(--text-tertiary); width:12px; flex-shrink:0; }
+
+/* ===== Card ===== */
+.card { background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-lg); padding:16px; transition:box-shadow .15s; margin-bottom:12px; }
+.card:hover { box-shadow:var(--shadow-sm); }
+.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
+.card-title { font-size:14px; font-weight:600; }
+.card-body { display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; font-size:13px; align-items:center; }
+.card-body .label { color:var(--text-tertiary); font-size:12px; white-space:nowrap; }
+
+.card-btn { height:30px; padding:0 10px; border:1px solid var(--border-light); border-radius:var(--r-sm); background:var(--bg-surface); font-size:12px; cursor:pointer; color:var(--text-secondary); transition:all .15s; font-family:inherit; }
+.card-btn:hover { background:var(--bg-hover); border-color:var(--border-medium); }
+.card-btn.edit-btn:hover { color:var(--brand); border-color:var(--brand); background:var(--brand-light); }
+.card-btn.danger-btn:hover { color:var(--danger); border-color:var(--danger); background:var(--danger-light); }
+
+/* ===== Modal ===== */
+.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:100; animation:fi .15s ease; }
+@keyframes fi { from{opacity:0} to{opacity:1} }
+.modal { background:var(--bg-surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); width:480px; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; animation:si .15s ease; }
+@keyframes si { from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1} }
+.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-light); flex-shrink:0; }
+.modal-title { font-size:15px; font-weight:600; }
+.modal-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:var(--r-sm); cursor:pointer; font-size:18px; color:var(--text-tertiary); transition:all .15s; }
+.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }
+.modal-body { padding:20px; overflow-y:auto; flex:1; }
+.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--border-light); flex-shrink:0; }
+
+/* ===== Form ===== */
+.form-group { margin-bottom:16px; }
+.form-group:last-child { margin-bottom:0; }
+.form-label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
+.form-row { display:flex; gap:8px; align-items:center; }
+
+/* ===== Editor ===== */
+.editor-wrap { flex:1; display:flex; min-height:0; }
+.editor-pane { flex:1; padding:20px; overflow-y:auto; min-width:0; display:flex; justify-content:center; }
+.editor-pane + .editor-pane { border-left:1px solid var(--border-light); }
+.editor-inner { width:100%; max-width:960px; }
+
+.content-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border-light); gap:12px; flex-shrink:0; }
+.content-title { font-size:16px; font-weight:600; color:var(--text-primary); border:none; outline:none; background:transparent; flex:1; font-family:inherit; }
+.content-title::placeholder { color:var(--text-placeholder); }
+
+.toggle-group { display:flex; background:var(--bg-hover); border-radius:var(--r-sm); padding:2px; }
+.toggle-group button { height:28px; padding:0 12px; border:none; background:transparent; border-radius:4px; font-size:12px; cursor:pointer; color:var(--text-secondary); transition:all .15s; font-family:inherit; }
+.toggle-group button.active { background:var(--bg-surface); box-shadow:var(--shadow-sm); color:var(--text-primary); font-weight:500; }
+
+.save-badge { font-size:10px; color:var(--text-tertiary); background:var(--bg-hover); padding:2px 8px; border-radius:10px; flex-shrink:0; white-space:nowrap; }
+
+/* ===== Toolbar ===== */
+.tb-bar { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:4px 6px; background:var(--bg-sidebar); border:1px solid var(--border-light); border-radius:var(--r-md); margin-bottom:16px; }
+.tb-divider { width:1px; height:16px; background:var(--border-medium); margin:0 4px; }
+.tb-btn { height:28px; padding:0 8px; border:none; background:transparent; border-radius:4px; font-size:12px; cursor:pointer; color:var(--text-secondary); white-space:nowrap; font-family:inherit; transition:all .1s; }
+.tb-btn:hover { background:var(--bg-hover); }
+.tb-btn.active { background:var(--brand-light); color:var(--brand); }
+.tb-color { width:24px; height:24px; border:1px solid var(--border-medium); border-radius:4px; cursor:pointer; padding:0; margin:0 2px; }
+
+/* ProseMirror */
+.ProseMirror { outline:none; min-height:300px; font-size:14px; line-height:1.8; }
+.ProseMirror h1 { font-size:22px; font-weight:700; margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border-light); }
+.ProseMirror h2 { font-size:18px; font-weight:600; margin:14px 0 6px; }
+.ProseMirror h3 { font-size:15px; font-weight:600; margin:12px 0 4px; }
+.ProseMirror p { margin:4px 0; }
+.ProseMirror ul, .ProseMirror ol { padding-left:20px; margin:4px 0; }
+.ProseMirror li { margin:2px 0; }
+.ProseMirror blockquote { border-left:3px solid var(--brand); padding-left:12px; color:var(--text-secondary); margin:8px 0; }
+.ProseMirror pre { background:#F7F8FA; padding:12px 16px; border-radius:var(--r-sm); overflow-x:auto; font-family:"SF Mono","Fira Code","Consolas",monospace; font-size:13px; line-height:1.6; }
+.ProseMirror code { background:#F2F3F5; padding:2px 6px; border-radius:3px; font-size:12px; font-family:"SF Mono","Fira Code","Consolas",monospace; }
+.ProseMirror table { border-collapse:collapse; width:100%; margin:8px 0; }
+.ProseMirror th, .ProseMirror td { border:1px solid var(--border-light); padding:8px 12px; text-align:left; }
+.ProseMirror th { background:#F7F8FA; font-weight:600; font-size:13px; }
+.ProseMirror img { max-width:100%; border-radius:var(--r-sm); }
+.ProseMirror mark { background:#FFF3CD; padding:2px 4px; border-radius:2px; }
+
+/* ===== Import ===== */
+.import-textarea { width:100%; height:90px; padding:10px 12px; border:2px solid var(--brand); border-radius:var(--r-md); font-size:13px; font-family:inherit; resize:vertical; outline:none; background:var(--brand-light); }
+.import-hint { font-size:11px; color:var(--text-tertiary); margin:4px 0 12px; }
+.result-box { background:#F0FAF0; border:1px solid #A3E4A7; border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px; }
+.result-grid { display:grid; grid-template-columns:70px 1fr; gap:6px 12px; font-size:13px; }
+.alert { padding:8px 12px; border-radius:var(--r-sm); font-size:12px; }
+.alert-warning { background:#FFF7E6; color:#8A5D00; }
+
+/* ===== Stats ===== */
+.stat-row { display:flex; gap:6px; }
+.stat { flex:1; text-align:center; padding:8px 4px; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-sm); font-size:11px; }
+.stat-num { font-size:18px; font-weight:700; }
+.stat-label { color:var(--text-tertiary); font-size:10px; }
+
+/* ===== Tag Badge ===== */
+.tag-badge { display:inline-block; padding:2px 10px; background:var(--bg-hover); border-radius:10px; font-size:11px; cursor:pointer; color:var(--text-secondary); transition:all .15s; }
+.tag-badge:hover { background:#DEE0E3; }
+.tag-badge.active { background:var(--brand); color:#fff; }
+
+/* ===== Toast ===== */
+.toast { position:fixed; top:20px; right:20px; background:#1F2329; color:#fff; padding:8px 16px; border-radius:var(--r-sm); font-size:13px; z-index:9999; animation:fi .2s ease; }
+
+/* ===== Folder Menu ===== */
+.folder-menu { position:absolute; right:0; top:100%; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-md); box-shadow:var(--shadow-md); z-index:10; min-width:120px; padding:4px; }
+.folder-menu-item { padding:6px 12px; cursor:pointer; font-size:12px; color:var(--text-primary); border-radius:var(--r-sm); transition:background .1s; }
+.folder-menu-item:hover { background:var(--bg-hover); }
+.folder-menu-item.danger { color:var(--danger); }
+.folder-menu-item.danger:hover { background:var(--danger-light); }
+
+/* ===== Lightbox ===== */
+.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:200; cursor:zoom-out; }
+.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; cursor:default; border-radius:4px; }
+.lightbox-close { position:fixed; top:16px; right:16px; width:40px; height:40px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:22px; border-radius:50%; cursor:pointer; z-index:201; display:flex; align-items:center; justify-content:center; transition:background .15s; }
+.lightbox-close:hover { background:rgba(255,255,255,.3); }
+
+/* Selection toolbar */
+.sel-toolbar { position:fixed; z-index:150; background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-md); box-shadow:var(--shadow-md); padding:6px; display:flex; gap:4px; }
+
+/* ===== Comments Panel ===== */
+.comments-panel { width:260px; min-width:260px; border-left:1px solid var(--border-light); background:var(--bg-sidebar); display:flex; flex-direction:column; font-size:13px; }
+
+/* ===== Helpers ===== */
+.hidden { display:none !important; }
+
+/* ================================================
+ Mobile responsive (<=768px)
+ ================================================ */
+@media (max-width: 768px) {
+ /* -- App shell -- */
+ .app-nav { position:fixed; left:0; top:0; bottom:0; z-index:50;
+ transform:translateX(-100%); transition:transform .25s; }
+ .app-nav.open { transform:translateX(0); }
+ .app-nav.collapsed { width:200px; min-width:200px; }
+
+ .app-main { width:100%; }
+
+ /* Hamburger */
+ .hamburger { display:flex !important; }
+
+ /* -- Layout: single column -- */
+ .layout { flex-direction:column; }
+
+ /* Sidebar becomes a top filter bar or hidden */
+ .sidebar { width:100%; min-width:100%; max-height:40vh; flex-shrink:0; border-right:none; border-bottom:1px solid var(--border-light); }
+
+ /* -- Content full width -- */
+ .content { width:100%; }
+ .content-header { flex-wrap:wrap; gap:8px; padding:10px 12px; }
+ .content-title { font-size:15px; }
+
+ /* -- Tables become cards -- */
+ .doc-table, .doc-table thead, .doc-table tbody, .doc-table th, .doc-table td, .doc-table tr { display:block; }
+ .doc-table thead { display:none; }
+ .doc-table tr { padding:10px 12px; border-bottom:1px solid var(--border-light); }
+ .doc-table td { padding:4px 0; border:none; }
+ .doc-table td:before { content:attr(data-label); font-size:10px; font-weight:600; color:var(--text-tertiary); display:block; margin-bottom:2px; text-transform:uppercase; letter-spacing:.04em; }
+ .doc-title-cell { max-width:none; white-space:normal; }
+
+ /* -- Editor -- */
+ .editor-wrap { flex-direction:column; }
+ .editor-pane { padding:12px; }
+ .editor-pane + .editor-pane { border-left:none; border-top:1px solid var(--border-light); }
+ .editor-inner { max-width:100%; }
+ .tb-bar { flex-wrap:nowrap; overflow-x:auto; gap:1px; padding:4px; }
+
+ /* -- Modals full screen -- */
+ .modal { width:100vw !important; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; }
+ .modal-overlay { align-items:flex-end; }
+
+ /* -- Account cards -- */
+ .card-body { grid-template-columns:1fr; gap:4px; }
+ .card-body .label { margin-top:6px; }
+
+ /* -- Filter tags scrollable -- */
+ .content-header { overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; }
+
+ /* -- Topbar -- */
+ .topbar { padding:0 10px; height:40px; }
+ .topbar-brand { font-size:13px; }
+
+ /* -- Lightbox -- */
+ .lightbox-close { top:10px; right:10px; width:36px; height:36px; font-size:18px; }
+ .lightbox img { max-width:95vw; max-height:85vh; }
+
+ /* -- Comments panel -- */
+ .comments-panel { width:100%; min-width:100%; max-height:40vh; border-left:none; border-top:1px solid var(--border-light); }
+}
+
+/* Hamburger button (hidden on desktop) */
+.hamburger { display:none; position:fixed; top:8px; left:8px; z-index:60; width:36px; height:36px;
+ background:var(--bg-surface); border:1px solid var(--border-light); border-radius:var(--r-sm);
+ font-size:18px; cursor:pointer; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
+
+/* Sidebar overlay for mobile */
+@media (max-width: 768px) {
+ .app-nav.open + .nav-overlay { display:block; }
+}
+.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:49; }
+.flex-1 { flex:1; }
+.text-muted { color:var(--text-tertiary); font-size:12px; }
+.mb-sm { margin-bottom:8px; }
+.mb-md { margin-bottom:16px; }
diff --git a/frontend/src/components/ConfirmModal.vue b/frontend/src/components/ConfirmModal.vue
new file mode 100644
index 0000000..b7c1dc8
--- /dev/null
+++ b/frontend/src/components/ConfirmModal.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ MoKeeText
+
+
+
+
+ 切换系统
+
+ {{ message }}
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
diff --git a/frontend/src/components/PromptModal.vue b/frontend/src/components/PromptModal.vue
new file mode 100644
index 0000000..b2cd108
--- /dev/null
+++ b/frontend/src/components/PromptModal.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/SharesView.vue b/frontend/src/views/SharesView.vue
new file mode 100644
index 0000000..6781a0e
--- /dev/null
+++ b/frontend/src/views/SharesView.vue
@@ -0,0 +1,92 @@
+
+
+ {{ filterFolderId ? folderName(filterFolderId) : '全部笔记' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 暂无笔记
+| 标题 | +创建人 | +创建时间 | +修改时间 | +操作 | +
|---|---|---|---|---|
| {{ n.title || '无标题笔记' }} | +{{ n.created_by || 'admin' }} | +{{ fmtFull(n.created_at) }} | +{{ fmtFull(n.updated_at) }} | ++ |
+
+
+
+
+ 📂 {{ folderName(editingNote.folder_id) }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ saveStatus }}
+
+
+
+
+
+
+
+
+
+ 选择有效期：
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ✅ 链接已生成
+
+
+
+
+ {{ shareExpiresText }}
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/views/WebsitesView.vue b/frontend/src/views/WebsitesView.vue
new file mode 100644
index 0000000..a08358f
--- /dev/null
+++ b/frontend/src/views/WebsitesView.vue
@@ -0,0 +1,439 @@
+
+
+ 分享管理
+ {{ shares.length }} 条分享
+
+
+
+
+
+
+
+
+
+ 暂无分享记录
+| 笔记标题 | +分享链接 | +有效期 | +创建人 | +更新时间 | +操作 | +
|---|---|---|---|---|---|
| {{ s.title || '无标题' }} | ++ {{ BASE + s.share_url }} + | +{{ s.share_expires_at }} | +{{ s.created_by }} | +{{ fmt(s.updated_at) }} | +
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/static/css/style.css b/frontend/static/css/style.css
new file mode 100644
index 0000000..44b4e94
--- /dev/null
+++ b/frontend/static/css/style.css
@@ -0,0 +1,701 @@
+/* ========================================
+ MoKeeText — Feishu-inspired Design System
+ ======================================== */
+
+/* ——— Design Tokens ——— */
+:root {
+ /* Surface */
+ --bg-page: #F5F6F8;
+ --bg-sidebar: #FCFCFD;
+ --bg-surface: #FFFFFF;
+ --bg-hover: #F2F3F5;
+ --bg-active: #EEF3FF;
+
+ /* Text */
+ --text-primary: #1F2329;
+ --text-secondary: #646A73;
+ --text-tertiary: #8F959E;
+ --text-placeholder:#BCC0C6;
+
+ /* Border */
+ --border-light: #E5E6EB;
+ --border-medium: #DEE0E3;
+
+ /* Brand */
+ --brand: #3370FF;
+ --brand-hover: #245BDB;
+ --brand-light: #EEF3FF;
+ --brand-ghost: rgba(51,112,255,0.06);
+
+ /* Semantic */
+ --danger: #F54A45;
+ --danger-light: #FFF1F0;
+ --success: #34C759;
+
+ /* Radius */
+ --r-sm: 6px;
+ --r-md: 8px;
+ --r-lg: 12px;
+
+ /* Shadow */
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+ --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+ --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
+
+ /* Spacing */
+ --space-xs: 4px;
+ --space-sm: 8px;
+ --space-md: 12px;
+ --space-lg: 16px;
+ --space-xl: 20px;
+ --space-2xl: 24px;
+}
+
+/* ——— Reset ——— */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--text-primary);
+ background: var(--bg-page);
+ height: 100vh;
+ overflow: hidden;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* ——— Top Navigation ——— */
+.topnav {
+ display: flex;
+ align-items: center;
+ height: 48px;
+ padding: 0 var(--space-xl);
+ background: var(--bg-surface);
+ border-bottom: 1px solid var(--border-light);
+ gap: 0;
+ flex-shrink: 0;
+ user-select: none;
+}
+.topnav-brand {
+ font-weight: 700;
+ font-size: 15px;
+ color: var(--text-primary);
+ text-decoration: none;
+ margin-right: var(--space-2xl);
+ letter-spacing: -0.01em;
+}
+.topnav-link {
+ padding: 13px var(--space-lg);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text-secondary);
+ text-decoration: none;
+ border-bottom: 2px solid transparent;
+ transition: color 0.15s;
+ letter-spacing: 0;
+}
+.topnav-link:hover { color: var(--brand); }
+.topnav-link.active {
+ color: var(--brand);
+ border-bottom-color: var(--brand);
+}
+/* ——— User Widget ——— */
+.user-widget {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 4px 10px 4px 4px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background 0.15s;
+ user-select: none;
+}
+.user-widget:hover { background: var(--bg-hover); }
+.user-avatar {
+ width: 28px; height: 28px;
+ border-radius: 50%;
+ background: var(--brand);
+ color: #fff;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 12px; font-weight: 600;
+ flex-shrink: 0;
+}
+.user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
+
+/* ——— Footer ——— */
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 32px;
+ padding: 0 var(--space-xl);
+ background: var(--bg-surface);
+ border-top: 1px solid var(--border-light);
+ font-size: 11px;
+ color: var(--text-tertiary);
+ flex-shrink: 0;
+}
+.footer-icp { color: var(--text-placeholder); }
+
+/* ——— Main Layout ——— */
+.layout { display: flex; height: calc(100vh - 48px - 32px); }
+
+/* ——— Sidebar ——— */
+.sidebar {
+ width: 260px;
+ min-width: 260px;
+ background: var(--bg-sidebar);
+ border-right: 1px solid var(--border-light);
+ display: flex;
+ flex-direction: column;
+ padding: var(--space-md);
+ gap: var(--space-sm);
+ overflow: hidden;
+}
+
+/* Sidebar section label */
+.sidebar-label {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-tertiary);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ padding: 4px 0;
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+/* ——— Buttons ——— */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ height: 36px;
+ padding: 0 var(--space-lg);
+ border: none;
+ border-radius: var(--r-sm);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s;
+ font-family: inherit;
+ white-space: nowrap;
+}
+.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+
+.btn-primary {
+ background: var(--brand);
+ color: #fff;
+}
+.btn-primary:hover { background: var(--brand-hover); }
+
+.btn-outline {
+ background: var(--bg-surface);
+ color: var(--brand);
+ border: 1px solid var(--brand);
+}
+.btn-outline:hover { background: var(--brand-light); }
+
+.btn-ghost {
+ background: transparent;
+ color: var(--text-secondary);
+}
+.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
+
+.btn-danger-ghost {
+ background: transparent;
+ color: var(--text-tertiary);
+}
+.btn-danger-ghost:hover { background: var(--danger-light); color: var(--danger); }
+
+.btn-block { width: 100%; }
+
+.btn-sm { height: 30px; font-size: 12px; padding: 0 12px; }
+
+/* ——— Input ——— */
+.input {
+ width: 100%;
+ height: 36px;
+ padding: 0 12px;
+ border: 1px solid var(--border-medium);
+ border-radius: var(--r-sm);
+ font-size: 13px;
+ color: var(--text-primary);
+ background: var(--bg-surface);
+ outline: none;
+ transition: border 0.15s;
+ font-family: inherit;
+}
+.input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
+.input::placeholder { color: var(--text-placeholder); }
+
+.textarea {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid var(--border-medium);
+ border-radius: var(--r-sm);
+ font-size: 13px;
+ color: var(--text-primary);
+ background: var(--bg-surface);
+ outline: none;
+ resize: vertical;
+ font-family: inherit;
+ transition: border 0.15s;
+ min-height: 60px;
+}
+.textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
+
+.select {
+ width: 100%;
+ height: 36px;
+ padding: 0 12px;
+ border: 1px solid var(--border-medium);
+ border-radius: var(--r-sm);
+ font-size: 13px;
+ color: var(--text-primary);
+ background: var(--bg-surface);
+ outline: none;
+ cursor: pointer;
+ font-family: inherit;
+}
+
+/* ——— Folder Tree ——— */
+.folder-item {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ height: 32px;
+ padding: 0 8px;
+ border-radius: var(--r-sm);
+ cursor: pointer;
+ font-size: 13px;
+ color: var(--text-primary);
+ transition: background 0.1s;
+ user-select: none;
+}
+.folder-item:hover { background: var(--bg-hover); }
+.folder-item.active { background: var(--brand-light); color: var(--brand); font-weight: 500; }
+.folder-item .count {
+ margin-left: auto;
+ font-size: 11px;
+ color: var(--text-tertiary);
+}
+.folder-item.active .count { color: var(--brand); opacity: 0.7; }
+
+/* Folder menu */
+.folder-more {
+ opacity: 0;
+ padding: 2px 6px;
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--text-tertiary);
+ border-radius: 4px;
+ cursor: pointer;
+ line-height: 1;
+}
+.folder-item:hover .folder-more { opacity: 1; }
+.folder-more:hover { background: var(--bg-hover); color: var(--text-primary); }
+
+.folder-menu {
+ position: absolute;
+ right: 0;
+ top: 100%;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-light);
+ border-radius: var(--r-md);
+ box-shadow: var(--shadow-md);
+ z-index: 10;
+ min-width: 120px;
+ padding: 4px;
+}
+.folder-menu-item {
+ padding: 6px 12px;
+ cursor: pointer;
+ font-size: 12px;
+ color: var(--text-primary);
+ border-radius: var(--r-sm);
+ transition: background 0.1s;
+}
+.folder-menu-item:hover { background: var(--bg-hover); }
+.folder-menu-item.danger { color: var(--danger); }
+.folder-menu-item.danger:hover { background: var(--danger-light); }
+
+.folder-children { margin-left: 16px; }
+.folder-arrow { font-size: 10px; color: var(--text-tertiary); width: 12px; flex-shrink: 0; }
+
+/* ——— Site List ——— */
+.site-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 36px;
+ padding: 0 8px;
+ border-radius: var(--r-sm);
+ cursor: pointer;
+ font-size: 13px;
+ transition: background 0.1s;
+ user-select: none;
+}
+.site-item:hover { background: var(--bg-hover); }
+.site-item.active { background: var(--brand-light); color: var(--brand); font-weight: 500; }
+.site-item .site-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.site-item .site-count { font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
+.site-item.active .site-count { color: var(--brand); opacity: 0.7; }
+
+/* ——— Content Area ——— */
+.content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ background: var(--bg-surface);
+ min-width: 0;
+}
+.content-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px var(--space-xl);
+ border-bottom: 1px solid var(--border-light);
+ gap: var(--space-md);
+ flex-shrink: 0;
+}
+.content-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary);
+ border: none;
+ outline: none;
+ background: transparent;
+ flex: 1;
+ font-family: inherit;
+}
+.content-title::placeholder { color: var(--text-placeholder); }
+
+/* ——— View Toggle ——— */
+.toggle-group {
+ display: flex;
+ background: var(--bg-hover);
+ border-radius: var(--r-sm);
+ padding: 2px;
+}
+.toggle-group button {
+ height: 28px;
+ padding: 0 12px;
+ border: none;
+ background: transparent;
+ border-radius: 4px;
+ font-size: 12px;
+ cursor: pointer;
+ color: var(--text-secondary);
+ transition: all 0.15s;
+ font-family: inherit;
+}
+.toggle-group button.active {
+ background: var(--bg-surface);
+ box-shadow: var(--shadow-sm);
+ color: var(--text-primary);
+ font-weight: 500;
+}
+
+/* ——— Editor Area ——— */
+.editor-wrap {
+ flex: 1;
+ display: flex;
+ min-height: 0;
+}
+.editor-pane {
+ flex: 1;
+ padding: var(--space-xl);
+ overflow-y: auto;
+ min-width: 0;
+}
+.editor-pane + .editor-pane { border-left: 1px solid var(--border-light); }
+
+/* ——— Tiptap Toolbar ——— */
+.tb-bar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 2px;
+ padding: 4px 6px;
+ background: var(--bg-sidebar);
+ border: 1px solid var(--border-light);
+ border-radius: var(--r-md);
+ margin-bottom: var(--space-lg);
+}
+.tb-divider {
+ width: 1px;
+ height: 16px;
+ background: var(--border-medium);
+ margin: 0 4px;
+}
+.tb-btn {
+ height: 28px;
+ padding: 0 8px;
+ border: none;
+ background: transparent;
+ border-radius: 4px;
+ font-size: 12px;
+ cursor: pointer;
+ color: var(--text-secondary);
+ white-space: nowrap;
+ font-family: inherit;
+ transition: all 0.1s;
+}
+.tb-btn:hover { background: var(--bg-hover); }
+.tb-btn.active { background: var(--brand-light); color: var(--brand); }
+.tb-color {
+ width: 24px;
+ height: 24px;
+ border: 1px solid var(--border-medium);
+ border-radius: 4px;
+ cursor: pointer;
+ padding: 0;
+ margin: 0 2px;
+}
+
+/* ProseMirror / Tiptap Content */
+.ProseMirror { outline: none; min-height: 300px; font-size: 14px; line-height: 1.8; }
+.ProseMirror h1 { font-size: 22px; font-weight: 700; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
+.ProseMirror h2 { font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
+.ProseMirror h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
+.ProseMirror p { margin: 4px 0; }
+.ProseMirror ul, .ProseMirror ol { padding-left: 20px; margin: 4px 0; }
+.ProseMirror li { margin: 2px 0; }
+.ProseMirror blockquote { border-left: 3px solid var(--brand); padding-left: 12px; color: var(--text-secondary); margin: 8px 0; }
+.ProseMirror pre { background: #F7F8FA; padding: 12px 16px; border-radius: var(--r-sm); overflow-x: auto; font-family: "SF Mono","Fira Code","Consolas",monospace; font-size: 13px; line-height: 1.6; }
+.ProseMirror code { background: #F2F3F5; padding: 2px 6px; border-radius: 3px; font-size: 12px; font-family: "SF Mono","Fira Code","Consolas",monospace; }
+.ProseMirror table { border-collapse: collapse; width: 100%; margin: 8px 0; }
+.ProseMirror th, .ProseMirror td { border: 1px solid var(--border-light); padding: 8px 12px; text-align: left; }
+.ProseMirror th { background: #F7F8FA; font-weight: 600; font-size: 13px; }
+.ProseMirror img { max-width: 100%; border-radius: var(--r-sm); }
+.ProseMirror mark { background: #FFF3CD; padding: 2px 4px; border-radius: 2px; }
+
+/* ——— Note List in Sidebar ——— */
+.note-list-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 34px;
+ padding: 0 8px;
+ border-radius: var(--r-sm);
+ cursor: pointer;
+ font-size: 12px;
+ transition: background 0.1s;
+}
+.note-list-item:hover { background: var(--bg-hover); }
+.note-list-item.active { background: var(--brand-light); }
+.note-list-item .note-title-s {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 500;
+}
+.note-list-item .note-date { font-size: 10px; color: var(--text-tertiary); }
+
+/* ——— Account Card ——— */
+.card {
+ background: var(--bg-surface);
+ border: 1px solid var(--border-light);
+ border-radius: var(--r-lg);
+ padding: var(--space-lg);
+ transition: box-shadow 0.15s;
+}
+.card:hover { box-shadow: var(--shadow-sm); }
+.card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+.card-title { font-size: 14px; font-weight: 600; }
+.card-body { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; font-size: 13px; align-items: center; }
+.card-body .label { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
+.card-body .value { font-family: "SF Mono","Fira Code","Consolas",monospace; font-size: 13px; word-break: break-all; }
+
+.card-actions { display: flex; gap: 6px; }
+.card-btn {
+ height: 30px;
+ padding: 0 10px;
+ border: 1px solid var(--border-light);
+ border-radius: var(--r-sm);
+ background: var(--bg-surface);
+ font-size: 12px;
+ cursor: pointer;
+ color: var(--text-secondary);
+ transition: all 0.15s;
+ font-family: inherit;
+}
+.card-btn:hover { background: var(--bg-hover); border-color: var(--border-medium); }
+.card-btn.edit:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-light); }
+.card-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
+
+/* ——— Modal ——— */
+.modal-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,0.35);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+ animation: fade-in 0.15s ease;
+}
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+.modal {
+ background: var(--bg-surface);
+ border-radius: var(--r-lg);
+ box-shadow: var(--shadow-lg);
+ width: 480px;
+ max-width: 90vw;
+ max-height: 85vh;
+ display: flex;
+ flex-direction: column;
+ animation: slide-in 0.15s ease;
+}
+@keyframes slide-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+.modal-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-lg) var(--space-xl);
+ border-bottom: 1px solid var(--border-light);
+ flex-shrink: 0;
+}
+.modal-title { font-size: 15px; font-weight: 600; }
+.modal-close {
+ width: 28px; height: 28px;
+ display: flex; align-items: center; justify-content: center;
+ border: none; background: transparent;
+ border-radius: var(--r-sm);
+ cursor: pointer;
+ font-size: 18px; color: var(--text-tertiary);
+ transition: all 0.15s;
+}
+.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
+
+.modal-body { padding: var(--space-xl); overflow-y: auto; flex: 1; }
+
+.modal-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--space-sm);
+ padding: var(--space-md) var(--space-xl);
+ border-top: 1px solid var(--border-light);
+ flex-shrink: 0;
+}
+
+/* ——— Form ——— */
+.form-group { margin-bottom: var(--space-lg); }
+.form-group:last-child { margin-bottom: 0; }
+.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
+.form-row { display: flex; gap: var(--space-sm); align-items: center; }
+
+/* ——— Import Area ——— */
+.import-textarea {
+ width: 100%;
+ height: 90px;
+ padding: 10px 12px;
+ border: 2px solid var(--brand);
+ border-radius: var(--r-md);
+ font-size: 13px;
+ font-family: inherit;
+ resize: vertical;
+ outline: none;
+ background: var(--brand-light);
+}
+.import-hint { font-size: 11px; color: var(--text-tertiary); margin: 4px 0 12px; }
+
+.result-box {
+ background: #F0FAF0;
+ border: 1px solid #A3E4A7;
+ border-radius: var(--r-md);
+ padding: 14px 16px;
+ margin-bottom: var(--space-lg);
+}
+.result-grid { display: grid; grid-template-columns: 70px 1fr; gap: 6px 12px; font-size: 13px; }
+
+.alert {
+ padding: 8px 12px;
+ border-radius: var(--r-sm);
+ font-size: 12px;
+}
+.alert-warning { background: #FFF7E6; color: #8A5D00; }
+
+/* ——— Stats ——— */
+.stat-row { display: flex; gap: 6px; }
+.stat {
+ flex: 1;
+ text-align: center;
+ padding: 8px 4px;
+ background: var(--bg-surface);
+ border: 1px solid var(--border-light);
+ border-radius: var(--r-sm);
+ font-size: 11px;
+}
+.stat-num { font-size: 18px; font-weight: 700; }
+.stat-label { color: var(--text-tertiary); font-size: 10px; }
+
+/* ——— Toast ——— */
+.toast {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: #1F2329;
+ color: #fff;
+ padding: 8px 16px;
+ border-radius: var(--r-sm);
+ font-size: 13px;
+ z-index: 9999;
+ animation: fade-in 0.2s ease;
+}
+
+/* ——— Tag Badge ——— */
+.tag-badge {
+ display: inline-block;
+ padding: 2px 10px;
+ background: var(--bg-hover);
+ border-radius: 10px;
+ font-size: 11px;
+ cursor: pointer;
+ color: var(--text-secondary);
+ transition: all 0.15s;
+}
+.tag-badge:hover { background: #DEE0E3; }
+.tag-badge.active { background: var(--brand); color: #fff; }
+.tag-add { border: 1px dashed var(--border-medium); background: transparent; color: var(--text-tertiary); }
+.tag-add:hover { border-color: var(--brand); color: var(--brand); background: transparent; }
+
+/* ——— Helpers ——— */
+.hidden { display: none !important; }
+.flex-1 { flex: 1; }
+.text-muted { color: var(--text-tertiary); font-size: 12px; }
+.text-sm { font-size: 12px; }
+.gap-xs { gap: var(--space-xs); }
+.gap-sm { gap: var(--space-sm); }
+.mb-sm { margin-bottom: var(--space-sm); }
+.mb-md { margin-bottom: var(--space-md); }
+
+/* ——— Scrollbar ——— */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #D0D3D7; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #B0B3B7; }
+
+/* ——— Brand wrapper ——— */
+.save-badge {
+ font-size: 10px;
+ color: var(--text-tertiary);
+ background: var(--bg-hover);
+ padding: 2px 8px;
+ border-radius: 10px;
+ flex-shrink: 0;
+}
diff --git a/frontend/static/dist/assets/index-5uIxZ5nb.css b/frontend/static/dist/assets/index-5uIxZ5nb.css
new file mode 100644
index 0000000..a0fcdc2
--- /dev/null
+++ b/frontend/static/dist/assets/index-5uIxZ5nb.css
@@ -0,0 +1 @@
+.app-shell[data-v-727c46b1]{height:100vh;display:flex}.app-nav[data-v-727c46b1]{background:var(--bg-sidebar);border-right:1px solid var(--border-light);flex-direction:column;width:200px;min-width:200px;transition:all .2s;display:flex;overflow:hidden}.app-nav.collapsed[data-v-727c46b1]{width:56px;min-width:56px}.nav-brand[data-v-727c46b1]{height:48px;color:var(--brand);cursor:pointer;border-bottom:1px solid var(--border-light);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex}.nav-menu[data-v-727c46b1]{flex-direction:column;flex:1;gap:2px;padding:8px;display:flex}.nav-item[data-v-727c46b1]{border-radius:var(--r-sm);height:38px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;align-items:center;gap:10px;padding:0 10px;font-size:13px;font-weight:500;text-decoration:none;transition:all .12s;display:flex}.nav-item[data-v-727c46b1]:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active[data-v-727c46b1],.nav-item.router-link-exact-active[data-v-727c46b1]{background:var(--brand-light);color:var(--brand);position:relative}.nav-item.active[data-v-727c46b1]:before,.nav-item.router-link-exact-active[data-v-727c46b1]:before{content:"";background:var(--brand);border-radius:0 2px 2px 0;width:3px;position:absolute;top:8px;bottom:8px;left:0}.nav-icon[data-v-727c46b1]{text-align:center;opacity:.7;flex-shrink:0;width:22px;font-size:15px}.nav-item.active .nav-icon[data-v-727c46b1],.nav-item.router-link-exact-active .nav-icon[data-v-727c46b1]{opacity:1}.nav-label[data-v-727c46b1]{overflow:hidden}.collapsed .nav-label[data-v-727c46b1]{display:none}.nav-bottom[data-v-727c46b1]{border-top:1px solid var(--border-light);flex-direction:column;gap:4px;padding:8px;display:flex}.app-main[data-v-727c46b1]{flex-direction:column;flex:1;min-width:0;display:flex;overflow:visible}.topbar[data-v-727c46b1]{background:var(--bg-surface);border-bottom:1px solid var(--border-light);flex-shrink:0;align-items:center;height:44px;padding:0 16px;display:flex}.header-left[data-v-727c46b1]{align-items:center;gap:8px;display:flex}.header-title[data-v-727c46b1]{color:var(--text-primary);font-size:15px;font-weight:500}.toggle-sidebar-btn[data-v-727c46b1]{border-radius:var(--r-sm);cursor:pointer;width:32px;height:32px;color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;font-size:16px;transition:all .15s;display:flex}.toggle-sidebar-btn[data-v-727c46b1]:hover{background:var(--bg-hover);color:var(--text-primary)}.topbar-right[data-v-727c46b1]{flex-shrink:0;align-items:center;display:flex}#mokee-user-chip[data-v-727c46b1]{flex-shrink:0}.switch-system-btn[data-v-727c46b1]{border-radius:var(--r-sm);height:28px;color:var(--text-secondary);background:0 0;flex-shrink:0;align-items:center;gap:4px;padding:0 10px;font-size:12px;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.switch-system-btn[data-v-727c46b1]:hover{background:var(--bg-hover);color:var(--brand)}.switch-icon[data-v-727c46b1]{font-size:13px}.switch-label[data-v-727c46b1]{white-space:nowrap}.app-footer[data-v-727c46b1]{height:28px;color:var(--text-tertiary);border-top:1px solid var(--border-light);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 12px;font-size:10px;display:flex}.doc-table[data-v-e7f3da17]{border-collapse:collapse;width:100%}.doc-table th[data-v-e7f3da17]{text-align:left;color:var(--text-tertiary);letter-spacing:.04em;border-bottom:2px solid var(--border-light);-webkit-user-select:none;user-select:none;padding:10px 12px;font-size:11px;font-weight:600}.doc-table td[data-v-e7f3da17]{border-bottom:1px solid var(--border-light);padding:10px 12px}.clickable-row[data-v-e7f3da17]{cursor:pointer}.clickable-row:hover td[data-v-e7f3da17]{background:var(--bg-hover)}.doc-title-cell[data-v-e7f3da17]{text-overflow:ellipsis;white-space:nowrap;max-width:0;font-size:14px;font-weight:500;overflow:hidden}.share-radio[data-v-e7f3da17]{border:1px solid var(--border-light);border-radius:var(--r-md);background:var(--bg-surface);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 14px;font-size:13px;transition:all .15s;display:flex}.share-radio[data-v-e7f3da17]:hover{border-color:var(--brand)}.share-radio.active[data-v-e7f3da17]{border-color:var(--brand);background:var(--brand-light)}.share-radio-dot[data-v-e7f3da17]{border:2px solid var(--border-medium);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;transition:all .15s;display:inline-flex}.share-radio.active .share-radio-dot[data-v-e7f3da17]{border-color:var(--brand)}.share-radio.active .share-radio-dot[data-v-e7f3da17]:after{content:"";background:var(--brand);border-radius:50%;width:8px;height:8px}.doc-table[data-v-04fd67c6]{border-collapse:collapse;width:100%}.doc-table th[data-v-04fd67c6]{text-align:left;color:var(--text-tertiary);letter-spacing:.04em;border-bottom:2px solid var(--border-light);-webkit-user-select:none;user-select:none;padding:10px 12px;font-size:11px;font-weight:600}.doc-table td[data-v-04fd67c6]{border-bottom:1px solid var(--border-light);padding:10px 12px}.doc-title-cell[data-v-04fd67c6]{text-overflow:ellipsis;white-space:nowrap;max-width:0;font-size:14px;font-weight:500;overflow:hidden}:root{--bg-page:#f5f6f8;--bg-sidebar:#fcfcfd;--bg-surface:#fff;--bg-hover:#f2f3f5;--bg-active:#eef3ff;--text-primary:#1f2329;--text-secondary:#646a73;--text-tertiary:#8f959e;--text-placeholder:#bcc0c6;--border-light:#e5e6eb;--border-medium:#dee0e3;--brand:#3370ff;--brand-hover:#245bdb;--brand-light:#eef3ff;--danger:#f54a45;--danger-light:#fff1f0;--success:#34c759;--r-sm:6px;--r-md:8px;--r-lg:12px;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);background:var(--bg-page);-webkit-font-smoothing:antialiased;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-size:14px;line-height:1.5;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d0d3d7;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#b0b3b7}.topnav{background:var(--bg-surface);border-bottom:1px solid var(--border-light);flex-shrink:0;align-items:center;height:48px;padding:0 20px;display:flex}.topnav-brand{color:var(--text-primary);margin-right:24px;font-size:15px;font-weight:700;text-decoration:none}.topnav-link{color:var(--text-secondary);border-bottom:2px solid #0000;padding:13px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:color .15s}.topnav-link:hover{color:var(--brand)}.topnav-link.active,.topnav-link.router-link-exact-active{color:var(--brand);border-bottom-color:var(--brand)}.user-widget{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:20px;align-items:center;gap:8px;margin-left:auto;padding:4px 10px 4px 4px;transition:background .15s;display:flex}.user-widget:hover{background:var(--bg-hover)}.user-avatar{background:var(--brand);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:600;display:flex}.user-name{font-size:13px;font-weight:500}.footer{background:var(--bg-surface);border-top:1px solid var(--border-light);height:32px;color:var(--text-tertiary);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 20px;font-size:11px;display:flex}.layout{flex:1;min-height:0;display:flex}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-light);flex-direction:column;gap:8px;width:260px;min-width:260px;padding:12px;transition:all .2s;display:flex;overflow:hidden}.sidebar.collapsed{width:40px;min-width:40px;padding:8px 4px}.content{background:var(--bg-surface);flex-direction:column;flex:1;min-width:0;display:flex}.btn{border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;border:none;justify-content:center;align-items:center;gap:6px;height:36px;padding:0 16px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-hover)}.btn-outline{background:var(--bg-surface);color:var(--brand);border:1px solid var(--brand)}.btn-outline:hover{background:var(--brand-light)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-danger-ghost{color:var(--text-tertiary);background:0 0}.btn-danger-ghost:hover{background:var(--danger-light);color:var(--danger)}.btn-block{width:100%}.btn-sm{height:30px;padding:0 12px;font-size:12px}.btn-xs{height:24px;padding:0 8px;font-size:11px}.input,.select{border:1px solid var(--border-medium);border-radius:var(--r-sm);width:100%;height:36px;color:var(--text-primary);background:var(--bg-surface);outline:none;padding:0 12px;font-family:inherit;font-size:13px;transition:border .15s}.input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-light)}.input::placeholder{color:var(--text-placeholder)}.textarea{border:1px solid var(--border-medium);border-radius:var(--r-sm);width:100%;color:var(--text-primary);background:var(--bg-surface);resize:vertical;outline:none;min-height:60px;padding:8px 12px;font-family:inherit;font-size:13px;transition:border .15s}.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-light)}.sidebar-label{color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;margin-top:8px;padding:8px 8px 4px 4px;font-size:10px;font-weight:700;display:flex}.sidebar-label .add-btn{cursor:pointer;color:var(--text-tertiary);border-radius:4px;justify-content:center;align-items:center;width:22px;height:22px;font-size:16px;line-height:1;transition:all .15s;display:flex}.sidebar-label .add-btn:hover{background:var(--bg-hover);color:var(--brand)}.folder-item{border-radius:var(--r-sm);cursor:pointer;height:34px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:0 10px;font-size:13px;transition:all .12s;display:flex;position:relative}.folder-item:hover{background:var(--bg-hover);color:var(--text-primary)}.folder-item.active{background:var(--brand-light);color:var(--brand)}.folder-item .count{color:var(--text-tertiary);background:var(--bg-hover);text-align:center;border-radius:8px;min-width:20px;margin-left:auto;padding:1px 6px;font-size:10px;font-weight:500}.folder-item.active .count{color:var(--brand);background:#3370ff1f}.folder-dot{background:var(--text-tertiary);opacity:.5;border-radius:50%;flex-shrink:0;width:6px;height:6px}.folder-item.active .folder-dot{background:var(--brand);opacity:1}.folder-more{opacity:0;color:var(--text-tertiary);cursor:pointer;border-radius:4px;padding:2px 6px;font-size:16px;font-weight:700;line-height:1}.folder-item:hover .folder-more{opacity:1}.folder-more:hover{background:var(--bg-hover);color:var(--text-primary)}.site-item{border-radius:var(--r-sm);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;height:36px;padding:0 8px;font-size:13px;transition:background .1s;display:flex}.site-item:hover{background:var(--bg-hover)}.site-item.active{background:var(--brand-light);color:var(--brand);font-weight:500}.site-item .site-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.site-item .site-count{color:var(--text-tertiary);flex-shrink:0;font-size:10px}.note-list-item{border-radius:var(--r-sm);cursor:pointer;align-items:center;gap:8px;height:34px;padding:0 8px;font-size:12px;transition:background .1s;display:flex}.note-list-item:hover{background:var(--bg-hover)}.note-list-item.active{background:var(--brand-light)}.note-list-item .note-title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.note-list-item .note-date{color:var(--text-tertiary);font-size:10px}.folder-children{margin-left:16px}.folder-arrow{color:var(--text-tertiary);flex-shrink:0;width:12px;font-size:10px}.card{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-lg);margin-bottom:12px;padding:16px;transition:box-shadow .15s}.card:hover{box-shadow:var(--shadow-sm)}.card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.card-title{font-size:14px;font-weight:600}.card-body{grid-template-columns:auto 1fr auto;align-items:center;gap:8px 12px;font-size:13px;display:grid}.card-body .label{color:var(--text-tertiary);white-space:nowrap;font-size:12px}.card-btn{border:1px solid var(--border-light);border-radius:var(--r-sm);background:var(--bg-surface);cursor:pointer;height:30px;color:var(--text-secondary);padding:0 10px;font-family:inherit;font-size:12px;transition:all .15s}.card-btn:hover{background:var(--bg-hover);border-color:var(--border-medium)}.card-btn.edit-btn:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-light)}.card-btn.danger-btn:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-light)}.modal-overlay{z-index:100;background:#00000059;justify-content:center;align-items:center;animation:.15s fi;display:flex;position:fixed;inset:0}@keyframes fi{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);flex-direction:column;width:480px;max-width:90vw;max-height:85vh;animation:.15s si;display:flex}@keyframes si{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modal-header{border-bottom:1px solid var(--border-light);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title{font-size:15px;font-weight:600}.modal-close{border-radius:var(--r-sm);cursor:pointer;width:28px;height:28px;color:var(--text-tertiary);background:0 0;border:none;justify-content:center;align-items:center;font-size:18px;transition:all .15s;display:flex}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-body{flex:1;padding:20px;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-light);flex-shrink:0;justify-content:flex-end;gap:8px;padding:12px 20px;display:flex}.form-group{margin-bottom:16px}.form-group:last-child{margin-bottom:0}.form-label{color:var(--text-secondary);margin-bottom:4px;font-size:12px;font-weight:600;display:block}.form-row{align-items:center;gap:8px;display:flex}.editor-wrap{flex:1;min-height:0;display:flex}.editor-pane{flex:1;justify-content:center;min-width:0;padding:20px;display:flex;overflow-y:auto}.editor-pane+.editor-pane{border-left:1px solid var(--border-light)}.editor-inner{width:100%;max-width:960px}.content-header{border-bottom:1px solid var(--border-light);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex}.content-title{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:16px;font-weight:600}.content-title::placeholder{color:var(--text-placeholder)}.toggle-group{background:var(--bg-hover);border-radius:var(--r-sm);padding:2px;display:flex}.toggle-group button{cursor:pointer;height:28px;color:var(--text-secondary);background:0 0;border:none;border-radius:4px;padding:0 12px;font-family:inherit;font-size:12px;transition:all .15s}.toggle-group button.active{background:var(--bg-surface);box-shadow:var(--shadow-sm);color:var(--text-primary);font-weight:500}.save-badge{color:var(--text-tertiary);background:var(--bg-hover);white-space:nowrap;border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:10px}.tb-bar{background:var(--bg-sidebar);border:1px solid var(--border-light);border-radius:var(--r-md);flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:16px;padding:4px 6px;display:flex}.tb-divider{background:var(--border-medium);width:1px;height:16px;margin:0 4px}.tb-btn{cursor:pointer;height:28px;color:var(--text-secondary);white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:0 8px;font-family:inherit;font-size:12px;transition:all .1s}.tb-btn:hover{background:var(--bg-hover)}.tb-btn.active{background:var(--brand-light);color:var(--brand)}.tb-color{border:1px solid var(--border-medium);cursor:pointer;border-radius:4px;width:24px;height:24px;margin:0 2px;padding:0}.ProseMirror{outline:none;min-height:300px;font-size:14px;line-height:1.8}.ProseMirror h1{border-bottom:1px solid var(--border-light);margin:16px 0 8px;padding-bottom:6px;font-size:22px;font-weight:700}.ProseMirror h2{margin:14px 0 6px;font-size:18px;font-weight:600}.ProseMirror h3{margin:12px 0 4px;font-size:15px;font-weight:600}.ProseMirror p{margin:4px 0}.ProseMirror ul,.ProseMirror ol{margin:4px 0;padding-left:20px}.ProseMirror li{margin:2px 0}.ProseMirror blockquote{border-left:3px solid var(--brand);color:var(--text-secondary);margin:8px 0;padding-left:12px}.ProseMirror pre{border-radius:var(--r-sm);background:#f7f8fa;padding:12px 16px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:13px;line-height:1.6;overflow-x:auto}.ProseMirror code{background:#f2f3f5;border-radius:3px;padding:2px 6px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:12px}.ProseMirror table{border-collapse:collapse;width:100%;margin:8px 0}.ProseMirror th,.ProseMirror td{border:1px solid var(--border-light);text-align:left;padding:8px 12px}.ProseMirror th{background:#f7f8fa;font-size:13px;font-weight:600}.ProseMirror img{border-radius:var(--r-sm);max-width:100%}.ProseMirror mark{background:#fff3cd;border-radius:2px;padding:2px 4px}.import-textarea{border:2px solid var(--brand);border-radius:var(--r-md);resize:vertical;background:var(--brand-light);outline:none;width:100%;height:90px;padding:10px 12px;font-family:inherit;font-size:13px}.import-hint{color:var(--text-tertiary);margin:4px 0 12px;font-size:11px}.result-box{border-radius:var(--r-md);background:#f0faf0;border:1px solid #a3e4a7;margin-bottom:16px;padding:14px 16px}.result-grid{grid-template-columns:70px 1fr;gap:6px 12px;font-size:13px;display:grid}.alert{border-radius:var(--r-sm);padding:8px 12px;font-size:12px}.alert-warning{color:#8a5d00;background:#fff7e6}.stat-row{gap:6px;display:flex}.stat{text-align:center;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-sm);flex:1;padding:8px 4px;font-size:11px}.stat-num{font-size:18px;font-weight:700}.stat-label{color:var(--text-tertiary);font-size:10px}.tag-badge{background:var(--bg-hover);cursor:pointer;color:var(--text-secondary);border-radius:10px;padding:2px 10px;font-size:11px;transition:all .15s;display:inline-block}.tag-badge:hover{background:#dee0e3}.tag-badge.active{background:var(--brand);color:#fff}.toast{color:#fff;border-radius:var(--r-sm);z-index:9999;background:#1f2329;padding:8px 16px;font-size:13px;animation:.2s fi;position:fixed;top:20px;right:20px}.folder-menu{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:10;min-width:120px;padding:4px;position:absolute;top:100%;right:0}.folder-menu-item{cursor:pointer;color:var(--text-primary);border-radius:var(--r-sm);padding:6px 12px;font-size:12px;transition:background .1s}.folder-menu-item:hover{background:var(--bg-hover)}.folder-menu-item.danger{color:var(--danger)}.folder-menu-item.danger:hover{background:var(--danger-light)}.lightbox{z-index:200;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lightbox img{object-fit:contain;cursor:default;border-radius:4px;max-width:90vw;max-height:90vh}.lightbox-close{color:#fff;cursor:pointer;z-index:201;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:22px;transition:background .15s;display:flex;position:fixed;top:16px;right:16px}.lightbox-close:hover{background:#ffffff4d}.sel-toolbar{z-index:150;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-md);box-shadow:var(--shadow-md);gap:4px;padding:6px;display:flex;position:fixed}.comments-panel{border-left:1px solid var(--border-light);background:var(--bg-sidebar);flex-direction:column;width:260px;min-width:260px;font-size:13px;display:flex}.hidden{display:none!important}@media (width<=768px){.app-nav{z-index:50;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.app-nav.open{transform:translate(0)}.app-nav.collapsed{width:200px;min-width:200px}.app-main{width:100%}.hamburger{display:flex!important}.layout{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--border-light);flex-shrink:0;width:100%;min-width:100%;max-height:40vh}.content{width:100%}.content-header{flex-wrap:wrap;gap:8px;padding:10px 12px}.content-title{font-size:15px}.doc-table,.doc-table thead,.doc-table tbody,.doc-table th,.doc-table td,.doc-table tr{display:block}.doc-table thead{display:none}.doc-table tr{border-bottom:1px solid var(--border-light);padding:10px 12px}.doc-table td{border:none;padding:4px 0}.doc-table td:before{content:attr(data-label);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;font-size:10px;font-weight:600;display:block}.doc-title-cell{white-space:normal;max-width:none}.editor-wrap{flex-direction:column}.editor-pane{padding:12px}.editor-pane+.editor-pane{border-left:none;border-top:1px solid var(--border-light)}.editor-inner{max-width:100%}.tb-bar{flex-wrap:nowrap;gap:1px;padding:4px;overflow-x:auto}.modal{border-radius:0;max-width:100vw;height:100vh;max-height:100vh;width:100vw!important}.modal-overlay{align-items:flex-end}.card-body{grid-template-columns:1fr;gap:4px}.card-body .label{margin-top:6px}.content-header{white-space:nowrap;flex-wrap:nowrap;overflow-x:auto}.topbar{height:40px;padding:0 10px}.topbar-brand{font-size:13px}.lightbox-close{width:36px;height:36px;font-size:18px;top:10px;right:10px}.lightbox img{max-width:95vw;max-height:85vh}.comments-panel{border-left:none;border-top:1px solid var(--border-light);width:100%;min-width:100%;max-height:40vh}}.hamburger{z-index:60;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--r-sm);cursor:pointer;width:36px;height:36px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;font-size:18px;display:none;position:fixed;top:8px;left:8px}@media (width<=768px){.app-nav.open+.nav-overlay{display:block}}.nav-overlay{z-index:49;background:#0000004d;display:none;position:fixed;inset:0}.flex-1{flex:1}.text-muted{color:var(--text-tertiary);font-size:12px}.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:16px}
diff --git a/frontend/static/dist/assets/index-BpxV2n8n.js b/frontend/static/dist/assets/index-BpxV2n8n.js
new file mode 100644
index 0000000..b40cbb3
--- /dev/null
+++ b/frontend/static/dist/assets/index-BpxV2n8n.js
@@ -0,0 +1,166 @@
+var e=Object.defineProperty,t=(e,t)=>()=>(e&&(t=e(e=0)),t),n=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),r=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r};(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();function i(e){let t=Object.create(null);for(let n of e.split(`,`))t[n]=1;return e=>e in t}function a(e){if(S(e)){let t={};for(let n=0;n
+
+
+
+ 选择左侧网站查看账号
+
+
+
+
+
+
+
+
+
+ 🔐
+ 选择左侧网站查看账号密码
+
+
+ 暂无账号
+
+
+
+
+
+ 👤 {{ a.remark || '账号' }}
+
+
+
+
+
+
+
+
+ 账号
+ {{ a.username }}
+
+ 密码
+ {{ showPw[a.id] ? a.password : '••••••••' }}
+
+
+
+
+
+ 说明
+ {{ a.remark || '-' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 首行=网址+空格+网站名 | 第2行=账号 | 第3行=密码 | 第4行=备注
+
+
+ 识别结果
+
+ 网址{{ importResult.url }}
+ 网站名{{ importResult.site_name }}
+ 账号{{ importResult.username }}
+ 密码{{ importResult.password }}
+ 备注{{ importResult.remark || '(无)' }}
+
+
+
+
+
+
+
+
+ 或
+
+
+
+ ⚠️ {{ importResult.matched_site.name }} 已存在（{{ importResult.matched_site.account_count }}个账号），将追加进去
+
+
+
+