前言
作为一名开发者，在日常工作中，我经常需要处理 JSON 格式化、Base64 编解码、正则测试等琐碎任务。虽然网上有很多在线工具，但往往存在广告多、功能分散、样式不统一等问题。
与其忍受杂乱的工具站，不如自己动手做一个！
为了打造一个真正符合开发者直觉、干净且高效的工具平台，同时也是为了验证 Vue 3 + FastAPI 这套全栈技术方案在复杂应用中的表现，我独立开发了 Sidereal Hub (云织星·工具台) 。
这是一个集成了 100+ 常用开发工具、AI 资源导航以及完整后台管理系统的开发者效能平台。今天想和大家分享一下这个项目的技术架构设计和独立开发过程中的一些实战经验。
项目预览
👉 在线体验地址：sidereal.xianmei.info
(建议 PC 端访问体验最佳)
技术选型思路
在独立开发中，效率和性能同样重要。我选择了目前非常流行的前后端分离架构：
1. 前端：Vue 3 + TypeScript + Vite
- Vue 3 (Composition API) : 逻辑复用更灵活，代码组织更清晰，非常适合管理几十个不同的工具逻辑。
- TypeScript: 强类型约束大大减少了“低级错误”，后期维护重构更有底气。
- Element Plus: 提供了成熟的组件库，且完美支持深色模式（Dark Mode），这对开发者工具来说是刚需。
2. 后端：FastAPI (Python)
- FastAPI: 可能是目前最快的 Python Web 框架之一。它基于 Starlette 和 Pydantic，自带 OpenAPI 文档，开发接口非常快。
- AsyncIO: 全异步支持，能够轻松应对高并发请求。
- SQLAlchemy: 强大的 ORM，方便后续扩展数据库模型。
架构设计与核心实现
1. 模块化的工具插件系统
Sidereal Hub 目前内置了 100+ 个工具，如果把所有逻辑都写在一起，维护简直是噩梦。
因此，在前端架构上，我采用了模块化设计。每一个工具（如 JSON 格式化、UUID 生成）都被视为一个独立的“插件”。
- 目录结构隔离：每个工具拥有独立的文件夹，包含自己的
.vue组件和逻辑。 - 动态路由加载：通过配置表动态生成路由，添加新工具时只需新增组件并在配置中注册即可，无需修改核心框架。
// 伪代码示例：工具注册配置
export const toolsConfig = [
{
id: 'json-formatter',
title: 'JSON 格式化',
component: () => import('@/tools/JsonFormatter.vue'),
tags: ['dev', 'format']
},
// ...
];
2. 企业级后台与权限管理 (RBAC)
为了让这个平台不仅仅是个人玩具，还能用于团队内部管理，我实现了一套完整的后台管理系统。
- JWT 认证: 使用 JSON Web Tokens 进行无状态认证，安全且易于扩展。
- RBAC 模型: 基于角色的访问控制。管理员可以在后台控制哪些用户可以使用哪些工具，或者查看访问统计数据。
- 数据可视化: 后端聚合访问日志，前端使用 ECharts 展示工具热度排行，帮助运营决策。
3. Docker 化部署
为了解决“在我机器上能跑”的问题，整个项目完全 Docker 化。
- Frontend: Nginx 容器，负责静态资源服务和反向代理。
- Backend: Python 容器，运行 FastAPI 应用。
- Database: MySQL 容器（或 SQLite 文件挂载）。
通过 docker-compose 一键拉起，极大地简化了部署流程。
遇到的挑战与解决方案
挑战 1：由工具数量增多带来的打包体积问题 随着工具越来越多，首屏加载包体积变大。 解决：利用 Vite 的动态导入（Dynamic Import）和路由懒加载，只有当用户点击某个工具时，才加载对应的代码块（Chunk），显著提升了首屏速度。
挑战 2：复杂计算导致的页面卡顿 像“图片压缩”或“大文本 Diff”这样的功能，纯前端计算可能会阻塞 UI 线程。 解决：对于计算密集型任务，使用 Web Worker 将计算逻辑剥离到后台线程运行，保证 UI 始终流畅响应。
总结
Sidereal Hub 是我作为独立开发者的一次全栈实践。从需求分析、UI 设计、前后端开发到最终部署上线，Vue 3 和 FastAPI 的组合表现得非常出色，开发体验流畅，运行效率高。
如果你也想做独立开发，强烈推荐尝试这套技术栈！
欢迎大家点击链接体验，如果有任何建议或发现 Bug，欢迎在评论区留言交流~
本文为技术分享，旨在交流全栈开发架构与心得。
