feat: optimize performance & filter data

Author: zhangmo8

.copilot-context.md

@@ -0,0 +1,254 @@
+# GitHub Copilot 项目配置文档
+
+本文档为 GitHub Copilot 提供项目上下文信息，帮助 AI 助手更好地理解项目结构和编码规范。
+
+## 项目概览
+
+**项目名称**: VSC Git Panel
+**项目类型**: Visual Studio Code 扩展
+**主要功能**: Git 历史可视化和文件变更管理
+**开发阶段**: WIP (Work In Progress)
+
+## 核心技术栈
+
+### 语言与框架
+- **主语言**: TypeScript (严格模式)
+- **前端框架**: Vue 3 + Composition API
+- **扩展框架**: reactive-vscode
+- **构建工具**: Vite + tsup
+- **包管理器**: pnpm
+
+### 关键依赖
+```json
+{
+  "vue": "^3.5.13",
+  "simple-git": "^3.27.0",
+  "reactive-vscode": "^0.2.0",
+  "dayjs": "^1.11.13",
+  "vue-virtual-scroller": "^1.1.2"
+}
+```
+
+## 编码规范
+
+### TypeScript 风格
+- 使用严格模式 (`strict: true`)
+- 启用 `strictNullChecks`
+- 目标版本: ES2017
+- 模块系统: ESNext
+
+### Vue 组件规范
+- 必须使用 `<script setup lang="ts">` 语法
+- Props 使用 `defineProps<Type>()` 泛型语法
+- 响应式数据优先使用 `ref()` 和 `computed()`
+- 组件文件名使用 PascalCase
+
+### 命名约定
+- **文件名**: 组件用 PascalCase，工具用 camelCase
+- **变量名**: camelCase
+- **常量名**: UPPER_SNAKE_CASE
+- **类型名**: PascalCase
+- **接口名**: PascalCase (无 I 前缀)
+
+### 代码组织
+- 按功能模块组织目录结构
+- 每个模块有独立的 `index.ts` 作为入口
+- 类型定义统一在 `types.ts` 文件中
+- 常量定义在 `constant.ts` 文件中
+
+## 项目结构上下文
+
+### 核心模块说明
+
+#### `/src/views/`
+- `history/`: Git 历史记录的 Vue 应用
+  - `App.vue`: 主应用入口
+  - `components/CommitTable/`: 提交表格组件
+- `diff/`: 文件差异对比视图
+- `webview.ts`: Webview 管理器
+
+#### `/src/git/`
+- `GitChangeMonitor.ts`: Git 变更监控服务
+- `types.ts`: Git 相关类型定义
+- 提供 Git 操作的统一接口
+
+#### `/src/commands/`
+- VS Code 命令定义和实现
+- `clear.ts`, `diff.ts`, `refresh.ts` 等功能命令
+
+#### `/src/storage.ts`
+- 使用 VS Code ExtensionContext 进行数据持久化
+- 提供 commits 数据的 CRUD 操作
+
+### 关键类型定义
+
+```typescript
+interface Commit {
+  hash: string
+  date: string
+  message: string
+  author_name: string
+  author_email: string
+  refs?: string
+  files?: Array<{ status: string, path: string }>
+}
+
+interface CommitGraph {
+  operations: GitOperation[]
+  branches: string[]
+  logResult: {
+    all: Commit[]
+    total: number
+  }
+}
+```
+
+### 常用模式
+
+#### 1. 响应式扩展开发
+```typescript
+const { activate, deactivate } = defineExtension(() => {
+  // 扩展逻辑
+  useDisposable(new Disposable(() => {
+    // 清理逻辑
+  }))
+})
+```
+
+#### 2. 单例服务
+```typescript
+export const useStorage = createSingletonComposable(() => {
+  // 服务逻辑
+  return { /* API */ }
+})
+```
+
+#### 3. Vue 组件通信
+```typescript
+// 父子组件通信使用 props + emit
+const props = defineProps<{ commits: Commit[] }>()
+const emit = defineEmits<{ select: [hash: string] }>()
+
+// Webview 通信使用消息传递
+vscode.postMessage({ command: WEBVIEW_CHANNEL.GET_HISTORY })
+```
+
+## VS Code 扩展特性
+
+### 贡献点 (package.json)
+- **活动栏视图容器**: `git-panel`
+- **面板视图容器**: `git-panel`
+- **Webview 视图**: `git-panel.history`
+- **TreeView 视图**: `git-panel.changes`
+
+### 命令系统
+- `git-panel.history`: 显示历史
+- `git-panel.history.clear`: 清除选择
+- `git-panel.history.refresh`: 刷新历史
+
+### 配置系统
+- 当前无自定义配置项
+- 扩展配置在 `contributes.configuration` 中定义
+
+## 性能优化策略
+
+### 前端优化
+- **虚拟滚动**: 使用 `vue-virtual-scroller` 处理大量提交数据
+- **分页加载**: `ITEMS_PER_PAGE = 45` 的渐进式加载
+- **计算属性缓存**: 使用 `computed()` 缓存复杂计算
+
+### 后端优化
+- **数据缓存**: 在 ExtensionContext 中缓存 Git 数据
+- **增量更新**: 只更新变化的文件信息
+- **错误边界**: 完善的错误处理和日志记录
+
+## 开发上下文
+
+### 构建系统
+```bash
+# 开发模式 - 并行运行前端和后端构建
+pnpm dev  # concurrently "vite" "tsup --watch"
+
+# 生产构建 - 先构建前端再构建后端
+pnpm build  # vite build && tsup src/index.ts --external vscode
+```
+
+### 调试配置
+- VS Code 扩展主机模式调试
+- Webview 开发者工具调试
+- 支持热重载开发
+
+### 测试策略
+- 使用 vitest 进行单元测试
+- 重点测试 Git 操作和数据转换逻辑
+- UI 组件的快照测试
+
+## 常见开发场景
+
+### 1. 添加新的 Git 操作
+1. 在 `/src/git/` 中定义接口
+2. 实现 simple-git 调用
+3. 添加类型定义
+4. 更新存储逻辑
+
+### 2. 添加新的 Vue 组件
+1. 在 `/src/views/history/components/` 创建组件
+2. 使用 `<script setup>` 语法
+3. 接收 props 并定义 emit
+4. 使用 VS Code CSS 变量
+
+### 3. 添加新的 VS Code 命令
+1. 在 `package.json` 的 `contributes.commands` 注册
+2. 在 `/src/commands/` 实现命令逻辑
+3. 在 `/src/commands/index.ts` 中注册
+
+### 4. 处理 Webview 通信
+```typescript
+// 扩展端发送消息
+panel.webview.postMessage({
+  command: CHANNEL.HISTORY,
+  commits: commitData
+})
+
+// Webview 端接收消息
+window.addEventListener('message', (event) => {
+  switch (event.data.command) {
+    case CHANNEL.HISTORY:
+      commits.value = event.data.commits
+      break
+  }
+})
+```
+
+## 错误处理模式
+
+### 统一错误处理
+```typescript
+try {
+  const result = await gitOperation()
+  return result
+}
+catch (error) {
+  logger.error('Operation failed:', error)
+  vscode.window.showErrorMessage(`操作失败: ${error.message}`)
+  throw error
+}
+```
+
+### 用户友好的错误提示
+- 使用 `vscode.window.showErrorMessage` 显示错误
+- 记录详细错误到日志
+- 提供用户可理解的错误信息
+
+## 注意事项
+
+1. **避免使用 console**: 使用项目的 logger 工具
+2. **类型安全**: 所有数据都应有明确的类型定义
+3. **资源清理**: 确保 Disposable 资源正确清理
+4. **性能考虑**: 大数据量时使用虚拟滚动
+5. **VS Code 主题**: 始终使用 VS Code CSS 变量
+6. **错误边界**: 关键操作都要有错误处理
+
+---
+
+*此文档用于为 GitHub Copilot 提供项目上下文，帮助生成符合项目规范的代码。*

README.md

@@ -9,6 +9,11 @@
 <a href="https://marketplace.visualstudio.com/items?itemName=zhangmo8.git-panel" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/zhangmo8.git-panel.svg?color=eee&amp;label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a>
 <a href="https://kermanx.github.io/reactive-vscode/" target="__blank"><img src="https://img.shields.io/badge/made_with-reactive--vscode-%23007ACC?style=flat&labelColor=%23229863"  alt="Made with reactive-vscode" /></a>
 
+## 📚 Documentation
+
+- [**技术栈与开发指南**](./TECH_STACK.md) - 详细的技术栈说明、架构设计和开发规范
+- [**Copilot 配置文档**](./.copilot-context.md) - 为 AI 助手提供的项目上下文信息
+
 ## Configurations
 
 <!-- configs -->