perf: use the setup function to replace the render function

src/components-global/icon/main/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue'
+import { defineComponent } from 'vue'
 import './index.less'
 
 export interface IconProps {

src/components-global/index.ts

@@ -5,13 +5,9 @@ export interface Component {
   name: string
 }
 
-export interface Option {
-  [key: string]: any
-}
-
 export const components: Component[] = [Icon]
 
-const install = (app: App, option: Option) => {
+const install = (app: App) => {
   components.forEach(component => {
     app.component(component.name, component)
   })

src/components/error-boundary/index.less

@@ -1,4 +1,6 @@
-.error-boundary {
+@prefix: ~'error';
+
+.@{prefix}-boundary {
   height: 520px;
   margin: 0 auto;
   width: 940px;

src/components/error-boundary/index.tsx

@@ -8,6 +8,8 @@ import {
 } from 'vue'
 import './index.less'
 
+const prefix = 'error'
+
 type This = Options & ComponentOptions
 
 interface Options {
@@ -48,10 +50,10 @@ export const RuntimeErrorComponent = defineComponent({
   render(this: RuntimeErrorComponentProps & ComponentOptions) {
     const { title, message } = this.$props
     return (
-      <div class="error-boundary">
-        <h1 class="error-boundary-title">{title}</h1>
-        <div class="error-boundary-content">{message.message}</div>
-        <pre class="error-boundary-content">{message.stack}</pre>
+      <div class={`${prefix}-boundary`}>
+        <h1 class={`${prefix}-boundary-title`}>{title}</h1>
+        <div class={`${prefix}-boundary-content`}>{message.message}</div>
+        <pre class={`${prefix}-boundary-content`}>{message.stack}</pre>
       </div>
     )
   }

src/components/full-screen/index.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 
 export const FullScreen = defineComponent({
-  render() {
-    return <router-view></router-view>
+  setup() {
+    return () => <router-view></router-view>
   }
 })

src/components/secondary-bar/index.less

@@ -1,6 +1,7 @@
+@prefix: ~'secondary';
 @base-color: #383838;
 
-.secondary-bar {
+.@{prefix}-bar {
   padding: 10px 0;
   ul {
     margin: 0;

src/components/secondary-bar/index.tsx

@@ -1,36 +1,34 @@
-import { defineComponent } from 'vue'
-import { RouterLink } from 'vue-router'
-import { RouterChildren } from '@/router/index'
-import classnames from 'classnames'
+import { defineComponent, toRefs } from 'vue'
+import { RouterLink, RouteRecordRaw } from 'vue-router'
 import './index.less'
 
+const prefix = 'secondary'
+
+interface Props {
+  nav: RouteRecordRaw[]
+  onChange: (route: RouteRecordRaw) => void
+}
+
 export const SecondaryBar = defineComponent({
+  name: 'SecondaryBar',
   props: {
     nav: {
-      type: Array,
-      default: () => []
-    },
-    onChange: Function
+      type: Object as () => RouteRecordRaw[],
+      required: true
+    }
   },
-  emits: ['change'],
-  render() {
-    const nav = (this.$props.nav as unknown) as RouterChildren[]
-    const {
-      $router: {
-        currentRoute: { value }
-      }
-    } = this
-    return (
-      <div class="secondary-bar">
+  setup(props) {
+    const { nav } = toRefs(props)
+    return () => (
+      <div class={`${prefix}-bar`}>
         <ul>
-          {nav.map(link => (
+          {nav.value?.map(link => (
             <RouterLink
-              class={classnames('secondary-bar-link', {
-                'secondary-bar-link-active': value.path.includes(link.path)
-              })}
+              class={`${prefix}-bar-link`}
+              activeClass={`${prefix}-bar-link-active`}
               to={link.path}
             >
-              {link?.meta?.name}
+              {link.meta?.name}
             </RouterLink>
           ))}
         </ul>

src/components/song-list/index.less

@@ -1,4 +1,6 @@
-.song-list {
+@prefix: ~'song';
+
+.@{prefix}-list {
   padding: 10px 0;
 
   ul {

src/components/song-list/index.tsx

@@ -1,29 +1,32 @@
-import { defineComponent, onBeforeMount } from 'vue'
+import { defineComponent, toRefs } from 'vue'
 import { FindMusicInteface } from '@/interface/index'
 import './index.less'
 
-interface Props {
-  songData: FindMusicInteface.Song[]
-}
+const prefix = 'song'
 
 export const SongList = defineComponent({
   name: 'SongList',
-  props: ['songData'],
-  render() {
-    const { songData } = this.$props as Props
-    return (
-      <div class="song-list">
+  props: {
+    songData: {
+      type: Object as () => FindMusicInteface.Song[],
+      required: true
+    }
+  },
+  setup(props) {
+    const { songData } = toRefs(props)
+    return () => (
+      <div class={`${prefix}-list`}>
         <ul>
-          {songData.map(song => (
-            <li class="song-list-container">
-              <div class="song-pic">
+          {songData.value.map(song => (
+            <li class={`${prefix}-list-container`}>
+              <div class={`${prefix}-pic`}>
                 <div
-                  class="song-pic-img"
+                  class={`${prefix}-pic-img`}
                   style={{ backgroundImage: `url(${song.picUrl})` }}
                 ></div>
-                <div class="song-pic-count">{song.playCount}</div>
+                <div class={`${prefix}-pic-count`}>{song.playCount}</div>
               </div>
-              <div class="song-title">{song.name}</div>
+              <div class={`${prefix}-title`}>{song.name}</div>
             </li>
           ))}
         </ul>

src/components/swiper/index.less

@@ -1,3 +1,5 @@
+@prefix: ~'swiper';
+
 .show() {
   transition: all 0.5s;
   opacity: 1;
@@ -43,7 +45,7 @@
 
 @radius: 8px;
 
-.swiper {
+.@{prefix} {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -75,17 +77,17 @@
       border-top-left-radius: @radius;
       border-bottom-left-radius: @radius;
       left: 0;
-      background-image: linear-gradient(to right, #000000bf, #0000000f);
+      background-image: linear-gradient(to right, #000000bf, transparent);
     }
     &-right {
       border-top-right-radius: @radius;
       border-bottom-right-radius: @radius;
       right: 0;
-      background-image: linear-gradient(to left, #000000bf, #0000000f);
+      background-image: linear-gradient(to left, #000000bf, transparent);
     }
     &:hover {
-      .swiper-container-left,
-      .swiper-container-right {
+      .@{prefix}-container-left,
+      .@{prefix}-container-right {
         opacity: 1;
       }
     }
@@ -102,48 +104,42 @@
         background-size: cover;
       }
     }
-    .normal-item {
+    .@{prefix}-normal-item {
       left: 50%;
       transform: translateX(-50%);
       transition: all 0.5s;
     }
-    .prev,
-    .next {
+    .@{prefix}-prev,
+    .@{prefix}-next {
       .show();
     }
-    .prev {
+    .@{prefix}-prev {
       left: 0;
       transform: translateX(0);
-      &-active {
-        .prevActiveFn(50%);
-      }
       &-span {
         transition: none;
         .prevActiveFn(10%);
       }
     }
-    .next {
+    .@{prefix}-next {
       left: auto;
       right: 0;
       transform: translateX(0);
-      &-active {
-        .nextActiveFn(50%);
-      }
       &-span {
         transition: none;
         .nextActiveFn(10%);
       }
     }
-    .current {
+    .@{prefix}-current {
       left: 50%;
       transform: translateX(-50%) scale(1.2);
       z-index: 1;
       .show();
     }
-    .current-span {
+    .@{prefix}-current-span {
       animation: spanScale 0.5s cubic-bezier(0, 0, 0.05, 0.58);
     }
-    .span-current {
+    .@{prefix}-span-current {
       transition: none;
     }
   }