{"id":117,"date":"2025-12-18T15:40:30","date_gmt":"2025-12-18T07:40:30","guid":{"rendered":"https:\/\/zcc609.online\/?p=117"},"modified":"2025-12-18T15:40:30","modified_gmt":"2025-12-18T07:40:30","slug":"%e5%8c%bf%e5%90%8d%e8%ae%ba%e5%9d%9b%e6%8e%a5%e5%85%a5ai%e5%8a%a9%e6%89%8b%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/zcc609.online\/?p=117","title":{"rendered":"\u533f\u540d\u8bba\u575b\u63a5\u5165AI\u52a9\u624b\u603b\u7ed3"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">\u4e00\u3001\u63a5\u5165\u7684\u529f\u80fd\u6a21\u5757<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">1. AI \u5bf9\u8bdd\u529f\u80fd<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u529f\u80fd\u63cf\u8ff0<\/strong>\uff1a\u57fa\u4e8e DeepSeek API \u7684\u667a\u80fd\u5bf9\u8bdd\u52a9\u624b<\/li>\n\n\n\n<li><strong>\u6280\u672f\u5b9e\u73b0<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u540e\u7aef\uff1a\u00a0<code class=\"\">\/api\/ai\/chat<\/code>\u00a0\u63a5\u53e3\uff0cSSE \u6d41\u5f0f\u54cd\u5e94<\/li>\n\n\n\n<li>\u524d\u7aef\uff1a\u00a0<code class=\"\">ChatBot.tsx<\/code>\u00a0+\u00a0<code class=\"\">ChatMessage.tsx<\/code>\u00a0\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u72b6\u6001\u7ba1\u7406\uff1a\u00a0<code class=\"\">AIContext.tsx<\/code>\u00a0\u7ba1\u7406\u4f1a\u8bdd\u3001\u6d88\u606f\u3001\u751f\u6210\u72b6\u6001<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u7279\u6027<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u6d41\u5f0f\u8f93\u51fa\uff0c\u5b9e\u65f6\u663e\u793a AI \u751f\u6210\u8fc7\u7a0b<\/li>\n\n\n\n<li>\u591a\u4f1a\u8bdd\u7ba1\u7406\uff08\u65b0\u5efa\u3001\u5207\u6362\u3001\u5220\u9664\u5bf9\u8bdd\uff09<\/li>\n\n\n\n<li>\u4f1a\u8bdd\u5386\u53f2\u6301\u4e45\u5316\uff08localStorage\uff09<\/li>\n\n\n\n<li>\u7528\u6237\u5934\u50cf\u8c03\u7528\u9879\u76ee\u5934\u50cf\u63a5\u53e3\u663e\u793a<\/li>\n\n\n\n<li>\u7cfb\u7edf\u63d0\u793a\u8bcd\u5305\u542b\u5b8c\u6574\u7684\u8bba\u575b\u529f\u80fd\u8bf4\u660e<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">2. \u5199\u4f5c\u8f85\u52a9\u529f\u80fd<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>6 \u4e2a\u8f85\u52a9\u52a8\u4f5c<\/strong>\uff1a\u52a8\u4f5c\u529f\u80fd\u63d0\u793a\u8bcdpolish\u6da6\u8272\u4f18\u5316\u4f7f\u6587\u5b57\u8868\u8fbe\u66f4\u6d41\u7545\u3001\u66f4\u6709\u6587\u91c7expand\u6269\u5199\u5185\u5bb9\u589e\u52a0\u7ec6\u8282\u548c\u8bba\u8ff0summarize\u7b80\u5316\u7f29\u5199\u63d0\u53d6\u6838\u5fc3\u8981\u70b9grammar\u8bed\u6cd5\u68c0\u67e5\u68c0\u67e5\u8bed\u6cd5\u9519\u8bef\u5e76\u4fee\u6b63title\u751f\u6210\u6807\u9898\u751f\u6210 3-5 \u4e2a\u6807\u9898\u5efa\u8baeoutline\u751f\u6210\u5927\u7eb2\u751f\u6210\u5185\u5bb9\u5927\u7eb2<\/li>\n\n\n\n<li><strong>\u6280\u672f\u5b9e\u73b0<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u540e\u7aef\uff1a\u00a0<code class=\"\">\/api\/ai\/assist<\/code>\u00a0\u63a5\u53e3\uff0cSSE \u6d41\u5f0f\u54cd\u5e94<\/li>\n\n\n\n<li>\u524d\u7aef\uff1a\u00a0<code class=\"\">WritingAssistant.tsx<\/code>\u00a0\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u670d\u52a1\u5c42\uff1a\u00a0<code class=\"\">writingService.ts<\/code>\u00a0\u5c01\u88c5\u6d41\u5f0f\u8bf7\u6c42<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">3. UI \u4ea4\u4e92\u8bbe\u8ba1<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>AI \u4fa7\u8fb9\u680f<\/strong>\uff08\u00a0<code class=\"\">AISidebar.tsx<\/code>\u00a0\uff09\uff1a\n<ul class=\"wp-block-list\">\n<li>\u53f3\u4fa7\u53ef\u5c55\u5f00\/\u6536\u8d77\u7684\u62bd\u5c49\u5f0f\u9762\u677f<\/li>\n\n\n\n<li>\u4e24\u4e2a Tab\uff1a\u4eba\u5de5\u667a\u80fd\u5bf9\u8bdd \/ \u5199\u4f5c\u8f85\u52a9<\/li>\n\n\n\n<li>\u60ac\u6d6e\u89e6\u53d1\u6309\u94ae\uff08\u00a0<code class=\"\">AIToggleButton.tsx<\/code>\u00a0\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5bf9\u8bdd\u754c\u9762<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u4f1a\u8bdd\u4e0b\u62c9\u9009\u62e9\u5668\uff08\u652f\u6301\u5207\u6362\u548c\u5220\u9664\uff09<\/li>\n\n\n\n<li>\u5feb\u6377\u63d0\u95ee\u6309\u94ae<\/li>\n\n\n\n<li>\u6d88\u606f\u6c14\u6ce1\u6837\u5f0f\uff08\u7528\u6237\u7d2b\u8272\/AI \u7070\u8272\uff09<\/li>\n\n\n\n<li>\u505c\u6b62\u751f\u6210\u6309\u94ae<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5199\u4f5c\u8f85\u52a9\u754c\u9762<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>6 \u4e2a\u529f\u80fd\u6309\u94ae\u7f51\u683c\u5e03\u5c40<\/li>\n\n\n\n<li>\u8f93\u5165\u6587\u672c\u6846<\/li>\n\n\n\n<li>\u7ed3\u679c\u663e\u793a\u533a\uff08\u6d41\u5f0f\u8f93\u51fa + \u95ea\u70c1\u5149\u6807\uff09<\/li>\n\n\n\n<li>\u590d\u5236\/\u5e94\u7528\u6309\u94ae<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e8c\u3001\u6280\u672f\u67b6\u6784<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                        \u524d\u7aef (React)                          \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  AIContext.tsx          - \u5168\u5c40\u72b6\u6001\u7ba1\u7406                        \u2502\n\u2502  \u251c\u2500\u2500 sessions           - \u4f1a\u8bdd\u5217\u8868                           \u2502\n\u2502  \u251c\u2500\u2500 currentSession     - \u5f53\u524d\u4f1a\u8bdd                           \u2502\n\u2502  \u251c\u2500\u2500 isGenerating       - \u751f\u6210\u72b6\u6001                           \u2502\n\u2502  \u2514\u2500\u2500 hasApiKey          - API Key \u72b6\u6001                       \u2502\n\u2502                                                             \u2502\n\u2502  ChatBot.tsx            - \u5bf9\u8bdd\u4e3b\u7ec4\u4ef6                          \u2502\n\u2502  ChatMessage.tsx        - \u6d88\u606f\u6c14\u6ce1\u7ec4\u4ef6                        \u2502\n\u2502  WritingAssistant.tsx   - \u5199\u4f5c\u8f85\u52a9\u7ec4\u4ef6                        \u2502\n\u2502  AISidebar.tsx          - \u4fa7\u8fb9\u680f\u5bb9\u5668                          \u2502\n\u2502                                                             \u2502\n\u2502  services\/ai\/                                               \u2502\n\u2502  \u251c\u2500\u2500 deepseek.ts        - API \u8c03\u7528\u5c01\u88c5                       \u2502\n\u2502  \u251c\u2500\u2500 chatService.ts     - \u5bf9\u8bdd\u670d\u52a1 + \u7cfb\u7edf\u63d0\u793a\u8bcd               \u2502\n\u2502  \u2514\u2500\u2500 writingService.ts  - \u5199\u4f5c\u8f85\u52a9\u670d\u52a1                        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n                              \u2502\n                              \u2502 HTTP (SSE)\n                              \u25bc\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                      \u540e\u7aef (Express)                          \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  routes\/ai.ts           - \u8def\u7531\u5b9a\u4e49                           \u2502\n\u2502  \u251c\u2500\u2500 GET  \/check        - \u68c0\u67e5 API Key \u914d\u7f6e                  \u2502\n\u2502  \u251c\u2500\u2500 POST \/chat         - AI \u5bf9\u8bdd\uff08\u6d41\u5f0f\uff09                    \u2502\n\u2502  \u2514\u2500\u2500 POST \/assist       - \u5199\u4f5c\u8f85\u52a9\uff08\u6d41\u5f0f\uff09                   \u2502\n\u2502                                                             \u2502\n\u2502  controllers\/aiController.ts - \u63a7\u5236\u5668                        \u2502\n\u2502  \u251c\u2500\u2500 checkApiKey()      - \u68c0\u67e5\u914d\u7f6e                           \u2502\n\u2502  \u251c\u2500\u2500 chat()             - \u5bf9\u8bdd\u5904\u7406                           \u2502\n\u2502  \u2514\u2500\u2500 assist()           - \u5199\u4f5c\u8f85\u52a9\u5904\u7406                        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n                              \u2502\n                              \u2502 HTTP (SSE)\n                              \u25bc\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                    AI API (SiliconFlow)                      \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  URL: https:\/\/api.siliconflow.cn\/v1\/chat\/completions        \u2502\n\u2502  Model: deepseek-ai\/DeepSeek-V3                             \u2502\n\u2502  Stream: true                                               \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u4e09\u3001\u9047\u5230\u7684\u6280\u672f\u95ee\u9898\u53ca\u89e3\u51b3\u65b9\u6848<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u95ee\u9898 1\uff1a\u540e\u7aef\u6d41\u5f0f\u54cd\u5e94\u4f46\u524d\u7aef\u4e00\u6b21\u6027\u663e\u793a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u73b0\u8c61<\/strong>\uff1a\u540e\u7aef\u4ece AI API \u6536\u5230\u6d41\u5f0f\u6570\u636e\uff0c\u4f46\u524d\u7aef\u7b49\u5168\u90e8\u5b8c\u6210\u624d\u663e\u793a<\/li>\n\n\n\n<li><strong>\u539f\u56e0<\/strong>\uff1a\u540e\u7aef\u6536\u96c6\u5b8c\u6574\u7ed3\u679c\u540e\u624d\u8c03\u7528\u00a0<code class=\"\">res.json()<\/code>\u00a0\u8fd4\u56de<\/li>\n\n\n\n<li><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a<strong>typescript<\/strong><code>\/\/ \u540e\u7aef\u6539\u4e3a SSE \u6d41\u5f0f\u54cd\u5e94 res.setHeader('Content-Type', 'text\/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); res.setHeader('X-Accel-Buffering', 'no'); \/\/ \u6bcf\u6536\u5230 chunk \u7acb\u5373\u53d1\u9001 res.write(`data: ${JSON.stringify({ content })}\\n\\n`);<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u95ee\u9898 2\uff1aSSE \u6570\u636e\u6ca1\u6709\u7acb\u5373\u53d1\u9001\u5230\u524d\u7aef<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u73b0\u8c61<\/strong>\uff1a\u540e\u7aef\u00a0<code class=\"\">res.write()<\/code>\u00a0\u540e\u6570\u636e\u88ab\u7f13\u51b2\uff0c\u6ca1\u6709\u7acb\u5373\u5230\u8fbe\u524d\u7aef<\/li>\n\n\n\n<li><strong>\u539f\u56e0<\/strong>\uff1aExpress \u54cd\u5e94\u7f13\u51b2\u673a\u5236<\/li>\n\n\n\n<li><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a<strong>typescript<\/strong><code>res.flushHeaders(); \/\/ \u7acb\u5373\u53d1\u9001\u54cd\u5e94\u5934 \/\/ \u5199\u5165\u540e\u5c1d\u8bd5 flush if (typeof (res as any).flush === 'function') { (res as any).flush(); }<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u95ee\u9898 3\uff1a\u524d\u7aef\u6536\u5230\u6d41\u5f0f\u6570\u636e\u4f46 UI \u4e0d\u5b9e\u65f6\u66f4\u65b0<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u73b0\u8c61<\/strong>\uff1a\u63a7\u5236\u53f0\u663e\u793a\u6570\u636e\u6b63\u5728\u63a5\u6536\uff0c\u4f46\u9875\u9762\u4e0d\u66f4\u65b0<\/li>\n\n\n\n<li><strong>\u539f\u56e0<\/strong>\uff1aReact 18 \u81ea\u52a8\u6279\u5904\u7406\uff08Automatic Batching\uff09\u5c06\u591a\u6b21\u00a0<code class=\"\">setState<\/code>\u00a0\u5408\u5e76<\/li>\n\n\n\n<li><strong>\u5c1d\u8bd5\u65b9\u6848 1<\/strong>\uff1a\u4f7f\u7528\u00a0<code class=\"\">flushSync<\/code>\u00a0\u5f3a\u5236\u540c\u6b65\u66f4\u65b0 \u2014\u2014\u00a0<strong>\u65e0\u6548<\/strong><\/li>\n\n\n\n<li><strong>\u6700\u7ec8\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a\u4f7f\u7528\u00a0<code class=\"\">useRef<\/code>\u00a0\u76f4\u63a5\u64cd\u4f5c DOM<strong>typescript<\/strong><code>const resultRef = useRef&lt;HTMLDivElement>(null); \/\/ \u6d41\u5f0f\u56de\u8c03\u4e2d\u76f4\u63a5\u66f4\u65b0 DOM onChunk: (chunk) => { accumulated += chunk; if (resultRef.current) { resultRef.current.textContent = accumulated; } }<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u95ee\u9898 4\uff1aAI \u52a9\u624b\u4e0d\u4e86\u89e3\u9879\u76ee\u5b9e\u9645\u529f\u80fd<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u73b0\u8c61<\/strong>\uff1a\u7528\u6237\u95ee&#8221;\u5982\u4f55\u66f4\u6362\u5934\u50cf&#8221;\uff0cAI \u56de\u7b54&#8221;\u4e0d\u652f\u6301\u81ea\u5b9a\u4e49\u5934\u50cf&#8221;<\/li>\n\n\n\n<li><strong>\u539f\u56e0<\/strong>\uff1a\u7cfb\u7edf\u63d0\u793a\u8bcd\u4e0d\u51c6\u786e\uff0c\u6ca1\u6709\u5305\u542b\u5b8c\u6574\u7684\u529f\u80fd\u8bf4\u660e<\/li>\n\n\n\n<li><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a\u66f4\u65b0\u00a0<code class=\"\">chatService.ts<\/code>\u00a0\u4e2d\u7684\u00a0<code class=\"\">FORUM_ASSISTANT_PROMPT<\/code>\u00a0\uff0c\u8be6\u7ec6\u5217\u51fa\uff1a\n<ul class=\"wp-block-list\">\n<li>\u53d1\u5e16\u529f\u80fd\uff08\u5206\u7c7b\u3001Markdown\u3001\u56fe\u7247\u4e0a\u4f20\u3001\u8349\u7a3f\uff09<\/li>\n\n\n\n<li>\u4e92\u52a8\u529f\u80fd\uff08\u70b9\u8d5e\u3001\u6536\u85cf\u3001\u56de\u590d\u3001\u697c\u4e2d\u697c\uff09<\/li>\n\n\n\n<li>\u4e2a\u4eba\u4e2d\u5fc3\uff08<strong>\u81ea\u5b9a\u4e49\u4e0a\u4f20\u5934\u50cf<\/strong>\u3001\u4fee\u6539\u6635\u79f0\u3001\u67e5\u770b\u8bb0\u5f55\uff09<\/li>\n\n\n\n<li>\u6d88\u606f\u529f\u80fd\uff08\u901a\u77e5\u3001\u79c1\u4fe1\uff09<\/li>\n\n\n\n<li>\u641c\u7d22\u3001\u4e3b\u9898\u5207\u6362\u7b49<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u95ee\u9898 5\uff1a\u5bf9\u8bdd\u5220\u9664\u6309\u94ae\u4e0d\u663e\u793a<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u73b0\u8c61<\/strong>\uff1a\u4e0b\u62c9\u83dc\u5355\u4e2d\u7684\u5220\u9664\u6309\u94ae\u770b\u4e0d\u5230<\/li>\n\n\n\n<li><strong>\u539f\u56e0<\/strong>\uff1a\u00a0<code class=\"\">opacity: 0<\/code>\u00a0+\u00a0<code class=\"\">group-hover:opacity-100<\/code>\u00a0\u7684 Tailwind \u7c7b\u5728\u5185\u8054\u6837\u5f0f\u7ec4\u4ef6\u4e2d\u4e0d\u751f\u6548<\/li>\n\n\n\n<li><strong>\u89e3\u51b3\u65b9\u6848<\/strong>\uff1a\u6539\u7528\u5185\u8054\u6837\u5f0f +\u00a0<code class=\"\">onMouseEnter\/onMouseLeave<\/code>\u00a0\u4e8b\u4ef6\u63a7\u5236\u900f\u660e\u5ea6<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u56db\u3001\u5173\u952e\u914d\u7f6e<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u73af\u5883\u53d8\u91cf\uff08\u540e\u7aef&nbsp;<code class=\"\">.env<\/code>&nbsp;\uff09<\/h4>\n\n\n\n<p><strong>env<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nAI_API_URL=https:\/\/api.siliconflow.cn\nAI_API_KEY=sk-xxx\nAI_MODEL=deepseek-ai\/DeepSeek-V3\n\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">\u524d\u7aef API \u5730\u5740<\/h4>\n\n\n\n<p><strong>typescript<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst API_BASE = import.meta.env.VITE_API_URL || '\/api';\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u4e94\u3001\u6587\u4ef6\u6e05\u5355<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6587\u4ef6\u8def\u5f84<\/th><th>\u8bf4\u660e<\/th><\/tr><\/thead><tbody><tr><td><code>backend\/src\/controllers\/aiController.ts<\/code><\/td><td>AI \u63a5\u53e3\u63a7\u5236\u5668<\/td><\/tr><tr><td><code>backend\/src\/routes\/ai.ts<\/code><\/td><td>AI \u8def\u7531\u5b9a\u4e49<\/td><\/tr><tr><td><code>src\/contexts\/AIContext.tsx<\/code><\/td><td>AI \u5168\u5c40\u72b6\u6001\u7ba1\u7406<\/td><\/tr><tr><td><code>src\/components\/ai\/AISidebar.tsx<\/code><\/td><td>AI \u4fa7\u8fb9\u680f\u5bb9\u5668<\/td><\/tr><tr><td><code>src\/components\/ai\/AIToggleButton.tsx<\/code><\/td><td>\u4fa7\u8fb9\u680f\u89e6\u53d1\u6309\u94ae<\/td><\/tr><tr><td><code>src\/components\/ai\/ChatBot.tsx<\/code><\/td><td>\u5bf9\u8bdd\u4e3b\u7ec4\u4ef6<\/td><\/tr><tr><td><code>src\/components\/ai\/ChatMessage.tsx<\/code><\/td><td>\u6d88\u606f\u6c14\u6ce1\u7ec4\u4ef6<\/td><\/tr><tr><td><code>src\/components\/ai\/WritingAssistant.tsx<\/code><\/td><td>\u5199\u4f5c\u8f85\u52a9\u7ec4\u4ef6<\/td><\/tr><tr><td><code>src\/services\/ai\/deepseek.ts<\/code><\/td><td>API \u8c03\u7528\u5c01\u88c5<\/td><\/tr><tr><td><code>src\/services\/ai\/chatService.ts<\/code><\/td><td>\u5bf9\u8bdd\u670d\u52a1 + \u7cfb\u7edf\u63d0\u793a\u8bcd<\/td><\/tr><tr><td><code>src\/services\/ai\/writingService.ts<\/code><\/td><td>\u5199\u4f5c\u8f85\u52a9\u670d\u52a1<\/td><\/tr><tr><td><code>src\/types\/ai.ts<\/code><\/td><td>AI \u76f8\u5173\u7c7b\u578b\u5b9a\u4e49<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u516d\u3001\u529f\u80fd\u622a\u56fe<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"1024\" src=\"https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043558-380x1024.png\" alt=\"\" class=\"wp-image-118\" srcset=\"https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043558-380x1024.png 380w, https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043558-111x300.png 111w, https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043558.png 824w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"1024\" src=\"https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043602-356x1024.png\" alt=\"\" class=\"wp-image-119\" srcset=\"https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043602-356x1024.png 356w, https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043602-104x300.png 104w, https:\/\/zcc609.online\/wp-content\/uploads\/2025\/12\/Clipboard_Screenshot_1766043602.png 776w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u3001\u63a5\u5165\u7684\u529f\u80fd\u6a21\u5757 1. AI \u5bf9\u8bdd\u529f\u80fd 2. \u5199\u4f5c\u8f85\u52a9\u529f\u80fd 3. UI \u4ea4\u4e92\u8bbe\u8ba1 \u4e8c\u3001\u6280\u672f\u67b6\u6784 \u4e09\u3001\u9047\u5230\u7684\u6280 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/zcc609.online\/?p=117\" class=\"more-link\">Read more<span class=\"screen-reader-text\"> &#8220;\u533f\u540d\u8bba\u575b\u63a5\u5165AI\u52a9\u624b\u603b\u7ed3&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-117","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zcc609.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=117"}],"version-history":[{"count":1,"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/zcc609.online\/index.php?rest_route=\/wp\/v2\/posts\/117\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/zcc609.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zcc609.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zcc609.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}