一个现代化的 Flathub 中文前端界面，为中文用户提供更好的 Linux 应用浏览、搜索和管理体验。

• 🎨 现代化界面: 基于 Bootstrap 5 的响应式设计
• 🔍 智能搜索: 快速搜索和浏览 Flathub 应用
• 📦 应用管理: 支持安装、卸载、更新 Flatpak 应用
• 🎯 任务队列: 异步任务管理，支持多任务并发和取消
• 📊 实时日志: 操作过程中的实时日志输出
• 🌐 本地化: 完整的中文界面支持
• ⚡ 性能优化: 使用 Vite 构建，快速加载
• 📱 PWA 支持: 可安装为桌面应用

• 框架: Vue 3 (Composition API)
• 路由: Vue Router 4
• UI 框架: Bootstrap 5
• 图标: Bootstrap Icons
• 构建工具: Vite
• 语言: JavaScript (ES6+)

• Node.js >= 16
• npm >= 8

npm install

启动开发服务器（支持热重载）：

npm run dev

访问 http://localhost:5173

npm run build

构建产物位于 dist/ 目录。

npm run preview

Flathub-Website/
├── public/              # 静态资源
│   └── logo.png        # 项目 Logo
├── src/
│   ├── components/     # Vue 组件
│   │   ├── AppCard.vue           # 应用卡片组件
│   │   ├── CategoryAppList.vue   # 分类应用列表组件
│   │   ├── CodeBlock.vue         # 代码块组件
│   │   ├── SkeletonLoader.vue    # 骨架屏组件
│   │   └── TaskFloatingButton.vue # 任务队列浮动按钮
│   ├── composables/    # 组合式函数
│   │   ├── useAppManager.js  # 应用管理逻辑
│   │   └── useTaskQueue.js   # 任务队列管理
│   ├── router/         # 路由配置
│   │   └── index.js    # 路由定义和标题管理
│   ├── services/       # API 服务
│   │   ├── api.js      # Flathub API 封装
│   │   └── localApi.js # 本地 API 服务封装
│   ├── utils/          # 工具函数
│   │   ├── imageUtils.js # 图片处理工具
│   │   └── message.js    # 消息提示工具
│   ├── views/          # 页面组件
│   │   ├── Home.vue         # 首页
│   │   ├── Category.vue     # 分类页
│   │   ├── Search.vue       # 搜索页
│   │   ├── Detail.vue       # 应用详情页
│   │   ├── About.vue        # 关于页
│   │   ├── Status.vue       # 状态监控页
│   │   ├── PackageManager.vue # 包管理器页面
│   │   ├── Settings.vue     # 设置页面
│   │   └── NotFound.vue     # 404 页面
│   ├── App.vue         # 根组件
│   ├── main.js         # 应用入口
│   └── style.css       # 全局样式
├── index.html          # HTML 入口
├── vite.config.js      # Vite 配置
└── package.json        # 项目配置

项目使用 Flathub 官方 API 和代理 API ：

• 官方 API: https://flathub.org/api/v2
• 代理服务器: https://api.flathub.jumbotron.cn/api/v2
  • 提供缓存和加速

为了在网页端管理 Flatpak 应用，需要运行本地客户端服务：

1. 本地服务默认运行在: http://127.0.0.1:5000
2. 用户可以在"设置指南"页面的"本地 API 设置"选项卡中配置自定义地址
3. 网站会将配置保存在浏览器的 localStorage 中

• 使用 Vue 3 Composition API (<script setup>)
• CSS 使用 CSS 变量实现主题
• 遵循 Vue 官方风格指南
• 使用 ES6+ 语法

• 组件名使用 PascalCase
• Props 使用 camelCase
• 事件使用 kebab-case
• 所有图标使用 Bootstrap Icons
• 组件功能单一，职责明确

• 使用 Composables 管理共享状态
• 避免深层组件传参
• 优先使用 ref 和 reactive
• 合理使用 computed 和 watch

• 所有交互元素支持键盘导航
• 提供完整的 ARIA 属性
• 焦点状态清晰可见
• 支持屏幕阅读器

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

• Flathub - 提供应用数据
• Vue.js - 前端框架
• Bootstrap - UI 框架
• Vite - 构建工具
• Bootstrap Icons - 图标库