@templmf/temp-solf-lmf 0.0.161 → 0.0.162

package/server/src/index.js

@@ -0,0 +1,269 @@
+import "dotenv/config"; // 必须放在最前面：opencodeClient.js 在被 import 时就会读取 process.env
+import express from "express";
+import cookieParser from "cookie-parser";
+import crypto from "node:crypto";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { opencode, opencodeBaseUrl, opencodeAuthHeaders } from "./opencodeClient.js";
+import { ownership } from "./ownership.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT || 3000;
+const COOKIE_NAME = "oc_uid";
+
+const app = express();
+app.use(express.json());
+app.use(cookieParser(process.env.COOKIE_SECRET || "dev-secret"));
+app.use(express.static(path.join(__dirname, "..", "public")));
+
+/* ---------------------------------------------------------------------- *
+ * 1. 用户识别
+ *    这是一个演示，用最简单的方式给每个浏览器发一个匿名用户 id（签名 cookie）。
+ *    真实项目里把这一步换成你现有的登录体系即可，
+ *    后面所有隔离逻辑只依赖 req.userId 这一个字段。
+ * ---------------------------------------------------------------------- */
+app.use((req, res, next) => {
+  let uid = req.signedCookies[COOKIE_NAME];
+  if (!uid) {
+    uid = crypto.randomUUID();
+    res.cookie(COOKIE_NAME, uid, {
+      httpOnly: true,
+      signed: true,
+      sameSite: "lax",
+      maxAge: 1000 * 60 * 60 * 24 * 30,
+    });
+  }
+  req.userId = uid;
+  next();
+});
+
+app.get("/api/me", (req, res) => {
+  res.json({ userId: req.userId, opencodeServer: opencodeBaseUrl });
+});
+
+// 可用的 provider / model 列表——这是全局配置，不涉及用户隔离，所有用户共享同一份
+app.get("/api/providers", async (req, res) => {
+  try {
+    const { providers, default: defaults } = await opencode.config.providers();
+    res.json({ providers, defaults });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "获取模型列表失败" });
+  }
+});
+
+/* ---------------------------------------------------------------------- *
+ * 2. session 归属校验中间件
+ *    凡是带 :id 的路由，先确认这个 opencode sessionId 是不是当前用户创建的，
+ *    不是的话直接 403 —— 这就是"同一个 opencode server，session 互不可见"的
+ *    真正落地位置。opencode server 自己没有用户概念，隔离必须在网关层做。
+ * ---------------------------------------------------------------------- */
+function requireOwnedSession(req, res, next) {
+  const { id } = req.params;
+  if (!ownership.owns(req.userId, id)) {
+    return res.status(403).json({ error: "无权访问该 session（不属于当前用户）" });
+  }
+  next();
+}
+
+/* ---------------------------------------------------------------------- *
+ * 3. Session 相关接口
+ * ---------------------------------------------------------------------- */
+
+// 列出当前用户自己的 session（不是 opencode server 上的全部 session）
+app.get("/api/sessions", async (req, res) => {
+  try {
+    const ownedIds = new Set(ownership.listOwnedIds(req.userId));
+    if (ownedIds.size === 0) return res.json([]);
+
+    const all = await opencode.session.list();
+    const mine = all.filter((s) => ownedIds.has(s.id));
+    res.json(mine);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "获取 session 列表失败" });
+  }
+});
+
+// 新建 session，并把归属记录在网关这一侧
+app.post("/api/sessions", async (req, res) => {
+  try {
+    const title = req.body?.title || "新会话";
+    const session = await opencode.session.create({ body: { title } });
+    ownership.claim(req.userId, session.id);
+    res.status(201).json(session);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "创建 session 失败" });
+  }
+});
+
+// 查看某个 session 的历史消息
+app.get("/api/sessions/:id/messages", requireOwnedSession, async (req, res) => {
+  try {
+    const messages = await opencode.session.messages({ path: { id: req.params.id } });
+    res.json(messages);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "获取消息失败" });
+  }
+});
+
+// 发送一条 prompt，等待 opencode 的完整回复
+app.post("/api/sessions/:id/prompt", requireOwnedSession, async (req, res) => {
+  try {
+    const { text, providerID, modelID } = req.body;
+    const body = { parts: [{ type: "text", text }] };
+    if (providerID && modelID) body.model = { providerID, modelID };
+
+    const reply = await opencode.session.prompt({
+      path: { id: req.params.id },
+      body,
+    });
+    res.json(reply);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "发送消息失败" });
+  }
+});
+
+// 中止正在进行的生成（对应 opencode SDK 的 session.abort）
+app.post("/api/sessions/:id/abort", requireOwnedSession, async (req, res) => {
+  try {
+    const ok = await opencode.session.abort({ path: { id: req.params.id } });
+    res.json({ ok });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "中止会话失败" });
+  }
+});
+
+// 删除 session
+app.delete("/api/sessions/:id", requireOwnedSession, async (req, res) => {
+  try {
+    await opencode.session.delete({ path: { id: req.params.id } });
+    ownership.release(req.userId, req.params.id);
+    res.json({ ok: true });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "删除 session 失败" });
+  }
+});
+
+/* ---------------------------------------------------------------------- *
+ * 4. 事件流（SSE）
+ *    opencode server 只对外暴露一条"全局"事件流，里面混着所有用户、所有
+ *    session 的事件。网关订阅这一条全局流一次，然后按 sessionId 找到归属
+ *    用户，只广播给对应用户自己的浏览器连接，做到互不可见。
+ * ---------------------------------------------------------------------- */
+
+/** userId -> Set<res>，同一个用户可能开多个标签页/多条连接 */
+const userConnections = new Map();
+
+function sendToUser(userId, event) {
+  const conns = userConnections.get(userId);
+  if (!conns) return;
+  const payload = `data: ${JSON.stringify(event)}\n\n`;
+  for (const res of conns) res.write(payload);
+}
+
+/** 从 opencode 事件里尽量取出 sessionId（不同事件类型字段名可能不同，按需扩展） */
+function extractSessionId(event) {
+  const p = event.properties || {};
+  return (
+    p.sessionID ||
+    p.sessionId ||
+    p.info?.sessionID ||
+    p.part?.sessionID ||
+    p.session?.id ||
+    null
+  );
+}
+
+async function startGlobalEventBridge() {
+  const debug = true; // 排查阶段先常开，确认没问题后可以改成按需开关
+
+  while (true) {
+    try {
+      const res = await fetch(`${opencodeBaseUrl}/event`, {
+        headers: { ...opencodeAuthHeaders },
+      });
+      if (!res.ok || !res.body) {
+        throw new Error(`订阅事件流失败: HTTP ${res.status}`);
+      }
+      console.log("[opencode] 已连接全局事件流（手写 SSE 解析）");
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        // SSE 帧以空行（\n\n）分隔，一帧里可能有多行，我们只关心 "data:" 那一行
+        let sepIndex;
+        while ((sepIndex = buffer.indexOf("\n\n")) !== -1) {
+          const frame = buffer.slice(0, sepIndex);
+          buffer = buffer.slice(sepIndex + 2);
+
+          const dataLine = frame.split("\n").find((l) => l.startsWith("data:"));
+          if (!dataLine) continue;
+          const jsonText = dataLine.slice(5).trim();
+          if (!jsonText) continue;
+
+          let event;
+          try {
+            event = JSON.parse(jsonText);
+          } catch {
+            if (debug) console.log(`[opencode:raw] 无法解析为 JSON: ${jsonText}`);
+            continue;
+          }
+
+          if (debug) console.log(`[opencode:raw] ${jsonText}`);
+
+          const sessionId = extractSessionId(event);
+          if (!sessionId) continue; // 非 session 相关事件（如心跳）忽略
+          const ownerId = ownership.findOwner(sessionId);
+          if (debug) {
+            console.log(
+              `[opencode:route] session=${sessionId} owner=${ownerId ?? "（无归属记录，事件将被丢弃）"}`
+            );
+          }
+          if (ownerId) sendToUser(ownerId, event);
+        }
+      }
+      console.warn("[opencode] 事件流被服务端关闭，3 秒后重连");
+    } catch (err) {
+      console.error("[opencode] 事件流出错，3 秒后重连:", err.message);
+    }
+    await new Promise((r) => setTimeout(r, 3000));
+  }
+}
+startGlobalEventBridge();
+
+app.get("/api/events", (req, res) => {
+  req.socket.setNoDelay(true); // 关键：SSE 都是频繁的小包，Nagle 算法会把它们攒在一起延迟发送
+  res.set({
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    Connection: "keep-alive",
+  });
+  res.flushHeaders();
+
+  const userId = req.userId;
+  if (!userConnections.has(userId)) userConnections.set(userId, new Set());
+  userConnections.get(userId).add(res);
+
+  res.write(`data: ${JSON.stringify({ type: "connected" })}\n\n`);
+
+  req.on("close", () => {
+    userConnections.get(userId)?.delete(res);
+  });
+});
+
+app.listen(PORT, () => {
+  console.log(`网关已启动: http://localhost:${PORT}`);
+  console.log(`共用的 opencode server: ${opencodeBaseUrl}`);
+});

