小创 · 智能助手

1. 引言

小创智能助手是一个面向项目提交与远程查看场景的轻量级工具，它把项目信息、代码内容和文档下载整合到一个页面中，方便用户快速提交、预览和分享。本文围绕它的核心功能、页面结构、代码实现和远程查看机制展开讲解。

2. 核心功能

小创智能助手主要提供以下几类能力：

项目信息录入：记录项目编号、姓名、手机号、项目标题、提交日期和时间等基本信息。
代码内容展示：将提交的代码以带行号、语法高亮的样式呈现，支持长代码滚动查看。
远程查看：生成一个可分享的页面，用户通过浏览器即可远程访问项目详情。
文档下载：支持将项目信息与代码导出为 Word 文档（.docx），也支持打印或保存为 PDF。

3. 页面结构

页面整体采用深色科幻风格，主要分为以下几个区域：

顶部 Hero 区：展示项目标题、提交人、手机号、时间和项目编号等概要信息。
基本信息区：以表格形式列出项目编号、姓名、手机号、项目标题和提交日期。
代码展示区：带行号和语法高亮的代码块，长代码会显示行数徽标并支持滚动。
下载操作区：提供下载 Word 文档和打印/保存 PDF 两个按钮。

4. 代码实现要点

整个页面由一段 JavaScript 动态生成 HTML 字符串并写入新窗口实现，核心逻辑包括：

HTML 拼接 ：通过字符串拼接方式构建页面结构，再调用 document.write 写入新窗口。
代码转义 ：对代码中的 &、<、>、" 进行转义，避免破坏页面结构。
语法高亮：使用正则表达式对注释、字符串、关键字、数字、函数名和属性名进行着色。
行号生成：按代码行数动态生成左侧行号列，并做隔行高亮。
DOCX 生成：手动构造 OOXML 文档内容，并用 ZIP 存储方式打包为 .docx 文件。

4.1 HTML 拼接

页面结构通过字符串拼接逐步构建，最后写入新窗口。核心代码如下：

javascript 复制代码

// 逐段拼接页面 HTML 字符串
var html = '';
html += '<div class="hero">';
html += '<h1>' + escapeHtmlForRemote(p.title) + '</h1>';
html += '</div>';
// 拼接完成后写入新窗口
win.document.write(html);
win.document.close();

4.2 代码转义

代码内容在插入 HTML 前必须转义特殊字符，防止破坏页面结构。核心代码如下：

javascript 复制代码

// 对代码中的特殊字符进行 HTML 转义
function escapeHtmlForRemote(text) {
    return text.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;');
}

4.3 语法高亮

通过正则表达式对代码中的注释、字符串、关键字、数字、函数名和属性名进行着色。核心代码如下：

javascript 复制代码

