AI 网站（AI Code Studio）

织信「AI 网站」以 AI Code Studio 为开发工作区，支持通过自然语言生成、编辑和发布 Vue 3、React 或 uni-app 项目。本文从「创建第一个模块」到「发布上线 / Git 同步」，按操作顺序覆盖完整流程。

---

一、AI 网站是什么

一句话理解

你说一句"我要一个什么样的页面"，它就帮你做出来——能直接给同事用、能接上公司业务数据、能像普通网页一样发布访问。

不需要在本地安装开发环境，也可以直接用对话完成第一版页面。熟悉代码的开发者还可以随时切到代码工作区接管工程，或者通过 ZIP、Git 与本地 IDE 双向衔接。

它能帮你做什么

举几个真实场景，看下你可能用到的样子：

• 教务老师：「做一个学生成绩查询页，输入学号能查到这个学生所有科目的成绩，按学期分组展示。」→ AI 会去查应用里的"成绩表"、写好查询脚本、做一个带搜索框的页面，全程不用你写一行代码。
• 行政人员：「做个员工生日提醒看板：本月过生日的人头像 + 部门 + 生日日期，按日期排序。」→ 自动接通讯录表 + 生日字段 + 生成日历卡片样式。
• 车间主管：「做个设备故障登记表单，员工填完点提交就存到数据库，再做个统计页看每台设备月度故障次数的柱状图。」→ 表单 + 提交逻辑 + 统计页 + 图表，一次搞定。
• 公司管理者：「做个销售业绩 Dashboard，左上方饼图按区域、右上柱状图按月份、下方一张销售明细表。」→ 整页布局 + 3 个真实图表组件一气呵成。
• 学校教师：「我想要个简洁现代的『我的学习中心』欢迎页，三张卡片：今日待办、推荐课程、学习记录。」→ 本文第二节的演示就是这个，完整过程见 2.4。

跟传统做法的差别

不用 AI 网站，要做这些页面通常要做什么：

1. 找设计师画原型（1-3 天）
2. 找前端工程师写 Vue/React 代码（3-7 天）
3. 找后端工程师写接口（2-5 天）
4. 联调、改 bug、上线（1-3 天）

用 AI 网站需要多久：

1. 你自己描述清楚要做什么（5-30 分钟）
2. AI 跑完（1-5 分钟）
3. 看预览，不满意接着说几句调整（10-30 分钟）
4. 点「发布」，同事就能访问（1 秒）

省的不只是时间，是"找人协调"的成本——以前要排队等开发资源，现在一个人就能闭环。

给开发者看的简介

如果你是开发者，从技术角度，AI 网站把「前端工程 + AI 自动生成 + 织信数据对接」封装成一个模块类型：

• 多技术栈：支持 Vue 3、React 和 uni-app；PC / 移动端会自动匹配默认 UI 库，语言可选 JavaScript 或 TypeScript。
• 对话即开发：AI 可生成页面、路由和前端逻辑，也能查询织信表结构、创建后端脚本并注册 API。
• 白名单可控：编译环境只安装管理后台允许的 npm 依赖，项目配置会展示当前环境的真实可用清单。
• 生成质量门禁：对话完成后自动编译并检查预览挂载、横向溢出、图片、重复 ID、表单标签、表格溢出、移动端点击区域和 UI 库匹配情况。
• 本地性能记录：可选地把每轮生成、构建、预览和 Token 的聚合指标保存到当前浏览器，不写入后台。
• 可视化反馈：可对当前预览直接截图或批注，并作为附件加入下一轮对话。
• 版本可回滚：AI 对话完成、手动编辑空闲、发布等节点均可形成快照，也可以手动创建检查点。
• 可手工接管：文件树、Monaco 编辑器、ZIP 导入导出和 Git 同步共同组成完整工程工作区。

它是给"会前端但不想从零搭脚手架"的人，也是给"完全不会前端但想做个内部工具"的人——前者拿来加速，后者拿来直接交付。

---

二、快速入门：5 分钟做出第一个页面

2.1 创建 AI 网站模块

进入应用设计器，在左侧"模块设置"标题右侧点击 ☷ 图标，在下拉菜单选「创建模块」，弹出模块类型选择AI网站卡片，弹出基础信息表单。必填项只有「名称」，其它（描述/导航栏展开规则/图标/图标颜色/文字颜色）可以稍后再改：

填好名称后点「创建」，模块就建好了，自动跳转到设计器主视图。

💡 名称建议起得具体一点——它是导航栏菜单上显示的文字，也会作为 AI 上下文里识别这个模块用途的线索。例如 "学生成绩查询页"、"设备巡检看板"。

2.2 项目配置（首次进入）

第一次进入 AI 网站主视图，会自动弹出「项目配置」对话框。技术偏好保存后会固化，AI 每一轮生成都会参考；访问权限则可以随时调整：

不确定怎么选时，直接点「保存并开始」。默认组合是 应用访问成员 + PC + Vue 3 + JavaScript + Element Plus，适合大多数内部业务页面。

