feat: 用户管理和数字人授权

components/BubbleTitle.vue

@@ -12,6 +12,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  bubbleColor: {
+    type: String,
+    default: 'primary-500',
+  },
 })
 </script>
 
@@ -20,10 +24,10 @@ const props = defineProps({
     <div>
       <h1
         v-if="subtitle"
-        class="text-base text-neutral-300 italic tracking-wide font-black leading-none"
+        class="text-base text-neutral-300 dark:text-neutral-600 italic tracking-wide font-black leading-none"
       >{{ subtitle }}</h1>
 
-      <h1 class="text-xl font-bold text-neutral-700 leading-none relative z-[1]">
+      <h1 class="text-xl font-bold text-neutral-700 dark:text-neutral-300 leading-none relative z-[1]">
         {{ title }}
       </h1>
     </div>
@@ -34,7 +38,8 @@ const props = defineProps({
 
     <div
       v-if="bubble"
-      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full bg-primary-500/50 z-[0]"
+      :class="`bg-${bubbleColor}/50`"
+      class="absolute -left-1.5 -bottom-1.5 w-4 h-4 rounded-full z-[0]"
     ></div>
   </div>
 </template>

components/GradientDivider.vue

@@ -4,13 +4,26 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  lineGradientFrom: {
+    type: String,
+    default: 'primary',
+  },
+  lineGradientTo: {
+    type: String,
+    default: 'primary',
+  },
 })
 </script>
 
 <template>
   <div
-    class="bg-gradient-to-r from-primary-500/50 to-primary-300/50 rounded-full my-4"
-    :class="{'w-full h-[1px]': !vertical, 'w-[1px] h-full': vertical}"
+    :class="{
+      'w-full h-[1px]': !vertical,
+      'w-[1px] h-full': vertical,
+      [`from-${lineGradientFrom}-500/50`]: true,
+      [`to-${lineGradientTo}-300/50`]: true,
+    }"
+    class="bg-gradient-to-r rounded-full my-4"
   ></div>
 </template>
 

components/LoginNeededContent.vue

@@ -8,6 +8,10 @@ defineProps({
     type: String,
     default: '',
   },
+  needAdmin: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const modal = useModal()
@@ -16,19 +20,24 @@ const modal = useModal()
 <template>
   <ClientOnly>
     <div v-if="!loginState.is_logged_in"
-         class="w-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+         class="w-full flex flex-col justify-center items-center gap-2 py-40">
       <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
       <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
       <UButton
-          class="mt-2 font-bold"
-          color="black"
-          variant="solid"
-          size="xs"
-          @click="modal.open(ModalAuthentication)"
+        class="mt-2 font-bold"
+        color="black"
+        size="xs"
+        variant="solid"
+        @click="modal.open(ModalAuthentication)"
       >
         登录
       </UButton>
     </div>
+    <div v-else-if="needAdmin && loginState.user.auth_code !== 2"
+         class="w-full flex flex-col justify-center items-center gap-2 py-40">
+      <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
+      <p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
+    </div>
     <div :class="contentClass" v-else>
       <slot/>
     </div>

components/ModalDigitalHumanSelect.vue

@@ -10,6 +10,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabledDigitalHumanIds: {
+    type: Array,
+    default: () => [],
+  },
+  defaultTab: {
+    type: String as PropType<'user' | 'system'>,
+    default: 'user',
+  },
 })
 
 const emit = defineEmits({
@@ -107,6 +115,20 @@ const {
     watch: [page],
   },
 )
+
+onMounted(() => {
+  if (loginState.user.auth_code === 2) {
+    tabItems.push({
+      key: 'system',
+      label: '系统数字人',
+      icon: 'i-tabler-user-star',
+    })
+    nextTick(() => {
+      tabIndex.value = tabItems.findIndex(i => i.key === props.defaultTab)
+      console.log('tabIndex', tabIndex.value)
+    })
+  }
+})
 </script>
 
 <template>
@@ -132,37 +154,49 @@ const {
       </template>
 
       <UTabs
-        :items="[
-          ...tabItems,
-          loginState.user.auth_code === 2 ? {
-            key: 'system',
-            label: '系统数字人',
-            icon: 'i-tabler-user-star',
-          } : null
-        ].filter(Boolean)"
-        @change="i => tabIndex = i"
+        v-model="tabIndex"
+        :items="tabItems"
       >
         <template #item="{ item }">
           <div class="w-full grid grid-cols-3 sm:grid-cols-5 gap-4">
             <div
               v-for="(d, i) in item.key === 'user' ? userDigitalList?.data.items : systemDigitalList?.data.items"
               :key="`${item.key === 'user' ? 'user' : 'system'}-digital-${d.model_id}`"
-              :class="{'border-primary shadow-md': selectedDigitalHumans.includes(d)}"
-              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white rounded-md border cursor-pointer transition-all duration-150 select-none"
-              @click="handleSelectClick(d)"
+              :class="{
+                'border-primary shadow-md': selectedDigitalHumans.includes(d),
+                'border-neutral-200 dark:border-neutral-700': !selectedDigitalHumans.includes(d),
+              }"
+              class="relative flex flex-col justify-center items-center gap-2 overflow-hidden w-full bg-white dark:bg-neutral-800 rounded-md border dark:border-2 cursor-pointer transition-all duration-150 select-none"
+              @click="!disabledDigitalHumanIds.includes(d.model_id) ? handleSelectClick(d) : void 0"
             >
