第一版页面设计；实现主题切换；

.github/instructions/prompt.instructions.md

@@ -2,4 +2,63 @@
 applyTo: '**'
 ---
 - 说中文
-- 这是一个基于electron的项目管理工程，目标是让非程序员也能轻松使用luban管理配置表。
+- 这是一个基于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`
+
+### 🖱️ 交互反馈
+- 所有可点击元素必须有悬停状态
+- 按钮支持按下状态反馈
+- 输入框支持焦点状态
+- 列表项支持选中和悬停状态
+- 过渡动画让交互更流畅