分组	选项	说明
访问权限	应用访问成员 / 已登录织信用户 / 公开访问	同时保护访问地址和预览地址；公开访问只用于明确的外部分享场景
目标终端	PC / 移动端	决定 AI 默认采用的页面密度、布局与交互方式
框架	Vue 3 / React / uni-app	Vue、React 和 uni-app 都有对应的默认 UI 库，见下表
语言	JavaScript / TypeScript	两种模板均已支持
UI 与样式	主题色	作为按钮、强调状态和主要交互的默认色
国际化	开启 / 关闭	开启后，AI 优先生成可扩展的多语言文案结构
可用 npm 依赖	只读清单	展示编译环境当前预装的真实包名与版本

默认 UI 库会跟随「框架 + 目标终端」自动确定：

框架	PC	移动端
Vue 3	Element Plus	Vant
React	Ant Design	Ant Design Mobile
uni-app	uni-ui	uni-ui

uni-app 当前在 Studio 中以 H5 方式预览，生成约束会要求使用 view、text 等跨端组件，并同步维护 pages.json，以便后续进入小程序或 App 工具链。

项目配置保存后

目标终端、框架、语言、主题色和国际化设置不可再切换；访问权限仍可随时修改。更换框架时应新建模块，避免旧代码和新脚手架混用。

2.3 用对话生成页面

保存项目配置后进入 AI Code Studio。左侧是对话面板，右侧默认显示使用引导和实时预览：

右侧引导卡片快速介绍了"几种开始方式"——对话生成（推荐）/ 手动编辑 / 上传已有项目 / 上传辅助素材。最直接的方式就是在左下输入框打字：

左下输入框的辅助按钮：

• 📎 上传附件：可以传 PNG/JPG 设计稿、PDF/Word/Excel 需求文档，AI 会读取内容并参考。
• ⚙️ 项目配置：查看固化的技术偏好，或者调整访问权限。
• 🔧 设置：对话相关偏好（详见 4.7）。
• ➤ 发送：默认回车键发送，Shift+回车换行（可在设置里改）。

输入需求，越具体越好。比如：

做一个简洁的欢迎页：顶部一个主标题「我的学习中心」，下面 3 个卡片横向排列：今日待办、推荐课程、学习记录。全部用 mock 数据，不需要接后端。设计要简洁现代，并确保 PC、平板和手机预览都没有横向溢出。完成后请主动检查编译和预览。

点发送后，AI 会读取当前工程并写入源码。顶部模型栏保持「系统默认」即可，无需为了普通页面手工切换模型。不同模型输出的过程卡片不完全相同：有的会展示执行计划和思考过程，有的只展示工具动作与最终回复；以最终源码、编译结果和预览为准。

在这个示例中，AI 只需要修改 App.vue，随后会自动编译、刷新预览并执行质量检查：

对话较长时，可打开左侧「大纲」按用户需求快速定位；需要开始另一项相对独立的工作时，使用「新建会话」，之前的内容仍可从「历史会话」切回。

2.4 看到预览效果

等 AI 跑完后，右侧代码工作区会出现新增或修改的工程文件：

底部状态栏会显示当前编译状态、文件数量和日志入口。若开启自动编译，生成完成后系统会立即构建并刷新预览。

切到「预览」标签看实际渲染：

3 个 mock 卡片都按需求生成：今日待办支持勾选并实时更新进度，推荐课程显示进度条，学习记录汇总本周时长。PC、平板和手机视口均未出现横向溢出。

到这里，第一个 AI 生成的页面就跑通了。下面的章节按界面区域逐一讲解。

---

三、AI Code Studio 界面总览

AI Code Studio 主视图分两栏，中间分隔线可以拖动调整宽度：

• 左侧 对话面板（约 1/3 宽度）：和 AI 沟通的全部入口。可用顶部的「隐藏 / 显示对话」开关折叠，给右侧腾出空间。
• 右侧 工作区（约 2/3 宽度）：内含「预览」和「代码」两个标签；也可以从输入区关闭右侧面板，专注阅读对话。

顶部还有一行模块标签栏：基本信息 / AI 设计器 / 版本历史 / 参数设置——这是织信通用的模块设置分页：

• 基本信息：模块名/图标/导航栏行为（即 2.1 那一步的内容）。
• AI 设计器：本文重点，就是 Studio 主视图。
• 版本历史：所有版本快照（详见 第九节）。
• 参数设置：访问地址 / 预览地址（详见 第十节）。

---

四、对话面板（左侧）

4.1 输入区与发送

底部多行输入框支持：

• 回车发送 / Shift+回车换行（可在设置改成相反）。
• AI 正在响应期间输入框置灰显示「等待回复中...」，新消息无法发送。可以点红色「停止」按钮中断当前轮。
• 左下角可以添加附件、技能、专家或专家团，让指定能力参与本轮任务。
• 「权限模式」限定当前会话内 AI 可执行的操作，但不会超过当前角色已经获得的 AI 权限。

权限模式分为只读、数据、设计和完全访问。生成页面、创建脚本或 API 时通常需要「设计模式」；只做分析时应使用「只读模式」。数据模式和完全访问权限会带来数据变更或管理操作风险，应按任务最小范围选择。

4.2 上传附件辅助生成

点击输入框左下回形针图标 📎 → 选本地文件上传。支持三类：

• 图片（PNG/JPG）：设计稿、原型图、参考界面截图。
• 文件（PDF/Word/Excel/CSV）：需求文档、字段清单、Excel 表头。
• 附件：其它通用文件，AI 会按内容尝试解析。

