refactor: grid layout handling

src/contentScripts/views/Home/components/Following.vue

@@ -31,12 +31,12 @@ const emit = defineEmits<{
   (e: 'afterLoading'): void
 }>()
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive')
-    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+    return 'grid-adaptive'
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 
 const videoList = ref<VideoElement[]>([])
@@ -264,11 +264,6 @@ defineExpose({ initData })
 
 <template>
   <div>
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -278,7 +273,7 @@ defineExpose({ initData })
       v-else
       ref="containerRef"
       m="b-0 t-0" relative w-full h-full
-      :grid="gridValue"
+      :class="gridClass"
     >
       <template v-if="settings.followingTabShowLivestreamingVideos">
         <VideoCard
@@ -337,4 +332,15 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
+.grid-adaptive {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>

src/contentScripts/views/Home/components/ForYou.vue

@@ -45,12 +45,12 @@ interface AppVideoElement {
   item?: AppVideoItem
 }
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive')
-    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+    return 'grid-adaptive'
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 
 const videoList = ref<VideoElement[]>([])
@@ -322,11 +322,6 @@ defineExpose({ initData })
 
 <template>
   <div>
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -337,7 +332,7 @@ defineExpose({ initData })
       v-else
       ref="containerRef"
       m="b-0 t-0" relative w-full h-full
-      :grid="gridValue"
+      :class="gridClass"
     >
       <template v-if="settings.recommendationMode === 'web'">
         <VideoCard
@@ -410,4 +405,15 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
+.grid-adaptive {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>

src/contentScripts/views/Home/components/Live.vue

@@ -21,12 +21,12 @@ const emit = defineEmits<{
   (e: 'afterLoading'): void
 }>()
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive')
-    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+    return 'grid-adaptive'
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 
 const videoList = ref<VideoElement[]>([])
@@ -161,11 +161,6 @@ defineExpose({ initData })
 
 <template>
   <div>
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -175,7 +170,7 @@ defineExpose({ initData })
       v-else
       ref="containerRef"
       m="b-0 t-0" relative w-full h-full
-      :grid="gridValue"
+      :class="gridClass"
     >
       <VideoCard
         v-for="video in videoList"
@@ -207,4 +202,15 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
+.grid-adaptive {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>

src/contentScripts/views/Home/components/Ranking.vue

@@ -23,18 +23,18 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive') {
     // eslint-disable-next-line ts/no-use-before-define
     if (!activatedRankingType.value.seasonType)
-      return '~ 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-1 gap-5'
+      return 'grid-adaptive-video'
     else
-      return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+      return 'grid-adaptive-bangumi'
   }
 
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 
 const rankingTypes = computed((): RankingType[] => {
@@ -182,13 +182,7 @@ defineExpose({ initData })
       </OverlayScrollbarsComponent>
     </aside>
 
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-1 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
-    <main w-full :grid="gridValue">
+    <main w-full :class="gridClass">
       <template v-if="!('seasonType' in activatedRankingType)">
         <VideoCard
           v-for="(video, index) in videoList"
@@ -266,4 +260,20 @@ defineExpose({ initData })
 .hide {
   --uno: "h-[calc(100vh-70)] translate-y--70px";
 }
+
+.grid-adaptive-video {
+  --uno: "grid 2xl:cols-4 xl:cols-3 lg:cols-2 md:cols-1 gap-5";
+}
+
+.grid-adaptive-bangumi {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>

src/contentScripts/views/Home/components/SubscribedSeries.vue

@@ -21,12 +21,12 @@ const emit = defineEmits<{
   (e: 'afterLoading'): void
 }>()
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive')
-    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+    return 'grid-adaptive'
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 
 const videoList = ref<VideoElement[]>([])
@@ -166,11 +166,6 @@ defineExpose({ initData })
 
 <template>
   <div>
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -185,7 +180,7 @@ defineExpose({ initData })
       v-else
       ref="containerRef"
       m="b-0 t-0" relative w-full h-full
-      :grid="gridValue"
+      :class="gridClass"
     >
       <VideoCard
         v-for="video in videoList"
@@ -218,4 +213,15 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
+.grid-adaptive {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>

src/contentScripts/views/Home/components/Trending.vue

@@ -21,12 +21,12 @@ const emit = defineEmits<{
   (e: 'afterLoading'): void
 }>()
 
-const gridValue = computed((): string => {
+const gridClass = computed((): string => {
   if (props.gridLayout === 'adaptive')
-    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+    return 'grid-adaptive'
   if (props.gridLayout === 'twoColumns')
-    return '~ cols-1 xl:cols-2 gap-4'
-  return '~ cols-1 gap-4'
+    return 'grid-two-columns'
+  return 'grid-one-column'
 })
 const videoList = ref<VideoElement[]>([])
 const isLoading = ref<boolean>(false)
@@ -129,15 +129,10 @@ defineExpose({ initData })
 
 <template>
   <div>
-    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
-    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
-    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
-    <div hidden grid="~ cols-1 gap-4" />
-
     <div
       ref="containerRef"
       m="b-0 t-0" relative w-full h-full
-      :grid="gridValue"
+      :class="gridClass"
     >
       <VideoCard
         v-for="video in videoList"
@@ -169,4 +164,15 @@ defineExpose({ initData })
 </template>
 
 <style lang="scss" scoped>
+.grid-adaptive {
+  --uno: "grid 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5";
+}
+
+.grid-two-columns {
+  --uno: "grid cols-1 xl:cols-2 gap-4";
+}
+
+.grid-one-column {
+  --uno: "grid cols-1 gap-4";
+}
 </style>