wip

layouts/default.vue

@@ -30,8 +30,22 @@ const links = [
   }
 ]
 
+const items = [
+  [{
+    label: 'support@fenshenzhike.com',
+    slot: 'account',
+    disabled: true
+  }], [{
+    label: '账号资料',
+    icon: 'i-tabler-user-circle'
+  }], [{
+    label: '注销登录',
+    icon: 'i-tabler-logout'
+  }]
+]
+
 const open_login_modal = () => {
-  modal.open(ModalAuthentication, {})
+  modal.open(ModalAuthentication)
 }
 </script>
 
@@ -56,7 +70,27 @@ const open_login_modal = () => {
           />
           <UButton label="登录或注册" size="xs" class="font-bold" color="indigo" @click="open_login_modal"/>
         </ClientOnly>
-        <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
+        <UDropdown :items="items" :popper="{ placement: 'bottom-start' }"
+                   :ui="{ item: { disabled: 'cursor-text select-text' } }">
+          <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
+
+          <template #account="{ item }">
+            <div class="text-left">
+              <p class="flex items-center gap-1">
+                已登录为
+                <UBadge color="amber" size="xs" variant="subtle">OP</UBadge>
+              </p>
+              <p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
+                {{ item.label }}
+              </p>
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <span class="truncate">{{ item.label }}</span>
+            <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
+          </template>
+        </UDropdown>
       </div>
     </header>
 
@@ -79,9 +113,10 @@ body {
 
 <style scoped>
 header {
-  @apply fixed inset-x-0 h-16 bg-white border-b;
+  @apply fixed inset-x-0 h-16 bg-white border-b z-30;
   @apply dark:bg-neutral-900 dark:border-neutral-800;
   @apply flex flex-row items-center justify-between px-4;
+  @apply bg-opacity-50 dark:bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150;
 }
 
 main {

nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
         'dayjs-nuxt',
         "@pinia/nuxt",
         "@pinia-plugin-persistedstate/nuxt",
-        "@vite-pwa/nuxt"
+        "@vite-pwa/nuxt",
     ],
     ui: {
         icons: ['tabler', 'solar', 'line-md', 'svg-spinners']

pages/aigc/drawing/components/OptionBlock.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1">
+  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1 shadow">
     <div class="flex items-center gap-1 text-sm">
       <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
       <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
@@ -28,7 +28,7 @@ const props = defineProps({
       </div>
       <slot name="actions"/>
     </div>
-    <div>
+    <div class="flex flex-col gap-2">
       <slot/>
     </div>
   </div>

pages/aigc/drawing/index.vue

@@ -33,24 +33,28 @@ const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) =
 </script>
 
 <template>
-  <div class="h-full flex">
-    <div ref="leftSection" class="relative bg-neutral-200 dark:bg-neutral-800 transition-all" style="width: 320px">
-      <div ref="leftHandler" class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
+  <div class="w-full flex">
+    <div ref="leftSection"
+         class="relative h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
+         style="width: 320px">
+      <div ref="leftHandler"
+           class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
            @dblclick="leftSection?.style.setProperty('width', '320px')"
            @mousedown.prevent="handle_mousedown">
         <span
             class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
       </div>
-      <div class="p-4 flex flex-col gap-2">
+      <div class="h-full p-4 flex flex-col gap-2 overflow-y-auto">
         <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
           <template #actions>
             <UBadge color="sky" size="xs">按钮A</UBadge>
             <UBadge color="indigo" size="xs">按钮B</UBadge>
           </template>
-          <UTextarea autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" rows="2"/>
+          <UTextarea :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
         </OptionBlock>
         <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
-          <UTextarea autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开" rows="2"/>
+          <UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
+                     resize/>
         </OptionBlock>
       </div>
     </div>