@mindbase/mindbase 1.0.0

package/src/iconfont/frontend/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [vue()],
+  root: __dirname,
+  build: {
+    outDir: resolve(__dirname, "../dist"),
+    emptyOutDir: true,
+  },
+});

package/src/iconfont/lib/css-generator.js

@@ -0,0 +1,37 @@
+/**
+ * CSS 生成模块
+ * 根据 iconfont.json 生成对应的 CSS 文件
+ */
+
+/**
+ * 生成 iconfont.css 内容
+ * @param {object} json - iconfont.json 数据
+ * @returns {string} CSS 内容
+ */
+export function buildCSS(json) {
+  const t = Date.now();
+  const fontFamily = json.font_family || "iconfont";
+  const prefix = json.css_prefix_text || "icon-";
+
+  let css = `@font-face {\n`;
+  css += `  font-family: "${fontFamily}";\n`;
+  css += `  src: url('iconfont.woff2?t=${t}') format('woff2'),\n`;
+  css += `    url('iconfont.woff?t=${t}') format('woff'),\n`;
+  css += `    url('iconfont.ttf?t=${t}') format('truetype');\n`;
+  css += `}\n\n`;
+  css += `.${fontFamily} {\n`;
+  css += `  font-family: "${fontFamily}" !important;\n`;
+  css += `  font-size: 16px;\n`;
+  css += `  font-style: normal;\n`;
+  css += `  -webkit-font-smoothing: antialiased;\n`;
+  css += `  -moz-osx-font-smoothing: grayscale;\n`;
+  css += `}\n\n`;
+
+  for (const g of json.glyphs) {
+    css += `.${prefix}${g.font_class}:before {\n`;
+    css += `  content: "\\${g.unicode}";\n`;
+    css += `}\n\n`;
+  }
+
+  return css;
+}

package/src/iconfont/lib/font-builder.js

@@ -0,0 +1,82 @@
+/**
+ * 字体构建模块
+ * 从 SVG 文件集合构建完整的 iconfont 字体（TTF/WOFF/WOFF2）
+ */
+
+import { Readable } from "stream";
+import svgicons2svgfont from "svgicons2svgfont";
+import svg2ttf from "svg2ttf";
+import subsetFont from "subset-font";
+
+/**
+ * 将 SVG 集合构建为 SVG font，再转为 TTF Buffer
+ * @param {Array<{unicode: string, svg: string, name: string}>} icons - 图标集合
+ * @param {object} options - 配置
+ * @param {string} options.fontFamily - 字体族名
+ * @param {string} options.cssPrefix - CSS 前缀
+ * @returns {Promise<Buffer>} TTF Buffer
+ */
+export async function buildTtfFromIcons(icons, options) {
+  const fontFamily = options.fontFamily || "iconfont";
+
+  // 1. SVG → SVG font
+  const svgFont = await buildSvgFont(icons, fontFamily);
+
+  // 2. SVG font → TTF
+  const ttf = svg2ttf(svgFont, {});
+  return Buffer.from(ttf.buffer);
+}
+
+/**
+ * 从 TTF Buffer 生成 WOFF 和 WOFF2
+ * @param {Buffer} ttfBuffer - TTF Buffer
+ * @param {Array} glyphs - glyphs 数组（用于构建保留字符）
+ * @returns {Promise<{woff: Buffer, woff2: Buffer}>}
+ */
+export async function buildWebFonts(ttfBuffer, glyphs) {
+  // 构建保留字符文本
+  const keepChars = glyphs
+    .map((g) => String.fromCodePoint(parseInt(g.unicode, 16)))
+    .join("");
+
+  const [woff, woff2] = await Promise.all([
+    subsetFont(ttfBuffer, keepChars, { targetFormat: "woff" }),
+    subsetFont(ttfBuffer, keepChars, { targetFormat: "woff2" }),
+  ]);
+
+  return {
+    woff: Buffer.from(woff),
+    woff2: Buffer.from(woff2),
+  };
+}
+
+/**
+ * 用 svgicons2svgfont 将 SVG 集合转为 SVG font
+ */
+function buildSvgFont(icons, fontFamily) {
+  return new Promise((resolve, reject) => {
+    let output = "";
+
+    const stream = svgicons2svgfont({
+      fontName: fontFamily,
+      fontHeight: 1000,
+      normalize: true,
+      log: () => {},
+    });
+
+    stream.on("data", (chunk) => (output += chunk));
+    stream.on("end", () => resolve(output));
+    stream.on("error", reject);
+
+    for (const icon of icons) {
+      const glyph = Readable.from([icon.svg]);
+      glyph.metadata = {
+        unicode: [String.fromCodePoint(parseInt(icon.unicode, 16))],
+        name: icon.name || icon.unicode,
+      };
+      stream.write(glyph);
+    }
+
+    stream.end();
+  });
+}

