bezier-slider 1.0.2 → 1.0.4

package/README.md

@@ -618,14 +618,3 @@ console.log(BezierSlider.DEFAULTS);
 }
 ```
 
----
-
-## 版本记录
-
-| 版本 | 日期 | 说明 |
-|------|------|------|
-| v3.0 | 2026-06-10 | 支持 Vue 3；添加 `fadeEnabled` 参数；项目结构重构 |
-| v2.2 | 2026-06-09 | 支持图片/SVG/font-icon 多种图标；边界拉扯回弹 |
-| v2.1 | 2026-06-09 | 抽象公共组件；中文注释；动态布局 |
-| v2.0 | 2026-06-09 | 二次贝塞尔滑轨；弧度/间距/回调可配置 |
-| v1.0 | 2026-06-09 | 初始圆弧版本（已废弃） |

package/demo/index.html

@@ -18,13 +18,21 @@
         <aside class="params-panel" id="paramsPanel">
             <div class="params-panel-header">
                 <h2>调节参数</h2>
-                <button
-                    type="button"
-                    class="params-reset"
-                    id="paramsReset"
-                    aria-label="恢复默认"
-                    data-tooltip="恢复默认"
-                ></button>
+                <div class="params-panel-actions">
+                    <button
+                        type="button"
+                        class="params-save"
+                        id="paramsSave"
+                        data-tooltip="保存到快捷预设"
+                    >保存</button>
+                    <button
+                        type="button"
+                        class="params-reset"
+                        id="paramsReset"
+                        aria-label="恢复默认"
+                        data-tooltip="恢复默认"
+                    ></button>
+                </div>
             </div>
             <div id="paramsForm"></div>
         </aside>
@@ -41,7 +49,7 @@
             </div>
             <label class="demo-options" id="debugOption">
                 <input type="checkbox" id="showDebugTrack" checked />
-                显示轨迹调试线
+                显示轨迹调试线（含 P0–P2 控制点）
             </label>
             <div class="slider-compose" id="sliderCompose">
                 <div class="carousel-bg" id="carouselBg"></div>
@@ -73,7 +81,7 @@
                 <button type="button" data-code="react">React</button>
                 <button type="button" data-code="vue">Vue</button>
             </div>
-            <pre class="code-content" id="codeContent"></pre>
+            <pre class="code-content" id="codeContent"><code></code></pre>
         </aside>
     </div>
 

package/demo/native-main.js

@@ -9,8 +9,14 @@ import {
 } from './shared/param-utils.js';
 import { bindParamsPanel } from './shared/params-panel.js';
 import { bindGeometryPresetBar } from './shared/geometry-preset-bar.js';
+import {
+    buildPresetSnapshot,
+    removeSavedPreset,
+    savePresetSnapshot
+} from './shared/saved-presets.js';
 import { bindCopyButton, bindResetButton } from './shared/clipboard.js';
 import { CODE_FORMATTERS } from './shared/format-code.js';
+import { getCodeTabLanguage, getPlainCodeText, renderHighlightedCode } from './shared/code-highlight.js';
 import {
     applyComposeLayout,
     fitImageDisplaySize,
@@ -48,6 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const codeContent = document.getElementById('codeContent');
     const codeCopyBtn = document.getElementById('codeCopyBtn');
     const paramsReset = document.getElementById('paramsReset');
+    const paramsSave = document.getElementById('paramsSave');
     const geometryPresetBar = document.getElementById('geometryPresetBar');
 
     let slider = null;
@@ -57,6 +64,29 @@ document.addEventListener('DOMContentLoaded', () => {
     let customBgUrl = null;
     let bgNaturalSize = { ...DEFAULT_BG_NATURAL };
     let displaySize = fitImageDisplaySize(bgNaturalSize.width, bgNaturalSize.height);
+    let activeControl = null;
+
+    function refreshDebugOverlay() {
+        if (!slider) return;
+        updateDebugTrack(
+            sliderMount,
+            slider.getLayoutState(),
+            showDebugTrack.checked,
+            BezierSlider,
+            activeControl
+        );
+    }
+
+    function setActiveControl(hint) {
+        activeControl = hint;
+        refreshDebugOverlay();
+        paramsForm.querySelectorAll('.param-row-cp').forEach((row) => {
+            const match = activeControl
+                && row.dataset.controlPoint === activeControl.point
+                && row.dataset.controlAxis === activeControl.axis;
+            row.classList.toggle('is-adjusting', Boolean(match));
+        });
+    }
 
     function getActiveBgUrl() {
         return customBgUrl;
@@ -85,7 +115,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function updateParamsPreview() {
         const formatter = CODE_FORMATTERS[currentCodeTab] ?? CODE_FORMATTERS.native;
-        codeContent.textContent = formatter(params, getCodePreviewOptions());
+        const source = formatter(params, getCodePreviewOptions());
+        renderHighlightedCode(codeContent, source, getCodeTabLanguage(currentCodeTab));
         legendCenterT.textContent = `centerT = ${params.centerT}`;
     }
 
@@ -144,7 +175,7 @@ document.addEventListener('DOMContentLoaded', () => {
             },
             onSlideEnd: (index) => console.log('停留下标:', index),
             onLayout: (layout) => {
-                updateDebugTrack(sliderMount, layout, showDebugTrack.checked, BezierSlider);
+                updateDebugTrack(sliderMount, layout, showDebugTrack.checked, BezierSlider, activeControl);
             }
         });
 
@@ -190,16 +221,70 @@ document.addEventListener('DOMContentLoaded', () => {
         scheduleRebuild();
     }
 
+    async function applySavedPreset(preset) {
+        params = deepClone(preset.params);
+        syncParamsForm(paramsForm, params, PARAM_SCHEMA);
+
+        if (preset.bgUrl) {
+            bgNaturalSize = { ...preset.bgNaturalSize };
+            await applyBackground(preset.bgUrl, preset.bgFileName || '已存背景');
+        } else {
+            bgNaturalSize = preset.bgNaturalSize
+                ? { ...preset.bgNaturalSize }
+                : { ...DEFAULT_BG_NATURAL };
+            await applyBackground(null);
+        }
+
+        updateParamsPreview();
+        createSlider(true);
+    }
+
+    function handleDeleteSavedPreset(preset) {
+        removeSavedPreset(preset.id);
+        geometryBarApi.refresh();
+    }
+
+    function handleSavePreset() {
+        const defaultLabel = customBgUrl
+            ? (bgFileName.textContent || '我的配置')
+            : `配置 ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+        const label = window.prompt('为当前配置命名', defaultLabel);
+        if (label == null || !label.trim()) return;
+
+        try {
+            const snapshot = buildPresetSnapshot({
+                label: label.trim(),
+                params,
+                bgUrl: customBgUrl,
+                bgFileName: bgFileName.textContent,
+                bgNaturalSize
+            });
+            savePresetSnapshot(snapshot);
+            geometryBarApi.refresh();
+
+            if (snapshot.bgOmitted && customBgUrl) {
+                window.alert('配置已保存。背景图过大未写入本地，加载该预设后请重新上传背景图。');
+            }
+        } catch (err) {
+            window.alert(err.message || '保存失败');
+        }
+    }
+
     const unbindPanel = bindParamsPanel(paramsForm, {
         getParams: () => params,
         onParamChange: handleParamChange,
+        onControlPointAdjustStart: setActiveControl,
+        onControlPointAdjustEnd: () => setActiveControl(null),
         schema: PARAM_SCHEMA
     });
