🎨 优化组件

src/components/func/confirm.ts

@@ -21,12 +21,12 @@ const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
   return boxVNode;
 };
 
-let confirmInstance: any;
+let confirmInstance: VNode;
 
 const showConfirm = async (props: TGApp.Component.Confirm.Params): Promise<string | boolean> => {
   if (confirmInstance) {
     const boxVue = confirmInstance.component;
-    return boxVue.exposeProxy.displayBox(props);
+    return boxVue?.exposeProxy?.displayBox(props);
   } else {
     confirmInstance = renderBox(props);
     return await showConfirm(props);

src/components/func/confirm.vue

@@ -4,7 +4,7 @@
       <transition name="func-confirm-inner">
         <div v-show="showInner" class="confirm-box">
           <div class="confirm-title">
-            {{ data.title ?? "" }}
+            {{ data.title }}
           </div>
           <div v-if="data?.text !== '' && data.mode === 'confirm'" class="confirm-subtitle">
             {{ data.text }}
@@ -37,7 +37,7 @@ import { onMounted, reactive, ref, watch } from "vue";
 
 interface ConfirmProps {
   title: string;
-  text?: string;
+  text: string;
   mode: "confirm" | "input";
   otcancel?: boolean;
 }
@@ -49,11 +49,9 @@ const props = withDefaults(defineProps<ConfirmProps>(), {
 });
 
 // 组件参数
-const data = reactive({
+const data = reactive<TGApp.Component.Confirm.Params>({
   title: "",
-  text: "",
   mode: "confirm",
-  otcancel: false,
 });
 const show = ref<boolean>(false);
 const showOuter = ref<boolean>(false);
@@ -61,9 +59,7 @@ const showInner = ref<boolean>(false);
 const confirmVal = ref<boolean | string>(false);
 const inputVal = ref<string>("");
 
-watch(
+watch(show, () => {
-  () => show.value,
-  () => {
   if (show.value) {
     showOuter.value = true;
     setTimeout(() => {
@@ -77,18 +73,17 @@ watch(
       showOuter.value = false;
     }, 300);
   }
-  },
+});
-);
 
 onMounted(async () => {
   await displayBox(props);
 });
 
-async function displayBox(props: TGApp.Component.Confirm.Params): Promise<string | boolean> {
+async function displayBox(params: TGApp.Component.Confirm.Params): Promise<string | boolean> {
-  data.title = props.title;
+  data.title = params.title;
-  data.text = props.text ?? "";
+  data.text = params.text ?? "";
-  data.mode = props.mode ?? "confirm";
+  data.mode = params.mode ?? "confirm";
-  data.otcancel = props.otcancel ?? true;
+  data.otcancel = params.otcancel ?? true;
   show.value = true;
   // 等待确认框关闭，返回关闭后的confirmVal
   return await new Promise<string | boolean>((resolve) => {

src/components/func/snackbar.ts

@@ -21,12 +21,12 @@ const renderBox = (props: TGApp.Component.Snackbar.Params): VNode => {
   return boxVNode;
 };
 
-let snackbarInstance: any;
+let snackbarInstance: VNode;
 
 const showSnackbar = (props: TGApp.Component.Snackbar.Params): void => {
   if (snackbarInstance) {
     const boxVue = snackbarInstance.component;
-    boxVue.exposeProxy.displayBox(props);
+    boxVue?.exposeProxy?.displayBox(props);
   } else {
     snackbarInstance = renderBox(props);
     showSnackbar(props);

src/components/func/snackbar.vue

@@ -8,16 +8,34 @@
   </transition>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+// vue
+import { ref, reactive, onMounted } from "vue";
 
-const text = ref<string>();
+interface SnackbarProps {
-const color = ref<string>();
+  text: string;
-const timeout = ref<number>();
+  color?: string;
+  timeout?: number;
+}
+
+const props = withDefaults(defineProps<SnackbarProps>(), {
+  text: "",
+  color: "success",
+  timeout: 1500,
+});
+
+// 组件参数
+const data = reactive<TGApp.Component.Snackbar.Params>({
+  text: "",
+  color: "success",
+  timeout: 1500,
+});
 const show = ref<boolean>(false);
-
-// 定时器，用于防止多次连续点击
 let timer: NodeJS.Timeout;
 
+onMounted(() => {
+  displayBox(props);
+});
+
 // 根据输入的颜色转换为 hex 格式
 function transColor(color: string): string {
   if (color.startsWith("#")) {
@@ -37,15 +55,15 @@ function transColor(color: string): string {
   }
 }
 
-function displayBox(data: TGApp.Component.Snackbar.Params): void {
+function displayBox(params: TGApp.Component.Snackbar.Params): void {
-  color.value = transColor(data.color ?? "success");
+  data.text = params.text;
-  text.value = data.text ?? "";
+  data.color = transColor(params.color ?? "success");
-  timeout.value = data.timeout ?? 1500;
+  data.timeout = params.timeout ?? 1500;
   show.value = true;
   clearTimeout(timer);
   timer = setTimeout(() => {
     show.value = false;
-  }, timeout.value);
+  }, data.timeout);
 }
 
 defineExpose({
@@ -53,6 +71,23 @@ defineExpose({
 });
 </script>
 <style lang="css" scoped>
+.func-snackbar-enter-active,
+.func-snackbar-leave-active {
+  transition: all 0.3s;
+}
+
+.func-snackbar-enter-from,
+.func-snackbar-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(20px);
+}
+
+.func-snackbar-enter-to,
+.func-snackbar-leave-from {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
 .func-snackbar {
   position: fixed;
   z-index: 999;
@@ -74,21 +109,4 @@ defineExpose({
   font-size: 16px;
   font-weight: 500;
 }
-
-.func-snackbar-enter-active,
-.func-snackbar-leave-active {
-  transition: all 0.3s;
-}
-
-.func-snackbar-enter-from,
-.func-snackbar-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(20px);
-}
-
-.func-snackbar-enter-to,
-.func-snackbar-leave-from {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
 </style>

src/types/Component/Confirm.d.ts

@@ -19,7 +19,7 @@ declare namespace TGApp.Component.Confirm {
   export interface Params {
     title: string;
     text?: string;
-    mode?: "confirm" | "input";
+    mode: "confirm" | "input";
     otcancel?: boolean;
   }
 }