文档编辑
84 | 88 |
91 |
92 |
93 |
105 | {{p1}}
。\n第二段文字:{{p2}}
" 9 | }, 10 | { 11 | "title": "稿件整体化", 12 | "prompt": "以下写得太细碎了。请你改写这段文字，使其整体性强一些。你不必遵循原文字的结构，可以根据它的内容，重新提炼大纲后再重写，要求情感真挚、用词标准：```{{text}}```" 13 | } 14 | ] -------------------------------------------------------------------------------- /sample/端午的鸭蛋.md: -------------------------------------------------------------------------------- 1 | # 端午的鸭蛋 2 | 3 | 家乡的端午，很多风俗和外地一样。系百索子。五色的丝线拧成小绳，系在手腕上。丝线是掉色的，洗脸时沾了水，手腕上就印得红一道绿一道的。做香角子。丝丝缠成小粽子，里头装了香面，一个一个串起来，挂在帐钩上。贴五毒。红纸剪成五毒，贴在门槛上。贴符。这符是城隍庙送来的。城隍庙的老道士还是我的寄名干爹，他每年端午节前就派小道士送符来，还有两把小纸扇。符送来了，就贴在堂屋的门楣上。一尺来长的黄色、蓝色的纸条，上面用朱笔画些莫名其妙的道道，这就能辟邪么？喝雄黄酒。用酒和的雄黄在孩子的额头上画一个王字，这是很多地方都有的。有一个风俗不知别处有不：放黄烟子。黄烟子是大小如北方的麻雷子的炮仗，只是里面灌的不是硝药，而是雄黄。点着后不响，只是冒出一股黄烟，能冒好一会。把点着的黄烟子丢在橱柜下面，说是可以熏五毒。小孩子点了黄烟子，常把它的一头抵在板壁上写虎字。写黄烟虎字笔画不能断，所以我们那里的孩子都会写草书的“一笔虎”。还有一个风俗，是端午节的午饭要吃“十二红”，就是十二道红颜色的菜。十二红里我只记得有炒红苋菜、油爆虾、咸鸭蛋，其余的都记不清，数不出了。也许十二红只是一个名目，不一定真凑足十二样。不过午饭的菜都是红的，这一点是我没有记错的，而且，苋菜、虾、鸭蛋，一定是有的。这三样，在我的家乡，都不贵，多数人家是吃得起的。 4 | 5 | 我的家乡是水乡。出鸭。高邮大麻鸭是著名的鸭种。鸭多，鸭蛋也多。高邮人也善于腌鸭蛋。高邮咸鸭蛋于是出了名。我在苏南、浙江，每逢有人问起我的籍贯，回答之后，对方就会肃然起敬：“哦！你们那里出咸鸭蛋！”上海的卖腌腊的店铺里也卖咸鸭蛋，必用纸条特别标明：“高邮咸蛋”。高邮还出双黄鸭蛋。别处鸭蛋也偶有双黄的，但不如高邮的多，可以成批输出。双黄鸭蛋味道其实无特别处。还不就是个鸭蛋！只是切开之后，里面圆圆的两个黄，使人惊奇不已。我对异乡人称道高邮鸭蛋，是不大高兴的，好像我们那穷地方就出鸭蛋似的！不过高邮的咸鸭蛋，确实是好，我走的地方不少，所食鸭蛋多矣，但和我家乡的完全不能相比！曾经沧海难为水，他乡咸鸭蛋，我实在瞧不上。袁枚0的《随园食单·小菜单》有“腌蛋”一条。袁子才这个人我不喜欢，他的《食单》好些菜的做法是听来的，他自己并不会做菜。但是《腌蛋》这一条我看后却觉得很亲切，而且“与有荣焉”。文不长，录如下： 6 | 7 | *腌蛋以高邮为佳，颜色细而油多，高文端公最喜食之。席间，先夹取以敬客，放盘中。总宜切开带壳，黄白兼用；不可存黄去白，使味不全，油亦走散。* 8 | 9 | 高邮咸蛋的特点是质细而油多。蛋白柔嫩，不似别处的发干、发粉，入口如嚼石灰。油多尤为别处所不及。鸭蛋的吃法，如袁子才所说，带壳切开，是一种，那是席间待客的办法。平常食用，一般都是敲破“空头”用筷子挖着吃。筷子头一扎下去，吱——红油就冒出来了。高邮咸蛋的黄是通红的。苏北有一道名菜，叫做“朱砂豆腐”，就是用高邮鸭蛋黄炒的豆腐。我在北京吃的咸鸭蛋，蛋黄是浅黄色的，这叫什么咸鸭蛋呢！ 10 | 11 | 端午节，我们那里的孩子兴挂“鸭蛋络子”。头一天，就由姑姑或姐姐用彩色丝线打好了络子。端午一早，鸭蛋煮熟了，由孩子自己去挑一个，鸭蛋有什么可挑的呢？有！一要挑淡青壳的。鸭蛋壳有白的和淡青的两种。二要挑形状好看的。别说鸭蛋都是一样的，细看却不同。有的样子蠢，有的秀气。挑好了，装在络子里，挂在大襟的纽扣上。这有什么好看呢？然而它是孩子心爱的饰物。鸭蛋络子挂了多半天，什么时候孩子一高兴，就把络子里的鸭蛋掏出来，吃了。端午的鸭蛋，新腌不久，只有一点淡淡的咸味，白嘴吃也可以。 12 | 13 | 孩子吃鸭蛋是很小心的。除了敲去空头，不把蛋壳碰破。蛋黄蛋白吃光了，用清水把鸭蛋壳里面洗净，晚上捉了萤火虫来，装在蛋壳里，空头的地方糊一层薄罗。萤火虫在鸭蛋壳里一闪一闪地亮，好看极了！ 14 | 15 | 小时读囊萤映雪故事，觉得东晋的车胤用练囊盛了几十只萤火虫，照了读书，还不如用鸭蛋壳来装萤火虫。不过用萤火虫照亮来读书，而且一夜读到天亮，这能行么？车胤读的是手写的卷子，字大，若是读现在的新五号字，大概是不行的。 -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | import { showAlert, showConfirm } from './js/customDialogs.js'; 2 | import { PromptCardManager } from './js/promptCard.js'; 3 | import { MarkdownHandler } from './js/markdownHandler.js'; 4 | import { ConnectionManager } from './js/connectionManager.js'; 5 | import { CONFIG } from './config.js'; 6 | import { initializeCardManagement } from './js/promptCard.js'; 7 | 8 | 9 | // Ollama配置 10 | const OLLAMA_BASE_URL = 'http://localhost:11434'; //可在此处修改端口 11 | 12 | // 模型配置 13 | const MODEL_CONFIG = { 14 | DEEPSEEK: { 15 | BASE_URL: 'https://api.deepseek.com/v1', 16 | MODELS: { 17 | V3: 'deepseek-chat', 18 | R1: 'deepseek-reasoner' 19 | } 20 | } 21 | }; 22 | 23 | // 检测是否为开发模式 24 | const isDevelopment = window.location.hostname === '127.0.0.1'; 25 | 26 | // 更新配置 27 | const API_CONFIG = { 28 | TONGYI_API_KEY: CONFIG.TONGYI_API_KEY, 29 | API_URL: isDevelopment ? null : 'http://localhost:3000/api/chat', 30 | DEEPSEEK_API_KEY: CONFIG.DEEPSEEK_API_KEY, 31 | CUSTOM_MODEL: CONFIG.CUSTOM_MODEL, 32 | SYSTEM_MESSAGE: CONFIG.SYSTEM_MESSAGE 33 | }; 34 | 35 | // DOM 元素 36 | const promptCards = document.querySelectorAll('.prompt-card'); 37 | const submitButton = document.getElementById('submit-prompt'); 38 | const promptOutput = document.getElementById('prompt-output'); 39 | const cardContainer = document.querySelector('.prompt-cards'); 40 | const paragraphContainer = document.getElementById('paragraph-cards'); 41 | 42 | // 初始化管理器 43 | const cardManager = new PromptCardManager(cardContainer); 44 | const markdownHandler = new MarkdownHandler(paragraphContainer); 45 | const connectionManager = new ConnectionManager(); 46 | 47 | // 将管理器暴露到全局，供其他模块使用 48 | window.cardManager = cardManager; 49 | window.connectionManager = connectionManager; 50 | 51 | // 监听窗口大小变化和滚动，更新连接线 52 | window.addEventListener('resize', () => connectionManager.updateConnections()); 53 | window.addEventListener('scroll', () => connectionManager.updateConnections()); 54 | 55 | // 设置拖拽功能 56 | // 拖拽开始时记录内容 57 | promptOutput.addEventListener('dragstart', (e) => { 58 | const content = promptOutput.textContent.trim(); 59 | if (content && content !== '等待第一次提交...' && content !== 'AI思考中...') { 60 | e.dataTransfer.setData('text/plain', content); 61 | // 添加拖拽效果 62 | promptOutput.style.opacity = '0.5'; 63 | } else { 64 | e.preventDefault(); 65 | } 66 | }); 67 | 68 | // 拖拽结束时恢复样式 69 | promptOutput.addEventListener('dragend', () => { 70 | promptOutput.style.opacity = '1'; 71 | }); 72 | 73 | // 允许放置 74 | paragraphContainer.addEventListener('dragover', (e) => { 75 | e.preventDefault(); 76 | e.dataTransfer.dropEffect = 'copy'; 77 | }); 78 | 79 | // 处理放置事件 80 | paragraphContainer.addEventListener('drop', (e) => { 81 | e.preventDefault(); 82 | const content = e.dataTransfer.getData('text/plain'); 83 | if (content) { 84 | // 计算放置位置，考虑滚动偏移 85 | const rect = paragraphContainer.getBoundingClientRect(); 86 | const scrollTop = paragraphContainer.scrollTop; // 获取容器的垂直滚动位置 87 | const x = e.clientX - rect.left; 88 | const y = e.clientY - rect.top + scrollTop; // 加上滚动偏移 89 | 90 | // 创建新卡片 91 | const card = markdownHandler.createCard(content); 92 | card.style.left = `${x - 150}px`; // 卡片宽度的一半 93 | card.style.top = `${y - 75}px`; // 卡片高度的一半 94 | } 95 | }); 96 | 97 | // 添加默认卡片 98 | async function addDefaultCards() { 99 | // 添加第一个卡片 100 | const card1 = cardManager.addCard( 101 | '规范表述', 102 | '以下是一段文字，请你修改它的表述，使其能够满足现代汉语规范的需求：```{{text}}```' 103 | ); 104 | // console.log('Added card 1:', card1.id); 105 | 106 | // 等待一毫秒以确保时间戳不同 107 | await new Promise(resolve => setTimeout(resolve, 1)); 108 | 109 | // 添加第二个卡片 110 | const card2 = cardManager.addCard( 111 | '衔接', 112 | '以下有两段文字，我想依次把它们衔接在一起，但直接衔接太突兀了。请你编写第三段文字，可以插在两段文字之间，让表达顺畅：\n第一段文字:{{p1}}
。\n第二段文字:{{p2}}
' 113 | ); 114 | // console.log('Added card 2:', card2.id); 115 | 116 | await new Promise(resolve => setTimeout(resolve, 1)); 117 | 118 | // 添加第三个卡片 119 | const card3 = cardManager.addCard( 120 | '稿件整体化', 121 | '以下写得太细碎了。请你改写这段文字，使其整体性强一些。你不必遵循原文字的结构，可以根据它的内容，重新提炼大纲后再重写，要求情感真挚、用词标准：```{{text}}```' 122 | ); 123 | // console.log('Added card 3:', card3.id); 124 | } 125 | 126 | // 添加默认文本卡片 127 | function addDefaultTextCard() { 128 | const defaultText = `欢迎使用AI写作助手！想要流畅地使用，你只需要记住一个规则：插头插在插座上。这是一个示例文本卡片。试试导入《端午的鸭蛋》，或者点击右下角的 + 添加新卡片开始写作吧！`; 129 | 130 | const card = markdownHandler.createCard(defaultText); 131 | card.style.left = '10px'; 132 | card.style.top = '10px'; 133 | 134 | // 添加第二个示例卡片 135 | const anotherCardText = `这是另一个示例卡片，你可以拖动、缩放、连接它们。`; 136 | const anotherCard = markdownHandler.createCard(anotherCardText); 137 | anotherCard.style.left = '10px'; 138 | anotherCard.style.top = '170px'; // 在第一个卡片下方 139 | } 140 | 141 | // 在页面加载完成后添加默认卡片 142 | document.addEventListener('DOMContentLoaded', () => { 143 | addDefaultCards(); // 添加默认提示词卡片 144 | addDefaultTextCard(); // 添加默认文本卡片 145 | }); 146 | 147 | // 监听卡片选择 148 | cardManager.onCardSelected = (card) => { 149 | submitButton.disabled = !card; 150 | if (card) { 151 | document.querySelectorAll('.prompt-card').forEach(element => { 152 | element.classList.remove('selected'); 153 | if (element.id === card.id) { 154 | element.classList.add('selected'); 155 | } 156 | }); 157 | } 158 | }; 159 | 160 | // 添加新卡片按钮 161 | document.getElementById('add-card').addEventListener('click', () => { 162 | cardManager.showEditDialog(null); 163 | }); 164 | 165 | // 修改提示词提交处理 166 | submitButton.addEventListener('click', async () => { 167 | const selectedCard = cardManager.selectedCard; 168 | if (!selectedCard) return; 169 | 170 | try { 171 | // 获取替换了占位符的提示词 172 | const prompt = selectedCard.getPromptWithConnections(); 173 | const modelInfo = window.getCurrentModel(); 174 | 175 | // 获取实际使用的模型名称 176 | let actualModel = ''; 177 | if (modelInfo.model === 'tongyi') { 178 | actualModel = 'qwen-turbo'; 179 | } else if (modelInfo.model === 'deepseek-v3') { 180 | actualModel = MODEL_CONFIG.DEEPSEEK.MODELS.V3; 181 | } else if (modelInfo.model === 'deepseek-r1') { 182 | actualModel = MODEL_CONFIG.DEEPSEEK.MODELS.R1; 183 | } else if (modelInfo.model === 'custom' && API_CONFIG.CUSTOM_MODEL) { 184 | actualModel = API_CONFIG.CUSTOM_MODEL.MODEL; 185 | } 186 | 187 | console.log('提示词:', prompt); 188 | 189 | promptOutput.textContent = 'AI思考中...'; 190 | submitButton.disabled = true; 191 | 192 | const response = await callAIAPI(prompt, modelInfo.model); 193 | promptOutput.textContent = response; 194 | } catch (error) { 195 | promptOutput.textContent = `错误：${error.message}`; 196 | } finally { 197 | submitButton.disabled = false; 198 | } 199 | }); 200 | 201 | // 初始化 Markdown 处理器 202 | markdownHandler.init(); 203 | 204 | // 创建隐藏的文件输入框 205 | const fileInput = document.createElement('input'); 206 | fileInput.type = 'file'; 207 | fileInput.accept = '.md'; 208 | fileInput.style.display = 'none'; 209 | document.body.appendChild(fileInput); 210 | 211 | // 处理文件导入 212 | fileInput.addEventListener('change', async (e) => { 213 | const file = e.target.files[0]; 214 | if (file) { 215 | await markdownHandler.handleFileImport(file); 216 | // 重置文件输入框的值，这样可以重复导入相同的文件 217 | fileInput.value = ''; 218 | } 219 | }); 220 | 221 | // 触发文件选择 222 | document.getElementById('import-button').addEventListener('click', () => { 223 | fileInput.click(); 224 | }); 225 | 226 | // 导出Markdown文件 227 | document.getElementById('export-button').addEventListener('click', () => { 228 | const cards = Array.from(document.querySelectorAll('.paragraph-card')); 229 | 230 | // 按y坐标排序，y相同时按x坐标排序 231 | cards.sort((a, b) => { 232 | const aY = parseInt(a.style.top); 233 | const bY = parseInt(b.style.top); 234 | if (aY === bY) { 235 | const aX = parseInt(a.style.left); 236 | const bX = parseInt(b.style.left); 237 | return aX - bX; 238 | } 239 | return aY - bY; 240 | }); 241 | 242 | // 提取文本内容并用双换行符连接 243 | const content = cards 244 | .map(card => card.querySelector('.card-content').textContent.trim()) 245 | .filter(text => text) // 过滤掉空文本 246 | .join('\n\n'); 247 | 248 | // 创建Blob对象 249 | const blob = new Blob([content], { type: 'text/markdown' }); 250 | 251 | // 创建下载链接 252 | const downloadLink = document.createElement('a'); 253 | downloadLink.href = URL.createObjectURL(blob); 254 | downloadLink.download = 'exported_document.md'; 255 | 256 | // 触发下载 257 | document.body.appendChild(downloadLink); 258 | downloadLink.click(); 259 | document.body.removeChild(downloadLink); 260 | 261 | // 清理URL对象 262 | URL.revokeObjectURL(downloadLink.href); 263 | }); 264 | 265 | // 添加删除所有段落的功能 266 | document.getElementById('clear-paragraphs').addEventListener('click', () => { 267 | showConfirm('确定要删除所有段落卡片吗？此操作不可撤销。').then((confirmed) => { 268 | if (confirmed) { 269 | // 清空所有段落卡片 270 | paragraphContainer.innerHTML = ''; 271 | 272 | // 清除所有连接 273 | if (window.connectionManager) { 274 | window.connectionManager.clearAllConnections(); 275 | } 276 | 277 | // 重置导入计数器 278 | markdownHandler.importCount = 0; 279 | } 280 | }); 281 | }); 282 | 283 | // 模拟API调用 284 | async function mockApiCall(message, model) { 285 | // 模拟网络延迟 286 | await new Promise(resolve => setTimeout(resolve, 500)); 287 | return `[本地模式] 当前使用的是模拟数据。如需调用在线API，请切换到在线API模式，或使用本地的 Ollama 模型。`; 288 | } 289 | 290 | // 显示自定义模型配置对话框 291 | function showCustomModelDialog() { 292 | const dialog = document.createElement('div'); 293 | dialog.className = 'custom-model-dialog'; 294 | dialog.innerHTML = ` 295 |