diff --git a/renderer/public/iconfont.css b/renderer/public/iconfont.css index aa2a20d..fd355cf 100644 --- a/renderer/public/iconfont.css +++ b/renderer/public/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4870215 */ - src: url('iconfont.woff2?t=1743933179660') format('woff2'), - url('iconfont.woff?t=1743933179660') format('woff'), - url('iconfont.ttf?t=1743933179660') format('truetype'); + src: url('iconfont.woff2?t=1744201767604') format('woff2'), + url('iconfont.woff?t=1744201767604') format('woff'), + url('iconfont.ttf?t=1744201767604') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-stop:before { + content: "\e708"; +} + .icon-robot1:before { content: "\e644"; } diff --git a/renderer/public/iconfont.woff2 b/renderer/public/iconfont.woff2 index 95affa0..dbe8675 100644 Binary files a/renderer/public/iconfont.woff2 and b/renderer/public/iconfont.woff2 differ diff --git a/renderer/src/components/main-panel/chat/index.vue b/renderer/src/components/main-panel/chat/index.vue index 6db8829..557f9c3 100644 --- a/renderer/src/components/main-panel/chat/index.vue +++ b/renderer/src/components/main-panel/chat/index.vue @@ -1,10 +1,9 @@ \n\n\n```\n\n---\n\n### 常见问题\n- **语言未高亮？** 检查是否安装了对应的语言包（如 `highlight.js` 可能需要额外加载语言模块）。\n- **样式不生效？** 确认 CSS 文件路径正确且未被其他样式覆盖。\n\n通过以上步骤，`markdown-it` 渲染的代码块将自动支持语法高亮。" - }, - { - "role": "user", - "content": "markdown-it 如何让生成的" - }, - { - "role": "assistant", - "content": "要让 `markdown-it` 生成的代码块支持语法高亮，你需要结合语法高亮库（如 `highlight.js` 或 `Prism.js`）进行配置。以下是详细步骤：\n\n---\n\n## **1. 安装依赖**\n首先，确保安装了 `markdown-it` 和语法高亮库（如 `highlight.js` 或 `Prism.js`）：\n\n### **使用 `highlight.js`**\n```bash\nnpm install markdown-it highlight.js\n```\n### **使用 `Prism.js`**\n```bash\nnpm install markdown-it prismjs\n```\n\n---\n\n## **2. 配置 `markdown-it` 启用语法高亮**\n### **方案 1：使用 `highlight.js`（推荐）**\n```javascript\nconst md = require(\"markdown-it\")({\n highlight: function (str, lang) {\n if (lang && require(\"highlight.js\").getLanguage(lang)) {\n try {\n return require(\"highlight.js\").highlight(str, { language: lang }).value;\n } catch (err) {\n console.error(\"语法高亮失败:\", err);\n }\n }\n return \"\"; // 使用默认的转义\n },\n});\n```\n### **方案 2：使用 `Prism.js`**\n```javascript\nconst md = require(\"markdown-it\")({\n highlight: function (str, lang) {\n if (lang && require(\"prismjs\").languages[lang]) {\n try {\n return require(\"prismjs\").highlight(str, require(\"prismjs\").languages[lang], lang);\n } catch (err) {\n console.error(\"语法高亮失败:\", err);\n }\n }\n return \"\"; // 使用默认的转义\n },\n});\n```\n\n---\n\n## **3. 引入高亮样式**\n语法高亮需要对应的 CSS 样式文件，你可以：\n### **`highlight.js` 样式**\n```html\n\n\n```\n### **`Prism.js` 样式**\n```html\n\n\n```\n\n---\n\n## **4. 渲染 Markdown**\n```javascript\nconst markdownText = `\n\\`\\`\\`javascript\nconsole.log(\"Hello, World!\");\n\\`\\`\\`\n`;\n\nconst htmlOutput = md.render(markdownText);\nconsole.log(htmlOutput);\n```\n输出：\n```html\n
console.log(\"Hello, World!\");
\n```\n\n---\n\n## **5. 在浏览器中使用**\n如果你在前端使用 `markdown-it`，可以这样加载：\n```html\n\n\n\n```\n\n---\n\n## **6. 高级用法**\n### **（1）自定义高亮**\n```javascript\nhighlight: function (str, lang) {\n if (lang === \"mermaid\") {\n return `
${str}
`; // 特殊处理 Mermaid 图表\n }\n // 其他语言的高亮逻辑\n // ...\n}\n```\n### **（2）行号支持**\n使用 `highlight.js` + `highlightjs-line-numbers.js`：\n```html\n\n\n```\n\n---\n\n## **7. 常见问题**\n### **（1）某些语言不高亮？**\n- `highlight.js` 默认只支持部分语言，其他语言需要额外引入：\n ```html\n \n ```\n- `Prism.js` 需要手动加载语言：\n ```javascript\n require(\"prismjs/components/prism-go\");\n ```\n\n### **（2）样式不生效？**\n- 确保 CSS 文件正确加载。\n- 检查是否有其他样式覆盖。\n\n---\n\n## **总结**\n| 步骤 | 操作 |\n|------|------|\n| 1. 安装依赖 | `npm install markdown-it highlight.js` |\n| 2. 配置高亮 | 在 `markdown-it` 的 `highlight` 回调中使用 `highlight.js` 或 `Prism.js` |\n| 3. 引入样式 | 加载对应的 CSS 文件 |\n| 4. 渲染 Markdown | `md.render(\"```js\\nconsole.log('Hi');\\n```\")` |\n| 5. 浏览器支持 | 确保 `hljs.highlightAll()` 执行 |\n\n这样，`markdown-it` 生成的代码块就会自动带有语法高亮！ 🎨" + "content": "Python 的**生成器（Generator）**是一种特殊的迭代器，通过延迟计算（惰性求值）动态生成值，而不是一次性生成所有数据。它的核心实现依赖于 **Python 解释器对函数执行状态的暂停与恢复**，以下是其底层机制和关键实现原理：\n\n---\n\n### 1. **生成器的基本实现**\n当一个函数包含 `yield` 关键字时，Python 会将其编译为**生成器函数**，调用时返回一个生成器对象（而非直接执行函数体）：\n```python\ndef my_generator():\n yield 1\n yield 2\n\ngen = my_generator() # 返回生成器对象，函数体未执行\nprint(next(gen)) # 输出 1，函数执行到第一个 yield 暂停\nprint(next(gen)) # 输出 2，从暂停处恢复执行到下一个 yield\n```\n\n---\n\n### 2. **底层实现原理**\n生成器的核心依赖以下 Python 内部机制：\n\n#### **（1）代码对象（Code Object）**\n- Python 在编译阶段会将生成器函数的字节码标记为 `GENERATOR` 类型，区别于普通函数。\n- 通过 `dis` 模块可查看字节码差异：\n ```python\n import dis\n dis.dis(my_generator)\n ```\n 输出中会看到 `YIELD_VALUE` 操作码，这是生成器的关键指令。\n\n#### **（2）帧对象（Frame Object）**\n- 每次调用生成器函数时，Python 会创建一个**独立的帧对象**（Frame），保存局部变量、执行位置（如 `yield` 的断点）等状态。\n- 生成器暂停时，帧对象会被保留；恢复时，从帧对象中加载状态继续执行。\n\n#### **（3）生成器对象（Generator Object）**\n- 生成器对象是 `PyGenObject`（CPython 实现中的 C 结构体），包含：\n - `gi_frame`：指向当前帧对象的指针。\n - `gi_code`：指向生成器函数的代码对象。\n - `gi_running`：标记生成器是否正在执行。\n\n---\n\n### 3. **关键行为分析**\n#### **（1）状态保存与恢复**\n- 当执行到 `yield` 时，Python 会：\n 1. 保存当前帧的所有状态（局部变量、指令指针等）。\n 2. 返回 `yield` 的值给调用者。\n 3. **暂停执行**，直到下一次调用 `next()` 或 `send()`。\n- 恢复时，从保存的帧状态继续执行。\n\n#### **（2）协程特性**\n生成器可通过 `send()`、`throw()`、`close()` 实现**协程**功能：\n```python\ndef coro():\n x = yield 1 # 接收外部 send 的值\n yield x + 2\n\nc = coro()\nprint(next(c)) # 输出 1\nprint(c.send(10)) # 输出 12（x=10）\n```\n\n---\n\n### 4. **CPython 源码层面的实现**\n在 CPython 中，生成器的核心逻辑位于：\n- **字节码解释器**（`Python/ceval.c`）处理 `YIELD_VALUE` 操作码。\n- **生成器对象**（`Include/genobject.h` 和 `Objects/genobject.c`）：\n ```c\n typedef struct {\n PyObject_HEAD\n PyFrameObject *gi_frame; // 执行帧\n PyObject *gi_code; // 代码对象\n PyObject *gi_weakreflist; // 弱引用列表\n int gi_running; // 是否在运行\n } PyGenObject;\n ```\n\n---\n\n### 5. **与普通迭代器的对比**\n| 特性 | 生成器 | 普通迭代器（如 `list`） |\n|--------------------|--------------------------------|-----------------------------|\n| 内存占用 | 低（逐项生成） | 高（需存储所有数据） |\n| 实现方式 | 函数 + `yield` | 类 + `__iter__`/`__next__` |\n| 状态保存 | 自动由帧对象管理 | 需手动维护状态（如索引） |\n| 延迟计算 | 支持 | 不支持 |\n\n---\n\n### 6. **生成器的应用场景**\n1. **处理大数据流**：逐行读取文件避免内存爆炸。\n ```python\n def read_large_file(file):\n while True:\n line = file.readline()\n if not line:\n break\n yield line\n ```\n2. **无限序列**：如斐波那契数列。\n ```python\n def fibonacci():\n a, b = 0, 1\n while True:\n yield a\n a, b = b, a + b\n ```\n3. **协程与异步编程**：作为早期 Python 协程的基础（现代异步已由 `async/await` 替代）。\n\n---\n\n### 7. **性能优化技巧**\n- **避免多次创建生成器**：重复调用生成器函数会创建新对象，如需复用，可转换为列表或缓存结果。\n- **组合生成器**：使用 `itertools.chain` 合并多个生成器：\n ```python\n import itertools\n gen = itertools.chain(gen1(), gen2())\n ```\n\n---\n\n### 总结\nPython 生成器的本质是**通过 `yield` 暂停函数执行并保存状态**，利用帧对象和字节码指令实现惰性求值。这种设计在内存效率和代码简洁性上具有显著优势，是 Python 迭代器协议的核心实现方式之一。" } ], "settings": {