refactor(composable): ♻️重构暗色模式

增加useDark 和 useUtools

Author: DaYePython

src/App.vue

@@ -9,12 +9,9 @@
 </template>
 <script setup lang="ts">
 import { darkTheme } from "naive-ui";
-import usePluginEnter from "./composables/usePluginEnter";
-const isDark = ref(false);
+const isDark = useDark()
 const theme = computed<typeof darkTheme | null>(() => {
     return isDark.value ? darkTheme : null
 })
-usePluginEnter(()=> {
-    isDark.value = window?.utools.isDarkColors()
-})
+
 </script>

src/components/home.vue

@@ -64,8 +64,9 @@
 </template>
 <script setup lang="ts">
 import {  useMessage} from "naive-ui";
-import usePluginEnter from "src/composables/usePluginEnter";
+import useUtools from "../composeables/useUtools";
 const message = useMessage();
+const utools = useUtools()
 
 const { ctrl_alt } = useMagicKeys();
 
@@ -82,7 +83,7 @@ const handleCopy = async () => {
     await copy(content);
     message.success("复制成功");
     nextTick(() => {
-        utools.value?.hideMainWindow();
+        utools?.hideMainWindow();
     });
 };
 // https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/config-conventional/index.js
@@ -187,11 +188,6 @@ const handleClear = () => {
     body.value = "";
     type.value = typeOptions.value[0].value;
 };
-const utools = ref<UToolsApi | null>(null);
-
-usePluginEnter(() => {
-    utools.value = window?.utools
-})
 
 </script>
 <style scoped>

src/composeables/useDark.ts

@@ -0,0 +1,10 @@
+import { Ref } from "vue";
+import usePluginEnter from "./usePluginEnter";
+
+export default function useDark(): Ref<boolean> {
+  const isDark = ref<boolean>(false);
+  usePluginEnter(() => {
+    isDark.value = window?.utools.isDarkColors();
+  });
+  return isDark;
+}

src/composeables/usePluginEnter.ts

@@ -0,0 +1,15 @@
+export interface IPluginEnterAction {
+  code: string;
+  type: string;
+  payload: any;
+}
+
+export default function usePluginEnter(
+  hook: (action: IPluginEnterAction) => unknown
+) {
+  onMounted(() => {
+    window?.utools.onPluginEnter((action) => {
+        return hook(action);
+    });
+  });
+}

src/composeables/useUtools.ts

@@ -0,0 +1,10 @@
+import usePluginEnter from "./usePluginEnter";
+
+export default function useUtools(){
+  let tools = reactive<UToolsApi>(window?.utools);
+  usePluginEnter(() => {
+    tools = window!.utools;
+  });
+  return tools;
+}
+