3

package-lock.json

@@ -12,7 +12,7 @@
         "@imengyu/imengyu-utils": "^0.0.25",
         "@imengyu/js-request-transform": "^0.4.0",
         "@imengyu/vue-dynamic-form": "^0.1.1",
-        "@imengyu/vue-scroll-rect": "^0.1.3",
+        "@imengyu/vue-scroll-rect": "^0.1.8",
         "@nuxt/icon": "^2.1.1",
         "@pinia/nuxt": "^0.11.1",
         "@popperjs/core": "^2.11.8",
@@ -1245,9 +1245,9 @@
       }
     },
     "node_modules/@imengyu/vue-scroll-rect": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmmirror.com/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.3.tgz",
-      "integrity": "sha512-HlE5y6GoDWwfSCCWbR+/ehe4a3qiJlYb63Ak6tRN0wHykl92tMJJOdMDng5hQk4nLq7wUQpoluO43PmefuaFcQ==",
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.8.tgz",
+      "integrity": "sha512-Mg7rgHlsGPO0tcMFjp1kB2BZ3oRrRtFN8MoE52jTgQnlc+Y0N6ttFnbIxOh2fc9j82uhdQ8zgZcXlFHUXeGnCA==",
       "license": "MIT"
     },
     "node_modules/@inquirer/ansi": {

package.json

@@ -18,7 +18,7 @@
     "@imengyu/imengyu-utils": "^0.0.25",
     "@imengyu/js-request-transform": "^0.4.0",
     "@imengyu/vue-dynamic-form": "^0.1.1",
-    "@imengyu/vue-scroll-rect": "^0.1.3",
+    "@imengyu/vue-scroll-rect": "^0.1.8",
     "@nuxt/icon": "^2.1.1",
     "@pinia/nuxt": "^0.11.1",
     "@popperjs/core": "^2.11.8",

src/components/content/TagBar.vue

@@ -1,22 +1,25 @@
 <template>
   <!-- 单选标签选择按钮条，可显示一行标签，然后高亮选中项 -->
-  <div class="d-flex flex-row flex-wrap">
-    <div
-      :class="[
-        'tag-button',
-        { 'active': tag.id === selectedTag },
-      ]"
-      v-for="tag in tags"
-      :key="tag.id"
-      @click="emit('update:selectedTag', tag.id ?? tag)"
-    >
-      {{ tag.name?? tag }}
+  <ScrollRect scroll="horizontal">
+    <div class="tags">
+      <div
+        :class="[
+          'tag-button',
+          { 'active': tag.id === selectedTag },
+        ]"
+        v-for="tag in tags"
+        :key="tag.id"
+        @click="emit('update:selectedTag', tag.id ?? tag)"
+      >
+        {{ tag.name?? tag }}
+      </div>
     </div>
-  </div>
+  </ScrollRect>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
+import { ScrollRect } from '@imengyu/vue-scroll-rect';
 
 defineProps({	
   /**
@@ -43,15 +46,24 @@ const emit = defineEmits([
 ])
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+.tags {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  margin-bottom: 10px;
+  min-width: 1000px;
+}
 .tag-button {
   display: flex;
   flex-direction: row;
   align-items: center;
   background-color: var(--color-box-inset);
   color: var(--color-text);
-  padding: 10px 15px;
-  margin-right: 8px;
+  padding: 10px;
+  margin-right: 4px;
   cursor: pointer;
   user-select: none;