feat(admin): 优化用户界面交互与组件功能

- 在抽题页面添加开始抽题按钮并绑定事件
- 调整队伍列表动画延迟和分组页面样式
- 修复结果发布条件逻辑，允许无结束时间时发布
- 增强TypeIt组件，支持动态配置和实例管理
- 更新Competition API类型定义，使用枚举类型
- 优化CompetitionLayout组件按钮显示时机
- 修正分析页面API调用参数类型
- 在拼写检查词典中添加Typeit

.vscode/settings.json

@@ -39,6 +39,7 @@
   "totvsLanguageServer.welcomePage": false,
   "cSpell.words": [
     "activityinfo",
-    "Echarts"
+    "Echarts",
+    "Typeit"
   ] // `
 }

apps/admin/src/components/custom/typeit/index.vue

@@ -2,44 +2,84 @@
 import type { Options } from 'typeit'
 import type { El } from 'typeit/dist/types'
 import TypeIt from 'typeit'
-import { onMounted, shallowRef } from 'vue'
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+
+defineOptions({ name: 'TypeIt' })
+
+const props = withDefaults(defineProps<Props>(), {
+  speed: 100,
+  loop: false,
+  cursor: true,
+  lifeLike: true,
+  strings: () => [],
+})
+
+interface Props {
+  /** 打字速度 */
+  speed?: number
+  /** 是否循环 */
+  loop?: boolean
+  /** 是否显示光标 */
+  cursor?: boolean
+  /** 打字内容 */
+  strings?: string | string[]
+  /** 像人一样打字 */
+  lifeLike?: boolean
+  /** 开始前的延迟 */
+  startDelay?: number
+  /** 下一段文字的延迟 */
+  nextStringDelay?: number
+  /** 循环延迟 */
+  loopDelay?: number
+  /** 兼容旧代码或用户自定义延迟参数 */
+  typeDelay?: number
+}
 
 const textRef = shallowRef<El>()
