ework-web 0.1.0

package/src/translate.ts

@@ -0,0 +1,166 @@
+import type { Config } from "./config";
+
+export class TranslateError extends Error {
+  status: number;
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = "TranslateError";
+    this.status = status;
+  }
+}
+
+const SYSTEM_PROMPT =
+  "Translate the following English text to Simplified Chinese. Preserve ALL markdown formatting (bullet lists with - or *, **bold**, `code`, # headings). Output ONLY the translation, nothing else.";
+const MAX_CHARS = 16_000;
+const TIMEOUT_MS = 60_000;
+
+// OpenAI-compatible chat-completion shapes (vLLM serves /v1/chat/completions).
+interface ChatChoice {
+  message?: { content?: unknown };
+  delta?: { content?: unknown };
+}
+interface ChatResponse {
+  choices?: ChatChoice[];
+  error?: { message?: string } | string;
+}
+
+function endpoint(cfg: Config): string {
+  return `${cfg.translateUrl.replace(/\/$/, "")}/chat/completions`;
+}
+
+export async function translateText(cfg: Config, text: string): Promise<string> {
+  if (!cfg.translateUrl) throw new TranslateError("translation disabled", 503);
+  const body = text.slice(0, MAX_CHARS);
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), TIMEOUT_MS);
+  let res: Response;
+  try {
+    res = await fetch(endpoint(cfg), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: cfg.translateModel,
+        stream: false,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: body },
+        ],
+      }),
+      signal: ctrl.signal,
+    });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : String(e);
+    throw new TranslateError(`translate service unreachable: ${msg}`, 502);
+  } finally {
+    clearTimeout(timer);
+  }
+  if (!res.ok) {
+    const t = await res.text().catch(() => "");
+    throw new TranslateError(`translate service → ${res.status}: ${t.slice(0, 200)}`, 502);
+  }
+  const data = (await res.json()) as ChatResponse;
+  if (data.error) {
+    const m = typeof data.error === "string" ? data.error : data.error.message;
+    throw new TranslateError(m || "translate error", 502);
+  }
+  const content = typeof data.choices?.[0]?.message?.content === "string" ? data.choices[0].message.content : "";
+  if (!content) throw new TranslateError("empty translation response", 502);
+  return content;
+}
+
+// Streaming variant over the OpenAI-compatible /v1/chat/completions (vLLM).
+// vLLM streams Server-Sent-Events: lines `data: {choices:[{delta:{content}}]}`
+// terminated by `data: [DONE]`. Long input is split on sentence boundaries into
+// ~CHUNK_CHARS chunks, each its own request with its own timeout (so total can
+// exceed TIMEOUT_MS); yields are one continuous stream so the caller sees fluent
+// output regardless of input length.
+const CHUNK_CHARS = 2000;
+
+export async function* translateTextStream(cfg: Config, text: string): AsyncGenerator<string> {
+  if (!cfg.translateUrl) throw new TranslateError("translation disabled", 503);
+  for (const chunk of splitChunks(text)) {
+    yield* streamOneChunk(cfg, chunk);
+  }
+}
+
+// Split on the last sentence boundary in the latter half of each max-sized window,
+// so chunks stay readable and boundaries land on 。.!?…\n；;，, rather than mid-word.
+function splitChunks(text: string, max = CHUNK_CHARS): string[] {
+  if (text.length <= max) return [text];
+  const chunks: string[] = [];
+  let start = 0;
+  while (start < text.length) {
+    let end = Math.min(start + max, text.length);
+    if (end < text.length) {
+      const lo = start + Math.floor(max / 2);
+      const window = text.slice(lo, end);
+      const breaks = /[。.!?…！？\n；;，,]/g;
+      let last = -1;
+      let m: RegExpExecArray | null;
+      while ((m = breaks.exec(window)) !== null) last = m.index;
+      if (last >= 0) end = lo + last + 1;
+    }
+    chunks.push(text.slice(start, end));
+    start = end;
+  }
+  return chunks;
+}
+
+async function* streamOneChunk(cfg: Config, chunk: string): AsyncGenerator<string> {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), TIMEOUT_MS);
+  let res: Response;
+  try {
+    res = await fetch(endpoint(cfg), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: cfg.translateModel,
+        stream: true,
+        messages: [
+          { role: "system", content: SYSTEM_PROMPT },
+          { role: "user", content: chunk },
+        ],
+      }),
+      signal: ctrl.signal,
+    });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : String(e);
+    throw new TranslateError(`translate service unreachable: ${msg}`, 502);
+  } finally {
+    clearTimeout(timer);
+  }
+  if (!res.ok || !res.body) {
+    const t = await res.text().catch(() => "");
+    throw new TranslateError(`translate service → ${res.status}: ${t.slice(0, 200)}`, 502);
+  }
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = "";
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    const lines = buf.split("\n");
+    buf = lines.pop() || "";
+    for (const line of lines) {
+      const s = line.trim();
+      if (!s.startsWith("data:")) continue;
+      const payload = s.slice(5).trim();
+      if (payload === "[DONE]") return;
+      if (!payload) continue;
+      let obj: ChatResponse;
+      try {
+        obj = JSON.parse(payload);
+      } catch {
+        continue;
+      }
+      if (obj.error) {
+        const m = typeof obj.error === "string" ? obj.error : obj.error.message;
+        throw new TranslateError(m || "translate error", 502);
+      }
+      const c = typeof obj.choices?.[0]?.delta?.content === "string" ? obj.choices[0].delta.content : "";
+      if (c) yield c;
+    }
+  }
+}

