rebuild: capture

.vscode/settings.json

@@ -38,6 +38,7 @@
     "shinnku",
     "signin",
     "sina",
+    "SMEE",
     "tada",
     "tdesign",
     "templating",

src/components/capture/Capture.vue

@@ -1,29 +1,154 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+// 导入问题
+import { questionsEN } from './questionsEN'
+import { questionsCN } from './questionsCN'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// 导入设置塑件，目的是获取语言
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+// 使用设置 store 获取语言
+const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
+// 当前的语言
+const questions =
+  showKUNGalgameLanguage.value === 'en' ? questionsEN : questionsCN
+
+const props = defineProps<{
+  isShowValidate: boolean
+}>()
+
+const emits = defineEmits<{
+  handleVerify: [res: boolean]
+  handleClose: [isShowValidate: boolean]
+}>()
+
+// 用户输入的答案
+const userAnswers = ref([])
+// 当前问题的索引
+const currentQuestionIndex = ref(0)
+// 当前的问题
+const currentQuestion = computed(() => questions[currentQuestionIndex.value])
+// 错误次数计数
+const errorCounter = ref(0)
+const expectedKeys = ref(['k', 'u', 'n'])
+const currentIndex = ref(0)
+// 是否显示提示
+const isShowHint = ref(false)
+// 是否显示答案
+const isShowAnswer = ref(false)
+
+// 监听键盘事件
+const checkKeyPress = (event: KeyboardEvent) => {
+  const pressedKey = event.key
+
+  if (pressedKey === expectedKeys.value[currentIndex.value]) {
+    // 当用户按下了期望的键时
+    if (currentIndex.value === expectedKeys.value.length - 1) {
+      // 如果已经按下了最后一个键 "n"，触发相应逻辑
+      isShowAnswer.value = true
+    } else {
+      // 否则，继续下一个期望的键
+      currentIndex.value++
+    }
+  } else {
+    // 如果按下了错误的键，重新开始检查
+    currentIndex.value = 0
+  }
+}
+
+// 提交问题
+const submitAnswer = () => {
+  const userAnswer = userAnswers.value[currentQuestionIndex.value]
+  const correctOption = currentQuestion.value.correctOption
+
+  if (userAnswer === correctOption) {
+    // 回答正确
+    emits('handleVerify', true)
+  } else {
+    // 回答错误
+    errorCounter.value++
+
+    message('Wrong answer!', '回答错误！', 'warn')
+
+    // 前进到下一题
+    nextQuestion()
+
+    // 错误次数大于三次显示提示
+    if (errorCounter.value >= 3) {
+      isShowHint.value = true
+    }
+  }
+}
+
+const nextQuestion = () => {
+  if (currentQuestionIndex.value < questions.length - 1) {
+    currentQuestionIndex.value++
+  } else {
+    message('', '已经没有问题了，杂鱼~♡', 'info')
+  }
+}
+</script>
+
 <template>
   <Teleport to="body" :disabled="props.isShowValidate">
     <Transition name="capture">
-      <div class="mask" v-if="props.isShowValidate">
+      <!-- 遮罩 -->
-        <div class="validate">
-          <div class="text">
       <div
-              class="character"
+        class="mask"
-              v-for="(char, index) in characters"
+        @keydown="checkKeyPress($event)"
-              :key="index"
+        tabindex="0"
-              :style="char.style"
+        v-if="props.isShowValidate"
-              @click="handleCharacterClick(char)"
       >
