# bit-hub-vue

**Repository Path**: bulab/bit-hub-vue

## Basic Information

- **Project Name**: bit-hub-vue
- **Description**: 简洁新标签页：书签导航、智能分类、壁纸与天气、默认搜索。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-23
- **Last Updated**: 2025-12-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BitHub 浏览器插件 - Vue 3 现代化版本

一个基于 Vue 3 + Element Plus + Tailwind CSS 构建的现代化浏览器扩展，提供新标签页增强、书签管理、壁纸和天气等功能。

## 🚀 技术栈

- **前端框架**: Vue 3 + Composition API
- **UI 组件库**: Element Plus
- **CSS 框架**: Tailwind CSS
- **构建工具**: Vite
- **状态管理**: Pinia
- **数据存储**: IndexedDB
- **浏览器 API**: Chrome Extension API (Manifest V3)

## 📁 项目结构

```
bit-hub-vue/
├── scripts/                    # 构建脚本
│   └── build-manifest.js
├── src/
│   ├── background/             # 后台服务
│   │   └── background.ts
│   ├── components/             # 公共组件
│   │   └── Wallpaper.vue
│   ├── composables/            # 组合式 API 函数
│   │   └── useWallpaper.ts
│   ├── pages/                  # 页面模块
│   │   ├── newtab/             # 新标签页
│   │   │   ├── NewTab.vue
│   │   │   ├── index.html
│   │   │   └── main.ts
│   │   └── popup/              # 弹出窗口
│   │       └── popup.html
│   ├── services/               # 服务层
│   │   ├── db.ts               # 数据库服务
│   │   └── wallpaper.ts        # 壁纸服务
│   ├── styles/                 # 样式文件
│   │   ├── components/         # 组件样式
│   │   │   └── wallpaper.css
│   │   ├── pages/              # 页面样式
│   │   │   └── newtab.css
│   │   └── main.css            # 主样式
│   └── types/                  # 类型定义
│       ├── chrome.d.ts
│       └── index.ts
├── manifest.json               # 扩展配置
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```

## 🎯 功能特性

### 新标签页 (newtab)
- ✅ 时钟和日期显示
- ✅ 天气信息展示
- ✅ 搜索框（支持Bing/Google搜索）
- ✅ 壁纸切换功能
- ✅ 深色模式支持
- ✅ 书签导航（可选）
- ✅ 智能分类（可选）

### 弹出窗口 (popup)
- ✅ 快速设置访问
- ✅ 壁纸模式切换
- ✅ 深色模式开关
- ✅ 设置页面入口

### 后台服务 (background)
- ✅ 定时壁纸更新
- ✅ 天气数据获取
- ✅ 扩展安装/更新处理
- ✅ 消息通信

## 📦 安装依赖

```bash
cd bit-hub-vue
pnpm install
```

## 🛠️ 开发命令

### 开发模式
```bash
pnpm run dev
```

### 构建生产版本
```bash
pnpm run build
```

### 构建浏览器扩展
```bash
pnpm run build:ext
```

## 🔧 构建和安装

### 1. 构建项目
```bash
cd bit-hub-vue
pnpm install
pnpm run build:ext
```

### 2. 加载到浏览器
1. 打开 Chrome/Edge 浏览器
2. 访问 `chrome://extensions/` 或 `edge://extensions/`
3. 启用"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择 `bit-hub-vue/dist` 目录

## 🎨 设计亮点

### 1. 现代化架构
- 组件化开发，代码清晰
- 状态管理集中化
- 工具函数模块化

### 2. 优秀的用户体验
- 响应式设计，支持移动端
- 深色模式支持
- 流畅的动画过渡
- 直观的界面交互

### 3. 开发体验
- Vite 极速热更新
- Tailwind CSS 快速样式开发
- TypeScript 类型安全
- Element Plus 组件丰富

### 4. 性能优化
- 按需加载组件
- 图片预加载
- 缓存策略
- 代码分割

## 📊 与原版本对比

| 特性 | 原版本 (原生 JS) | 新版本 (Vue 3) |
|------|------------------|----------------|
| 开发效率 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| 代码维护性 | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| UI 质量 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 类型安全 | ❌ | ✅ |
| 构建优化 | ❌ | ✅ |
| 热更新 | ❌ | ✅ |
| 组件复用 | ❌ | ✅ |

## 🔍 常见问题

### Q: 为什么选择 Vue 3 而不是 React？
A: Vue 3 学习曲线更平缓，特别适合浏览器扩展这种中小型项目，且与 Element Plus 配合更佳。

### Q: 如何添加新功能？
A: 在对应的页面组件中添加，使用 Pinia 管理状态，工具函数放在 `utils/` 目录。

### Q: 如何自定义主题？
A: 修改 `tailwind.config.js` 中的 theme 配置，或在组件中使用 Element Plus 的主题定制功能。

## 🤝 贡献指南

1. Fork 项目
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 📄 许可证

MIT License

## 🙏 致谢

- Vue 3 团队
- Element Plus 团队
- Tailwind CSS 团队
- Vite 团队

---

**注意**: 这是一个现代化重构版本，保留了原版本的所有功能，并提供了更好的开发体验和维护性。