// 依次匹配注释、字符串、关键字、数字、函数名和属性名
var highlighted = codeEscaped
    .replace(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g, '<span class="hl-cmt">$1</span>')
    .replace(/(&quot;[^&]*?&quot;|'[^&]*?'|`[^`]*`)/g, '<span class="hl-str">$1</span>')
    .replace(/\b(function|var|let|const|if|else|for|while|return|class|new|this)\b/gi, '<span class="hl-kw">$1</span>')
    .replace(/\b(\d+\.?\d*(?:e[+-]?\d+)?)\b/g, '<span class="hl-num">$1</span>')
    .replace(/\b([a-zA-Z_$][\w$]*)\s*(?=\()/g, '<span class="hl-fn">$1</span>')
    .replace(/(\.[a-zA-Z_$][\w$]*)/g, '<span class="hl-prop">$1</span>');

4.4 行号生成

按代码行数动态生成左侧行号列，并对第 5 的倍数行做高亮。核心代码如下：

javascript 复制代码

// 按代码行数生成左侧行号列
var codeLines = (p.code || '').split('\n');
for (var ci = 0; ci < codeLines.length; ci++) {
    // 每 5 行高亮一次，其余行使用较暗样式
    var cls = (ci % 5 === 0) ? 'ln-hl' : 'ln-dim';
    html += '<div class="' + cls + '">' + (ci + 1) + '</div>';
}

4.5 DOCX 生成

手动构造 OOXML 文档内容，并用 ZIP 存储方式打包为 .docx 文件。核心代码如下：

javascript 复制代码

// 构造 OOXML 文档主体
var doc = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
doc += '<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">';
doc += '<w:body><w:p><w:r><w:t>' + titleE + '</w:t></w:r></w:p></w:body></w:document>';
// 将文档内容与关系文件打包为 ZIP（store 模式）
var b64 = createZipBase64(files);
return b64;

5. 远程查看机制

下面给出一个完整的实战样例，演示如何把项目数据嵌入页面并生成可远程访问的静态页面。读者可直接复制运行，观察最终效果。

javascript 复制代码

// 实战样例：构造项目数据并生成远程查看页面
var project = {
    title: '小创智能助手',
    author: '张三',
    phone: '138****8888',
    date: '2026-08-27',
    code: 'function hello() {\n    // 输出问候语\n    console.log("Hello, 小创!");\n    return 42;\n}'
};

// 打开新窗口并写入完整页面
var win = window.open('', '_blank');
var html = '<html><head><title>' + escapeHtmlForRemote(project.title) + '</title></head><body>';
html += '<h1>' + escapeHtmlForRemote(project.title) + '</h1>';
html += '<p>提交人：' + escapeHtmlForRemote(project.author) + '</p>';
html += '<p>手机号：' + escapeHtmlForRemote(project.phone) + '</p>';
html += '<p>日期：' + escapeHtmlForRemote(project.date) + '</p>';
html += '<pre>' + highlightCode(escapeHtmlForRemote(project.code)) + '</pre>';
html += '</body></html>';
win.document.write(html);
win.document.close();

运行上面的代码后，会打开一个新窗口，页面中展示项目标题、提交人、手机号、日期，以及经过转义和语法高亮后的代码内容。

从效果图中可以看到，页面采用深色科幻风格，顶部展示项目概要信息，中部为带行号和语法高亮的代码展示区，底部提供下载 Word 文档和打印/保存 PDF 的操作按钮。整个页面无需后端参与，仅靠静态文件即可完成项目信息的远程展示与分享。

远程查看机制有多种实现方式，下面从部署成本、实时性、安全性、适用场景等维度，对比本方案（静态页面嵌入数据）与后端渲染方案、iframe 嵌入方案的差异。

对比维度	本方案（静态页面嵌入数据）	后端渲染方案	iframe 嵌入方案
部署成本	低，仅需静态文件托管，无需服务器	高，需要后端服务、数据库和运维	中，需要承载被嵌入页面的独立服务
实时性	数据在生成页面时固化，更新需重新生成	高，数据实时从后端读取，改动即时生效	取决于被嵌入页面自身的更新频率
安全性	较高，无后端接口暴露，数据以静态形式存在	中，需做好接口鉴权与数据校验	较低，受 iframe 同源策略与 X-Frame-Options 限制
适用场景	个人或小团队的项目展示、交付与分享	数据频繁变动、需要权限控制的业务系统	需要复用已有页面或第三方内容时
优点	轻量、无需服务器、加载快、便于分享	数据实时、可扩展、便于统一管理	可复用现有页面、开发成本较低
缺点	数据更新需重新生成页面，不适合高频变动	部署和运维成本高，依赖后端稳定性	受跨域限制，样式和交互隔离，调试较复杂

综合来看，本方案在部署成本和安全性上优势明显，适合项目提交与远程查看这类数据相对固定、以分享为主的场景；若后续需要频繁更新数据或接入权限控制，再考虑迁移到后端渲染方案。

远程查看的核心思路是：把项目数据序列化后嵌入到页面脚本中，当用户打开分享链接时，脚本读取这些数据并动态渲染出完整页面。这样无需后端参与，仅靠静态页面即可实现项目信息的远程展示。

6. 总结

小创智能助手通过前端动态渲染、代码高亮和本地文档生成，实现了项目提交、预览、分享与下载的一体化流程。它的实现方式轻量、无需服务器，适合个人或小团队快速搭建项目展示与交付页面。