-              <text>{{ char.value }}</text>
+        <div class="validate">
+          <!-- 标题 -->
+          <div class="title">
+            <!-- <span>{{ `❮` }}</span> -->
+            <h2>请回答下面的问题</h2>
+            <!-- <span>{{ `❯` }}</span> -->
+          </div>
+          <p class="question">{{ currentQuestion.text }}</p>
+
+          <!-- 选择项 -->
+          <div class="select">
+            <label
+              v-for="(option, index) in currentQuestion.options"
+              :key="index"
+            >
+              <input
+                type="radio"
+                v-model="userAnswers[currentQuestionIndex]"
+                :value="option"
+              />
+              {{ option }}
+            </label>
+          </div>
+
+          <!-- 提交按钮 -->
+          <div class="btn">
+            <button @click="submitAnswer">提交</button>
+            <button @click="emits('handleClose', false)">关闭</button>
+          </div>
+
+          <!-- 提示 -->
+          <!-- tabindex 使得该元素可以被页面聚焦 -->
+          <div class="hint-container">
+            <div v-if="isShowHint" class="hint">
+              <div>真是杂鱼呢~♡这都答不出来~杂鱼~♡杂鱼~♡</div>
+              <div>
+                臭杂鱼♡，试试在页面上敲击 <span>kun</span> 呢，杂鱼~♡杂鱼~♡
               </div>
             </div>
-          <div class="msg">
+            <div v-if="isShowAnswer" class="answer">
-            <div v-if="errorCount > 0" class="error">
+              <div>杂鱼~♡杂鱼~♡你就看吧，最后害的还是你自己</div>
-              {{ $tm('AlertInfo.capture.error') }}
+              <a
-            </div>
+                href="http://github.com/KUN1007/kun-galgame-vue"
-            <div class="hint" v-if="!isVerified">
+                target="_blank"
-              {{ $tm('AlertInfo.capture.order') }}
+                rel="noopener noreferrer"
-              {{ characters.map((char) => char.value).join(' ') }}
+              >
-            </div>
+                答案
-            <div class="refresh" @click="resetCharacters">
+              </a>
-              {{ $tm('AlertInfo.capture.refresh') }}
             </div>
           </div>
         </div>
