AI 网站

织信「AI 网站」（AI Code Studio）是一个让你用自然语言对话生成完整 Vue 3 应用的AI开发 / 智能编程一体化设计器。本文从「创建第一个模块」到「发布上线 / Git 同步」，按操作顺序覆盖全部功能。

适用版本：v0.5.9 build2509 及更高版本。截图取自 UAT 环境，正式环境界面一致。

---

目录

• 一、AI 网站是什么
• 二、快速入门：5 分钟做出第一个页面
  • 2.1 创建 AI 网站模块
  • 2.2 项目配置（首次进入）
  • 2.3 用对话生成页面
  • 2.4 看到预览效果
• 三、界面布局总览
• 四、对话面板（左侧）
  • 4.1 输入区与发送
  • 4.2 上传附件辅助生成
  • 4.3 模型选择
  • 4.4 清空对话历史
  • 4.5 思考过程 / 执行计划 / 子任务
  • 4.6 对话设置
• 五、工作区（右侧）
  • 5.1 预览面板与多端切换
  • 5.2 工具栏按钮
• 六、代码面板与文件管理
  • 6.1 文件树
  • 6.2 编辑器
  • 6.3 系统模板文件（boilerplate）保护
• 七、脚本与 API 资源
• 八、项目配置（查看模式）
• 九、版本历史与回滚
  • 9.1 版本列表
  • 9.2 创建检查点
  • 9.3 对比版本
  • 9.4 回滚到某个版本
• 十、访问地址与发布
• 十一、Git 仓库双向同步
• 十二、项目导入与下载
• 十三、日志面板
• 十四、常见问题
• 十五、实战例子二：用学生表生成统计 Dashboard
  • 15.1 需求和约束
  • 15.2 AI 执行过程
  • 15.3 资源抽屉里的真实脚本和 API
• 十六、实战例子三：Git 双向同步实战
  • 16.1 准备工作
  • 16.2 推送（Push）
  • 16.3 拉取（Pull）
  • 16.4 同步历史
  • 16.5 推荐的协作姿势

---

一、AI 网站是什么

一句话理解

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

不需要懂代码、不需要装环境、不需要画原型，整个过程就像跟一个"既懂设计又懂编程的同事"在聊微信：你描述需求，它边想边做，几十秒到几分钟出活。做完不满意？接着说"再加一个搜索框"、"颜色改成深蓝"、"卡片改成两列"——它会接着改。

它能帮你做什么

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

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

• 对话即开发：你用中文描述需求，AI 直接产出 Vue 3 单文件组件、路由、脚本、后端 API。
• 白名单可控：编译环境预装精选 npm 包（Vue、Element Plus、ECharts、Pinia 等），AI 不会引入未审计的依赖。
• 沙箱预览：每次对话结束自动编译，右侧 iframe 实时刷新；编译/运行错误一键反馈给 AI 修复。
• 版本可回滚：每轮对话自动建快照，做坏了能回到任何一版。
• 可手工接管：AI 写的代码完全可读可改，文件树 + Monaco 编辑器自由操作。
• 与平台数据互通：默认接 informat 平台数据；AI 会按规范创建脚本和注册 API，避免污染。

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

---

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

2.1 创建 AI 网站模块

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

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

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

2.2 项目配置（首次进入）

第一次进入 AI 网站主视图，会自动弹出**「项目配置」对话框**——这是一份只能设一次、之后只能查看的项目偏好，AI 每一轮生成都会严格遵守它：

最稳妥的做法：什么都不改，直接点「保存并开始」。系统会使用默认组合 PC + Vue 3 + JS + Element Plus + ECharts + 对接织信数据——绝大多数业务场景这套都够用。

如果你想自定义，点「高级选项」展开：

各字段含义：

分组	字段	说明
目标终端	PC / 移动端	影响默认布局、组件库的响应式策略
框架	Vue 3 / React	React 暂不支持，目前仅支持Vue3
语言	JS / TS	TS 模板暂未就绪
UI 与样式	UI 框架	Element Plus（默认）/ Ant Design Vue / Naive UI 等
UI 与样式	CSS 方案	CSS（默认）/ SCSS / UnoCSS / Tailwind
UI 与样式	图标库	Element Plus Icons / @vicons 等
UI 与样式	图表库	ECharts（默认）/ AntV / Chart.js
UI 与样式	布局模板	不限制（推荐）/ 空白页 / 上下布局 / 侧边栏 / Dashboard 网格
UI 与样式	主题色	影响 AI 生成的主色调
数据与国际化	数据对接	对接织信数据（推荐，调用织信脚本和 API）/ mock 数据 / 纯静态
数据与国际化	国际化	是否要求写出来的页面支持多语言

