<!-- 欢迎提示词 -->
<script setup lang="ts">
import { Typewriter } from 'vue-element-plus-x';
import { useColorMode } from '@vueuse/core';
import { useTimeGreeting } from '@/hooks/useTimeGreeting';
import { useUserStore } from '@/stores';

const greeting = useTimeGreeting();
const userStore = useUserStore();
const mode = useColorMode();

const username = computed(() => userStore.userInfo?.username ?? '意心Ai，让人人都能享受最前沿的Ai体验');

// 根据主题动态设置雾化背景色
const fogBgColor = computed(() => mode.value === 'dark' ? '#111827' : '#fff');
</script>

<template>
  <div
    class="welcome-text w-full flex flex-wrap items-center justify-center text-center text-lg font-semibold mb-32px mt-12px font-size-32px line-height-32px"
  >
<!--    :content="`${greeting}好，${username}`"-->
    <Typewriter
      :content="`${username}`"
      :typing="{
        step: 2,
        interval: 45,
      }"
      :is-fog="{
        bgColor: fogBgColor,
      }"
    />
  </div>
</template>

<style scoped lang="scss">
:deep {
  .typer-container {
    overflow: initial;
  }
}
</style>
