From fa2b17bb642d2971bedd84bca57fb5ea95834828 Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Wed, 5 Mar 2025 21:02:35 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=A1=B5=E9=9D=A2=E6=A8=A1=E6=9D=BFUI?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Thumbnails/Templates.vue | 78 ++++++++++++++---------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/views/Editor/Thumbnails/Templates.vue b/src/views/Editor/Thumbnails/Templates.vue
index d2d4d4e2..e7dd44c6 100644
--- a/src/views/Editor/Thumbnails/Templates.vue
+++ b/src/views/Editor/Thumbnails/Templates.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="templates">
-    <div class="header">
-      <Tabs 
-        :tabs="tabs" 
-        v-model:value="activeTab"
-        card 
-      />
+    <div class="catalogs">
+      <div class="catalog" 
+        :class="{ 'active': activeCatalog === item.id }" 
+        v-for="item in templates" 
+        :key="item.id"
+        @click="changeCatalog(item.id)"
+      >{{ item.name }}</div>
     </div>
-    <div class="list">
+    <div class="list" ref="listRef">
       <div 
         class="slide-item"
         v-for="slide in slides" 
@@ -24,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
@@ -32,12 +33,6 @@ import api from '@/services'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Button from '@/components/Button.vue'
-import Tabs from '@/components/Tabs.vue'
-
-interface TabItem {
-  key: string
-  label: string
-}
 
 const emit = defineEmits<{
   (event: 'select', payload: Slide): void
@@ -46,41 +41,64 @@ const emit = defineEmits<{
 const slidesStore = useSlidesStore()
 const { templates } = storeToRefs(slidesStore)
 const slides = ref<Slide[]>([])
+const listRef = ref<HTMLElement>()
 
-const tabs = computed<TabItem[]>(() => {
-  return templates.value.map(item => ({
-    label: item.name,
-    key: item.id,
-  }))
-})
-const activeTab = ref('')
+const activeCatalog = ref('')
 
 const insertTemplate = (slide: Slide) => {
   emit('select', slide)
 }
 
-watch(activeTab, () => {
-  if (!activeTab.value) return
-  api.getFileData(activeTab.value).then(ret => {
+const changeCatalog = (id: string) => {
+  activeCatalog.value = id
+  api.getFileData(activeCatalog.value).then(ret => {
     slides.value = ret.slides
+
+    if (listRef.value) listRef.value.scrollTo(0, 0) 
   })
-})
+}
 
 onMounted(() => {
-  activeTab.value = templates.value[0].id
+  changeCatalog(templates.value[0].id)
 })
 </script>
 
 <style lang="scss" scoped>
 .templates {
-  width: 382px;
+  width: 500px;
   height: 500px;
+  display: flex;
 }
-.header {
-  margin: -10px -10px 10px;
+.catalogs {
+  width: 108px;
+  margin-right: 10px;
+  padding-right: 10px;
+  border-right: 1px solid $borderColor;
+  overflow: auto;
+
+  .catalog {
+    padding: 7px 8px;
+    border-radius: $borderRadius;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &.active {
+      color: $themeColor;
+      background-color: rgba($color: $themeColor, $alpha: .05);
+      border-right: 2px solid $themeColor;
+      font-weight: 700;
+    }
+
+    & + .catalog {
+      margin-top: 3px; 
+    }
+  }
 }
 .list {
-  height: calc(100% - 50px);
+  width: 392px;
   padding: 2px;
   margin-right: -10px;
   padding-right: 10px;