leiyun
/
ute2e


			
				
					
						
						
							
							<!doctype html>
<html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>作业指导页面风格统一 · 验证报告</title>
<style>
body{margin:0;background:#edf4f1;color:#143d36;font:15px/1.8 system-ui,"Microsoft YaHei",sans-serif}main{max-width:1300px;margin:32px auto;padding:0 24px}header,section,figure{margin:0 0 20px;padding:24px;border:1px solid #c9ddd7;border-radius:12px;background:white}h1{margin:0;font-size:27px}h2{font-size:19px;margin:0 0 12px}p{margin:8px 0}a{color:#087963}img{display:block;width:100%;border:1px solid #d4e3dd;border-radius:7px}figcaption{font-weight:600;margin-bottom:12px}.pass{display:inline-block;border-radius:16px;background:#e0f5eb;color:#087044;padding:2px 14px}table{border-collapse:collapse;width:100%}td,th{padding:10px 14px;text-align:left;border:1px solid #d6e3dd}th{background:#f1f7f4}.note{color:#57776d;font-size:14px}nav{display:flex;gap:18px;flex-wrap:wrap}summary{cursor:pointer}
</style>
<main><header><span class="pass">构建与浏览器检查通过</span><h1>作业指导页面风格统一</h1><p>2026-09-09 · 数字车间 / 内容制作</p><p>参照模型制作、场景制作的系统主题，统一指导书列表、模板库、编制、新建、预览和对外接口页面。</p><nav><a href="results.json">浏览器验证结果</a><a href="build.log">构建日志</a><a href="../../tools/guide-style-review.mjs">测试脚本</a></nav></header>
<section><h2>本次调整</h2><p>补充调整：模板库以完整白色内容卡片承载模板、分页与结构预览；对外接口的主内容、接口说明及契约区域统一使用系统白色背景。截图已更新，并重新通过构建与浏览器回归。</p><table><tr><th>页面</th><th>调整内容</th></tr>
<tr><td>指导书列表</td><td>使用系统搜索框、状态/排序选择器、带边框表格和统一分页；搜索需明确提交，支持重置。进入编制为主要操作，详情、预览、版本、下载和删除收进“更多”，权限及禁用条件保留。</td></tr>
<tr><td>模板库</td><td>移除重复大标题，统一页面边距、模板卡片、选中态和分页；较窄窗口改为两列，结构预览保留。</td></tr>
<tr><td>编制、新建、预览</td><td>统一工具栏、按钮、表单、侧栏和选中态颜色。编制器按视口分配高度，内部滚动。文档纸张及插图保留原有颜色。</td></tr>
<tr><td>对外接口</td><td>统一三栏面板、留白、输入框及按钮；长路径换行，较窄窗口将契约说明放到下方。暗色主题补齐背景与文字对比。</td></tr></table></section>
<section><h2>验证范围及结果</h2><table><tr><th>检查</th><th>结果</th></tr>
<tr><td>pnpm run build：类型检查、Vite 构建、模型编辑器产物检查</td><td>通过</td></tr>
<tr><td>12 条临时指导书：明确搜索、无结果、重置、下一页/上一页</td><td>通过</td></tr>
<tr><td>更多菜单、项目详情打开/关闭、进入编制、指导书预览、新建入口</td><td>通过</td></tr>
<tr><td>4 个模板：选择切换、结构预览、模板预览弹窗</td><td>通过</td></tr>
<tr><td>接口查询：执行 GET 项目列表，自检返回 200</td><td>通过</td></tr>
<tr><td>1920×911、1366×768；军绿、科技、石墨、暗色主题截图检查</td><td>通过</td></tr>
<tr><td>所有截取页面无整体横向溢出；无浏览器未捕获异常；局域网入口返回 200</td><td>通过</td></tr></table>
<p class="note">使用独立、用后关闭的浏览器上下文，在其本地指导书仓库准备 STYLE-1～STYLE-12 测试数据，没有修改用户浏览器中的现有指导书。未执行发布、删除、外部写入或下载生成的全面业务回归。本轮为样式调整与主要交互回归；接口页现有查询仍是本地工程自检，不代表新增了 HTTP 服务。</p>
<p class="note">编制器和模板预览保留现有自定义渲染及事件处理，宿主页负责系统控件和主题适配，避免样式调整影响文档编制与导出逻辑。构建保留现有大分包、Three.js URL 提示，无新增构建失败。</p></section>
<figure><figcaption>指导书列表：统一筛选、表格和主要操作</figcaption><a href="01-list.png"><img src="01-list.png" alt="指导书列表"></a></figure>
<figure><figcaption>更多菜单：保留全部次要操作及禁用状态</figcaption><img loading="lazy" src="02-list-actions.png" alt="列表更多菜单"></figure>
<figure><figcaption>模板库：统一外边距、卡片、分页和结构预览</figcaption><img loading="lazy" src="04-templates.png" alt="模板库"></figure>
<figure><figcaption>模板预览</figcaption><img loading="lazy" src="05-template-preview.png" alt="模板预览"></figure>
<figure><figcaption>指导书编制</figcaption><img loading="lazy" src="03-editor.png" alt="指导书编制"></figure>
<figure><figcaption>指导书编制 · 暗色主题</figcaption><img loading="lazy" src="03-editor-dark.png" alt="暗色编制器"></figure>
<figure><figcaption>指导书动态预览：纸张、插图保持原色</figcaption><img loading="lazy" src="03-guide-preview.png" alt="指导书预览"></figure>
<figure><figcaption>对外接口：导航、参数及契约说明</figcaption><img loading="lazy" src="06-api.png" alt="对外接口"></figure>
<figure><figcaption>接口查询结果</figcaption><img loading="lazy" src="07-api-result.png" alt="接口查询结果"></figure>
<figure><figcaption>暗色主题下的接口页面</figcaption><img loading="lazy" src="08-api-dark.png" alt="暗色接口"></figure>
<figure><figcaption>较窄窗口：模板库自动调整列数</figcaption><img loading="lazy" src="10-templates-laptop.png" alt="较窄模板库"></figure>
<figure><figcaption>新建指导书入口</figcaption><img loading="lazy" src="13-create-wizard.png" alt="新建指导书"></figure>
<section><h2>更多主题截图</h2><nav><a href="08-api-technology.png">科技主题</a><a href="08-api-graphite.png">石墨主题</a><a href="09-api-laptop.png">接口页 · 较窄窗口</a><a href="11-templates-dark.png">模板库 · 暗色</a><a href="12-list-dark.png">列表 · 暗色</a></nav></section>
</main></html>