【正文背景：Simfac 标准 / 2026-09-06】
浅色正文工作区背景统一使用 #DEE6EB（RGB 222,230,235），参考 https://lab.njwl.ai/simfac/ 实际画布清屏色 gl.clearColor(.87,.9,.92,1)，不要误取该页被画布覆盖的 CSS #E9EDEF。后续工业风页面同样使用此色。
统一定义 --workspace-bg:#dee6eb，并用于 body、main 工作区和示例工作区底层；卡片保持近白，顶栏 #fbfcfd、侧栏 #fafcfd，保持层次。纯色、不加渐变、不用降低透明度模拟。Three.js 画布可用 scene.background=new THREE.Color('#dee6eb')，原生 WebGL 可用 gl.clearColor(222/255,230/255,235/255,1)。
深色模式覆盖 --workspace-bg:#151c23，不将浅色背景硬编码到深色模式。Logo 沿用 Yuanli 规则，目录沿用 Simlab 唯一标准。

【Yuanli 紧凑品牌区 · 当前统一参考】
参考 https://lab.njwl.ai/yuanli/，此节取代此前 sim 版 80px 顶栏、26px 左边距和移动端 10px 间距。
Logo 本身不缩放：桌面82×38px，≤800px为72×34px；保持原始透明红黑/红白双版本。
桌面：顶栏78px，左右28px；Logo到标题区gap14px；分隔线右侧padding14px。
≤800px：左右8px；品牌区gap6px；分隔线右侧padding6px。≤700px顶栏62px；701–800px仍78px，这是参考页的实际断点。
标题：桌面中文18px/24px、英文10px/14px；移动中文15px/21px、英文9px/13px，均无额外上下margin。中文650、英文400，英文letter-spacing .08em。
Logo 图片框与两行标题整体等高。不同页面使用自身中英文名称；不要按标题文字长短缩放Logo。空间不足折叠右侧操作，不压缩品牌区。

你是前端设计师。请按「NJWL 工业工作台」设计语言制作网页，视觉配色沿用工业工作台；目录严格遵循下文 Simlab 唯一标准，品牌区严格遵循 Yuanli 规则。

【整体基调】
精密、安静、理性的工业软件工作台。冷灰大工作区、近白导航和浮层、钢蓝灰文字，少量工业红用于品牌与当前位置。内容是主角，避免大面积鲜艳配色、巨型标题、装饰渐变和过度圆润。

【配色：取自参考页】
工作区 #dee6eb；顶栏 #fbfcfd；侧栏 #fafcfd；浮层 #ffffffef。
主文字 #263645；正文 #425966；说明 #637986；弱标签 #8b979f。
结构边框 #d9e0e5；控件边框 #d1dbe1；细分隔 #e3e9ed。
深钢蓝 #253e4e：主要按钮和分段控件选中态，白字。
工业红 #d62e27：小面积品牌标记；当前位置浅红底 #f8eae7、文字 #a32f29、左线 #d9362b。
进度强调 #b8352e；键盘聚焦轮廓 #399acc。
红色用于导航强调时，错误必须同时有图标或明确文字，不仅靠颜色区分。

【布局】
顶部桌面 78px（≤700px 为 62px），左侧完整透明公司 Logo + 竖分隔线 + 中英文页面标题组，右侧放辅助说明或返回入口。
目录尺寸、排列、按钮位置与交互严格按下文「Simlab 唯一标准」；侧栏和长内容分别滚动。
工作区顶部紧凑工具栏，主内容以预览、图表、模型或业务内容为核心。必要说明放近白浮层，细边框、弱投影，不遮挡关键操作。
文档页面可用同样的工作台骨架容纳规范、色板和组件；不要求复制三维设备。

【字体与留白】
font-family: Inter, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif；使用系统回退，不强制下载字体。
顶栏标题 18px/650；内容标题 19–21px/600；正文 14px/1.7、字重 500；说明 12px/1.7；英文眉题 11px、字距 .16em；编号用等宽 12px。
内边距通常 18–22px；工具间距 6–8px。让布局对齐、文字层级和留白表达秩序。

【组件】
面板圆角 7px、边框 1px solid #d8e1e6，投影 0 8px 30px #1d364713。
按钮和输入圆角 4px，按钮内边距 9px 13px；次要按钮近白底、灰边、钢蓝字。
分段控件：白底容器、1px 灰边、7px 圆角、内边距 3px；选中项深钢蓝底白字，4px 圆角。
侧栏行：12px，padding 10px，左右 margin 9px、上下2px，gap 9px；完整状态与窄栏参数见 Simlab 唯一标准。
表格与参数用细线、紧凑字号；进度条仅滑块/已完成部分用暗红。下拉框、上一步/下一步等组成紧凑控制组。

