← 返回模板库
智能体交互 UI / 配置示例
轨幕 · 对话工作台
轻量深蓝 HTML 原型,将对话区域、任务概览和状态放进一个视野。
HOW TO USE
如何开始使用
- 01
解压后打开 index.html。
- 02
修改文案、布局和样式。
- 03
真实服务需另行实现认证与数据接口。
一个使用场景
填写任务并点击“预览任务”,以纯文本显示草稿。
适用边界
仅预览输入,不调用模型或保存消息。
下载包包含
- LICENSE
- README.md
- index.html
index.html
只读预览<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>轨幕工作台原型</title><style>*{box-sizing:border-box}body{margin:0;background:#0a0f1d;color:#f6f8ff;font:16px system-ui}main{max-width:900px;margin:40px auto;padding:24px}section{display:grid;grid-template-columns:2fr 1fr;gap:24px}article,aside{background:#111b2e;padding:24px}p{color:#a7b2ca}textarea{width:100%;min-height:90px;background:#0a0f1d;color:white;padding:12px}button{background:#2563ff;color:white;padding:12px;border:0;margin-top:12px}@media(max-width:650px){section{grid-template-columns:1fr}}</style><main><h1>轨幕 · 对话工作台</h1><p>静态原型,未连接模型或保存对话。</p><section><article><h2>对话</h2><label for="message">你的任务</label><textarea id="message"></textarea><button id="preview">预览任务</button><p id="result" role="status"></p></article><aside><h2>任务概览</h2><p>执行权限:未启用</p></aside></section></main><script>document.getElementById('preview').onclick=()=>{const v=document.getElementById('message').value.trim();document.getElementById('result').textContent=v?'任务草稿:'+v:'请先填写任务。';};</script></html>完整文件与许可说明随下载包提供。
COMMUNITY FEEDBACK
评论与星级评价
使用后分享你的建议,让模板一起变好。
—暂无已公开评价
正在加载评价…