Merge pull request #77 from LOG1997/feature-2025-0920

Feature 2025 0920

package.json

@@ -17,70 +17,71 @@
     },
     "dependencies": {
         "@tweenjs/tween.js": "^23.1.2",
-        "@vueuse/core": "^11.3.0",
+        "@vueuse/core": "^13.9.0",
         "axios": "^1.7.8",
         "canvas-confetti": "^1.9.3",
         "dayjs": "^1.11.13",
         "github-markdown-css": "^5.8.0",
         "localforage": "^1.10.0",
         "markdown-it": "^14.1.0",
-        "pinia": "^2.2.6",
+        "pinia": "^3.0.3",
         "pinia-plugin-persist": "^1.0.0",
         "sparticles": "^1.3.1",
         "three": "^0.166.0",
         "three-css3d": "^1.0.6",
         "vue": "^3.5.13",
         "vue-dompurify-html": "^5.2.0",
-        "vue-i18n": "^10.0.4",
+        "vue-i18n": "^11.1.12",
         "vue-router": "^4.5.0",
         "vue-toast-notification": "^3",
         "vue3-colorpicker": "^2.3.0",
         "xlsx": "^0.18.5",
-        "zod": "^3.23.8"
+        "zod": "^4.1.11"
     },
     "devDependencies": {
-        "@antfu/eslint-config": "^3.9.2",
+        "@antfu/eslint-config": "^5.4.1",
         "@eslint/eslintrc": "^3.2.0",
         "@eslint/js": "^9.15.0",
         "@iconify-json/ep": "^1.2.1",
         "@iconify-json/fluent": "^1.2.8",
         "@tailwindcss/typography": "^0.5.15",
+        "@tailwindcss/vite": "^4.1.13",
         "@testing-library/vue": "^8.1.0",
         "@types/canvas-confetti": "^1.6.4",
         "@types/markdown-it": "^14.1.2",
-        "@types/node": "^22.9.4",
+        "@types/node": "^24.5.2",
         "@types/three": "^0.166.0",
         "@typescript-eslint/eslint-plugin": "^8.16.0",
         "@typescript-eslint/parser": "^8.16.0",
-        "@vitejs/plugin-legacy": "^6.0.0",
+        "@vitejs/plugin-legacy": "^7.2.1",
-        "@vitejs/plugin-vue": "^5.2.0",
+        "@vitejs/plugin-vue": "^6.0.1",
-        "@vitest/ui": "^2.1.5",
+        "@vitest/ui": "^3.2.4",
         "@vue/test-utils": "^2.4.6",
         "autoprefixer": "^10.4.20",
-        "daisyui": "^4.12.14",
+        "daisyui": "^5.1.13",
         "eslint": "^9.15.0",
-        "eslint-plugin-vue": "^9.31.0",
+        "eslint-plugin-vue": "^10.4.0",
-        "globals": "^15.12.0",
+        "globals": "^16.4.0",
-        "happy-dom": "^15.11.6",
+        "happy-dom": "^18.0.1",
         "husky": "^9.1.7",
-        "jsdom": "^25.0.1",
+        "jsdom": "^27.0.0",
         "path": "^0.12.7",
         "postcss": "^8.4.49",
-        "rollup-plugin-visualizer": "^5.12.0",
+        "rollup-plugin-visualizer": "^6.0.3",
         "sass": "^1.81.0",
         "sass-loader": "^16.0.3",
-        "tailwindcss": "^3.4.15",
+        "tailwindcss": "^4.1.13",
         "terser": "^5.36.0",
         "typescript": "5.5.3",
-        "unplugin-auto-import": "^0.18.5",
+        "unplugin-auto-import": "^20.1.0",
-        "unplugin-icons": "^0.20.1",
+        "unplugin-icons": "^22.3.0",
-        "unplugin-vue-components": "^0.27.4",
+        "unplugin-vue-components": "^29.1.0",
-        "vite": "^5.4.11",
+        "vite": "^7.1.6",
         "vite-plugin-compression": "^0.5.1",
-        "vite-plugin-inspect": "^0.8.8",
+        "vite-plugin-inspect": "^11.3.3",
         "vite-plugin-svg-icons": "^2.0.1",
-        "vite-plugin-vue-devtools": "^7.6.4",
+        "vite-plugin-vue-devtools": "^8.0.2",
-        "vitest": "^2.1.5",
+        "vitest": "^3.2.4",
-        "vue-tsc": "^2.1.10"
+        "vue-tsc": "^3.0.7"
     }
 }

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    }
-  }

