diff --git a/.gitignore b/.gitignore index cd54421..c077a8d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,90 +1,27 @@ -# ---> Vue -# gitignore template for Vue.js projects -# -# Recommended template: Node.gitignore +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* -# TODO: where does this rule come from? -docs/_book +node_modules +dist +dist-ssr +*.local -# TODO: where does this rule come from? -test/ - -# ---> JetBrains -# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider -# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 - -# User-specific stuff -.idea/**/workspace.xml -.idea/**/tasks.xml -.idea/**/usage.statistics.xml -.idea/**/dictionaries -.idea/**/shelf - -# AWS User-specific -.idea/**/aws.xml - -# Generated files -.idea/**/contentModel.xml - -# Sensitive or high-churn files -.idea/**/dataSources/ -.idea/**/dataSources.ids -.idea/**/dataSources.local.xml -.idea/**/sqlDataSources.xml -.idea/**/dynamic.xml -.idea/**/uiDesigner.xml -.idea/**/dbnavigator.xml - -# Gradle -.idea/**/gradle.xml -.idea/**/libraries - -# Gradle and Maven with auto-import -# When using Gradle or Maven with auto-import, you should exclude module files, -# since they will be recreated, and may cause churn. Uncomment if using -# auto-import. -# .idea/artifacts -# .idea/compiler.xml -# .idea/jarRepositories.xml -# .idea/modules.xml -# .idea/*.iml -# .idea/modules -# *.iml -# *.ipr - -# CMake -cmake-build-*/ - -# Mongo Explorer plugin -.idea/**/mongoSettings.xml - -# File-based project format -*.iws - -# IntelliJ -out/ - -# mpeltonen/sbt-idea plugin -.idea_modules/ - -# JIRA plugin -atlassian-ide-plugin.xml - -# Cursive Clojure plugin -.idea/replstate.xml - -# SonarLint plugin -.idea/sonarlint/ - -# Crashlytics plugin (for Android Studio and IntelliJ) -com_crashlytics_export_strings.xml -crashlytics.properties -crashlytics-build.properties -fabric.properties - -# Editor-based Rest Client -.idea/httpRequests - -# Android studio 3.1+ serialized cache file -.idea/caches/build_file_checksums.ser +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? +.cursor +/package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index 1a2a1cd..23b5b43 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,98 @@ -# Toolbox +# 🛠️ 工具箱 - Toolbox +## 📦 安装 + +### 前置要求 + +- Node.js >= 16.0.0 +- npm 或 yarn 或 pnpm + +### 安装步骤 + +1. 克隆项目或下载源码 + +```bash +git clone +cd Toolbox +``` + +2. 安装依赖 + +```bash +npm install +# 或 +yarn install +# 或 +pnpm install +``` + +## 🚀 运行 + +### 开发模式 + +```bash +npm run dev +# 或 +yarn dev +# 或 +pnpm dev +``` + +开发服务器将在 `http://localhost:3000` 启动，并自动在浏览器中打开。 + +### 构建生产版本 + +```bash +npm run build +# 或 +yarn build +# 或 +pnpm build +``` + +构建产物将输出到 `dist` 目录。 + +### 预览生产构建 + +```bash +npm run preview +# 或 +yarn preview +# 或 +pnpm preview +``` + +## 📁 项目结构 + +``` +Toolbox/ +├── src/ +│ ├── views/ # 页面组件 +│ ├── router/ # 路由配置 +│ │ └── index.js +│ ├── App.vue # 根组件 +│ ├── main.js # 应用入口 +│ └── style.css # 全局样式 +├── index.html # HTML 模板 +├── vite.config.js # Vite 配置 +├── package.json # 项目配置 +└── README.md # 项目说明 +``` + +## 🔧 添加新工具 + +要添加新的工具页面，只需： + +1. 在 `src/views/` 目录下创建新的 Vue 组件 +2. 在 `src/router/index.js` 中添加路由配置： + +```javascript +{ + path: '/your-tool', + name: 'YourTool', + component: () => import('../views/YourTool.vue') +} +``` + +3. 在 `src/App.vue` 的导航栏中添加链接 +4. 在 `src/views/Home.vue` 的 `tools` 数组中添加工具信息 diff --git a/index.html b/index.html new file mode 100644 index 0000000..2f3a91b --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + RC707的工具箱 + + + + + +
+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..bd6529c --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "toolbox", + "version": "1.0.0", + "description": "A Vue-based toolbox application", + "license": "MIT", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@fortawesome/fontawesome-free": "^7.1.0", + "qrcode": "^1.5.4", + "vue": "^3.4.0", + "vue-router": "^4.2.5" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.0.0", + "vite": "^5.0.0" + } +} diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..f046b40 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,144 @@ + + + + + + diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue new file mode 100644 index 0000000..c18bb91 --- /dev/null +++ b/src/components/DateTimePicker.vue @@ -0,0 +1,818 @@ + + + + + diff --git a/src/components/JsonTreeNode.vue b/src/components/JsonTreeNode.vue new file mode 100644 index 0000000..029e5b8 --- /dev/null +++ b/src/components/JsonTreeNode.vue @@ -0,0 +1,396 @@ + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..510bb86 --- /dev/null +++ b/src/main.js @@ -0,0 +1,9 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' +import './style.css' +// 引入 Font Awesome 6.4 +import '@fortawesome/fontawesome-free/css/all.css' + +createApp(App).use(router).mount('#app') + diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..0ac184d --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,85 @@ +import { createRouter, createWebHistory } from 'vue-router' +import Home from '../views/Home.vue' + +const routes = [ + { + path: '/', + name: 'Home', + component: Home, + meta: { + title: 'RC707的工具箱' + } + }, + { + path: '/json-formatter', + name: 'JsonFormatter', + component: () => import('../views/JsonFormatter.vue'), + meta: { + title: 'RC707的工具箱-JSON' + } + }, + { + path: '/comparator', + name: 'Comparator', + component: () => import('../views/Comparator.vue'), + meta: { + title: 'RC707的工具箱-对比' + } + }, + { + path: '/encoder-decoder', + name: 'EncoderDecoder', + component: () => import('../views/EncoderDecoder.vue'), + meta: { + title: 'RC707的工具箱-编解码' + } + }, + { + path: '/variable-name', + name: 'VariableNameConverter', + component: () => import('../views/VariableNameConverter.vue'), + meta: { + title: 'RC707的工具箱-变量名' + } + }, + { + path: '/qr-code', + name: 'QRCodeGenerator', + component: () => import('../views/QRCodeGenerator.vue'), + meta: { + title: 'RC707的工具箱-二维码' + } + }, + { + path: '/timestamp-converter', + name: 'TimestampConverter', + component: () => import('../views/TimestampConverter.vue'), + meta: { + title: 'RC707的工具箱-时间戳' + } + }, + { + path: '/color-converter', + name: 'ColorConverter', + component: () => import('../views/ColorConverter.vue'), + meta: { + title: 'RC707的工具箱-颜色' + } + } +] + +const router = createRouter({ + history: createWebHistory(), + routes +}) + +// 路由守卫：设置页面标题 +router.beforeEach((to, from, next) => { + if (to.meta.title) { + document.title = to.meta.title + } + next() +}) + +export default router + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..6d54784 --- /dev/null +++ b/src/style.css @@ -0,0 +1,17 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background: #ffffff; + min-height: 100vh; + color: #000000; +} + +#app { + min-height: 100vh; +} + diff --git a/src/views/ColorConverter.vue b/src/views/ColorConverter.vue new file mode 100644 index 0000000..f221da4 --- /dev/null +++ b/src/views/ColorConverter.vue @@ -0,0 +1,1482 @@ + + + + + diff --git a/src/views/Comparator.vue b/src/views/Comparator.vue new file mode 100644 index 0000000..f236aef --- /dev/null +++ b/src/views/Comparator.vue @@ -0,0 +1,2875 @@ + + + + + + + diff --git a/src/views/EncoderDecoder.vue b/src/views/EncoderDecoder.vue new file mode 100644 index 0000000..f5e4cfc --- /dev/null +++ b/src/views/EncoderDecoder.vue @@ -0,0 +1,1165 @@ + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..ecd11ab --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,197 @@ + + + + + + diff --git a/src/views/JsonFormatter.vue b/src/views/JsonFormatter.vue new file mode 100644 index 0000000..22f82b0 --- /dev/null +++ b/src/views/JsonFormatter.vue @@ -0,0 +1,2153 @@ + + + + + diff --git a/src/views/QRCodeGenerator.vue b/src/views/QRCodeGenerator.vue new file mode 100644 index 0000000..a2cdf55 --- /dev/null +++ b/src/views/QRCodeGenerator.vue @@ -0,0 +1,700 @@ + + + + + \ No newline at end of file diff --git a/src/views/TimestampConverter.vue b/src/views/TimestampConverter.vue new file mode 100644 index 0000000..46dd82b --- /dev/null +++ b/src/views/TimestampConverter.vue @@ -0,0 +1,913 @@ + + + + + diff --git a/src/views/VariableNameConverter.vue b/src/views/VariableNameConverter.vue new file mode 100644 index 0000000..892f7d9 --- /dev/null +++ b/src/views/VariableNameConverter.vue @@ -0,0 +1,526 @@ + + + + + + diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..fd0d216 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import { resolve } from 'path' + +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@': resolve(__dirname, 'src') + } + }, + server: { + port: 3000, + open: true + } +}) +