package/src/iconfont/lib/glyph-extractor.js

@@ -0,0 +1,69 @@
+/**
+ * 字形提取模块
+ * 从 TTF 字体中提取单个字形路径，转为 SVG
+ */
+
+import opentype from "opentype.js";
+
+/**
+ * 从 TTF Buffer 中提取指定 unicode 的字形，返回 SVG 字符串
+ * @param {Buffer} ttfBuffer - TTF 字体文件 Buffer
+ * @param {string} unicode - 十六进制 unicode（如 "e9e3"）
+ * @returns {string} SVG 内容
+ */
+export function extractGlyphToSvg(ttfBuffer, unicode) {
+  const font = opentype.parse(ttfBuffer.buffer);
+  const codePoint = parseInt(unicode, 16);
+  const glyph = font.glyphs.glyphs.find(
+    (g) => g.unicode === codePoint
+  );
+
+  if (!glyph) {
+    throw new Error(`未找到 unicode: ${unicode} 的字形`);
+  }
+
+  // 获取字形路径，使用 font 的 unitsPerEm 作为 viewBox
+  const unitsPerEm = font.unitsPerEm;
+  const ascender = font.ascender;
+  const path = glyph.getPath(0, ascender, unitsPerEm);
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${unitsPerEm} ${unitsPerEm}">`,
+    `  <path d="${path.toPathData()}"/>`,
+    `</svg>`,
+  ].join("\n");
+}
+
+/**
+ * 从 TTF Buffer 中提取所有字形，每个转为 SVG 字符串
+ * @param {Buffer} ttfBuffer - TTF 字体文件 Buffer
+ * @param {Array} glyphs - iconfont.json 中的 glyphs 数组
+ * @returns {Map<string, string>} unicode → SVG 内容的映射
+ */
+export function extractAllGlyphsToSvg(ttfBuffer, glyphs) {
+  const font = opentype.parse(ttfBuffer.buffer);
+  const result = new Map();
+
+  for (const g of glyphs) {
+    const codePoint = parseInt(g.unicode, 16);
+    const glyph = font.glyphs.glyphs.find(
+      (ft) => ft.unicode === codePoint
+    );
+
+    if (!glyph) continue;
+
+    const unitsPerEm = font.unitsPerEm;
+    const ascender = font.ascender;
+    const path = glyph.getPath(0, ascender, unitsPerEm);
+
+    const svg = [
+      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${unitsPerEm} ${unitsPerEm}">`,
+      `  <path d="${path.toPathData()}"/>`,
+      `</svg>`,
+    ].join("\n");
+
+    result.set(g.unicode, svg);
+  }
+
+  return result;
+}

package/src/iconfont/server/api.js