src/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

src/constant/theme.ts

@@ -0,0 +1,38 @@
+export const daisyuiThemes = [
+    'valentine',
+    'halloween',
+    'cmyk',
+    'winter',
+    'corporate',
+    'fantasy',
+    'aqua',
+    'pastel',
+    'lemonade',
+    'garden',
+    'silk',
+    'black',
+    'coffee',
+    'wireframe',
+    'caramellatte',
+    'acid',
+    'cyberpunk',
+    'nord',
+    'bumblebee',
+    'night',
+    'dracula',
+    'synthwave',
+    'light',
+    'dark',
+    'forest',
+    'emerald',
+    'business',
+    'cupcake',
+    'autumn',
+    'abyss',
+    'dim',
+    'lofi',
+    'sunset',
+    'luxury',
+    'retro',
+
+]

src/layout/Footer/index.vue

@@ -7,7 +7,7 @@ function skip(url: string) {
 </script>
 
 <template>
-  <div class="footer-container">
+  <div class="footer-container h-[280px]">
     <ul class="flex justify-center">
       <li
         v-for="item in footerList.data"

src/style.css

@@ -1,6 +1,10 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@plugin "daisyui" {
+    themes: all;
+}
+
+/* @plugin "@tailwindcss/typography" */
 
 body,
 html {

src/views/Config/Global/FaceConfig.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import i18n, { languageList } from '@/locales/i18n'
+import { daisyuiThemes } from '@/constant/theme'
 
+import i18n, { languageList } from '@/locales/i18n'
 import useStore from '@/store'
 import { themeChange } from '@/utils'
 import { isHex, isRgbOrRgba } from '@/utils/color'
-import daisyuiThemes from 'daisyui/src/theming/themes'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { ColorPicker } from 'vue3-colorpicker'
@@ -17,7 +17,7 @@ const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const personConfig = useStore().personConfig
 const prizeConfig = useStore().prizeConfig
-const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getImageList: imageList, getIsShowAvatar: isShowAvatar
+const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getImageList: imageList, getIsShowAvatar: isShowAvatar,
 } = storeToRefs(globalConfig)
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()
@@ -38,7 +38,7 @@ const languageValue = ref(structuredClone(userLanguage.value))
 const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
 const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
 const patternColorValue = ref(structuredClone(patternColor.value))
-const themeList = ref(Object.keys(daisyuiThemes))
+const themeList = ref(daisyuiThemes)
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const backgroundImageValue = ref(backgroundImage.value)
 const formData = ref({
@@ -49,8 +49,9 @@ const formErr = ref({
 })
 const schema = zod.object({
   rowCount: zod.number({
-    required_error: i18n.global.t('error.require'),
+    error: i18n.global.t('error.require'),
-    invalid_type_error: i18n.global.t('error.requireNumber'),
+    // required_error: i18n.global.t('error.require'),
+    // invalid_type_error: i18n.global.t('error.requireNumber'),
   })
     .min(1, i18n.global.t('error.minNumber1'))
     .max(100, i18n.global.t('error.maxNumber100')),
@@ -186,14 +187,14 @@ onMounted(() => {
       </div>
     </div>
   </dialog>
-  <div>
+  <div class="flex flex-col gap-4">
     <h2>{{ t('viewTitle.globalSetting') }}</h2>
     <div class="mb-8">
       <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
         {{ t('button.resetAllData') }}
       </button>
     </div>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+    <label class="flex flex-row items-center w-full gap-24 form-control">
       <div class="">
         <div class="label">
           <span class="label-text">{{ t('table.title') }}</span>
@@ -204,7 +205,7 @@ onMounted(() => {
         >
       </div>
     </label>
-    <label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
+    <label class="flex flex-row items-center w-full gap-24 form-control">
       <div class="">
         <div class="label">
           <span class="label-text">{{ t('table.columnNumber') }}</span>
@@ -261,26 +262,26 @@ onMounted(() => {
         >{{ item.name }}</option>
       </select>
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.cardColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.winnerColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
     </label>
 
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.textColor') }}</span>
       </div>
       <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
     </label>
-    <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
+    <label class="flex flex-row w-full max-w-xs gap-10 form-control">
       <div>
         <div class="label">
           <span class="label-text">{{ t('table.cardWidth') }}</span>
@@ -300,7 +301,7 @@ onMounted(() => {
         >
       </div>
     </label>
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs form-control">
       <div class="label">
         <span class="label-text">{{ t('table.textSize') }}</span>
       </div>
@@ -309,7 +310,7 @@ onMounted(() => {
         class="w-full max-w-xs input input-bordered"
       >
     </label>
-    <label class="w-full max-w-xs form-control">
+    <label class="w-full max-w-xs flex flex-col gap-1 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.highlightColor') }}</span>
       </div>
@@ -328,7 +329,7 @@ onMounted(() => {
         </div>
       </div>
     </label>
-    <div class="flex w-full h-24 gap-3 m-0">
+    <div class="flex w-full gap-3 m-0">
       <button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
         <span>{{ t('button.clearPattern') }}</span>
       </button>
@@ -339,22 +340,24 @@ onMounted(() => {
       </div>
     </div>
 
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs flex items-center gap-2 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.alwaysDisplay') }}</span>
       </div>
       <input
-        type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+        type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border-1"
         @change="isShowPrizeListValue = !isShowPrizeListValue"
       >
     </label>
 
-    <label class="w-full max-w-xs mb-10 form-control">
+    <label class="w-full max-w-xs flex items-center gap-2 mb-10 form-control">
       <div class="label">
         <span class="label-text">{{ t('table.avatarDisplay') }}</span>
       </div>
-        <input type="checkbox" :checked="isShowAvatarValue" @change="isShowAvatarValue = !isShowAvatarValue"
+      <input
-          class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+        type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border-1"
+        @change="isShowAvatarValue = !isShowAvatarValue"
+      >
     </label>
   </div>
 </template>

src/views/Config/index.vue

@@ -67,7 +67,7 @@ function skip(path: string) {
     </ul>
     <router-view class="flex-1 mt-5" />
   </div>
-  <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
+  <footer class="p-10 rounded footer footer-center bg-base-200 h-[280px] flex flex-col gap-4 text-base-content">
     <nav class="grid grid-flow-col gap-4">
       <a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ t('footer.self-reflection') }}</a>
     </nav>

src/views/Home/PrizeList.vue

@@ -248,7 +248,7 @@ onMounted(() => {
             >
               <div
                 v-if="item.isShow"
-                class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100"
+                class="relative flex flex-row items-center justify-between w-64 h-20 px-3 gap-6 shadow-xl card bg-base-100"
               >
                 <div
                   v-if="item.isUsed"
@@ -261,10 +261,10 @@ onMounted(() => {
                     class="object-cover h-full rounded-xl"
                   >
                 </figure>
-                <div class="items-center p-0 text-center card-body">
+                <div class="items-center p-0 card-body">
-                  <div class="tooltip tooltip-left" :data-tip="item.name">
+                  <div class="tooltip tooltip-left w-full pl-1" :data-tip="item.name">
                     <h2
-                      class="w-24 p-0 m-0 overflow-hidden text-center card-title whitespace-nowrap text-ellipsis"
+                      class="w-24 p-0 m-0 overflow-hidden card-title whitespace-nowrap text-ellipsis"
                     >
                       {{ item.name }}
                     </h2>
@@ -274,7 +274,7 @@ onMounted(() => {
                       item.count }}
                   </p>
                   <progress
-                    class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount"
+                    class="w-full h-6 progress bg-[#52545b] progress-primary" :value="item.isUsedCount"
                     :max="item.count"
                   />
                   <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->

tailwind.config.js

@@ -1,23 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: 'class',
-    corePlugins: {
-        preflight: false
-    },
-    theme: {
-        
-      },
-    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-    plugins: [require('@tailwindcss/typography'), require('daisyui')],
-    daisyui: {
-        themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-        darkTheme: '', // name of one of the included themes for dark mode
-        base: true, // applies background color and foreground color for root element by default
-        styled: true, // include daisyUI colors and design decisions for all components
-        utils: true, // adds responsive and modifier utility classes
-        prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
-        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
-        themeRoot: ':root', // The element that receives theme color CSS variables
-    },
-};
-

vite.config.ts

@@ -2,6 +2,7 @@
 
 import { createRequire } from 'node:module'
 import path from 'node:path'
+import tailwindcss from '@tailwindcss/vite'
 import legacy from '@vitejs/plugin-legacy'
 import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
@@ -26,6 +27,7 @@ export default defineConfig(({ mode }) => {
         base: mode === 'file' ? './' : '/log-lottery/',
         plugins: [
             vue(),
+            tailwindcss(),
             mode === 'file'
                 ? legacy({
                     additionalLegacyPolyfills: ['regenerator-runtime/runtime'],