luban_ui_internal/.github/instructions/prompt.instructions.md

applyTo

applyTo
**

• 说中文
• 这是一个基于Avalonia的项目管理工程，目标是让非程序员也能轻松使用luban管理配置表。

UI设计规范

🎨 主题兼容性

• 深色模式支持: 所有UI元素必须在深色主题下清晰可见，具有足够的对比度
• 浅色模式支持: 所有UI元素必须在浅色主题下保持良好的可读性和视觉效果
• 动态主题切换: 使用DynamicResource绑定，支持运行时主题切换
• 颜色资源化: 避免硬编码颜色值，统一使用主题资源字典中的颜色定义

🎯 交互状态设计

• 主要操作按钮: 使用主题蓝色系，在两种模式下都要突出显示
• 成功/确认状态: 使用绿色系，表示积极操作
• 警告状态: 使用黄色系，提醒用户注意
• 错误/删除状态: 使用红色系，表示危险操作
• 悬停和按下状态: 提供清晰的视觉反馈，确保在两种主题下都有足够的对比度

📝 文字层级

• 主要文字: 使用主题的主要文字颜色，确保最佳可读性
• 次要文字: 使用稍浅的颜色，但仍保持良好的可读性
• 占位符文字: 使用更浅的颜色，明确区分占位符和实际内容
• 禁用文字: 使用最浅的颜色，明确表示不可用状态

🔘 圆角规范

• 按钮圆角: 4px
• 输入框圆角: 4px
• 卡片圆角: 5px
• 列表项圆角: 3px

📏 间距规范

• 小间距: 5px
• 标准间距: 10px
• 中等间距: 15px
• 大间距: 20px
• 页面边距: 20px
• 按钮内边距: 水平15px 垂直8px
• 导航按钮内边距: 水平20px 垂直15px

🎭 动画规范

• 过渡时间: 0.2s (200ms)
• 缓动函数: ease-out
• 支持的过渡: 背景色、前景色、透明度

📱 组件规范

• 导航栏宽度: 200px
• 最小窗口尺寸: 宽度1000px 高度600px
• 设计尺寸: 宽度1200px 高度800px
• 按钮最小高度: 36px
• 输入框最小高度: 32px

🎪 图标使用

• 使用Emoji作为图标: 📚📁📦📱⚙️🎮📊🔧🤖➕🔄📂🌐等
• 图标大小: 导航按钮中正常大小，卡片中40px

🖱️ 交互反馈

• 所有可点击元素必须有悬停状态
• 按钮支持按下状态反馈
• 输入框支持焦点状态
• 列表项支持选中和悬停状态
• 过渡动画让交互更流畅