【响应式与交互】
800px 以下保留窄图标栏，展开为宽目录抽屉，工具栏允许换行，面板宽度随屏幕收缩；不要横向溢出；手机目录按下文规范以临时抽屉覆盖正文，关闭后恢复。
所有示例控件应可操作，选中态同步 aria-pressed 或 aria-current；键盘可访问且焦点清晰，状态变化提供文字反馈。
如需动效，克制且遵守 prefers-reduced-motion。示例数据明确标注。

【公司页面约定】
保留返回设计规范入口、创建时间、更新时间、更新历史和保密页脚。需要水印时，使用不拦截操作的低透明度文字层。

【应用要求】
这是一套与「浅色蓝色工具风」并列的独立风格。新页面整体遵循上述配色、布局和组件，不只把原页面的蓝色换成红色。

【Logo 放置规范（以本节为准）】
1. 必须使用现成的完整公司 Logo 文件：https://ai.njwl.ai/design/industrial/njwl-logo-transparent.png 。这是带真实透明通道的 PNG，包含红黑图形、中文「凝聚未来」及 WIN THE FUTURE。不要重新生成、描摹、截取符号、增加底色或用红色小方块代替。不要使用旧的 njwl-logo-light.png。
2. Logo 放在全站顶部 header 的左侧品牌区，不放进侧边栏。左侧图标轨道展开或收起时，Logo 和标题位置保持不变。header 固定在视口顶部，横跨侧栏与正文。
3. 品牌区从左到右：完整 Logo → 留白 → 1px 浅灰竖分隔线 → 标题组。标题组上行为中文页面标题，下行为对应英文副标题；「工业工作台 / INDUSTRIAL WORKBENCH」是本页示例，其他页面应替换为自己的页面名，不重复写公司名。
4. 桌面 Logo 图片框宽 82px、高 38px；移动端（≤800px）宽 72px、高 34px。使用 object-fit:contain 保持原图比例，禁止拉伸。这里的尺寸是整个完整 Logo 图片框，不是单独图形的尺寸，浅色模式浅色不加底板；深色使用透明红白版 njwl-logo-dark.png，不加底板；深色模式在相同图片框内切换至透明红白版 njwl-logo-dark.png。
5. 桌面中文标题 18px、行高24px；英文副标题10px、行高14px，合计38px。移动端中文15px、行高21px；英文9px、行高13px，合计34px。中英文均 margin:0，英文 letter-spacing:.08em。Logo 图片框与两行标题组的顶部和底部对齐，不只是与中文标题单行对齐。
6. 桌面品牌区 display:flex;align-items:center;gap:14px，标题组 border-left:1px solid #d9e0e5;padding-left:14px。移动端 gap:6px;padding-left:6px。桌面顶栏高78px、左右padding 28px；≤800px 时左右padding 8px，≤700px 时顶栏高62px，701–800px 高78px。
7. 桌面中文标题字重650，英文400、颜色#8b979f；Logo 本身不使用 CSS 调色或混合模式。图片设置有意义的 alt（凝聚未来 WIN THE FUTURE）；img display:block，消除基线下方空隙。
8. 当空间不足时折叠右侧顶部导航，保持 Logo、分隔线与中英文标题组，不把英文隐藏，不把完整 Logo 挤压变形。侧栏宽窄切换不重排品牌区。

【字重：本页增强版】
- 正文、按钮、输入与导航 font-weight:500；内容标题 600；页面标题与小标题 650。
- 英文副标题、眉题、编号与代码保留 400，维持信息层级，避免全页面一律加粗。

【侧边目录：Simlab 唯一标准 / 2026-09-05】
目录唯一参考 https://lab.njwl.ai/simlab/ 。不要从 /sim/、/yuanli/ 或本设计文档外壳推断目录做法。品牌区继续遵循 Yuanli Logo 规则；目录和品牌区分别取各自规范。此节替代此前所有模糊的“约238px”“固定图标轨道”目录描述。