附件传上去后会显示一个小卡片在输入框上方，AI 在生成时会读取并参考。典型用法：

• 让 AI 按"这张 Figma 设计稿"还原 UI
• 让 AI 按"这张 Excel 表头"建对应的表单字段
• 让 AI 按"这份 PRD"做整体设计

4.3 模型选择

对话面板顶部的模型下拉可以切换当前会话使用的模型，可选项由管理员配置。模型右侧的帮助提示会说明：上传图片、使用截图或批注时，应优先选择支持视觉识别的模型。

💡 一般无需切换，系统默认已经是综合体验最优的模型。需要更长上下文或者更复杂逻辑时再考虑切到能力更强的模型。

4.4 清空对话历史

顶部「清空对话历史」按钮可以一键清掉本会话所有消息——只清对话，不清代码。代码已经写出来的不会回退。

适用场景：

• 想换个角度让 AI 重新生成，但希望保留已有代码作为起点。
• 历史太长想节省 context（一些模型上下文有限，清掉无关历史能让 AI 更专注当前任务）。

4.5 新建会话、历史会话与大纲

同一个 AI 网站模块可以保留多段独立会话：

• 新建会话：开始一段新的上下文，原会话和代码都不会被删除。
• 历史会话：当模块存在多段会话时显示，可按更新时间和模型切换回之前的对话。
• 大纲：根据用户消息生成定位列表，长对话中可以搜索并直接跳到某一轮需求。

新建会话适合切换到不同业务目标；同一页面的连续修改应留在原会话中，以便 AI 继续利用上下文。

4.6 思考过程 / 执行计划 / 子任务

每一轮对话 AI 输出的内容会按以下卡片类型分块呈现：

卡片	含义	是否可折叠
思考过程	AI 的内心独白（多为英文），帮你理解它的推理	可点折叠
执行计划	当 AI 决定多步操作时，把每一步列出来逐项打勾	可点展开看子项
子任务行	单次工具调用（Bash 命令 / Read 文件 / 创建脚本 / 注册 API 等）	可展开看输入和返回
确认卡片	AI 做出有副作用的动作前请求二次确认（有"确认执行 / 我有修改意见"两个按钮）	必须响应
最终回复	AI 的总结性发言，说明本轮做了什么	不折叠

完整的对话面板示例：

4.7 对话设置

点输入框左下「⚙️ 设置」，弹出对话偏好面板：

设置面板分为「常规」「显示」「网站智能体」三个分页。常用选项如下：

开关	默认	作用
回车键发送	✅ 开	关闭后回车换行、点发送按钮才发；仍可用 Ctrl/⌘+回车 发送
新消息自动滚动到底部	✅ 开	关闭后保持当前滚动位置，方便回看历史
隐藏思考与工具细节	❌ 关	开启后会话窗口只展示用户消息与 AI 最终回答，隐藏思考过程和工具调用卡片
自动编译	✅ 开	关闭后所有自动编译都不再触发，需手动点工具栏「编译并刷新」
自动修复错误	✅ 开	检测到编译错误、预览页 JavaScript 错误、API 烟囱测试或页面接口失败时自动反馈给 AI；每轮最多尝试 2 次
自动创建版本快照	✅ 开	关闭后只影响"AI 对话完成"和"手动编辑闲置 5 分钟"这两种场景的自动快照；发布快照和手动检查点不受影响
保存本地性能历史	❌ 关	开启后，把生成、构建、预览和 Token 的聚合指标保存到当前浏览器，便于比较多轮表现

本地性能历史使用 IndexedDB；不保存提示词、回复、源码、文件名或错误详情。每个模块最多保留 20 条，7 天后自动清理；IndexedDB 不可用时自动退化为仅本次页面的内存记录。

---

五、工作区（右侧）

5.1 预览面板与多端切换

右侧工作区有「预览 / 代码」两个标签，预览是默认标签。预览顶部居中有 PC / 平板 / 手机三个视口切换按钮：

PC 视图（默认，全宽）：

平板视图（中等宽度，卡片自动堆叠）：

手机视图（窄屏单列）：

💡 多端切换只改预览容器宽度、不改代码——是否真的响应式仍取决于生成代码。需求里应明确要求检查 PC、平板和手机；质量门禁也会检查各视口的横向溢出。

5.2 生成后的质量门禁

AI 完成并编译成功后，预览顶部会显示「质量检查中 / 质量检查通过 / 质量门禁未通过」。当前自动检查包括：

• 页面根节点没有成功挂载或内容为空
• PC、平板、手机视口横向溢出
• 图片加载失败、重复 DOM id
• 表单控件缺少可访问标签
• 超宽表格没有放进可横向滚动容器
• 移动端点击区域小于 44px
• 生成代码使用了与当前框架 / 终端不匹配的 UI 库

阻断项或警告会进入预览错误区和日志；开启「自动修复错误」时，系统会把质量报告反馈给 AI，每轮最多自动修复 2 次。质量门禁是自动发现明显问题的兜底，不能代替真实业务流程测试。

5.3 批注、截图与缓存

预览视口右侧提供三个直接反馈工具：

