ework-web 0.10.30 → 0.10.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ework-web",
-  "version": "0.10.30",
+  "version": "0.10.31",
   "type": "module",
   "description": "ework-web — standalone multi-project issue tracker. Local SQLite-backed, no external API dependency. Bun + TypeScript + SSR HTML.",
   "license": "MIT",

package/src/index.ts

@@ -611,8 +611,9 @@ async function handle(req: Request, url: URL, ip: string, ctx: { authed: boolean
   if (url.pathname === "/issues") {
     const state = parseState(url.searchParams.get("state"));
     const q = url.searchParams.get("q")?.trim() ?? "";
+    const label = url.searchParams.get("label")?.trim() ?? "";
     try {
-      return html(await buildIssuesFeed(state, q));
+      return html(await buildIssuesFeed(state, q, label));
     } catch (e) {
       return html(errorPage("加载失败", errMsg(e)), e instanceof StoreError ? e.status : 500);
     }
@@ -1891,8 +1892,9 @@ async function handle(req: Request, url: URL, ip: string, ctx: { authed: boolean
     if (!(owner && repo)) return html(errorPage("404", "bad path"), 404);
     const state = parseState(url.searchParams.get("state"));
     const q = url.searchParams.get("q")?.trim() ?? "";
+    const label = url.searchParams.get("label")?.trim() ?? "";
     try {
-      return html(await buildIssueList(owner, repo, state, cfg.writesEnabled, q));
+      return html(await buildIssueList(owner, repo, state, cfg.writesEnabled, q, label));
     } catch (e) {
       return html(errorPage("加载失败", errMsg(e)), e instanceof StoreError ? e.status : 500);
     }

package/src/store.ts

@@ -330,6 +330,7 @@ export async function getIssueWithMeta(projectId: number, number: number): Promi
 export interface ListIssuesOpts {
   state?: "open" | "closed" | "all";
   q?: string;
+  label?: string;
   limit?: number;
 }
 
@@ -351,6 +352,11 @@ export async function listIssues(projectId: number, opts: ListIssuesOpts = {}):
     const like = `%${q.replace(/[%_]/g, (m) => "\\" + m)}%`;
     args.push(like, like);
   }
+  const label = (opts.label ?? "").trim();
+  if (label) {
+    sql += " AND EXISTS (SELECT 1 FROM {{issue_labels}} il JOIN {{labels}} l ON l.id = il.label_id WHERE il.issue_id = i.id AND l.name = ?)";
+    args.push(label);
+  }
   sql += " ORDER BY i.updated_at DESC LIMIT ?";
   args.push(limit);
   return await getDB().all<IssueWithMeta>(sql, args);
@@ -374,6 +380,11 @@ export async function listAllIssues(opts: ListIssuesOpts = {}): Promise<IssueWit
     const like = `%${q.replace(/[%_]/g, (m) => "\\" + m)}%`;
     args.push(like, like, like, like);
   }
+  const label = (opts.label ?? "").trim();
+  if (label) {
+    sql += " AND EXISTS (SELECT 1 FROM {{issue_labels}} il JOIN {{labels}} l ON l.id = il.label_id WHERE il.issue_id = i.id AND l.name = ?)";
+    args.push(label);
+  }
   sql += " ORDER BY i.updated_at DESC LIMIT ?";
   args.push(limit);
   return await getDB().all<IssueWithMeta>(sql, args);
@@ -644,6 +655,43 @@ export async function listLabelsForIssue(issueId: number): Promise<LabelRow[]> {
   );
 }
 
+export async function listLabelsForIssues(issueIds: number[]): Promise<Map<number, LabelRow[]>> {
+  const result = new Map<number, LabelRow[]>();
+  if (issueIds.length === 0) return result;
+  const placeholders = issueIds.map(() => "?").join(",");
+  const rows = await getDB().all<{
+    issue_id: number;
+    label_id: number;
+    name: string;
+    color: string;
+    description: string | null;
+    exclusive: number;
+    is_archived: number;
+  }>(
+    `SELECT il.issue_id, l.id AS label_id, l.name, l.color, l.description, l.exclusive, l.is_archived
+     FROM {{issue_labels}} il JOIN {{labels}} l ON l.id = il.label_id
+     WHERE il.issue_id IN (${placeholders})
+     ORDER BY l.name`,
+    issueIds
+  );
+  for (const r of rows) {
+    const issueId = r.issue_id;
+    const label: LabelRow = {
+      id: r.label_id,
+      project_id: 0,
+      name: r.name,
+      color: r.color,
+      description: r.description ?? "",
+      exclusive: r.exclusive,
+      is_archived: r.is_archived,
+    };
+    const list = result.get(issueId);
+    if (list) list.push(label);
+    else result.set(issueId, [label]);
+  }
+  return result;
+}
+
 export async function getLabel(projectId: number, id: number): Promise<LabelRow | null> {
   return (await getDB().get<LabelRow>("SELECT * FROM {{labels}} WHERE project_id = ? AND id = ?", [projectId, id])) ?? null;
 }

package/src/views/issueList.ts

@@ -1,14 +1,30 @@
 import { THEME_CSS, escapeHtml, escapeAttr, containsCI, highlightAll, tabNavHTML } from "../render/layout";
-import { getProject, listIssues, type IssueWithMeta } from "../store";
+import { getProject, listIssues, listLabelsForIssues, type IssueWithMeta, type LabelRow } from "../store";
 import { relTime } from "../render/components";
 
 export const LIST_PAGE_SIZE = 50;
 
-function issueRow(it: IssueWithMeta, owner: string, repo: string, q: string): string {
+function labelChip(label: LabelRow, owner: string, repo: string, state: string): string {
+  const href = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=${state}&label=${encodeURIComponent(label.name)}`;
+  return `<a class="issue-label" href="${escapeAttr(href)}" style="background:${escapeAttr(label.color)}" title="${escapeAttr(label.description ?? "")}">${escapeHtml(label.name)}</a>`;
+}
+
+function issueRow(
+  it: IssueWithMeta,
+  owner: string,
+  repo: string,
+  q: string,
+  state: string,
+  labels: LabelRow[],
+): string {
   const href = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues/${it.number}`;
   const title = q ? highlightAll(it.title, q) : escapeHtml(it.title);
+  const chips = labels.length
+    ? `<div class="row-labels">${labels.map((l) => labelChip(l, owner, repo, state)).join("")}</div>`
+    : "";
   return `<a class="row" href="${escapeAttr(href)}">
     <div class="row-title">${title}</div>
+    ${chips}
     <div class="row-meta">#${it.number} · 💬 ${it.comment_count} · ${relTime(it.updated_at)}</div>
   </a>`;
 }
@@ -18,13 +34,15 @@ export async function buildIssueList(
   repo: string,
   state: "open" | "closed" | "all",
   writesEnabled: boolean,
-  q: string
+  q: string,
+  label: string = "",
 ): Promise<string> {
   const project = await getProject(owner, repo);
   if (!project) {
     return notFoundProject(owner, repo);
   }
-  const issues = await listIssues(project.id, { state, q, limit: LIST_PAGE_SIZE });
+  const issues = await listIssues(project.id, { state, q, label, limit: LIST_PAGE_SIZE });
+  const labelMap = await listLabelsForIssues(issues.map((it) => it.id));
   const matchesFirst = q
     ? [...issues].sort((a, b) => Number(containsCI(b.title, q)) - Number(containsCI(a.title, q)))
     : issues;
@@ -32,11 +50,15 @@ export async function buildIssueList(
   const closedActive = state === "closed" ? " active" : "";
   const allActive = state === "all" ? " active" : "";
   const qParam = q ? `&q=${encodeURIComponent(q)}` : "";
+  const labelParam = label ? `&label=${encodeURIComponent(label)}` : "";
+  const labelFilterHint = label
+    ? `<div class="label-filter">标签: <strong>${escapeHtml(label)}</strong> <a href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=${state}${qParam}" class="label-clear">✕</a></div>`
+    : "";
   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("")
+    ? matchesFirst.map((it) => issueRow(it, owner, repo, q, state, labelMap.get(it.id) ?? [])).join("")
     : `<div class="empty">暂无工单</div>`;
   const searchVal = escapeAttr(q);
   return `<!doctype html>
@@ -57,6 +79,13 @@ export async function buildIssueList(
 .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}
+.row-labels{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
+.issue-label{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:500;color:#fff;text-decoration:none;line-height:18px;white-space:nowrap}
+.issue-label:hover{opacity:.85;text-decoration:none}
+.label-filter{font-size:13px;color:var(--text-muted);margin-bottom:.4rem}
+.label-filter strong{color:var(--text)}
+.label-clear{color:var(--text-muted);text-decoration:none;margin-left:.3rem}
+.label-clear:hover{color:var(--text)}
 </style></head><body>
 <header class="topbar">
   <a href="/" style="color:var(--header-text)">🏠</a>
@@ -71,11 +100,12 @@ ${tabNavHTML("issues")}
     <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>
+    <a class="tab${openActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=open${qParam}${labelParam}">Open</a>
+    <a class="tab${closedActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=closed${qParam}${labelParam}">Closed</a>
+    <a class="tab${allActive}" href="/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=all${qParam}${labelParam}">All</a>
     ${newBtn}
   </div>
+  ${labelFilterHint}
   <div class="rows">${rows}</div>
 </main>
 </body></html>`;

package/src/views/issues.ts

@@ -1,24 +1,35 @@
 import { THEME_CSS, escapeHtml, escapeAttr, containsCI, highlightAll, tabNavHTML } from "../render/layout";
-import { listAllIssues, type IssueWithMeta } from "../store";
+import { listAllIssues, listLabelsForIssues, type IssueWithMeta, type LabelRow } from "../store";
 import { relTime } from "../render/components";
 
 export const FEED_PAGE_SIZE = 50;
 
-function issueRow(it: IssueWithMeta, q: string): string {
+function labelChip(label: LabelRow, owner: string, repo: string, state: string): string {
+  const href = `/${encodeURIComponent(owner)}/${encodeURIComponent(repo)}/issues?state=${state}&label=${encodeURIComponent(label.name)}`;
+  return `<a class="issue-label" href="${escapeAttr(href)}" style="background:${escapeAttr(label.color)}" title="${escapeAttr(label.description ?? "")}">${escapeHtml(label.name)}</a>`;
+}
+
+function issueRow(it: IssueWithMeta, q: string, state: string, labels: LabelRow[]): string {
   const href = `/${encodeURIComponent(it.project_owner)}/${encodeURIComponent(it.project_name)}/issues/${it.number}`;
   const title = q ? highlightAll(it.title, q) : escapeHtml(it.title);
   const projectStr = `${escapeHtml(it.project_owner)}<span style="opacity:.55">/</span>${escapeHtml(it.project_name)}`;
+  const chips = labels.length
+    ? `<div class="row-labels">${labels.map((l) => labelChip(l, it.project_owner, it.project_name, state)).join("")}</div>`
+    : "";
   return `<a class="row" href="${escapeAttr(href)}">
     <div class="row-title">${title}</div>
+    ${chips}
     <div class="row-meta">${projectStr} · #${it.number} · 💬 ${it.comment_count} · ${relTime(it.updated_at)}</div>
   </a>`;
 }
 
 export async function buildIssuesFeed(
   state: "open" | "closed" | "all",
-  q: string
+  q: string,
+  label: string = "",
 ): Promise<string> {
-  const issues = await listAllIssues({ state, q, limit: FEED_PAGE_SIZE });
+  const issues = await listAllIssues({ state, q, label, limit: FEED_PAGE_SIZE });
+  const labelMap = await listLabelsForIssues(issues.map((it) => it.id));
   const matchesFirst = q
     ? [...issues].sort((a, b) => Number(containsCI(b.title, q)) - Number(containsCI(a.title, q)))
     : issues;
@@ -26,8 +37,11 @@ export async function buildIssuesFeed(
   const closedActive = state === "closed" ? " active" : "";
   const allActive = state === "all" ? " active" : "";
   const qParam = q ? `&q=${encodeURIComponent(q)}` : "";
+  const labelFilterHint = label
+    ? `<div class="label-filter">标签: <strong>${escapeHtml(label)}</strong></div>`
+    : "";
   const rows = matchesFirst.length
-    ? matchesFirst.map((it) => issueRow(it, q)).join("")
+    ? matchesFirst.map((it) => issueRow(it, q, state, labelMap.get(it.id) ?? [])).join("")
     : `<div class="empty">暂无工单</div>`;
   return `<!doctype html>
 <html lang="zh"><head><meta charset="utf-8">
@@ -46,6 +60,11 @@ export async function buildIssuesFeed(
 .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}
+.row-labels{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
+.issue-label{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:500;color:#fff;text-decoration:none;line-height:18px;white-space:nowrap}
+.issue-label:hover{opacity:.85;text-decoration:none}
+.label-filter{font-size:13px;color:var(--text-muted);margin-bottom:.4rem}
+.label-filter strong{color:var(--text)}
 </style></head><body>
 <header class="topbar"><span style="font-weight:600">📦 ework</span></header>
 ${tabNavHTML("issues")}
@@ -60,6 +79,7 @@ ${tabNavHTML("issues")}
     <a class="tab${closedActive}" href="/issues?state=closed${qParam}">Closed</a>
     <a class="tab${allActive}" href="/issues?state=all${qParam}">All</a>
   </div>
+  ${labelFilterHint}
   <div class="rows">${rows}</div>
 </main>
 </body></html>`;