+const typeItInstance = shallowRef<TypeIt | null>(null)
 
 function init() {
   if (!textRef.value)
     return
 
-  const options: Options = {
+  if (typeItInstance.value) {
-    strings: 'SoybeanAdmin是一个清新优雅、高颜值且功能强大的后台管理模板',
+    typeItInstance.value.destroy()
-    lifeLike: true,
-    speed: 120,
-    loop: true,
   }
 
-  const initTypeIt = new TypeIt(textRef.value, options)
+  // 清空内容，防止重叠
+  textRef.value.textContent = ''
 
-  initTypeIt.go()
+  const options: Options = {
+    strings: props.strings,
+    lifeLike: props.lifeLike,
+    speed: props.speed,
+    loop: props.loop,
+    cursor: props.cursor,
+    startDelay: props.startDelay,
+    nextStringDelay: props.nextStringDelay ?? props.typeDelay,
+    loopDelay: props.loopDelay,
+  }
+
+  typeItInstance.value = new TypeIt(textRef.value, options).go()
 }
 
 onMounted(() => {
   init()
 })
+
+onBeforeUnmount(() => {
+  if (typeItInstance.value) {
+    typeItInstance.value.destroy()
+  }
+})
+
+watch(() => [props.strings, props.speed, props.loop], () => {
+  init()
+})
 </script>
 
 <template>
-  <div>
+  <span ref="textRef" class="typeit-container" />
-    <NCard title="打字机 插件" :bordered="false" class="h-full card-wrapper">
-      <NSpace :vertical="true">
-        <GithubLink link="https://github.com/alexmacarthur/typeit" />
-        <WebSiteLink label="文档地址：" link="https://www.typeitjs.com/docs/vanilla/usage/" />
-      </NSpace>
-      <NDivider title-placement="left">
-        基本示例
-      </NDivider>
-      <span ref="textRef" class="text-18px" />
-    </NCard>
-  </div>
 </template>
 
 <style scoped></style>

apps/admin/src/components/custom/user/CompetitionLayout.vue

@@ -88,6 +88,7 @@ async function fetchSystemConfig() {
 
 const showContent = ref(false)
 const showSlotContent = ref(false)
+const showButton = ref(false)
 
 function handleBack() {
   emit('back')
@@ -115,10 +116,15 @@ onMounted(() => {
   }, 100)
 
   // 延迟显示内容，等待标题卷轴展开
-  const delay = props.showTitle ? 800 : 100
+  const delay = props.showTitle ? 500 : 100
   setTimeout(() => {
     showSlotContent.value = true
   }, delay)
+
+  // 延迟显示按钮，等待内容显示
+  setTimeout(() => {
+    showButton.value = true
+  }, delay + 500)
 })
 </script>
 
@@ -160,6 +166,7 @@ onMounted(() => {
 
           <!-- Footer Action -->
           <footer
+            v-if="showButton"
             class="page-footer w-full flex items-center justify-between px-20"
             :class="[actionPosition, btnTheme]"
           >

apps/admin/src/typings/api/Competition.d.ts

@@ -329,7 +329,7 @@ declare namespace Api {
       /** 答题时间（秒） */
       QuestionTime: number
       /** 赛题包类型 */
-      RoundType: number
+      RoundType: CompetitionRoundType
       /** 题目模板 id */
       TemplateID: number
       /** UI 类型 */

apps/admin/src/views/results/results-detail/index.vue

@@ -582,7 +582,7 @@ const nowTs = ref(Date.now())
 const canPublish = computed(() => {
   const endTime = (currentQuestion.value as any)?.EndTime
   if (!endTime)
-    return false
+    return true
   const end = new Date(endTime).getTime()
   return nowTs.value >= end
 })

apps/admin/src/views/user/analysis/index.vue

@@ -74,7 +74,7 @@ async function initQuestions() {
     const { data: outlineData, error } = await fetchGetCurrentQuestion({
       ActivityID: Number(activityId.value),
       GroupID: Number(groupsId.value),
-      RoundType: Number(currentQuestionMainInfo.value?.Activity_Question.RoundType) || 0,
+      RoundType: (currentQuestionMainInfo.value?.Activity_Question.RoundType) || 0,
     })
     // eslint-disable-next-line no-console
     console.log(outlineData, 'outlineData')
@@ -172,23 +172,18 @@ onBeforeUnmount(() => {
               <span class="text-lg text-white font-bold drop-shadow">{{ team.TeamName }}</span>
               <span class="ml-2 rounded-full bg-white/40 px-2 py-0.5 text-sm">正确 <span class="text-md text-blue">{{
                 team.correctCount }}</span> 字</span>
-              <span class="text-s rounded-full bg-white/40 px-2 py-0.5">积分 <span class="text-md text-blue">{{ team.Points
+              <span class="text-s rounded-full bg-white/40 px-2 py-0.5">积分 <span class="text-md text-blue">{{
+                team.Points
               }}</span></span>
             </div>
 
             <!-- Answer Image Area -->
-            <div
+            <div class="relative mb-4 flex-1 overflow-hidden border border-gray-300 rounded bg-gray-50">
-              class="relative mb-4 flex-1 overflow-hidden border border-gray-300 rounded bg-gray-50"
-            >
               <!-- Grid Background Simulation -->
               <div class="pointer-events-none absolute inset-0 grid grid-cols-8 gap-px bg-gray-200 opacity-20">
                 <!-- <div v-for="n in 64" :key="n" class="bg-white" /> -->
               </div>
-              <NImage
+              <NImage :src="team.UserAnswerPicture" class="h-full w-full" object-fit="contain" />
-                :src="team.UserAnswerPicture"
-                class="h-full w-full"
-                object-fit="contain"
-              />
             </div>
 
             <!-- Stats & Score -->

apps/admin/src/views/user/draw/index.vue

@@ -135,7 +135,10 @@ const questionTitle = computed(() => question.value?.QuestionList?.QuestionConte
 </script>
 
 <template>
-  <CompetitionLayout :show-back="true" :show-next="false" :title="questionMainTitle || '抽题'" @back="handleBack">
+  <CompetitionLayout
+    :show-back="true" :show-next="true" :title="questionMainTitle || '抽题'" next-btn-text="开始抽题"
+    @next="handleCardClick(question as Api.Competition.CurrentQuestionResponse)" @back="handleBack"
+  >
     <div class="h-full w-full flex flex-col items-center pt-10 font-sans">
       <div v-if="question" class="mb-10 max-w-4xl text-center">
         <div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">

apps/admin/src/views/user/groups/index.vue

@@ -163,7 +163,7 @@ onMounted(() => {
   }
 
   margin: 0;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 
   &.is-disabled {
     opacity: 0.6;
@@ -187,6 +187,7 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     background-size: contain;
+    margin-left: 20px;
 
     .star-img {
       width: 100%;
@@ -212,14 +213,15 @@ onMounted(() => {
     // border: 1px solid #5d4037;
 
     &.type-moon {
-      padding-left: 27px; // 按比例调整 padding
+      padding-left: 20px;
-      padding-top: 8px;
+      padding-top: 12px;
       margin-top: -5px; // 调整错落位置
     }
 
     &.type-sun {
-      padding-left: 40px; // 按比例调整 padding
+      padding-left: 30px;
-      margin-top: 5px;
+      padding-top: -1px;
+      margin-top: 0px;
     }
 
     // .sun-icon {

apps/admin/src/views/user/teams/index.vue

@@ -108,7 +108,7 @@ onMounted(() => {
             <TransitionGroup name="list-anim" tag="div" class="teams-grid">
               <div
                 v-for="(item, index) in showList ? teams : []" :key="item.id" class="team-item"
-                :style="{ '--delay': `${index * 0.8}s` }" @click="selectTeam(item.id)"
+                :style="{ '--delay': `${index * 0.4}s` }" @click="selectTeam(item.id)"
               >
                 <div class="icon-wrapper">
                   <img src="@/assets/imgs/user/team-title-icon.svg" alt="team-icon" class="h-full w-full object-cover">