在这个阳光明媚的午后，我坐在宽敞明亮的办公室里，周围是同事们键盘敲击的交响乐，而我，正沉浸在一段特别的“快乐时光”里。刚刚，我以一种近乎游戏的心态，轻松地完成了大小写转换器的开发，那是一种纯粹由创造带来的快乐，仿佛是在数字世界中编织了一个小小的魔法。
完成这个工具后，我没有立刻投入到下一个紧锣密鼓的任务中，而是悄悄地从抽屉深处摸出了手机，指尖轻触屏幕，开始了一段短暂的数字逃离。我浏览着最新的科技新闻，偶尔被有趣的段子逗得笑出声来，这份轻松让我高速运转的大脑得到了宝贵的休息，仿佛是给心灵做了一次小小的SPA。
放松过后，我重新调整坐姿，目光再次聚焦于电脑屏幕，心中已有了新的目标：在线工具——Chmod计算器。这个念头如同一颗种子，在我脑海中生根发芽，我深知它的重要性。Linux文件权限，对于许多初涉技术领域的朋友来说，无疑是一道既神秘又复杂的门槛。于是，我决定用自己的方式，为这道门槛铺设一条平坦的道路。
我深吸一口气，开始构思并设计这个工具的界面。经过一番深思熟虑，我决定采用复选框矩阵的形式，让用户能够直观地看到并操作文件权限。在“Owner (u)”、“Group (g)”和“Public (o)”三行中，我细心地添加了“Read”、“Write”和“Execute”三个复选框，每个选项都承载着不同的权限意义。用户只需简单地勾选自己需要的权限，系统就会迅速反馈出对应的权限代码（如400）和权限字符串（如r--------），这种即时的反馈机制极大地提升了用户体验。
随着代码的逐行编写和反复调试，时间仿佛被按下了快进键，悄悄地流逝着。每当我解决一个棘手的bug，或是脑海中浮现出用户因这个工具而受益的温馨场景，我的心中就会涌起一股暖流，那是对技术的热爱，也是对能够帮助他人的喜悦。工作间隙，我还会不自觉地笑出声来，那份纯真的快乐，仿佛已经超越了屏幕的限制，传递给了每一个可能会使用到这个工具的人。
终于，在一个不经意的瞬间，我抬头望向屏幕，只见那个即将完成的Chmod计算器静静地躺在那里，旁边是已经投入使用、稳定运行的大小写转换器。这一刻，我的心中充满了前所未有的满足和喜悦。这两个小小的工具，就像是我在忙碌工作中种下的两颗小小种子，虽然它们不起眼，但却在无声无息中生根发芽，为这个世界增添了一份便利和美好。
希望每一个看到这篇文章的人，都能像我一样，在忙碌的工作中找到属于自己的快乐时光，开心上班，愉快摸鱼。因为生活不仅仅有眼前的苟且，还有诗和远方的田野。
<template>
<tool-info :tool="tool" :readme="VueComponent">
<template #body>
<c-card shadow="never">
<el-row justify="center">
<el-col :xs="24" :sm="16" :md="16">
<el-table :data="scopes">
<el-table-column prop="title"/>
<el-table-column label=" Owner (u)">
<template #default="{row}">
<el-checkbox v-model="permissions.owner[row.scope]" size="large" />
</template>
</el-table-column>
<el-table-column label="Group (g)" >
<template #default="{row}">
<el-checkbox v-model="permissions.group[row.scope]" size="large" />
</template>
</el-table-column>
<el-table-column label=" Public (o)" >
<template #default="{row}">
<el-checkbox v-model="permissions.public[row.scope]" size="large" />
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row justify="center">
<el-col :xs="24" :sm="16" :md="16" align="center">
<el-divider/>
<el-text style="font-size: 50px;">{{ octal }}</el-text>
</el-col>
</el-row>
<el-row justify="center">
<el-col :xs="24" :sm="16" :md="16" align="center">
<el-divider/>
<el-text style="font-size: 50px;"> {{ symbolic }}</el-text>
</el-col>
</el-row>
<el-row justify="center">
<el-col :xs="24" :sm="16" :md="16" align="center">
<el-divider/>
<el-text style="font-size: 50px;">chmod {{octal}} path</el-text>
<el-divider/>
</el-col>
</el-row>
</c-card>
</template>
</tool-info>
</template>
<script setup lang="ts">
import ToolInfo from '@/components/ToolInfo.vue';
import {VueComponent} from './README.md';
import { computed, ref } from 'vue';
import { tool } from './index';
import { computeChmodOctalRepresentation, computeChmodSymbolicRepresentation } from './chmod-calculator.service';
import type { Scope } from './chmod-calculator.types';
const scopes: { scope: Scope; title: string }[] = [
{ scope: 'read', title: 'Read (4)' },
{ scope: 'write', title: 'Write (2)' },
{ scope: 'execute', title: 'Execute (1)' },
];
const permissions = ref({
owner: { read: false, write: false, execute: false },
group: { read: false, write: false, execute: false },
public: { read: false, write: false, execute: false },
});
const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
const symbolic = computed(() => computeChmodSymbolicRepresentation({ permissions: permissions.value }));
</script>
