```json{
"summary": "设计了一个面向 PDM 的工业感后台工作台页面，整合工艺配置中心、树状工艺库、知识库详情与 ERP 下单表单，采用深色工业界面、分层卡片、状态提示与响应式双栏布局，突出字段配置、版本追踪和业务联动。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>PDM 工艺管理后台</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;80…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.c…\" />\n <style>\n :root{\n --bg:#0a0f14;\n --panel:#0f1722;\n --panel-2:#131d2b;\n --panel-3:#1a2636;\n --line:rgba(148,163,184,.16);\n --soft:rgba(148,163,184,.08);\n --text:#e5eef8;\n --muted:#8ea0b8;\n --cyan:#44d4ff;\n --amber:#f8b84e;\n --green:#34d399;\n --red:#fb7185;\n --violet:#8b7cff;\n --shadow:0 20px 50px rgba(0,0,0,.35);\n }\n *{box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n font-family:'Noto Sans SC',sans-serif;\n background:\n radial-gradient(circle at 0% 0%, rgba(68,212,255,.12), transparent 28%),\n radial-gradient(circle at 100% 20%, rgba(139,124,255,.14), transparent 30%),\n radial-gradient(circle at 50% 100%, rgba(52,211,153,.08), transparent 28%),\n linear-gradient(180deg,#081019 0%,#0a0f14 100%);\n color:var(--text);\n min-height:100vh;\n background-attachment:fixed;\n }\n body::before{\n content:'';\n position:fixed;\n inset:0;\n pointer-events:none;\n opacity:.18;\n background-image:url('https://www.transparenttextures.com/patterns/carbon-fibre.png');\n mix-blend-mode:soft-light;\n }\n .display-font{font-family:'Outfit',sans-serif}\n .glass{\n background:linear-gradient(180deg, rgba(19,29,43,.92), rgba(12,18,28,.92));\n border:1px solid var(--line);\n box-shadow:var(--shadow);\n backdrop-filter: blur(14px);\n }\n .soft-panel{\n background:linear-gradient(180deg, rgba(19,29,43,.88), rgba(17,24,39,.7));\n border:1px solid rgba(148,163,184,.12);\n }\n .grid-bg{\n position:relative;\n overflow:hidden;\n }\n .grid-bg::after{\n content:'';\n position:absolute;\n inset:0;\n background-image:\n linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);\n background-size:32px 32px;\n mask-image:linear-gradient(180deg, rgba(255,255,255,.45), transparent 85%);\n pointer-events:none;\n }\n .glow-border{position:relative}\n .glow-border::before{\n content:'';\n position:absolute;\n inset:-1px;\n border-radius:inherit;\n padding:1px;\n background:linear-gradient(135deg, rgba(68,212,255,.7), rgba(139,124,255,.25), rgba(248,184,78,.55));\n -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite:xor;\n mask-composite:exclude;\n opacity:.55;\n pointer-events:none;\n }\n .tag{\n border:1px solid rgba(255,255,255,.08);\n background:rgba(255,255,255,.04);\n color:#d4deea;\n }\n .tag-cyan{background:rgba(68,212,255,.12); color:#8ce7ff; border-color:rgba(68,212,255,.26)}\n .tag-amber{background:rgba(248,184,78,.12); color:#ffd58f; border-color:rgba(248,184,78,.24)}\n .tag-green{background:rgba(52,211,153,.12); color:#8af0c5; border-color:rgba(52,211,153,.24)}\n .tag-red{background:rgba(251,113,133,.12); color:#ff9cb0; border-color:rgba(251,113,133,.24)}\n .input, .select, .textarea{\n width:100%;\n background:rgba(7,12,20,.72);\n border:1px solid rgba(148,163,184,.16);\n color:var(--text);\n border-radius:14px;\n outline:none;\n transition:all .2s ease;\n }\n .input, .select{height:44px; padding:0 14px}\n .textarea{min-height:120px; padding:14px}\n .input:focus, .select:focus, .textarea:focus{\n border-color:rgba(68,212,255,.55);\n box-shadow:0 0 0 3px rgba(68,212,255,.14);\n }\n .btn{\n display:inline-flex; align-items:center; justify-content:center; gap:.6rem;\n height:44px; padding:0 16px; border-radius:14px; font-weight:600;\n transition:all .25s ease; cursor:pointer;\n }\n .btn-primary{\n background:linear-gradient(135deg, var(--cyan), #7c8cff);\n color:#071018;\n box-shadow:0 10px 30px rgba(68,212,255,.22);\n }\n .btn-primary:hover{transform:translateY(-1px); filter:saturate(1.08)}\n .btn-dark{\n background:rgba(255,255,255,.04);\n border:1px solid rgba(148,163,184,.14);\n color:#dbe7f5;\n }\n .btn-dark:hover{background:rgba(255,255,255,.08)}\n .sidebar-item, .tree-item, .field-row, .upload-card, .version-item, .order-row, .metric-card{\n transition:all .25s ease;\n }\n .sidebar-item:hover, .tree-item:hover, .field-row:hover, .upload-card:hover, .version-item:hover, .order-row:hover, .metric-card:hover{\n transform:translateY(-1px);\n border-color:rgba(68,212,255,.28);\n background:rgba(255,255,255,.05);\n }\n .pulse-dot{\n width:8px; height:8px; border-radius:999px; background:var(--green); position:relative;\n }\n .pulse-dot::after{\n content:''; position:absolute; inset:-4px; border-radius:inherit; border:1px solid rgba(52,211,153,.25); animation:pulse 1.8s infinite;\n }\n @keyframes pulse{0%{transform:scale(.7); opacity:.8} 100%{transform:scale(1.8); opacity:0}}\n .fade-up{opacity:0; transform:translateY(18px); animation:fadeUp .8s ease forwards}\n .fade-up.delay-1{animation-delay:.08s}\n .fade-up.delay-2{animation-delay:.16s}\n .fade-up.delay-3{animation-delay:.24s}\n .fade-up.delay-4{animation-delay:.32s}\n @keyframes fadeUp{to{opacity:1; transform:translateY(0)}}\n .scrollbar::-webkit-scrollbar{width:8px;height:8px}\n .scrollbar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2); border-radius:999px}\n .scrollbar::-webkit-scrollbar-track{background:transparent}\n .split-line{height:1px; background:linear-gradient(90deg, transparent, rgba(148,163,184,.22), transparent)}\n .status-bar{height:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06)}\n .status-bar > span{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan), var(--amber))}\n @media (max-width: 1024px){\n .desktop-only{display:none}\n }\n </style>\n</head>\n<body>\n <div class=\"min-h-screen p-4 md:p-6\">\n <div class=\"mx-auto max-w-[1680px]\">\n <div class=\"glass glow-border rounded-[28px] overflow-hidden grid-bg fade-up\">\n <div class=\"grid grid-cols-1 xl:grid-cols-[92px_360px_minmax(0,1fr)] min-h-[calc(100vh-2rem)]\">\n\n <aside class=\"border-r border-white/10 bg-black/10 xl:block hidden\">\n <div class=\"h-full flex flex-col items-center py-6 gap-4\">\n <div class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-300 to-indigo-400 flex items-center justify-center text-slate-950 text-xl shadow-2xl\">\n <i class=\"fa-solid fa-industry\"></i>\n </div>\n <button class=\"sidebar-item w-14 h-14 rounded-2xl soft-panel border border-white/10 text-cyan-300 cursor-pointer\" aria-label=\"工艺中心\">\n <i class=\"fa-solid fa-diagram-project\"></i>\n </button>\n <button class=\"sidebar-item w-14 h-14 rounded-2xl soft-panel border border-white/10 text-slate-200 cursor-pointer\" aria-label=\"知识库\">\n <i class=\"fa-solid fa-book-open\"></i>\n </button>\n <button class=\"sidebar-item w-14 h-14 rounded-2xl soft-panel border border-white/10 text-slate-200 cursor-pointer\" aria-label=\"下单管理\">\n <i class=\"fa-solid fa-file-circle-check\"></i>\n </button>\n <button class=\"sidebar-item w-14 h-14 rounded-2xl soft-panel border border-white/10 text-slate-200 cursor-pointer\" aria-label=\"版本追踪\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n </button>\n <div class=\"mt-auto w-14 h-14 rounded-2xl soft-panel border border-white/10 flex items-center justify-center text-slate-200\">\n <i class=\"fa-solid fa-gear\"></i>\n </div>\n </div>\n </aside>\n\n <section class=\"border-r border-white/10 bg-slate-950/20\">\n <div class=\"p-5 md:p-6 h-full flex flex-col gap-5\">\n <div class=\"fade-up delay-1\">\n <div class=\"flex items-center justify-between gap-3 mb-4\">\n <div>\n <p class=\"text-xs uppercase tracking-[0.35em] text-cyan-300/80 display-font\">PDM Process Hub</p>\n <h1 class=\"display-font text-2xl md:text-3xl font-semibold mt-1\">工艺管理中心</h1>\n </div>\n <div class=\"hidden md:flex items-center gap-2 tag rounded-full px-3 py-2 text-xs\">\n <span class=\"pulse-dot\"></span>\n ERP 联通正常\n </div>\n </div>\n\n <div class=\"soft-panel rounded-2xl p-4 border border-white/10\">\n <label class=\"relative block\">\n <i class=\"fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-500\"></i>\n <input class=\"input pl-11\" placeholder=\"搜索工艺名称 / 工艺编码 / 设备\" />\n </label>\n <div class=\"grid grid-cols-2 gap-3 mt-3\">\n <button class=\"btn btn-dark\"><i class=\"fa-solid fa-filter\"></i>高级筛选</button>\n <button class=\"btn btn-primary\"><i class=\"fa-solid fa-plus\"></i>新增工艺</button>\n </div>\n </div>\n </div>\n\n <div class=\"grid grid-cols-2 gap-3 fade-up delay-2\">\n <div class=\"metric-card soft-panel rounded-2xl p-4 border border-white/10\">\n <div class=\"flex items-center justify-between text-sm text-slate-400\">\n <span>配置字段数</span>\n <i class=\"fa-solid fa-sliders text-cyan-300\"></i>\n </div>\n <div class=\"display-font text-3xl font-semibold mt-3\">42</div>\n <div class=\"status-bar mt-3\"><span style=\"width:78%\"></span></div>\n </div>\n <div class=\"metric-card soft-panel rounded-2xl p-4 border border-white/10\">\n <div class=\"flex items-center justify-between text-sm text-slate-400\">\n <span>工艺条目数</span>\n <i class=\"fa-solid fa-layer-group text-amber-300\"></i>\n </div>\n <div class=\"display-font text-3xl font-semibold mt-3\">186</div>\n <div class=\"status-bar mt-3\"><span style=\"width:64%\"></span></div>\n </div>\n </div>\n\n <div class=\"fade-up delay-3 flex-1 min-h-0\">\n <div class=\"flex items-center justify-between mb-3\">\n <h2 class=\"text-sm font-semibold text-slate-200\">层级导航</h2>\n <span class=\"text-xs text-slate-500\">品类 → 设备 → 工艺</span>\n </div>\n <div class=\"soft-panel rounded-2xl border border-white/10 p-3 h-[340px] md:h-[420px] overflow-auto scrollbar\">\n <div class=\"space-y-2 text-sm\">\n <div class=\"tree-item rounded-xl border border-white/10 p-3 bg-white/[0.02]\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center gap-2 text-slate-100 font-medium\"><i class=\"fa-solid fa-cubes-stacked text-cyan-300\"></i>鞋底类</div>\n <span class=\"tag rounded-full px-2 py-1 text-[11px]\">12</span>\n </div>\n <div class=\"ml-5 mt-3 space-y-2 border-l border-white/10 pl-4\">\n <div class=\"tree-item rounded-xl border border-white/10 p-3 bg-white/[0.02]\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-microchip text-amber-300\"></i>射出机</div>\n <span class=\"tag tag-green rounded-full px-2 py-1 text-[11px]\">设备</span>\n </div>\n <div class=\"mt-3 ml-5 border-l border-white/10 pl-4 space-y-2\">\n <button class=\"tree-item w-full text-left rounded-xl border border-cyan-400/20 bg-cyan-400/10 p-3 cursor-pointer\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-medium\">大底双色射出工艺</span>\n <span class=\"text-xs text-cyan-300\">PR-2024-018</span>\n </div>\n </button>\n <button class=\"tree-item w-full text-left rounded-xl border border-white/10 bg-white/[0.02] p-3 cursor-pointer\">\n <div class=\"flex items-center justify-between\">\n <span>轻量发泡注塑工艺</span>\n <span class=\"text-xs text-slate-500\">PR-2024-033</span>\n </div>\n </button>\n </div>\n </div>\n <div class=\"tree-item rounded-xl border border-white/10 p-3 bg-white/[0.02] flex items-center justify-between\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-gears text-slate-300\"></i>冷压机</div>\n <span class=\"tag rounded-full px-2 py-1 text-[11px]\">5</span>\n </div>\n </div>\n </div>\n\n <div class=\"tree-item rounded-xl border border-white/10 p-3 bg-white/[0.02] flex items-center justify-between\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-cubes-stacked text-violet-300\"></i>鞋面类</div>\n <span class=\"tag rounded-full px-2 py-1 text-[11px]\">27</span>\n </div>\n <div class=\"tree-item rounded-xl border border-white/10 p-3 bg-white/[0.02] flex items-center justify-between\">\n <div class=\"flex items-center gap-2\"><i class=\"fa-solid fa-cubes-stacked text-emerald-300\"></i>辅料类</div>\n <span class=\"tag rounded-full px-2 py-1 text-[11px]\">19</span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"fade-up delay-4\">\n <div class=\"soft-panel rounded-2xl border border-white/10 p-4\">\n <div class=\"flex items-center justify-between mb-3\">\n <h3 class=\"font-semibold\">版本记录</h3>\n <span class=\"text-xs text-slate-500\">最近更新</span>\n </div>\n <div class=\"space-y-2 text-sm\">\n <div class=\"version-item rounded-xl border border-white/10 p-3 bg-white/[0.02] flex items-start gap-3\">\n <div class=\"mt-1 w-8 h-8 rounded-lg bg-cyan-400/10 text-cyan-300 flex items-center justify-center\"><i class=\"fa-solid fa-pen\"></i></div>\n <div class=\"min-w-0\">\n <div class=\"font-medium\">温度要求从 175℃ 调整为 178℃</div>\n <div class=\"text-slate-500 text-xs mt-1\">陈工 · 2025-01-14 14:26</div>\n </div>\n </div>\n <div class=\"version-item rounded-xl border border-white/10 p-3 bg-white/[0.02] flex items-start gap-3\">\n <div class=\"mt-1 w-8 h-8 rounded-lg bg-amber-400/10 text-amber-300 flex items-center justify-center\"><i class=\"fa-solid fa-list-check\"></i></div>\n <div class=\"min-w-0\">\n <div class=\"font-medium\">新增字段“压力参数”并启用数值校验</div>\n <div class=\"text-slate-500 text-xs mt-1\">系统管理员 · 2025-01-13 09:10</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <main class=\"p-4 md:p-6 overflow-auto scrollbar\">\n <div class=\"space-y-6\">\n <header class=\"fade-up\">\n <div class=\"flex flex-col 2xl:flex-row 2xl:items-center 2xl:justify-between gap-4\">\n <div>\n <div class=\"flex flex-wrap items-center gap-2 mb-3\">\n <span class=\"tag tag-cyan rounded-full px-3 py-1 text-xs\">工艺知识库</span>\n <span class=\"tag tag-amber rounded-full px-3 py-1 text-xs\">关联 ERP 下单</span>\n <span class=\"tag rounded-full px-3 py-1 text-xs\">编码 PR-2024-018</span>\n </div>\n <h2 class=\"display-font text-3xl md:text-4xl font-semibold tracking-tight\">大底双色射出工艺</h2>\n <p class=\"text-slate-400 mt-2 max-w-3xl\">用于鞋底类射出机生产，支持自定义工艺参数、文档/视频/图片知识沉淀、版本追踪，以及在下单时级联选择并自动带出企划标签与工艺描述。</p>\n </div>\n <div class=\"flex flex-wrap gap-3\">\n <button class=\"btn btn-dark\"><i class=\"fa-solid fa-clock-rotate-left\"></i>查看历史</button>\n <button class=\"btn btn-primary\"><i class=\"fa-solid fa-floppy-disk\"></i>保存配置</button>\n </div>\n </div>\n </header>\n\n <section class=\"grid grid-cols-1 2xl:grid-cols-[1.05fr_.95fr] gap-6\">\n <div class=\"space-y-6\">\n <div class=\"glass rounded-[24px] p-5 md:p-6 fade-up delay-1\">\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <h3 class=\"text-xl font-semibold\">配置中心</h3>\n <p class=\"text-sm text-slate-500 mt-1\">支持动态字段、选项维护、字段类型与关联关系定义</p>\n </div>\n <button class=\"btn btn-dark\"><i class=\"fa-solid fa-plus\"></i>添加字段</button>\n </div>\n\n <div class=\"grid md:grid-cols-2 gap-4 mb-5\">\n <div>\n <label class=\"text-sm text-slate-400 mb-2 block\">关联工艺编码</label>\n <input class=\"input\" value=\"PR-2024-018\" />\n </div>\n <div>\n <label class=\"text-sm text-slate-400 mb-2 block\">关联字段</label>\n <select class=\"select\">\n <option>工艺名称</option>\n <option>工艺编码</option>\n </select>\n </div>\n </div>\n\n <div class=\"space-y-3\">\n <div class=\"field-row rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"grid md:grid-cols-[1.2fr_.9fr_1.2fr_auto] gap-3 items-center\">\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段名称</div>\n <input class=\"input\" value=\"温度要求\" />\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段类型</div>\n <select class=\"select\"><option>数字</option></select>\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">说明 / 单位</div>\n <input class=\"input\" value=\"单位：℃，支持上下限校验\" />\n </div>\n <div class=\"flex items-end h-full\">\n <button class=\"btn btn-dark w-full\"><i class=\"fa-solid fa-sliders\"></i></button>\n </div>\n </div>\n </div>\n\n <div class=\"field-row rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"grid md:grid-cols-[1.2fr_.9fr_1.2fr_auto] gap-3 items-center\">\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段名称</div>\n <input class=\"input\" value=\"压力参数\" />\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段类型</div>\n <select class=\"select\"><option>数字</option></select>\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">说明 / 单位</div>\n <input class=\"input\" value=\"单位：MPa，必填\" />\n </div>\n <div class=\"flex items-end h-full\">\n <button class=\"btn btn-dark w-full\"><i class=\"fa-solid fa-sliders\"></i></button>\n </div>\n </div>\n </div>\n\n <div class=\"field-row rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"grid md:grid-cols-[1.2fr_.9fr_1.2fr_auto] gap-3 items-center\">\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段名称</div>\n <input class=\"input\" value=\"表面效果\" />\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">字段类型</div>\n <select class=\"select\"><option>下拉单选</option></select>\n </div>\n <div>\n <div class=\"text-xs text-slate-500 mb-2\">选项值</div>\n <div class=\"flex flex-wrap gap-2 pt-1\">\n <span class=\"tag rounded-full px-3 py-1 text-xs\">哑光</span>\n <span class=\"tag rounded-full px-3 py-1 text-xs\">半亮</span>\n <span class=\"tag rounded-full px-3 py-1 text-xs\">高亮</span>\n <span class=\"tag tag-cyan rounded-full px-3 py-1 text-xs\">新增选项</span>\n </div>\n </div>\n <div class=\"flex items-end h-full\">\n <button class=\"btn btn-dark w-full\"><i class=\"fa-solid fa-pen-to-square\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"glass rounded-[24px] p-5 md:p-6 fade-up delay-2\">\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <h3 class=\"text-xl font-semibold\">工艺详情 · 知识库</h3>\n <p class=\"text-sm text-slate-500 mt-1\">基础属性、多媒体素材与操作手册集中管理</p>\n </div>\n <span class=\"tag tag-green rounded-full px-3 py-1 text-xs\">当前版本 V3.8</span>\n </div>\n\n <div class=\"grid md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6\">\n <div class=\"soft-panel rounded-2xl p-4 border border-white/10\">\n <div class=\"text-xs text-slate-500\">温度要求</div>\n <div class=\"display-font text-2xl mt-2 font-semibold\">178℃</div>\n </div>\n <div class=\"soft-panel rounded-2xl p-4 border border-white/10\">\n <div class=\"text-xs text-slate-500\">压力参数</div>\n <div class=\"display-font text-2xl mt-2 font-semibold\">0.62 MPa</div>\n </div>\n <div class=\"soft-panel rounded-2xl p-4 border border-white/10\">\n <div class=\"text-xs text-slate-500\">预计耗时</div>\n <div class=\"display-font text-2xl mt-2 font-semibold\">26 min</div>\n </div>\n </div>\n\n <div class=\"grid xl:grid-cols-3 gap-4\">\n <div class=\"upload-card rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"w-12 h-12 rounded-xl bg-cyan-400/10 text-cyan-300 flex items-center justify-center mb-4 text-lg\"><i class=\"fa-solid fa-file-pdf\"></i></div>\n <div class=\"font-semibold\">工艺指南上传</div>\n <div class=\"text-sm text-slate-500 mt-1\">支持 PDF / Word 预览与版本替换</div>\n <div class=\"mt-4 flex items-center justify-between text-xs text-slate-400\">\n <span>guide_v3_8.pdf</span>\n <span>12.4 MB</span>\n </div>\n </div>\n <div class=\"upload-card rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"w-12 h-12 rounded-xl bg-amber-400/10 text-amber-300 flex items-center justify-center mb-4 text-lg\"><i class=\"fa-solid fa-video\"></i></div>\n <div class=\"font-semibold\">现场操作视频</div>\n <div class=\"text-sm text-slate-500 mt-1\">限制格式 MP4 / MOV，自动校验大小</div>\n <div class=\"mt-4 flex items-center justify-between text-xs text-slate-400\">\n <span>machine_setup.mp4</span>\n <span>268 MB</span>\n </div>\n </div>\n <div class=\"upload-card rounded-2xl border border-white/10 bg-white/[0.02] p-4\">\n <div class=\"w-12 h-12 rounded-xl bg-violet-400/10 text-violet-300 flex items-center justify-center mb-4 text-lg\"><i class=\"fa-solid fa-image\"></i></div>\n <div class=\"font-semibold\">高清工艺样板图</div>\n <div class=\"text-sm text-slate-500 mt-1\">支持高清图片归档与批注说明</div>\n <div class=\"mt-4 flex items-center justify-between text-xs text-slate-400\">\n <span>sample_surface_A03.jpg</span>\n <span>8.6 MB</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"space-y-6\">\n <div class=\"glass rounded-[24px] p-5 md:p-6 fade-up delay-3\">\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <h3 class=\"text-xl font-semibold\">产品下单页面</h3>\n <p class=\"text-sm text-slate-500 mt-1\">ERP 核心字段与创研业务字段联动下单</p>\n </div>\n <span class=\"tag tag-red rounded-full px-3 py-1 text-xs\">3 项待校验</span>\n </div>\n\n <div class=\"space-y-5\">\n <div>\n <div class=\"flex items-center gap-2 mb-3\">\n <i class=\"fa-solid fa-database text-cyan-300\"></i>\n <h4 class=\"font-semibold\">ERP 核心字段</h4>\n </div>\n <div class=\"space-y-3\">\n <div class=\"order-row rounded-2xl border border-white/10 bg-white/[0.02] p-4 grid md:grid-cols-2 gap-3\">\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">物料编码 / 品名 <span class=\"text-red-400\">*</span></label>\n <select class=\"select\"><option>MT-88021 / 运动鞋大底</option></select>\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">规格型号 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"RB-42 / 双密度\" />\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">计量单位 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"双\" />\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">下单数量 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"1200\" />\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">仓库 / 库位 <span class=\"text-red-400\">*</span></label>\n <select class=\"select\"><option>成型仓 / A-03-12</option></select>\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">币别 / 单价 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"CNY / 26.50\" />\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"split-line\"></div>\n\n <div>\n <div class=\"flex items-center gap-2 mb-3\">\n <i class=\"fa-solid fa-wand-magic-sparkles text-amber-300\"></i>\n <h4 class=\"font-semibold\">创研业务字段</h4>\n </div>\n <div class=\"space-y-3\">\n <div class=\"order-row rounded-2xl border border-white/10 bg-white/[0.02] p-4 grid gap-3\">\n <div class=\"grid md:grid-cols-2 gap-3\">\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">设计编号 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"RD-3.11-2451\" />\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">关联品牌 <span class=\"text-red-400\">*</span></label>\n <select class=\"select\"><option>Alpha Motion</option></select>\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">企划标签 <span class=\"text-red-400\">*</span></label>\n <input class=\"input\" value=\"春夏轻量 / 城市运动\" />\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">工艺选择 <span class=\"text-red-400\">*</span></label>\n <select class=\"select\"><option>鞋底类 / 射出机 / 大底双色射出工艺</option></select>\n </div>\n </div>\n <div class=\"rounded-2xl border border-cyan-400/20 bg-cyan-400/10 px-4 py-3 text-sm text-cyan-100 flex items-start gap-3\">\n <i class=\"fa-solid fa-circle-info mt-1\"></i>\n <div>\n 选择“品名”后已自动带出最新工艺描述与企划标签，若关联品牌存在冲突规则，系统将实时提示。\n </div>\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">工艺描述 <span class=\"text-red-400\">*</span></label>\n <textarea class=\"textarea\">采用双色射出工艺，首段温度 178℃，压力 0.62MPa；重点控制边缘收缩与表面亮度一致性。生产前请核对模具腔体清洁状态，并依知识库指南执行首件确认。</textarea>\n </div>\n <div>\n <label class=\"text-xs text-slate-500 mb-2 block\">附件上传</label>\n <div class=\"rounded-2xl border border-dashed border-white/15 bg-white/[0.02] p-4 flex flex-col md:flex-row md:items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3 text-sm text-slate-300\">\n <div class=\"w-11 h-11 rounded-xl bg-white/5 flex items-center justify-center text-slate-300\"><i class=\"fa-solid fa-paperclip\"></i></div>\n <div>\n <div>sole_drawing_pack.zip</div>\n <div class=\"text-xs text-slate-500 mt-1\">图纸包 / 选填 / 已通过格式检测</div>\n </div>\n </div>\n <button class=\"btn btn-dark\"><i class=\"fa-solid fa-upload\"></i>更换附件</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"grid md:grid-cols-2 gap-4 mt-5\">\n <div class=\"rounded-2xl border border-amber-400/20 bg-amber-400/10 p-4 text-sm text-amber-100\">\n <div class=\"font-semibold mb-1\">品牌冲突提醒</div>\n 当前品牌的标准工艺库存在 1 项参数差异，提交前建议复核表面效果与压合时长。\n </div>\n <div class=\"rounded-2xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-100\">\n <div class=\"font-semibold mb-1\">自动带出完成</div>\n 已从商品主数据同步最新工艺描述、企划标签与报价单价，减少重复录入。\n </div>\n </div>\n\n <div class=\"flex flex-wrap justify-end gap-3 mt-6\">\n <button class=\"btn btn-dark\"><i class=\"fa-solid fa-file-export\"></i>保存草稿</button>\n <button class=\"btn btn-primary\"><i class=\"fa-solid fa-paper-plane\"></i>提交 ERP</button>\n </div>\n </div>\n\n <div class=\"glass rounded-[24px] p-5 md:p-6 fade-up delay-4\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"text-xl font-semibold\">关键校验规则</h3>\n <i class=\"fa-solid fa-shield-halved text-cyan-300\"></i>\n </div>\n <div class=\"space-y-3 text-sm\">\n <div class=\"rounded-2xl border border-white/10 bg-white/[0.02] p-4 flex items-start gap-3\">\n <div class=\"w-9 h-9 rounded-xl bg-cyan-400/10 text-cyan-300 flex items-center justify-center shrink-0\"><i class=\"fa-solid fa-link\"></i></div>\n <div>\n <div class=\"font-medium\">工艺编码关联校验</div>\n <div class=\"text-slate-500 mt-1\">确保工艺编码与工艺名称唯一映射，避免下单时引用错误知识条目。</div>\n </div>\n </div>\n <div class=\"rounded-2xl border border-white/10 bg-white/[0.02] p-4 flex items-start gap-3\">\n <div class=\"w-9 h-9 rounded-xl bg-amber-400/10 text-amber-300 flex items-center justify-center shrink-0\"><i class=\"fa-solid fa-triangle-exclamation\"></i></div>\n <div>\n <div class=\"font-medium\">品牌工艺冲突提醒</div>\n <div class=\"text-slate-500 mt-1\">当品牌标准与当前工艺库参数不一致时，自动高亮冲突字段并提醒复核。</div>\n </div>\n </div>\n <div class=\"rounded-2xl border border-white/10 bg-white/[0.02] p-4 flex items-start gap-3\">\n <div class=\"w-9 h-9 rounded-xl bg-green-400/10 text-green-300 flex items-center justify-center shrink-0\"><i class=\"fa-solid fa-file-circle-check\"></i></div>\n <div>\n <div class=\"font-medium\">下单字段完整性</div>\n <div class=\"text-slate-500 mt-1\">ERP 必填字段与创研必填字段分组校验，提交前统一检查空值、格式和来源有效性。</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n </div>\n </main>\n </div>\n </div>\n </div>\n </div>\n</body>\n</html>"
},
"next": "[\"字段配置\",\"工艺知识库\",\"下单联动\",\"版本追踪\",\"权限设计\"]",
"breakpoint": "none"
}```
角色
assistant
content
total_tokens
15159
summary
设计了一个面向 PDM 的工业感后台工作台页面，整合工艺配置中心、树状工艺库、知识库详情与 ERP 下单表单，采用深色工业界面、分层卡片、状态提示与响应式双栏布局，突出字段配置、版本追踪和业务联动。
uiParsing
关闭