-    const unbindGeometryBar = bindGeometryPresetBar(geometryPresetBar, {
-        onPreset: handleGeometryPreset
+    const geometryBarApi = bindGeometryPresetBar(geometryPresetBar, {
+        onPreset: handleGeometryPreset,
+        onSavedPreset: applySavedPreset,
+        onDeleteSaved: handleDeleteSavedPreset
     });
     const unbindReset = bindResetButton(paramsReset, handleReset);
-    const unbindCopy = bindCopyButton(codeCopyBtn, () => codeContent.textContent);
+    paramsSave?.addEventListener('click', handleSavePreset);
+    const unbindCopy = bindCopyButton(codeCopyBtn, () => getPlainCodeText(codeContent));
 
     applyDisplayLayout();
     applyBgLayer(carouselBg, null);
@@ -235,9 +320,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     showDebugTrack.addEventListener('change', () => {
-        if (slider) {
-            updateDebugTrack(sliderMount, slider.getLayoutState(), showDebugTrack.checked, BezierSlider);
-        }
+        refreshDebugOverlay();
     });
 
     window.addEventListener('resize', () => {
@@ -249,7 +332,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     window.addEventListener('beforeunload', () => {
         unbindPanel();
-        unbindGeometryBar();
+        geometryBarApi.destroy();
         unbindReset();
         unbindCopy();
         slider?.destroy();

package/demo/shared/code-highlight.js

@@ -0,0 +1,41 @@
+import hljs from 'highlight.js/lib/common';
+import 'highlight.js/styles/atom-one-dark.min.css';
+
+const CODE_TAB_LANGUAGES = {
+    native: 'html',
+    react: 'javascript',
+    vue: 'xml'
+};
+
+function ensureCodeElement(container) {
+    let codeEl = container.querySelector('code');
+    if (!codeEl) {
+        container.textContent = '';
+        codeEl = document.createElement('code');
+        container.appendChild(codeEl);
+    }
+    return codeEl;
+}
+
+export function getCodeTabLanguage(tab) {
+    return CODE_TAB_LANGUAGES[tab] ?? 'javascript';
+}
+
+export function renderHighlightedCode(container, source, language) {
+    const codeEl = ensureCodeElement(container);
+    const lang = hljs.getLanguage(language) ? language : 'javascript';
+
+    codeEl.removeAttribute('data-highlighted');
+    codeEl.className = `hljs language-${lang}`;
+    codeEl.textContent = source;
+
+    if (source.trim()) {
+        hljs.highlightElement(codeEl);
+    }
+
+    return source;
+}
+
+export function getPlainCodeText(container) {
+    return container.querySelector('code')?.textContent ?? container.textContent ?? '';
+}

package/demo/shared/constants.js

@@ -42,3 +42,8 @@ export const COPY_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="curre
 export const COPIED_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
     <polyline points="20 6 9 17 4 12"/>
 </svg>`;
+
+export const DELETE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+    <path d="M6 6l12 12"/>
+    <path d="M18 6L6 18"/>
+</svg>`;

package/demo/shared/demo-native.css

@@ -80,6 +80,58 @@
     height: 100%;
     pointer-events: none;
     z-index: 2;
+    overflow: visible;
+}
+
+.debug-track .debug-point-label,
+.debug-track .debug-axis-label,
+.debug-track .debug-point-hint {
+    pointer-events: none;
+    user-select: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.debug-track .debug-point-hint {
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.debug-track .debug-axis-label {
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.debug-track .debug-point-pulse {
+    animation: debug-point-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes debug-point-pulse {
+    0%, 100% { opacity: 0.3; transform: scale(1); transform-origin: center; transform-box: fill-box; }
+    50% { opacity: 0.75; transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
+}
+
+.param-row-cp {
+    position: relative;
+    z-index: 0;
+}
+
+.param-row-cp::before {
+    content: '';
+    position: absolute;
+    inset: -2px -6px;
+    border-radius: 8px;
+    background: transparent;
+    pointer-events: none;
+    z-index: -1;
+    transition: background 0.15s ease;
+}
+
+.param-row-cp.is-adjusting::before {
+    background: rgba(252, 211, 77, 0.08);
+}
+
+.param-row-cp.is-adjusting label {
+    color: #fcd34d;
 }
 
 .legend {
@@ -111,12 +163,79 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
     gap: 8px;
-    max-width: min(calc(100vw - 32px), 640px);
+    max-width: min(calc(100vw - 32px), 900px);
     transform: translateX(-50%);
     pointer-events: none;
 }
 
+.geometry-preset-divider {
+    width: 1px;
+    height: 22px;
+    background: rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    flex-shrink: 0;
+}
+
+.geometry-preset-bar .geometry-preset-btn-saved {
+    background: rgba(59, 130, 246, 0.35);
+    border-color: rgba(147, 197, 253, 0.45);
+}
+
+.geometry-preset-bar .geometry-preset-btn-saved:hover {
+    background: rgba(59, 130, 246, 0.5);
+    border-color: rgba(191, 219, 254, 0.65);
+    color: #fff;
+}
+
+.geometry-preset-saved-item {
+    position: relative;
+    pointer-events: auto;
+    flex-shrink: 0;
+}
+
+.geometry-preset-delete {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    border-radius: 50%;
+    background: rgba(15, 23, 42, 0.92);
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
+}
+
+.geometry-preset-saved-item:hover .geometry-preset-delete,
+.geometry-preset-saved-item:focus-within .geometry-preset-delete {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.geometry-preset-delete svg {
+    width: 9px;
+    height: 9px;
+    display: block;
+}
+
+.geometry-preset-delete:hover {
+    background: rgba(239, 68, 68, 0.95);
+    border-color: rgba(254, 202, 202, 0.85);
+    color: #fff;
+    transform: scale(1.08);
+}
+
 .geometry-preset-bar .geometry-preset-btn {
     pointer-events: auto;
     padding: 7px 14px;

package/demo/shared/demo.css

@@ -99,9 +99,14 @@ body {
     z-index: 20;
     backdrop-filter: blur(8px);
     flex-shrink: 0;
+    box-sizing: border-box;
+    min-width: 200px;
+    width: 20%;
+    max-width: 20%;
+    overflow-y: auto;
 }
 
-.params-panel {
+/* .params-panel {
     width: 260px;
     overflow-y: auto;
 }
@@ -109,13 +114,14 @@ body {
 .code-panel {
     width: 320px;
     overflow-y: auto;
-}
+} */
 
 body.demo-native .params-panel {
     position: absolute;
     top: 20px;
     left: 20px;
     height: calc(100vh - 80px);
+    scrollbar-gutter: stable;
 }
 
 body.demo-native .code-panel {
@@ -134,6 +140,61 @@ body.demo-native .code-panel {
     margin-bottom: 12px;
 }
 
+.params-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+}
+
+.params-save {
+    position: relative;
+    flex-shrink: 0;
+    padding: 4px 10px;
+    width: 46px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(252, 211, 77, 0.35);
+    border-radius: 6px;
+    background: rgba(252, 211, 77, 0.12);
+    color: #fcd34d;
+    font-size: 11px;
+    /* line-height: 1.2; */
+    cursor: pointer;
+}
+
+.params-save:hover {
+    background: rgba(252, 211, 77, 0.22);
+    border-color: rgba(252, 211, 77, 0.5);
+}
+
+.params-save::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 11px;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-2px);
+    transition: opacity 0.15s, transform 0.15s;
+    z-index: 1;
+}
+
+.params-save:hover::after,
+.params-save:focus-visible::after {
+    opacity: 1;
+    transform: translateY(0);
+}
+
 .params-panel-header h2,
 .code-panel-header h2 {
     margin: 0;
@@ -236,10 +297,12 @@ body.demo-native .code-panel {
 
 .param-row {
     display: grid;
-    grid-template-columns: 100px 1fr 40px;
+    grid-template-columns: 100px 1fr 44px;
     gap: 6px;
     align-items: center;
     margin-bottom: 6px;
+    min-height: 24px;
+    width: 100%;
 }
 
 .param-row label {
@@ -247,8 +310,44 @@ body.demo-native .code-panel {
     color: rgba(255, 255, 255, 0.72);
 }
 
+.param-stepper {
+    display: grid;
+    grid-template-columns: 24px 1fr 24px;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+}
+
+.param-step-btn {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 15px;
+    line-height: 1;
+    cursor: pointer;
+    flex-shrink: 0;
+    touch-action: manipulation;
+    user-select: none;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.param-step-btn:hover {
+    background: rgba(252, 211, 77, 0.15);
+    border-color: rgba(252, 211, 77, 0.35);
+    color: #fcd34d;
+}
+
+.param-step-btn:active {
+    background: rgba(252, 211, 77, 0.25);
+}
+
 .param-row input[type="range"] {
     width: 100%;
+    min-width: 0;
     accent-color: #fcd34d;
 }
 
@@ -257,6 +356,12 @@ body.demo-native .code-panel {
     color: #fcd34d;
     text-align: right;
     font-variant-numeric: tabular-nums;
+    width: 44px;
+    min-height: 1.5em;
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .param-check {
@@ -328,16 +433,28 @@ body.demo-native .code-copy-btn:focus-visible::after {
 }
 
 .code-content {
-    padding: 12px;
+    padding: 0;
     background: rgba(0, 0, 0, 0.35);
     border-radius: 8px;
     font-family: ui-monospace, Consolas, monospace;
     font-size: 11px;
     line-height: 1.5;
-    color: rgba(255, 255, 255, 0.8);
     white-space: pre-wrap;
     word-break: break-all;
     overflow-y: auto;
+    margin: 0;
+}
+
+.code-content code.hljs {
+    display: block;
+    padding: 12px;
+    background: transparent;
+    overflow: visible;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
 }
 
 body.demo-native .code-content {
@@ -376,7 +493,8 @@ body.demo-native .code-content {
     .params-panel,
     .code-panel {
         width: 100%;
-        max-width: 480px;
+        min-width: 200px;
+        max-width: 100%;
         position: static;
         max-height: none;
     }

package/demo/shared/geometry-preset-bar.js

@@ -1,25 +1,76 @@
 import { GEOMETRY_PRESETS } from './geometry-presets.js';
-
+import { DELETE_ICON_SVG } from './constants.js';
+import { loadSavedPresets } from './saved-presets.js';
 export function bindGeometryPresetBar(container, {
     presets = GEOMETRY_PRESETS,
-    onPreset
+    getSavedPresets = loadSavedPresets,
+    onPreset,
+    onSavedPreset,
+    onDeleteSaved
 } = {}) {
-    if (!container || typeof onPreset !== 'function') {
-        return () => {};
+    if (!container) {
+        return { refresh() {}, destroy() {} };
     }
 
-    container.innerHTML = '';
-    presets.forEach((preset) => {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = 'geometry-preset-btn';
-        btn.dataset.preset = preset.id;
-        btn.textContent = preset.label;
-        btn.addEventListener('click', () => onPreset(preset));
-        container.appendChild(btn);
-    });
-
-    return () => {
+    const render = () => {
         container.innerHTML = '';
+
+        presets.forEach((preset) => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'geometry-preset-btn';
+            btn.dataset.preset = preset.id;
+            btn.textContent = preset.label;
+            btn.addEventListener('click', () => onPreset?.(preset));
+            container.appendChild(btn);
+        });
+
+        const savedList = typeof getSavedPresets === 'function' ? getSavedPresets() : [];
+        if (savedList.length === 0) {
+            return;
+        }
+
+        const divider = document.createElement('span');
+        divider.className = 'geometry-preset-divider';
+        divider.setAttribute('aria-hidden', 'true');
+        container.appendChild(divider);
+
+        savedList.forEach((preset) => {
+            const wrap = document.createElement('div');
+            wrap.className = 'geometry-preset-saved-item';
+
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'geometry-preset-btn geometry-preset-btn-saved';
+            btn.dataset.preset = preset.id;
+            btn.textContent = preset.label;
+            btn.title = preset.bgOmitted
+                ? '点击加载（背景图未存入，需重新上传）'
+                : '点击加载';
+            btn.addEventListener('click', () => onSavedPreset?.(preset));
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.type = 'button';
+            deleteBtn.className = 'geometry-preset-delete';
+            deleteBtn.innerHTML = DELETE_ICON_SVG;
+            deleteBtn.setAttribute('aria-label', `删除 ${preset.label}`);
+            deleteBtn.addEventListener('click', (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onDeleteSaved?.(preset);
+            });
+
+            wrap.appendChild(btn);
+            wrap.appendChild(deleteBtn);
+            container.appendChild(wrap);
+        });    };
+
+    render();
+
+    return {
+        refresh: render,
+        destroy() {
+            container.innerHTML = '';
+        }
     };
 }

package/demo/shared/geometry-presets.js

@@ -86,8 +86,8 @@ export const GEOMETRY_PRESETS = [
         bezier: {
             fitted: {
                 p0: { x: 0.015, y: 0.48 },
-                p1: { x: 0.48, y: 1.08 },
-                p2: { x: 0.985, y: -0.02 }
+                p1: { x: 0.48, y: 0.48 },
+                p2: { x: 0.985, y: 0.48 }
             },
             curveSmooth: 0.1,
             rightTilt: 1,

package/demo/shared/params-panel.js

@@ -1,9 +1,80 @@
 import { PARAM_SCHEMA } from './constants.js';
 import { getByPath, paramFieldId } from './param-utils.js';
+import { parseControlPointPath } from './track-helpers.js';
+
+function parseParamValue(raw, field) {
+    const num = Number(raw);
+    return field.step >= 1 ? Math.round(num) : num;
+}
+
+function clampParamValue(value, field) {
+    const num = parseParamValue(value, field);
+    return Math.min(field.max, Math.max(field.min, num));
+}
+
+function formatParamOutput(value, field) {
+    const num = parseParamValue(value, field);
+    if (field.step >= 1) return String(num);
+    const stepText = String(field.step);
+    const decimals = stepText.includes('.') ? stepText.split('.')[1].length : 0;
+    return String(Number(num.toFixed(decimals)));
+}
+
+function applyParamInput(input, output, field, value, onParamChange) {
+    const num = clampParamValue(value, field);
+    input.value = String(num);
+    output.textContent = formatParamOutput(num, field);
+    onParamChange(field.path, num);
+}
+
+const STEP_HOLD_DELAY_MS = 400;
+const STEP_REPEAT_INTERVAL_MS = 80;
+
+function bindStepButtonHold(btn, stepOnce, { onHoldStart, onHoldEnd } = {}) {
+    let delayTimer = null;
+    let repeatTimer = null;
+    let holding = false;
+
+    const clearTimers = () => {
+        if (delayTimer != null) {
+            clearTimeout(delayTimer);
+            delayTimer = null;
+        }
+        if (repeatTimer != null) {
+            clearInterval(repeatTimer);
+            repeatTimer = null;
+        }
+    };
+
+    const stopHold = () => {
+        if (!holding) return;
+        holding = false;
+        clearTimers();
+        onHoldEnd?.();
+    };
+
+    btn.addEventListener('pointerdown', (event) => {
+        event.preventDefault();
+        btn.setPointerCapture(event.pointerId);
+        holding = true;
+        onHoldStart?.();
+        stepOnce();
+        clearTimers();
+        delayTimer = setTimeout(() => {
+            repeatTimer = setInterval(stepOnce, STEP_REPEAT_INTERVAL_MS);
+        }, STEP_HOLD_DELAY_MS);
+    });
+
+    btn.addEventListener('pointerup', stopHold);
+    btn.addEventListener('pointercancel', stopHold);
+    btn.addEventListener('lostpointercapture', stopHold);
+}
 
 export function bindParamsPanel(paramsForm, {
     getParams,
     onParamChange,
+    onControlPointAdjustStart,
+    onControlPointAdjustEnd,
     schema = PARAM_SCHEMA,
     fadeSectionTitle = '动画',
     animationCheckboxes = [
@@ -33,21 +104,55 @@ export function bindParamsPanel(paramsForm, {
 
         row.innerHTML = `
             <label for="${id}">${field.label}</label>
-            <input type="range" id="${id}" min="${field.min}" max="${field.max}" step="${field.step}" value="${val}" />
-            <output for="${id}">${val}</output>
+            <div class="param-stepper">
+                <button type="button" class="param-step-btn" data-step="-1" aria-label="${field.label} 减小">−</button>
+                <input type="range" id="${id}" min="${field.min}" max="${field.max}" step="${field.step}" value="${val}" />
+                <button type="button" class="param-step-btn" data-step="1" aria-label="${field.label} 增大">+</button>
+            </div>
+            <output for="${id}">${formatParamOutput(val, field)}</output>
         `;
 
         const input = row.querySelector('input');
         const output = row.querySelector('output');
+        const stepButtons = row.querySelectorAll('.param-step-btn');
 
         input.addEventListener('input', () => {
-            const num = field.step >= 1
-                ? Math.round(Number(input.value))
-                : Number(input.value);
-            onParamChange(field.path, num);
-            output.textContent = String(num);
+            applyParamInput(input, output, field, input.value, onParamChange);
+        });
+
+        const controlHint = parseControlPointPath(field.path);
+
+        stepButtons.forEach((btn) => {
+            const delta = Number(btn.dataset.step) * field.step;
+            const stepOnce = () => {
+                applyParamInput(input, output, field, Number(input.value) + delta, onParamChange);
+            };
+
+            const holdCallbacks = controlHint
+                ? {
+                    onHoldStart: () => onControlPointAdjustStart?.(controlHint),
+                    onHoldEnd: () => onControlPointAdjustEnd?.()
+                }
+                : {};
+
+            bindStepButtonHold(btn, stepOnce, holdCallbacks);
         });
 
+        if (controlHint) {
+            row.classList.add('param-row-cp');
+            row.dataset.controlPoint = controlHint.point;
+            row.dataset.controlAxis = controlHint.axis;
+
+            const startControlAdjust = () => {
+                onControlPointAdjustStart?.(controlHint);
+                window.addEventListener('pointerup', () => {
+                    onControlPointAdjustEnd?.();
+                }, { once: true });
+            };
+
+            input.addEventListener('pointerdown', startControlAdjust);
+        }
+
         sections.get(field.section).appendChild(row);
     });
 

package/demo/shared/saved-presets.js

@@ -0,0 +1,66 @@
+import { deepClone } from './param-utils.js';
+
+export const SAVED_PRESETS_STORAGE_KEY = 'bezier-slider-demo-saved-presets';
+const MAX_SAVED_COUNT = 16;
+const MAX_BG_DATA_URL_LENGTH = 900_000;
+
+export function loadSavedPresets() {
+    try {
+        const raw = localStorage.getItem(SAVED_PRESETS_STORAGE_KEY);
+        if (!raw) return [];
+        const list = JSON.parse(raw);
+        return Array.isArray(list) ? list : [];
+    } catch {
+        return [];
+    }
+}
+
+function writeSavedPresets(list) {
+    localStorage.setItem(SAVED_PRESETS_STORAGE_KEY, JSON.stringify(list));
+}
+
+export function removeSavedPreset(id) {
+    const next = loadSavedPresets().filter((item) => item.id !== id);
+    writeSavedPresets(next);
+    return next;
+}
+
+export function buildPresetSnapshot({
+    label,
+    params,
+    bgUrl,
+    bgFileName,
+    bgNaturalSize
+}) {
+    const includeBg = typeof bgUrl === 'string'
+        && bgUrl.length > 0
+        && bgUrl.length <= MAX_BG_DATA_URL_LENGTH;
+
+    return {
+        id: `saved-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        label: label.trim(),
+        savedAt: Date.now(),
+        params: deepClone(params),
+        bgUrl: includeBg ? bgUrl : null,
+        bgFileName: includeBg ? (bgFileName || '') : '',
+        bgNaturalSize: deepClone(bgNaturalSize),
+        bgOmitted: Boolean(bgUrl && !includeBg)
+    };
+}
+
+export function savePresetSnapshot(snapshot) {
+    const list = loadSavedPresets();
+    if (list.length >= MAX_SAVED_COUNT) {
+        throw new Error(`最多保存 ${MAX_SAVED_COUNT} 个配置，请先点击快捷按钮右上角删除旧配置`);
+    }
+
+    list.push(snapshot);
+
+    try {
+        writeSavedPresets(list);
+    } catch {
+        throw new Error('保存失败：浏览器存储空间不足，请删除部分已存配置或减少背景图大小');
+    }
+
+    return list;
+}

package/demo/shared/track-helpers.js

@@ -48,21 +48,107 @@ export function applyBgLayer(bgLayer, bgUrl = null) {
     bgLayer.style.backgroundSize = '100% 100%';
 }
 
-export function updateDebugTrack(trackLayer, layout, visible, BezierSliderClass) {
+const CONTROL_POINT_META = {
+    p0: { label: 'P0', color: '#38bdf8', influence: [0, 0.45], hint: '左端起点' },
+    p1: { label: 'P1', color: '#fb923c', influence: [0.15, 0.85], hint: '中间弧度' },
+    p2: { label: 'P2', color: '#c084fc', influence: [0.55, 1], hint: '右端终点' }
+};
+
+export function parseControlPointPath(path) {
+    const match = String(path).match(/^bezier\.fitted\.(p[012])\.([xy])$/);
+    if (!match) return null;
+    return { point: match[1], axis: match[2] };
+}
+
+function sampleCurveSegment(curve, tStart, tEnd, pointOnCurve, steps = 20) {
+    const parts = [];
+    for (let i = 0; i <= steps; i++) {
+        const t = tStart + (tEnd - tStart) * (i / steps);
+        const { x, y } = pointOnCurve(t, curve);
+        parts.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
+    }
+    return parts.join(' ');
+}
+
+function setSvgContent(svg, layout, BezierSliderClass, activeControl) {
+    const { bezier } = layout;
+    if (!bezier) return;
+
+    const pointOnCurve = BezierSliderClass.pointOnCurve;
+    const curvePath = BezierSliderClass.bezierPath(bezier);
+    const { p0, p1, p2 } = bezier;
+    const activeKey = activeControl?.point ?? null;
+    const activeMeta = activeKey ? CONTROL_POINT_META[activeKey] : null;
+
+    let influencePath = '';
+    if (activeMeta) {
+        const [t0, t1] = activeMeta.influence;
+        influencePath = `<path class="debug-influence" fill="none" stroke="${activeMeta.color}" stroke-width="5" stroke-linecap="round" opacity="0.55" d="${sampleCurveSegment(bezier, t0, t1, pointOnCurve)}"/>`;
+    }
+
+    let axisHint = '';
+    if (activeControl && activeMeta) {
+        const pt = bezier[activeControl.point];
+        const len = Math.min(56, Math.max(36, layout.width * 0.1));
+        const half = len / 2;
+        const color = activeMeta.color;
+        if (activeControl.axis === 'x') {
+            axisHint = `
+                <line class="debug-axis" x1="${pt.x - half}" y1="${pt.y}" x2="${pt.x + half}" y2="${pt.y}" stroke="${color}" stroke-width="2" marker-start="url(#debugArrow)" marker-end="url(#debugArrow)" opacity="0.95"/>
+                <text class="debug-axis-label" x="${pt.x + half + 6}" y="${pt.y + 4}" fill="${color}">X →</text>`;
+        } else {
+            axisHint = `
+                <line class="debug-axis" x1="${pt.x}" y1="${pt.y - half}" x2="${pt.x}" y2="${pt.y + half}" stroke="${color}" stroke-width="2" marker-start="url(#debugArrow)" marker-end="url(#debugArrow)" opacity="0.95"/>
+                <text class="debug-axis-label" x="${pt.x + 6}" y="${pt.y + half + 14}" fill="${color}">Y ↓</text>`;
+        }
+    }
+
+    const controlPoints = ['p0', 'p1', 'p2'].map((key) => {
+        const pt = bezier[key];
+        const meta = CONTROL_POINT_META[key];
+        const isActive = key === activeKey;
+        const r = isActive ? 7 : 5;
+        const opacity = isActive ? 1 : 0.55;
+        const stroke = isActive ? '#fff' : meta.color;
+        const fill = isActive ? meta.color : 'rgba(0,0,0,0.35)';
+        const pulse = isActive
+            ? `<circle cx="${pt.x}" cy="${pt.y}" r="14" fill="none" stroke="${meta.color}" stroke-width="2" opacity="0.45" class="debug-point-pulse"/>`
+            : '';
+        const hint = isActive
+            ? `<text class="debug-point-hint" x="${pt.x}" y="${pt.y - 16}" fill="${meta.color}" text-anchor="middle">${meta.hint} · 调${activeControl.axis.toUpperCase()}</text>`
+            : '';
+        return `${pulse}
+            <circle class="debug-point" data-point="${key}" cx="${pt.x}" cy="${pt.y}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="2" opacity="${opacity}"/>
+            <text class="debug-point-label" x="${pt.x}" y="${pt.y + 4}" fill="${isActive ? '#fff' : meta.color}" text-anchor="middle" font-size="10" font-weight="600">${meta.label}</text>
+            ${hint}`;
+    }).join('');
+
+    svg.innerHTML = `
+        <defs>
+            <marker id="debugArrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor"/>
+            </marker>
+        </defs>
+        ${influencePath}
+        <path class="debug-curve" fill="none" stroke="lime" stroke-width="2" stroke-dasharray="6 4" opacity="0.85" d="${curvePath}"/>
+        <line class="debug-polygon" x1="${p0.x}" y1="${p0.y}" x2="${p1.x}" y2="${p1.y}" stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3"/>
+        <line class="debug-polygon" x1="${p1.x}" y1="${p1.y}" x2="${p2.x}" y2="${p2.y}" stroke="rgba(255,255,255,0.22)" stroke-width="1" stroke-dasharray="4 3"/>
+        <g class="debug-axis-hints" color="${activeMeta?.color ?? '#fff'}">${axisHint}</g>
+        <g class="debug-control-points">${controlPoints}</g>`;
+}
+
+export function updateDebugTrack(trackLayer, layout, visible, BezierSliderClass, activeControl = null) {
     let svg = trackLayer.querySelector('.debug-track');
     if (!visible) {
         svg?.remove();
         return;
     }
     if (!svg) {
-        trackLayer.insertAdjacentHTML(
-            'afterbegin',
-            '<svg class="debug-track" preserveAspectRatio="none"><path fill="none" stroke="lime" stroke-width="2" stroke-dasharray="6 4" opacity="0.85"/></svg>'
-        );
+        trackLayer.insertAdjacentHTML('afterbegin', '<svg class="debug-track" preserveAspectRatio="none"></svg>');
         svg = trackLayer.querySelector('.debug-track');
     }
     svg.setAttribute('viewBox', getTrackViewBox(layout));
-    svg.querySelector('path').setAttribute('d', BezierSliderClass.bezierPath(layout.bezier));
+    setSvgContent(svg, layout, BezierSliderClass, activeControl);
 }
 
 export function readImageFile(file) {

package/dist/bezier-slider.mjs

@@ -32,10 +32,10 @@ var k = (c, a, o) => (q(c, typeof a != "symbol" ? a + "" : a, o), o);
       fitted: {
         p0: { x: 0.015, y: 0.48 },
         // 左端略低（接近原默认高度）
-        p1: { x: 0.48, y: 1.08 },
-        // 控制点下压，保留滑轨弧度
-        p2: { x: 0.985, y: -0.02 }
-        // 右端偏高
+        p1: { x: 0.48, y: 0.48 },
+        // 控制点 Y 直接参与弧度（不再被 rightTilt 覆盖）
+        p2: { x: 0.985, y: 0.48 }
+        // 右端 Y 为基准，rightEndOffset 在其上叠加
       },
       curveSmooth: 0.1,
       // 略平滑，弧线仍清晰
@@ -240,20 +240,17 @@ var k = (c, a, o) => (q(c, typeof a != "symbol" ? a + "" : a, o), o);
     };
   }
   function O(e, t, s) {
-    const i = e.p0.y, n = i - s, r = {
-      x: 0.45,
-      y: (i + n) / 2 + 0.05
-    };
-    return {
-      p0: e.p0,
-      p1: {
-        x: e.p1.x + (r.x - e.p1.x) * t,
-        y: e.p1.y + (r.y - e.p1.y) * t
-      },
+    return t ? {
+      p0: { ...e.p0 },
+      p1: { ...e.p1 },
       p2: {
         x: e.p2.x,
-        y: e.p2.y + (n - e.p2.y) * t
+        y: e.p2.y - s * t
       }
+    } : {
+      p0: { ...e.p0 },
+      p1: { ...e.p1 },
+      p2: { ...e.p2 }
     };
   }
   function D(e, { t, degrees: s }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bezier-slider",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "二次贝塞尔弧形图标滑块组件，支持原生 JavaScript、Vue 3 和 React",
   "main": "dist/bezier-slider.mjs",
   "module": "dist/bezier-slider.mjs",
@@ -23,13 +23,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "vue": "^3.4.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vue": ">=3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-vue": "^4.6.2",
+    "highlight.js": "^11.11.1",
     "vite": "^4.5.2"
   },
   "peerDependencies": {

package/src/bezier-slider.native.js

@@ -43,8 +43,8 @@
             // 基础二次贝塞尔三控制点（归一化坐标 0~1，y 越大越低）
             fitted: {
                 p0: { x: 0.015, y: 0.48 },   // 左端略低（接近原默认高度）
-                p1: { x: 0.48, y: 1.08 },    // 控制点下压，保留滑轨弧度
-                p2: { x: 0.985, y: -0.02 }   // 右端偏高
+                p1: { x: 0.48, y: 0.48 },    // 控制点 Y 直接参与弧度（不再被 rightTilt 覆盖）
+                p2: { x: 0.985, y: 0.48 }    // 右端 Y 为基准，rightEndOffset 在其上叠加
             },
             curveSmooth: 0.1,             // 略平滑，弧线仍清晰
             rightTilt: 1,
@@ -373,25 +373,24 @@
     }
 
     /**
-     * 右端高度微调：控制右端相对左端的上扬幅度
-     * 通过调整 P1、P2 的 y 实现，保持二次贝塞尔类型不变
+     * 右端高度微调：仅在 fitted 基础上叠加 P2 的 Y 偏移
+     * 不修改 P1，以便控制点 P1 的 X/Y 滑块直接生效
      */
     function easeRightTilt(bezier, tilt, rightEndOffset) {
-        const leftY = bezier.p0.y;
-        const targetP2Y = leftY - rightEndOffset;
-        const targetP1 = {
-            x: 0.45,
-            y: (leftY + targetP2Y) / 2 + 0.05
-        };
+        if (!tilt) {
+            return {
+                p0: { ...bezier.p0 },
+                p1: { ...bezier.p1 },
+                p2: { ...bezier.p2 }
+            };
+        }
+
         return {
-            p0: bezier.p0,
-            p1: {
-                x: bezier.p1.x + (targetP1.x - bezier.p1.x) * tilt,
-                y: bezier.p1.y + (targetP1.y - bezier.p1.y) * tilt
-            },
+            p0: { ...bezier.p0 },
+            p1: { ...bezier.p1 },
             p2: {
                 x: bezier.p2.x,
-                y: bezier.p2.y + (targetP2Y - bezier.p2.y) * tilt
+                y: bezier.p2.y - rightEndOffset * tilt
             }
         };
     }