feat: add a simple tool

.vitepress/config.ts

@@ -48,10 +48,15 @@ export default defineConfigWithTheme<ThemeConfig>({
 
     nav: [
       { text: '文章', link: '/posts/' },
+      { text: '工具', link: '/tools/' },
       { text: '友链', link: '/links/' },
       { text: '关于', link: '/about/' },
     ],
 
+    sidebar: {
+      '/tools/': [{ text: '命名风格转换', link: '/tools/case-converter/' }],
+    },
+
     socialLinks: [
       { icon: 'github', link: 'https://github.com/bsdayo' },
       { icon: 'x', link: 'https://twitter.com/konobsdayo' },

package.json

@@ -4,7 +4,7 @@
     "dev": "vitepress dev . --host",
     "build": "vitepress build .",
     "preview": "vitepress preview .",
-    "new": "node tools/new-post.js"
+    "new": "node scripts/new-post.js"
   },
   "devDependencies": {
     "@css-render/vue3-ssr": "^0.15.12",
@@ -17,6 +17,7 @@
     "@types/markdown-it-container": "^2.0.10",
     "@types/node": "^20.12.8",
     "@types/webfontloader": "^1.6.38",
+    "js-convert-case": "^4.2.0",
     "markdown-it-container": "^4.0.0",
     "medium-zoom": "^1.1.0",
     "naive-ui": "^2.38.2",

tools/case-converter/CaseConverter.vue

@@ -0,0 +1,55 @@
+<template>
+  <h2>输入</h2>
+  <n-input placeholder="输入" v-model:value="input" />
+
+  <h2>转换</h2>
+  <n-flex vertical>
+    <div v-for="(value, key) in values" :key="key">
+      <n-input-group>
+        <n-input :placeholder="key" :value="value" />
+        <n-button type="primary" @click="copyToClipboard(value)">复制</n-button>
+      </n-input-group>
+    </div>
+  </n-flex>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { NFlex, NInput, NInputGroup, NButton } from 'naive-ui'
+import jsConvert from 'js-convert-case'
+import { copyToClipboard } from '../utils'
+
+const input = ref('')
+const values = ref({
+  camelCase: '',
+  snake_case: '',
+  PascalCase: '',
+  'dot.case': '',
+  'path/case': '',
+  'text case': '',
+  'Sentence case': '',
+  'Header Case': '',
+  UPPERCASE: '',
+  lowercase: '',
+  'kebab-case': '',
+})
+
+watch(
+  () => input.value,
+  (val) => {
+    values.value['camelCase'] = jsConvert.toCamelCase(val)
+    values.value['snake_case'] = jsConvert.toSnakeCase(val)
+    values.value['PascalCase'] = jsConvert.toPascalCase(val)
+    values.value['dot.case'] = jsConvert.toDotCase(val)
+    values.value['path/case'] = jsConvert.toPathCase(val)
+    values.value['text case'] = jsConvert.toTextCase(val)
+    values.value['Sentence case'] = jsConvert.toSentenceCase(val)
+    values.value['Header Case'] = jsConvert.toHeaderCase(val)
+    values.value['UPPERCASE'] = jsConvert.toUpperCase(val)
+    values.value['lowercase'] = jsConvert.toLowerCase(val)
+    values.value['kebab-case'] = jsConvert.toKebabCase(val)
+  }
+)
+</script>
+
+<style lang="scss" scoped></style>

tools/case-converter/index.md

@@ -0,0 +1,7 @@
+# 命名风格转换
+
+<CaseConverter />
+
+<script setup lang="ts">
+import CaseConverter from './CaseConverter.vue'
+</script>

tools/index.md

@@ -0,0 +1,3 @@
+# 工具
+
+各种小工具！

tools/utils.ts

@@ -0,0 +1,12 @@
+export function copyToClipboard(text: string) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text)
+  } else {
+    const input = document.createElement('input')
+    input.value = text
+    document.body.appendChild(input)
+    input.select()
+    document.execCommand('copy')
+    document.body.removeChild(input)
+  }
+}