⚠️ 项目配置一旦"保存并开始"就固化了，后续无法修改，只能查看。要换技术栈得新建一个 AI 网站模块，避免半路换 UI 库导致 AI 生成的旧代码大面积失效。

2.3 用对话生成页面

保存项目配置后进入 Studio 主视图，左侧是对话面板（空状态，提示「在左侧输入需求开始创建页面」），右侧是引导卡片：

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

左下输入框的辅助按钮：

• 📎 上传附件：可以传 PNG/JPG 设计稿、PDF/Word/Excel 需求文档，AI 会读取内容并参考。
• ⚙️ 项目配置：随时打开项目配置对话框（查看模式）。
• 🔧 设置：对话相关偏好（详见 4.6）。
• ➤ 发送：默认回车键发送，Shift+回车换行（可在设置里改）。

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

做一个简洁的欢迎页：顶部一个主标题「我的学习中心」，下面 3 个卡片横向排列：今日待办、推荐课程、学习记录。全部用 mock 数据，不需要接后端。设计要简洁现代。

点发送，AI 启动会话：

顶部 banner 显示「会话已就绪 | 模型：deepseek-v4-pro | Skills: update-config, debug, simplify, batch, notify, wecom, find-skills, informat」——表示 AI 已就位、可用工具已加载、计时开始。

随后 AI 会进入思考 → 列计划 → 逐项执行的流程：

这一张图同时呈现了 4 个关键元素：

1. AI 中文回复（"这个需求纯前端 mock，无需创建脚本或 API..."）——AI 的策略说明。
2. 执行计划卡片——AI 把任务拆成可执行步骤（创建 WelcomePage.vue / 更新 router/index.js / 更新 App.vue），逐项打勾。
3. 思考过程卡片——AI 当前内心独白（英文）。
4. 子任务行——AI 调用工具的实时进度，例如 Bash ls /workspace/src/ 表示它在浏览现有代码。

💡 思考过程和工具调用对调试很有用，但内容长。如果你看不下去，可以在对话设置开启「隐藏思考与工具细节」，只看 AI 的最终回复。

2.4 看到预览效果

等 AI 跑完（演示用例约 80 秒），右侧自动切到「代码」标签，文件树和编辑器都填好了：

底部状态栏 Turns: 9 | Duration: 78.4s、编译成功、右下角 9 个文件——这些都是健康指标。

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

3 个 mock 卡片（今日待办 2/6、推荐课程 5门、学习记录 28h）都按需求做了出来。AI 一轮就完成了完整的视觉、布局、mock 数据、卡片交互。

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

---

三、界面布局总览

Studio 视图分两栏：

• 左侧 对话面板（约 1/3 宽度）：和 AI 沟通的全部入口。可用顶部的「隐藏 / 显示对话」开关折叠，给右侧腾出空间。
• 右侧 工作区（约 2/3 宽度）：内含「预览」和「代码」两个标签，加上一排工具栏按钮。

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

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

---

四、对话面板（左侧）

4.1 输入区与发送

底部多行输入框支持：

• 回车发送 / Shift+回车换行（可在设置改成相反）。
• 文本无长度限制，但单条建议控制在 500 字以内——更长的需求建议拆成多轮，或者上传需求文档。
• AI 正在响应期间输入框置灰显示「等待回复中...」，新消息无法发送。可以点红色「停止」按钮中断当前轮。

4.2 上传附件辅助生成

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

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

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

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

4.3 模型选择

对话面板顶部「AI 模型」下拉可以切换模型（不同环境可选项可能不同，常见的有 deepseek-v4-pro / claude-sonnet-4-6 / gpt-5 等）。

右侧「+ 新增 AI 模型」按钮支持接入自定义模型（需要管理员先在管理后台配置接入凭证）。

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

4.4 清空对话历史

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