1. 骨架：顶栏横跨全屏，目录在顶栏下方；桌面 shell 占视口剩余高度，display:flex；aside flex-shrink:0、display:flex、flex-direction:column、overflow:hidden；main flex:1、min-width:0、min-height:0。目录标题、可滚动条目区、底部说明分三块，条目区 flex:1、min-height:0、overflow-y:auto。长正文在自身区域滚动；不要让目录标题跟条目一起滚走。
2. 精确断点：>1000px 宽栏238px；801–1000px 宽栏200px；>800px 收起统一64px。≤800px 默认固定64px图标栏，展开为238px浮层。所有尺寸使用 border-box，不能再用220/56px或百分比侧栏。默认桌面展开，记住用户明确的桌面宽窄选择。
3. 宽栏头部：min-height:72px、padding:18px 15px，flex横排，align-items:center、justify-content:space-between。左侧目录标题和英文小标题；英文9px、字距.12em、上间距4px。右侧放折叠按钮。参考页用☰菜单符号，按钮padding:5px 8px；若换成SVG，保持相同约30×29px按钮框、图形居中，不改成跨边界悬浮箭头。
4. 窄栏头部：隐藏标题组，padding:18px 16px，按钮留在侧栏内部左起16px的位置；不隐藏展开入口。宽栏按钮在右，窄栏按钮在左侧留白内，这是参考效果本身。不要强行锁定按钮与宽栏行图标的同一横坐标。
5. 分组标题：10px、字距.07em、颜色#8b979f，padding:16px 18px 8px。宽栏条目顺序严格是“SVG图标 → 编号 → 名称”。每行width:calc(100% - 18px)、margin:2px 9px、padding:10px、gap:9px、font-size:12px；border:0再设置border-left:2px solid transparent；border-radius:0；背景透明。
6. 图标：18×18px、flex-shrink:0、viewBox 0 0 24 24、fill:none、stroke:currentColor、stroke-width:1.4、round端点与转角。编号11px等宽、弱灰。条目用真实button或a，不用可点击div；提供title和可访问名称。
7. 窄栏隐藏分组标题、编号、名称、底部说明，仅保留同一批行的图标；条目justify-content:center、padding:12px 8px，保留margin和2px状态线。使用同一个DOM切换样式，不复制第二套目录。不要留下编号占位、竖向分隔轨道、背景渐变或空白文字列。
8. 当前项：浅色背景#f8eae7、文字#a32f29、左线#d9362b；深色背景#412b30、文字#ff928b。窄栏也完整保留选中底和左线。业务状态按钮同步aria-pressed；文档锚点使用aria-current，不混用多个当前项。
9. 手机：aside position:fixed，top为实际顶栏高度、left:0、bottom:0；main始终margin-left:64px。展开仅覆盖正文，不挤压正文、不改变main左边距。遮罩从top:顶栏高度、left:64px铺到右下角；顶栏z-index:30、目录20、遮罩19。遮罩关闭、Escape关闭、点条目后关闭；关闭回到64px而不是消失。
10. 状态：desktopNarrow与mobileDrawerOpen分开存储；只持久化桌面偏好。手机目录与顶部菜单互斥；跨800px断点清理抽屉和遮罩并同步aria-expanded与按钮名称。存储失败仍可操作。键盘焦点outline:2px solid #399acc、outline-offset:3px。
11. 顶部衔接：Simlab原页顶栏80px/手机72px；本站品牌规范是78px、≤700px为62px。接入本站时统一使用--header-height，同时驱动header高度、shell预留、aside top和遮罩top；不得把80/72硬编码混进78/62品牌布局。目录自身72px头部高度不变。
12. 验收必须检查：1440px展开238/收起64；900px展开200/收起64；390px默认64/展开238且正文不移动；刷新保留桌面偏好；手机选项、遮罩、Escape均回64；目录足够长时独立滚动；宽栏按钮在右、窄栏按钮可见；深色选中态和键盘焦点清楚。

防止复现走样：不要照抄 /sim/ 或 /yuanli/ 的目录；不要把侧栏整个隐藏；不要做固定56px图标轨道加文字面板；不要用折叠树/手风琴代替宽窄切换；不要将展开按钮放到正文工具栏、页顶Logo旁或侧栏边界外；不要仅换颜色就声称完成。以以上结构、参数和验收结果为准。

【顶部导航与兼容】
- 顶部导航负责跨页面切换：操作指南 / 设计语言 / 通用模组；侧栏只负责当前文档的章节。
- 电脑端横向显示顶部导航，当前页用钢蓝文字和细红线强调；手机端折叠为“菜单”。
- 顶部菜单与宽目录在手机上不同时展开。顶栏、侧栏、正文锚点留出相应空间，避免遮挡；窄屏正文不得横向溢出。

