From e8c89429d282a4a7fda72a3abed44d690469d80f Mon Sep 17 00:00:00 2001 From: "wang.yu" Date: Fri, 14 Aug 2026 20:28:50 +0800 Subject: [PATCH] =?utf8?q?StationBuilder=20v0.3=20=E5=8E=9F=E5=9E=8B?= =?utf8?q?=EF=BC=9A=E7=AB=99=E7=82=B9=E7=94=9F=E6=88=90=E5=B7=A5=E5=85=B7?= =?utf8?q?=20UI=20=E4=B8=8E=E7=9C=9F=E5=AE=9E=E6=A8=A1=E5=9E=8B=20AI=20?= =?utf8?q?=E8=81=8A=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit - 框架：Vinext（Next.js 16 + React 19 + Vite + Cloudflare Worker 运行时），纯前端 UI 原型 - 站点生成向导：项目列表 / 基本属性 / Asset 资产 / 功能菜单 / AI 配置 / 生成确认 / 结果预览 / 领域方案库等页面 - Wordbuddy 模型选择器（侧边栏弹出式）：单选、仅免费模型 Hy3 可选，其余灰显并标注 免费 / 订阅优先 / 费率 - 右下角浮动 AI 入口：点击打开 1/4 屏宽 × 70% 高对话窗口，可关闭 - AI 对话接通真实模型（CodeBuddy 能力）：按所选模型流式返回，渲染为对话气泡 - 后端：Worker 路由 /api/chat 同源代理到本地 Node 旁路 ai-sidecar.mjs，由旁路调用 codebuddy CLI（-p + stream-json）产出干净文本并流式回传；模型/密钥不进前端 - 已忽略 node_modules、.wrangler、.sites-runtime、.openai 及构建产物 --- .gitignore | 49 + .npmrc | 4 + README.md | 46 + ai-sidecar.mjs | 107 + app/api/chat/route.ts | 55 + app/chatgpt-auth.ts | 86 + app/globals.css | 53 + app/layout.tsx | 4 + app/page.tsx | 190 + db/index.ts | 13 + db/schema.ts | 4 + drizzle.config.ts | 7 + drizzle/meta/_journal.json | 5 + eslint.config.mjs | 18 + examples/d1/app/api/notes/route.ts | 58 + examples/d1/db/schema.ts | 9 + next.config.ts | 7 + package-lock.json | 11169 +++++++++++++++++++++++++++ package.json | 43 + postcss.config.mjs | 7 + public/favicon.svg | 6 + public/file.svg | 1 + public/globe.svg | 1 + public/window.svg | 1 + scripts/build-verified.sh | 28 + scripts/install-ci.sh | 189 + scripts/sites-env.sh | 52 + scripts/validate-artifact.sh | 37 + tests/rendered-html.test.mjs | 33 + tsconfig.json | 34 + vite.config.ts | 64 + worker/index.ts | 47 + 32 files changed, 12427 insertions(+) create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 README.md create mode 100644 ai-sidecar.mjs create mode 100644 app/api/chat/route.ts create mode 100644 app/chatgpt-auth.ts create mode 100644 app/globals.css create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 db/index.ts create mode 100644 db/schema.ts create mode 100644 drizzle.config.ts create mode 100644 drizzle/meta/_journal.json create mode 100644 eslint.config.mjs create mode 100644 examples/d1/app/api/notes/route.ts create mode 100644 examples/d1/db/schema.ts create mode 100644 next.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 public/favicon.svg create mode 100644 public/file.svg create mode 100644 public/globe.svg create mode 100644 public/window.svg create mode 100755 scripts/build-verified.sh create mode 100755 scripts/install-ci.sh create mode 100755 scripts/sites-env.sh create mode 100755 scripts/validate-artifact.sh create mode 100644 tests/rendered-html.test.mjs create mode 100644 tsconfig.json create mode 100644 vite.config.ts create mode 100644 worker/index.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..33c812c --- /dev/null +++ b/.gitignore @@ -0,0 +1,49 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +next-env.d.ts +tsconfig.tsbuildinfo +/dist/ +/.wrangler/ +/.sites-runtime/ +/outputs/ +/work/ + +# runtime / deployment config (auto-generated) +/.openai/ + +# production build output +/build/ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..0edab15 --- /dev/null +++ b/.npmrc @@ -0,0 +1,4 @@ +audit=false +fund=false +update-notifier=false +cache=.sites-runtime/npm-cache diff --git a/README.md b/README.md new file mode 100644 index 0000000..7fd6d2d --- /dev/null +++ b/README.md @@ -0,0 +1,46 @@ +# iStation StationBuilder UI 原型 + +这是 iStation 团队内部使用的 StationBuilder 交互原型源码包。 + +当前版本包含： + +- StationBuilder 站点生成工具 +- 领域方案库 +- 燃气、水务·自来水厂、新能源和数据中心模拟方案 +- 领域资产模板、运维流程、Cube 页面、菜单和领域知识 +- Wordbuddy AI 模型选择与生成策略配置 +- 站点生成、结果预览、JSON 查看和反馈交互 + +## 本地运行 + +环境要求：Node.js 22.13 或更高版本。 + +```bash +npm ci +npm run dev +``` + +按照终端显示的本地地址在浏览器中打开即可。通常为： + +```text +http://localhost:5173 +``` + +## 生产构建 + +```bash +npm run build +``` + +## 主要源码 + +- `app/page.tsx`：页面结构、模拟数据和交互逻辑 +- `app/globals.css`：企业 UI 规范及页面样式 +- `app/layout.tsx`：页面元数据和全局布局 +- `public/`：公开资源 + +## 当前性质 + +- 当前版本为可交互 UI 原型，业务数据均为模拟数据。 +- Wordbuddy 模型、Cube Skill、Asset 导入和文件下载尚未连接真实服务。 +- 压缩包不包含依赖缓存、构建产物、部署身份配置和版本控制文件。 diff --git a/ai-sidecar.mjs b/ai-sidecar.mjs new file mode 100644 index 0000000..bd5d636 --- /dev/null +++ b/ai-sidecar.mjs @@ -0,0 +1,107 @@ +// 本地 Node 旁路服务(真实 Node 运行时,可使用 child_process)。 +// 接收 POST /api/chat {message, model},在服务端调用 codebuddy CLI +// (CodeBuddy 真实能力,非交互 stream-json 模式),把干净的回答文本以 +// text/plain 流式返回。StationBuilder 的 Worker 路由会把 /api/chat 代理到本服务。 +import http from "node:http"; +import { spawn } from "node:child_process"; + +const CODEBUDDY = "/root/.local/bin/codebuddy"; +const CWD = "/home/StationBuilder"; +const PORT = 37822; +const CHAT_SESSION = "stationbuilderchat"; + +function resolveModelId(display) { + const map = { + Hy3: "hy3", Auto: "hy3", + "GLM-5.4": "glm-5.3", "GLM-5.3": "glm-5.3", "GLM-5.2": "glm-5.2", + "GLM-5.1": "glm-5.1", "GLM-5v-Turbo": "glm-5v-turbo", + "MiniMax-M3": "minimax-m3-pay", "Kimi-K3": "kimi-k3-2", + }; + return map[display] || "hy3"; +} + +let running = false; + +const server = http.createServer((req, res) => { + if (req.method === "POST" && req.url === "/api/chat") { + if (running) { + res.writeHead(429, { "Content-Type": "application/json" }); + res.end(JSON.stringify({ error: "上一条还在生成,请稍候" })); + return; + } + let raw = ""; + req.on("data", (c) => (raw += c)); + req.on("end", () => { + let body; + try { body = JSON.parse(raw); } catch { + res.writeHead(400, { "Content-Type": "application/json" }); + res.end(JSON.stringify({ error: "invalid json" })); + return; + } + const message = (body.message || "").toString(); + if (!message.trim()) { + res.writeHead(400, { "Content-Type": "application/json" }); + res.end(JSON.stringify({ error: "message required" })); + return; + } + const model = resolveModelId(body.model || "Hy3"); + res.writeHead(200, { + "Content-Type": "text/plain; charset=utf-8", + "Cache-Control": "no-cache, no-transform", + "X-Accel-Buffering": "no", + }); + running = true; + let child; + try { + child = spawn( + CODEBUDDY, + ["--model", model, "--session-id", CHAT_SESSION, "-p", message, + "--output-format", "stream-json", "--include-partial-messages", "-y"], + { env: process.env, cwd: CWD }, + ); + } catch (e) { + running = false; + res.write("[启动失败] " + (e?.message || e)); + res.end(); + return; + } + let buf = ""; + const push = (line) => { + if (!line.trim()) return; + try { + const o = JSON.parse(line); + if ( + o.type === "stream_event" && + o.event?.type === "content_block_delta" && + o.event.delta?.type === "text_delta" && + o.event.delta.text + ) { + res.write(o.event.delta.text); + } + } catch {} + }; + child.stdout.on("data", (c) => { + buf += c.toString("utf-8"); + let nl; + while ((nl = buf.indexOf("\n")) >= 0) { + const line = buf.slice(0, nl); + buf = buf.slice(nl + 1); + push(line); + } + }); + child.stderr.on("data", (c) => push(c.toString("utf-8"))); + child.on("error", (e) => { res.write("\n[连接出错] " + (e?.message || e)); res.end(); }); + child.on("close", (code) => { + running = false; + if (buf.trim()) push(buf); + if (code && code !== 0) res.write("\n[进程退出码 " + code + "]"); + res.end(); + }); + }); + return; + } + res.writeHead(404); + res.end("not found"); +}); + +server.listen(PORT, "127.0.0.1", () => console.log("[ai-sidecar] listening on http://127.0.0.1:" + PORT)); diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts new file mode 100644 index 0000000..ce2e58e --- /dev/null +++ b/app/api/chat/route.ts @@ -0,0 +1,55 @@ +import { NextRequest } from "next/server"; + +// 浏览器只跟同源的 /api/chat 说话。本 Worker 路由在收到请求后,代理到本机 +// Node 旁路服务(ai-sidecar.mjs :37822)——它由真实 Node 运行时启动,可调用 +// codebuddy CLI(CodeBuddy 的真实能力),以非交互 stream-json 模式拿到干净文本 +// 并流式返回。模型/密钥都不进前端 JS,浏览器只与本应用同源通信。 +// (Worker 沙箱不允许 child_process / 连本机 5555,故用旁路 + 代理。) + +const SIDECAR = "http://127.0.0.1:37822/api/chat"; + +let chatBusy = false; + +export async function POST(req: NextRequest) { + let body: any; + try { + body = await req.json(); + } catch { + return new Response(JSON.stringify({ error: "invalid json" }), { status: 400 }); + } + const message: string = (body.message || "").toString(); + if (!message.trim()) { + return new Response(JSON.stringify({ error: "message required" }), { status: 400 }); + } + if (chatBusy) { + return new Response(JSON.stringify({ error: "上一条还在生成,请稍候" }), { status: 429 }); + } + chatBusy = true; + + try { + const upstream = await fetch(SIDECAR, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ message, model: body.model || "Hy3" }), + }); + if (!upstream.ok || !upstream.body) { + const t = await upstream.text().catch(() => ""); + return new Response(JSON.stringify({ error: t || "上游错误 " + upstream.status }), { + status: 502, + }); + } + // 直接把旁路服务的流式 body 透传给浏览器 + return new Response(upstream.body, { + headers: { + "Content-Type": "text/plain; charset=utf-8", + "Cache-Control": "no-cache, no-transform", + "X-Accel-Buffering": "no", + }, + }); + } catch (e: any) { + return new Response(JSON.stringify({ error: String(e?.message || e) }), { status: 502 }); + } finally { + // 透传期间保持占用,前端收到 done 后下次请求再释放 + chatBusy = false; + } +} diff --git a/app/chatgpt-auth.ts b/app/chatgpt-auth.ts new file mode 100644 index 0000000..8d1fb35 --- /dev/null +++ b/app/chatgpt-auth.ts @@ -0,0 +1,86 @@ +import { headers } from "next/headers"; +import { redirect } from "next/navigation"; + +export type ChatGPTUser = { + displayName: string; + email: string; + fullName: string | null; +}; + +const USER_EMAIL_HEADER = "oai-authenticated-user-email"; +const USER_FULL_NAME_HEADER = "oai-authenticated-user-full-name"; +const USER_FULL_NAME_ENCODING_HEADER = + "oai-authenticated-user-full-name-encoding"; +const PERCENT_ENCODED_UTF8 = "percent-encoded-utf-8"; +const SIGN_IN_PATH = "/signin-with-chatgpt"; +const SIGN_OUT_PATH = "/signout-with-chatgpt"; +const CALLBACK_PATH = "/callback"; + +export async function getChatGPTUser(): Promise { + const requestHeaders = await headers(); + const email = requestHeaders.get(USER_EMAIL_HEADER); + if (!email) return null; + + const encodedFullName = requestHeaders.get(USER_FULL_NAME_HEADER); + const fullName = + encodedFullName && + requestHeaders.get(USER_FULL_NAME_ENCODING_HEADER) === PERCENT_ENCODED_UTF8 + ? safeDecodeURIComponent(encodedFullName) + : null; + + return { + displayName: fullName ?? email, + email, + fullName, + }; +} + +export async function requireChatGPTUser( + returnTo: string, +): Promise { + const user = await getChatGPTUser(); + if (user) return user; + + redirect(chatGPTSignInPath(returnTo)); +} + +export function chatGPTSignInPath(returnTo: string): string { + const safeReturnTo = safeRelativeReturnPath(returnTo); + return `${SIGN_IN_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`; +} + +export function chatGPTSignOutPath(returnTo = "/"): string { + const safeReturnTo = safeRelativeReturnPath(returnTo); + return `${SIGN_OUT_PATH}?return_to=${encodeURIComponent(safeReturnTo)}`; +} + +function safeRelativeReturnPath(value: string): string { + if (!value.startsWith("/") || value.startsWith("//")) return "/"; + + let url: URL; + try { + url = new URL(value, "https://app.local"); + } catch { + return "/"; + } + if (url.origin !== "https://app.local") return "/"; + if (isReservedAuthPath(url.pathname)) return "/"; + + return `${url.pathname}${url.search}${url.hash}`; +} + +function isReservedAuthPath(pathname: string): boolean { + return ( + pathname === SIGN_IN_PATH || + pathname === SIGN_OUT_PATH || + pathname === CALLBACK_PATH + ); +} + +function safeDecodeURIComponent(value: string): string | null { + try { + return decodeURIComponent(value); + } catch { + return null; + } +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..8fbf53e --- /dev/null +++ b/app/globals.css @@ -0,0 +1,53 @@ +@import "tailwindcss"; +:root{--blue:#009fe3;--blue2:#007cc3;--pale:#e7f5fc;--line:#d9dde2;--soft:#f4f5f6;--text:#333;--muted:#777;--green:#00b96b;--orange:#f3a000;--red:#f05b49}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Microsoft YaHei",sans-serif;color:var(--text);font-size:13px;background:var(--soft)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding-top:42px;padding-left:232px}.topbar{position:fixed;z-index:50;left:0;right:0;top:0;height:42px;background:#fff;border-top:4px solid var(--blue2);border-bottom:1px solid #cfd4d9;display:flex;align-items:center;padding:0 12px;gap:9px;box-shadow:0 1px 3px #00000012}.hamburger{border:0;background:transparent;font-size:17px;color:#777}.brand-mark,.login-logo{color:#078be0;font-size:24px;line-height:1;font-weight:bold}.topbar>strong{font-size:16px}.divider{height:19px;border-left:1px solid #d4d7da;margin:0 2px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px;color:#666}.top-actions>span{font-size:15px;position:relative}.top-actions i{position:absolute;width:5px;height:5px;background:red;border-radius:50%;right:-2px;top:-2px}.top-actions small{font-size:8px;line-height:1.2}.avatar{width:23px;height:23px;border-radius:50%;background:#d7f1fb;color:#168abf;display:grid!important;place-items:center;font-size:10px!important}.icon-rail{position:fixed;z-index:40;top:42px;bottom:0;left:0;width:42px;background:#f7f7f7;border-right:1px solid #d4d7da;display:flex;flex-direction:column;align-items:center}.icon-rail button{width:100%;height:45px;border:0;border-left:3px solid transparent;background:transparent;color:#777;font-size:18px}.icon-rail button:hover,.icon-rail button.active{color:var(--blue);background:#eaf7fd;border-left-color:var(--blue)}.icon-rail .rail-bottom{margin-top:auto;border-top:1px solid var(--line)}.side-nav{position:fixed;z-index:35;top:42px;bottom:0;left:42px;width:190px;background:#f3f4f5;border-right:1px solid #d2d6da;display:flex;flex-direction:column;padding:0}.side-title{height:48px;padding:17px 15px 0;font-weight:bold;font-size:14px}.side-title span{float:right;color:#999}.side-nav>button{height:41px;border:0;background:transparent;text-align:left;padding:0 14px;display:flex;align-items:center;gap:10px;border-left:3px solid transparent}.side-nav>button:hover,.side-nav>button.active{background:#dff1fa;color:#007fbe;border-left-color:var(--blue)}.side-nav>button b{width:18px;text-align:center}.side-nav>button em{font-style:normal;width:21px;height:21px;border:1px solid #bfc5ca;border-radius:50%;display:grid;place-items:center;font-size:10px;background:white}.side-nav>button.active em{background:var(--blue);border-color:var(--blue);color:white}.side-nav>small{font-size:10px;color:#999;padding:20px 15px 8px;text-transform:uppercase;letter-spacing:.8px}.side-help{position:relative;margin:auto 12px 12px;border:1px solid var(--line);background:white;padding:11px;display:flex;flex-direction:column;gap:5px;font-size:10px}.side-help span{color:#888} +.model-trigger{display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#888} +.model-trigger:hover{color:#007fbd} +.model-trigger .caret{font-size:8px;margin-left:4px} +.model-backdrop{position:fixed;inset:0;z-index:60} +.model-popover{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:61;background:#fff;border:1px solid #d2d6d9;border-radius:6px;box-shadow:0 8px 22px #0002;padding:8px;display:flex;flex-direction:column;gap:5px} +.model-popover-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px} +.model-popover-head>span{font-weight:bold;color:#007fbd;font-size:10px} +.model-popover-head>small{color:#aeb4b8;font-size:8px} +.model-row{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #e6e9eb;border-radius:4px;background:#fafbfb;font-size:10px;cursor:pointer} +.model-row input[type=radio]{margin:0;accent-color:#009fe3} +.model-row .model-name{font-weight:bold;color:#333;flex:1} +.model-row .model-tag{color:#1f9d5f;font-size:8px;background:#eafaf1;border:1px solid #c8eccf;padding:1px 5px;border-radius:8px;white-space:nowrap} +.model-row .model-rate{color:#888;font-size:9px;min-width:34px;text-align:right} +.model-row.disabled{opacity:.45;cursor:not-allowed;background:#f4f4f4} +.model-row.disabled .model-tag{color:#9aa1a5;background:#eceeef;border-color:#dfe2e3} +.model-row:not(.disabled):hover{border-color:#8ccce9;background:#eef7fb}.workspace{min-height:calc(100vh - 42px);padding-bottom:64px}.crumb{height:34px;padding:11px 20px 0;color:#8b8f93;font-size:11px}.crumb b{color:var(--blue)}.page-heading{min-height:60px;padding:3px 20px 11px;display:flex;align-items:center;justify-content:space-between}.page-heading h1{font-size:21px;margin:0 0 5px}.page-heading p{margin:0;color:#81868b}.button{border:1px solid var(--blue2);background:var(--blue2);color:white;border-radius:2px;min-width:92px;height:31px;padding:0 14px;margin-left:8px}.button:hover{background:#006ca9}.button.secondary{background:white;color:#555;border-color:#cdd2d6}.button.secondary:hover{border-color:var(--blue);color:var(--blue)}.button:disabled{opacity:.55;cursor:not-allowed}.steps{height:70px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:0 22px}.steps button{border:0;background:transparent;display:flex;align-items:center;position:relative;text-align:left;color:#999;padding:0 18px}.steps button>i{font-style:normal;width:29px;height:29px;border-radius:50%;border:1px solid #cfd4d9;display:grid;place-items:center;margin-right:10px;background:#fff}.steps button span{display:flex;flex-direction:column;gap:4px}.steps button small{font-size:8px}.steps button>b{position:absolute;right:0;font-size:23px;color:#c3c7ca}.steps button.active{color:#222}.steps button.active>i{background:var(--blue);border-color:var(--blue);color:#fff}.steps button.done>i{background:#39b980;border-color:#39b980;color:white}.content{padding:14px 20px}.panel{background:white;border:1px solid var(--line);margin-bottom:14px}.panel-head{min-height:43px;border-bottom:1px solid var(--line);padding:8px 12px;display:flex;justify-content:space-between;align-items:center}.panel-head>strong{font-size:14px}.panel-head .button{height:28px}.panel-body{padding:12px}.summary-strip{display:grid;grid-template-columns:repeat(5,1fr);height:64px;background:white;border:1px solid var(--line);margin-bottom:14px}.summary-strip div{display:flex;align-items:center;justify-content:center;gap:9px;border-right:1px solid var(--line)}.summary-strip div:last-child{border:0}.summary-strip b{font-size:23px}.summary-strip span{color:#777}.filterbar{height:45px;display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--line)}.filterbar>label{width:205px;height:30px;border:1px solid #cdd2d6;display:flex;align-items:center;padding:0 8px;color:#999}.filterbar input{border:0;outline:0;width:100%;padding-left:8px}.filterbar select,.preview-toolbar select{height:30px;border:1px solid #cdd2d6;background:white;padding:0 25px 0 9px}.filterbar>span{flex:1}.view-switch{display:flex}.view-switch button,.icon-button{width:31px;height:29px;border:1px solid #cbd0d4;background:white}.view-switch button.active{background:var(--blue);color:white;border-color:var(--blue)}.icon-button{border:0;font-size:16px}.data-table{width:100%;border-collapse:collapse}.data-table th{height:35px;background:#f6f7f8;color:#4b4f53;text-align:left;font-size:11px;font-weight:bold;border-bottom:1px solid var(--line);padding:0 10px}.data-table td{height:48px;border-bottom:1px solid #e3e5e7;padding:7px 10px;font-size:11px}.data-table tr:hover td{background:#f7fbfd}.link{border:0;background:transparent;color:#008ed2;padding:0}.site-icon{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;color:#098dd5;border:1px solid #c8d8e0;background:#f7fcff;font-size:18px;vertical-align:middle}.site-icon.big{width:40px;height:40px;font-size:26px}.status{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:2px 8px;font-size:10px;line-height:1.2;border:1px solid}.status.ok{color:#008c51;background:#e5fff3;border-color:#60d9a2}.status.warn{color:#b37400;background:#fff4d8;border-color:#f6bc44}.status.bad{color:#d84632;background:#ffeae7;border-color:#ff8b7b}.status.muted{color:#777;background:#f3f3f3;border-color:#c9c9c9}.dots,.trash{border:0;background:transparent;color:#777}.pagination{height:46px;display:flex;justify-content:flex-end;align-items:center;gap:7px;padding-top:12px}.pagination span{margin-right:10px;color:#777}.pagination button{width:28px;height:28px;border:0;background:white}.pagination button.active{background:#dff2fc;color:#008fd2}.pagination select{border:0;background:white}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 0}.project-grid article{border:1px solid var(--line);padding:14px;cursor:pointer}.project-grid article:hover{border-color:var(--blue);box-shadow:0 2px 7px #008fd21f}.project-grid article>div{display:flex;justify-content:space-between}.project-grid h3{margin:10px 0 5px}.project-grid p,.project-grid small{color:#888;font-size:11px}.project-grid section{display:flex;gap:18px;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:10px 0;margin:12px 0}.project-grid section span{display:flex;flex-direction:column}.project-grid section b{font-size:16px}.two-column{display:grid;grid-template-columns:1fr 340px;gap:14px}.two-column.equal{grid-template-columns:1fr 1fr}.basic-layout>.panel>.panel-body{padding:17px}.stack{display:flex;flex-direction:column}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field>span{font-size:11px;font-weight:bold}.field>span i{color:red;font-style:normal;margin-right:3px}.field input,.field select,.field textarea{border:1px solid #cfd3d7;background:white;border-radius:2px;padding:8px;outline:none}.field input,.field select{height:34px}.field textarea{min-height:130px;resize:vertical;line-height:1.6}.field textarea.small{min-height:80px}.field small{color:#999;font-size:10px}.form-grid .field:nth-child(n+3){grid-column:1/-1}.upload{height:90px;border:1px dashed #bfc7cd;background:#fafbfb;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#777;gap:5px}.upload b{color:var(--blue);font-size:20px}.ai-box{text-align:center;padding:12px}.ai-box>span{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#05a9e8,#8056d9);color:#fff;display:grid;place-items:center;margin:auto;font-weight:bold}.ai-box h3{font-size:14px;margin:12px}.ai-box p{color:#777;line-height:1.7;text-align:left}.meter{height:7px;border-radius:5px;background:#edf0f2;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,#00a4e7,#42c58a);transition:width .35s}.tips{padding-left:22px;line-height:2;color:#666}.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.kpi-row>div{height:75px;border:1px solid var(--line);background:white;padding:12px 14px;position:relative}.kpi-row span{display:block;color:#008dcf;font-size:11px;margin-bottom:6px}.kpi-row b{font-size:25px}.kpi-row small{margin-left:4px;color:#888}.kpi-row .status{margin-top:7px}.editable td{padding:7px}.editable input,.editable select{height:29px;border:1px solid #d3d7db;width:100%;padding:0 7px;background:#fff}.editable .number{width:65px}.tree{line-height:2.2}.tree .l1{padding-left:24px}.tree .l2{padding-left:52px;color:#777}.tree span{border-radius:10px;background:#eef2f4;padding:2px 7px;font-size:10px}.file-card{display:flex;align-items:center;gap:12px;border:1px solid #e0e3e5;background:#fafafa;padding:12px}.file-card .excel{width:36px;height:42px;background:#14834f;color:white;display:grid;place-items:center;font-weight:bold}.file-card>div{flex:1}.file-card p{margin:5px 0 0;color:#888;font-size:10px}.checks{display:flex;gap:20px;color:#15935c;padding:12px 2px 0;font-size:10px}.tabs{height:46px;border-bottom:1px solid var(--line);display:flex;gap:6px;margin:-12px -12px 0;padding-left:10px}.tabs button{padding:0 18px;border:0;border-bottom:2px solid transparent;background:white}.tabs button.active{color:#008ed2;border-bottom-color:#008ed2}.tabs i{font-style:normal;border-radius:10px;background:#e7f3f8;padding:2px 7px;margin-left:5px}.section-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 4px}.section-toolbar p{margin:4px 0 0;color:#888;font-size:11px}.mu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mu-grid article{border:1px solid var(--line);display:grid;grid-template-columns:42% 58%;min-height:128px;cursor:pointer}.mu-grid article.selected{border:2px solid var(--blue);background:#fbfeff}.mu-thumb{margin:8px;background:#e9eef1;display:grid;place-items:center;position:relative;overflow:hidden}.mu-thumb:after{content:"";width:72%;height:40%;border:1px solid #8ec4dd;background:white;box-shadow:26px -23px 0 -8px #b9e1f3,-18px 25px 0 -7px #8ed1ec}.mu-thumb b{position:absolute;z-index:2;color:var(--blue);font-size:22px}.mu-grid article>div:last-child{padding:11px 10px 8px 0}.mu-grid header{display:flex;gap:7px;align-items:center}.mu-grid h3{font-size:13px;margin:0}.mu-grid p{color:#777;font-size:10px;line-height:1.5;min-height:32px}.mu-grid button{border:0;background:transparent;color:#008ed2;padding:0}.blue{color:#008ed2}.type-tag{background:#eff3f5;padding:4px 8px;border-radius:2px}.wide-cell{min-width:300px}.menu-builder{display:grid;grid-template-columns:230px 1fr 240px;gap:14px;background:#f6f7f8;padding:14px}.page-pool,.menu-tree,.menu-preview{background:white;border:1px solid var(--line);padding:12px}.page-pool p{color:#999;font-size:10px}.page-pool div{border:1px solid var(--line);padding:10px;margin-top:8px;background:#fafafa}.menu-tree section{border:1px solid var(--line);margin-bottom:8px;padding:10px}.menu-tree section>span{float:right}.menu-tree section>div{margin:9px 0 0 15px;padding:7px;border-top:1px solid #eee}.menu-tree i{font-style:normal;font-size:8px;background:#e1f0f8;color:#008ed2;padding:3px;margin-right:8px}.menu-tree i.cube{background:#eee8fb;color:#7045bc}.menu-tree>button{border:1px dashed #aaa;background:#fafafa;width:100%;height:34px}.menu-preview aside{background:#f4f5f6;min-height:250px;display:flex;flex-direction:column;padding-top:10px}.menu-preview strong{padding:12px}.menu-preview button{border:0;background:transparent;text-align:left;padding:10px}.menu-preview button.active{background:#d8effa;color:#0089ca}.generate-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-grid div{border:1px solid #dfe2e5;padding:12px;display:flex;flex-direction:column;gap:5px;position:relative}.confirm-grid span,.confirm-grid small{color:#888;font-size:10px}.confirm-grid button{position:absolute;right:10px;top:10px;border:0;background:transparent;color:#008ed2;font-size:10px}.option-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-list label{display:flex;align-items:center;gap:8px}.task-panel{height:100%}.overall{background:#f6fbfd;border:1px solid #d3eaf5;padding:13px}.overall>div:first-child{display:flex;justify-content:space-between;margin-bottom:9px}.overall p{margin:8px 0 0;color:#777;font-size:10px}.task-list{padding:10px 0}.task-list>div{display:flex;align-items:center;border-bottom:1px solid #eee;padding:9px 3px}.task-list>div>i{font-style:normal;width:25px;height:25px;border-radius:50%;border:1px solid #d2d6da;display:grid;place-items:center;margin-right:9px}.task-list>div>i.done{background:#31b67c;border-color:#31b67c;color:white}.task-list>div>i.spin{color:#008fd2}.task-list>div>span{display:flex;flex:1;flex-direction:column;gap:3px}.task-list small{color:#999}.task-panel>.panel-body>.button{width:100%;margin:5px 0}.result-header{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid var(--line);padding:12px;margin-bottom:14px}.result-header>div{display:flex;align-items:center;gap:10px}.result-header h2{margin:0 0 4px}.result-header p{margin:0;color:#888;font-size:10px}.result-layout{display:grid;grid-template-columns:1fr 280px;gap:14px}.result-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.result-pages article{border:1px solid var(--line)}.result-pages article>div:last-child{padding:10px}.result-pages article header{display:flex;justify-content:space-between}.result-pages h3{font-size:13px;margin:10px 0 4px}.result-pages p,.result-pages small{font-size:10px;color:#888}.result-pages footer{display:flex;margin-top:9px}.result-pages footer .button{margin:0 5px 0 0;min-width:68px;height:27px}.dashboard-thumb{height:115px;background:#f2f5f7;position:relative;padding:12px 10px 10px 35px}.dashboard-thumb>i{position:absolute;left:0;top:0;bottom:0;width:25px;background:#d7e2e8}.dashboard-thumb>header{display:block;height:10px;background:white;border:1px solid #d9e1e5}.dashboard-thumb>section{display:flex;gap:4px;margin-top:5px}.dashboard-thumb>section b{height:22px;flex:1;background:white;border:1px solid #cde0e9}.dashboard-thumb>footer{position:absolute;left:35px;right:46px;bottom:10px;height:50px;background:white;border:1px solid #d8e1e6;display:flex;align-items:flex-end;gap:5px;padding:8px}.dashboard-thumb>footer em{flex:1;background:#67c5ea;height:45%}.dashboard-thumb>footer em:nth-child(2){height:75%}.dashboard-thumb>footer em:nth-child(4){height:92%}.dashboard-thumb>span{position:absolute;right:9px;bottom:10px;width:31px;height:50px;background:conic-gradient(#17b876 0 72%,#e6edf0 72%)}.result-menu div{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:10px 4px}.result-menu span{background:#edf1f3;border-radius:10px;padding:2px 7px}.text-button{border:0;background:transparent;color:#008ed2;margin-top:12px}.score{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px}.score b{width:55px;height:55px;border-radius:50%;border:5px solid #32bb81;display:grid;place-items:center;font-size:18px}.score span{color:#16945d}.validation{padding-left:10px;list-style:none;line-height:2;color:#178f5a}.preview-shell{border:1px solid var(--line);background:white;margin:-2px}.preview-toolbar{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid var(--line)}.preview-toolbar>div{display:flex;align-items:center;gap:8px}.preview-toolbar button{border:1px solid #d1d5d8;background:white;height:29px;padding:0 10px}.preview-main{display:grid;grid-template-columns:1fr 300px;height:655px}.cube-canvas{position:relative;background:#f2f4f5;border-right:1px solid var(--line);overflow:hidden}.cube-top{position:absolute;left:0;right:0;top:0;height:32px;background:white;border-top:3px solid var(--blue2);border-bottom:1px solid #cfd4d8;display:flex;align-items:center;padding:0 10px;gap:15px}.cube-top b{color:#087fc0}.cube-top i{margin-left:auto;font-style:normal;color:#777}.cube-side{position:absolute;left:0;top:32px;bottom:0;width:130px;background:#edf0f1;display:flex;flex-direction:column}.cube-side strong{padding:15px 10px}.cube-side button{height:37px;border:0;background:transparent;text-align:left;padding-left:12px}.cube-side button.active{background:#d6effb;color:#0088c9}.cube-content{position:absolute;left:130px;top:32px;right:0;bottom:0;padding:12px}.cube-content>header{display:flex;justify-content:space-between;align-items:center}.cube-content>header h2{font-size:16px;margin:5px 0 8px}.cube-content>header span,.cube-content>header small{font-size:9px;color:#888}.cube-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.cube-kpis>div{height:78px;background:white;border:1px solid #d6dade;padding:9px;position:relative;display:flex;flex-direction:column}.cube-kpis span{font-size:9px;color:#008dcd}.cube-kpis b{font-size:20px;margin:5px 0}.cube-kpis small{font-size:9px;color:#888}.spark{position:absolute;right:9px;bottom:14px;width:42px;height:18px;border-top:3px solid #13a7e5;transform:skewY(-12deg);border-radius:50%}.spark.s1{transform:skewY(8deg)}.spark.s2{border-color:#f0a000}.cube-grid{display:grid;grid-template-columns:1.7fr .8fr;gap:7px;margin-top:7px}.cube-grid>section{background:white;border:1px solid #d6dade;padding:10px}.cube-grid h3{font-size:11px;margin:0 0 8px}.cube-grid h3 span,.cube-grid h3 button{float:right;border:0;background:transparent;color:#777;font-size:9px}.line-chart{height:175px;position:relative}.line-chart>div{position:absolute;inset:0 0 20px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 29px,#e8ecee 30px)}.line-chart svg{position:absolute;left:0;right:0;top:0;height:145px;width:100%}.line-chart footer{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:8px;color:#999}.donut{width:115px;height:115px;border-radius:50%;background:conic-gradient(#1abc78 0 80%,#f2aa24 80% 92%,#aeb7bd 92%);margin:13px auto;display:grid;place-items:center}.donut:before{content:"";position:absolute;width:72px;height:72px;background:white;border-radius:50%}.donut b{z-index:1;font-size:21px;display:flex;flex-direction:column;align-items:center}.donut small{font-size:8px;color:#888}.donut-panel footer{display:flex;justify-content:space-around;font-size:8px}.donut-panel footer i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:3px}.green{background:#1abc78}.orange{background:#f2aa24}.gray{background:#aeb7bd}.alarm-panel{grid-column:1/-1}.alarm-panel table{border-collapse:collapse;width:100%;font-size:9px}.alarm-panel td{border-top:1px solid #e5e8ea;padding:8px}.inspector{background:white;overflow:auto}.inspector>nav{height:42px;display:flex;border-bottom:1px solid var(--line)}.inspector>nav button{flex:1;border:0;border-bottom:2px solid transparent;background:white;font-size:11px}.inspector>nav button.active{color:#008ed2;border-bottom-color:#008ed2}.inspector-body{padding:14px}.inspector-body h3{font-size:15px}.inspector-body p{font-size:11px;color:#777;line-height:1.7}.inspector-body dl{display:grid;grid-template-columns:85px 1fr;border-top:1px solid #eee;margin:15px 0}.inspector-body dt,.inspector-body dd{margin:0;padding:9px 0;border-bottom:1px solid #eee;font-size:10px}.inspector-body dt{color:#888}.component{padding:8px;border:1px solid #e2e5e7;margin-top:6px}.component span{float:right}.code-body header{text-align:right}.code-body header button{border:0;background:transparent;color:#008ed2}.code-body pre{font-size:10px;line-height:1.55;background:#202a33;color:#cce9f7;padding:12px;min-height:410px;overflow:auto}.inspector-body textarea{width:100%;height:120px;border:1px solid #ccd2d6;padding:9px;resize:none}.suggestion{border:1px solid #cfd5d9;background:#f8fafb;border-radius:12px;padding:5px 9px;margin:0 5px 7px 0;font-size:10px}.inspector-body>.button{width:100%;margin:12px 0}.sticky-actions{position:fixed;z-index:20;left:232px;right:0;bottom:0;height:54px;background:white;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 -2px 6px #0000000c}.toast{position:fixed;z-index:100;right:24px;top:56px;background:#26323a;color:white;padding:12px 18px;box-shadow:0 5px 18px #0003}.toast b{color:#46d195;margin-right:8px}.modal-backdrop{position:fixed;z-index:90;inset:0;background:#0007;display:grid;place-items:center}.modal{width:610px;max-height:78vh;background:white;box-shadow:0 10px 30px #0004;display:flex;flex-direction:column}.modal>header{height:47px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 15px}.modal h2{font-size:15px}.modal>header button{border:0;background:transparent;font-size:22px;color:#888}.modal-body{padding:16px;overflow:auto}.modal>footer{border-top:1px solid var(--line);padding:10px 15px;text-align:right}.modal-note{background:#edf8fd;border-left:3px solid var(--blue);padding:12px;margin-bottom:14px;color:#26799f}.impact-title{font-weight:bold;margin-bottom:8px}.impact-list{list-style:none;padding:0;border:1px solid var(--line)}.impact-list li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid #eee}.impact-list span{color:#008ed2}.download-list{display:flex;flex-direction:column}.download-list label{padding:11px;border-bottom:1px solid #eee;display:flex;gap:8px}.download-list>div{margin-top:15px;background:#f4f6f7;padding:12px;display:flex;justify-content:space-between}.history-list>div{display:flex;align-items:center;gap:10px;border-bottom:1px solid #eee;padding:11px}.history-list i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#e4f4fb;color:#008ed2;display:grid;place-items:center}.history-list span{display:flex;flex:1;flex-direction:column;gap:4px}.history-list small{color:#888}.history-list button{border:0;background:transparent;color:#008ed2}.login-page{min-height:100vh;background:linear-gradient(145deg,#eef5f8,#fff 55%,#e5f4fb);border-top:4px solid var(--blue2);display:flex;align-items:center;justify-content:center}.login-top{position:absolute;left:18px;top:14px;display:flex;align-items:center;gap:10px}.login-top b{font-size:18px}.login-top span{border-left:1px solid #ccc;padding-left:10px;color:#777}.login-card{width:420px;background:white;border:1px solid #d6dce0;box-shadow:0 12px 35px #1e526618;padding:42px;text-align:center}.login-logo{font-size:48px}.login-card h1{font-size:23px}.login-card p{color:#777;line-height:1.6}.sso-button{width:100%;height:48px;margin:22px 0 12px;border:1px solid #ccd3d7;background:#fff;display:flex;align-items:center;gap:12px;padding:0 13px}.sso-button b{flex:1;text-align:left}.sso-button i{font-style:normal;font-size:18px;color:#008ed2}.login-card>small{color:#999}.login-page>footer{position:absolute;bottom:18px;color:#999;font-size:10px} +.avatar-button{border:0;padding:0}.avatar-button:hover{outline:1px solid var(--blue)} +.steps{grid-template-columns:repeat(5,1fr)} +.module-switch{padding:10px 9px 6px;border-bottom:1px solid var(--line);display:grid;gap:6px}.module-switch>button{height:47px;border:1px solid #d8dde1;background:#fff;display:flex;align-items:center;text-align:left;padding:0 9px;gap:9px}.module-switch>button>b{width:23px;height:23px;display:grid;place-items:center;background:#eff3f5;color:#6f7d85}.module-switch>button>span{display:flex;flex-direction:column;font-weight:bold;gap:2px}.module-switch>button small{font-weight:normal;font-size:9px;color:#8d959a}.module-switch>button.active{border-color:#8ccce9;background:#e9f6fc;color:#007fbd}.module-switch>button.active>b{background:#009fe3;color:white}.side-nav>.side-title{display:none} +.domain-hero{min-height:160px;background:linear-gradient(120deg,#075d8b,#009bdc 58%,#55c8df);color:white;margin-bottom:14px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.domain-hero:after{content:"◆";position:absolute;right:34%;top:-55px;font-size:230px;color:#ffffff0b;transform:rotate(16deg)}.domain-hero>div:first-child{max-width:640px;z-index:1}.domain-hero .eyebrow{font-size:9px;letter-spacing:2px;opacity:.8}.domain-hero h2{font-size:24px;margin:9px 0}.domain-hero p{margin:0;line-height:1.7;opacity:.86}.domain-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff38;z-index:1}.domain-hero-stats div{width:105px;height:58px;background:#ffffff14;display:flex;flex-direction:column;align-items:center;justify-content:center}.domain-hero-stats b{font-size:20px}.domain-hero-stats span{font-size:9px;opacity:.8}.domain-filter label{width:300px}.domain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 0 4px}.domain-grid article{border:1px solid var(--line);border-top:3px solid #83949c;padding:15px;min-height:230px;background:white}.domain-grid article.water{border-top-color:#009fe3}.domain-grid article.gas{border-top-color:#e58c35}.domain-grid article.energy{border-top-color:#e7b61d}.domain-grid article.dc{border-top-color:#6b70bf}.domain-grid article>header{display:flex;justify-content:space-between;align-items:center}.domain-grid article>header>span{font-size:28px;color:#168ebf}.domain-grid article>header>div{display:flex;align-items:center;gap:7px}.domain-grid h3{font-size:16px;margin:13px 0 6px}.domain-grid p{color:#70787d;font-size:10px;line-height:1.65;min-height:34px}.domain-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #edf0f2;border-bottom:1px solid #edf0f2;padding:8px 0;gap:7px}.domain-metrics span{font-size:9px;color:#888}.domain-metrics b{font-size:13px;color:#333;margin-right:3px}.domain-grid footer{display:flex;justify-content:space-between;margin-top:12px}.domain-grid footer button{border:0;background:transparent;color:#008ed2;font-size:10px}.domain-grid footer button:last-child{border:1px solid #a9d8ed;padding:5px 9px}.solution-parts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.solution-parts>div{border:1px solid #dfe3e6;background:#fafbfb;padding:12px;display:flex;gap:9px;min-height:80px}.solution-parts i{font-style:normal;font-size:20px;color:#008ed2}.solution-parts span{display:flex;flex-direction:column;gap:6px}.solution-parts small{font-size:9px;line-height:1.5;color:#777} +.solution-banner{min-height:126px;border:1px solid var(--line);background:linear-gradient(100deg,#eef9fd,#fff);display:flex;align-items:center;padding:20px;margin-bottom:12px}.solution-logo{width:72px;height:72px;background:#009fe3;color:white;border-radius:4px;display:grid;place-items:center;font-size:40px;margin-right:18px}.solution-banner>div:nth-child(2){flex:1}.solution-banner h2{margin:5px 0;font-size:21px}.solution-banner p{margin:0 0 8px;color:#666}.solution-banner small{margin-left:10px;color:#888}.solution-banner aside{display:flex}.solution-summary{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid var(--line);margin-bottom:12px}.solution-summary>div{height:65px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center}.solution-summary b{font-size:21px}.solution-summary span{font-size:9px;color:#888;margin-top:5px}.detail-grid{display:grid;grid-template-columns:1fr 310px;gap:12px}.asset-template{display:grid;grid-template-columns:1fr 1.3fr;gap:15px}.asset-tree{background:#f5f8f9;padding:12px;display:flex;flex-direction:column;gap:10px}.asset-tree span{padding-left:15px}.asset-tree em{font-style:normal;color:#788187;font-size:10px}.template-specs{display:grid;gap:8px}.template-specs>div{border:1px solid #e0e4e6;padding:9px}.template-specs p{margin:4px 0 0;color:#777;font-size:10px;line-height:1.45}.domain-page-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.domain-page-list article{display:grid;grid-template-columns:115px 1fr;border:1px solid var(--line);min-height:145px}.domain-page-thumb{margin:8px;background:#e9eef1;position:relative;padding:28px 7px 7px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.domain-page-thumb span{position:absolute;left:7px;top:6px;color:#008ed2}.domain-page-thumb i{background:#75c9e9;height:40px}.domain-page-thumb i:nth-child(2){height:62px}.domain-page-thumb i:nth-child(3){height:50px}.domain-page-list section{padding:10px 9px 8px 0}.domain-page-list section>div{display:flex;justify-content:space-between}.domain-page-list h3{font-size:12px;margin:7px 0 3px}.domain-page-list section>b{font-size:9px;color:#008ed2}.domain-page-list p{font-size:9px;color:#777;line-height:1.5}.domain-page-list footer button{border:0;background:transparent;color:#008ed2;padding:0;margin-right:12px;font-size:9px}.flow-list{display:grid;gap:8px}.flow-list>div{display:flex;align-items:center;border:1px solid #e0e4e6;padding:9px}.flow-list i{font-style:normal;width:29px;height:29px;background:#e8f5fb;color:#008ed2;display:grid;place-items:center;margin-right:9px}.flow-list span{display:flex;flex:1;flex-direction:column;gap:3px}.flow-list small{font-size:9px;color:#888}.flow-list em{font-style:normal;font-size:9px;color:#008ed2}.flow-list .future-item{border-style:dashed;opacity:.75}.solution-menu{display:flex;flex-direction:column}.solution-menu>b{padding:8px;background:#f2f4f5;margin-top:4px}.solution-menu>span{padding:7px 8px 7px 17px;border-bottom:1px solid #eee}.solution-menu i{font-style:normal;font-size:8px;color:#008ed2;margin-right:7px}.knowledge-list>div{display:flex;align-items:center;border-bottom:1px solid #eee;padding:9px 2px}.knowledge-list>div>i{font-style:normal;width:27px;color:#008ed2}.knowledge-list span{display:flex;flex:1;flex-direction:column;gap:3px}.knowledge-list small{font-size:9px;color:#888}.knowledge-list button{border:0;background:transparent;color:#008ed2} +.ai-config-layout{display:grid;grid-template-columns:1fr 370px;gap:14px}.wordbuddy-card{background:#1e1f21;color:#e9eaec;border-radius:7px;overflow:hidden;box-shadow:0 8px 22px #0002}.wordbuddy-card>header{height:58px;border-bottom:1px solid #3a3c3f;display:flex;justify-content:space-between;align-items:center;padding:0 14px}.wordbuddy-card>header>div{display:flex;gap:9px;align-items:center}.wb-logo{width:31px;height:31px;border-radius:6px;background:linear-gradient(135deg,#6d5ee9,#0aa5e8);display:grid;place-items:center;font-weight:bold}.wordbuddy-card header section{display:flex;flex-direction:column}.wordbuddy-card header small{font-size:9px;color:#9ca1a6;margin-top:3px}.wordbuddy-card header label{display:flex;align-items:center;gap:8px}.model-list{padding:7px}.model-list>button{width:100%;min-height:56px;border:0;border-radius:5px;background:transparent;color:#e7e8ea;display:flex;align-items:center;padding:7px 9px;text-align:left;position:relative}.model-list>button:hover,.model-list>button.selected{background:#2d2f32}.model-list>button>i{font-style:normal;width:25px;color:#c7cbd0;font-weight:bold}.model-list>button>span{display:flex;flex:1;flex-direction:column;gap:2px}.model-list>button>span>b{font-size:13px}.model-list>button small{font-size:8px;color:#16a9ed}.model-list>button em{font-style:normal;font-size:8px;color:#8f959b}.model-list>button>strong{color:#aeb3b8;font-size:10px;margin-right:24px}.model-list>button>u{position:absolute;right:9px;color:#35d19c;text-decoration:none;font-size:15px}.wordbuddy-card>footer{border-top:1px solid #3a3c3f;padding:9px}.wordbuddy-card>footer button{border:0;background:transparent;color:#c7cbd0}.selected-model{display:flex;align-items:center;gap:12px;background:#f0f9fd;border:1px solid #cfeaf6;padding:13px}.selected-model>span{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7060eb,#00a5e5);color:white;display:grid;place-items:center}.selected-model section{flex:1}.selected-model h3{margin:2px 0;font-size:18px}.selected-model p{margin:0;font-size:9px;color:#777}.model-facts{display:grid;grid-template-columns:110px 1fr;margin:12px 0 0}.model-facts dt,.model-facts dd{margin:0;padding:7px;border-bottom:1px solid #eee;font-size:10px}.model-facts dt{color:#888}.strategy-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.strategy-list label{border:1px solid #dce1e4;padding:9px;display:flex;gap:7px}.strategy-list label>span{display:flex;flex-direction:column;gap:3px}.strategy-list small,.setting-row small{font-size:9px;color:#888}.setting-row{display:flex;align-items:center;border-top:1px solid #eee;padding:9px 2px}.setting-row>span{display:flex;flex:1;flex-direction:column;gap:3px}.context-list{display:grid;gap:6px}.context-list>span{display:flex;align-items:center;background:#f7f8f8;padding:7px}.context-list i{font-style:normal;width:25px;color:#008ed2}.context-list b{flex:1;font-size:10px}.context-list em{font-style:normal;color:#14905b;font-size:9px}.token-estimate{display:flex;flex-direction:column;border-top:1px solid #ddd;margin-top:10px;padding-top:10px;gap:4px}.token-estimate span{font-size:9px;color:#888} +@media(max-width:1100px){.app-shell{padding-left:42px}.side-nav{display:none}.workspace{min-width:900px}.sticky-actions{left:42px}.top-actions small{display:none}.result-layout{grid-template-columns:1fr}.preview-main{grid-template-columns:1fr 260px}.mu-grid{grid-template-columns:repeat(2,1fr)}} + +/* 右下角浮动 AI 会话 */ +.ai-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:54px;height:54px;border-radius:50%;border:0;background:linear-gradient(135deg,#6d5ee9,#0aa5e8);color:#fff;font-size:22px;box-shadow:0 8px 22px #0a85c355;display:grid;place-items:center} +.ai-fab:hover{transform:translateY(-1px);box-shadow:0 12px 26px #0a85c366} +.ai-dialog{position:fixed;right:22px;bottom:88px;z-index:81;width:25vw;min-width:320px;height:70vh;min-height:420px;background:#fff;border:1px solid #d2d6d9;border-radius:10px;box-shadow:0 18px 48px #0003;display:flex;flex-direction:column;overflow:hidden} +.ai-dialog header{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #eceef0;background:linear-gradient(135deg,#6d5ee9,#0aa5e8);color:#fff} +.ai-dialog .ai-dialog-logo{width:28px;height:28px;border-radius:7px;background:#ffffff33;display:grid;place-items:center;font-size:15px} +.ai-dialog .ai-dialog-title{flex:1;display:flex;flex-direction:column;line-height:1.25} +.ai-dialog .ai-dialog-title b{font-size:13px} +.ai-dialog .ai-dialog-title small{font-size:9px;opacity:.85} +.ai-dialog .ai-close{border:0;background:transparent;color:#fff;font-size:20px;line-height:1;width:28px;height:28px;border-radius:6px} +.ai-dialog .ai-close:hover{background:#ffffff33} +.ai-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:#f7f8f9} +.ai-empty{margin:auto;text-align:center;color:#9aa1a5;font-size:11px;line-height:1.7;padding:0 14px} +.ai-empty b{color:#168abf} +.ai-bubble{display:flex;gap:8px;align-items:flex-start;max-width:88%} +.ai-bubble .ai-avatar{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px;background:#e3edf3;color:#168abf} +.ai-bubble.me{flex-direction:row-reverse;align-self:flex-end} +.ai-bubble.me .ai-avatar{background:linear-gradient(135deg,#7060eb,#00a5e5);color:#fff} +.ai-bubble .ai-text{white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.6;padding:8px 11px;border-radius:9px;background:#fff;border:1px solid #e6e9eb} +.ai-bubble.me .ai-text{background:#009fe3;color:#fff;border-color:#009fe3} +.ai-dialog footer{display:flex;gap:8px;padding:9px;border-top:1px solid #eceef0;background:#fff} +.ai-dialog .ai-input{flex:1;resize:none;height:42px;max-height:120px;border:1px solid #d4d8db;border-radius:7px;padding:9px 10px;font-size:12px;line-height:1.4;outline:none} +.ai-dialog .ai-input:focus{border-color:#8ccce9} +.ai-dialog .ai-send{border:0;background:#009fe3;color:#fff;border-radius:7px;padding:0 16px;font-size:12px;align-self:flex-end;height:42px} +.ai-dialog .ai-send:disabled{opacity:.5;cursor:not-allowed} +.ai-dialog .ai-send:not(:disabled):hover{background:#008ac4} + diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..8eb8893 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,4 @@ +import type { Metadata } from "next"; +import "./globals.css"; +export const metadata: Metadata = {title:"iStation StationBuilder UI 原型",description:"iStation 团队内部 AI 站点与领域方案生成工具",other:{"codex-preview":"development"},icons:{icon:"/favicon.svg",shortcut:"/favicon.svg"}}; +export default function RootLayout({children}:Readonly<{children:React.ReactNode}>){return {children}} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..08fdab1 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,190 @@ +"use client"; + +import { useEffect, useMemo, useRef, useState } from "react"; + +type PageKey = "login" | "projects" | "basic" | "assets" | "functions" | "ai" | "generate" | "result" | "preview" | "domains" | "domainDetail"; +type ModalKey = "" | "ai" | "feedback" | "download" | "history"; +const meta: Record = { + login:{label:"内部登录",icon:"◇",subtitle:"使用公司账号登录"}, + projects:{label:"站点项目",icon:"▦",subtitle:"创建、查找和管理站点生成项目"}, + basic:{label:"站点基本属性",icon:"▤",subtitle:"描述站点业务背景，信息越完整，生成结果越符合预期"}, + assets:{label:"Asset 资产设置",icon:"▧",subtitle:"配置设备类型、数量和资产层级，为页面和模拟数据提供基础"}, + functions:{label:"功能与菜单",icon:"☷",subtitle:"选择 MU 标准页面，定义 Cube 扩展页面及菜单结构"}, + ai:{label:"AI 配置",icon:"✦",subtitle:"选择 Wordbuddy 模型并配置站点生成策略"}, + generate:{label:"生成确认",icon:"↻",subtitle:"确认生成范围，调用 Cube Skill 生成页面和模拟数据"}, + result:{label:"站点结果",icon:"◫",subtitle:"集中查看、预览、校验并下载站点交付物"}, + preview:{label:"Cube 页面预览",icon:"▣",subtitle:"检查单个 Cube 页面效果，并通过反馈快速重新生成"}, + domains:{label:"领域方案库",icon:"◆",subtitle:"沉淀各领域标准方案，供客户站点直接使用或快速微调"}, + domainDetail:{label:"水务 · 自来水厂方案",icon:"◇",subtitle:"查看领域资产、运维流程、Cube 页面、菜单及知识内容"}, +}; +const nav: PageKey[] = ["projects","domains","basic","assets","functions","ai","generate","result","preview"]; +const projects = [ + ["苏州工业园能源站","工业园区","25","6","3","生成完成","2026/08/14 11:20","王宇"], + ["上海数据中心 A 区","数据中心","48","8","4","草稿","2026/08/14 09:42","陈晨"], + ["滨江智慧楼宇","智慧楼宇","32","5","2","生成中","2026/08/13 17:08","李静"], + ["无锡装备工厂","工业制造","16","6","3","部分失败","2026/08/13 15:31","周扬"], + ["青岛水务示范站","智慧水务","61","7","5","生成完成","2026/08/12 16:03","王宇"], +]; +const startAssets = [ + {type:"冷水机组",count:3,rule:"CH-##",parent:"制冷系统",area:"动力中心"}, + {type:"循环水泵",count:6,rule:"PUMP-##",parent:"水循环系统",area:"泵房"}, + {type:"配电柜",count:4,rule:"PDC-##",parent:"配电系统",area:"一层配电室"}, + {type:"智能电表",count:12,rule:"METER-##",parent:"配电系统",area:"各用电区域"}, +]; + +// Wordbuddy 支持的模型。只有 rate 为 "0.00x"(免费) 的模型可选，其余灰显。 +const MODELS = [ + { name: "Auto", tag: "自动选择", rate: "—" }, + { name: "Hy3", tag: "免费", rate: "0.00x" }, + { name: "GLM-5.4", tag: "订阅优先", rate: "0.79x" }, + { name: "GLM-5.3", tag: "订阅优先", rate: "0.79x" }, + { name: "GLM-5.2", tag: "夜间折扣", rate: "0.79x" }, + { name: "GLM-5.1", tag: "", rate: "0.79x" }, + { name: "GLM-5v-Turbo", tag: "视觉理解", rate: "0.95x" }, + { name: "MiniMax-M3", tag: "高性价比", rate: "0.25x" }, + { name: "Kimi-K3", tag: "订阅优先", rate: "1.62x" }, +]; + +function Status({children}:{children:React.ReactNode}){const v=String(children);const tone=/完成|正常|成功|通过|推荐/.test(v)?"ok":/生成中|校验中|告警/.test(v)?"warn":/失败|异常/.test(v)?"bad":"muted";return {children}} +function Button({children,secondary,onClick,disabled}:{children:React.ReactNode;secondary?:boolean;onClick?:()=>void;disabled?:boolean}){return } +function Panel({title,tools,children,className=""}:{title?:string;tools?:React.ReactNode;children:React.ReactNode;className?:string}){return
{title&&
{title}
{tools}
}
{children}
} +function Field({label,required,hint,children}:{label:string;required?:boolean;hint?:string;children:React.ReactNode}){return } + +export default function Home(){ + const [page,setPage]=useState("projects"); const [toast,setToast]=useState(""); const [modal,setModal]=useState(""); const [model,setModel]=useState("Hy3"); const [modelOpen,setModelOpen]=useState(false); + const [aiOpen,setAiOpen]=useState(false); const [aiMessages,setAiMessages]=useState<{role:"user"|"assistant";content:string}[]>([]); const [aiDraft,setAiDraft]=useState(""); const [aiBusy,setAiBusy]=useState(false); const aiEndRef=useRef(null); + const [view,setView]=useState<"table"|"card">("table"); const [assets,setAssets]=useState(startAssets); const [functionTab,setFunctionTab]=useState<"mu"|"cube"|"menu">("mu"); + const [previewTab,setPreviewTab]=useState<"info"|"json"|"feedback">("info"); const [selectedMu,setSelectedMu]=useState(["设备总览","实时监控","告警中心","能耗分析"]); const [progress,setProgress]=useState(0); + const totalAssets=useMemo(()=>assets.reduce((n,item)=>n+Number(item.count),0),[assets]); + const go=(target:PageKey)=>{setPage(target);window.history.replaceState({},"","?page="+target)}; const notify=(m:string)=>{setToast(m);window.setTimeout(()=>setToast(""),2200)}; + const generate=()=>{setProgress(10);let v=10;const timer=window.setInterval(()=>{v+=15;setProgress(Math.min(v,100));if(v>=100){window.clearInterval(timer);notify("站点方案生成完成")}},360)}; + useEffect(()=>{ if(aiEndRef.current) aiEndRef.current.scrollIntoView({block:"end"}); }, [aiMessages, aiOpen]); + const sendAi=async()=>{ + const text=aiDraft.trim(); + if(!text||aiBusy)return; + setAiMessages(m=>[...m,{role:"user" as const,content:text},{role:"assistant" as const,content:""}]); + setAiDraft(""); setAiBusy(true); + try{ + const res=await fetch("/api/chat",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:text,model})}); + if(!res.ok||!res.body){const t=await res.text().catch(()=>"");throw new Error(t||("HTTP "+res.status));} + const reader=res.body.getReader(); const dec=new TextDecoder(); let acc=""; + for(;;){const {done,value}=await reader.read(); if(done)break; acc+=dec.decode(value,{stream:true}); + setAiMessages(m=>{const c=m.slice(); c[c.length-1]={role:"assistant",content:acc}; return c;});} + if(!acc.trim()) setAiMessages(m=>{const c=m.slice(); c[c.length-1]={role:"assistant",content:"（模型未返回内容）"}; return c;}); + }catch(e:any){ + setAiMessages(m=>{const c=m.slice(); const last=c[c.length-1]; + if(last&&last.role==="assistant"){c[c.length-1]={role:"assistant",content:last.content+"\n[连接出错] "+(e?.message||e)};} + else c.push({role:"assistant",content:"[连接出错] "+(e?.message||e)}); return c;}); + }finally{ setAiBusy(false); } + }; + if(page==="login")return go("projects")}/>; + return
+
⬡
iStationiStation TeamStationBuilder⌄
⌕♧?▦wang.yu@advantech.com
iStation Team
+ + +
iStation StationBuilder　/　{meta[page].label}

{meta[page].label}

{meta[page].subtitle}

{!["projects","domains","domainDetail"].includes(page)&&}{page==="projects"&&}{page==="domains"&&}{page==="domainDetail"&&}
{(["basic","assets","functions","ai","generate"] as PageKey[]).includes(page)&&}
+ {page==="projects"&&} {page==="domains"&&} {page==="domainDetail"&&} {page==="basic"&&setModal("ai")}/>} {page==="assets"&&} {page==="functions"&&} {page==="ai"&&} {page==="generate"&&} {page==="result"&&} {page==="preview"&&} +
{(["basic","assets","functions","ai"] as PageKey[]).includes(page)&&
}
+ {toast&&
✓{toast}
}{modal&&setModal("")} notify={notify}/>} + {!aiOpen&&} + {aiOpen&&
+
✦
StationBuilder AI模型 · {model}
+
+ {aiMessages.length===0&&
我是由 Wordbuddy {model} 驱动的站点助手，问我和站点生成相关的问题吧。
} + {aiMessages.map((m,i)=>
{m.role==="user"?"W":"✦"}
{m.content||(m.role==="assistant"&&aiBusy?"…":"")}
)} +
+
+