适用场景：

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

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

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

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

完整的对话面板示例：

4.6 对话设置

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

5 个开关：

开关	默认	作用
回车键发送	✅ 开	关闭后回车换行、点发送按钮才发；仍可用 Ctrl/⌘+回车 发送
新消息自动滚动到底部	✅ 开	关闭后保持当前滚动位置，方便回看历史
隐藏思考与工具细节	❌ 关	开启后会话窗口只展示用户消息与 AI 最终回答，隐藏思考过程和工具调用卡片
自动编译	✅ 开	关闭后所有自动编译都不再触发，需手动点工具栏「编译并刷新」
自动创建版本快照	✅ 开	关闭后只影响"AI 对话完成"和"手动编辑闲置 5 分钟"这两种场景的自动快照；发布快照和手动检查点不受影响

---

五、工作区（右侧）

5.1 预览面板与多端切换

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

PC 视图（默认，全宽）：

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

手机视图（窄屏单列）：

💡 多端切换只改预览容器宽度、不改代码——是否真的响应式取决于 AI 生成的代码本身用没用响应式样式。让 AI 在需求里明确"要在手机上也好看"会更稳。

5.2 工具栏按钮

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

按钮	作用
隐藏 / 显示对话	折叠左侧对话面板，工作区占满屏
新窗口打开	把预览地址在新标签页打开，方便对比、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 用 _save_informat_script 在织信平台创建的后端脚本，文件名按 ai_ 前缀过滤
• API——AI 用 _api_create_define 在织信平台注册的 HTTP API，路径按 ai/ 前缀过滤

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

脚本抽屉（mock 演示项目下，空状态）：

API 抽屉：

抽屉顶部一个「刷新」按钮——从平台同步最新的脚本和 API 列表。如果你确认 AI 已经调用了 _save_informat_script 或 _api_create_define，但抽屉里没显示，点刷新。

有内容时抽屉会列出：

• 脚本：脚本名、说明、关联函数；点击展开查看脚本内容；右侧有「更新 / 新建」按钮（标识这是新建还是更新已有脚本）。
• API：路径、方法、关联脚本函数；点路径直接跳到 API 配置窗口；右上「烟囱测试」批量调用所有读类 API 做冒烟检查。

💡 上面这两张图都是**演示项目（mock 数据）**的空状态。一旦你的需求涉及"接织信数据"，AI 会自动调用 informat skill 在平台上建脚本和 API，抽屉里就会有内容。

---

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

随时点对话面板底部的「⚙️ 项目配置」按钮，可以查看一开始固化下来的偏好：

副标题写着「已固化的项目偏好，不可修改」，所有字段置灰。这里的作用是让你和 AI 都能随时回顾约定——技术栈、布局、数据来源、是否 i18n。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 状态对应的版本
• 三个操作按钮：对比当前 / 回滚到此版本 / 删除

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>/index.html）
  应用发布后的访问地址，使用者看到的是上一次发布时的版本。这是要交付给业务用户的链接。

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

发布

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

发布做的事：

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 格式私钥）
• 配置完点「保存」只保存配置，点「保存并立即克隆」会立即用仓库内容覆盖当前模块（操作前确保已 push 当前改动！）

典型使用流程：

1. 在 GitHub / GitLab / Gitee 建一个空仓库
2. 在「Git 配置」填仓库地址 + Token
3. 第一次：在自己电脑用 git clone 拉空仓库 → 用「下载项目源码」把当前代码下载放进去 → git push 推上去
4. 之后：每次发布前点「推送」把当前 draft 同步到 Git；想拉别人的改动点「拉取」

💡 配置好 Git 之后，对话设置里也可以打开"发布时自动 push"——每次发布自动提交推送到远程仓库，省一步。

---

十二、项目导入与下载

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

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

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

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

• ✅ 仅支持 Vue 3 + Vite 项目——其它框架的代码导入后会报错
• ✅ 当前可用 npm 依赖（共 10 个）：vue / vue-router / pinia / element-plus / @element-plus/icons-vue / echarts / vue-echarts / dayjs / lodash-es / axios（具体清单以你环境的项目配置为准）
• ⚠️ 项目中用到列表外的库：导入后保留但不会被安装；请联系系统管理员在「管理后台 → 系统信息 → AI 白名单」中添加

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