@@ -32,103 +157,6 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-
-const containerRef = ref<HTMLDivElement | null>(null)
-const characters = ref(generateRandomCharacters())
-const clickedCharacters = ref('')
-const isVerified = ref(false)
-const errorCount = ref(0)
-
-const props = defineProps(['isShowValidate'])
-const emits = defineEmits(['validate'])
-
-interface Character {
-  value: string
-  style: {
-    top: string
-    left: string
-  }
-}
-
-emits('validate', false)
-
-// 获得随机字符
-function generateRandomCharacters(): Character[] {
-  const chars = t('AlertInfo.capture.text')
-  const randomChars: Character[] = []
-
-  // 创建一个 Set 集合用于去重
-  const charSet = new Set<string>()
-
-  while (charSet.size < 3) {
-    const randomIndex = Math.floor(Math.random() * chars.length)
-    const char = chars[randomIndex]
-
-    // 如果字符不在集合中，则添加到集合和结果数组中
-    if (!charSet.has(char)) {
-      charSet.add(char)
-      const character: Character = {
-        value: char,
-        style: {
-          top: `${getRandomCoordinate()}px`,
-          left: `${getRandomCoordinate()}px`,
-        },
-      }
-      randomChars.push(character)
-    }
-  }
-
-  return randomChars
-}
-
-// 获取字符的随机位置
-function getRandomCoordinate(): number {
-  const minCoordinate = 50
-  const maxCoordinate = 150
-  return (
-    Math.floor(Math.random() * (maxCoordinate - minCoordinate + 1)) +
-    minCoordinate
-  )
-}
-
-// 处理字符被点击
-const handleCharacterClick = (char: Character): Promise<boolean> => {
-  return new Promise<boolean>((resolve, reject) => {
-    clickedCharacters.value += char.value
-    if (
-      clickedCharacters.value.length === 3 &&
-      clickedCharacters.value === characters.value.map((c) => c.value).join('')
-    ) {
-      isVerified.value = true
-      emits('validate', true)
-    } else if (clickedCharacters.value.length >= 3) {
-      errorCount.value += 1
-      resetCharacters()
-      emits('validate', false)
-    }
-  })
-}
-
-// 重置字符，防止位置重合和 .
-function resetCharacters() {
-  characters.value = generateRandomCharacters()
-  clickedCharacters.value = ''
-  isVerified.value = false
-}
-
-onMounted(() => {
-  const container = containerRef.value
-  if (container) {
-    container.style.width = '300px'
-    container.style.height = '300px'
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .mask {
   position: fixed;
@@ -148,39 +176,90 @@ onMounted(() => {
   width: 300px;
   height: 300px;
   margin: auto;
-  padding: 20px 30px;
+  padding: 17px;
   background-color: var(--kungalgame-trans-white-2);
   border: 1px solid var(--kungalgame-blue-1);
-  border-radius: 2px;
+  border-radius: 5px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
   transition: all 0.3s ease;
   display: flex;
+  flex-direction: column;
 }
 
-.text {
+.title {
-  cursor: pointer;
+  display: flex;
-  position: absolute;
+  justify-content: center;
-  font-size: 30px;
+  align-items: center;
-  transform: translateX(-30px);
+  margin-bottom: 17px;
-}
-
-.character {
-  position: relative;
-}
-
-.refresh {
-  width: 64px;
   color: var(--kungalgame-blue-4);
-  margin-top: 20px;
+}
-  cursor: pointer;
+
-  border-bottom: 2px solid var(--kungalgame-trans-white-9);
+.question {
+  font-size: 17px;
+  margin-bottom: 20px;
+  font-style: oblique;
+}
+
+.select {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  margin-bottom: 20px;
+}
+
+.btn {
+  display: flex;
+  justify-content: space-around;
+
+  button {
+    width: 77px;
+    padding: 5px;
+    color: var(--kungalgame-blue-4);
+    border: 1px solid var(--kungalgame-blue-4);
+    border-radius: 5px;
+    background-color: var(--kungalgame-trans-white-9);
+    transition: all 0.2s;
     &:hover {
-    border-bottom: 2px solid var(--kungalgame-blue-4);
+      color: var(--kungalgame-white);
+      background-color: var(--kungalgame-blue-4);
+    }
   }
 }
 
-.msg {
+.hint-container {
-  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: end;
+  font-style: oblique;
+  .hint {
+    width: 100%;
+    font-size: 10px;
+    span {
+      color: var(--kungalgame-pink-4);
+      font-weight: bold;
+    }
+  }
+  .answer {
+    width: 100%;
+    div {
+      font-size: 10px;
+    }
+    a {
+      color: var(--kungalgame-blue-5);
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+/* 激活后的样式 */
+.active {
+  transition: all 0.2s;
+  border: 2px solid var(--kungalgame-pink-3);
 }
 
 .capture-enter-from {
@@ -197,3 +276,4 @@ onMounted(() => {
   transform: scale(1.1);
 }
 </style>
+./questionsCN

src/components/capture/questionsCN.ts

@@ -0,0 +1,58 @@
+import { reactive } from 'vue'
+
+interface Question {
+  id: number
+  text: string
+  options: string[]
+  correctOption: string
+}
+
+export const questionsCN: Question[] = reactive([
+  {
+    id: 1,
+    text: '下列哪个不是《千恋万花》中的角色？',
+    options: ['丛雨', '芦花', '芳乃', '宁宁'],
+    correctOption: '宁宁',
+  },
+  {
+    id: 2,
+    text: '《夏日口袋》中紬文德斯的发色是？',
+    options: ['红色', '金色', '紫色', '白色'],
+    correctOption: '金色',
+  },
+  {
+    id: 3,
+    text: '`Galgame`被称为？',
+    options: ['Gay game', '美少女游戏', '乙女游戏', '啊这可海星'],
+    correctOption: '美少女游戏',
+  },
+  {
+    id: 4,
+    text: '下列哪个游戏不属于五彩斑斓系列？',
+    options: [
+      '五彩斑斓的世界',
+      '美少女游戏',
+      '五彩斑斓的曙光',
+      '五彩斑斓的未来',
+    ],
+    correctOption: '五彩斑斓的未来',
+  },
+  {
+    id: 5,
+    text: '以下哪部作品中男主没有女装？',
+    options: ['近月少女的礼仪', '少女领域', '美少女万华镜1', '我们没有翅膀'],
+    correctOption: '美少女万华镜1',
+  },
+  {
+    id: 6,
+    text: '以下哪个作品是《SMEE》制作的?',
+    options: ['Friend to Lover', 'Dal Segno', 'Eden*', 'LOOPERS'],
+    correctOption: 'Friend to Lover',
+  },
+  {
+    id: 7,
+    text: '鲲可爱吗？',
+    options: ['可爱！', '很可爱！', '最可爱了！', '总之就是非常可爱！'],
+    correctOption: '总之就是非常可爱！',
+  },
+])

src/components/capture/questionsEN.ts

@@ -0,0 +1,68 @@
+import { reactive } from 'vue'
+
+interface Question {
+  id: number
+  text: string
+  options: string[]
+  correctOption: string
+}
+
+export const questionsEN: Question[] = reactive([
+  {
+    id: 1,
+    text: 'Which one of the following is not a character in "Thousand Love Ten Thousand Flowers"?',
+    options: ['Congyu', 'Luhua', 'Fangna', 'Ningning'],
+    correctOption: 'Ningning',
+  },
+  {
+    id: 2,
+    text: 'What is the hair color of Tsudumeandesu in "Summer Pockets"?',
+    options: ['Red', 'Gold', 'Purple', 'White'],
+    correctOption: 'Gold',
+  },
+  {
+    id: 3,
+    text: 'What is "Galgame" known as?',
+    options: [
+      'Gay game',
+      'Beautiful girl game',
+      'Otome game',
+      'Ah, this is a starfish',
+    ],
+    correctOption: 'Beautiful girl game',
+  },
+  {
+    id: 4,
+    text: 'Which of the following games does not belong to the "Colorful World" series?',
+    options: [
+      'Colorful World',
+      'Beautiful Girl Game',
+      'Colorful Dawn',
+      'Colorful Future',
+    ],
+    correctOption: 'Colorful Future',
+  },
+  {
+    id: 5,
+    text: 'In which of the following works does the male protagonist not cross-dress?',
+    options: [
+      'Closer to the Moon Girl',
+      'Girl Territory',
+      'Beautiful Girl Kaleidoscope 1',
+      'We Have No Wings',
+    ],
+    correctOption: 'Beautiful Girl Kaleidoscope 1',
+  },
+  {
+    id: 6,
+    text: 'Which of the following works was produced by "SMEE"?',
+    options: ['Friend to Lover', 'Dal Segno', 'Eden*', 'LOOPERS'],
+    correctOption: 'Friend to Lover',
+  },
+  {
+    id: 7,
+    text: 'Is Kun cute?',
+    options: ['Cute!', 'Very cute!', 'Cutest!', 'In short, extremely cute!'],
+    correctOption: 'In short, extremely cute!',
+  },
+])

src/views/login/components/Login.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, defineAsyncComponent } from 'vue'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { useRouter } from 'vue-router'
 // 使用全局通知
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
 // 导入人机验证组件
-import Capture from '@/components/capture/Capture.vue'
+const Capture = defineAsyncComponent(
+  () => import('@/components/capture/Capture.vue')
+)
 
 // 导入验证表单是否合法的函数
 import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
@@ -101,7 +103,12 @@ const handleLogin = () => {
 <template>
   <!-- 登陆 -->
   <div class="login">
-    <Capture @validate="handleVerify" :isShowValidate="isShowValidate" />
+    <!-- 人机验证 -->
+    <Capture
+      @handleVerify="handleVerify"
+      @handleClose="isShowValidate = false"
+      :isShowValidate="isShowValidate"
+    />
     <div class="form">
       <h2 class="title">{{ $tm('login.loginTitle') }}</h2>
       <input

src/views/login/components/Register.vue

@@ -137,7 +137,11 @@ const handleRegister = () => {
   <!-- 注册 -->
   <div class="register">
     <!-- 人机验证 -->
-    <Capture @validate="handleVerify" :isShowValidate="isShowValidate" />
+    <Capture
+      @handleVerify="handleVerify"
+      @handleClose="isShowValidate = false"
+      :isShowValidate="isShowValidate"
+    />
 
     <!-- 注册表单 -->
     <div class="form">