From bd0e2a3b5add58a350736f71124e291082d9fb76 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Tue, 20 May 2025 11:40:29 +0800
Subject: [PATCH] refactor(front): simplify component rendering in index.vue by
 using dynamic component approach

---
 front/pages/index.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/front/pages/index.vue b/front/pages/index.vue
index ae2663d..08f2b8a 100644
--- a/front/pages/index.vue
+++ b/front/pages/index.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="flex flex-col gap-5 py-5 items-center w-full h-full">
-    <FileUploadView v-if="type === 'file'" />
-    <TextUploadView v-if="type === 'text'" />
+    <component :is="renderComponent" />
   </div>
 </template>
 
 <script setup lang="ts">
-import FileUploadView from '~/components/Upload/File/FileUploadIndexView.vue'
-import TextUploadView from '~/components/Upload/TextUploadView.vue'
+import FileUploadView from '~/components/Home/File/FileUploadIndexView.vue'
+import TextUploadView from '~/components/Home/Text/TextUploadIndexView.vue'
 import { isString } from 'lodash-es'
-
 const route = useRoute()
 const router = useRouter()
 const type = computed(() => route?.query?.type)
@@ -18,4 +16,10 @@ onMounted(() => {
     router.push({ query: { type: 'file' }, replace: true })
   }
 })
+
+const renderList = [
+  { key: 'file', component: FileUploadView },
+  { key: 'text', component: TextUploadView },
+]
+const renderComponent = computed(() => renderList.find(item => item.key === type.value)?.component)
 </script>
\ No newline at end of file