|
| 1 | +<script setup lang="ts"> |
| 2 | +import { onMounted, onBeforeUnmount, ref } from 'vue' |
| 3 | +
|
| 4 | +// 可拖拽侧栏宽度:左导航树 + 右大纲栏(TOC)。 |
| 5 | +// 左栏 --vp-sidebar-width 由 VitePress 全链路消费(sidebar 自身 / 正文 padding-left / 顶栏对齐), |
| 6 | +// 改这一个变量即全联动。但 handle 的定位与拖动计算必须读 .VPSidebar 的实际几何 —— 宽屏 |
| 7 | +// (≥1440px)布局居中,sidebar 左缘非 0、右缘带 (vw-maxW)/2 偏移,且受滚动条宽度影响, |
| 8 | +// CSS 公式推算总有小偏差。故 left 一律用 JS 读 getBoundingClientRect 精确设定(与右 handle 同策略)。 |
| 9 | +// 右栏 --vp-aside-width 自定义变量(在 custom.css 覆盖 aside max-width);右 handle absolute |
| 10 | +// 注入 aside 内,MutationObserver 在路由切换重建 aside 时重新注入。 |
| 11 | +// 宽度持久化 localStorage;首屏防闪由 config head 内联脚本(hydration 前注入变量)负责。 |
| 12 | +
|
| 13 | +type Side = 'left' | 'right' |
| 14 | +interface Dim { min: number; max: number; def: number; key: string; cssVar: string } |
| 15 | +
|
| 16 | +const CONF: Record<Side, Dim> = { |
| 17 | + left: { min: 200, max: 480, def: 272, key: 'vp-sidebar-width', cssVar: '--vp-sidebar-width' }, |
| 18 | + right: { min: 180, max: 360, def: 256, key: 'vp-aside-width', cssVar: '--vp-aside-width' }, |
| 19 | +} |
| 20 | +
|
| 21 | +const leftHandle = ref<HTMLElement | null>(null) |
| 22 | +const RIGHT_HANDLE_ID = 'rs-right-handle' |
| 23 | +
|
| 24 | +const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v)) |
| 25 | +const applyVar = (side: Side, px: number) => |
| 26 | + document.documentElement.style.setProperty(CONF[side].cssVar, px + 'px') |
| 27 | +const persist = (side: Side, px: number) => { |
| 28 | + try { localStorage.setItem(CONF[side].key, String(px)) } catch { /* 隐私模式 / 配额 */ } |
| 29 | +} |
| 30 | +
|
| 31 | +interface DragCtx { |
| 32 | + side: Side |
| 33 | + dim: Dim |
| 34 | + lastV: number |
| 35 | + handle: HTMLElement |
| 36 | + onMove: (e: MouseEvent) => void |
| 37 | + onUp: () => void |
| 38 | +} |
| 39 | +let drag: DragCtx | null = null |
| 40 | +
|
| 41 | +function startDrag(side: Side, e: MouseEvent) { |
| 42 | + e.preventDefault() |
| 43 | + const dim = CONF[side] |
| 44 | + const handle = e.currentTarget as HTMLElement |
| 45 | + handle.classList.add('is-active') |
| 46 | + document.body.classList.add('rs-resizing') |
| 47 | +
|
| 48 | + // 左栏:sidebar 左缘在居中布局下非 0,新宽 = 鼠标x − 左缘 |
| 49 | + const sidebarLeft = |
| 50 | + side === 'left' |
| 51 | + ? (document.querySelector('.VPSidebar') as HTMLElement | null)?.getBoundingClientRect().left ?? 0 |
| 52 | + : 0 |
| 53 | +
|
| 54 | + const onMove = (ev: MouseEvent) => { |
| 55 | + let v: number |
| 56 | + if (side === 'left') { |
| 57 | + v = ev.clientX - sidebarLeft |
| 58 | + } else { |
| 59 | + // 右栏:aside 右边缘固定(贴容器右内边),新宽 = 右边缘 − 鼠标 x |
| 60 | + const aside = document.querySelector('.VPDoc.has-aside .aside') as HTMLElement | null |
| 61 | + v = aside ? aside.getBoundingClientRect().right - ev.clientX : dim.def |
| 62 | + } |
| 63 | + if (drag) drag.lastV = clamp(Math.round(v), dim.min, dim.max) |
| 64 | + applyVar(side, drag ? drag.lastV : dim.def) |
| 65 | + if (side === 'left' && drag?.handle) { |
| 66 | + // handle 跟随 sidebar 右缘(左缘 + 当前宽) |
| 67 | + drag.handle.style.left = (sidebarLeft + drag.lastV) + 'px' |
| 68 | + } |
| 69 | + } |
| 70 | + const onUp = () => { |
| 71 | + if (drag) persist(side, drag.lastV) |
| 72 | + handle.classList.remove('is-active') |
| 73 | + document.body.classList.remove('rs-resizing') |
| 74 | + document.removeEventListener('mousemove', onMove) |
| 75 | + document.removeEventListener('mouseup', onUp) |
| 76 | + drag = null |
| 77 | + } |
| 78 | + drag = { side, dim, lastV: dim.def, handle, onMove, onUp } |
| 79 | + document.addEventListener('mousemove', onMove) |
| 80 | + document.addEventListener('mouseup', onUp) |
| 81 | +} |
| 82 | +
|
| 83 | +function reset(side: Side) { |
| 84 | + applyVar(side, CONF[side].def) |
| 85 | + persist(side, CONF[side].def) |
| 86 | + if (side === 'left') updateLeftPosition() |
| 87 | +} |
| 88 | +
|
| 89 | +// 仅在有侧栏的页(文档页)显示左 handle;首页等无侧栏页隐藏 |
| 90 | +function updateLeftVisibility() { |
| 91 | + if (!leftHandle.value) return |
| 92 | + leftHandle.value.style.display = document.querySelector('.VPSidebar') ? '' : 'none' |
| 93 | +} |
| 94 | +
|
| 95 | +// 左 handle 精确定位:用 offsetLeft + offsetWidth(不含 transform),避开 sidebar 入场过渡 |
| 96 | +// (translateX(-100%)→0)对 getBoundingClientRect 的干扰 —— 首屏即读到最终右边缘,无需等动画结束。 |
| 97 | +function updateLeftPosition() { |
| 98 | + if (!leftHandle.value) return |
| 99 | + const sb = document.querySelector('.VPSidebar') as HTMLElement | null |
| 100 | + if (sb) leftHandle.value.style.left = (sb.offsetLeft + sb.offsetWidth) + 'px' |
| 101 | +} |
| 102 | +
|
| 103 | +function injectRightHandle() { |
| 104 | + const aside = document.querySelector('.VPDoc.has-aside .aside') as HTMLElement | null |
| 105 | + if (!aside || aside.querySelector('#' + RIGHT_HANDLE_ID)) return |
| 106 | + const handle = document.createElement('div') |
| 107 | + handle.id = RIGHT_HANDLE_ID |
| 108 | + handle.className = 'rs-handle rs-handle--right' |
| 109 | + handle.setAttribute('role', 'separator') |
| 110 | + handle.setAttribute('aria-orientation', 'vertical') |
| 111 | + handle.setAttribute('aria-label', '拖动调整右侧大纲栏宽度(双击重置)') |
| 112 | + handle.addEventListener('mousedown', (ev) => startDrag('right', ev)) |
| 113 | + handle.addEventListener('dblclick', () => reset('right')) |
| 114 | + aside.style.position = 'relative' |
| 115 | + aside.appendChild(handle) |
| 116 | +} |
| 117 | +
|
| 118 | +let observer: MutationObserver | null = null |
| 119 | +let leftTimer = 0 |
| 120 | +const onMutate = () => { |
| 121 | + updateLeftVisibility() |
| 122 | + updateLeftPosition() |
| 123 | + injectRightHandle() |
| 124 | +} |
| 125 | +
|
| 126 | +onMounted(() => { |
| 127 | + // 恢复已存宽度(防闪脚本已在首屏注入,这里做内存兜底) |
| 128 | + ;(['left', 'right'] as Side[]).forEach((side) => { |
| 129 | + const dim = CONF[side] |
| 130 | + try { |
| 131 | + const v = parseInt(localStorage.getItem(dim.key) || '') |
| 132 | + if (v >= dim.min && v <= dim.max) applyVar(side, v) |
| 133 | + } catch {} |
| 134 | + }) |
| 135 | + onMutate() |
| 136 | + // sidebar 桌面端有 transform 入场过渡(translateX(-100%)→0,约 0.25s),过渡中 |
| 137 | + // getBoundingClientRect 偏左,导致 handle 初始错位(拖动后才贴合)。 |
| 138 | + // 多时机补校准,确保首屏即贴合:下一帧 / 过渡结束后(~350ms)/ 页面 load 后。 |
| 139 | + requestAnimationFrame(updateLeftPosition) |
| 140 | + leftTimer = window.setTimeout(updateLeftPosition, 350) |
| 141 | + window.addEventListener('resize', updateLeftPosition, { passive: true }) |
| 142 | + if (document.readyState !== 'complete') { |
| 143 | + window.addEventListener('load', updateLeftPosition) |
| 144 | + } |
| 145 | + const root = document.querySelector('.VPContent') || document.body |
| 146 | + if ('MutationObserver' in window) { |
| 147 | + observer = new MutationObserver(onMutate) |
| 148 | + observer.observe(root, { childList: true, subtree: true }) |
| 149 | + } |
| 150 | +}) |
| 151 | +
|
| 152 | +onBeforeUnmount(() => { |
| 153 | + observer?.disconnect() |
| 154 | + observer = null |
| 155 | + window.clearTimeout(leftTimer) |
| 156 | + window.removeEventListener('resize', updateLeftPosition) |
| 157 | + window.removeEventListener('load', updateLeftPosition) |
| 158 | + document.querySelectorAll('#' + RIGHT_HANDLE_ID).forEach((n) => n.remove()) |
| 159 | + if (drag) { |
| 160 | + document.removeEventListener('mousemove', drag.onMove) |
| 161 | + document.removeEventListener('mouseup', drag.onUp) |
| 162 | + drag = null |
| 163 | + } |
| 164 | +}) |
| 165 | +</script> |
| 166 | + |
| 167 | +<template> |
| 168 | + <div |
| 169 | + ref="leftHandle" |
| 170 | + class="rs-handle rs-handle--left" |
| 171 | + role="separator" |
| 172 | + aria-orientation="vertical" |
| 173 | + aria-label="拖动调整左侧导航栏宽度(双击重置)" |
| 174 | + @mousedown="startDrag('left', $event)" |
| 175 | + @dblclick="reset('left')" |
| 176 | + ></div> |
| 177 | +</template> |
0 commit comments