• 批注：截取当前预览并进入标注层，可使用画笔、直线、矩形、圆形和文字，完成后点「添加到对话」。
• 截图：不进入编辑层，直接把当前预览截图加入对话附件。
• 清除缓存：清除当前预览 iframe 的缓存并重新加载，适合代码已更新但页面仍显示旧资源的情况。

批注和截图都依赖模型的视觉能力。附件加入输入区后，还需要写清修改要求再发送，例如「把标记区域的按钮移到表格右上角」。

5.4 工作区工具栏

右上角工具栏（从左到右）：

按钮	作用
隐藏 / 显示对话	折叠左侧对话面板，工作区占满屏
新窗口打开	把预览地址在新标签页打开，方便对比、F12 调试
编译并刷新	手动触发编译并刷新 iframe（自动编译关闭时常用）
下载项目源码	把当前模块全部源码（含 boilerplate）打包成 zip 下载，本地 pnpm install && pnpm dev 可跑
导入项目源码	用本地 ZIP 替换当前模块的源码（详见 十二）

底部状态栏左侧：编译/运行状态指示灯（绿点 = 就绪，红点 = 出错）；右侧：文件数量、日志入口。

---

六、代码面板与文件管理

切到「代码」标签，进入工程视图——左边文件树，右边 Monaco 编辑器：

6.1 文件树

工程结构由首次选择的框架决定。以下是 Vue 3 + Vite 项目的常见结构：

router/
  index.js
views/
  WelcomePage.vue   ← AI 生成的页面
__informat_sdk__.js 🔒
.env
App.vue
index.html          🔒
main.js             🔒
package.json
vite.config.js      🔒

带 🔒 标记的是系统模板文件（boilerplate）——核心入口文件，错误的修改会让项目无法编译。这些文件可以打开看、可以改，但保存前会弹警告（详见 6.3）。

文件树顶部工具栏：

按钮	作用
+ 创建	新建文件或文件夹，可直接输入相对路径
↑ 上传	上传一个或多个文件，或者递归上传整个文件夹
↓ 下载	下载当前勾选的文件；支持多选批量下载
Git ⌄	Git 同步操作（详见 第十一节）
API 接口 ⌄	打开「脚本 / API 资源抽屉」（详见 第七节）
收起 / 展开 / 全选	树形操作

文件树支持搜索、勾选、拖拽移动、批量删除，以及一键收起或展开。将鼠标移到节点右侧的操作按钮，可创建子项、上传、重命名、下载或删除；中间分隔线可拖动调整文件树宽度，双击恢复默认宽度。

⚠️ 删除文件夹会连带删除其中所有文件，操作不可撤销——但好在版本快照里还能找回，看第九节。

6.2 编辑器

右侧 Monaco 编辑器，和 VS Code 同款：

• 语法高亮（Vue / JS / TS / JSON / CSS / SCSS / HTML）
• 多标签 tabs（同时打开多个文件）
• Ctrl/⌘+F 查找、Ctrl/⌘+H 替换
• Ctrl/⌘+P 跨文件搜索（如果开启）
• 修改后文件名旁出现 * 标记，工具栏出现「保存 / 取消」按钮
• 图片可直接预览；字体等其它二进制资源显示文件信息并提供下载，不会以乱码方式进入编辑器

AI 生成代码完全可以人工微调——保存后会自动重新编译，预览即时刷新。

代码生成期间编辑器进入只读模式（避免你和 AI 同时改一个文件造成冲突）。生成结束后再次可写。

6.3 系统模板文件（boilerplate）保护

打开任何一个带 🔒 标记的文件并修改、点保存，会弹出修改警告：

这张图是 package.json 的严格警告，它有两种警告级别：

严格警告（package.json）：

• 警示语：「保存后，系统会自动剔除不在 npm 白名单内的依赖（不会报错，但相关 import 编译时会失败）」
• ✅ 可以做：调整白名单内已有包的 ^ / ~ 版本约束 / 移除项目里不再 import 的依赖
• ❌ 不要做：添加白名单外的新依赖（保存后会被自动剔除）/ 改 name/type/private 这类元字段
• 想新加依赖必须先让管理员把包加入「管理后台 → 系统信息 → AI 白名单」

通用警告（index.html / vite.config.js / main.js / informat_sdk.js）：

• 警示语：「系统生成的模板文件，错误的修改可能导致项目无法编译」
• 每个文件有专属的"可以做 / 不要做"清单。比如 index.html 可以改 <title>、加 favicon，但不要删 <div id="app">。
• 兜底机制：如果改坏了，删掉这个文件，下次编译会自动用默认模板补回来。

点「我了解风险，继续修改」即可保存。

---

七、脚本与 API 资源

代码面板工具栏的「API 接口」按钮下拉有两项：

• 脚本——AI 通过 informat skill 在织信平台创建的后端脚本，文件名按当前模块的 ai_<moduleId>_ 前缀过滤
• API——AI 在织信平台注册的 HTTP API，路径按当前模块的 ai/<moduleId>/ 前缀过滤

点其中一个，从右侧滑出资源抽屉。

以「学生统计示例」为例，AI 创建脚本 ai_psddwi5toln5w_studentStats.js 后，资源抽屉会展示脚本名、平台 ID 和新建 / 更新状态：

抽屉顶部「刷新」会从平台重新同步当前模块的脚本和 API。点击脚本可以展开源码或跳到平台管理界面；点击 API 可以进入对应定义。

