团队项目工作台

复制 1 次 更新于 2026-10-15 22:19
请制作一个受 macOS 26 Liquid Glass 启发的「团队项目工作台」Web 页面。 直接交付完整可运行的页面,不要只给设计建议、局部代码或图片。 【交付形式】 生成自包含的 index.html,CSS 与 JavaScript 内嵌,保存后可以直接用浏览器打开。 不依赖构建工具、CDN、远程字体、远程图片或后端。使用系统字体和内联图标。 能写文件时在允许的输出目录创建文件并告知路径;只能回复文本时用一个完整 HTML 代码块交付。 如果当前目录已有工程,请另建独立演示文件,不覆盖已有入口。 【用户与内容】 用户是每天查看项目进展、寻找资料并执行操作的团队成员。 首屏直接显示工作台,布局为左侧导航、顶部路径与主内容区,包含: 1. 导航:全部项目、进行中、我的收藏。 2. 页头:项目工作台、简短描述、一个「新建项目」主按钮。 3. 紧凑统计:全部、进行中、已完成,数量与示例数据一致。 4. 工具条:搜索、状态筛选、卡片/列表切换。 5. 六个标注「示例」的项目,含名称、简述、状态、更新时间和收藏按钮。 6. 新建项目弹窗:名称、描述、取消、创建。 数据只保存在页面内存中,刷新恢复初始值,用一句简短文案告知用户。 【视觉要求】 整体清透、安静、紧凑,适合高频扫描,避免巨大营销标题与无意义装饰。 低频环境光左暖杏、右冷蓝,中间保持白净。 色彩:页面底色 #F7F9FC;暖杏 #FFD29D;冷蓝 #A0CFFF; 主操作蓝 #2868D8;正文 #202C40;次要文字 #5B6D85。 背景 CSS 起点: background: radial-gradient(70rem 45rem at -8% 6%, rgba(255,210,157,.46), transparent 55%), radial-gradient(70rem 44rem at 108% 9%, rgba(160,207,255,.50), transparent 58%), #f7f9fc; 玻璃表面 CSS 起点: background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.42)); border: 1px solid rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 18px 48px rgba(55,83,118,.14); -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%); 参数应提取成 CSS 变量,根据可读性调整: 导航与工具条更透明,卡片用半透明白色填充并减少额外模糊; 模态框提高白色覆盖,长文本区接近实色。 不要给父容器设置 opacity,文字、图标与输入内容必须保持清晰。 避免玻璃叠玻璃,内部控件使用简单填充和细边框。 统一 8/12/16/24px 间距;表面圆角约 18~22px,控件约 10~12px。 主色集中强调主操作,项目状态同时用文字表达。 【真实交互】 搜索实时过滤名称和描述;状态筛选、收藏与卡片/列表切换可以组合使用。 切换视图保留搜索和筛选条件,卡片与列表使用同一份数据。 搜索无结果时显示空态与清除筛选入口,不留假按钮。 新建弹窗使用原生 dialog、button、label、input: - 名称去掉首尾空格后不能为空,非法输入有明确提示。 - 创建成功后更新列表与统计,让新项目可见;必要时清除阻挡它的筛选并提供反馈。 - 取消或 Escape 不创建项目。 - 打开时焦点进入表单,关闭后回到触发按钮。 视觉上可点击的区域与真实命中范围一致,图标按钮有可访问名称。 【响应式与降级】 1440px:侧栏、三列卡片、紧凑工具条。 768px:两列卡片,工具条允许换行。 390px:导航横排、卡片单列、搜索和操作换行。 不靠缩小正文硬塞布局,不能出现页面横向溢出;保持可见键盘焦点和合理触控面积。 不支持 backdrop-filter 时用实色底; prefers-reduced-transparency 或 prefers-contrast: more 时提高覆盖和边界清晰度; prefers-reduced-motion 时减少动画,不做持续装饰动画。 【完成前验证】 检查搜索、筛选、收藏、新建成功/错误/取消,以及键盘操作。 有浏览器工具时在 1440、768、390px 下检查布局、截图并观察控制台; 没有工具时如实列出未实测项,不把自检推断写成已验证。 交付完整 HTML,附简短打开方式、已实现交互和实测结果。 效果属于 Web CSS 模拟,不要宣称实现了 Apple 原生系统材质。