feat: Enhance HistoryView with Guard List and Stats

- Added guard member model and statistics interface.
- Implemented loading functionality for guard list and statistics.
- Introduced a data table to display current guard members with pagination.
- Enhanced error handling and loading states for guard data.
- Updated UI components to include refresh button and statistics display.

feat: Update PointManage and PointGoodsView for Improved User Experience

- Added management flag to PointGoodsItem for better handling in PointManage.
- Enhanced PointGoodsView with improved tooltip logic for purchase status.
- Implemented detailed purchase history alerts and restrictions based on user actions.
- Improved visual feedback for purchased and non-purchasable items.

docs: Add comprehensive API integration documentation

- Documented API modules, data models, and request types.
- Included details on live platform integration and data storage mechanisms.

docs: Establish development workflow guidelines

- Outlined project configuration, environment setup, and code style practices.
- Provided deployment process using Docker.

docs: Create detailed documentation for the live request system

- Described the functionality and data flow of the song request system.
- Included main files and features related to the song request functionality.

docs: Define project structure and UI components

- Documented the overall project structure and key directories.
- Listed main UI components and their usage within the project.

chore: Analyze and document improvements in AnalyzeView

- Detailed enhancements made to the AnalyzeView for better user experience.
- Included visual comparisons and technical highlights of the optimizations.

.kiro/steering/ui-components.md

@@ -0,0 +1,50 @@
+---
+inclusion: fileMatch
+fileMatchPattern: ['*.vue']
+---
+# UI组件
+
+项目使用Vue 3和Naive UI作为主要UI框架，采用组件化设计。
+
+## 主要UI框架
+
+- Vue 3: 使用`<script setup>`语法和组合式API
+- Naive UI: 提供各种预设UI组件
+- VueUse: 提供实用的组合式函数，如`useStorage`
+
+## 常用组件
+
+### Naive UI组件
+
+项目广泛使用Naive UI组件：
+
+- `NCard`: 卡片容器
+- `NSpace`: 间距布局
+- `NButton`: 按钮
+- `NInput`: 输入框
+- `NTabs`: 标签页
+- `NDataTable`: 数据表格
+- `NModal`: 模态框
+- `NAlert`: 警告提示
+- `NTag`: 标签
+- `NIcon`: 图标容器
+
+### 自定义组件
+
+- [SongPlayer.vue](mdc:src/components/SongPlayer.vue): 歌曲播放器组件
+- [LiveRequestOBS.vue](mdc:src/views/obs/LiveRequestOBS.vue): OBS点歌显示组件
+
+## 状态管理
+
+项目使用组合式API和本地存储管理状态：
+
+- `ref`/`computed`: 响应式状态
+- `useStorage`: 持久化存储
+- `useAccount`: 账户状态管理
+
+## UI设计模式
+
+- 使用`NFlex`和`NCard`进行布局
+- 通过`NTabs`组织不同功能区域
+- 使用状态颜色区分不同状态（如等待中、处理中、已完成）
+- 响应式设计适应不同屏幕尺寸