同一个示例还会创建两个只读接口：

• GET ai/psddwi5toln5w/students/gender-count
• GET ai/psddwi5toln5w/students/grade-count

点击 API 条目可以进入平台定义页，查看请求方法、路径、绑定脚本和启用状态。调试接口时，可结合定义页、预览地址响应和日志中的烟囱测试结果一起确认调用链路。

若接口烟囱测试失败，错误会进入日志和预览错误列表。开启「自动修复错误」后，系统会把失败接口、状态码和响应摘要回传给 AI，每轮用户输入最多自动修复 2 次。

---

八、项目配置（查看模式）

随时点对话面板输入区上方的「项目配置」按钮，可以回顾项目偏好：

目标终端、框架、语言、主题色和国际化等技术偏好会置灰，AI 每轮生成都会读取这些设置。访问权限不锁定，可在「应用访问成员 / 已登录织信用户 / 公开访问」之间切换，保存后同时作用于访问地址和预览地址。

如果确实需要换技术栈，只能：

1. 把现有代码用「下载项目源码」备份
2. 删除当前模块
3. 重新创建一个 AI 网站模块，重选配置
4. 用「导入项目源码」把备份的 ZIP 传回去（前提是代码与新技术栈兼容）

---

九、版本历史与回滚

切到顶部模块标签栏的「版本历史」：

9.1 版本列表

顶部说明卡片清楚地列出 3 条规则：

1. 纳入版本的内容：项目源代码文件（.vue / .js / .ts / .css 等）。
2. 不纳入版本的内容：logs/（AI 对话日志）和 localFiles/（上传的附件）这两个目录由系统自动维护，既不会随检查点保存、也不会在回滚时被覆盖或删除。
3. 回滚后已发布版本不变：已发布的线上访问地址仍指向之前发布的版本，不受回滚影响；想让线上跟着变需要重新发布。

每条版本记录显示：

• 标题（自动快照写"AI 对话自动保存 MM-DD HH:mm"或"手动编辑自动保存"，手动检查点是你输入的说明）
• 时间 / 文件数 / 触发类型（自动 / 手动 / 发布）
• 「最新」标签标识当前 draft 状态对应的版本
• 三个操作按钮：对比当前 / 回滚到此版本 / 删除

自动快照的触发规则由「设置 → 网站智能体 → 自动创建版本快照」控制：AI 对话完成且编译成功后每轮保存一次；手动编辑完成并空闲 5 分钟后保存一次。发布快照和手动检查点不受该开关影响。

9.2 创建检查点

任何时候点右上「+ 创建检查点」按钮：

输入一句简短说明（最多 200 字），点「创建」——当前 draft 状态会被打成一个手动快照。

💡 关键节点强烈建议手动建一个：

• 跑完第一版骨架时（命名"v1 骨架完成"）
• 上线发布前（命名"发布预 release"）
• 大刀阔斧重构前（命名"重构前 - 可回滚锚点"）

9.3 对比版本

点某个版本的「对比当前」，打开 diff 视图：

• 顶部标题显示 对比当前 vs 「<版本名>」
• 顶部三个标签数字：新增 N / 修改 N / 删除 N，点击可以筛选只看这一类
• 左侧文件列表（按变更类型分组），点击文件看行级 diff
• diff 方向：commit 版本 → 当前

💡 上面这张图是「最新版本对比当前」，由于内容完全一致，显示"此版本与当前内容完全一致"。一旦你改动了代码再来对比之前的版本，左侧会列出所有变更文件。

9.4 回滚到某个版本

点某个版本的「回滚到此版本」，弹出确认：

安全机制：

1. 回滚前会自动创建一份当前状态的检查点——万一回滚后悔了，可以再回滚回去。
2. 已发布的版本（线上访问）不受影响——回滚只改 draft（预览）状态，不动线上。线上要变得重新发布。
3. 当前 draft 会被完全重置为目标版本的状态——没保存的改动会丢失，提前保存好。

点「回滚」确认即可。

---

十、访问地址与发布

切到顶部模块标签栏的「参数设置」：

两个地址：

• 访问地址（/web0/codestudio/app/<appId>/<moduleId>/）

  应用发布后的访问地址，使用者看到的是上一次发布时的版本。这是要交付给业务用户的链接。

• 预览地址（/web0/codestudio/preview/<appId>/<moduleId>/）

  设计者预览的地址，跟着设计稿实时编译，不需要发布即可看到最新效果。和 Studio 内置预览面板看到的是同一个内容，但能用浏览器原生工具调试（F12 / DevTools）。

两个地址都受项目配置中的访问权限保护。遇到 401 时，先核对当前用户是否满足「应用访问成员」或「已登录织信用户」范围；只有选择「公开访问」时才允许未登录访问。

发布

顶部工具栏的橘色「发布」按钮：

发布做的事：

1. 把当前 draft 状态打包成一份新版本
2. 自动创建一份"发布版本快照"（在版本历史里能看到，触发类型显示「自动」）
3. 把访问地址指向这份新版本
4. 整个应用版本号 +1（顶部的 v0.5.9 build2509 这种）

⚠️ 发布是会被普通用户看到的，请先在预览地址自测：跑一遍主流程、检查多端、看 Console 有无报错——再发布。

