merge: fix: fix ssr teleports and i18n #26

server-dev.ts

@@ -43,8 +43,8 @@ const injectTeleports = (
     appType: 'custom',
   })
 
-  // 解析accept-language
+  // Parse accept-language
-  function parseAcceptLanguage(acceptLanguage: string) {
+  const parseAcceptLanguage = (acceptLanguage: string) => {
     const languages = acceptLanguage.split(',')
     const language = languages[0]
     const country = language.split('-')[1]

src/components/alert/loli.ts

@@ -0,0 +1,25 @@
+// Function to get a random number
+import { randomNum } from '@/utils/random'
+// Get a local image file; note that you cannot use @ as the base path here, you can only use ..
+const getAssetsFile = (name: string) => {
+  return new URL(`../../assets/images/alert/${name}.webp`, import.meta.url).href
+}
+
+const number = randomNum(0, 2)
+
+let loli = ''
+let name = ''
+
+if (number === 0) {
+  // Actually, her full name is: アーデルハイト・フォン・ベルクシュトラーセ
+  name = 'あーちゃん'
+  loli = getAssetsFile(name)
+} else if (number === 1) {
+  name = 'こじかひわ'
+  loli = getAssetsFile(name)
+} else {
+  name = '雪々'
+  loli = getAssetsFile(name)
+}
+
+export default { loli, name }

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,63 @@
+import { reactive } from 'vue'
+
+export 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 "Senren * Banka"?',
+    options: ['Murasame', 'Roka', 'Yoshino', 'Nanami'],
+    correctOption: 'Nanami',
+  },
+  {
+    id: 2,
+    text: 'What is the hair color of Tsumugi Wenders in "	Summer Pockets REFLECTION BLUE"?',
+    options: ['Red', 'Gold', 'Purple', 'White'],
+    correctOption: 'Gold',
+  },
+  {
+    id: 3,
+    text: 'What is "Visual Novel" known as?',
+    options: ['Gay game', 'Galgame', 'Otome game', 'Ah, this is a starfish'],
+    correctOption: 'Galgame',
+  },
+  {
+    id: 4,
+    text: 'Which of the following games does not belong to the "Irotoridori" series?',
+    options: [
+      'Irotoridori no Sekai',
+      'Irotoridori no Hikari',
+      'Akai Hitomi ni Utsuru Sekai',
+      'Irotoridori no Mirai',
+    ],
+    correctOption: 'Irotoridori no Mirai',
+  },
+  {
+    id: 5,
+    text: 'In which of the following games does the male protagonist not cross-dress?',
+    options: [
+      'Tsuki ni Yorisou Otome no Sahou',
+      'Otome * Domain',
+      'Bishoujo Mangekyou 1',
+      'Ore-tachi ni Tsubasa wa Nai',
+    ],
+    correctOption: 'Bishoujo Mangekyou 1',
+  },
+  {
+    id: 6,
+    text: 'Which of the following games 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/entry-server.ts

@@ -65,15 +65,16 @@ export const render = async (
   const renderedPinia = JSON.stringify(pinia.state.value)
 
   // i18n
-  app.use(createI18n(
+  app.use(createI18n(language.includes('zh') ? 'zh' : 'en'))
-    language.includes('zh') ? 'zh' : 'en',
-  ))
 
-  const renderCtx: { modules?: string[] } = {}
+  const renderCtx: Record<string, string[] | {}> = {}
 
   const renderedHtml = await renderToString(app, renderCtx)
 
-  const renderedLinks = renderPreloadLinks(renderCtx.modules, manifest)
+  const renderedLinks = renderPreloadLinks(
+    renderCtx.modules as string[],
+    manifest
+  )
 
   const renderedTeleports = renderCtx.teleports as {
     '#teleported': string

src/language/i18n.ts

@@ -6,7 +6,8 @@ import { KUNGalgameLanguage } from '@/utils/getDefaultEnv'
 import zh from './zh'
 import en from './en'
 
-const createI18n = (language?: string) => _createI18n({
+const createI18n = (language?: string) =>
+  _createI18n({
     locale: language || KUNGalgameLanguage,
     legacy: false,
     messages: {

src/router/guard/permission.ts

@@ -0,0 +1,60 @@
+// Import rooter
+import { Router } from 'vue-router'
+import { whiteList } from '../router'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+import NProgress from 'nprogress'
+import '@/styles/nprogress/nprogress.scss'
+
+// Do not display the NProgress spinner
+NProgress.configure({ showSpinner: false })
+
+export const createPermission = (router: Router) => {
+  router.beforeEach(async (to, from) => {
+    NProgress.start()
+
+    const token = useKUNGalgameUserStore().getToken()
+    const { uid, roles } = storeToRefs(useKUNGalgameUserStore())
+
+    const isInWhitelist = whiteList.includes(to.name as string)
+    // Get the required permissions for the target route
+    const requiredPermissions = to.meta.permission
+      ? (to.meta.permission as number[])
+      : [1, 2, 3, 4]
+
+    if (!token && !isInWhitelist) {
+      NProgress.done()
+      return { name: 'Login' }
+    }
+
+    // Authentication is required
+    const currentPageUid = parseInt(to.params.uid as string)
+
+    const currentUserRoles = () => {
+      if (currentPageUid === uid.value) {
+        return 4
+      } else {
+        return roles.value
+      }
+    }
+
+    if (!requiredPermissions.includes(currentUserRoles())) {
+      if (to.matched[0].path === '/kungalgamer') {
+        return { name: 'KUNGalgamerInfo' }
+      }
+    }
+
+    if (
+      !requiredPermissions.includes(currentUserRoles()) &&
+      to.name === '403'
+    ) {
+      return { name: '403' }
+    }
+  })
+
+  // Finish NProgress
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}