Theme Documentation

<script setup>
import useLanguage from '~/utils/language'

// 获取语言数据，包含dayjs工具
const languageUtils = useLanguage()

// 格式化当前日期 - languageUtils.dayjs()自动使用当前语言环境
const formattedDate = computed(() => {
  return languageUtils.dayjs().format('YYYY-MM-DD')
})

// 获取相对时间 - 自动根据当前语言显示"几分钟前"/"minutes ago"等
const relativeTime = computed(() => {
  return languageUtils.dayjs().fromNow()
})
</script>

<template>
  <div class="space-y-4">
    <!-- 本地化日期格式 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ $t('themeDocs.dayjs.localizedFormats') }}</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div class="border-l-2 border-primary-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">l <span class="font-mono">(format('l'))</span>:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('l') }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">短日期</div>
        </div>
        <div class="border-l-2 border-primary-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">ll <span class="font-mono">(format('ll'))</span>:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('ll') }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">中等日期</div>
        </div>
        <div class="border-l-2 border-primary-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">lll <span class="font-mono">(format('lll'))</span>:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('lll') }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">日期和时间</div>
        </div>
        <div class="border-l-2 border-primary-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">llll <span class="font-mono">(format('llll'))</span>:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('llll') }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400 mt-1 italic">完整日期时间</div>
        </div>
      </div>
    </div>
    
    <!-- 本地化星期和月份 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ $t('themeDocs.dayjs.daysAndMonths') }}</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div class="border-l-2 border-green-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.dayOfWeek') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('dddd') }}</div>
        </div>
        <div class="border-l-2 border-green-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.shortDayOfWeek') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('ddd') }}</div>
        </div>
        <div class="border-l-2 border-green-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.monthName') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('MMMM') }}</div>
        </div>
        <div class="border-l-2 border-green-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.shortMonthName') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().format('MMM') }}</div>
        </div>
      </div>
    </div>
    
    <!-- 相对时间 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm">
      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{{ $t('themeDocs.dayjs.relativeTimes') }}</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div class="border-l-2 border-blue-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.justNow') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().fromNow() }}</div>
        </div>
        <div class="border-l-2 border-blue-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.hoursAgo') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().subtract(3, 'hour').fromNow() }}</div>
        </div>
        <div class="border-l-2 border-blue-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.daysAgo') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().subtract(2, 'day').fromNow() }}</div>
        </div>
        <div class="border-l-2 border-blue-500 pl-3">
          <div class="text-xs text-gray-500 dark:text-gray-400">{{ $t('themeDocs.dayjs.inFuture') }}:</div>
          <div class="font-medium">{{ languageUtils.dayjs().add(1, 'week').fromNow() }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useLanguage from '~/utils/language'

// 获取语言数据，包含dayjs工具
const languageUtils = useLanguage()
</script>

<template>
  <div>
    <div class="mb-2">
      <code>YYYY-MM-DD</code>: {{ languageUtils.dayjs().format('YYYY-MM-DD') }}
    </div>
    <div class="mb-2">
      <code>YYYY年MM月DD日</code>: {{ languageUtils.dayjs().format('YYYY年MM月DD日') }}
    </div>
    <div class="mb-2">
      <code>dddd</code>: {{ languageUtils.dayjs().format('dddd') }}
    </div>
    <div class="mb-2">
      <code>A h:mm:ss</code>: {{ languageUtils.dayjs().format('A h:mm:ss') }}
    </div>
    <div class="mb-2">
      <code>lll</code> (本地化格式): {{ languageUtils.dayjs().format('lll') }}
    </div>
  </div>
</template>

<script setup>
import useLanguage from '~/utils/language'

// languageUtils.dayjs 会自动使用当前语言环境，无需手动设置locale
const languageUtils = useLanguage()
</script>

<template>
  <div>
    <div class="mb-2">
      <span>相对时间：</span>
      <span>{{ languageUtils.dayjs().subtract(3, 'hour').fromNow() }}</span>
    </div>
    <div class="mb-2">
      <span>是否是同一天：</span>
      <span>{{ languageUtils.dayjs().isSame(languageUtils.dayjs().add(1, 'day'), 'day') ? '是' : '否' }}</span>
    </div>
    <div class="mb-2">
      <span>下周一：</span>
      <span>{{ languageUtils.dayjs().add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD') }}</span>
    </div>
    <div class="mb-2">
      <span>相差天数：</span>
      <span>{{ languageUtils.dayjs().diff(languageUtils.dayjs().subtract(5, 'day'), 'day') }} 天</span>
    </div>
  </div>
</template>

<script setup>
import useLanguage from '~/utils/language'
// 注意：插件已在 utils/dayjs.ts 中预先注册
// languageUtils.dayjs 自动包含了常用插件，如 relativeTime
const languageUtils = useLanguage()
</script>