delete auto generated files

components.d.ts

@@ -1,39 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    CDialog: typeof import('./src/components/UI/CDialog.vue')['default']
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElText: typeof import('element-plus/es')['ElText']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
-}

src/components/DynamicBackground.vue

@@ -0,0 +1,103 @@
+<style scoped>
+.container {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(135deg,
+            #ffe8f3,
+            #d9f3ff);
+    /* Soft pastel gradient background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.wrapper {
+    position: relative;
+    width: 100%;
+    /* Fill the entire screen */
+    height: 100%;
+    overflow: hidden;
+    background: radial-gradient(circle,
+            rgba(255, 255, 255, 0.2),
+            rgba(0, 0, 0, 0.1));
+}
+
+.wrapper::before,
+.wrapper::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 200%;
+    background: conic-gradient(from 0deg,
+            #ff9aa2,
+            /* Soft pink */
+            #ffb7b2,
+            /* Light peach */
+            #ffdac1,
+            /* Pastel yellow */
+            #e2f0cb,
+            /* Mint green */
+            #a2e4ff,
+            /* Baby blue */
+            #c9afff,
+            /* Lavender */
+            #ffb7b2,
+            #ff9aa2);
+    transform: translate(-50%, -50%);
+    animation: rotate 8s linear infinite;
+    filter: blur(50px);
+    /* Create a soft glowing effect */
+    opacity: 0.8;
+}
+
+/* Secondary rotating layer for depth */
+.wrapper::after {
+    width: 180%;
+    height: 180%;
+    animation: rotate-reverse 10s linear infinite;
+    opacity: 0.6;
+}
+
+/* Rotating animations */
+@keyframes rotate {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
+}
+
+@keyframes rotate-reverse {
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -50%) rotate(-360deg);
+    }
+}
+</style>
+
+<template>
+    <div class="container">
+        <div class="wrapper">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    console.log("DynamicBackground component loaded");
+});
+</script>

src/views/HomeView.vue

@@ -1,10 +1,15 @@
 <template>
     <div class="container rowbox" style="height: calc(100% - 65px); align-items: center;width: 100%;overflow: auto;">
+        <DynamicBackground>
+            <template #content>
+
+            </template>
+        </DynamicBackground>
         <div class="colbox" style="width: 95%;margin-top: 10px;">
             <div style="flex-grow: 2;margin:30px;" class="rowbox">
                 <div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
                 <div id="title">wordIn</div>
-                <div>当前版本: 1.02 <br/> 更新时间:2025年3月6日 10:35 PM</div>
+                <div>当前版本: 1.02 <br /> 更新时间:2025年3月7日 10:35 PM</div>
             </div>
             <div style="flex-grow: 1;align-items: center;" class="colbox card">
                 <router-link to="/select" class="button">
@@ -41,6 +46,7 @@
 import { useMainStore } from '@/store';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import DynamicBackground from '@/components/DynamicBackground.vue';
 
 const store = useMainStore();
 const router = useRouter();
@@ -198,4 +204,5 @@ html.dark .button {
 
 html.bgimged #ball {
     backdrop-filter: blur(20px);
-}</style>
+}
+</style>