feat: finished 1.0.0

src/App.vue

@@ -2,6 +2,10 @@
 import { ref } from 'vue'
 import { codecs } from '@/utils/codecs.ts'
 import { EncodingConverter } from '@/utils/converter'
+import { useOsTheme, darkTheme } from 'naive-ui'
+
+const osThemeRef = useOsTheme()
+const theme = computed(() => (osThemeRef.value === 'dark' ? darkTheme : undefined))
 
 const Converter = new EncodingConverter()
 
@@ -12,43 +16,47 @@ const handleTextInput = (text: string) => {
   codecs.forEach(codec => {
     result.value = []
     Converter.convert(codec, text).then(res => {
-      result.value?.push(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>
+  <n-config-provider :theme="theme">
+    <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 title">原来编码</th>
+            <th class="encode title">目标编码</th>
+            <th class="result title">结果</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>
+  </n-config-provider>
 </template>
 
 <style scoped lang="less">
 .container {
+  // disable selection
+  user-select: none;
   padding: 0.8rem;
 
   .input {
@@ -57,7 +65,11 @@ const handleTextInput = (text: string) => {
 
   .table {
     .encode {
-      width: 8rem;
+      width: 7rem;
+    }
+
+    .title {
+      font-weight: bold;
     }
   }
 }

src/utils/codecs.ts

@@ -1,15 +1,47 @@
 export interface Codec {
-  origin: string;
-  target: string;
+  origin: string
+  target: string
 }
 
 export const codecs: Codec[] = [
   {
-    origin: 'gbk',
-    target: 'utf8',
+    origin: 'GBK',
+    target: 'UTF-8',
   },
   {
-    origin: 'utf8',
-    target: 'gbk',
-  }
-]
+    origin: 'UTF-8',
+    target: 'GBK',
+  },
+  {
+    origin: 'GBK',
+    target: 'ISO-8859-1',
+  },
+  {
+    origin: 'GBK',
+    target: 'BIG5',
+  },
+  {
+    origin: 'GBK',
+    target: 'UTF-16',
+  },
+  {
+    origin: 'GBK',
+    target: 'WINDOWS-1252',
+  },
+  {
+    origin: 'UTF-8',
+    target: 'ISO-8859-1',
+  },
+  {
+    origin: 'UTF-8',
+    target: 'BIG5',
+  },
+  {
+    origin: 'UTF-8',
+    target: 'UTF-16',
+  },
+  {
+    origin: 'UTF-8',
+    target: 'WINDOWS-1252',
+  },
+]

src/utils/converter.ts

@@ -1,18 +1,15 @@
 import { Codec } from '@/utils/codecs'
+import '@/utils/iconv'
 
 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)
+      const byteArray = iconv.encode(text, codec.origin)
+      convertedText = iconv.decode(byteArray, codec.target)
       text = convertedText
     } catch (error) {
-      console.error(
-        `Failed to convert from ${codec.origin} to ${codec.target}: ${error}`
-      )
+      console.error(`Failed to convert from ${codec.origin} to ${codec.target}: ${error}`)
       return null
     }
     return convertedText