package/server/src/opencodeClient.js

@@ -0,0 +1,40 @@
+import { createOpencodeClient } from "@opencode-ai/sdk";
+
+const baseUrl = process.env.OPENCODE_SERVER_URL || "http://127.0.0.1:4096";
+const username = process.env.OPENCODE_SERVER_USERNAME;
+const password = process.env.OPENCODE_SERVER_PASSWORD;
+
+// 整个网关进程只建立一个到 opencode server 的连接。
+// 多用户共享这一个连接，隔离逻辑完全在网关层（ownership store）里做，
+// opencode server 本身并不知道"用户"这个概念。
+const fetchOptions = {};
+if (password) {
+  const basic = Buffer.from(`${username || "opencode"}:${password}`).toString("base64");
+  fetchOptions.headers = { Authorization: `Basic ${basic}` };
+}
+
+export const opencode = createOpencodeClient({
+  baseUrl,
+  // data 模式：方法直接返回数据本身，出错时抛异常，方便 try/catch
+  responseStyle: "data",
+  throwOnError: true,
+  fetch: async (input, init) => {
+    const res = await fetch(input, {
+      ...init,
+      headers: { ...(init && init.headers), ...fetchOptions.headers },
+    });
+    if (!res.ok) {
+      // 克隆一份用于打印，避免 body 被消费掉导致 SDK 那边读不到
+      const cloned = res.clone();
+      const text = await cloned.text().catch(() => "<无法读取 body>");
+      console.error(
+        `[opencode] ${init?.method || "GET"} ${input} -> ${res.status} ${res.statusText}\n` +
+          `响应体: ${text}`
+      );
+    }
+    return res;
+  },
+});
+
+export const opencodeAuthHeaders = fetchOptions.headers || {};
+export { baseUrl as opencodeBaseUrl };

