bezier-slider 1.0.3 → 1.0.4

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>
@@ -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;
@@ -108,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}`;
     }
 
@@ -213,6 +221,55 @@ 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,
@@ -220,11 +277,14 @@ document.addEventListener('DOMContentLoaded', () => {
         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);
@@ -272,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

@@ -110,11 +110,24 @@
     50% { opacity: 0.75; transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
 }
 
-.param-row-cp.is-adjusting {
-    background: rgba(252, 211, 77, 0.08);
+.param-row-cp {
+    position: relative;
+    z-index: 0;
+}
+
+.param-row-cp::before {
+    content: '';
+    position: absolute;
+    inset: -2px -6px;
     border-radius: 8px;
-    margin: 0 -6px;
-    padding: 4px 6px;
+    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 {
@@ -150,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/params-panel.js

@@ -2,6 +2,74 @@ 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,
@@ -36,36 +104,53 @@ 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;
 
-            input.addEventListener('pointerdown', () => {
+            const startControlAdjust = () => {
                 onControlPointAdjustStart?.(controlHint);
                 window.addEventListener('pointerup', () => {
                     onControlPointAdjustEnd?.();
                 }, { once: true });
-            });
-            input.addEventListener('blur', () => {
-                onControlPointAdjustEnd?.();
-            });
+            };
+
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bezier-slider",
-  "version": "1.0.3",
+  "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": {