update animation view

src/components/AnimationView/index.tsx

@@ -1,37 +1,13 @@
-import WaterLightAnimation from '@/views/WaterLight'
-import TimeLineAniamtion from '@/views/TimeLine'
-import BubbleAnimation from '@/views/Bubble'
-import CheckOnAnimation from '@/views/CheckOn'
-import MouseFollowAnimation from '@/views/MouseFollow'
-import CardAnimation from '@/views/Card'
-import ImageWallAnimation from '@/views/ImageWall'
-import ClockAnimation from '@/views/Clock'
-import BugWordAnimation from '@/views/BugWord'
-import Calendar from '@/views/Calendar'
+import { VIEW_COMPONENTS } from './type'
 import type { IView } from '@/types/view'
 import { ViewType } from '@/types/view'
 import './style.css'
 
 export default function Views({ activeView }: { activeView: IView }) {
+  const ActiveComponent = VIEW_COMPONENTS[activeView.value]
   return (
     <div className="views">
-      {activeView.value === ViewType.Clock && <ClockAnimation />}
-      {activeView.value === ViewType.Image && <ImageWallAnimation />}
-      {activeView.value === ViewType.Card && <CardAnimation />}
-      {activeView.value === ViewType.MouseFollow && <MouseFollowAnimation />}
-      {activeView.value === ViewType.CheckOn && <CheckOnAnimation />}
-      {activeView.value === ViewType.Bubble && <BubbleAnimation />}
-      {activeView.value === ViewType.TimeLine && <TimeLineAniamtion />}
-      {activeView.value === ViewType.WaterLight && <WaterLightAnimation />}
-      {activeView.value === ViewType.BugWord && <BugWordAnimation />}
-      {activeView.value === ViewType.Calendar && (
-        <Calendar
-          value={new Date()}
-          onChange={(date: Date) => {
-            alert(date.toLocaleDateString())
-          }}
-        />
-      )}
+      <ActiveComponent />
     </div>
   )
 }

src/components/AnimationView/type.ts

@@ -0,0 +1,26 @@
+import type React from 'react'
+import WaterLightAnimation from '@/views/WaterLight'
+import TimeLineAniamtion from '@/views/TimeLine'
+import BubbleAnimation from '@/views/Bubble'
+import CheckOnAnimation from '@/views/CheckOn'
+import MouseFollowAnimation from '@/views/MouseFollow'
+import CardAnimation from '@/views/Card'
+import ImageWallAnimation from '@/views/ImageWall'
+import ClockAnimation from '@/views/Clock'
+import BugWordAnimation from '@/views/BugWord'
+import Calendar from '@/views/Calendar'
+import { ViewType } from '@/types/view'
+
+// 创建映射对象
+export const VIEW_COMPONENTS: Record<ViewType, React.ElementType> = {
+  [ViewType.Clock]: ClockAnimation,
+  [ViewType.Image]: ImageWallAnimation,
+  [ViewType.Card]: CardAnimation,
+  [ViewType.MouseFollow]: MouseFollowAnimation,
+  [ViewType.CheckOn]: CheckOnAnimation,
+  [ViewType.Bubble]: BubbleAnimation,
+  [ViewType.TimeLine]: TimeLineAniamtion,
+  [ViewType.WaterLight]: WaterLightAnimation,
+  [ViewType.BugWord]: BugWordAnimation,
+  [ViewType.Calendar]: Calendar,
+}

src/types/view.ts

@@ -1,5 +1,4 @@
 export enum ViewType {
-  List = 'List',
   Clock = 'Clock',
   Image = 'Image',
   Card = 'Card',
@@ -18,10 +17,6 @@ export interface IView {
 }
 
 export const viewList: IView[] = [
-  {
-    label: 'List',
-    value: ViewType.List,
-  },
   {
     label: 'Clock',
     value: ViewType.Clock,