package/server/src/ownership.js

@@ -0,0 +1,60 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DATA_DIR = path.join(__dirname, "..", "data");
+const DATA_FILE = path.join(DATA_DIR, "ownership.json");
+
+if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
+if (!fs.existsSync(DATA_FILE)) fs.writeFileSync(DATA_FILE, "{}");
+
+/** @type {Record<string, {sessionIds: string[], name?: string}>} */
+let db = JSON.parse(fs.readFileSync(DATA_FILE, "utf-8"));
+
+function persist() {
+  fs.writeFileSync(DATA_FILE, JSON.stringify(db, null, 2));
+}
+
+function ensureUser(userId) {
+  if (!db[userId]) db[userId] = { sessionIds: [] };
+  return db[userId];
+}
+
+export const ownership = {
+  /** 记录：某个 opencode sessionId 属于某个 userId */
+  claim(userId, sessionId) {
+    const u = ensureUser(userId);
+    if (!u.sessionIds.includes(sessionId)) {
+      u.sessionIds.push(sessionId);
+      persist();
+    }
+  },
+
+  /** 判断某个 session 是否属于该用户 —— 所有跨 session 的访问都要过这一关 */
+  owns(userId, sessionId) {
+    const u = db[userId];
+    return !!u && u.sessionIds.includes(sessionId);
+  },
+
+  /** 该用户拥有的全部 sessionId */
+  listOwnedIds(userId) {
+    return db[userId]?.sessionIds ?? [];
+  },
+
+  /** session 删除后同步移除归属记录 */
+  release(userId, sessionId) {
+    const u = db[userId];
+    if (!u) return;
+    u.sessionIds = u.sessionIds.filter((id) => id !== sessionId);
+    persist();
+  },
+
+  /** 反查某个 sessionId 属于哪个 userId（SSE 广播过滤时要用） */
+  findOwner(sessionId) {
+    for (const [userId, u] of Object.entries(db)) {
+      if (u.sessionIds.includes(sessionId)) return userId;
+    }
+    return null;
+  },
+};

package/SKILL.md

