🎨chore: 使用 oxlint, oxfmt&格式化代码

components/uni/Message/Provider.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
-
-import type {Message, MessageApi, MessageProviderApi, MessageType} from "~/components/uni/Message/index";
+import type {
+  Message,
+  MessageApi,
+  MessageProviderApi,
+  MessageType,
+} from '~/components/uni/Message/index'
 
 const props = defineProps({
   max: {
     type: Number,
-    default: 5
-  }
+    default: 5,
+  },
 })
 
 const nuxtApp = useNuxtApp()
 const messageList = ref<Message[]>([])
 
-const createMessage = (content: string, type: MessageType, duration: number = 3000) => {
-  const {max} = props
+const createMessage = (
+  content: string,
+  type: MessageType,
+  duration: number = 3000
+) => {
+  const { max } = props
   messageList.value.push({
     id: (Date.now() + Math.random() * 100).toString(32).toUpperCase(),
     content,
     type,
-    duration
+    duration,
   })
   if (messageList.value.length > max) {
     messageList.value.shift()
@@ -27,26 +35,29 @@ const createMessage = (content: string, type: MessageType, duration: number = 30
 
 const providerApi: MessageProviderApi = {
   destroy: (id: string) => {
-    messageList.value.splice(messageList.value.findIndex(message => message.id === id), 1)
-  }
+    messageList.value.splice(
+      messageList.value.findIndex((message) => message.id === id),
+      1
+    )
+  },
 }
 
 const api: MessageApi = {
   info: (content: string, duration: number = 3000) => {
-    createMessage(content, 'info', duration);
+    createMessage(content, 'info', duration)
   },
   success: (content: string, duration: number = 3000) => {
-    createMessage(content, 'success', duration);
+    createMessage(content, 'success', duration)
   },
   warning: (content: string, duration: number = 3000) => {
-    createMessage(content, 'warning', duration);
+    createMessage(content, 'warning', duration)
   },
   error: (content: string, duration: number = 3000) => {
-    createMessage(content, 'error', duration);
+    createMessage(content, 'error', duration)
   },
   destroyAll: function (): void {
-    throw new Error('Function not implemented.');
-  }
+    throw new Error('Function not implemented.')
+  },
 }
 
 nuxtApp.vueApp.provide('uni-message-provider', providerApi)
@@ -54,12 +65,16 @@ nuxtApp.vueApp.provide('uni-message', api)
 </script>
 
 <template>
-  <slot/>
+  <slot />
   <teleport to="body">
     <div id="message-provider">
       <div class="message-wrapper">
         <TransitionGroup name="message">
-          <UniMessage v-for="(message, k) in messageList" :key="message.id" :message="message"/>
+          <UniMessage
+            v-for="(message, k) in messageList"
+            :key="message.id"
+            :message="message"
+          />
         </TransitionGroup>
       </div>
     </div>
@@ -73,11 +88,11 @@ nuxtApp.vueApp.provide('uni-message', api)
 
 .message-move,
 .message-leave-active {
-  transition: all .6s ease;
+  transition: all 0.6s ease;
 }
 
 .message-enter-active {
-  transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
 .message-enter-from {

components/uni/Message/index.d.ts

@@ -17,4 +17,4 @@ export type MessageApi = {
   warning: (content: string, duration?: number) => void
   error: (content: string, duration?: number) => void
   destroyAll: () => void
-}
+}

components/uni/Message/index.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-
-import type {Message, MessageProviderApi} from "~/components/uni/Message/index";
+import type {
+  Message,
+  MessageProviderApi,
+} from '~/components/uni/Message/index'
 
 const providerApi = inject<MessageProviderApi>('uni-message-provider')
 
 const props = defineProps({
   message: {
     require: true,
-    type: Object
-  }
+    type: Object,
+  },
 })
 
 const message = ref<Message>(props.message as Message)
@@ -16,22 +18,39 @@ const message = ref<Message>(props.message as Message)
 onMounted(() => {
   setTimeout(() => {
     providerApi?.destroy(message.value.id)
-  }, message.value?.duration || 3000);
+  }, message.value?.duration || 3000)
 })
 </script>
 
 <template>
-  <div class="message" :class="{
-    '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
-    '!text-emerald-500 !border-emerald-400 !bg-emerald-50': message.type === 'success',
-    '!text-orange-500 !border-orange-400 !bg-orange-50': message.type === 'warning',
-    '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
-    [message.type]: message.type
-  }">
-    <UniIconCircleSuccess v-if="message.type === 'success'" class="text-xl" />
-    <UniIconCircleWarning v-if="message.type === 'warning'" class="text-xl" />
-    <UniIconCircleError v-if="message.type === 'error'" class="text-xl" />
-    <UniIconCircleInfo v-if="message.type === 'info'" class="text-xl" />
+  <div
+    class="message"
+    :class="{
+      '!text-blue-500 !border-blue-400 !bg-blue-50': message.type === 'info',
+      '!text-emerald-500 !border-emerald-400 !bg-emerald-50':
+        message.type === 'success',
+      '!text-orange-500 !border-orange-400 !bg-orange-50':
+        message.type === 'warning',
+      '!text-rose-500 !border-rose-400 !bg-rose-50': message.type === 'error',
+      [message.type]: message.type,
+    }"
+  >
+    <UniIconCircleSuccess
+      v-if="message.type === 'success'"
+      class="text-xl"
+    />
+    <UniIconCircleWarning
+      v-if="message.type === 'warning'"
+      class="text-xl"
+    />
+    <UniIconCircleError
+      v-if="message.type === 'error'"
+      class="text-xl"
+    />
+    <UniIconCircleInfo
+      v-if="message.type === 'info'"
+      class="text-xl"
+    />
     <span>
       {{ message.content }}
     </span>
@@ -41,23 +60,23 @@ onMounted(() => {
 <style scoped>
 .message {
   min-width: 80px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   @apply h-fit px-2 py-1.5 border bg-white border-gray-300 rounded-md text-gray-500 text-xs flex items-center gap-1.5 first-of-type:mt-2.5 mt-2.5 font-bold pointer-events-auto;
 }
 
 .message.info {
-  box-shadow: 0 4px 12px rgba(59, 130, 246, .2);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
 }
 
 .message.success {
-  box-shadow: 0 4px 12px rgba(16, 185, 129, .2);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
 }
 
 .message.warning {
-  box-shadow: 0 4px 12px rgba(249, 115, 22, .2);
+  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
 }
 
 .message.error {
-  box-shadow: 0 4px 12px rgba(244, 63, 94, .2);
+  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
 }
 </style>