feat: initialize VitePress CMS

2026-06-05 23:21:41 +08:00
commit 928f742d5e
45 changed files with 8214 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,32 @@
+# Dependencies
+node_modules/
+test-vitepress/node_modules/
+
+# Build output
+dist/
+test-vitepress/.vitepress/dist/
+test-vitepress/.vitepress/.temp/
+test-vitepress/.vitepress/cache/
+
+# Local data
+data/
+*.sqlite
+*.sqlite-shm
+*.sqlite-wal
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+
+# OS / editor
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
--- a/README.md
+++ b/README.md
@@ -0,0 +1,112 @@
+# VitePress-CMS
+
+VitePress-CMS 是一个面向 VitePress 的可视化内容管理后台。它的目标是让用户通过网页界面管理 Markdown 页面、站点结构、主题配置与 GitHub 发布流程。
+
+## 当前版本
+
+当前项目已经从静态原型升级为 Vue 3 + TypeScript + Vite 工程。
+
+已完成的原型能力：
+
+- 页面目录、搜索与新建页面
+- Markdown 编辑与预览切换
+- Frontmatter 标题和描述编辑
+- 导航栏与侧边栏管理界面
+- 站点基础配置界面
+- 发布中心与部署状态模拟
+
+## 本地运行
+
+```bash
+npm install
+npm run dev
+```
+
+Windows PowerShell 如果拦截 `npm.ps1`，可以使用：
+
+```bash
+npm.cmd install
+npm.cmd run dev
+```
+
+## 初始账户
+
+项目启动时会自动创建 SQLite 数据库：
+
+```text
+data/vitepress-cms.sqlite
+```
+
+如果数据库里还没有系统管理员，会自动创建初始账户：
+
+```text
+邮箱：admin@example.com
+密码：admin123456
+角色：system_admin
+```
+
+可以通过环境变量修改初始账户：
+
+```bash
+CMS_ADMIN_EMAIL=admin@your-domain.com
+CMS_ADMIN_PASSWORD=change-me
+```
+
+## 构建验证
+
+```bash
+npm run build
+```
+
+## 测试站点
+
+VitePress 测试站点放在项目内的独立子目录：
+
+```text
+test-vitepress/
+```
+
+它有自己的 `package.json` 和依赖，不会让 VitePress 成为 CMS 主项目的一部分。这样既方便开发测试，也能保持主项目依赖干净。
+
+运行测试站点：
+
+```bash
+cd test-vitepress
+npm install
+npm run dev
+```
+
+## GitHub 连接
+
+当前版本支持两种 GitHub 连接方式：
+
+1. GitHub OAuth 登录后选择仓库。
+2. 手动输入 token、owner、repo、branch 和站点目录。
+
+使用 OAuth 登录前，需要创建 GitHub OAuth App，并配置环境变量：
+
+```bash
+GITHUB_CLIENT_ID=xxx
+GITHUB_CLIENT_SECRET=xxx
+```
+
+开发环境 callback URL：
+
+```text
+http://localhost:5173/api/github/callback
+```
+
+Token 或 OAuth 授权至少需要仓库内容读写权限。保存页面或配置时，CMS 会通过 GitHub Contents API 创建 commit。
+
+站点目录示例：
+
+- VitePress 在仓库根目录：留空
+- VitePress 在 `docs/`：填写 `docs`
+
+## 下一步
+
+1. 建立 GitHub OAuth 登录流程。
+2. 读取仓库中的 `docs/` 页面文件。
+3. 解析 `.vitepress/config.ts` 中的常用配置。
+4. 将页面和配置修改提交为 GitHub commit。
+5. 显示 GitHub Pages 或 Actions 部署状态。
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VitePress-CMS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vitepress-cms",
+  "version": "0.1.0",
+  "private": true,
+  "description": "A visual CMS prototype for managing VitePress sites.",
+  "type": "module",
+  "scripts": {
+    "dev": "node server/index.mjs",
+    "dev:vite": "vite --host 0.0.0.0",
+    "build": "vue-tsc --noEmit && vite build",
+    "start": "node server/index.mjs",
+    "preview": "vite preview --host 0.0.0.0"
+  },
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vue-tsc": "^2.1.0"
+  }
+}
--- a/server.mjs
+++ b/server.mjs
@@ -0,0 +1,45 @@
+import { createReadStream, existsSync } from "node:fs";
+import { extname, join, normalize } from "node:path";
+import { createServer } from "node:http";
+
+const port = Number(process.env.PORT || 5173);
+const root = process.cwd();
+
+const mimeTypes = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+};
+
+function resolveRequest(url) {
+  const pathname = decodeURIComponent(new URL(url, `http://localhost:${port}`).pathname);
+  const requestedPath = normalize(join(root, pathname === "/" ? "index.html" : pathname));
+
+  if (!requestedPath.startsWith(root)) {
+    return null;
+  }
+
+  return requestedPath;
+}
+
+createServer((request, response) => {
+  const filePath = resolveRequest(request.url || "/");
+
+  if (!filePath || !existsSync(filePath)) {
+    response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+    response.end("Not found");
+    return;
+  }
+
+  response.writeHead(200, {
+    "Content-Type": mimeTypes[extname(filePath)] || "application/octet-stream",
+  });
+  createReadStream(filePath).pipe(response);
+}).listen(port, () => {
+  console.log(`VitePress-CMS prototype running at http://localhost:${port}`);
+});
--- a/server/auth.mjs
+++ b/server/auth.mjs
@@ -0,0 +1,96 @@
+import { db } from "./db.mjs";
+import { json, readBody } from "./http.mjs";
+import { clearSessionCookie, createSession, deleteSession, getSession, parseCookies, sessionCookie } from "./session.mjs";
+import { verifyPassword } from "./security.mjs";
+
+function publicUser(user) {
+  if (!user) return null;
+
+  return {
+    id: user.id,
+    email: user.email,
+    name: user.name,
+    avatarUrl: user.avatar_url,
+    role: user.role,
+  };
+}
+
+export function getRequestSession(request) {
+  const cookies = parseCookies(request.headers.cookie);
+  const sessionId = cookies.vpc_session;
+  const session = getSession(sessionId);
+  return { sessionId, session };
+}
+
+export function requireCmsUser(request, response) {
+  const { session } = getRequestSession(request);
+
+  if (!session?.user?.id) {
+    json(response, 401, { error: "Not signed in" });
+    return undefined;
+  }
+
+  return session.user;
+}
+
+async function handleMe(request, response) {
+  const { session } = getRequestSession(request);
+  json(response, 200, { user: session?.user ?? null });
+}
+
+async function handleLogin(request, response) {
+  const body = JSON.parse(await readBody(request) || "{}");
+  const email = String(body.email || "").trim().toLowerCase();
+  const password = String(body.password || "");
+
+  if (!email || !password) {
+    json(response, 400, { error: "Email and password are required" });
+    return;
+  }
+
+  const user = db.prepare("SELECT * FROM users WHERE email = ?").get(email);
+
+  if (!user?.password_hash || !verifyPassword(password, user.password_hash)) {
+    json(response, 401, { error: "Invalid email or password" });
+    return;
+  }
+
+  const sessionUser = publicUser(user);
+  const sessionId = createSession({
+    user: sessionUser,
+  });
+
+  json(response, 200, { user: sessionUser }, { "Set-Cookie": sessionCookie(sessionId) });
+}
+
+async function handleLogout(request, response) {
+  const { sessionId } = getRequestSession(request);
+  deleteSession(sessionId);
+  json(response, 200, { ok: true }, { "Set-Cookie": clearSessionCookie() });
+}
+
+export async function handleAuthApi(request, response, url) {
+  try {
+    if (url.pathname === "/api/auth/me" && request.method === "GET") {
+      await handleMe(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/auth/login" && request.method === "POST") {
+      await handleLogin(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/auth/logout" && request.method === "POST") {
+      await handleLogout(request, response);
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    json(response, 500, {
+      error: error instanceof Error ? error.message : "Unknown auth API error",
+    });
+    return true;
+  }
+}
--- a/server/bootstrap.mjs
+++ b/server/bootstrap.mjs
@@ -0,0 +1,47 @@
+import { db, getSetting, migrate, setSetting } from "./db.mjs";
+import { hashPassword } from "./security.mjs";
+
+const defaultAdminEmail = process.env.CMS_ADMIN_EMAIL || "admin@example.com";
+const defaultAdminPassword = process.env.CMS_ADMIN_PASSWORD || "admin123456";
+
+function seedAdmin() {
+  const admin = db.prepare("SELECT id FROM users WHERE role = 'system_admin' LIMIT 1").get();
+
+  if (admin) return;
+
+  db.prepare(`
+    INSERT INTO users (email, password_hash, name, role, email_verified)
+    VALUES (?, ?, ?, 'system_admin', 1)
+  `).run(defaultAdminEmail, hashPassword(defaultAdminPassword), "Administrator");
+}
+
+function seedSettings() {
+  const seeds = {
+    "site.title": "VitePress-CMS",
+    "auth.allow_email_login": "true",
+    "auth.allow_github_login": "true",
+    "auth.allow_registration": "false",
+    "smtp.host": "",
+    "smtp.port": "587",
+    "smtp.username": "",
+    "smtp.password": "",
+    "smtp.sender_email": "",
+    "github.api_base_url": "https://api.github.com",
+    "github.web_base_url": "https://github.com",
+    "github.oauth_client_id": "",
+    "github.oauth_client_secret": "",
+  };
+
+  Object.entries(seeds).forEach(([key, value]) => {
+    if (getSetting(key, undefined) === undefined) {
+      setSetting(key, value, key.includes("secret") || key.includes("password"));
+    }
+  });
+}
+
+export function bootstrap() {
+  migrate();
+  seedAdmin();
+  seedSettings();
+  console.log(`Initial admin: ${defaultAdminEmail}`);
+}
--- a/server/db.mjs
+++ b/server/db.mjs
@@ -0,0 +1,86 @@
+import { mkdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { DatabaseSync } from "node:sqlite";
+
+const dbPath = join(process.cwd(), "data", "vitepress-cms.sqlite");
+mkdirSync(dirname(dbPath), { recursive: true });
+
+export const db = new DatabaseSync(dbPath);
+db.exec("PRAGMA foreign_keys = ON");
+
+export function migrate() {
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      email TEXT UNIQUE,
+      password_hash TEXT,
+      name TEXT NOT NULL,
+      avatar_url TEXT,
+      role TEXT NOT NULL DEFAULT 'user',
+      email_verified INTEGER NOT NULL DEFAULT 0,
+      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+    );
+
+    CREATE TABLE IF NOT EXISTS oauth_accounts (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL,
+      provider TEXT NOT NULL,
+      provider_user_id TEXT NOT NULL,
+      provider_login TEXT NOT NULL,
+      access_token TEXT,
+      avatar_url TEXT,
+      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(provider, provider_user_id),
+      FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
+    );
+
+    CREATE TABLE IF NOT EXISTS projects (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      owner_user_id INTEGER NOT NULL,
+      name TEXT NOT NULL,
+      github_owner TEXT,
+      github_repo TEXT,
+      github_branch TEXT NOT NULL DEFAULT 'main',
+      site_root TEXT NOT NULL DEFAULT '',
+      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      FOREIGN KEY(owner_user_id) REFERENCES users(id) ON DELETE CASCADE
+    );
+
+    CREATE TABLE IF NOT EXISTS project_members (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      project_id INTEGER NOT NULL,
+      user_id INTEGER NOT NULL,
+      role TEXT NOT NULL DEFAULT 'editor',
+      created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(project_id, user_id),
+      FOREIGN KEY(project_id) REFERENCES projects(id) ON DELETE CASCADE,
+      FOREIGN KEY(user_id) REFERENCES users(id) ON DELETE CASCADE
+    );
+
+    CREATE TABLE IF NOT EXISTS system_settings (
+      key TEXT PRIMARY KEY,
+      value TEXT NOT NULL,
+      encrypted INTEGER NOT NULL DEFAULT 0,
+      updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+    );
+  `);
+}
+
+export function getSetting(key, fallback = "") {
+  const row = db.prepare("SELECT value FROM system_settings WHERE key = ?").get(key);
+  return row?.value ?? fallback;
+}
+
+export function setSetting(key, value, encrypted = false) {
+  db.prepare(`
+    INSERT INTO system_settings (key, value, encrypted, updated_at)
+    VALUES (?, ?, ?, CURRENT_TIMESTAMP)
+    ON CONFLICT(key) DO UPDATE SET
+      value = excluded.value,
+      encrypted = excluded.encrypted,
+      updated_at = CURRENT_TIMESTAMP
+  `).run(key, value, encrypted ? 1 : 0);
+}
--- a/server/github.mjs
+++ b/server/github.mjs
@@ -0,0 +1,577 @@
+import { randomBytes } from "node:crypto";
+import { db } from "./db.mjs";
+import { json, readBody, redirect } from "./http.mjs";
+import { getRequestSession } from "./auth.mjs";
+import { createSession, sessionCookie, updateSession } from "./session.mjs";
+
+const oauthStates = new Map();
+
+function getBaseUrl(request) {
+  const configuredBaseUrl = process.env.GITHUB_OAUTH_REDIRECT_BASE_URL;
+  if (configuredBaseUrl) return configuredBaseUrl.replace(/\/$/, "");
+
+  const host = request.headers.host ?? "localhost:5173";
+  const protocol = host.startsWith("localhost") || host.startsWith("127.0.0.1") ? "http" : "https";
+  return `${protocol}://${host}`;
+}
+
+function getOAuthConfig(request) {
+  const clientId = process.env.GITHUB_CLIENT_ID;
+  const clientSecret = process.env.GITHUB_CLIENT_SECRET;
+  const baseUrl = getBaseUrl(request);
+
+  if (!clientId || !clientSecret) {
+    throw new Error("请先配置 GITHUB_CLIENT_ID 和 GITHUB_CLIENT_SECRET");
+  }
+
+  return {
+    clientId,
+    clientSecret,
+    redirectUri: `${baseUrl}/api/github/callback`,
+  };
+}
+
+async function githubFetch(session, path, init = {}) {
+  const response = await fetch(`https://api.github.com${path}`, {
+    ...init,
+    headers: {
+      Accept: "application/vnd.github+json",
+      Authorization: `Bearer ${session.accessToken}`,
+      "X-GitHub-Api-Version": "2022-11-28",
+      ...init.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const details = await response.text();
+    throw new Error(`GitHub API error ${response.status}: ${details}`);
+  }
+
+  return response.json();
+}
+
+function requireSession(request, response) {
+  const { session } = getRequestSession(request);
+
+  if (!session?.github?.accessToken) {
+    json(response, 401, { error: "Not signed in" });
+    return undefined;
+  }
+
+  return {
+    ...session,
+    accessToken: session.github.accessToken,
+  };
+}
+
+function publicCmsUser(user) {
+  return {
+    id: user.id,
+    email: user.email,
+    name: user.name,
+    avatarUrl: user.avatar_url,
+    role: user.role,
+  };
+}
+
+function findOrCreateGithubUser(githubUser, accessToken, currentSession) {
+  const providerUserId = String(githubUser.id);
+  const linkedAccount = db
+    .prepare("SELECT user_id FROM oauth_accounts WHERE provider = 'github' AND provider_user_id = ?")
+    .get(providerUserId);
+
+  let user;
+
+  if (linkedAccount) {
+    user = db.prepare("SELECT * FROM users WHERE id = ?").get(linkedAccount.user_id);
+  } else if (currentSession?.user?.id) {
+    user = db.prepare("SELECT * FROM users WHERE id = ?").get(currentSession.user.id);
+  } else {
+    const email = githubUser.email ? String(githubUser.email).toLowerCase() : null;
+    const existingByEmail = email ? db.prepare("SELECT * FROM users WHERE email = ?").get(email) : null;
+
+    if (existingByEmail) {
+      user = existingByEmail;
+    } else {
+      const result = db
+        .prepare("INSERT INTO users (email, name, avatar_url, role, email_verified) VALUES (?, ?, ?, 'user', ?)")
+        .run(email, githubUser.name || githubUser.login, githubUser.avatar_url, email ? 1 : 0);
+      user = db.prepare("SELECT * FROM users WHERE id = ?").get(result.lastInsertRowid);
+    }
+  }
+
+  db.prepare(`
+    INSERT INTO oauth_accounts (user_id, provider, provider_user_id, provider_login, access_token, avatar_url, updated_at)
+    VALUES (?, 'github', ?, ?, ?, ?, CURRENT_TIMESTAMP)
+    ON CONFLICT(provider, provider_user_id) DO UPDATE SET
+      user_id = excluded.user_id,
+      provider_login = excluded.provider_login,
+      access_token = excluded.access_token,
+      avatar_url = excluded.avatar_url,
+      updated_at = CURRENT_TIMESTAMP
+  `).run(user.id, providerUserId, githubUser.login, accessToken, githubUser.avatar_url);
+
+  db.prepare("UPDATE users SET avatar_url = COALESCE(avatar_url, ?), updated_at = CURRENT_TIMESTAMP WHERE id = ?").run(
+    githubUser.avatar_url,
+    user.id,
+  );
+
+  return db.prepare("SELECT * FROM users WHERE id = ?").get(user.id);
+}
+
+async function handleLogin(request, response) {
+  const { clientId, redirectUri } = getOAuthConfig(request);
+  const state = randomBytes(16).toString("hex");
+  oauthStates.set(state, Date.now());
+
+  const params = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    scope: "repo",
+    state,
+  });
+
+  redirect(response, `https://github.com/login/oauth/authorize?${params.toString()}`);
+}
+
+async function handleCallback(request, response, url) {
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+
+  if (!code || !state || !oauthStates.has(state)) {
+    redirect(response, "/?github=oauth_error");
+    return;
+  }
+
+  oauthStates.delete(state);
+  const { clientId, clientSecret, redirectUri } = getOAuthConfig(request);
+  const tokenResponse = await fetch("https://github.com/login/oauth/access_token", {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      client_id: clientId,
+      client_secret: clientSecret,
+      code,
+      redirect_uri: redirectUri,
+    }),
+  });
+  const tokenPayload = await tokenResponse.json();
+
+  if (!tokenPayload.access_token) {
+    redirect(response, "/?github=token_error");
+    return;
+  }
+
+  const userResponse = await fetch("https://api.github.com/user", {
+    headers: {
+      Accept: "application/vnd.github+json",
+      Authorization: `Bearer ${tokenPayload.access_token}`,
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  });
+  const user = await userResponse.json();
+  const { session: currentSession } = getRequestSession(request);
+  const cmsUser = findOrCreateGithubUser(user, tokenPayload.access_token, currentSession);
+  const sessionId = createSession({
+    user: publicCmsUser(cmsUser),
+    github: {
+      accessToken: tokenPayload.access_token,
+      login: user.login,
+      avatarUrl: user.avatar_url,
+      name: user.name,
+    },
+  });
+
+  redirect(response, "/?github=connected", {
+    "Set-Cookie": sessionCookie(sessionId),
+  });
+}
+
+async function handleMe(request, response) {
+  const { session } = getRequestSession(request);
+
+  if (!session) {
+    json(response, 200, { user: null });
+    return;
+  }
+
+  json(response, 200, { user: session.github ?? null });
+}
+
+async function handleLogout(request, response) {
+  const { sessionId, session } = getRequestSession(request);
+  if (session) {
+    const { github, ...restSession } = session;
+    updateSession(sessionId, restSession);
+  }
+  json(response, 200, { ok: true });
+}
+
+async function handleRepos(request, response) {
+  const session = requireSession(request, response);
+  if (!session) return;
+
+  const repos = await githubFetch(
+    session,
+    "/user/repos?per_page=100&sort=updated&affiliation=owner,collaborator,organization_member",
+  );
+  json(response, 200, {
+    repos: repos.map((repo) => ({
+      id: repo.id,
+      fullName: repo.full_name,
+      owner: repo.owner.login,
+      name: repo.name,
+      private: repo.private,
+      defaultBranch: repo.default_branch,
+      updatedAt: repo.updated_at,
+    })),
+  });
+}
+
+async function handleCreateRepo(request, response) {
+  const session = requireSession(request, response);
+  if (!session) return;
+
+  const body = JSON.parse(await readBody(request) || "{}");
+
+  if (!body.name) {
+    json(response, 400, { error: "Repository name is required" });
+    return;
+  }
+
+  const repo = await githubFetch(session, "/user/repos", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      name: body.name,
+      private: Boolean(body.private),
+      auto_init: true,
+      description: body.description || "Created by VitePress-CMS",
+    }),
+  });
+
+  json(response, 201, {
+    repo: {
+      id: repo.id,
+      fullName: repo.full_name,
+      owner: repo.owner.login,
+      name: repo.name,
+      private: repo.private,
+      defaultBranch: repo.default_branch,
+      updatedAt: repo.updated_at,
+    },
+  });
+}
+
+function normalizeSiteRoot(siteRoot = "") {
+  return siteRoot.trim().replace(/^\/+|\/+$/g, "");
+}
+
+function toRepoPath(siteRoot, path) {
+  const normalizedRoot = normalizeSiteRoot(siteRoot);
+  return normalizedRoot ? `${normalizedRoot}/${path}` : path;
+}
+
+function fromRepoPath(siteRoot, path) {
+  const normalizedRoot = normalizeSiteRoot(siteRoot);
+  return normalizedRoot && path.startsWith(`${normalizedRoot}/`) ? path.slice(normalizedRoot.length + 1) : path;
+}
+
+function decodeBase64Content(content) {
+  return Buffer.from(content.replace(/\n/g, ""), "base64").toString("utf-8");
+}
+
+function encodeBase64Content(content) {
+  return Buffer.from(content, "utf-8").toString("base64");
+}
+
+function parseFrontmatter(source) {
+  const match = source.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+
+  if (!match) {
+    return {
+      title: "",
+      description: "",
+      content: source,
+    };
+  }
+
+  const frontmatter = match[1];
+  const title = frontmatter.match(/^title:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+  const description =
+    frontmatter.match(/^description:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+
+  return {
+    title,
+    description,
+    content: source.slice(match[0].length),
+  };
+}
+
+function stringifyMarkdownPage(page) {
+  return [
+    "---",
+    `title: ${page.title || "未命名页面"}`,
+    `description: ${page.description || ""}`,
+    "---",
+    "",
+    page.content.trimStart(),
+  ].join("\n");
+}
+
+function readStringValue(source, key, fallback = "") {
+  const pattern = new RegExp(`${key}:\\s*["'\`]([^"'\`]+)["'\`]`);
+  return source.match(pattern)?.[1] ?? fallback;
+}
+
+function readBooleanValue(source, key, fallback = false) {
+  const pattern = new RegExp(`${key}:\\s*(true|false)`);
+  const value = source.match(pattern)?.[1];
+  return value ? value === "true" : fallback;
+}
+
+function parseSiteSettings(source) {
+  const socialLinksSource = source.match(/socialLinks:\s*\[([\s\S]*?)\]/)?.[1] ?? "";
+
+  return {
+    title: readStringValue(source, "title", "VitePress Site"),
+    description: readStringValue(source, "description"),
+    logo: readStringValue(source, "logo", "/logo.svg"),
+    lastUpdated: readBooleanValue(source, "lastUpdated", true),
+    localSearch: /search:\s*{[\s\S]*?provider:\s*["']local["'][\s\S]*?}/.test(source),
+    outline: readBooleanValue(source, "outline", true),
+    socialKind: readStringValue(socialLinksSource, "icon", "github"),
+    socialLink: readStringValue(socialLinksSource, "link", "https://github.com/example/vitepress-cms"),
+  };
+}
+
+function stringifySiteConfig(settings) {
+  const searchConfig = settings.localSearch
+    ? `    search: {
+      provider: "local",
+    },`
+    : "";
+
+  return `import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  title: ${JSON.stringify(settings.title)},
+  description: ${JSON.stringify(settings.description)},
+  lastUpdated: ${settings.lastUpdated},
+  themeConfig: {
+    logo: ${JSON.stringify(settings.logo)},
+    outline: ${settings.outline},
+    nav: [
+      { text: "首页", link: "/" },
+      { text: "指南", link: "/guide/getting-started" },
+      { text: "配置", link: "/guide/config" },
+      { text: "更新日志", link: "/changelog" },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          text: "指南",
+          items: [
+            { text: "快速开始", link: "/guide/getting-started" },
+            { text: "页面管理", link: "/guide/pages" },
+            { text: "配置说明", link: "/guide/config" },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: ${JSON.stringify(settings.socialKind)}, link: ${JSON.stringify(settings.socialLink)} },
+    ],
+    footer: {
+      message: "Powered by VitePress-CMS",
+      copyright: "Copyright 2026",
+    },
+${searchConfig}
+  },
+});
+`;
+}
+
+function getSiteQuery(url) {
+  const owner = url.searchParams.get("owner");
+  const repo = url.searchParams.get("repo");
+  const branch = url.searchParams.get("branch") || "main";
+  const siteRoot = url.searchParams.get("siteRoot") || "";
+
+  if (!owner || !repo) {
+    throw new Error("owner and repo are required");
+  }
+
+  return { owner, repo, branch, siteRoot };
+}
+
+async function getRepoContent(session, site, path) {
+  const repoPath = toRepoPath(site.siteRoot, path);
+  const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+  return githubFetch(
+    session,
+    `/repos/${site.owner}/${site.repo}/contents/${encodedPath}?ref=${encodeURIComponent(site.branch)}`,
+  );
+}
+
+async function handleSitePages(request, response, url) {
+  const session = requireSession(request, response);
+  if (!session) return;
+
+  if (request.method === "GET") {
+    const site = getSiteQuery(url);
+    const tree = await githubFetch(
+      session,
+      `/repos/${site.owner}/${site.repo}/git/trees/${encodeURIComponent(site.branch)}?recursive=1`,
+    );
+    const siteRoot = normalizeSiteRoot(site.siteRoot);
+    const prefix = siteRoot ? `${siteRoot}/` : "";
+    const markdownFiles = tree.tree
+      .filter((entry) => entry.type === "blob")
+      .filter((entry) => entry.path.endsWith(".md"))
+      .filter((entry) => !entry.path.includes("/node_modules/"))
+      .filter((entry) => entry.path !== `${prefix}README.md`)
+      .filter((entry) => !prefix || entry.path.startsWith(prefix));
+    const pages = await Promise.all(
+      markdownFiles.sort((a, b) => a.path.localeCompare(b.path)).map(async (entry) => {
+        const file = await getRepoContent(session, site, fromRepoPath(site.siteRoot, entry.path));
+        const source = decodeBase64Content(file.content);
+        const parsed = parseFrontmatter(source);
+        const path = fromRepoPath(site.siteRoot, entry.path);
+
+        return {
+          id: path,
+          path,
+          sha: file.sha,
+          title: parsed.title || path.replace(/\.md$/, ""),
+          description: parsed.description,
+          content: parsed.content,
+        };
+      }),
+    );
+
+    json(response, 200, { pages });
+    return;
+  }
+
+  if (request.method === "PUT") {
+    const body = JSON.parse(await readBody(request) || "{}");
+    const site = body.site;
+    const page = body.page;
+    const repoPath = toRepoPath(site.siteRoot, page.path);
+    const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+    const result = await githubFetch(session, `/repos/${site.owner}/${site.repo}/contents/${encodedPath}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: `docs: update ${page.path} from VitePress-CMS`,
+        content: encodeBase64Content(stringifyMarkdownPage(page)),
+        branch: site.branch,
+        sha: page.sha,
+      }),
+    });
+
+    json(response, 200, { sha: result.content.sha });
+    return;
+  }
+
+  json(response, 405, { error: "Method not allowed" });
+}
+
+async function handleSiteSettings(request, response, url) {
+  const session = requireSession(request, response);
+  if (!session) return;
+
+  if (request.method === "GET") {
+    const site = getSiteQuery(url);
+    const file = await getRepoContent(session, site, ".vitepress/config.ts");
+    json(response, 200, {
+      settings: parseSiteSettings(decodeBase64Content(file.content)),
+      sha: file.sha,
+    });
+    return;
+  }
+
+  if (request.method === "PUT") {
+    const body = JSON.parse(await readBody(request) || "{}");
+    const site = body.site;
+    const settings = body.settings;
+    const repoPath = toRepoPath(site.siteRoot, ".vitepress/config.ts");
+    const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+    const result = await githubFetch(session, `/repos/${site.owner}/${site.repo}/contents/${encodedPath}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: "docs: update VitePress config from VitePress-CMS",
+        content: encodeBase64Content(stringifySiteConfig(settings)),
+        branch: site.branch,
+        sha: body.sha,
+      }),
+    });
+
+    json(response, 200, { sha: result.content.sha });
+    return;
+  }
+
+  json(response, 405, { error: "Method not allowed" });
+}
+
+export async function handleGithubApi(request, response, url) {
+  try {
+    if (url.pathname === "/api/github/login" && request.method === "GET") {
+      await handleLogin(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/callback" && request.method === "GET") {
+      await handleCallback(request, response, url);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/me" && request.method === "GET") {
+      await handleMe(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/logout" && request.method === "POST") {
+      await handleLogout(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/repos" && request.method === "GET") {
+      await handleRepos(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/repos" && request.method === "POST") {
+      await handleCreateRepo(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/site/pages") {
+      await handleSitePages(request, response, url);
+      return true;
+    }
+
+    if (url.pathname === "/api/github/site/settings") {
+      await handleSiteSettings(request, response, url);
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    json(response, 500, {
+      error: error instanceof Error ? error.message : "Unknown GitHub API error",
+    });
+    return true;
+  }
+}
--- a/server/http.mjs
+++ b/server/http.mjs
@@ -0,0 +1,26 @@
+export function json(response, status, payload, headers = {}) {
+  response.writeHead(status, {
+    "Content-Type": "application/json; charset=utf-8",
+    ...headers,
+  });
+  response.end(JSON.stringify(payload));
+}
+
+export function redirect(response, location, headers = {}) {
+  response.writeHead(302, {
+    Location: location,
+    ...headers,
+  });
+  response.end();
+}
+
+export function readBody(request) {
+  return new Promise((resolve, reject) => {
+    let body = "";
+    request.on("data", (chunk) => {
+      body += chunk;
+    });
+    request.on("end", () => resolve(body));
+    request.on("error", reject);
+  });
+}
--- a/server/index.mjs
+++ b/server/index.mjs
@@ -0,0 +1,81 @@
+import { createReadStream, existsSync } from "node:fs";
+import { extname, join, normalize } from "node:path";
+import { createServer } from "node:http";
+import { createServer as createViteServer } from "vite";
+import { bootstrap } from "./bootstrap.mjs";
+import { handleAuthApi } from "./auth.mjs";
+import { handleGithubApi } from "./github.mjs";
+import { handleSettingsApi } from "./settings.mjs";
+
+const isProduction = process.env.NODE_ENV === "production";
+const port = Number(process.env.PORT || 5173);
+const root = process.cwd();
+
+bootstrap();
+
+const mimeTypes = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+};
+
+const vite = isProduction
+  ? undefined
+  : await createViteServer({
+      server: {
+        middlewareMode: true,
+        host: "0.0.0.0",
+      },
+      appType: "spa",
+    });
+
+function sendNotFound(response) {
+  response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  response.end("Not found");
+}
+
+function serveStatic(request, response) {
+  const pathname = decodeURIComponent(new URL(request.url ?? "/", `http://localhost:${port}`).pathname);
+  const requestedPath = normalize(join(root, "dist", pathname === "/" ? "index.html" : pathname));
+  const fallbackPath = join(root, "dist", "index.html");
+  const filePath = existsSync(requestedPath) ? requestedPath : fallbackPath;
+
+  if (!filePath.startsWith(join(root, "dist")) || !existsSync(filePath)) {
+    sendNotFound(response);
+    return;
+  }
+
+  response.writeHead(200, {
+    "Content-Type": mimeTypes[extname(filePath)] || "application/octet-stream",
+  });
+  createReadStream(filePath).pipe(response);
+}
+
+const server = createServer(async (request, response) => {
+  const url = new URL(request.url ?? "/", `http://localhost:${port}`);
+
+  if (await handleAuthApi(request, response, url)) {
+    return;
+  }
+
+  if (await handleSettingsApi(request, response, url)) {
+    return;
+  }
+
+  if (await handleGithubApi(request, response, url)) {
+    return;
+  }
+
+  if (vite) {
+    vite.middlewares(request, response, () => sendNotFound(response));
+    return;
+  }
+
+  serveStatic(request, response);
+});
+
+server.listen(port, "0.0.0.0", () => {
+  console.log(`VitePress-CMS running at http://localhost:${port}`);
+});
--- a/server/security.mjs
+++ b/server/security.mjs
@@ -0,0 +1,24 @@
+import { pbkdf2Sync, randomBytes, timingSafeEqual } from "node:crypto";
+
+const iterations = 120000;
+const keyLength = 32;
+const digest = "sha256";
+
+export function hashPassword(password) {
+  const salt = randomBytes(16).toString("hex");
+  const hash = pbkdf2Sync(password, salt, iterations, keyLength, digest).toString("hex");
+  return `pbkdf2:${iterations}:${salt}:${hash}`;
+}
+
+export function verifyPassword(password, storedHash) {
+  const [scheme, storedIterations, salt, hash] = storedHash.split(":");
+
+  if (scheme !== "pbkdf2" || !storedIterations || !salt || !hash) {
+    return false;
+  }
+
+  const candidate = pbkdf2Sync(password, salt, Number(storedIterations), keyLength, digest);
+  const expected = Buffer.from(hash, "hex");
+
+  return candidate.length === expected.length && timingSafeEqual(candidate, expected);
+}
--- a/server/session.mjs
+++ b/server/session.mjs
@@ -0,0 +1,59 @@
+import { randomBytes } from "node:crypto";
+
+const sessions = new Map();
+
+export function createSession(data) {
+  const id = randomBytes(24).toString("hex");
+  sessions.set(id, {
+    ...data,
+    createdAt: Date.now(),
+  });
+  return id;
+}
+
+export function getSession(id) {
+  if (!id) return undefined;
+  return sessions.get(id);
+}
+
+export function updateSession(id, data) {
+  if (!id || !sessions.has(id)) return undefined;
+  const nextSession = {
+    ...sessions.get(id),
+    ...data,
+  };
+  sessions.set(id, nextSession);
+  return nextSession;
+}
+
+export function deleteSession(id) {
+  if (!id) return;
+  sessions.delete(id);
+}
+
+export function parseCookies(cookieHeader = "") {
+  return Object.fromEntries(
+    cookieHeader
+      .split(";")
+      .map((item) => item.trim())
+      .filter(Boolean)
+      .map((item) => {
+        const index = item.indexOf("=");
+        return [item.slice(0, index), decodeURIComponent(item.slice(index + 1))];
+      }),
+  );
+}
+
+export function sessionCookie(id) {
+  return [
+    `vpc_session=${encodeURIComponent(id)}`,
+    "Path=/",
+    "HttpOnly",
+    "SameSite=Lax",
+    "Max-Age=2592000",
+  ].join("; ");
+}
+
+export function clearSessionCookie() {
+  return "vpc_session=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0";
+}
--- a/server/settings.mjs
+++ b/server/settings.mjs
@@ -0,0 +1,70 @@
+import { db, setSetting } from "./db.mjs";
+import { requireCmsUser } from "./auth.mjs";
+import { json, readBody } from "./http.mjs";
+
+function requireAdmin(request, response) {
+  const user = requireCmsUser(request, response);
+
+  if (!user) return undefined;
+
+  if (user.role !== "system_admin") {
+    json(response, 403, { error: "System admin permission is required" });
+    return undefined;
+  }
+
+  return user;
+}
+
+function publicSetting(row) {
+  return {
+    key: row.key,
+    value: row.encrypted ? "" : row.value,
+    encrypted: Boolean(row.encrypted),
+    updatedAt: row.updated_at,
+  };
+}
+
+async function handleGetSettings(request, response) {
+  if (!requireAdmin(request, response)) return;
+
+  const rows = db
+    .prepare("SELECT key, value, encrypted, updated_at FROM system_settings ORDER BY key")
+    .all();
+
+  json(response, 200, { settings: rows.map(publicSetting) });
+}
+
+async function handleSaveSettings(request, response) {
+  if (!requireAdmin(request, response)) return;
+
+  const body = JSON.parse(await readBody(request) || "{}");
+  const settings = Array.isArray(body.settings) ? body.settings : [];
+
+  settings.forEach((setting) => {
+    if (!setting.key) return;
+    setSetting(String(setting.key), String(setting.value ?? ""), Boolean(setting.encrypted));
+  });
+
+  json(response, 200, { ok: true });
+}
+
+export async function handleSettingsApi(request, response, url) {
+  try {
+    if (url.pathname === "/api/admin/settings" && request.method === "GET") {
+      await handleGetSettings(request, response);
+      return true;
+    }
+
+    if (url.pathname === "/api/admin/settings" && request.method === "PUT") {
+      await handleSaveSettings(request, response);
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    json(response, 500, {
+      error: error instanceof Error ? error.message : "Unknown settings API error",
+    });
+    return true;
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,465 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import {
+  loadGitHubPages,
+  loadGitHubSettings,
+  saveGitHubPage,
+  saveGitHubSettings,
+} from "./api/githubSite";
+import { loadCurrentUser, loginWithEmail, logoutCms } from "./api/auth";
+import {
+  createGitHubRepository,
+  loadGitHubRepositories,
+  loadGitHubUser,
+  logoutGitHub,
+  startGitHubLogin,
+} from "./api/githubAuth";
+import {
+  loadLocalPages,
+  loadLocalSettings,
+  saveLocalPage,
+  saveLocalSettings,
+} from "./api/localSite";
+import AppSidebar from "./components/AppSidebar.vue";
+import ConfigPanel from "./components/ConfigPanel.vue";
+import ConnectPanel from "./components/ConnectPanel.vue";
+import ContentPanel from "./components/ContentPanel.vue";
+import LoginView from "./components/LoginView.vue";
+import PublishPanel from "./components/PublishPanel.vue";
+import StructurePanel from "./components/StructurePanel.vue";
+import { mockNavItems, mockPages, mockSidebarGroups, mockSiteSettings } from "./data/mockSite";
+import type { CmsUser, DataSource, DocPage, GitHubConnection, GitHubRepository, GitHubUser, PanelKey } from "./types";
+
+const panels: Array<{ key: PanelKey; label: string; icon: string }> = [
+  { key: "connect", label: "仓库连接", icon: "G" },
+  { key: "content", label: "页面管理", icon: "P" },
+  { key: "structure", label: "站点结构", icon: "S" },
+  { key: "config", label: "主题配置", icon: "C" },
+  { key: "publish", label: "发布中心", icon: "R" },
+];
+
+const githubConnection = reactive<GitHubConnection>({
+  token: "",
+  owner: "",
+  repo: "",
+  branch: "main",
+  siteRoot: "",
+});
+
+const activePanel = ref<PanelKey>("content");
+const dataSource = ref<DataSource>("local");
+const hasGitHubConnection = ref(false);
+const pages = reactive<DocPage[]>([]);
+const navItems = reactive(mockNavItems.map((item) => ({ ...item })));
+const sidebarGroups = reactive(
+  mockSidebarGroups.map((group) => ({
+    ...group,
+    items: group.items.map((item) => ({ ...item })),
+  })),
+);
+const siteSettings = reactive({ ...mockSiteSettings });
+const activePageId = ref("");
+const settingsSha = ref<string>();
+const isLoadingPages = ref(false);
+const isConnecting = ref(false);
+const isLoadingRepos = ref(false);
+const pageSaveState = ref<"idle" | "saving" | "saved" | "error">("idle");
+const settingsSaveState = ref<"idle" | "saving" | "saved" | "error">("idle");
+const githubUser = ref<GitHubUser | null>(null);
+const currentUser = ref<CmsUser | null>(null);
+const repositories = ref<GitHubRepository[]>([]);
+const isAuthLoading = ref(true);
+const loginError = ref("");
+const activityItems = ref(["等待读取站点"]);
+
+const activePage = computed(() => pages.find((page) => page.id === activePageId.value) ?? pages[0]);
+const activePanelTitle = computed(() => panels.find((panel) => panel.key === activePanel.value)?.label ?? "");
+const repoLabel = computed(() => {
+  if (dataSource.value === "github" && hasGitHubConnection.value) {
+    return `${githubConnection.owner}/${githubConnection.repo}`;
+  }
+
+  return "test-vitepress";
+});
+const repoBranch = computed(() =>
+  dataSource.value === "github" && hasGitHubConnection.value ? githubConnection.branch : "local",
+);
+const repoRoot = computed(() =>
+  dataSource.value === "github" && hasGitHubConnection.value ? githubConnection.siteRoot || "/" : "test-vitepress/",
+);
+
+function normalizeConnection(connection: GitHubConnection): GitHubConnection {
+  return {
+    token: connection.token.trim(),
+    owner: connection.owner.trim(),
+    repo: connection.repo.trim(),
+    branch: connection.branch.trim() || "main",
+    siteRoot: connection.siteRoot.trim().replace(/^\/+|\/+$/g, ""),
+  };
+}
+
+function validateConnection(connection: GitHubConnection) {
+  if (!connection.owner || !connection.repo || !connection.branch) {
+    throw new Error("请填写 GitHub owner、repo 和 branch 后再连接");
+  }
+}
+
+function replacePages(nextPages: DocPage[]) {
+  pages.splice(0, pages.length, ...nextPages.map((page) => ({ ...page })));
+  activePageId.value = pages[0]?.id ?? "";
+}
+
+async function loadPagesForSource(source: DataSource, connection = githubConnection) {
+  if (source === "github") {
+    return loadGitHubPages(connection);
+  }
+
+  return loadLocalPages();
+}
+
+async function loadSettingsForSource(source: DataSource, connection = githubConnection) {
+  if (source === "github") {
+    const result = await loadGitHubSettings(connection);
+    return result;
+  }
+
+  return {
+    settings: await loadLocalSettings(),
+    sha: undefined,
+  };
+}
+
+async function loadPages() {
+  isLoadingPages.value = true;
+
+  try {
+    const nextPages = await loadPagesForSource(dataSource.value);
+    replacePages(nextPages);
+    activityItems.value = [
+      `已从 ${dataSource.value === "github" ? "GitHub" : "test-vitepress"} 读取 ${nextPages.length} 个 Markdown 页面`,
+      ...activityItems.value,
+    ];
+  } catch (error) {
+    replacePages(mockPages.map((page) => ({ ...page })));
+    activityItems.value = [
+      "读取页面失败，已回退到 mock 数据",
+      error instanceof Error ? error.message : "未知错误",
+      ...activityItems.value,
+    ];
+  } finally {
+    isLoadingPages.value = false;
+  }
+}
+
+async function loadSettings() {
+  try {
+    const result = await loadSettingsForSource(dataSource.value);
+    Object.assign(siteSettings, result.settings);
+    settingsSha.value = result.sha;
+    activityItems.value = [
+      `已读取 ${dataSource.value === "github" ? "GitHub" : "test-vitepress"} 的 VitePress 配置`,
+      ...activityItems.value,
+    ];
+  } catch (error) {
+    activityItems.value = [
+      "读取站点配置失败，已使用默认配置",
+      error instanceof Error ? error.message : "未知错误",
+      ...activityItems.value,
+    ];
+  }
+}
+
+async function reloadSite() {
+  await Promise.all([loadPages(), loadSettings()]);
+}
+
+async function loadAuthState() {
+  try {
+    currentUser.value = await loadCurrentUser();
+    githubUser.value = await loadGitHubUser();
+
+    if (githubUser.value) {
+      await refreshRepositories();
+    }
+  } catch (error) {
+    activityItems.value = [
+      error instanceof Error ? error.message : "读取 GitHub 登录状态失败",
+      ...activityItems.value,
+    ];
+  }
+}
+
+async function handleEmailLogin(payload: { email: string; password: string }) {
+  isAuthLoading.value = true;
+  loginError.value = "";
+
+  try {
+    currentUser.value = await loginWithEmail(payload.email, payload.password);
+    await loadAuthState();
+    await reloadSite();
+  } catch (error) {
+    loginError.value = error instanceof Error ? error.message : "登录失败";
+  } finally {
+    isAuthLoading.value = false;
+  }
+}
+
+async function handleLogout() {
+  await logoutCms();
+  currentUser.value = null;
+  githubUser.value = null;
+  repositories.value = [];
+}
+
+async function refreshRepositories() {
+  isLoadingRepos.value = true;
+
+  try {
+    repositories.value = await loadGitHubRepositories();
+    activityItems.value = [`已读取 ${repositories.value.length} 个 GitHub 仓库`, ...activityItems.value];
+  } catch (error) {
+    activityItems.value = [
+      error instanceof Error ? error.message : "读取 GitHub 仓库列表失败",
+      ...activityItems.value,
+    ];
+  } finally {
+    isLoadingRepos.value = false;
+  }
+}
+
+async function connectGithub(connection: GitHubConnection) {
+  const nextConnection = normalizeConnection(connection);
+
+  try {
+    validateConnection(nextConnection);
+  } catch (error) {
+    activityItems.value = [
+      error instanceof Error ? error.message : "连接信息不完整",
+      ...activityItems.value,
+    ];
+    return;
+  }
+
+  isConnecting.value = true;
+
+  try {
+    const [nextPages, nextSettings] = await Promise.all([
+      loadPagesForSource("github", nextConnection),
+      loadSettingsForSource("github", nextConnection),
+    ]);
+
+    Object.assign(githubConnection, nextConnection);
+    dataSource.value = "github";
+    hasGitHubConnection.value = true;
+    replacePages(nextPages);
+    Object.assign(siteSettings, nextSettings.settings);
+    settingsSha.value = nextSettings.sha;
+    activePanel.value = "content";
+    activityItems.value = [`已连接 GitHub 仓库 ${githubConnection.owner}/${githubConnection.repo}`, ...activityItems.value];
+  } catch (error) {
+    hasGitHubConnection.value = false;
+    dataSource.value = "local";
+    activityItems.value = [
+      "GitHub 仓库连接失败，仍保持本地测试站点模式",
+      error instanceof Error ? error.message : "未知错误",
+      ...activityItems.value,
+    ];
+  } finally {
+    isConnecting.value = false;
+  }
+}
+
+async function useLocalSource() {
+  dataSource.value = "local";
+  hasGitHubConnection.value = false;
+  settingsSha.value = undefined;
+  await reloadSite();
+  activePanel.value = "content";
+}
+
+async function signOutGithub() {
+  await logoutGitHub();
+  githubUser.value = null;
+  repositories.value = [];
+  await useLocalSource();
+}
+
+async function createRepository(payload: { name: string; private: boolean }) {
+  try {
+    const repo = await createGitHubRepository(payload);
+    repositories.value = [repo, ...repositories.value];
+    activityItems.value = [`已创建 GitHub 仓库 ${repo.fullName}`, ...activityItems.value];
+  } catch (error) {
+    activityItems.value = [
+      error instanceof Error ? error.message : "创建 GitHub 仓库失败",
+      ...activityItems.value,
+    ];
+  }
+}
+
+function selectPage(pageId: string) {
+  activePageId.value = pageId;
+  pageSaveState.value = "idle";
+}
+
+function addPage() {
+  const nextIndex = pages.length + 1;
+  const page: DocPage = {
+    id: `new-page-${Date.now()}`,
+    title: `新页面 ${nextIndex}`,
+    path: `new-page-${nextIndex}.md`,
+    description: "新的 VitePress 页面",
+    content: `# 新页面 ${nextIndex}\n\n在这里编辑内容。`,
+  };
+
+  pages.unshift(page);
+  activePageId.value = page.id;
+  pageSaveState.value = "idle";
+}
+
+async function saveActivePage() {
+  if (!activePage.value) return;
+
+  pageSaveState.value = "saving";
+
+  try {
+    if (dataSource.value === "github" && hasGitHubConnection.value) {
+      activePage.value.sha = await saveGitHubPage(githubConnection, activePage.value);
+    } else {
+      await saveLocalPage(activePage.value);
+    }
+
+    pageSaveState.value = "saved";
+    activityItems.value = [`已保存 ${activePage.value.path}`, ...activityItems.value];
+  } catch (error) {
+    pageSaveState.value = "error";
+    activityItems.value = [
+      error instanceof Error ? error.message : "保存页面失败",
+      ...activityItems.value,
+    ];
+  }
+}
+
+async function saveSettings() {
+  settingsSaveState.value = "saving";
+
+  try {
+    if (dataSource.value === "github" && hasGitHubConnection.value) {
+      settingsSha.value = await saveGitHubSettings(githubConnection, siteSettings, settingsSha.value);
+    } else {
+      await saveLocalSettings(siteSettings);
+    }
+
+    settingsSaveState.value = "saved";
+    activityItems.value = ["已保存 .vitepress/config.ts", ...activityItems.value];
+  } catch (error) {
+    settingsSaveState.value = "error";
+    activityItems.value = [
+      error instanceof Error ? error.message : "保存配置失败",
+      ...activityItems.value,
+    ];
+  }
+}
+
+function publishChanges() {
+  activityItems.value = ["已创建 commit，并触发部署流程", ...activityItems.value];
+}
+
+onMounted(async () => {
+  try {
+    await loadAuthState();
+
+    if (currentUser.value) {
+      await reloadSite();
+    }
+  } finally {
+    isAuthLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <LoginView
+    v-if="!currentUser"
+    :error-message="loginError"
+    :is-loading="isAuthLoading"
+    @email-login="handleEmailLogin"
+    @github-login="startGitHubLogin"
+  />
+
+  <div v-else id="app-shell">
+    <AppSidebar
+      :active-panel="activePanel"
+      :data-source="dataSource"
+      :has-git-hub-connection="hasGitHubConnection"
+      :panels="panels"
+      :repo-branch="repoBranch"
+      :repo-label="repoLabel"
+      :repo-root="repoRoot"
+      @change-panel="activePanel = $event"
+    />
+
+    <main class="app-shell">
+      <header class="topbar">
+        <div>
+          <p class="eyebrow">VitePress 后台工作台</p>
+          <h2>{{ activePanelTitle }}</h2>
+        </div>
+        <div class="topbar-actions">
+          <button class="ghost-button" type="button" @click="handleLogout">
+            退出
+          </button>
+          <button class="ghost-button" type="button" @click="reloadSite">重新读取</button>
+          <button class="primary-button" type="button" @click="activePanel = 'publish'">发布</button>
+        </div>
+      </header>
+
+      <ConnectPanel
+        v-if="activePanel === 'connect'"
+        :connection="githubConnection"
+        :data-source="dataSource"
+        :github-user="githubUser"
+        :has-git-hub-connection="hasGitHubConnection"
+        :is-connecting="isConnecting"
+        :is-loading-repos="isLoadingRepos"
+        :repositories="repositories"
+        @connect-github="connectGithub"
+        @create-repository="createRepository"
+        @load-repositories="refreshRepositories"
+        @login-github="startGitHubLogin"
+        @logout-github="signOutGithub"
+        @use-local="useLocalSource"
+      />
+      <ContentPanel
+        v-else-if="activePanel === 'content' && activePage"
+        :active-page="activePage"
+        :active-page-id="activePageId"
+        :is-loading="isLoadingPages"
+        :pages="pages"
+        :save-state="pageSaveState"
+        @add-page="addPage"
+        @save-page="saveActivePage"
+        @select-page="selectPage"
+      />
+      <StructurePanel
+        v-else-if="activePanel === 'structure'"
+        :nav-items="navItems"
+        :sidebar-groups="sidebarGroups"
+      />
+      <ConfigPanel
+        v-else-if="activePanel === 'config'"
+        :save-state="settingsSaveState"
+        :settings="siteSettings"
+        @save-settings="saveSettings"
+      />
+      <PublishPanel
+        v-else-if="activePanel === 'publish'"
+        :activity-items="activityItems"
+        @publish="publishChanges"
+      />
+      <section v-else class="management-card empty-state">
+        正在读取站点...
+      </section>
+    </main>
+  </div>
+</template>
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -0,0 +1,47 @@
+import type { CmsUser } from "../types";
+
+interface MeResponse {
+  user: CmsUser | null;
+}
+
+interface LoginResponse {
+  user: CmsUser;
+}
+
+export async function loadCurrentUser() {
+  const response = await fetch("/api/auth/me");
+
+  if (!response.ok) {
+    throw new Error(`读取当前用户失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as MeResponse;
+  return data.user;
+}
+
+export async function loginWithEmail(email: string, password: string) {
+  const response = await fetch("/api/auth/login", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ email, password }),
+  });
+
+  if (!response.ok) {
+    throw new Error("邮箱或密码错误");
+  }
+
+  const data = (await response.json()) as LoginResponse;
+  return data.user;
+}
+
+export async function logoutCms() {
+  const response = await fetch("/api/auth/logout", {
+    method: "POST",
+  });
+
+  if (!response.ok) {
+    throw new Error(`退出登录失败：${response.status}`);
+  }
+}
--- a/src/api/githubAuth.ts
+++ b/src/api/githubAuth.ts
@@ -0,0 +1,70 @@
+import type { GitHubRepository, GitHubUser } from "../types";
+
+interface MeResponse {
+  user: GitHubUser | null;
+}
+
+interface ReposResponse {
+  repos: GitHubRepository[];
+}
+
+interface CreateRepoResponse {
+  repo: GitHubRepository;
+}
+
+export function startGitHubLogin() {
+  window.location.href = "/api/github/login";
+}
+
+export async function loadGitHubUser() {
+  const response = await fetch("/api/github/me");
+
+  if (!response.ok) {
+    throw new Error(`读取 GitHub 登录状态失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as MeResponse;
+  return data.user;
+}
+
+export async function logoutGitHub() {
+  const response = await fetch("/api/github/logout", {
+    method: "POST",
+  });
+
+  if (!response.ok) {
+    throw new Error(`退出 GitHub 登录失败：${response.status}`);
+  }
+}
+
+export async function loadGitHubRepositories() {
+  const response = await fetch("/api/github/repos");
+
+  if (!response.ok) {
+    throw new Error(`读取 GitHub 仓库列表失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as ReposResponse;
+  return data.repos;
+}
+
+export async function createGitHubRepository(payload: {
+  name: string;
+  private: boolean;
+  description?: string;
+}) {
+  const response = await fetch("/api/github/repos", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    throw new Error(`创建 GitHub 仓库失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as CreateRepoResponse;
+  return data.repo;
+}
--- a/src/api/githubSite.ts
+++ b/src/api/githubSite.ts
@@ -0,0 +1,266 @@
+import type { DocPage, GitHubConnection, SiteSettings } from "../types";
+import { parseFrontmatter, parseSiteSettings, stringifyMarkdownPage, stringifySiteConfig } from "../utils/siteContent";
+
+interface GitTreeResponse {
+  tree: Array<{
+    path: string;
+    type: "blob" | "tree";
+    sha: string;
+  }>;
+}
+
+interface GitHubContentResponse {
+  content: string;
+  encoding: string;
+  sha: string;
+  path: string;
+}
+
+function githubHeaders(connection: GitHubConnection) {
+  const headers: Record<string, string> = {
+    Accept: "application/vnd.github+json",
+    "X-GitHub-Api-Version": "2022-11-28",
+  };
+
+  if (connection.token.trim()) {
+    headers.Authorization = `Bearer ${connection.token.trim()}`;
+  }
+
+  return headers;
+}
+
+function usesSessionProxy(connection: GitHubConnection) {
+  return !connection.token.trim();
+}
+
+function siteParams(connection: GitHubConnection) {
+  return new URLSearchParams({
+    owner: connection.owner,
+    repo: connection.repo,
+    branch: connection.branch,
+    siteRoot: connection.siteRoot,
+  });
+}
+
+function normalizeSiteRoot(siteRoot: string) {
+  return siteRoot.trim().replace(/^\/+|\/+$/g, "");
+}
+
+function toRepoPath(connection: GitHubConnection, path: string) {
+  const siteRoot = normalizeSiteRoot(connection.siteRoot);
+  return siteRoot ? `${siteRoot}/${path}` : path;
+}
+
+function fromRepoPath(connection: GitHubConnection, path: string) {
+  const siteRoot = normalizeSiteRoot(connection.siteRoot);
+  return siteRoot && path.startsWith(`${siteRoot}/`) ? path.slice(siteRoot.length + 1) : path;
+}
+
+function decodeBase64Content(content: string) {
+  const binary = atob(content.replace(/\n/g, ""));
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}
+
+function encodeBase64Content(content: string) {
+  const bytes = new TextEncoder().encode(content);
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return btoa(binary);
+}
+
+async function githubFetch<T>(connection: GitHubConnection, path: string, init?: RequestInit) {
+  const response = await fetch(`https://api.github.com${path}`, {
+    ...init,
+    headers: {
+      ...githubHeaders(connection),
+      ...init?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const details = await response.text();
+    throw new Error(`GitHub 请求失败：${response.status} ${details}`);
+  }
+
+  return (await response.json()) as T;
+}
+
+async function getContent(connection: GitHubConnection, repoPath: string) {
+  const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+  return githubFetch<GitHubContentResponse>(
+    connection,
+    `/repos/${connection.owner}/${connection.repo}/contents/${encodedPath}?ref=${encodeURIComponent(connection.branch)}`,
+  );
+}
+
+export async function loadGitHubPages(connection: GitHubConnection) {
+  if (usesSessionProxy(connection)) {
+    const response = await fetch(`/api/github/site/pages?${siteParams(connection).toString()}`);
+
+    if (!response.ok) {
+      throw new Error(`读取 GitHub 页面失败：${response.status}`);
+    }
+
+    const data = (await response.json()) as { pages: DocPage[] };
+    return data.pages;
+  }
+
+  const tree = await githubFetch<GitTreeResponse>(
+    connection,
+    `/repos/${connection.owner}/${connection.repo}/git/trees/${encodeURIComponent(connection.branch)}?recursive=1`,
+  );
+  const siteRoot = normalizeSiteRoot(connection.siteRoot);
+  const prefix = siteRoot ? `${siteRoot}/` : "";
+  const markdownFiles = tree.tree
+    .filter((entry) => entry.type === "blob")
+    .filter((entry) => entry.path.endsWith(".md"))
+    .filter((entry) => !entry.path.includes("/node_modules/"))
+    .filter((entry) => entry.path !== `${prefix}README.md`)
+    .filter((entry) => !prefix || entry.path.startsWith(prefix));
+
+  return Promise.all(
+    markdownFiles.sort((a, b) => a.path.localeCompare(b.path)).map(async (entry) => {
+      const file = await getContent(connection, entry.path);
+      const source = decodeBase64Content(file.content);
+      const parsed = parseFrontmatter(source);
+      const path = fromRepoPath(connection, entry.path);
+
+      return {
+        id: path,
+        path,
+        sha: file.sha,
+        title: parsed.title || path.replace(/\.md$/, ""),
+        description: parsed.description,
+        content: parsed.content,
+      } satisfies DocPage;
+    }),
+  );
+}
+
+export async function saveGitHubPage(connection: GitHubConnection, page: DocPage) {
+  if (usesSessionProxy(connection)) {
+    const response = await fetch("/api/github/site/pages", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        site: {
+          owner: connection.owner,
+          repo: connection.repo,
+          branch: connection.branch,
+          siteRoot: connection.siteRoot,
+        },
+        page,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`保存 GitHub 页面失败：${response.status}`);
+    }
+
+    const data = (await response.json()) as { sha: string };
+    return data.sha;
+  }
+
+  const repoPath = toRepoPath(connection, page.path);
+  const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+  const response = await githubFetch<{ content: { sha: string } }>(
+    connection,
+    `/repos/${connection.owner}/${connection.repo}/contents/${encodedPath}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: `docs: update ${page.path} from VitePress-CMS`,
+        content: encodeBase64Content(stringifyMarkdownPage(page)),
+        branch: connection.branch,
+        sha: page.sha,
+      }),
+    },
+  );
+
+  return response.content.sha;
+}
+
+export async function loadGitHubSettings(connection: GitHubConnection) {
+  if (usesSessionProxy(connection)) {
+    const response = await fetch(`/api/github/site/settings?${siteParams(connection).toString()}`);
+
+    if (!response.ok) {
+      throw new Error(`读取 GitHub 配置失败：${response.status}`);
+    }
+
+    return (await response.json()) as {
+      settings: SiteSettings;
+      sha: string;
+    };
+  }
+
+  const configPath = toRepoPath(connection, ".vitepress/config.ts");
+  const file = await getContent(connection, configPath);
+  const source = decodeBase64Content(file.content);
+
+  return {
+    settings: parseSiteSettings(source),
+    sha: file.sha,
+  };
+}
+
+export async function saveGitHubSettings(
+  connection: GitHubConnection,
+  settings: SiteSettings,
+  sha?: string,
+) {
+  if (usesSessionProxy(connection)) {
+    const response = await fetch("/api/github/site/settings", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        site: {
+          owner: connection.owner,
+          repo: connection.repo,
+          branch: connection.branch,
+          siteRoot: connection.siteRoot,
+        },
+        settings,
+        sha,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`保存 GitHub 配置失败：${response.status}`);
+    }
+
+    const data = (await response.json()) as { sha: string };
+    return data.sha;
+  }
+
+  const repoPath = toRepoPath(connection, ".vitepress/config.ts");
+  const encodedPath = repoPath.split("/").map(encodeURIComponent).join("/");
+  const response = await githubFetch<{ content: { sha: string } }>(
+    connection,
+    `/repos/${connection.owner}/${connection.repo}/contents/${encodedPath}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: "docs: update VitePress config from VitePress-CMS",
+        content: encodeBase64Content(stringifySiteConfig(settings)),
+        branch: connection.branch,
+        sha,
+      }),
+    },
+  );
+
+  return response.content.sha;
+}
--- a/src/api/localSite.ts
+++ b/src/api/localSite.ts
@@ -0,0 +1,64 @@
+import type { DocPage, SiteSettings } from "../types";
+
+interface PagesResponse {
+  pages: DocPage[];
+}
+
+interface SettingsResponse {
+  settings: SiteSettings;
+}
+
+export async function loadLocalPages() {
+  const response = await fetch("/api/local-site/pages");
+
+  if (!response.ok) {
+    throw new Error(`读取测试站点失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as PagesResponse;
+  return data.pages;
+}
+
+export async function saveLocalPage(page: DocPage) {
+  const response = await fetch("/api/local-site/pages", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      path: page.path,
+      title: page.title,
+      description: page.description,
+      content: page.content,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`保存测试站点失败：${response.status}`);
+  }
+}
+
+export async function loadLocalSettings() {
+  const response = await fetch("/api/local-site/settings");
+
+  if (!response.ok) {
+    throw new Error(`读取测试站点配置失败：${response.status}`);
+  }
+
+  const data = (await response.json()) as SettingsResponse;
+  return data.settings;
+}
+
+export async function saveLocalSettings(settings: SiteSettings) {
+  const response = await fetch("/api/local-site/settings", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(settings),
+  });
+
+  if (!response.ok) {
+    throw new Error(`保存测试站点配置失败：${response.status}`);
+  }
+}
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { DataSource, PanelKey } from "../types";
+
+defineProps<{
+  activePanel: PanelKey;
+  dataSource: DataSource;
+  hasGitHubConnection: boolean;
+  panels: Array<{ key: PanelKey; label: string; icon: string }>;
+  repoLabel: string;
+  repoBranch: string;
+  repoRoot: string;
+}>();
+
+defineEmits<{
+  changePanel: [panel: PanelKey];
+}>();
+</script>
+
+<template>
+  <aside class="workspace-sidebar">
+    <div class="brand-block">
+      <div class="brand-mark">VC</div>
+      <div>
+        <h1>VitePress-CMS</h1>
+        <p>VitePress 可视化后台</p>
+      </div>
+    </div>
+
+    <button class="connect-button" type="button" @click="$emit('changePanel', 'connect')">
+      <span>{{ hasGitHubConnection ? "GitHub" : dataSource === "github" ? "GitHub" : "Local" }}</span>
+      <strong>{{ hasGitHubConnection ? "已连接仓库" : "连接仓库" }}</strong>
+    </button>
+
+    <nav class="main-nav" aria-label="后台模块">
+      <button
+        v-for="panel in panels"
+        :key="panel.key"
+        class="nav-item"
+        :class="{ 'is-active': activePanel === panel.key }"
+        type="button"
+        @click="$emit('changePanel', panel.key)"
+      >
+        <span class="nav-icon">{{ panel.icon }}</span>
+        {{ panel.label }}
+      </button>
+    </nav>
+
+    <section class="repo-card" aria-label="当前仓库">
+      <p class="eyebrow">当前数据源</p>
+      <h2>{{ repoLabel }}</h2>
+      <dl>
+        <div>
+          <dt>分支</dt>
+          <dd>{{ repoBranch }}</dd>
+        </div>
+        <div>
+          <dt>目录</dt>
+          <dd>{{ repoRoot }}</dd>
+        </div>
+        <div>
+          <dt>状态</dt>
+          <dd class="status-dot">Ready</dd>
+        </div>
+      </dl>
+    </section>
+  </aside>
+</template>
--- a/src/components/ConfigPanel.vue
+++ b/src/components/ConfigPanel.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { SiteSettings } from "../types";
+
+defineProps<{
+  settings: SiteSettings;
+  saveState: "idle" | "saving" | "saved" | "error";
+}>();
+
+defineEmits<{
+  saveSettings: [];
+}>();
+</script>
+
+<template>
+  <section class="panel is-visible">
+    <div class="settings-toolbar">
+      <p class="save-status" :class="`is-${saveState}`">
+        <template v-if="saveState === 'saved'">已保存到 test-vitepress/.vitepress/config.ts</template>
+        <template v-else-if="saveState === 'error'">保存配置失败，请查看发布中心日志</template>
+        <template v-else-if="saveState === 'saving'">正在写入 VitePress 配置</template>
+        <template v-else>读取自 test-vitepress/.vitepress/config.ts</template>
+      </p>
+      <button class="primary-button" type="button" @click="$emit('saveSettings')">
+        {{ saveState === "saving" ? "保存中" : "保存配置" }}
+      </button>
+    </div>
+
+    <div class="settings-grid">
+      <section class="management-card">
+        <p class="eyebrow">site</p>
+        <h3>站点信息</h3>
+        <label>
+          站点标题
+          <input v-model="settings.title" />
+        </label>
+        <label>
+          描述
+          <input v-model="settings.description" />
+        </label>
+        <label>
+          Logo 路径
+          <input v-model="settings.logo" />
+        </label>
+      </section>
+
+      <section class="management-card">
+        <p class="eyebrow">theme</p>
+        <h3>主题选项</h3>
+        <label class="toggle-row">
+          <span>显示最后更新时间</span>
+          <input v-model="settings.lastUpdated" type="checkbox" />
+        </label>
+        <label class="toggle-row">
+          <span>开启本地搜索</span>
+          <input v-model="settings.localSearch" type="checkbox" />
+        </label>
+        <label class="toggle-row">
+          <span>显示大纲导航</span>
+          <input v-model="settings.outline" type="checkbox" />
+        </label>
+      </section>
+
+      <section class="management-card wide-card">
+        <p class="eyebrow">socialLinks</p>
+        <h3>社交链接</h3>
+        <div class="sort-row">
+          <span class="drag-handle">::</span>
+          <input v-model="settings.socialKind" />
+          <input v-model="settings.socialLink" />
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
--- a/src/components/ConnectPanel.vue
+++ b/src/components/ConnectPanel.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from "vue";
+import type { DataSource, GitHubConnection, GitHubRepository, GitHubUser } from "../types";
+
+const props = defineProps<{
+  connection: GitHubConnection;
+  dataSource: DataSource;
+  githubUser: GitHubUser | null;
+  hasGitHubConnection: boolean;
+  isConnecting: boolean;
+  isLoadingRepos: boolean;
+  repositories: GitHubRepository[];
+}>();
+
+const emit = defineEmits<{
+  connectGithub: [connection: GitHubConnection];
+  createRepository: [payload: { name: string; private: boolean }];
+  loginGithub: [];
+  loadRepositories: [];
+  logoutGithub: [];
+  useLocal: [];
+}>();
+
+const draft = reactive<GitHubConnection>({ ...props.connection });
+const newRepo = reactive({
+  name: "",
+  private: false,
+});
+
+const selectedRepo = computed({
+  get() {
+    return draft.owner && draft.repo ? `${draft.owner}/${draft.repo}` : "";
+  },
+  set(fullName: string) {
+    const repo = props.repositories.find((item) => item.fullName === fullName);
+    if (!repo) return;
+
+    draft.owner = repo.owner;
+    draft.repo = repo.name;
+    draft.branch = repo.defaultBranch || "main";
+  },
+});
+
+const canConnect = computed(() => Boolean(draft.owner.trim() && draft.repo.trim() && draft.branch.trim()));
+const canCreateRepo = computed(() => Boolean(newRepo.name.trim()));
+
+watch(
+  () => props.connection,
+  (connection) => {
+    Object.assign(draft, connection);
+  },
+  { deep: true },
+);
+
+function connectGithub() {
+  if (!canConnect.value) return;
+  emit("connectGithub", { ...draft });
+}
+
+function createRepository() {
+  if (!canCreateRepo.value) return;
+  emit("createRepository", {
+    name: newRepo.name.trim(),
+    private: newRepo.private,
+  });
+}
+</script>
+
+<template>
+  <section class="panel is-visible">
+    <div class="connect-layout">
+      <section class="management-card">
+        <p class="eyebrow">GitHub</p>
+        <h3>登录与仓库选择</h3>
+
+        <div v-if="githubUser" class="github-user">
+          <img v-if="githubUser.avatarUrl" :src="githubUser.avatarUrl" alt="" />
+          <div>
+            <strong>{{ githubUser.name || githubUser.login }}</strong>
+            <span>@{{ githubUser.login }}</span>
+          </div>
+          <button class="ghost-button" type="button" @click="$emit('logoutGithub')">退出</button>
+        </div>
+        <div v-else class="connect-actions">
+          <button class="primary-button" type="button" @click="$emit('loginGithub')">
+            使用 GitHub 登录
+          </button>
+          <button class="ghost-button" type="button" @click="$emit('useLocal')">
+            使用本地测试站点
+          </button>
+        </div>
+
+        <template v-if="githubUser">
+          <div class="connect-actions">
+            <button class="secondary-button" type="button" @click="$emit('loadRepositories')">
+              {{ isLoadingRepos ? "读取中" : "刷新仓库列表" }}
+            </button>
+          </div>
+
+          <div class="form-grid">
+            <label class="wide-field">
+              仓库
+              <select v-model="selectedRepo">
+                <option value="">选择仓库</option>
+                <option v-for="repo in repositories" :key="repo.id" :value="repo.fullName">
+                  {{ repo.fullName }}{{ repo.private ? " private" : "" }}
+                </option>
+              </select>
+            </label>
+            <label>
+              Branch
+              <input v-model="draft.branch" placeholder="main" />
+            </label>
+            <label>
+              站点目录
+              <input v-model="draft.siteRoot" placeholder="docs 或留空" />
+            </label>
+          </div>
+
+          <div class="connect-actions">
+            <button class="primary-button" type="button" :disabled="!canConnect || isConnecting" @click="connectGithub">
+              {{ isConnecting ? "连接中" : "读取选中仓库" }}
+            </button>
+          </div>
+
+          <div class="new-repo-box">
+            <p class="eyebrow">create</p>
+            <h3>新建仓库</h3>
+            <div class="form-grid">
+              <label>
+                仓库名
+                <input v-model="newRepo.name" placeholder="my-vitepress-site" />
+              </label>
+              <label class="toggle-row">
+                <span>私有仓库</span>
+                <input v-model="newRepo.private" type="checkbox" />
+              </label>
+            </div>
+            <button class="secondary-button" type="button" :disabled="!canCreateRepo" @click="createRepository">
+              创建仓库
+            </button>
+          </div>
+        </template>
+      </section>
+
+      <section class="management-card">
+        <p class="eyebrow">manual</p>
+        <h3>手动连接</h3>
+        <div class="form-grid">
+          <label>
+            Token
+            <input v-model="draft.token" type="password" placeholder="ghp_..." autocomplete="off" />
+          </label>
+          <label>
+            Owner
+            <input v-model="draft.owner" placeholder="octocat" />
+          </label>
+          <label>
+            Repo
+            <input v-model="draft.repo" placeholder="vitepress-site" />
+          </label>
+          <label>
+            Branch
+            <input v-model="draft.branch" placeholder="main" />
+          </label>
+          <label class="wide-field">
+            站点目录
+            <input v-model="draft.siteRoot" placeholder="docs 或留空" />
+          </label>
+        </div>
+
+        <p v-if="!canConnect" class="helper-text">
+          请至少填写 owner、repo 和 branch。私有仓库或保存操作还需要 token。
+        </p>
+
+        <div class="connect-actions">
+          <button class="primary-button" type="button" :disabled="!canConnect || isConnecting" @click="connectGithub">
+            {{ isConnecting ? "连接中" : "读取 GitHub 仓库" }}
+          </button>
+          <button class="ghost-button" type="button" @click="$emit('useLocal')">
+            使用本地测试站点
+          </button>
+        </div>
+
+        <dl class="source-summary">
+          <div>
+            <dt>模式</dt>
+            <dd>{{ dataSource === "github" && hasGitHubConnection ? "GitHub 仓库" : "本地测试站点" }}</dd>
+          </div>
+          <div>
+            <dt>仓库</dt>
+            <dd>{{ hasGitHubConnection ? `${connection.owner}/${connection.repo}` : "未连接" }}</dd>
+          </div>
+          <div>
+            <dt>分支</dt>
+            <dd>{{ hasGitHubConnection ? connection.branch : "-" }}</dd>
+          </div>
+          <div>
+            <dt>目录</dt>
+            <dd>{{ hasGitHubConnection ? connection.siteRoot || "/" : "-" }}</dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+  </section>
+</template>
--- a/src/components/ContentPanel.vue
+++ b/src/components/ContentPanel.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { markdownToHtml } from "../utils/markdown";
+import type { DocPage, EditorMode } from "../types";
+
+const props = defineProps<{
+  pages: DocPage[];
+  activePage: DocPage;
+  activePageId: string;
+  isLoading: boolean;
+  saveState: "idle" | "saving" | "saved" | "error";
+}>();
+
+defineEmits<{
+  addPage: [];
+  savePage: [];
+  selectPage: [pageId: string];
+}>();
+
+const search = ref("");
+const mode = ref<EditorMode>("write");
+
+const filteredPages = computed(() => {
+  const query = search.value.trim().toLowerCase();
+
+  if (!query) return props.pages;
+
+  return props.pages.filter((page) => `${page.title} ${page.path}`.toLowerCase().includes(query));
+});
+
+const previewHtml = computed(() => markdownToHtml(props.activePage.content));
+</script>
+
+<template>
+  <section class="panel is-visible">
+    <div class="content-layout">
+      <aside class="document-tree" aria-label="文档目录">
+        <div class="section-head">
+          <div>
+            <p class="eyebrow">docs</p>
+            <h3>页面</h3>
+          </div>
+          <button class="icon-button" type="button" title="新建页面" @click="$emit('addPage')">+</button>
+        </div>
+        <div class="search-box">
+          <input v-model="search" type="search" placeholder="搜索页面" />
+        </div>
+        <ul class="page-list">
+          <li v-for="page in filteredPages" :key="page.id">
+            <button
+              class="page-item"
+              :class="{ 'is-active': page.id === activePageId }"
+              type="button"
+              @click="$emit('selectPage', page.id)"
+            >
+              <strong>{{ page.title }}</strong>
+              <span>{{ page.path }}</span>
+            </button>
+          </li>
+        </ul>
+        <p v-if="isLoading" class="helper-text">正在读取 test-vitepress...</p>
+      </aside>
+
+      <section class="editor-pane" aria-label="编辑器">
+        <div class="editor-header">
+          <div>
+            <p class="eyebrow">{{ activePage.path }}</p>
+            <h3>{{ activePage.title }}</h3>
+          </div>
+          <div class="editor-actions">
+            <div class="segmented-control" role="tablist" aria-label="编辑模式">
+              <button :class="{ 'is-active': mode === 'write' }" type="button" @click="mode = 'write'">
+                编辑
+              </button>
+              <button :class="{ 'is-active': mode === 'preview' }" type="button" @click="mode = 'preview'">
+                预览
+              </button>
+            </div>
+            <button class="primary-button" type="button" @click="$emit('savePage')">
+              {{ saveState === "saving" ? "保存中" : "保存" }}
+            </button>
+          </div>
+        </div>
+
+        <p class="save-status" :class="`is-${saveState}`">
+          <template v-if="saveState === 'saved'">已保存到 test-vitepress</template>
+          <template v-else-if="saveState === 'error'">保存失败，请查看发布中心日志</template>
+          <template v-else-if="saveState === 'saving'">正在写入 Markdown 文件</template>
+          <template v-else>读取自 test-vitepress，本次修改需要手动保存</template>
+        </p>
+
+        <div class="frontmatter-grid">
+          <label>
+            标题
+            <input v-model="activePage.title" type="text" />
+          </label>
+          <label>
+            描述
+            <input v-model="activePage.description" type="text" />
+          </label>
+        </div>
+
+        <textarea v-if="mode === 'write'" v-model="activePage.content" spellcheck="false"></textarea>
+        <article v-else class="markdown-preview" v-html="previewHtml"></article>
+      </section>
+    </div>
+  </section>
+</template>
--- a/src/components/LoginView.vue
+++ b/src/components/LoginView.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+
+defineProps<{
+  errorMessage: string;
+  isLoading: boolean;
+}>();
+
+const emit = defineEmits<{
+  emailLogin: [payload: { email: string; password: string }];
+  githubLogin: [];
+}>();
+
+const form = reactive({
+  email: "admin@example.com",
+  password: "admin123456",
+});
+
+function submit() {
+  emit("emailLogin", { ...form });
+}
+</script>
+
+<template>
+  <main class="login-screen">
+    <section class="login-panel">
+      <div class="brand-block">
+        <div class="brand-mark">VC</div>
+        <div>
+          <h1>VitePress-CMS</h1>
+          <p>登录 CMS 后台</p>
+        </div>
+      </div>
+
+      <form class="login-form" @submit.prevent="submit">
+        <label>
+          邮箱
+          <input v-model="form.email" type="email" autocomplete="username" />
+        </label>
+        <label>
+          密码
+          <input v-model="form.password" type="password" autocomplete="current-password" />
+        </label>
+        <button class="primary-button" type="submit" :disabled="isLoading">
+          {{ isLoading ? "登录中" : "邮箱登录" }}
+        </button>
+      </form>
+
+      <button class="connect-button" type="button" @click="$emit('githubLogin')">
+        <span>GitHub</span>
+        <strong>使用 GitHub 登录</strong>
+      </button>
+
+      <p v-if="errorMessage" class="save-status is-error">{{ errorMessage }}</p>
+      <p class="helper-text">默认管理员账号：admin@example.com / admin123456</p>
+    </section>
+  </main>
+</template>
--- a/src/components/PublishPanel.vue
+++ b/src/components/PublishPanel.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  activityItems: string[];
+}>();
+
+defineEmits<{
+  publish: [];
+}>();
+</script>
+
+<template>
+  <section class="panel is-visible">
+    <div class="publish-layout">
+      <section class="management-card publish-card">
+        <p class="eyebrow">commit</p>
+        <h3>发布修改</h3>
+        <textarea class="commit-message">docs: update site content from VitePress-CMS</textarea>
+        <button class="primary-button" type="button" @click="$emit('publish')">提交并发布</button>
+      </section>
+      <section class="management-card">
+        <p class="eyebrow">activity</p>
+        <h3>部署状态</h3>
+        <ol class="activity-list">
+          <li v-for="item in activityItems" :key="item"><span></span>{{ item }}</li>
+        </ol>
+      </section>
+    </div>
+  </section>
+</template>
--- a/src/components/StructurePanel.vue
+++ b/src/components/StructurePanel.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { NavItem, SidebarGroup } from "../types";
+
+defineProps<{
+  navItems: NavItem[];
+  sidebarGroups: SidebarGroup[];
+}>();
+</script>
+
+<template>
+  <section class="panel is-visible">
+    <div class="two-column">
+      <section class="management-card">
+        <div class="section-head">
+          <div>
+            <p class="eyebrow">nav</p>
+            <h3>导航栏</h3>
+          </div>
+          <button class="secondary-button" type="button">添加</button>
+        </div>
+        <div class="sortable-list">
+          <div v-for="item in navItems" :key="item.id" class="sort-row">
+            <span class="drag-handle">::</span>
+            <input v-model="item.label" />
+            <input v-model="item.link" />
+          </div>
+        </div>
+      </section>
+
+      <section class="management-card">
+        <div class="section-head">
+          <div>
+            <p class="eyebrow">sidebar</p>
+            <h3>侧边栏</h3>
+          </div>
+          <button class="secondary-button" type="button">自动生成</button>
+        </div>
+        <div class="sidebar-preview">
+          <template v-for="group in sidebarGroups" :key="group.id">
+            <strong>{{ group.title }}</strong>
+            <button v-for="item in group.items" :key="item.id" type="button">
+              {{ item.label }}
+            </button>
+          </template>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./styles.css";
+
+createApp(App).mount("#app");
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,757 @@
+:root {
+  color-scheme: light;
+  --bg: #eef1f5;
+  --surface: #ffffff;
+  --surface-soft: #f7f9fb;
+  --ink: #18212f;
+  --muted: #687386;
+  --line: #dfe5ed;
+  --accent: #117a72;
+  --accent-strong: #0b625d;
+  --accent-soft: #e1f4f1;
+  --warning: #c07a21;
+  --radius: 8px;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+#app-shell {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.login-screen {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 20px;
+  background: var(--bg);
+}
+
+.login-panel {
+  display: grid;
+  width: min(420px, 100%);
+  gap: 16px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  padding: 22px;
+}
+
+.login-form {
+  display: grid;
+  gap: 12px;
+}
+
+.workspace-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 22px;
+  border-right: 1px solid var(--line);
+  background: #fbfcfd;
+}
+
+.brand-block {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.brand-mark {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: #fff;
+  font-weight: 800;
+}
+
+.brand-block h1,
+.brand-block p,
+.topbar h2,
+.topbar p,
+.section-head h3,
+.section-head p,
+.management-card h3,
+.management-card p {
+  margin: 0;
+}
+
+.brand-block h1 {
+  font-size: 18px;
+  letter-spacing: 0;
+}
+
+.brand-block p,
+.eyebrow {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.eyebrow {
+  margin-bottom: 4px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.connect-button,
+.primary-button,
+.secondary-button,
+.ghost-button,
+.icon-button,
+.nav-item,
+.page-item,
+.sidebar-preview button {
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+}
+
+.connect-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 14px;
+  background: #171b23;
+  color: #fff;
+  text-align: left;
+}
+
+.connect-button span {
+  color: #bfc7d1;
+}
+
+.main-nav {
+  display: grid;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 11px 12px;
+  background: transparent;
+  color: var(--muted);
+  text-align: left;
+}
+
+.nav-item.is-active {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-weight: 700;
+}
+
+.nav-icon {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border-radius: 6px;
+  background: #e8edf3;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.repo-card,
+.management-card,
+.document-tree,
+.editor-pane {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.repo-card {
+  margin-top: auto;
+  padding: 16px;
+}
+
+.repo-card h2 {
+  margin: 0 0 14px;
+  font-size: 15px;
+}
+
+.repo-card dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.repo-card dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.repo-card dt {
+  color: var(--muted);
+}
+
+.repo-card dd {
+  margin: 0;
+  font-weight: 700;
+}
+
+.status-dot::before {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  border-radius: 999px;
+  background: #21a36e;
+  content: "";
+}
+
+.app-shell {
+  min-width: 0;
+  padding: 22px;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.topbar h2 {
+  font-size: 28px;
+  letter-spacing: 0;
+}
+
+.topbar-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.primary-button,
+.secondary-button,
+.ghost-button,
+.icon-button {
+  min-height: 38px;
+  padding: 0 14px;
+  font-weight: 700;
+}
+
+.primary-button {
+  background: var(--accent);
+  color: #fff;
+}
+
+.secondary-button,
+.ghost-button,
+.icon-button {
+  border-color: var(--line);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.panel {
+  display: none;
+}
+
+.panel.is-visible {
+  display: block;
+}
+
+.content-layout {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 16px;
+  min-height: calc(100vh - 112px);
+}
+
+.document-tree,
+.editor-pane,
+.management-card {
+  padding: 16px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.section-head h3,
+.management-card h3 {
+  font-size: 18px;
+}
+
+.search-box input,
+label input,
+label select,
+.sort-row input,
+.commit-message {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+  color: var(--ink);
+  outline: none;
+}
+
+.search-box input,
+label input,
+label select,
+.sort-row input {
+  height: 40px;
+  padding: 0 12px;
+}
+
+.page-list {
+  display: grid;
+  gap: 8px;
+  max-height: calc(100vh - 226px);
+  margin: 14px 0 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.page-item {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  padding: 12px;
+  background: transparent;
+  text-align: left;
+}
+
+.page-item span {
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.page-item.is-active {
+  border-color: #b9d8d4;
+  background: var(--accent-soft);
+}
+
+.editor-pane {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 14px;
+  min-width: 0;
+}
+
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.editor-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.editor-header h3 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.segmented-control {
+  display: flex;
+  padding: 3px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+}
+
+.segmented-control button {
+  min-width: 64px;
+  height: 32px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.segmented-control button.is-active {
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: 0 1px 4px rgba(23, 33, 46, 0.12);
+}
+
+.frontmatter-grid,
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.settings-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+label {
+  display: grid;
+  gap: 7px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.helper-text,
+.save-status {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.save-status {
+  margin: -4px 0 0;
+}
+
+.save-status.is-saved {
+  color: var(--accent-strong);
+  font-weight: 700;
+}
+
+.save-status.is-error {
+  color: #a64038;
+  font-weight: 700;
+}
+
+.empty-state {
+  color: var(--muted);
+}
+
+.editor-pane > textarea,
+.markdown-preview {
+  min-height: 460px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+}
+
+.editor-pane > textarea {
+  resize: none;
+  padding: 16px;
+  line-height: 1.65;
+}
+
+.markdown-preview {
+  padding: 18px 22px;
+  line-height: 1.7;
+}
+
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3 {
+  letter-spacing: 0;
+}
+
+.markdown-preview blockquote {
+  margin: 12px 0;
+  padding: 10px 14px;
+  border-left: 4px solid var(--accent);
+  background: #edf7f5;
+  color: #30514e;
+}
+
+.preview-list {
+  margin: 6px 0;
+}
+
+.two-column,
+.publish-layout,
+.connect-layout {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.sortable-list,
+.sidebar-preview,
+.settings-grid,
+.publish-card,
+.form-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.form-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 14px;
+}
+
+.wide-field {
+  grid-column: 1 / -1;
+}
+
+.connect-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.github-user {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+}
+
+.github-user img {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+}
+
+.github-user strong,
+.github-user span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.github-user span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.new-repo-box {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+.source-summary {
+  display: grid;
+  gap: 12px;
+  margin: 14px 0 0;
+}
+
+.source-summary div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 10px;
+}
+
+.source-summary dt {
+  color: var(--muted);
+}
+
+.source-summary dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-weight: 700;
+  text-align: right;
+}
+
+.sort-row {
+  display: grid;
+  grid-template-columns: 28px 1fr 1.4fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.drag-handle {
+  color: var(--muted);
+  font-weight: 800;
+  text-align: center;
+}
+
+.sidebar-preview {
+  align-content: start;
+}
+
+.sidebar-preview strong {
+  margin-top: 6px;
+}
+
+.sidebar-preview button {
+  min-height: 34px;
+  border-color: var(--line);
+  background: var(--surface-soft);
+  text-align: left;
+}
+
+.settings-grid {
+  align-items: start;
+}
+
+.wide-card {
+  grid-column: 1 / -1;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  border-bottom: 1px solid var(--line);
+}
+
+.toggle-row input {
+  width: 18px;
+  height: 18px;
+}
+
+.commit-message {
+  min-height: 140px;
+  padding: 12px;
+  resize: vertical;
+}
+
+.activity-list {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.activity-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--muted);
+}
+
+.activity-list span {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+
+@media (max-width: 980px) {
+  #app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-sidebar {
+    position: static;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .main-nav {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .nav-item {
+    justify-content: center;
+  }
+
+  .repo-card {
+    margin-top: 0;
+  }
+
+  .content-layout,
+  .two-column,
+  .publish-layout,
+  .connect-layout,
+  .settings-grid,
+  .frontmatter-grid,
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .app-shell,
+  .workspace-sidebar {
+    padding: 14px;
+  }
+
+  .topbar,
+  .editor-header,
+  .settings-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .editor-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .topbar-actions,
+  .segmented-control,
+  .connect-actions {
+    width: 100%;
+  }
+
+  .topbar-actions button,
+  .segmented-control button,
+  .connect-actions button {
+    flex: 1;
+  }
+
+  .main-nav {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .nav-icon {
+    display: none;
+  }
+
+  .sort-row {
+    grid-template-columns: 1fr;
+  }
+
+  .editor-pane > textarea,
+  .markdown-preview {
+    min-height: 360px;
+  }
+}
--- a/src/types.ts
+++ b/src/types.ts
@@ -0,0 +1,71 @@
+export type PanelKey = "connect" | "content" | "structure" | "config" | "publish";
+export type EditorMode = "write" | "preview";
+export type DataSource = "local" | "github";
+
+export interface DocPage {
+  id: string;
+  title: string;
+  path: string;
+  description: string;
+  content: string;
+  sha?: string;
+}
+
+export interface NavItem {
+  id: string;
+  label: string;
+  link: string;
+}
+
+export interface SidebarGroup {
+  id: string;
+  title: string;
+  items: Array<{
+    id: string;
+    label: string;
+    link: string;
+  }>;
+}
+
+export interface SiteSettings {
+  title: string;
+  description: string;
+  logo: string;
+  lastUpdated: boolean;
+  localSearch: boolean;
+  outline: boolean;
+  socialKind: string;
+  socialLink: string;
+}
+
+export interface GitHubConnection {
+  token: string;
+  owner: string;
+  repo: string;
+  branch: string;
+  siteRoot: string;
+}
+
+export interface GitHubUser {
+  login: string;
+  avatarUrl?: string;
+  name?: string;
+}
+
+export interface CmsUser {
+  id: number;
+  email?: string;
+  name: string;
+  avatarUrl?: string;
+  role: "system_admin" | "user" | string;
+}
+
+export interface GitHubRepository {
+  id: number;
+  fullName: string;
+  owner: string;
+  name: string;
+  private: boolean;
+  defaultBranch: string;
+  updatedAt: string;
+}
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@@ -0,0 +1,27 @@
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export function markdownToHtml(markdown: string) {
+  return markdown
+    .split("\n")
+    .map((rawLine) => {
+      const line = escapeHtml(rawLine);
+
+      if (line.startsWith("### ")) return `<h3>${line.slice(4)}</h3>`;
+      if (line.startsWith("## ")) return `<h2>${line.slice(3)}</h2>`;
+      if (line.startsWith("# ")) return `<h1>${line.slice(2)}</h1>`;
+      if (line.startsWith("- ")) return `<p class="preview-list">• ${line.slice(2)}</p>`;
+      if (/^\d+\.\s/.test(line)) return `<p class="preview-list">${line}</p>`;
+      if (line.startsWith("&gt; ")) return `<blockquote>${line.slice(5)}</blockquote>`;
+      if (!line.trim()) return "";
+
+      return `<p>${line}</p>`;
+    })
+    .join("");
+}
--- a/src/utils/siteContent.ts
+++ b/src/utils/siteContent.ts
@@ -0,0 +1,113 @@
+import type { SiteSettings } from "../types";
+
+export function parseFrontmatter(source: string) {
+  const match = source.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+
+  if (!match) {
+    return {
+      title: "",
+      description: "",
+      content: source,
+    };
+  }
+
+  const frontmatter = match[1];
+  const title = frontmatter.match(/^title:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+  const description =
+    frontmatter.match(/^description:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+
+  return {
+    title,
+    description,
+    content: source.slice(match[0].length),
+  };
+}
+
+export function stringifyMarkdownPage(page: {
+  title: string;
+  description: string;
+  content: string;
+}) {
+  const frontmatter = [
+    "---",
+    `title: ${page.title || "未命名页面"}`,
+    `description: ${page.description || ""}`,
+    "---",
+    "",
+  ].join("\n");
+
+  return `${frontmatter}${page.content.trimStart()}`;
+}
+
+function readStringValue(source: string, key: string, fallback = "") {
+  const pattern = new RegExp(`${key}:\\s*["'\`]([^"'\`]+)["'\`]`);
+  return source.match(pattern)?.[1] ?? fallback;
+}
+
+function readBooleanValue(source: string, key: string, fallback = false) {
+  const pattern = new RegExp(`${key}:\\s*(true|false)`);
+  const value = source.match(pattern)?.[1];
+  return value ? value === "true" : fallback;
+}
+
+export function parseSiteSettings(source: string): SiteSettings {
+  const socialLinksSource = source.match(/socialLinks:\s*\[([\s\S]*?)\]/)?.[1] ?? "";
+
+  return {
+    title: readStringValue(source, "title", "VitePress Site"),
+    description: readStringValue(source, "description"),
+    logo: readStringValue(source, "logo", "/logo.svg"),
+    lastUpdated: readBooleanValue(source, "lastUpdated", true),
+    localSearch: /search:\s*{[\s\S]*?provider:\s*["']local["'][\s\S]*?}/.test(source),
+    outline: readBooleanValue(source, "outline", true),
+    socialKind: readStringValue(socialLinksSource, "icon", "github"),
+    socialLink: readStringValue(socialLinksSource, "link", "https://github.com/example/vitepress-cms"),
+  };
+}
+
+export function stringifySiteConfig(settings: SiteSettings) {
+  const searchConfig = settings.localSearch
+    ? `    search: {
+      provider: "local",
+    },`
+    : "";
+
+  return `import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  title: ${JSON.stringify(settings.title)},
+  description: ${JSON.stringify(settings.description)},
+  lastUpdated: ${settings.lastUpdated},
+  themeConfig: {
+    logo: ${JSON.stringify(settings.logo)},
+    outline: ${settings.outline},
+    nav: [
+      { text: "首页", link: "/" },
+      { text: "指南", link: "/guide/getting-started" },
+      { text: "配置", link: "/guide/config" },
+      { text: "更新日志", link: "/changelog" },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          text: "指南",
+          items: [
+            { text: "快速开始", link: "/guide/getting-started" },
+            { text: "页面管理", link: "/guide/pages" },
+            { text: "配置说明", link: "/guide/config" },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: ${JSON.stringify(settings.socialKind)}, link: ${JSON.stringify(settings.socialLink)} },
+    ],
+    footer: {
+      message: "Powered by VitePress-CMS",
+      copyright: "Copyright 2026",
+    },
+${searchConfig}
+  },
+});
+`;
+}
--- a/test-vitepress/.vitepress/config.ts
+++ b/test-vitepress/.vitepress/config.ts
@@ -0,0 +1,38 @@
+import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  title: "VitePress CMS Test",
+  description: "A local VitePress site used by VitePress-CMS for integration tests.",
+  lastUpdated: true,
+  themeConfig: {
+    logo: "/logo.svg",
+    nav: [
+      { text: "首页", link: "/" },
+      { text: "指南", link: "/guide/getting-started" },
+      { text: "配置", link: "/guide/config" },
+      { text: "更新日志", link: "/changelog" },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          text: "指南",
+          items: [
+            { text: "快速开始", link: "/guide/getting-started" },
+            { text: "页面管理", link: "/guide/pages" },
+            { text: "配置说明", link: "/guide/config" },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: "github", link: "https://github.com/example/vitepress-cms" },
+    ],
+    footer: {
+      message: "Powered by VitePress-CMS",
+      copyright: "Copyright 2026",
+    },
+    search: {
+      provider: "local",
+    },
+  },
+});
--- a/test-vitepress/README.md
+++ b/test-vitepress/README.md
@@ -0,0 +1,24 @@
+# VitePress CMS Test Site
+
+这是一个独立的 VitePress 测试站点，用来模拟真实用户项目。
+
+VitePress-CMS 主项目不依赖 VitePress。后续 CMS 会通过文件系统或 GitHub API 读取这个站点的 Markdown 页面和 `.vitepress/config.ts`。
+
+## 本地运行
+
+```bash
+npm install
+npm run dev
+```
+
+默认开发地址：
+
+```text
+http://localhost:5175
+```
+
+## 构建
+
+```bash
+npm run build
+```
--- a/test-vitepress/changelog.md
+++ b/test-vitepress/changelog.md
@@ -0,0 +1,12 @@
+---
+title: 更新日志
+description: 测试站点更新记录
+---
+
+# 更新日志
+
+## v0.1.0
+
+- 创建 VitePress 测试站点
+- 添加导航栏、侧边栏和多篇 Markdown 页面
+- 准备给 VitePress-CMS 做本地读取测试
--- a/test-vitepress/guide/config.md
+++ b/test-vitepress/guide/config.md
@@ -0,0 +1,18 @@
+---
+title: 配置说明
+description: 测试 VitePress 配置解析
+---
+
+# 配置说明
+
+这个页面用于测试 `.vitepress/config.ts` 的读取与回写。
+
+## 第一版优先支持
+
+- `title`
+- `description`
+- `themeConfig.logo`
+- `themeConfig.nav`
+- `themeConfig.sidebar`
+- `themeConfig.socialLinks`
+- `themeConfig.search`
--- a/test-vitepress/guide/getting-started.md
+++ b/test-vitepress/guide/getting-started.md
@@ -0,0 +1,17 @@
+---
+title: 快速开始
+description: 测试站点的快速开始页面
+---
+
+# 快速开始
+
+这个页面用于测试 VitePress-CMS 的 Markdown 编辑体验。
+
+## 编辑流程
+
+1. CMS 读取这个文件。
+2. 用户在后台修改标题、描述和正文。
+3. CMS 将修改保存回 Markdown 文件。
+4. VitePress 重新构建站点。
+
+> 这条链路跑通后，项目就从界面原型进入真实可用阶段。
--- a/test-vitepress/guide/pages.md
+++ b/test-vitepress/guide/pages.md
@@ -0,0 +1,20 @@
+---
+title: 页面管理
+description: 测试页面目录、搜索和新增页面
+---
+
+# 页面管理
+
+这个页面用于测试页面树和文件路径管理。
+
+## 需要覆盖的场景
+
+- 读取嵌套目录
+- 新建 Markdown 页面
+- 重命名页面
+- 删除页面
+- 移动页面位置
+
+## 文件路径
+
+当前文件路径是 `test-vitepress/guide/pages.md`。
--- a/test-vitepress/index.md
+++ b/test-vitepress/index.md
@@ -0,0 +1,20 @@
+---
+title: 首页
+description: VitePress-CMS 测试站点首页
+---
+
+# VitePress CMS Test
+
+这是一个给 VitePress-CMS 使用的本地测试站点。
+
+它用来验证这些能力：
+
+- 扫描 Markdown 页面
+- 解析 frontmatter
+- 读取和修改 `.vitepress/config.ts`
+- 管理导航栏和侧边栏
+- 构建真实 VitePress 站点
+
+## 测试入口
+
+从 [快速开始](/guide/getting-started) 开始查看测试内容。
--- a/test-vitepress/package-lock.json
+++ b/test-vitepress/package-lock.json
--- a/test-vitepress/package.json
+++ b/test-vitepress/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "vitepress-cms-test-site",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "A standalone VitePress site used to test VitePress-CMS integrations.",
+  "scripts": {
+    "dev": "vitepress dev . --host 0.0.0.0 --port 5175",
+    "build": "vitepress build .",
+    "preview": "vitepress preview . --host 0.0.0.0 --port 5176"
+  },
+  "devDependencies": {
+    "vitepress": "^1.6.0"
+  }
+}
--- a/test-vitepress/public/logo.svg
+++ b/test-vitepress/public/logo.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="VC">
+  <rect width="64" height="64" rx="12" fill="#117a72"/>
+  <path d="M14 18h9l9 26 9-26h9L36 50h-8L14 18Z" fill="#fff"/>
+</svg>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,283 @@
+import { createReadStream, promises as fs } from "node:fs";
+import { extname, join, normalize, relative, sep } from "node:path";
+import type { IncomingMessage, ServerResponse } from "node:http";
+import { defineConfig, type Plugin } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+const siteRoot = join(process.cwd(), "test-vitepress");
+
+interface LocalPagePayload {
+  path: string;
+  title: string;
+  description: string;
+  content: string;
+}
+
+interface LocalSiteSettingsPayload {
+  title: string;
+  description: string;
+  logo: string;
+  lastUpdated: boolean;
+  localSearch: boolean;
+  outline: boolean;
+  socialKind: string;
+  socialLink: string;
+}
+
+const configPath = join(siteRoot, ".vitepress", "config.ts");
+
+function isMarkdownPath(filePath: string) {
+  return filePath.endsWith(".md") && !filePath.includes(`${sep}node_modules${sep}`);
+}
+
+function toPosixPath(filePath: string) {
+  return filePath.split(sep).join("/");
+}
+
+function resolveSitePath(relativePath: string) {
+  const normalizedPath = normalize(join(siteRoot, relativePath));
+
+  if (!normalizedPath.startsWith(siteRoot) || !normalizedPath.endsWith(".md")) {
+    throw new Error("Invalid site path");
+  }
+
+  return normalizedPath;
+}
+
+function parseFrontmatter(source: string) {
+  const match = source.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
+
+  if (!match) {
+    return {
+      title: "",
+      description: "",
+      content: source,
+    };
+  }
+
+  const frontmatter = match[1];
+  const title = frontmatter.match(/^title:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+  const description =
+    frontmatter.match(/^description:\s*(.+)$/m)?.[1]?.trim().replace(/^["']|["']$/g, "") ?? "";
+
+  return {
+    title,
+    description,
+    content: source.slice(match[0].length),
+  };
+}
+
+function stringifyPage(page: LocalPagePayload) {
+  const frontmatter = [
+    "---",
+    `title: ${page.title || "未命名页面"}`,
+    `description: ${page.description || ""}`,
+    "---",
+    "",
+  ].join("\n");
+
+  return `${frontmatter}${page.content.trimStart()}`;
+}
+
+function readStringValue(source: string, key: string, fallback = "") {
+  const pattern = new RegExp(`${key}:\\s*["'\`]([^"'\`]+)["'\`]`);
+  return source.match(pattern)?.[1] ?? fallback;
+}
+
+function readBooleanValue(source: string, key: string, fallback = false) {
+  const pattern = new RegExp(`${key}:\\s*(true|false)`);
+  const value = source.match(pattern)?.[1];
+  return value ? value === "true" : fallback;
+}
+
+function parseSiteSettings(source: string): LocalSiteSettingsPayload {
+  const socialLinksSource = source.match(/socialLinks:\s*\[([\s\S]*?)\]/)?.[1] ?? "";
+
+  return {
+    title: readStringValue(source, "title", "VitePress Site"),
+    description: readStringValue(source, "description"),
+    logo: readStringValue(source, "logo", "/logo.svg"),
+    lastUpdated: readBooleanValue(source, "lastUpdated", true),
+    localSearch: /search:\s*{[\s\S]*?provider:\s*["']local["'][\s\S]*?}/.test(source),
+    outline: readBooleanValue(source, "outline", true),
+    socialKind: readStringValue(socialLinksSource, "icon", "github"),
+    socialLink: readStringValue(socialLinksSource, "link", "https://github.com/example/vitepress-cms"),
+  };
+}
+
+function stringifySiteConfig(settings: LocalSiteSettingsPayload) {
+  const searchConfig = settings.localSearch
+    ? `    search: {
+      provider: "local",
+    },`
+    : "";
+
+  return `import { defineConfig } from "vitepress";
+
+export default defineConfig({
+  title: ${JSON.stringify(settings.title)},
+  description: ${JSON.stringify(settings.description)},
+  lastUpdated: ${settings.lastUpdated},
+  themeConfig: {
+    logo: ${JSON.stringify(settings.logo)},
+    outline: ${settings.outline},
+    nav: [
+      { text: "首页", link: "/" },
+      { text: "指南", link: "/guide/getting-started" },
+      { text: "配置", link: "/guide/config" },
+      { text: "更新日志", link: "/changelog" },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          text: "指南",
+          items: [
+            { text: "快速开始", link: "/guide/getting-started" },
+            { text: "页面管理", link: "/guide/pages" },
+            { text: "配置说明", link: "/guide/config" },
+          ],
+        },
+      ],
+    },
+    socialLinks: [
+      { icon: ${JSON.stringify(settings.socialKind)}, link: ${JSON.stringify(settings.socialLink)} },
+    ],
+    footer: {
+      message: "Powered by VitePress-CMS",
+      copyright: "Copyright 2026",
+    },
+${searchConfig}
+  },
+});
+`;
+}
+
+async function collectMarkdownFiles(dir: string): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  const nestedFiles = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = join(dir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (entry.name === "node_modules" || entry.name === ".vitepress") {
+          return [];
+        }
+
+        return collectMarkdownFiles(entryPath);
+      }
+
+      return isMarkdownPath(entryPath) ? [entryPath] : [];
+    }),
+  );
+
+  return nestedFiles.flat();
+}
+
+function readRequestBody(request: IncomingMessage) {
+  return new Promise<string>((resolve, reject) => {
+    let body = "";
+    request.on("data", (chunk) => {
+      body += chunk;
+    });
+    request.on("end", () => resolve(body));
+    request.on("error", reject);
+  });
+}
+
+function sendJson(response: ServerResponse, status: number, payload: unknown) {
+  response.statusCode = status;
+  response.setHeader("Content-Type", "application/json; charset=utf-8");
+  response.end(JSON.stringify(payload));
+}
+
+function localSiteApi(): Plugin {
+  return {
+    name: "vitepress-cms-local-site-api",
+    configureServer(server) {
+      server.middlewares.use("/api/local-site/pages", async (request, response) => {
+        try {
+          if (request.method === "GET") {
+            const files = await collectMarkdownFiles(siteRoot);
+            const contentFiles = files.filter((filePath) => {
+              const sitePath = toPosixPath(relative(siteRoot, filePath));
+              return sitePath !== "README.md";
+            });
+            const pages = await Promise.all(
+              contentFiles.sort().map(async (filePath) => {
+                const source = await fs.readFile(filePath, "utf-8");
+                const parsed = parseFrontmatter(source);
+                const path = toPosixPath(relative(siteRoot, filePath));
+
+                return {
+                  id: path,
+                  path,
+                  title: parsed.title || path.replace(/\.md$/, ""),
+                  description: parsed.description,
+                  content: parsed.content,
+                };
+              }),
+            );
+
+            sendJson(response, 200, { pages });
+            return;
+          }
+
+          if (request.method === "PUT") {
+            const payload = JSON.parse(await readRequestBody(request)) as LocalPagePayload;
+            const filePath = resolveSitePath(payload.path);
+            await fs.writeFile(filePath, stringifyPage(payload), "utf-8");
+
+            sendJson(response, 200, { ok: true });
+            return;
+          }
+
+          sendJson(response, 405, { error: "Method not allowed" });
+        } catch (error) {
+          sendJson(response, 500, {
+            error: error instanceof Error ? error.message : "Unknown local site API error",
+          });
+        }
+      });
+
+      server.middlewares.use("/api/local-site/settings", async (request, response) => {
+        try {
+          if (request.method === "GET") {
+            const source = await fs.readFile(configPath, "utf-8");
+            sendJson(response, 200, { settings: parseSiteSettings(source) });
+            return;
+          }
+
+          if (request.method === "PUT") {
+            const settings = JSON.parse(await readRequestBody(request)) as LocalSiteSettingsPayload;
+            await fs.writeFile(configPath, stringifySiteConfig(settings), "utf-8");
+            sendJson(response, 200, { ok: true });
+            return;
+          }
+
+          sendJson(response, 405, { error: "Method not allowed" });
+        } catch (error) {
+          sendJson(response, 500, {
+            error: error instanceof Error ? error.message : "Unknown local site settings API error",
+          });
+        }
+      });
+
+      server.middlewares.use("/api/local-site/assets/", (request, response, next) => {
+        const url = request.url ?? "";
+        const filePath = normalize(join(siteRoot, "public", decodeURIComponent(url)));
+
+        if (!filePath.startsWith(join(siteRoot, "public"))) {
+          sendJson(response, 403, { error: "Forbidden" });
+          return;
+        }
+
+        response.setHeader("Content-Type", extname(filePath) === ".svg" ? "image/svg+xml" : "application/octet-stream");
+        createReadStream(filePath).on("error", next).pipe(response);
+      });
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [localSiteApi(), vue()],
+});