ui: drawing design

components/ImagePlaceholder.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+  gradient: {
+    type: String,
+    default: '90deg, #FFC0CB 0%, #FFC0CB 100%'
+  },
+  aspect: {
+    type: String,
+    default: '16/9'
+  }
+})
+
+const elem = ref<HTMLElement>()
+const size = computed(() => {
+  return {
+    width: elem.value?.getBoundingClientRect().width.toFixed(0),
+    height: elem.value?.getBoundingClientRect().height.toFixed(0)
+  }
+})
+</script>
+
+<template>
+  <div ref="elem" class="gradient-background flex justify-center items-center"
+       :style="`aspect-ratio: ${aspect};`">
+    <ClientOnly>
+      <h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
+        {{ size.width }} x {{ size.height }}
+      </h1>
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+.gradient-background {
+  @apply rounded-lg;
+  @apply bg-gradient-to-r from-indigo-800 to-purple-600;
+}
+</style>

components/ModalAuthentication.vue

@@ -56,7 +56,7 @@ const obtainSmsCode = () => {
       <template #header>
         <div class="flex items-center justify-between">
           <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Modals
+            登录眩生花 AI 助手
           </h3>
           <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modal.close()"/>
         </div>