vue实现在线进制转换功能

<template>
  <div class="converter-container">
    <h1>在线进制转换</h1>
    <p class="description">支持在2~36进制之间进行任意转换，支持浮点型</p>
    <div class="converter-wrapper">
      <div class="converter-row">
        <div class="select-group">
          <select v-model="frombase" class="base-select">
            <option v-for="n in bases" :value="n">{{ n }}进制</option>
          </select>
        </div>
        <div class="input-group">
          <input
            type="text"
            v-model="inputnumber"
            placeholder="转换数字"
            class="number-input"
          >
        </div>
      </div>
      <div class="converter-row">
        <div class="select-group">
          <select v-model="tobase" class="base-select">
            <option v-for="n in bases" :value="n">{{ n }}进制</option>
          </select>
        </div>
        <div class="result-group">
          <div class="result-display">{{ result }}</div>
        </div>
      </div>
    </div>
    <button @click="convert" class="convert-btn">立即转换</button>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
const frombase = ref(16)
const tobase = ref(10)
const inputnumber = ref('3c')
const result = ref('')
const bases = array.from({ length: 35 }, (_, i) => i + 2); // 生成 2 到 36 的进制数组
const convert = () => {
  try {
    // handle empty input
    if (!inputnumber.value) {
      result.value = '';
      return;
    }
    // check if the input number is valid for the selected base
    const isvalid = /^[0-9a-z.]+$/i.test(inputnumber.value);
    if (!isvalid) {
      result.value = '输入包含无效字符';
      return;
    }
    // separate integer and fractional parts
    const [integerpartstr, fractionalpartstr = ''] = inputnumber.value.split('.');
    // convert integer part
    const integerpartdecimal = parseint(integerpartstr, frombase.value);
    if (isnan(integerpartdecimal)) {
      result.value = '无效的输入数字';
      return;
    }
    const integerpartresult = integerpartdecimal.tostring(tobase.value).touppercase();
    // convert fractional part if it exists
    let fractionalpartresult = '';
    if (fractionalpartstr) {
      let decimalfraction = 0;
      for (let i = 0; i < fractionalpartstr.length; i++) {
        const digit = parseint(fractionalpartstr[i], frombase.value);
        if (isnan(digit) || digit >= frombase.value) {
          result.value = '无效的小数部分';
          return;
        }
        decimalfraction += digit * math.pow(frombase.value, -(i + 1));
      }
      let tempfractionalresult = '';
      let tempdecimal = decimalfraction;
      for (let i = 0; i < 10; i++) { // limit precision to 10 digits
        tempdecimal *= tobase.value;
        const integerpart = math.floor(tempdecimal);
        tempfractionalresult += integerpart.tostring(tobase.value).touppercase();
        tempdecimal -= integerpart;
        if (tempdecimal === 0) {
          break;
        }
      }
      fractionalpartresult = '.' + tempfractionalresult;
    }
    result.value = integerpartresult + fractionalpartresult;
  } catch (error) {
    result.value = '转换出错';
    console.error("conversion error:", error);
  }
}
</script>
<style scoped>
.converter-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}
.description {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}
.converter-wrapper {
  margin: 20px 0;
}
.converter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.select-group, .input-group, .result-group {
  flex: 1;
}
.base-select, .number-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 16px;
}
.result-display {
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 4px;
  min-height: 46px;
}
.convert-btn {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}
.convert-btn:hover {
  background: #0056b3;
}
</style>