opt: shiny system

src/i18n/locales/text/en-US.ts

@@ -7,13 +7,13 @@ const enUSText = {
   result: {
     completed: 'Assessment Complete',
     restart: 'Restart Quiz',
+    shinyRefresh: 'Roll for Shiny!',
     portraitSource: 'Artwork source: Roco Kingdom World BiliBili WIKI',
-    shinyHint: 'Tip: refresh multiple times for a chance to encounter a shiny spirit (10% rate).',
     spiritPartnerLabel: 'Spirit Partner',
     personality: 'Nature',
     habitat: 'Habitat',
     viewWiki: 'View Wiki',
-    shareResultImage: 'Share Result Image',
+    shareResultImage: 'Share Result',
     shareLink: 'Share Link',
     downloadImage: 'Download Image',
     downloadSoon: 'Image download will be available soon.',
@@ -28,12 +28,6 @@ const enUSText = {
     shareText: 'My spirit partner in Roco Kingdom is {petName}! Try it here:',
     personalities: ['Adamant', 'Bold', 'Calm', 'Jolly', 'Relaxed', 'Careful', 'Brave', 'Gentle'],
   },
-  fallbackPet: {
-    name: 'Starsea Sentinel',
-    title: 'Default Personality Mirror',
-    description: 'Fallback result data for exceptional cases only.',
-    habitat: 'Starsea Nexus',
-  },
   pets: {
     INTJ: {
       name: 'Night Owl',

src/i18n/locales/text/zh-CN.ts

@@ -7,13 +7,13 @@ const zhCNText = {
   result: {
     completed: '鉴定完成',
     restart: '重新测试',
+    shinyRefresh: '我要刷异色！',
     portraitSource: '立绘来源：洛克王国世界 BiliBili WIKI 图鉴',
-    shinyHint: '提示：多次刷新结果，有机会遇到异色精灵（10% 概率）',
     spiritPartnerLabel: '本命精灵',
     personality: '性格',
     habitat: '栖息地',
     viewWiki: '查看 Wiki 资料',
-    shareResultImage: '分享结果图片',
+    shareResultImage: '分享结果',
     shareLink: '分享链接',
     downloadImage: '下载图片',
     downloadSoon: '下载图片功能即将上线',
@@ -27,12 +27,6 @@ const zhCNText = {
     shareText: '我在洛克王国的本命精灵是 {petName}！你也快来试试吧：',
     personalities: ['固执', '大胆', '冷静', '开朗', '悠闲', '慎重', '勇敢', '温和'],
   },
-  fallbackPet: {
-    name: '星海守望兽',
-    title: '默认人格镜像',
-    description: '默认结果数据，仅用于异常兜底展示。',
-    habitat: '星海中枢',
-  },
   pets: {
     INTJ: {
       name: '夜枭',

src/router/index.ts

@@ -1,8 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { useQuizStore } from '@/stores/quiz'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',

src/views/result/Overview.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { Info, RefreshCcw, RotateCw, Star } from 'lucide-vue-next'
+import { onBeforeRouteLeave, useRouter } from 'vue-router'
+import { Info, RefreshCcw, Sparkles, Star } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
-import { useQuizStore } from '@/stores/quiz.ts'
+import { useQuizStore } from '@/stores/quiz'
 import ResultShareCard from '@/views/result/_components/ResultShareCard.vue'
 import ShareResultDialog from '@/views/result/_components/ShareResultDialog.vue'
 
@@ -38,41 +38,47 @@ const refreshPage = (): void => {
   if (typeof window === 'undefined') {
     return
   }
-  window.location.reload()
+  router.go(0)
 }
 
 onMounted(() => {
   trackResultVisit()
 })
+
+onBeforeRouteLeave((to) => {
+  if (to.name === 'quiz' && quizStore.currentIndex === quizStore.totalQuestions) {
+    quizStore.previousQuestion()
+  }
+  return true
+})
 </script>
 
 <template>
   <main
-    class="bg-light flex min-h-dvh flex-col items-center justify-center"
+    class="bg-light flex min-h-dvh flex-col items-center justify-center px-2.5 py-3 sm:px-4 sm:py-5 md:px-6 md:py-8"
   >
     <section
-      class="bg-light md:border md:border-light md:shadow-warm mx-auto w-full max-w-5xl space-y-6 rounded-3xl p-4 backdrop-blur-xl sm:space-y-7 sm:p-5 md:p-8"
+      class="bg-light mx-auto w-full max-w-5xl space-y-4 rounded-3xl border border-[#cfc6b4] p-3.5 backdrop-blur-xl sm:space-y-6 sm:p-6 md:space-y-8 md:p-8 md:shadow-warm"
     >
-      <header class="flex flex-wrap items-center justify-between gap-3">
+      <header class="flex flex-wrap items-start justify-between gap-3 sm:items-center">
         <div>
-          <p class="mt-1 text-2xl font-extrabold tracking-[0.16em] text-[#1f1f1f] md:tracking-[0.2em]">
+          <p class="text-2xl font-extrabold tracking-[0.16em] text-[#1f1f1f] md:tracking-[0.2em]">
             {{ t('result.completed') }}
           </p>
         </div>
-        <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+        <div class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
           <Button
             type="button"
-            variant="outline"
-            class="border-light bg-light text-dark border-dark-hover bg-light-hover w-full rounded-xl text-sm sm:w-auto"
+            class="h-11 w-full rounded-xl border border-[#d28c00] bg-gradient-to-r from-[#ffd64d] to-[#ff9f1c] px-4 text-sm font-semibold text-[#4a2a00] shadow-[0_8px_20px_rgba(255,166,0,0.35)] transition hover:from-[#ffe07a] hover:to-[#ffb347] sm:w-auto sm:px-5"
             @click="refreshPage"
           >
-            <RotateCw class="h-4 w-4" />
-            刷新页面
+            <Sparkles class="h-4 w-4" />
+            {{ t('result.shinyRefresh') }}
           </Button>
           <Button
             type="button"
             variant="outline"
-            class="border-light bg-light text-dark border-dark-hover bg-light-hover w-full rounded-xl text-sm sm:w-auto"
+            class="border-light bg-light text-dark border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm sm:w-auto sm:px-5"
             @click="restart"
           >
             <RefreshCcw class="h-4 w-4" />
@@ -88,12 +94,12 @@ onMounted(() => {
       <Separator class="bg-[#d8d1c3]" />
 
       <div class="w-full">
-        <div class="grid w-full gap-3 sm:grid-cols-2">
+        <div class="grid w-full gap-2.5 sm:grid-cols-2 sm:gap-3">
           <ShareResultDialog />
           <Button
             as-child
             variant="outline"
-            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition"
           >
             <a
               :href="repositoryUrl"
@@ -108,7 +114,7 @@ onMounted(() => {
       </div>
     </section>
 
-    <p class="flex flex-row gap-1 mt-4 items-center justify-center text-center text-sm text-gray-500">
+    <p class="mt-4 flex flex-row items-center justify-center gap-1 px-2 text-center text-sm text-gray-500 sm:mt-5">
       <Info class="h-4 w-4" />
       {{ t('result.entertainmentNotice') }}
     </p>

src/views/result/_components/ResultShareCard.vue

@@ -45,12 +45,6 @@ const spiritTitleText = computed<string>(() => `${t('result.spiritPartnerLabel')
         class="mt-2 text-center text-xs text-[#3b3832]">
         {{ t('result.portraitSource') }}
       </p>
-      <p
-        v-if="!props.exportMode"
-        class="mt-1 text-center text-xs text-[#3b3832]"
-      >
-        {{ t('result.shinyHint') }}
-      </p>
     </aside>
 
     <article

src/views/result/_components/ShareResultDialog.vue

@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n'
 
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { useQuizStore } from '@/stores/quiz.ts'
+import { useQuizStore } from '@/stores/quiz'
 
 import ResultShareCard from './ResultShareCard.vue'
 import { downloadResultShareCardImage, RESULT_SHARE_CARD_EXPORT_ID } from './utils'
@@ -48,11 +48,11 @@ const downloadShareImage = async (): Promise<void> => {
     <ResultShareCard :export-mode="true" />
   </div>
 
-  <div class="grid w-full gap-3 md:hidden">
+  <div class="grid w-full gap-2.5 md:hidden sm:gap-3">
     <Button
       type="button"
       variant="outline"
-      class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+      class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition"
       @click="downloadShareImage"
     >
       <Download class="h-4 w-4" />
@@ -61,7 +61,7 @@ const downloadShareImage = async (): Promise<void> => {
     <Button
       type="button"
       variant="outline"
-      class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+      class="border-light bg-light text-dark border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition active:scale-[0.98]"
       @click="shareLink"
     >
       <Copy class="h-4 w-4" />
@@ -75,7 +75,7 @@ const downloadShareImage = async (): Promise<void> => {
         <Button
           type="button"
           variant="outline"
-          class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+          class="border-light bg-light text-dark border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition active:scale-[0.98]"
         >
           <Copy class="h-4 w-4" />
           {{ t('result.shareResultImage') }}
@@ -100,7 +100,7 @@ const downloadShareImage = async (): Promise<void> => {
           <Button
             type="button"
             variant="outline"
-            class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+            class="border-light bg-light text-dark border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition active:scale-[0.98]"
             @click="shareLink"
           >
             <Copy class="h-4 w-4" />
@@ -109,7 +109,7 @@ const downloadShareImage = async (): Promise<void> => {
           <Button
             type="button"
             variant="outline"
-            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-11 w-full rounded-xl border border-[#cfc6b4] px-4 text-sm transition"
             @click="downloadShareImage"
           >
             <Download class="h-4 w-4" />