---

十一、Git 仓库双向同步

代码面板工具栏的「Git ⌄」按钮，下拉 4 项：

项目	用途
拉取（Pull）	把远程仓库的最新提交拉到本地。可能产生冲突，系统会引导你逐文件解决
推送（Push）	把本地未推送的改动提交并推送到远程
同步历史	查看最近的 push / pull / 配置操作记录
Git 配置	配置远程仓库地址、分支、认证方式

Git 配置

点「Git 配置」打开配置对话框：

字段：

• 仓库地址：HTTPS（https://github.com/org/repo.git）或 SSH（git@github.com:org/repo.git）
• 分支：默认 master，留空也用 master
• 认证方式：用户密码（Personal Access Token）/ SSH 密钥（PEM 格式私钥）
• 用户名与凭据：使用 HTTPS 时填写 Git 用户名和密码 / Token；使用 SSH 时填写私钥
• 目标路径：可选。仓库中用于保存 AI 网站源码的相对目录；一个仓库管理多个模块时尤其有用
• 发布时自动 Push：开启后，每次发布成功会把当前项目自动提交并推送到已配置的远程分支

配置完成后点「保存」。需要以远程代码初始化当前模块时，保存配置后执行 Pull；Pull 会把远程分支或目标路径中的内容同步到当前源码，操作前先创建检查点或下载未备份的改动。

典型使用流程：

1. 在 GitHub / GitLab / Gitee 建一个空仓库
2. 在「Git 配置」填写仓库地址、分支、认证信息；按需指定目标路径
3. 远程仓库已有项目时，保存配置后先 Pull；远程为空时，直接从 Studio 执行第一次 Push
4. 日常协作先 Pull 获取远程修改，再编辑和 Push；发布前至少确认一次同步状态

💡 希望发布即备份时，可以直接在 Git 配置中开启「发布时自动 Push」。自动 Push 失败不会替代人工检查，具体原因仍需到「同步历史」或日志面板查看。

---

十二、项目导入与下载

下载项目源码——工具栏「↓ 下载项目源码」：

• 打包 .vue / .js / .json / .html / .css 等所有源码（含 boilerplate）
• 解压后 pnpm install && pnpm dev 可直接在本地跑起来
• 适合：本地深度开发 / 备份 / 把代码拿到 IDE 里大刀阔斧重构

导入项目源码——工具栏「↑ 导入项目源码」：

弹窗顶部「导入前请确认」清单：

• ✅ 支持 Vue 3 或 React + Vite 项目——导入项目应与当前模块首次保存的框架和语言配置保持一致
• ✅ 当前可用 npm 依赖：弹窗会读取管理后台白名单，展示当前环境的真实包名与版本；不要依赖文档中的固定数量
• ⚠️ 项目中用到列表外的库：导入后保留但不会被安装；请联系系统管理员在「管理后台 → 系统信息 → AI 白名单」中添加

拖拽 ZIP 文件到上传区，或点「点击选择文件」选本地 ZIP。

导入过程会校验：

• ZIP 内必须包含 vite.config.js 或 vite.config.ts
• 项目必须是 Vue 3 或 React + Vite，并与当前模块技术栈兼容
• ZIP 中需要能唯一识别项目根目录；存在多个候选项目时会要求重新整理压缩包
• 文件总大小 ≤ 50 MB（压缩前）

导入完成后会显示一份导入结果对话框：

• 已导入文件数
• 依赖版本调整（系统会自动把版本号调整到白名单允许的范围）
• 不在白名单的依赖列表（保留代码但不安装，对应的 import 编译时会失败）
• 跳过的文件（如二进制资源、超大文件）

导入会替换当前模块源码。确认结果后，回到预览区执行编译并刷新；导入前建议先创建检查点或下载源码备份。

---

十三、日志面板

底部状态栏右下「日志」按钮（或者文件数右侧的图标），打开右侧日志抽屉：

每条日志带时间戳和分类标签：

标签	含义
[preview]	iframe 预览加载状态、Vue 挂载情况
[load]	文件加载（从平台拉取项目文件）
[compile]	编译开始 / 编译成功（带耗时 ms）/ 编译失败
[ai]	AI 对话相关事件
[smoke]	API 烟囱测试结果
[performance]	本轮总耗时、AI、构建、预览和 Token 汇总

顶部操作：

• 搜索日志：按关键词实时筛选
• 复制 / 导出：复制当前日志，或导出为文件留存排查
• 精简 / 详细：切换日志信息密度
• 全屏 / 清空 / 关闭：扩大查看区域、清理当前记录或收起面板

每轮生成完成后，日志顶部会出现「本轮性能」卡片，主要字段如下：

字段	含义
总耗时 / AI 响应 / 构建 / 预览就绪	这一轮从发送到可预览的分阶段耗时
首段文本 / 首个工具 / 首次写文件	定位首响应慢发生在哪一段
模型 / 轮次 / 后端回合 / 后端编译	生成链路与后端耗时
Token / Token 来源	本轮 Token，以及是来自本轮消息、结果帧差值还是异常兜底
源码变更 / 触发构建 / 检查预览	判断本轮是否真的改了文件、是否需要重新构建

