perf: 页面模板UI优化

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;