package/src/views/adminTokens.ts

@@ -0,0 +1,122 @@
+import { THEME_CSS, escapeHtml, escapeAttr, tabNavHTML } from "../render/layout";
+import { parsePatIpAllowlist, type PatWithUser, type UserRow } from "../store";
+
+interface Flash {
+  kind: "ok" | "err";
+  msg: string;
+}
+
+function statusBadge(row: PatWithUser): string {
+  if (row.revoked_at) return `<span class="badge revoked">已吊销</span>`;
+  if (row.expires_at && Date.parse(row.expires_at) < Date.now()) {
+    return `<span class="badge expired">已过期</span>`;
+  }
+  return `<span class="badge active">生效中</span>`;
+}
+
+function parseScopes(raw: string): string[] {
+  try {
+    const v = JSON.parse(raw);
+    return Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function buildAdminTokensPage(
+  viewer: UserRow,
+  rows: PatWithUser[],
+  flash: Flash | null,
+): string {
+  const flashHtml = flash ? `<div class="flash ${flash.kind}">${escapeHtml(flash.msg)}</div>` : "";
+  const activeCount = rows.filter((r) => !r.revoked_at && !(r.expires_at && Date.parse(r.expires_at) < Date.now())).length;
+  const revokedCount = rows.length - activeCount;
+  const rowsHtml = rows.length
+    ? `<table>
+<thead><tr><th>名称</th><th>用户</th><th>token</th><th>scopes</th><th>IP</th><th>状态</th><th>最近使用</th><th>创建</th><th>操作</th></tr></thead>
+<tbody>
+${rows
+  .map((r) => {
+    const lastUsed = r.last_used_at ? escapeHtml(r.last_used_at.slice(0, 16).replace("T", " ")) : "—";
+    const scopes = parseScopes(r.scopes).map((s) => `<code>${escapeHtml(s)}</code>`).join(" ") || "—";
+    const ipList = parsePatIpAllowlist(r.ip_allowlist ?? "[]");
+    const ipCell = ipList.length === 0
+      ? `<span class="muted">全部</span>`
+      : ipList.map((c) => `<code class="cidr">${escapeHtml(c)}</code>`).join(" ");
+    const userBadges: string[] = [];
+    if (r.user_is_admin === 1) userBadges.push(`<span class="badge admin">admin</span>`);
+    if (r.user_kind === "bot") userBadges.push(`<span class="badge bot">bot</span>`);
+    else if (r.user_kind === "system") userBadges.push(`<span class="badge">system</span>`);
+    if (r.user_is_active === 0) userBadges.push(`<span class="badge inactive">禁用</span>`);
+    const revoked = !!r.revoked_at;
+    const ownerNote = r.user_login === viewer.login ? `<span class="meta">(你)</span>` : "";
+    return `<tr>
+<td class="name">${escapeHtml(r.name)}</td>
+<td class="user">${escapeHtml(r.user_login)} ${ownerNote} ${userBadges.join(" ")}</td>
+<td class="tok"><code>…${escapeHtml(r.token_last_eight)}</code></td>
+<td class="scopes">${scopes}</td>
+<td class="ip">${ipCell}</td>
+<td>${statusBadge(r)}</td>
+<td class="muted">${lastUsed}</td>
+<td class="muted">${escapeHtml(r.created_at.slice(0, 10))}</td>
+<td class="act">${
+      revoked
+        ? ""
+        : `<form method="POST" action="/admin/tokens/${r.id}/revoke"><button type="submit" class="btn-danger" onclick="return confirm('吊销此 token？用户 ${escapeAttr(r.user_login)} 的 agent 会立即失去权限。')">吊销</button></form>`
+    }</td>
+</tr>`;
+  })
+  .join("")}
+</tbody>
+</table>`
+    : `<div class="hint">系统里还没有任何 PAT。</div>`;
+  return `<!doctype html>
+<html lang="zh"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>Token 管理 · ework</title>
+<style>${THEME_CSS}
+.flash{padding:.5rem .7rem;border-radius:6px;font-size:13px;margin-bottom:.8rem}
+.flash.ok{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
+.flash.err{background:color-mix(in srgb,#f85149 18%,transparent);color:#f85149}
+.wrap{max-width:1180px;margin:0 auto;padding:1rem}
+h1{font-size:18px;margin:0 0 .4rem}
+.summary{color:var(--text-muted);font-size:13px;margin:0 0 .8rem}
+.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;margin-bottom:.9rem}
+.card h2{font-size:14px;margin:0 0 .7rem;font-weight:600}
+table{width:100%;border-collapse:collapse;font-size:13px}
+th,td{text-align:left;padding:.55rem .45rem;border-bottom:1px solid var(--border);vertical-align:middle}
+th{color:var(--text-muted);font-weight:600;font-size:12px}
+td.tok code{background:var(--bg);padding:.1rem .35rem;border-radius:4px;border:1px solid var(--border);font-size:12px}
+td.scopes code{background:var(--bg-muted);padding:.05rem .3rem;border-radius:3px;font-size:11px;color:var(--text-muted);margin-right:.2rem}
+td.ip code.cidr{background:var(--bg-muted);padding:.05rem .3rem;border-radius:3px;font-size:11px;color:var(--text-muted);margin-right:.2rem}
+td.ip .muted{color:var(--text-muted);font-size:12px}
+td.name{font-weight:600}
+td.user{font-weight:600;white-space:nowrap}
+td.muted{color:var(--text-muted);font-size:12px;white-space:nowrap}
+td.act button,.btn-danger{padding:.3rem .65rem;border:0;border-radius:4px;background:#f85149;color:#fff;font:inherit;font-size:12px;cursor:pointer}
+.badge{font-size:11px;font-weight:600;padding:.1rem .45rem;border-radius:4px;line-height:1.5}
+.badge.active{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
+.badge.revoked{background:var(--bg-muted);color:var(--text-muted)}
+.badge.expired{background:color-mix(in srgb,#f85149 18%,transparent);color:#f85149}
+.badge.admin{background:color-mix(in srgb,var(--system) 18%,transparent);color:var(--system)}
+.badge.bot{background:color-mix(in srgb,var(--bot) 18%,transparent);color:var(--bot)}
+.badge.inactive{background:#f85149;color:#fff}
+.hint{color:var(--text-muted);font-size:12px;line-height:1.5;margin:.4rem 0}
+.meta{color:var(--text-muted);font-size:11px;font-weight:400}
+</style></head><body>
+<header class="topbar"><span style="font-weight:600">🔑 Token 管理（管理员）</span></header>
+${tabNavHTML("projects", { login: viewer.login, is_admin: viewer.is_admin })}
+<main class="wrap">
+<h1>所有 Personal Access Tokens</h1>
+<p class="summary">共 ${rows.length} 个（生效中 ${activeCount}，已吊销/过期 ${revokedCount}）</p>
+${flashHtml}
+
+<div class="card">
+<h2>Token 列表</h2>
+${rowsHtml}
+</div>
+
+<div class="hint">吊销任意 token 后，使用该 token 的 agent / CLI 会立即失去权限（verifyPat 检查 revoked_at）。用户自己的 token 仍由 <a href="/me/tokens">/me/tokens</a> 自助管理。</div>
+</main></body></html>`;
+}

package/src/views/home.ts

@@ -0,0 +1,109 @@
+import { THEME_CSS, escapeHtml, escapeAttr, tabNavHTML } from "../render/layout";
+import { listProjectsWithCounts, createProject, canAdminProject, StoreError, type ProjectWithCounts, type UserRow } from "../store";
+import { relTime } from "../render/components";
+import { getDefaultUpstreamUrl, webUrlFromClone } from "./projectUpstreams";
+
+function projectCard(p: ProjectWithCounts, viewer: UserRow | null): string {
+  const issuesHref = `/${encodeURIComponent(p.owner)}/${encodeURIComponent(p.name)}/issues`;
+  const settingsHref = `/${encodeURIComponent(p.owner)}/${encodeURIComponent(p.name)}/settings/upstreams`;
+  const desc = p.description ? `<div class="pcard-desc">${escapeHtml(p.description)}</div>` : "";
+  const upstreamClone = getDefaultUpstreamUrl(p);
+  const upstreamWebUrl = upstreamClone ? webUrlFromClone(upstreamClone) : null;
+  const upstreamIcon = upstreamWebUrl
+    ? `<a class="pcard-icon" href="${escapeAttr(upstreamWebUrl)}" target="_blank" rel="noopener noreferrer" title="查看上游：${escapeAttr(upstreamWebUrl)}" aria-label="查看上游">🔗</a>`
+    : "";
+  const adminIcon = canAdminProject(p.id, viewer)
+    ? `<a class="pcard-icon" href="${escapeAttr(settingsHref)}" title="项目设置（上游 / Webhooks / 成员）" aria-label="项目设置">⚙️</a>`
+    : "";
+  const iconsHtml = (upstreamIcon || adminIcon)
+    ? `<span class="pcard-icons">${upstreamIcon}${adminIcon}</span>`
+    : "";
+  return `<div class="pcard">
+    <a class="pcard-stretched" href="${escapeAttr(issuesHref)}" aria-label="${escapeAttr(p.owner + "/" + p.name)} issues"></a>
+    <div class="pcard-title">${escapeHtml(p.owner)}<span style="opacity:.55">/</span>${escapeHtml(p.name)}</div>
+    ${desc}
+    <div class="pcard-meta">
+      <span class="pcard-stats">📂 ${p.total_count} · 🟢 ${p.open_count} · ${relTime(p.updated_at)}</span>
+      ${iconsHtml}
+    </div>
+  </div>`;
+}
+
+export function buildHome(
+  viewer: UserRow | null,
+  flash: { kind: "ok" | "err"; msg: string } | null = null
+): string {
+  const projects = listProjectsWithCounts();
+  const list = projects.length
+    ? projects.map((p) => projectCard(p, viewer)).join("")
+    : `<div class="empty">还没有项目。在下面创建一个：</div>`;
+  const flashHtml = flash
+    ? `<div class="flash ${flash.kind === "ok" ? "ok" : "err"}">${escapeHtml(flash.msg)}</div>`
+    : "";
+  return `<!doctype html>
+<html lang="zh"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>ework-web · 项目</title>
+<style>${THEME_CSS}
+.home-wrap{max-width:900px;margin:0 auto;padding:.6rem 1rem 3rem}
+.pcard{position:relative;display:block;padding:.7rem .9rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;color:var(--text)}
+.pcard:hover{text-decoration:none;border-color:var(--accent)}
+.pcard-stretched{position:absolute;inset:0;z-index:1}
+.pcard-title{font-weight:600;font-size:15px;overflow-wrap:anywhere}
+.pcard-desc{color:var(--text-muted);font-size:13px;margin-top:.2rem;line-height:1.4;overflow-wrap:anywhere}
+.pcard-meta{color:var(--text-muted);font-size:12px;margin-top:.3rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
+.pcard-stats{min-width:0}
+.pcard-icons{display:inline-flex;gap:.3rem;align-items:center;position:relative;z-index:2;margin-left:auto}
+.pcard-icon{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 .35rem;border:1px solid var(--border);border-radius:5px;background:var(--bg-elev);color:var(--text-muted);font-size:13px;text-decoration:none}
+.pcard-icon:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
+.empty{color:var(--text-muted);text-align:center;padding:2rem;font-size:13px}
+.section{margin-top:1.6rem}
+.section h2{font-size:14px;margin:0 0 .6rem;color:var(--text-muted);font-weight:600}
+.new-form{display:flex;flex-direction:column;gap:.5rem;max-width:480px}
+.new-form input,.new-form textarea{background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;font:inherit}
+.new-form textarea{min-height:4em;resize:vertical}
+.new-form button{align-self:flex-start;background:var(--green);color:#fff;border:none;border-radius:8px;padding:.5rem 1rem;font:600 13px system-ui,sans-serif;cursor:pointer}
+.err{color:#f85149;font-size:13px}
+.flash{padding:.55rem .8rem;border-radius:6px;font-size:13px;margin-bottom:.6rem;border:1px solid var(--border)}
+.flash.ok{background:rgba(63,185,80,.12);color:#3fb950;border-color:rgba(63,185,80,.4)}
+.flash.err{background:rgba(248,81,73,.12);color:#f85149;border-color:rgba(248,81,73,.4)}
+</style></head><body>
+<header class="topbar"><span style="font-weight:600">📦 ework</span></header>
+${tabNavHTML("projects")}
+<main class="home-wrap">
+  ${flashHtml}
+  <div class="section">
+    <h2>项目</h2>
+    <div class="pcards">${list}</div>
+  </div>
+  <div class="section">
+    <h2>新建项目</h2>
+    <form class="new-form" method="POST" action="/projects">
+      <input type="text" name="owner" placeholder="owner（必填，字母数字 . _ -）" required pattern="[A-Za-z0-9_.-]+" maxlength="64">
+      <input type="text" name="name" placeholder="name（必填，字母数字 . _ -）" required pattern="[A-Za-z0-9_.-]+" maxlength="64">
+      <textarea name="description" placeholder="一句话描述（可选）"></textarea>
+      <button type="submit">创建</button>
+    </form>
+  </div>
+</main>
+</body></html>`;
+}
+
+export function handleCreateProject(
+  form: Record<string, string | undefined>
+): { location: string; error?: string; projectId?: number } {
+  const owner = (form.owner ?? "").trim();
+  const name = (form.name ?? "").trim();
+  const description = (form.description ?? "").trim();
+  if (!owner || !name) return { location: "/projects", error: "owner 和 name 必填" };
+  try {
+    const p = createProject(owner, name, description);
+    return { location: `/${encodeURIComponent(p.owner)}/${encodeURIComponent(p.name)}/issues`, projectId: p.id };
+  } catch (e) {
+    return {
+      location: "/projects",
+      error: e instanceof StoreError ? e.message : e instanceof Error ? e.message : "创建失败",
+    };
+  }
+}

package/src/views/issueList.ts

@@ -0,0 +1,89 @@
+import { THEME_CSS, escapeHtml, escapeAttr, containsCI, highlightAll, tabNavHTML } from "../render/layout";
+import { getProject, listIssues, type IssueWithMeta } from "../store";
+import { relTime } from "../render/components";
+
+export const LIST_PAGE_SIZE = 50;
+
+function issueRow(it: IssueWithMeta, owner: string, repo: string, q: string): string {
+  const href = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues/${it.number}`;
+  const title = q ? highlightAll(it.title, q) : escapeHtml(it.title);
+  return `<a class="row" href="${escapeAttr(href)}">
+    <div class="row-title">${title}</div>
+    <div class="row-meta">#${it.number} · 💬 ${it.comment_count} · ${relTime(it.updated_at)}</div>
+  </a>`;
+}
+
+export function buildIssueList(
+  owner: string,
+  repo: string,
+  state: "open" | "closed" | "all",
+  writesEnabled: boolean,
+  q: string
+): string {
+  const project = getProject(owner, repo);
+  if (!project) {
+    return notFoundProject(owner, repo);
+  }
+  const issues = listIssues(project.id, { state, q, limit: LIST_PAGE_SIZE });
+  const matchesFirst = q
+    ? [...issues].sort((a, b) => Number(containsCI(b.title, q)) - Number(containsCI(a.title, q)))
+    : issues;
+  const openActive = state === "open" ? " active" : "";
+  const closedActive = state === "closed" ? " active" : "";
+  const allActive = state === "all" ? " active" : "";
+  const qParam = q ? `&q=${encodeURIComponent(q)}` : "";
+  const newBtn = writesEnabled
+    ? `<a class="new-btn" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues/new">+ 新建</a>`
+    : "";
+  const rows = matchesFirst.length
+    ? matchesFirst.map((it) => issueRow(it, owner, repo, q)).join("")
+    : `<div class="empty">暂无工单</div>`;
+  const searchVal = escapeAttr(q);
+  return `<!doctype html>
+<html lang="zh"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>${escapeHtml(owner)}/${escapeHtml(repo)} · Issues</title>
+<style>${THEME_CSS}
+.list-wrap{max-width:900px;margin:0 auto;padding:.4rem 1rem 3rem}
+.search{margin:.4rem 0 .8rem;display:flex;gap:.4rem}
+.search input{flex:1;background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;font:inherit}
+.tabs-sub{display:flex;gap:.3rem;margin-bottom:.6rem;align-items:center}
+.tabs-sub a{padding:.3rem .8rem;border-radius:6px;font-size:13px;color:var(--text-muted)}
+.tabs-sub a.active{background:var(--bg-muted);color:var(--text);font-weight:600}
+.new-btn{margin-left:auto;background:var(--green);color:#fff;padding:.3rem .8rem;border-radius:6px;font-size:13px;font-weight:600}
+.row{display:block;padding:.6rem .2rem;border-bottom:1px solid var(--border);color:var(--text)}
+.row:hover{text-decoration:none;background:var(--bg-muted)}
+.row-title{font-weight:500;overflow-wrap:anywhere}
+.row-meta{color:var(--text-muted);font-size:12px;margin-top:.2rem}
+.empty{color:var(--text-muted);text-align:center;padding:2rem;font-size:13px}
+</style></head><body>
+<header class="topbar">
+  <a href="/" style="color:var(--header-text)">🏠</a>
+  <span style="opacity:.5">/</span>
+  <a href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues" style="color:var(--header-text)">${escapeHtml(owner)}<span style="opacity:.55">/</span>${escapeHtml(repo)}</a>
+</header>
+${tabNavHTML("issues")}
+<main class="list-wrap">
+  <form class="search" method="GET" action="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues">
+    <input type="text" name="q" value="${searchVal}" placeholder="搜索标题/正文…">
+    <input type="hidden" name="state" value="${state}">
+    <button type="submit" class="new-btn" style="background:var(--bg-muted);color:var(--text)">搜索</button>
+  </form>
+  <div class="tabs-sub">
+    <a class="tab${openActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=open${qParam}">Open</a>
+    <a class="tab${closedActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=closed${qParam}">Closed</a>
+    <a class="tab${allActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=all${qParam}">All</a>
+    ${newBtn}
+  </div>
+  <div class="rows">${rows}</div>
+</main>
+</body></html>`;
+}
+
+function notFoundProject(owner: string, repo: string): string {
+  return `<!doctype html><html lang="zh"><head><meta charset="utf-8"><title>项目不存在</title>
+  <style>body{font-family:system-ui,sans-serif;background:#1b1b1b;color:#e6e6e6;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}</style></head>
+  <body><div style="text-align:center"><h2>项目 ${escapeHtml(owner)}/${escapeHtml(repo)} 不存在</h2>
+  <p style="color:#9a9a9a"><a href="/projects" style="color:var(--accent)">← 返回项目列表</a></p></div></body></html>`;
+}

package/src/views/issueNew.ts

@@ -0,0 +1,35 @@
+import { THEME_CSS, escapeHtml, escapeAttr } from "../render/layout";
+
+export function buildIssueNew(owner: string, repo: string, writesEnabled: boolean): string {
+  const listHref = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues`;
+  const action = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues`;
+  const body = writesEnabled
+    ? `<form class="new-form" method="POST" action="${escapeAttr(action)}">
+  <input type="text" name="title" placeholder="标题（必填）" required maxlength="255" class="new-title">
+  <textarea name="body" rows="14" placeholder="正文（支持 Markdown）…"></textarea>
+  <div class="new-actions"><a class="new-cancel" href="${escapeAttr(listHref)}">取消</a><button type="submit">创建工单</button></div>
+</form>`
+    : `<div class="composer-ro">只读模式：创建工单未启用（WORK_WRITES_ENABLED=false）</div>`;
+  return `<!doctype html>
+<html lang="zh"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<title>新建工单 · ${escapeHtml(owner)}/${escapeHtml(repo)}</title>
+<style>${THEME_CSS}
+.new-wrap{max-width:900px;margin:0 auto;padding:.6rem 1rem}
+.new-form{display:flex;flex-direction:column;gap:.6rem}
+.new-title{width:100%;background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem;font:600 16px system-ui,sans-serif}
+.new-form textarea{width:100%;resize:vertical;min-height:14em;background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.6rem .7rem;font:14px/1.55 -apple-system,"PingFang SC",sans-serif}
+.new-actions{display:flex;gap:.6rem;justify-content:flex-end;align-items:center}
+.new-cancel{font-size:13px;color:var(--text-muted)}
+.new-form button{background:var(--green);color:#fff;border:none;border-radius:8px;padding:.55rem 1.2rem;font:600 13px system-ui,sans-serif;cursor:pointer}
+</style></head><body>
+<header class="topbar">
+  <a href="/" style="color:var(--header-text)">🏠</a>
+  <span style="opacity:.5">/</span>
+  <a href="${escapeAttr(listHref)}" style="color:var(--header-text)">${escapeHtml(owner)}<span style="opacity:.55">/</span>${escapeHtml(repo)}</a>
+  <span class="num">新建工单</span>
+</header>
+<main class="new-wrap">${body}</main>
+</body></html>`;
+}