init: repo

src/App.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { codecs } from '@/utils/codecs.ts'
+import { EncodingConverter } from '@/utils/converter'
+
+const Converter = new EncodingConverter()
+
+const content = ref<string>('')
+const result = ref<string[]>([])
+
+const handleTextInput = (text: string) => {
+  codecs.forEach(codec => {
+    result.value = []
+    Converter.convert(codec, text).then(res => {
+      result.value?.push(res ?? '')
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="container">
+    <n-input
+      v-model:value="content"
+      type="textarea"
+      placeholder="请输入待转换的乱码文本"
+      clearable
+      class="input"
+      @input="handleTextInput"
+    />
+    <n-table :single-line="false" striped class="table">
+      <thead>
+        <tr>
+          <th class="encode">原来编码</th>
+          <th class="encode">目标编码</th>
+          <th class="result">结果</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in codecs" :key="index">
+          <td>{{ item.origin }}</td>
+          <td>{{ item.target }}</td>
+          <td>{{ result[index] }}</td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>
+
+<style scoped lang="less">
+.container {
+  padding: 0.8rem;
+
+  .input {
+    margin-bottom: 0.8rem;
+  }
+
+  .table {
+    .encode {
+      width: 8rem;
+    }
+  }
+}
+</style>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from "vue";
+import "./styles.css";
+
+// 通用字体
+import 'vfonts/Lato.css'
+// 等宽字体
+import 'vfonts/FiraCode.css'
+
+import App from "./App.vue";
+
+createApp(App).mount("#app");

src/styles.css

@@ -0,0 +1,51 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.container {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+input,
+button {
+  outline: none;
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}

src/utils/codecs.ts

@@ -0,0 +1,15 @@
+export interface Codec {
+  origin: string;
+  target: string;
+}
+
+export const codecs: Codec[] = [
+  {
+    origin: 'gbk',
+    target: 'utf8',
+  },
+  {
+    origin: 'utf8',
+    target: 'gbk',
+  }
+]

src/utils/converter.ts

@@ -0,0 +1,20 @@
+import { Codec } from '@/utils/codecs'
+
+export class EncodingConverter {
+  async convert(codec: Codec, text: string): Promise<string | null> {
+    let convertedText: string | null = null
+    try {
+      const byteArray = new TextEncoder().encode(text)
+      const decodedText = new TextDecoder(codec.origin).decode(byteArray)
+      const byteArray2 = new TextEncoder().encode(decodedText)
+      convertedText = new TextDecoder(codec.target).decode(byteArray2)
+      text = convertedText
+    } catch (error) {
+      console.error(
+        `Failed to convert from ${codec.origin} to ${codec.target}: ${error}`
+      )
+      return null
+    }
+    return convertedText
+  }
+}

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}