A professional, high-performance, and beautifully designed online toolbox. Built with a focus on user experience (UX), speed, and developer-friendly architecture.

• 🌐 Network Tools: Whois Domain (RDAP), Whois IP (RDAP), Port Query (fetched from Wikipedia).
• 🆔 Identity & Utility: ID Card tools, Regex Tester, Diff Tool, Code Playground.
• 🎨 Modern Design: Responsive, Glassmorphism UI, Dark Mode.
• 🌍 Global Ready: Full i18n (EN/ZH) support.

The project is built as a Single Page Application (SPA) using Vue 3 and Vite, with automated tool discovery and registration.

tools/
├── public/              # Static assets
├── scripts/             # Build scripts (e.g., automated data fetching)
├── src/
│   ├── components/      # Shared UI components (FABs, Switches, Layouts)
│   ├── layouts/         # Main layout wrapper
│   ├── locales/         # Global i18n messages
│   ├── router/          # Dynamic routing logic
│   ├── views/
│   │   ├── HomeView.vue # Tool dashboard
│   │   └── tools/       # 🚀 Individual tool modules (Self-contained)
│   │       └── [tool-id]/
│   │           ├── index.vue     # Tool implementation
│   │           ├── config.js     # Tool metadata (cat, icon, color)
│   │           └── locales/      # Tool-specific i18n
│   └── main.js          # App entry point
└── tailwind.config.js   # Design system configuration

graph TD
    A[App Startup] --> B[Dynamic Router Discovery]
    B --> C["import.meta.glob('../views/tools/*/index.vue')"]
    C --> D[Generate Routes based on Folder Names]
    D --> E[Dashboard / HomeView]
    E --> F[Load tool config.js for UI metadata]
    F --> G[Render Tool Card]

• Frontend: Vue 3 (Composition API), Vite (Fast HMR).
• Styling: Tailwind CSS (Utility-first, responsive, dark mode).
• State Management: Vue's built-in ref and reactive (Lightweight).
• Dynamic Routing: Automatic route generation from directory structure in src/router/index.js.
• Localization: vue-i18n with scoped locales per tool.
• Build & CI: GitHub Actions for automated deployment to GitHub Pages.

Adding a new tool is easy thanks to the modular design:

1. Create Directory: src/views/tools/my-new-tool/
2. Implement Logic: Create index.vue. Use BackButton and standard layout.
3. Configure Metadata: Create config.js:

   export default {
       id: 'my-new-tool',
       cat: 'utility', // 'network', 'identity', etc.
       icon: 'sparkles',
       color: 'from-blue-500 to-indigo-600'
   }

4. Localization: Add locales/en.json and zh.json inside the tool folder.

The router and dashboard will automatically detect and register your tool.

# Clone
git clone https://github.com/liudonghua123/tools.git && cd tools

# Install & Run
npm install
npm run dev

Distributed under the MIT License.

Developed with ❤️ by liudonghua123