feat: 用户服务和用量管理

components/DatePicker.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+// @ts-ignore
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = {
+  'transparent': true,
+  'borderless': true,
+  'color': 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2
+}
+
+function onDayClick(_: any, event: MouseEvent): void {
+  const target = event.target as HTMLElement
+  target.blur()
+}
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
+    v-model.range="date"
+    :columns="2"
+    v-bind="{ ...attrs, ...$attrs }"
+    @dayclick="onDayClick"
+  />
+  <VCalendarDatePicker
+    v-else
+    v-model="date"
+    v-bind="{ ...attrs, ...$attrs }"
+    @dayclick="onDayClick"
+  />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-primary {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+
+.vc-container .vc-weekday-1, .vc-container .vc-weekday-7 {
+  @apply text-primary;
+}
+</style>

components/aigc/generation/GBTaskCard.vue

@@ -101,11 +101,11 @@ const onClick = () => {
           </li>
           <li class="">
             <h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
-            <p class="text-xs line-clamp-1">{{ dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>
+            <p class="text-xs line-clamp-1">{{ video.complete_time ? dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '进行中' }}</p>
           </li>
           <li class="">
             <h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
-            <p class="text-xs line-clamp-1">{{ dayjs.duration(video.duration || 0).format('HH:mm:ss') }}</p>
+            <p class="text-xs line-clamp-1">{{ video.duration ? dayjs.duration(video.duration || 0).format('HH:mm:ss') : '进行中' }}</p>
           </li>
           <li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
             <h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
@@ -136,6 +136,7 @@ const onClick = () => {
             <UButton
               :label="downloadingState.subtitle > 0 && downloadingState.subtitle < 100 ? `${downloadingState.subtitle.toFixed(0)}%` : '字幕'"
               :loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
+              :disabled="!video.subtitle"
               color="primary"
               leading-icon="i-tabler-file-download"
               variant="soft"
@@ -144,6 +145,7 @@ const onClick = () => {
             <UButton
               :label="downloadingState.video > 0 && downloadingState.video < 100 ? `${downloadingState.video.toFixed(0)}%` : '视频'"
               :loading="downloadingState.video > 0 && downloadingState.video < 100"
+              :disabled="!video.video_url"
               color="primary"
               leading-icon="i-tabler-download"
               variant="soft"