【水印共用模块】
- 本站引入 /module/watermark.js，蓝色规范、工业工作台与模块页读取同一配置，不叠加旧水印。
- 默认水印为公司名 + 内部资料 + 时间，透明度 .05、角度 -24°、字号 14px；不拦截点击。
- 水印管理放在 /module/admin/#watermark，管理员可预览、保存文字、透明度、角度、字号、间距和开关，页面约 60 秒同步。
- 水印用于标识和提醒，不能保证阻止截图或防篡改。

【访客 IP 历史模块】
- 管理入口放在 /module/admin/#visitors，使用管理员鉴权；公开页面不暴露 IP 明细。
- 从本站服务器访问日志增量读取真实记录，每分钟同步，查询库保留最近 30 天；历史仅覆盖现存可读取日志。
- 支持日期、完整 IP、页面路径筛选，分页与 CSV 导出；不保存 URL 查询参数、指纹或精确位置。
- 明确标注 IP 不等于具体人员，请求数不等于独立访客数，不从请求日志推断停留时长。


【Logo 品牌区可直接复用的 HTML】
<header class="site-header">
  <div class="site-brand">
    <img class="site-logo" src="https://ai.njwl.ai/design/industrial/njwl-logo-transparent.png" alt="凝聚未来 WIN THE FUTURE">
    <div class="site-titles">
      <h1 class="site-title">工业工作台</h1>
      <p class="site-subtitle">INDUSTRIAL WORKBENCH</p>
    </div>
  </div>
  <!-- 右侧放顶部导航，移动端折叠为菜单；不要改变左侧品牌区 -->
</header>

【Logo 品牌区可直接复用的 CSS】
.site-header{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;background:#fbfcfd;border-bottom:1px solid #d9e0e5}
.site-brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.site-logo{display:block;width:82px;height:38px;object-fit:contain;flex-shrink:0}
.site-titles{border-left:1px solid #d9e0e5;padding-left:14px}
.site-title{margin:0;font-size:18px;line-height:24px;font-weight:650}
.site-subtitle{margin:0;font-size:10px;line-height:14px;font-weight:400;letter-spacing:.08em;color:#8b979f}
@media(max-width:800px){.site-header{padding:0 8px}.site-brand{gap:6px}.site-logo{width:72px;height:34px}.site-titles{padding-left:6px}.site-title{font-size:15px;line-height:21px}.site-subtitle{font-size:9px;line-height:13px}}

【深色模式与适配】
提供浅色 / 深色 / 跟随系统三种外观，顶部按钮循环切换，正文选择器可直接选择。用 localStorage 记住明确选择；默认跟随 prefers-color-scheme，系统变化时自动更新。首屏绘制前应用主题，避免闪白；无法访问本地存储时仍可切换。
深色页面背景 #151c23；顶栏/侧栏 #19232d；面板 #202d38；输入/代码区 #16212b；边框 #415565。主文字 #edf2f7，正文 #bdcbd7，辅助文字 #a7b8c6；链接 #b7d7ed。
选中/主按钮使用浅钢蓝 #bad7e8 配深色字 #17232d；红色强调使用 #ff928b，浅红选中底 #412b30。保留原有红色语义、尺寸和层级，不用整页反色。
Logo 使用两份透明文件：浅色使用 njwl-logo-transparent.png（红黑），深色使用 njwl-logo-dark.png（红白）。深色版保留红色，将黑色图形及中英文文字改为 #edf2f7；不加底板、不使用 invert，不改变轮廓、透明通道、尺寸或位置。两份文件均位于 https://ai.njwl.ai/design/industrial/ 下，随 data-theme 自动切换。
统一覆盖顶栏、宽窄侧栏、顶部菜单、抽屉、遮罩、卡片、示例组件、输入、按钮、提示、代码、Toast、页脚和键盘焦点。示例色板仍展示标注的原始色值；颜色文字写明这是浅色基础色板。
水印在深色下改用浅灰字，继续沿用共用透明度与内容设置，不额外叠加一层。表单声明 color-scheme，让原生选择框与滚动条跟随主题。切换不改变正文内容、侧栏状态、字号和布局。
所有图标按钮有可读名称与焦点，当前模式有文字提示；正文提供主题选择器和真实控件效果区。

【深色 Logo 实施补充】
浅色资产：https://ai.njwl.ai/design/industrial/njwl-logo-transparent.png
深色资产：https://ai.njwl.ai/design/industrial/njwl-logo-dark.png
品牌区放两张等尺寸 img，分别标记 logo-light / logo-dark；浅色只显示前者，html[data-theme=dark] 时只显示后者。两图均为990×452透明PNG，使用既定82×38px / 72×34px显示框。不得添加白色底板。
@media(max-width:700px){.site-header{height:62px}}