自我探索之路：我的Bcrypt加密工具1.0版本之路

这段时间，我仿佛沉浸在了一个只有代码与我相伴的静谧宇宙之中。每一个星辰璀璨的夜晚，都是我与这些数字精灵共舞的时刻，它们在我指尖轻舞，共同编织出一个个守护着用户隐私的坚固城堡——那就是我引以为傲的Bcrypt文本加密工具1.0版本。

在创造这个城堡的征途中，UI布局的设计成了我首先需要攀登的高峰。起初，我试图借助开源项目的布局作为基石，但那份“拿来主义”的便捷并未带来我所期望的视觉效果。界面如同迷宫般错综复杂，元素间的拥挤让我深感不满。于是，我踏上了漫长而曲折的调整与优化之路。经过无数次推翻与重建，我终于发现了那块最适合的拼图——顶部是简洁明了的导航栏，如同灯塔指引方向；中间是工具的主体部分，一目了然，操作便捷；而原本计划舍弃的工具说明，也被我巧妙地融入下方，既满足了SEO的需求，又保持了界面的和谐统一。当然，我深知当前的介绍部分仍有改进的空间，我期待着每一位用户的宝贵意见与建议，让我们携手将它雕琢得更加精致。

然而，挑战并未就此止步。SEO优化的难题紧接着摆在了我的面前。在这个信息洪流肆虐的时代，如何让我的工具在众多同类产品中脱颖而出，成为用户搜索时的首选，是我必须跨越的另一道坎。我深入SEO的海洋，从关键词的精心挑选到网站结构的细致规划，每一步都力求精准到位。但遗憾的是，由于我的疏忽，网站在未经充分SEO优化的情况下便匆匆上线，错过了最佳的曝光时机。现在，我更加珍惜这次优化的机会，希望它能助力我的网站被更多用户发现，提升在搜索引擎中的排名。同时，我也想借此机会提醒那些即将踏上站长之路的朋友们：一定要将SEO视为网站建设的基石，提前规划、精心布局，以免重蹈我的覆辙。

当然，成功的道路上从来都不会是一帆风顺的。在测试的关键时刻，我遭遇了前所未有的挑战——几个顽固的bug如同暗礁般潜伏在平静的海面之下，威胁着航行的安全。它们不仅阻碍了工具的正常运行，更可能给用户的数据安全带来隐患。面对这突如其来的危机，我没有丝毫的犹豫与退缩，而是毅然决然地投入到了问题的排查与修复工作中。无数个日夜的努力与坚持，终于换来了胜利的曙光——那些曾经嚣张一时的bug被我一一攻克，工具的稳定性和安全性得到了有力的保障。 特别是针对用户输入盐值过多导致页面卡死的问题，我通过禁用输入、显示加载状态并采用异步处理的方式成功解决了这一难题。现在，无论用户输入多少盐值，系统都能稳定运行并提供及时反馈。

如今，当我再次审视这个经过无数次迭代与修改终于定型的Bcrypt文本加密工具时，心中不禁涌起一股难以言喻的激动与自豪。它不仅是我技术能力的见证，更是我对编程事业热爱与执着的最好诠释。我深知，这只是一个新的起点，未来的道路上还有无数的挑战与机遇等待着我去探索与征服。但我坚信，只要我怀揣着对技术的热爱与对完美的追求，勇往直前、不懈奋斗，我就一定能够将我的网站打造得更加出色、更加卓越，成为用户心中值得信赖的隐私守护者。

非专业前端，希望大家多指点一下我的代码

<template>

  <tool-info :tool="tool" :readme="VueComponent">
    <template #body>
      <el-card shadow="never">
        <el-row justify="center">
          <el-col :xs="24" :sm="16" :md="16">
            <el-tabs v-model="activeName" >
              <el-tab-pane :label="$t('tools.bcrypt.tab.hash.title')" name="hash">
                <el-form label-width="auto">
                  <el-row>
                    <el-col :span="24"> 
                      <el-form-item :label="$t('tools.bcrypt.tab.hash.input.text.title')">
                        <el-input v-model="input" @change="handleStringChange" :placeholder="$t('tools.bcrypt.tab.hash.input.text.placeholder')" :disabled="isHashing" type="textarea" :rows="3"/>
                      </el-form-item>
                      <el-form-item :label="$t('tools.bcrypt.tab.hash.input.salt.title')">
                        <el-input-number @change="handleSaltChange" v-model="saltCount" :max="100":min="0" style="width: 100%"  :disabled="isHashing"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-divider />
                        <el-input v-loading="isHashing" @click="copy()" v-model="hashed" readonly  :placeholder="$t('tools.bcrypt.tab.hash.output.placeholder')" type="textarea" :rows="5"/>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
              <el-tab-pane :label="$t('tools.bcrypt.tab.compare.title')" name="diff">
                <el-form label-width="auto">
                  <el-row>
                    <el-col :span="24"> 
                      <el-form-item :label="$t('tools.bcrypt.tab.compare.input.text.title')">
                        <el-input v-model="compareString" :placeholder="$t('tools.bcrypt.tab.compare.input.text.placeholder')"  type="textarea" :rows="3"/>
                      </el-form-item>
                      <el-form-item :label="$t('tools.bcrypt.tab.compare.input.hash.title')">
                        <el-input v-model="compareHash" :placeholder="$t('tools.bcrypt.tab.compare.input.hash.placeholder')" type="textarea" :rows="3"/>
                      </el-form-item>
                      <el-form-item :label="$t('tools.bcrypt.tab.compare.output.title')" :show-message="false">
                        <el-alert :title="$t('tools.bcrypt.tab.compare.output.true')" type="success" show-icon  v-if="compareMatch"  :closable="false"/>
                        <el-alert :title="$t('tools.bcrypt.tab.compare.output.false')" type="error" show-icon  v-else   :closable="false"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>
    </template>
  </tool-info>
</template>
  
<script setup lang="ts">
import ToolInfo from '@/components/ToolInfo.vue';
import  {VueComponent}  from './README.md';
import BcryptJs from 'bcryptjs';
import { tool } from './index';
import { useCopy } from '@/composables/copy';
import { computed, ref ,nextTick} from 'vue';
const { compareSync, hash } = BcryptJs;
const activeName = ref('hash');
const input = ref('');
const saltCount = ref(0);
const hashed = ref("");

const { copy } = useCopy({ source: hashed });

const compareString = ref('');

const compareHash = ref('');

const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));


// 新增状态变量
const isHashing = ref(false);

// 将计算哈希值的部分改为异步函数
async function computeHash() {
  await nextTick(); 
  hash(compareString.value, saltCount.value).then(text =>{
    hashed.value = text;
  }).finally(()=>isHashing.value = false);
}

// 更新handleSaltChange以在计算前后管理isCalculating状态
const handleStringChange = async (value: string) => {
  compareString.value = value;
  isHashing.value = true;
  computeHash(); // 调用异步计算函数
};


const handleSaltChange =  async(value: number) => {
  saltCount.value = value;
  isHashing.value = true;
  computeHash(); // 调用异步计算函数
};

</script>