ui: improvement

components/ModalAuthentication.vue

@@ -2,6 +2,7 @@
 import {Label, PinInputInput, PinInputRoot} from 'radix-vue'
 
 const toast = useToast()
+const modal = useModal()
 
 const sms_triggered = ref(false)
 const sms_sending = ref(false)
@@ -50,8 +51,16 @@ const obtainSmsCode = () => {
 </script>
 
 <template>
-  <UModal>
+  <UModal prevent-close>
     <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Modals
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modal.close()"/>
+        </div>
+      </template>
 
       <UTabs :items="items" class="w-full">
         <template #default="{ item, index, selected }">

pages/aigc/drawing/index.vue

@@ -22,10 +22,12 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
     }
     const handle_mouseup = () => {
       leftSection.value?.classList.add('transition-all')
+      leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
       window.removeEventListener('mousemove', handle_mousemove)
       window.removeEventListener('mouseup', handle_mouseup)
     }
     leftSection.value?.classList.remove('transition-all')
+    leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
     window.addEventListener('mousemove', handle_mousemove)
     window.addEventListener('mouseup', handle_mouseup)
   }