Merge pull request #5 from kongying-tavern/feat/next

fix(icon-resolve): fix icon path resolve

src/components/SvgIcon.vue

@@ -1,19 +1,9 @@
 <script setup lang="ts">
-import { computed, withDefaults } from "vue";
-
-interface Props {
-  iconBase?: string;
+defineProps<{
   iconSrc: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  iconBase: import.meta.url,
-  iconSrc: "",
-});
-
-const iconUrl = computed(() => new URL(props.iconSrc, props.iconBase).href);
+}>();
 </script>
 
 <template>
-  <img :src="iconUrl" />
+  <img :src="iconSrc" />
 </template>

src/views/pageTypewriter/components/ConfigBar/ButtonBase.vue

@@ -5,13 +5,11 @@ defineProps<{
   active?: boolean;
   iconSrc: string;
 }>();
-
-const iconBase = import.meta.url;
 </script>
 
 <template>
   <div class="cursor-pointer config-button" :class="{ active: active }">
-    <SvgIcon class="icon" :icon-base="iconBase" :icon-src="iconSrc"></SvgIcon>
+    <SvgIcon class="icon" :icon-src="iconSrc"></SvgIcon>
   </div>
 </template>
 

src/views/pageTypewriter/components/ConfigBar/ButtonClean.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useTextInput } from "../../hooks";
 import ButtonBase from "./ButtonBase.vue";
+import SvgTrash from "./assets/trash.svg";
 
 const { clear } = useTextInput();
 </script>
 
 <template>
-  <ButtonBase icon-src="./assets/trash.svg" @click="clear()"></ButtonBase>
+  <ButtonBase :icon-src="SvgTrash" @click="clear()"></ButtonBase>
 </template>

src/views/pageTypewriter/components/ConfigBar/ButtonInputMethod.vue

@@ -1,42 +1,43 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import type { ComputedRef } from "vue";
 import SvgIcon from "@/components/SvgIcon.vue";
 import ButtonBase from "./ButtonBase.vue";
 import ButtonDropdown from "./ButtonDropdown.vue";
 import type { ConfigInputMethod } from "@/shared";
 import { ConfigInputMethodEnum } from "@/shared";
 import { useConfig } from "../../hooks";
-
-const iconBase = import.meta.url;
-
-enum iconPathEnum {
-  text = "./assets/i-beam.svg",
-  keyboard = "./assets/keyboard.svg",
-}
+import SvgIBeam from "./assets/i-beam.svg";
+import SvgKeyboard from "./assets/keyboard.svg";
 
 interface inputMethodOption {
-  icon: iconPathEnum;
+  icon: string;
   label: string;
   command: string;
 }
 
 const inputMethodOptions: inputMethodOption[] = [
   {
-    icon: iconPathEnum.text,
+    icon: SvgIBeam,
     label: "文本输入",
     command: ConfigInputMethodEnum.TEXT,
   },
   {
-    icon: iconPathEnum.keyboard,
+    icon: SvgKeyboard,
     label: "键盘输入",
     command: ConfigInputMethodEnum.KEYBOARD,
   },
 ];
 
 const { config } = useConfig();
 
-const iconPath = computed(() => {
-  return iconPathEnum[config.value.inputMethod] || "";
+const iconPath: ComputedRef<string> = computed(() => {
+  const fullPath =
+    {
+      [ConfigInputMethodEnum.TEXT]: SvgIBeam,
+      [ConfigInputMethodEnum.KEYBOARD]: SvgKeyboard,
+    }[config.value.inputMethod] || "";
+  return fullPath as string;
 });
 
 const changeInputMethod = (
@@ -56,7 +57,7 @@ const changeInputMethod = (
           :key="option.command"
           :command="option.command"
         >
-          <SvgIcon class="icon" :icon-base="iconBase" :icon-src="option.icon" />
+          <SvgIcon class="icon" :icon-src="option.icon" />
           <span class="text">{{ option.label }}</span>
         </el-dropdown-item>
       </el-dropdown-menu>

src/views/pageTypewriter/components/ConfigBar/ButtonKeyTransform.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useConfig } from "../../hooks";
 import ButtonBase from "./ButtonBase.vue";
+import SvgTransformChar from "./assets/transform-char.svg";
 
 const { config } = useConfig();
 
@@ -11,7 +12,7 @@ const toggle = () => {
 
 <template>
   <ButtonBase
-    icon-src="./assets/transform-char.svg"
+    :icon-src="SvgTransformChar"
     :active="config.keyTransform"
     @click="toggle()"
   >