@@ -1,93 +0,0 @@
----
-name: figma-to-css
-description: 将 Figma 节点数据（通过 Figma MCP 获取）转换为 CSS/HTML 时应遵循的规则。当用户提供 Figma 节点 JSON（fills、size、padding、cornerRadius、effects、layoutMode 等字段），要求还原为网页样式、生成 HTML/CSS 代码、或将设计稿转换为前端代码时触发此技能。
----
-
-# Figma 节点 → CSS 转换规则
-
-本技能定义了将 Figma MCP 返回的节点数据字段，映射为 CSS 样式的标准规则。转换代码或手动还原样式时，严格按以下规则执行，不要引入未在规则中说明的默认值或推测行为。
-
-## 1. 填充 Fill（`fills` 字段）
-
-- **非文本节点**：`fills` 代表背景，可能是 image、gradient 或纯色（color）
-  - 转换为对应的 `background` / `background-image` / `background-color`
-  - 若 `fills` 为空数组，**不要**设置任何背景色，不能自动补默认背景
-  - 若填充类型为 image，额外设置 `background-size: contain`
-- **文本节点**：`fills` 代表文字颜色，转换为 `color`
-
-## 2. 盒模型（Box Model）
-
-- 严格遵守 `size` 字段还原元素的 `width` / `height`
-- 严格遵守 `paddingLeft`、`paddingRight`、`paddingTop`、`paddingBottom`，一一对应转换为 CSS 的 `padding-left` / `padding-right` / `padding-top` / `padding-bottom`
-- 不要用简写 `padding` 合并四个方向导致精度丢失，除非四个值恰好相等
-
-## 3. 圆角（Corner Radius）
-
-- `cornerRadius`（单一数值）→ `border-radius`（统一四角）
-- `rectangleCornerRadii`（数组，顺序为 `[topLeft, topRight, bottomRight, bottomLeft]`）→ 按位顺序直接映射：
-  ```css
-  border-radius: {topLeft} {topRight} {bottomRight} {bottomLeft};
-  ```
-  该数组顺序与 CSS `border-radius` 简写的顺时针顺序一致，无需重新排序
-
-## 4. 阴影（Shadow）
-
-- 遍历 `effects` 字段，取其中 `type === 'DROP_SHADOW'` 的项
-- 转换为 CSS `box-shadow`，映射关系：
-  - `offset.x` → `box-shadow` 第一个长度值
-  - `offset.y` → `box-shadow` 第二个长度值
-  - `radius` → 模糊半径（第三个值）
-  - `spread`（若存在）→ 扩散半径（第四个值）
-  - `color`（含透明度）→ 阴影颜色
-- 若存在多个 `DROP_SHADOW`，用逗号拼接为多重阴影
-
-## 5. 布局方式（优先级从高到低）
-
-### 5.1 绝对定位优先
-- 若节点 `layoutPositioning === 'ABSOLUTE'`：
-  - 该节点使用 `position: absolute`
-  - 其父节点必须设置 `position: relative`（作为定位上下文）
-
-### 5.2 无 `layoutMode`：自然布局
-- 节点不存在 `layoutMode` 字段时，使用自然文档流：
-  - 若内部元素为**横向排列**：子元素使用 `display: inline-block` + `vertical-align`（对齐方式），元素间距使用 `margin`（如 `margin-right`）模拟，不使用 `gap`
-  - 若内部元素为**纵向排列**：使用默认块级文档流（块级元素天然纵向堆叠），无需额外设置 display
-
-### 5.3 存在 `layoutMode`：Flex 布局
-- 节点存在 `layoutMode` 字段时，使用 `display: flex`：
-  - `layoutMode: HORIZONTAL` → `flex-direction: row`
-  - `layoutMode: VERTICAL` → `flex-direction: column`
-  - `itemSpacing` → `gap`
-  - `primaryAxisAlignItems` → `justify-content`（主轴对齐）：
-    | Figma 值 | CSS 值 |
-    |---|---|
-    | MIN | flex-start |
-    | CENTER | center |
-    | MAX | flex-end |
-    | SPACE_BETWEEN | space-between |
-  - `counterAxisAlignItems` → `align-items`（交叉轴对齐）：
-    | Figma 值 | CSS 值 |
-    |---|---|
-    | MIN | flex-start |
-    | CENTER | center |
-    | MAX | flex-end |
-    | BASELINE | baseline |
-
-## 6. 特殊节点类型
-
-- `type === 'VECTOR'` 的节点，不做 SVG 内联转换，统一转换为图片引用方式：
-  ```html
-  <img src="xxx.svg" />
-  ```
-
-## 转换检查清单
-
-处理每个节点时，按以下顺序检查并应用规则：
-
-1. 是否 `layoutPositioning === ABSOLUTE`？→ 定位方式
-2. 节点类型是否为 `VECTOR`？→ 转 `<img>` 引用
-3. 是否有 `fills`？→ 区分文本/非文本节点，转背景或颜色
-4. `size` / `paddingLeft` / `paddingRight` / `paddingTop` / `paddingBottom` → 盒模型
-5. `cornerRadius` / `rectangleCornerRadii` → 圆角
-6. `effects` 中的 `DROP_SHADOW` → 阴影
-7. 是否有 `layoutMode`？→ 决定用 flex 还是自然布局，并处理对齐与间距