开启「保存本地性能历史」后，可在卡片内展开最近记录。无源码变化的轮次会明确显示「源码未变化、构建 0ms、未触发构建」：

对话输入区旁的 Token 数字是当前会话累计值；日志性能卡片里的 Token 是当前轮。比较单轮成本时应看性能卡片，不要用会话累计值代替。

💡 调试时把日志面板放在右侧，对话面板留在左侧——可以一边和 AI 沟通一边监控编译和运行状态。

---

十四、常见问题

Q1：AI 给我写的代码 import 了一个白名单外的包，编译失败怎么办？

项目保存或导入时，白名单外依赖不会被安装；相关 import 会在编译阶段失败。两个办法选一：

• 让管理员把包加入「管理后台 → 系统信息 → AI 白名单」（推荐，长期方案）
• 在对话里告诉 AI："请用 XXX（白名单里有的包）替代 YYY"

常用默认 UI 依赖已经包含 Vue PC 的 Element Plus、Vue 移动端的 Vant、React PC 的 Ant Design、React 移动端的 Ant Design Mobile，以及 uni-app 的 uni-ui。弹窗里的可用依赖清单才是当前环境的最终依据。

Q2：AI 生成的代码有 bug，预览页报错，怎么让 AI 自己修？

默认开启「自动修复错误」。系统检测到编译错误、预览页 JavaScript 错误、API 烟囱测试或页面接口失败时，会自动整理错误上下文并反馈给 AI，每轮用户输入最多自动尝试 2 次。

如果关闭了自动修复，或者两次后仍未解决，可以点击错误提示中的「让 AI 修复」，也可以把日志和复现步骤直接发给 AI。

Q3：怎么让 AI 改动后立即看到效果？

默认开启「自动编译」——AI 对话完成时会自动重新编译并刷新预览。

如果本轮没有修改任何源码，系统会跳过持久化和构建，这属于正常优化；日志性能卡片会显示「源码未变化、构建 0ms」。

如果关闭了自动编译，需要：

1. 点工具栏「编译并刷新」
2. 如果编译成功但仍显示旧资源，点预览工具栏「清除缓存」重新加载 iframe

Q4：误删了文件 / 改坏了代码，怎么找回？

去版本历史找最近的快照回滚。即便没建检查点，AI 对话完成时也会自动建快照，应该能找到。

Q5：项目配置选错了想重新选？

访问权限可以随时修改。目标终端、框架、语言、主题色和国际化等技术偏好一旦保存就会固化；这些选错时，最干净的做法是：

1. 下载项目源码备份
2. 删除当前模块
3. 重建模块、重新配置
4. 导入备份的 zip

如果新旧配置差太多（比如换框架），手动改导入后的代码可能比让 AI 重写更费时——这时直接让 AI 重写更快。

Q6：发布后用户访问还是旧版本？

先确认用户打开的是访问地址而不是预览地址，并检查本次发布是否成功。浏览器缓存未更新时，可在 Studio 预览区执行「清除缓存」，或让用户强制刷新（Cmd+Shift+R / Ctrl+Shift+F5）。仍未更新时，到版本历史确认最新的发布快照，再看第十节的两个地址区别。

Q7：和 AI 沟通如何更高效？

经验性建议：

• 需求越具体越好：不说"做个好看的页面"，说"做个 PC 端学生信息卡片，每行 3 个卡片，hover 时阴影变深"
• 数据先行：明确要展示什么字段，几条数据，从哪来（mock / 织信平台 / 调用某个接口）
• 指出参考：传一张设计稿截图 / 一段 PRD / 一个类似产品的链接
• 分步迭代：先让 AI 出骨架，看效果，再迭代细节。不要一次塞 10 个需求

Q8：织信内置的 informat skill 和 AI 自己写脚本的关系？

informat 是 AI 的一个工具集，AI 通过它在织信平台上查询表和字段、创建脚本、注册 API。具体内部工具名可能随版本变化；用户只需要在需求里明确“先查真实结构，不要猜字段名”“创建只读接口并烟囱测试”。这些操作的结果会出现在「资源抽屉」里（第七节），也会出现在织信平台对应的脚本管理、API 管理页面。

简言之：AI 写的脚本和 API 是真正注册在织信平台上的，不是凭空生成的代码——所以可以被其它织信模块复用，也受平台的权限/审计约束。

Q9：如何修改 AI 网站项目文件的存储目录？

AI 网站的本地项目工作目录默认为 /informat-next/codestudio。系统管理员可以进入「管理后台 → 系统信息 → 参数设置 → AI」，修改「AI 网站工作目录」。新目录必须是服务器绝对路径，并且不能使用文件系统根目录 /。

请严格按下面的顺序操作：

1. 确认当前没有正在生成、编译或发布的 AI 网站任务。
2. 先把旧工作目录的全部内容完整移动到新路径，不要只复制某个项目的源码目录。
3. 确认运行织信服务的系统用户对新目录具有读写权限；集群部署时，所有执行 AI 网站任务的节点都必须能通过相同路径访问该目录。
4. 在管理后台填写新路径并确认保存。配置保存后会立即热更新，不需要重启服务。
5. 打开一个已有项目，执行一次编译并检查预览、日志和版本历史，确认迁移完整后再恢复正常使用。

切换前必须自行完成目录迁移