导入过程会校验：

• ZIP 内必须包含 vite.config.js 或 vite.config.ts
• 项目必须是 Vue 3 + Vite
• ZIP 不能嵌套多层目录（项目根直接打包）
• 文件总大小 ≤ 50 MB（压缩前）

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

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

---

十三、日志面板

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

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

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

顶部操作：

• 搜索日志：实时筛选
• 复制全部 / 精简模式 / 全屏 / 清空 / 关闭

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

---

十四、常见问题

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

两个办法选一：

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

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

预览面板会有红色 banner 显示编译错误 / 运行时错误，点 banner 上的「让 AI 修复」按钮——系统会自动拼接错误堆栈和上下文，作为反馈消息发给 AI，AI 会读取错误并尝试修复。

如果你直接在对话里描述错误也行，但用按钮自动反馈信息更全面。

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

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

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

1. 点工具栏「编译并刷新」
2. 或者按 F5 刷新整个 Studio 页面（不推荐，会清状态）

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

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

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

项目配置一旦保存就固化，不能改。最干净的做法：

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

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

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

「发布」会把访问地址指向当前 draft 的最新状态，但浏览器可能缓存了 HTML——让用户强制刷新（Cmd+Shift+R / Ctrl+Shift+F5）或者让他们等几分钟。如果隔很久还是旧的，看第十节的访问地址 vs 预览地址区别。

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

经验性建议：

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

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

informat 是 AI 的一个工具集，AI 通过它在织信平台上创建脚本（_save_informat_script）/ 创建 API（_api_create_define）/ 查询字段（_query_table_fields）等。这些操作的结果会出现在「资源抽屉」里（第七节），也会出现在织信平台对应的脚本管理、API 管理页面。

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

---

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

前面所有截图都基于 mock 数据的「我的学习中心」示例——好处是单纯演示 UI 和代码功能，缺点是脚本/API 都是空的。这一节用一个真实业务场景展示 AI 怎么读织信数据、写后端脚本、注册 API、再用前端组件可视化。

15.1 需求和约束

应用已有 student 表，里面有 gender（性别枚举：男/女）、enterDate（入学日期，用来推算年级）等字段。我们希望做一个 dashboard：

• 左侧饼图：按性别统计学生人数
• 右侧柱状图：按年级统计学生人数

按下面的格式给 AI：

做一个学生统计 dashboard 页面：

左侧饼图：按性别统计学生人数。
右侧柱状图：按年级统计学生人数。

要求：

1. 先用 informat skill 查学生表的字段定义（找性别、年级字段）。
2. 创建一个聚合脚本，分别返回 [{gender, count}] 和 [{grade, count}]。
3. 注册两个 GET API：/api/student-by-gender 和 /api/student-by-grade。
4. 前端用 vue-echarts 渲染两个 chart，axios 调用上面两个 API。
5. 顶部加标题"学生人数统计"，整体使用 Element Plus 卡片布局。

指令把整个流程都列清楚——查字段 / 写脚本 / 注册 API / 前端调用，AI 会按这个 5 步执行。字段先行：让 AI 先去问真实的数据库 schema，避免它瞎猜字段名。

15.2 AI 执行过程

发送后 AI 会进入多轮工具调用：

执行中可以看到一系列子任务：

典型的步骤序列（这次实际跑了 21 turns / 170.2s）：

步骤	AI 用的工具	做了什么
1	_query_table_list	查应用里的所有表，找到 student 表
2	_query_table_fields	查 student 表的字段定义，确认 gender 是 ListSelect 枚举（男/女）/ enterDate 是日期
3	_save_informat_script	创建脚本 ai_<moduleId>_students.js，内部用 queryList('student', {}) 拉数据 + JS 内分组聚合
4	_api_create_define	注册 GET /api/<moduleId>/students/by-gender
5	_api_create_define	注册 GET /api/<moduleId>/students/by-grade
6	创建 views/StudentDashboard.vue	前端 ECharts 渲染 + axios 调上面两个 API
7	更新 router/index.js、App.vue	加路由 + 视图组件

AI 自动跑完后切到代码面板：

预览页（如果数据库里有数据会渲染图表，这里 demo 库为空，所以显示"暂无数据"）：