+              <div
+                v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                class="absolute inset-0 bg-neutral-400 dark:bg-neutral-700 bg-opacity-50 dark:bg-opacity-50 cursor-not-allowed z-10"
+              ></div>
               <div
                 :class="{'bg-primary-50': selectedDigitalHumans.includes(d)}"
-                class="relative bg-neutral-100 border-b w-full aspect-square object-cover overflow-hidden transition-all duration-150"
+                class="relative bg-neutral-100 dark:bg-neutral-800 border-b dark:border-neutral-700 w-full aspect-square object-cover overflow-hidden transition-all duration-150"
               >
                 <NuxtImg :src="d.avatar" class="-translate-y-4"/>
-                <UIcon v-if="selectedDigitalHumans.includes(d)" class="absolute top-1 right-1 text-lg text-primary"
-                       name="i-tabler-check"/>
+                <UIcon
+                  v-if="selectedDigitalHumans.includes(d)"
+                  class="absolute top-1 right-1 text-lg text-primary"
+                  name="i-tabler-check"
+                />
+                <UIcon
+                  v-if="disabledDigitalHumanIds.includes(d.model_id)"
+                  class="absolute top-1 right-1 text-lg text-red-500"
+                  name="tabler:user-off"
+                />
               </div>
               <div class="w-full flex flex-col gap-1 px-2 pb-2">
                 <div class="flex justify-between items-center">
-                  <span class="text-sm text-neutral-800 font-medium line-clamp-1">{{ d.name }}</span>
-                  <span class="text-xs text-neutral-300 font-medium">ID:{{ d.digital_human_id || d.id }}</span>
+                  <span class="text-sm text-neutral-800 dark:text-neutral-300 font-medium line-clamp-1">
+                    {{ d.name }}
+                  </span>
+                  <span class="text-xs text-neutral-300 dark:text-neutral-500 font-medium">
+                    ID:{{ d.digital_human_id || d.id }}
+                  </span>
                 </div>
               </div>
             </div>

components/SlideCreateCourse.vue

@@ -134,10 +134,11 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
           <UFormGroup label="数字人" name="digital_human_id" required>
             <div
               :class="{'shadow-inner': !!selected_digital_human}"
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
               @click="isDigitalSelectorOpen = true"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
                 <UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
                 <NuxtImg v-else :src="selected_digital_human?.avatar"/>
               </div>
@@ -153,9 +154,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
           </UFormGroup>
           <UFormGroup label="视频片头片尾" name="opening">
             <div
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center">
                 <UIcon class="text-2xl opacity-50" name="i-tabler-brackets-contain"/>
               </div>
               <div class="flex flex-col text-neutral-400 text-sm font-medium">
@@ -179,7 +181,7 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
 
         <UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
           <template #item>
-            <div class="border rounded-lg space-y-4 p-4 pb-6">
+            <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
               <UFormGroup label="生成线路" name="gen_server">
                 <USelectMenu
                   v-model="createCourseState.gen_server"

components/SlideCreateCourseGreen.vue

@@ -117,10 +117,11 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
           <UFormGroup label="数字人" name="digital_human_id" required>
             <div
               :class="{'shadow-inner': !!selected_digital_human}"
-              class="flex items-center gap-2 bg-neutral-100 p-2 rounded-md cursor-pointer select-none transition-all"
+              class="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-md cursor-pointer select-none transition-all"
               @click="isDigitalSelectorOpen = true"
             >
-              <div class="w-12 aspect-square border rounded-md flex justify-center items-center overflow-hidden">
+              <div
+                class="w-12 aspect-square border dark:border-neutral-700 rounded-md flex justify-center items-center overflow-hidden">
                 <UIcon v-if="!selected_digital_human" class="text-2xl opacity-50" name="i-tabler-user-screen"/>
                 <NuxtImg v-else :src="selected_digital_human?.avatar"/>
               </div>
@@ -147,7 +148,7 @@ const onCreateCourseGreenSubmit = async (event: FormSubmitEvent<CreateCourseSche
 
         <UAccordion :items="[{label: '高级选项'}]" color="gray" size="lg">
           <template #item>
-            <div class="border rounded-lg space-y-4 p-4 pb-6">
+            <div class="border dark:border-neutral-700 rounded-lg space-y-4 p-4 pb-6">
               <UFormGroup :label="`视频倍速：${createCourseState.speed}`" name="speed">
                 <URange
                   v-model="createCourseState.speed"

components/aigc/NavItem.vue

@@ -38,13 +38,18 @@ const activeClass = computed(() => {
     v-if="!hide"
     :class="{
       [activeClass]: active,
-      'hover:bg-neutral-200': !active,
+      'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
     }"
     :to="to"
-    class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
+    class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
   >
-    <Icon :name="icon" class="text-xl inline"/>
-    <h1 class="text-[14px] font-medium">{{ label }}</h1>
+    <div class="flex items-center gap-2">
+      <Icon :name="icon" class="text-xl inline"/>
+      <h1 class="flex-1 text-[14px] font-medium line-clamp-1">
+        {{ label }}
+      </h1>
+    </div>
+    <UBadge v-if="admin" color="amber" label="OP" size="xs" variant="subtle"/>
   </NuxtLink>
 </template>