docs: add tabbar wheelable tips

vbenjs · Dec 13, 2024 · 80c8528 · 80c8528
1 parent 5605e55
commit 80c8528
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -144,8 +144,8 @@ export function useTabsViewScroll(props: TabsProps) {
 
   function handleWheel({ deltaY }: WheelEvent) {
     scrollViewportEl.value?.scrollBy({
-      // behavior: 'smooth',
-      left: deltaY,
+      behavior: 'smooth',
+      left: deltaY * 3,
     });
   }
 

diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
@@ -54,7 +54,11 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.draggable') }}
   </SwitchItem>
-  <SwitchItem v-model="tabbarWheelable" :disabled="!tabbarEnable">
+  <SwitchItem
+    v-model="tabbarWheelable"
+    :disabled="!tabbarEnable"
+    :tip="$t('preferences.tabbar.wheelableTip')"
+  >
     {{ $t('preferences.tabbar.wheelable') }}
   </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">

diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -8,8 +8,9 @@ defineOptions({
   name: 'PreferenceSwitchItem',
 });
 
-withDefaults(defineProps<{ disabled?: boolean }>(), {
+withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), {
   disabled: false,
+  tip: '',
 });
 
 const checked = defineModel<boolean>();
@@ -32,11 +33,17 @@ function handleClick() {
     <span class="flex items-center text-sm">
       <slot></slot>
 
-      <VbenTooltip v-if="slots.tip" side="bottom">
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
         <template #trigger>
           <CircleHelp class="ml-1 size-3 cursor-help" />
         </template>
-        <slot name="tip"></slot>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
       </VbenTooltip>
     </span>
     <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">

diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json
@@ -56,6 +56,7 @@
     "persist": "Persist Tabs",
     "draggable": "Enable Draggable Sort",
     "wheelable": "Support Mouse Wheel",
+    "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.",
     "styleType": {
       "title": "Tabs Style",
       "chrome": "Chrome",

diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json
@@ -55,7 +55,8 @@
     "showMaximize": "显示最大化按钮",
     "persist": "持久化标签页",
     "draggable": "启动拖拽排序",
-    "wheelable": "启用鼠标滚轮响应",
+    "wheelable": "启用纵向滚轮响应",
+    "wheelableTip": "开启后，标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时，只能响应系统的横向滚动事件（需要按下Shift再滚动滚轮）",
     "styleType": {
       "title": "标签页风格",
       "chrome": "谷歌",