15.3 资源抽屉里的真实脚本和 API

打开代码面板工具栏「API 接口 → 脚本」：

抽屉显示真实的 informat 脚本：ai_d4hsl3bh9wmlk_students.js（命名规则 ai_<moduleId>_<businessName>.js）+ informat 平台分配的脚本 ID + 状态标签「新建」。点击脚本名可以查看完整脚本内容、或者在织信平台「脚本」模块直接管理。

打开「API 接口 → API」：

抽屉显示两个真实 API：

• 学生性别统计 → GET /api/d4hsl3bh9wmlk/students/by-gender
• 学生年级统计 → GET /api/d4hsl3bh9wmlk/students/by-grade

这些 API 是在 informat 平台真正注册的——可以从平台其它模块（甚至外部系统）调用，受平台权限和审计控制。

---

十六、实战例子三：Git 双向同步实战

第十一节讲了 Git 的概念和入口，这一节用一个已经配好 Gitee 远程仓库的真实模块走一遍完整的双向同步流程。

16.1 准备工作

例子模块是用户预先配好 Git 的 mjw8m3acc8hhk（一个"学生教学信息反馈系统"的登录页演示）。仓库地址 https://gitee.com/lee_3do/zxxin-informat-feedback.git，分支 master，认证用 HTTPS + 用户密码（Token）。

打开代码面板工具栏「Git → Git 配置」可以看到完整配置：

配置一旦保存，工具栏的 Git 下拉就解锁完整 4 项：

• 拉取（Pull）——把远程的提交合并到本地
• 推送（Push）——把本地未推送的改动提交并推到远程
• 同步历史——查看推送/拉取/配置操作日志
• Git 配置——修改远程仓库地址、分支、认证方式

16.2 推送（Push）

随便改一个文件（比如 views/LoginView.vue 改一个文案），保存后点「Git → 推送」，弹出推送对话框：

字段说明：

字段	来源 / 含义
待推送 N 个变更	自动 diff 本地 vs 远程 master 得到的文件列表
提交者	来自织信账号（自动填，可改）——会写到 git commit 的 author
E-mail	来自织信账号的 email——写到 git commit author email
Commit 消息	你输入的提交说明。空着会用默认 auto-back-up <时间戳>
重置本地修改	左下角红色文字按钮——慎用，会把本地改动全部丢弃、reset 到上次 push 的状态

点「确认」开始推送，状态显示在日志面板，成功后顶部会有 toast 提示「推送成功」。

16.3 拉取（Pull）

如果别人在 Gitee 那边改了代码并 push，你这边要先拉下来。点「Git → 拉取」，弹出预览对话框：

预览展示：

• 要更新的文件清单（带 + / - / ~ 标识新增 / 删除 / 修改）
• 本地 commit → 远程 commit 的 hash 跳转
• 上方警告：如果检测到本地有未推送的修改且和远程冲突，会提示先备份

点「应用 Pull」执行合并。冲突解决：如果同一行被本地和远程都改了，会弹冲突解决器——左侧本地版本、右侧远程版本，逐文件选择保留哪一边。

16.4 同步历史

点「Git → 同步历史」打开所有 Git 操作日志：

每行显示：操作（auto-back-up / Push / Pull / 配置变更）/ 时间 / 状态（成功/失败）/ 信息 / Commit hash / 备注。这是最好的 Git 调试入口——某次推送失败、想看具体错误信息？翻到那一行点 Commit hash 复制下来，配合 Gitee 平台对比就能定位问题。

16.5 推荐的协作姿势

• 发布前 Push：每次准备「发布」之前 push 一次，把当前 draft 备份到 Gitee。即使织信平台某天误删了模块代码，Git 仍能恢复。
• 多人协作分支策略：A 改 views/LoginView.vue、B 改 views/HomeView.vue，互不冲突时 push/pull 不会出问题。但同一个文件多人改最好分开：A 改完先 push，B pull 后再改。
• 不要把 Token 写到任何代码里——Token 只填在 Git 配置里，存到平台加密存储，git 提交内容不会包含 Token。
• 本地开发也可以 clone 这个仓库——用 IDE 直接改代码、git push 上来，AI Studio 下次 pull 就能同步到。这就是"AI 写代码 + 人工接管"的最干净链路。

---