UI 截图分析与设计简报生成器

{ // 设计简报 "brief": "这是一个名为 AuditFlow 的现代政府审计应用仪表板。界面采用清晰的层级结构，以数据表格和关键指标卡片为核心。顶部导航栏包含品牌标识、搜索栏和用户操作区。主内容区分为左侧筛选面板和右侧数据展示区，数据以表格形式呈现，支持排序和分页。整体设计强调信息密度和可读性，使用克制的色彩方案突出审计状态。", "design_spec": { "brand": "AuditFlow", "page_type": "dashboard", "focus": "government audit", "light_mode": { "background": "#F9FAFB", "surface": "#FFFFFF", "text_primary": "#111827", "text_secondary": "#6B7280", "border": "#E5E7EB", "primary": { "50": "#EFF6FF", "100": "#DBEAFE", "500": "#3B82F6", "600": "#2563EB", "700": "#1D4ED8" }, "secondary": { "50": "#F0FDF4", "100": "#DCFCE7", "500": "#22C55E", "600": "#16A34A", "700": "#15803D" }, "accent": { "warning": "#F59E0B", "danger": "#EF4444", "info": "#06B6D4", "shadow": "rgba(0, 0, 0, 0.05)", "gradient_start": "#3B82F6", "gradient_end": "#06B6D4" } }, "dark_mode": { "background": "#111827", "surface": "#1F2937", "text_primary": "#F9FAFB", "text_secondary": "#9CA3AF", "border": "#374151", "primary": { "50": "#1E3A5F", "100": "#1D4ED8", "500": "#3B82F6", "600": "#60A5FA", "700": "#93C5FD" }, "secondary": { "50": "#064E3B", "100": "#065F46", "500": "#10B981", "600": "#34D399", "700": "#6EE7B7" }, "accent": { "warning": "#FBBF24", "danger": "#F87171", "info": "#22D3EE", "shadow": "rgba(0, 0, 0, 0.3)", "gradient_start": "#60A5FA", "gradient_end": "#22D3EE" } }, "grays": { "50": "#F9FAFB", "100": "#F3F4F6", "200": "#E5E7EB", "300": "#D1D5DB", "400": "#9CA3AF", "500": "#6B7280", "600": "#4B5563", "700": "#374151", "800": "#1F2937", "900": "#111827" }, "responsive_breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "components": { "navbar": { "height": "64px", "sticky": true, "elements": ["logo", "search_input", "notification_icon", "user_avatar"] }, "sidebar": { "width": "280px", "collapsible": true, "breakpoint": "lg", "elements": ["filter_section", "status_legend", "date_range_picker"] }, "data_table": { "columns": ["id", "entity_name", "audit_type", "status", "risk_level", "last_updated", "actions"], "row_height": "48px", "sortable": true, "pagination": true, "page_size": 10 }, "cards": { "stat_card": { "count": 4, "layout": "grid", "grid_columns": "4", "breakpoint_columns": { "md": "2", "sm": "1" } } } }, "typography": { "font_family": "Inter, system-ui, sans-serif", "headings": { "h1": "24px/32px", "h2": "20px/28px", "h3": "16px/24px" }, "body": "14px/20px", "small": "12px/16px", "monospace": "SFMono-Regular, Menlo, monospace" }, "spacing": { "base_unit": "4px", "padding": { "page": "24px", "card": "16px", "table_cell": "12px" }, "gap": { "grid": "16px", "flex": "8px" } }, "effects": { "border_radius": { "sm": "4px", "md": "8px", "lg": "12px" }, "shadow": { "sm": "0 1px 2px rgba(0, 0, 0, 0.05)", "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1)", "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1)" } }, "svg_assets": { "logo": "AuditFlow 品牌标识，包含审计图标和文字", "status_icons": ["成功勾选", "警告三角", "错误叉号", "信息圆点"], "chart_icons": ["柱状图", "折线图", "饼图"] } } } ``` ```markdown # 实现简报 请实现一个名为 AuditFlow 的政府审计仪表板。界面需包含以下核心区域： 1. **顶部导航栏**：固定高度，包含品牌标识、全局搜索框、通知图标和用户头像。搜索框应支持键盘快捷键聚焦。 2. **左侧筛选面板**：在桌面端显示，包含审计状态筛选（如进行中、已完成、待审核）、风险等级图例和日期范围选择器。在平板及以下尺寸自动折叠为抽屉式。 3. **主内容区**： - 顶部为 4 个关键指标卡片，展示总审计数、高风险项、完成率和平均处理时间。卡片在移动端堆叠为单列。 - 下方为数据表格，包含审计实体名称、类型、状态、风险等级、最后更新时间和操作按钮。表格支持列排序、行选择和分页。 4. **视觉规范**： - 使用两套主色板：蓝色系（primary）用于主要操作和选中状态，绿色系（secondary）用于成功和完成状态。 - 灰色阶用于背景、边框和次要文本，确保对比度符合可访问性标准。 - 警告、错误和信息状态使用独立的强调色。 - 卡片和表格使用轻微阴影和圆角，保持现代简洁风格。 5. **响应式行为**： - 桌面端（≥1024px）：三栏布局（导航、筛选、内容）。 - 平板（768px-1023px）：筛选面板隐藏，内容区占满宽度。 - 移动端（<768px）：导航栏简化，表格横向滚动，卡片单列显示。 6. **交互细节**： - 表格行悬停时高亮显示。 - 状态标签使用不同颜色区分。 - 分页控件在底部，显示当前页和总页数。 - 所有图标使用 SVG，保持线性风格。 请严格按照上述规范实现，确保视觉一致性和良好的用户体验。