清晨的第一缕阳光透过窗帘的缝隙，勉强挤进了我的房间，却似乎无法驱散我心中那股挥之不去的阴霾。对于像我这样的上班族来说，每天醒来面对的第一件事，便是那即将开启的、似乎永无止境的“痛苦之旅”——上班。日复一日，年复一年，那份对工作的厌倦与疲惫，如同沉重的枷锁，让我几乎要窒息。
“如何让上班变得开心愉悦呢？”这个问题在我脑海中盘旋已久，却始终没有找到满意的答案。直到某一天，一个念头悄然浮现——“无外乎划水摸鱼，摸得一手好鱼，或许能让心情愉悦，让上班也变得不那么难熬。”这听起来像是对现实的妥协，但对我而言，却成了一种自我救赎的尝试。
然而，命运的转折往往发生在不经意间。就在这个平凡无奇的日子里，我终于将积压已久的工作任务一一完成，仿佛卸下了千斤重担，整个人都轻松了许多。那一刻，我意识到，真正的自由不仅仅在于短暂的逃避，更在于能够主动选择自己的生活方式和工作态度。
于是，我走进了那间熟悉而又略显沉闷的办公室。键盘的敲击声和同事间的低语依旧交织成一首日常交响曲，但在我耳中，这一切都变得不同了。没有了紧迫感的催促，我仿佛真的踏入了一个全新的世界，一个由我自己主宰的天地。
我深吸一口气，心中涌动着前所未有的轻松与自在。我告诉自己，这是给自己的一个机会，一个重新发现工作乐趣的机会。于是，我轻轻点击鼠标，打开了那个承载着我无数心血与梦想的在线工具——大小写转换器。
一行行代码如同沉睡的精灵，在屏幕的光线下渐渐苏醒。它们静静地躺在那里，等待着我的指挥，也仿佛在诉说着一个个关于创造与成长的故事。我深知，这不仅仅是一个简单的网页工具，更是我对工作的热爱与执着追求的象征。
我开始了新一轮的优化之旅。从仔细检查每一个转换逻辑，确保它们能够准确无误地处理用户输入的文本，到学习最新的前端技术，尝试将这些新技术融入工具中，提升它的响应速度和用户体验。每一步都充满了挑战与乐趣，我仿佛在与这些代码共舞，享受着创造的快乐。
而最让我兴奋的，莫过于开始着手进行SEO优化。在这个信息爆炸的时代，如何让我的工具在众多同类产品中脱颖而出，成为了我新的目标。我深入研究关键词策略，优化页面标题和描述，甚至亲自动手撰写了几篇高质量的博客文章，分享我对大小写转换的见解以及我的工具如何为用户带来便利。
时间如白驹过隙，转眼间，所有的优化工作都已完成。心中的那份成就感与愉悦简直难以言表。原来，上班的快乐真的可以来自于摸鱼，只有不是在工作。
<template>
<tool-info :tool="tool" :readme="VueComponent">
<template #body>
<el-card shadow="never">
<el-form label-width="auto">
<el-form-item :label="$t('tools.case-converter.input.title')" prop="input">
<el-input v-model="input" :placeholder="$t('tools.case-converter.input.placeholder')" />
</el-form-item>
<el-divider/>
<el-form-item :label="format.label" v-for="format in formats">
<el-input v-model="format.value" readonly/>
</el-form-item>
</el-form>
</el-card>
</template>
</tool-info>
</template>
<script setup lang="ts">
import {
camelCase,
capitalCase,
constantCase,
dotCase,
pascalCase as headerCase,
noCase,
pascalCase,
pathCase,
sentenceCase,
snakeCase,
} from 'change-case';
import { tool } from './index';
import type {PascalCaseOptions} from 'change-case';
import ToolInfo from '@/components/ToolInfo.vue';
import {VueComponent} from './README.md';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const baseConfig: PascalCaseOptions = {};
const input = ref('lorem ipsum dolor sit amet');
const formats = computed(() => [
{
label: t('tools.case-converter.output.lowercase'),
value: input.value.toLocaleLowerCase(),
},
{
label: t('tools.case-converter.output.uppercase'),
value: input.value.toLocaleUpperCase(),
},
{
label: t('tools.case-converter.output.camelcase'),
value: camelCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.capitalcase'),
value: capitalCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.constantcase'),
value: constantCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.dotcase'),
value: dotCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.headercase'),
value: headerCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.nocase'),
value: noCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.pascalcase'),
value: pascalCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.pathcase'),
value: pathCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.sentencecase'),
value: sentenceCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.snakecase'),
value: snakeCase(input.value, baseConfig),
},
{
label: t('tools.case-converter.output.mockingcase'),
value: input.value
.split('')
.map((char, index) => (index % 2 === 0 ? char.toUpperCase() : char.toLowerCase()))
.join(''),
},
]);
</script>
