fix: 优化颜色列表卡顿问题

src/components/ThemeColorSelect/components/ColorList.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="content-left">
     <div
       class="content-left-item go-transition-quick go-mb-0"
       span="12 1000:6 1400:4 1800:4 2200:2"
@@ -23,7 +24,7 @@
         </n-space>
       </n-space>
     </div>
-  <n-divider/>
+    <n-divider />
     <div
       class="content-left-item go-transition-quick"
       span="12 1000:6 1400:4 1800:4 2200:2"
@@ -48,22 +49,32 @@
         </n-space>
       </n-space>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { PropType } from 'vue'
 import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
-import designColor from '@/settings/designColor.json'
 import designColorRecommend from '@/settings/designColorRecommend.json'
 
 const emits = defineEmits(['colorSelectHandle'])
-
+defineProps({
+  designColor: {
+    type: Object as PropType<AppThemeColorType[]>,
+    required: true
+  }
+})
 const colorSelectHandle = (color: AppThemeColorType) => {
   emits('colorSelectHandle', color)
 }
 </script>
 
 <style lang="scss" scoped>
-.content-left-item {
+.content-left {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 200px;
+  .content-left-item {
     position: relative;
     display: flex;
     margin-bottom: 10px;
@@ -97,5 +108,6 @@ const colorSelectHandle = (color: AppThemeColorType) => {
     .Pinyin-upper {
       font-size: 8px;
     }
+  }
 }
 </style>

src/components/ThemeColorSelect/index.vue

@@ -13,12 +13,10 @@
         </n-icon>
       </n-space>
       <n-divider />
-      <div class="model-content">
-        <n-scrollbar>
-          <div class="content-left">
-            <ColorList @colorSelectHandle="colorSelectHandle" />
+      <div class="model-content" ref="contentLeftRef">
+        <div class="content-left" v-if="modelShow">
+          <ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle" />
         </div>
-        </n-scrollbar>
         <div class="content-right">
           <div class="color-name-detail">
             <n-text v-if="appThemeDetail" class="color-name">{{ appThemeDetail.name }}</n-text>
@@ -45,20 +43,31 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, toRefs } from 'vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
 import { icon } from '@/plugins'
 import themeColorLogo from '@/assets/images/exception/theme-color.png'
 import { loadAsyncComponent } from '@/utils'
+import { useScroll } from '@vueuse/core'
+import designColor from '@/settings/designColor.json'
 
 const ColorList = loadAsyncComponent(() =>
   import('./components/ColorList.vue')
 )
 const { ColorWandIcon, CloseIcon } = icon.ionicons5
 
+let splitNumber = 50
+
 const designStore = useDesignStore()
 const modelShow = ref(false)
+const contentLeftRef = ref<HTMLElement | null>(null)
+const designColorSplit = ref(designColor.slice(0, splitNumber))
+
+const { arrivedState } = useScroll(contentLeftRef, {
+  offset: { bottom: 200 },
+})
+const { bottom } = toRefs(arrivedState)
 
 const appThemeDetail = computed(() => {
   return designStore.getAppThemeDetail
@@ -67,6 +76,19 @@ const appThemeDetail = computed(() => {
 const colorSelectHandle = (color: AppThemeColorType) => {
   designStore.setAppColor(color)
 }
+
+watch(() => bottom.value, (newData: boolean) => {
+  if (newData) {
+    splitNumber = splitNumber + 50
+    designColorSplit.value = designColor.slice(0, splitNumber)
+  }
+})
+
+watch(() => modelShow.value, (modelShow: boolean) => {
+  if (!modelShow) {
+    splitNumber = 50
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -89,12 +111,7 @@ $height: 85vh;
   .model-content {
     flex: 1;
     height: calc(#{$height} - 40px - 48px - 36px);
-    /* 左侧 */
-    .content-left {
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: 200px;
-    }
+    overflow: auto;
     /* 右侧 */
     .content-right {
       position: absolute;

src/styles/common/format.scss

@@ -1,3 +1,19 @@
 body {
   overflow: hidden;
 }
+
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+  width: 8px;
+}
+/* 滚动槽 */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+  border-radius: 2px;
+}
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: #a3a3a3;
+}
+