@@ -0,0 +1,256 @@
+/**
+ * API 路由
+ * 处理 iconfont 读写、SVG 上传、字体构建等请求
+ */
+
+import { promises as fs } from "fs";
+import path from "path";
+import express from "express";
+import { optimize } from "svgo";
+import { buildCSS } from "../lib/css-generator.js";
+import { extractGlyphToSvg, extractAllGlyphsToSvg } from "../lib/glyph-extractor.js";
+import { buildTtfFromIcons, buildWebFonts } from "../lib/font-builder.js";
+
+/**
+ * 创建 API 路由
+ * @param {string} iconfontDir - iconfont 目录路径
+ * @returns {express.Router}
+ */
+export async function createApiRouter(iconfontDir) {
+  const router = express.Router();
+
+  // 文件路径辅助
+  const filePath = (name) => path.join(iconfontDir, name);
+
+  // GET /api/read - 读取 iconfont.json
+  router.get("/read", async (req, res) => {
+    try {
+      const content = await fs.readFile(filePath("iconfont.json"), "utf-8");
+      res.json(JSON.parse(content));
+    } catch (err) {
+      res.status(500).json({ error: `读取 iconfont.json 失败: ${err.message}` });
+    }
+  });
+
+  // GET /api/font - 读取字体文件，支持 ?format=woff2|woff|ttf（保留用于动态加载）
+  router.get("/font", async (req, res) => {
+    try {
+      const format = req.query.format;
+      const searchOrder = format ? [format] : ["woff2", "woff", "ttf"];
+      const mimeMap = {
+        woff2: "font/woff2",
+        woff: "font/woff",
+        ttf: "font/ttf",
+      };
+
+      for (const ext of searchOrder) {
+        const p = filePath(`iconfont.${ext}`);
+        try {
+          const buf = await fs.readFile(p);
+          res.setHeader("Content-Type", mimeMap[ext] || "application/octet-stream");
+          res.setHeader("Cache-Control", "no-cache");
+          res.send(buf);
+          return;
+        } catch {
+          if (format) {
+            // 指定了格式但找不到，返回 404
+            return res.status(404).json({ error: `未找到 iconfont.${ext}` });
+          }
+          continue;
+        }
+      }
+      res.status(404).json({ error: "未找到字体文件" });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // POST /api/save - 保存配置
+  router.post("/save", async (req, res) => {
+    try {
+      const { json: iconJson, generateFont } = req.body;
+
+      // 保存 iconfont.json
+      await fs.writeFile(
+        filePath("iconfont.json"),
+        JSON.stringify(iconJson, null, 2),
+        "utf-8"
+      );
+
+      // 生成并保存 CSS
+      await fs.writeFile(
+        filePath("iconfont.css"),
+        buildCSS(iconJson),
+        "utf-8"
+      );
+
+      // 重建字体文件
+      if (generateFont) {
+        await rebuildFont(iconfontDir, iconJson);
+      }
+
+      res.json({ success: true });
+    } catch (err) {
+      console.error("保存失败:", err);
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // POST /api/upload-svg - 上传 SVG 添加新图标
+  router.post("/upload-svg", async (req, res) => {
+    try {
+      const { svg: rawSvg, name, fontClass } = req.body;
+
+      if (!rawSvg || !rawSvg.includes("<svg")) {
+        return res.status(400).json({ error: "无效的 SVG 内容" });
+      }
+
+      // svgo 优化
+      const result = optimize(rawSvg, {
+        plugins: [
+          "removeDoctype",
+          "removeXMLProcInst",
+          "removeComments",
+          "removeMetadata",
+          "removeEditorsNSData",
+          "cleanupAttrs",
+          "removeStyleElement",
+          "removeEmptyContainers",
+          "convertShapeToPath",
+        ],
+      });
+      const svg = result.data;
+
+      // 读取当前 iconfont.json
+      const currentJson = JSON.parse(
+        await fs.readFile(filePath("iconfont.json"), "utf-8")
+      );
+
+      // 分配 unicode
+      const unicode = nextUnicode(currentJson.glyphs);
+      const iconId = `upload_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+
+      // 添加新图标到 glyphs
+      const newGlyph = {
+        icon_id: iconId,
+        name: name || fontClass || "new-icon",
+        font_class: fontClass || `icon-${unicode}`,
+        unicode,
+        unicode_decimal: parseInt(unicode, 16),
+      };
+
+      currentJson.glyphs.push(newGlyph);
+
+      // 读取当前 TTF，提取已有字形为 SVG
+      let existingSvgs = [];
+      try {
+        const ttfBuf = await fs.readFile(filePath("iconfont.ttf"));
+        const svgMap = extractAllGlyphsToSvg(ttfBuf, currentJson.glyphs.slice(0, -1));
+        existingSvgs = [...svgMap.entries()].map(([unicode, svg]) => ({
+          unicode,
+          svg,
+          name: currentJson.glyphs.find((g) => g.unicode === unicode)?.name || unicode,
+        }));
+      } catch {
+        // 没有 TTF 文件，跳过已有字形提取
+      }
+
+      // 合并：已有 + 新上传
+      const allIcons = [
+        ...existingSvgs,
+        { unicode, svg, name: newGlyph.name },
+      ];
+
+      // 重建字体
+      const ttfBuffer = await buildTtfFromIcons(allIcons, {
+        fontFamily: currentJson.font_family || "iconfont",
+      });
+
+      // 写入 TTF
+      await fs.writeFile(filePath("iconfont.ttf"), ttfBuffer);
+
+      // 生成 WOFF/WOFF2
+      const webFonts = await buildWebFonts(ttfBuffer, currentJson.glyphs);
+      await fs.writeFile(filePath("iconfont.woff"), webFonts.woff);
+      await fs.writeFile(filePath("iconfont.woff2"), webFonts.woff2);
+
+      // 保存 json 和 css
+      await fs.writeFile(
+        filePath("iconfont.json"),
+        JSON.stringify(currentJson, null, 2),
+        "utf-8"
+      );
+      await fs.writeFile(
+        filePath("iconfont.css"),
+        buildCSS(currentJson),
+        "utf-8"
+      );
+
+      res.json({ success: true, glyph: newGlyph, json: currentJson });
+    } catch (err) {
+      console.error("上传 SVG 失败:", err);
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  // GET /api/export-svg/:unicode - 导出单个图标为 SVG
+  router.get("/export-svg/:unicode", async (req, res) => {
+    try {
+      const { unicode } = req.params;
+      const ttfBuf = await fs.readFile(filePath("iconfont.ttf"));
+      const svg = extractGlyphToSvg(ttfBuf, unicode);
+
+      res.setHeader("Content-Type", "image/svg+xml");
+      res.setHeader(
+        "Content-Disposition",
+        `attachment; filename="icon-${unicode}.svg"`
+      );
+      res.send(svg);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
+  return router;
+}
+
+/**
+ * 分配下一个可用的 PUA unicode（E000-F8FF 区段）
+ */
+function nextUnicode(glyphs) {
+  const usedCodes = new Set(
+    glyphs.map((g) => parseInt(g.unicode, 16))
+  );
+  for (let code = 0xe000; code <= 0xf8ff; code++) {
+    if (!usedCodes.has(code)) return code.toString(16);
+  }
+  throw new Error("Unicode PUA 区段已满");
+}
+
+/**
+ * 从当前字形重建字体文件
+ */
+async function rebuildFont(dir, iconJson) {
+  const ttfPath = path.join(dir, "iconfont.ttf");
+
+  // 读取当前 TTF，提取所有字形
+  const ttfBuf = await fs.readFile(ttfPath);
+  const svgMap = extractAllGlyphsToSvg(ttfBuf, iconJson.glyphs);
+
+  const icons = [...svgMap.entries()].map(([unicode, svg]) => ({
+    unicode,
+    svg,
+    name: iconJson.glyphs.find((g) => g.unicode === unicode)?.name || unicode,
+  }));
+
+  // 重建 TTF
+  const newTtf = await buildTtfFromIcons(icons, {
+    fontFamily: iconJson.font_family || "iconfont",
+  });
+  await fs.writeFile(ttfPath, newTtf);
+
+  // 生成 WOFF/WOFF2
+  const webFonts = await buildWebFonts(newTtf, iconJson.glyphs);
+  await fs.writeFile(path.join(dir, "iconfont.woff"), webFonts.woff);
+  await fs.writeFile(path.join(dir, "iconfont.woff2"), webFonts.woff2);
+}

package/src/iconfont/server/index.js

@@ -0,0 +1,64 @@
+/**
+ * Express 服务器
+ * 启动 HTTP 服务，提供 API 和前端静态文件
+ */
+
+import express from "express";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { promises as fs } from "fs";
+import { createApiRouter } from "./api.js";
+import open from "open";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+/**
+ * 创建并启动服务器
+ * @param {{ dir: string, port: number }} options
+ */
+export async function createServer (options) {
+  const { dir, port } = options;
+  const app = express();
+
+  // 解析 JSON body
+  app.use(express.json({ limit: "10mb" }));
+  app.use(express.text({ type: "text/plain", limit: "10mb" }));
+
+  // 静态文件：iconfont 目录挂载到 /public
+  app.use(express.static(dir));
+
+  // /css - 读取 iconfont.css
+  app.get("/css", async (_req, res) => {
+    try {
+      const content = await fs.readFile(`${dir}/iconfont.css`, "utf-8");
+      res.setHeader("Content-Type", "text/css");
+      res.send(content);
+    } catch (err) {
+      res.status(500).send(`读取 iconfont.css 失败: ${err.message}`);
+    }
+  });
+
+  // API 路由
+  const apiRouter = await createApiRouter(dir);
+  app.use("/api", apiRouter);
+
+  // 静态文件（前端构建产物）
+  const distPath = resolve(__dirname, "../dist");
+  app.use(express.static(distPath));
+
+  // SPA 回退
+  app.get("*", (_req, res) => {
+    res.sendFile(resolve(distPath, "index.html"));
+  });
+
+  // 启动
+  app.listen(port, () => {
+    const url = `http://localhost:${port}`;
+    console.log(`\n  iconfont-editor 已启动`);
+    console.log(`  目录: ${dir}`);
+    console.log(`  地址: ${url}\n`);
+    open(url).catch(() => {
+      console.log("  请手动打开浏览器访问上述地址");
+    });
+  });
+}