系统不会自动迁移、校验或回滚文件，也不会保护切换时仍在运行的生成任务。如果新目录内容不完整，或者存在权限、磁盘、挂载问题，已有项目源码、缓存、日志或任务可能不可用；相关数据恢复需要管理员自行处理。

如果 JVM 启动参数使用 -Dcodestudio.workdir=... 覆盖了该配置，管理后台保存的新路径不会生效，需要修改启动参数后重启服务。

Q10：为什么输入区显示的 Token 和日志性能卡片不同？

输入区显示当前会话累计 Token；日志性能卡片显示当前轮 Token。新建会话或连续多轮时，两者不同是正常的。排查某一轮是否降耗，应比较日志里的当前轮数据和 Token 来源。

---

十五、实战例子二：用学生表生成统计 Dashboard

15.1 先核对真实字段

给 AI 的需求如下：

请帮我做一个「学生人数统计」页面，数据来自当前应用里的「学生信息」表。页面上放两个图表：一个按性别统计学生人数，另一个按年级统计学生人数；如果表里没有直接的年级信息，可以根据入学日期计算。页面要简洁清楚，在电脑和手机上都能正常查看。这个页面只用于统计展示，不要新增、删除或修改学生数据。完成后请帮我检查数据和页面是否能正常显示。

这段需求只需要说明业务目标、数据来源、展示效果和操作边界。具体使用哪些字段、如何统计、是否需要脚本或接口，以及选择什么图表组件，都可以交给 AI 查询并决定。

15.2 生成页面

发送需求后，AI 会先查询「学生信息」表的真实字段，再根据展示需要创建只读统计脚本和 API，最后生成页面代码并检查编译、预览和响应式布局。

对于同时包含数据资源和前端页面的需求，推荐分成两步沟通：

1. 先让 AI 查询字段、创建脚本和 API，并确认接口可以返回统计数据。
2. 再让 AI 使用已确认的接口生成页面，检查 PC 和手机预览。

这个示例的工程新增 views/StudentStatsView.vue，并修改 router/index.js 和 App.vue：

PC 预览中，饼图显示性别分布，柱状图显示各年级人数：

切换到手机预览时，两个图表卡片应改为单列。若标题、图例或图表标签被截断，可直接告诉 AI 具体设备宽度和被截断的位置，让它调整图表边距、标签格式或断点样式。

15.3 创建的脚本与 API

AI 创建的示例脚本为：

• 名称：ai_psddwi5toln5w_studentStats.js
• 功能：genderCount 和 gradeCount 两个只读聚合函数

注册的两个 API 为：

• GET ai/psddwi5toln5w/students/gender-count
• GET ai/psddwi5toln5w/students/grade-count

前端通过这两个接口读取统计结果，不直接修改「学生信息」表。接口的查看和排查方法见第七节。

15.4 完成后验收

完成后按下面的顺序检查：

1. 在代码面板确认页面、路由和 App.vue 已生成，没有不需要的文件改动。
2. 在脚本和 API 资源抽屉确认两个统计函数、请求路径和启用状态。
3. 在 PC 预览确认图表数据、标题、图例和空状态都符合需求。
4. 切换平板和手机预览，确认卡片堆叠、图表标签和页面宽度正常。
5. 打开日志，确认编译、接口调用和质量检查没有阻断项。
6. 创建检查点，再发布给用户访问。

---

十六、实战例子三：Git 配置与同步流程

AI 网站可以连接 GitHub、GitLab、Gitee 等 Git 仓库，用于拉取已有工程、推送当前源码和保留团队协作记录。Git 同步是可选功能；不配置仓库也不影响 AI 生成、预览和发布。

16.1 当前 Git 菜单

代码面板的 Git 下拉包含 4 项：

• 拉取（Pull）：预览并合并远程变更
• 推送（Push）：查看本地与远程差异，填写 Commit 说明后推送
• 同步历史：查看 Push、Pull 和配置记录
• Git 配置：填写远程仓库、分支、认证和目标路径

未配置远程仓库时，Pull / Push / 同步历史不会执行外部写入；先保存 Git 配置才会解锁完整同步链路。

16.2 Git 配置

字段说明：

字段	说明
仓库地址	HTTPS 或 SSH 仓库地址
分支	默认 master
认证方式	用户密码 / Personal Access Token，或 SSH 私钥
目标路径	可选；一个仓库保存多个项目时填写相对目录
发布时自动 Push	发布成功后自动提交并推送，默认关闭

首次同步前请确认

建议使用专用仓库和分支。Pull 前先创建检查点，Push 前检查变更清单和 Commit 说明；不要把密码、Token 或 SSH 私钥写进项目源码。

16.3 正式使用流程

1. 在 GitHub、GitLab 或 Gitee 创建专用仓库和分支。
2. 在「Git 配置」中填写地址、认证方式和可选目标路径；不要把 Token 写进源码。
3. 远程已有工程时先创建检查点，再 Pull；远程为空时从 Studio 执行第一次 Push。
4. 日常协作先 Pull、再修改、再 Push；发生冲突时逐文件保留 LOCAL / REMOTE 或手工编辑结果。
5. 在「同步历史」核对每次操作的状态、错误信息和 Commit hash。
6. 需要发布即备份时再开启「发布时自动 Push」，但仍要定期检查同步历史。

---