企业官网建设流程全解析

DialKit 是一个帮你实时调试界面参数的开源工具库：在运行中的应用里直接拖动滑块、调色、改动画曲线，无需反复改代码重启。它同时支持 React、Solid、Svelte、Vue 和原生 Vanilla JS 五种技术栈，本文带你完成 DialKit 多框架接入，从安装命令到最小代码示例，一篇讲清。

一、为什么需要 DialKit？

调 UI 参数时你是不是也这样：改一个borderRadius: 24，刷新、看效果，不满意再改……

DialKit 把这件事变成"拨动旋钮"的体验 🎛️：

• 实时控件面板：滑块、开关、颜色选择器、XY 旋钮、下拉框一应俱全，拖动即生效
• 版本（预设）对比：把调好的参数存成版本，随时切换回退
• 时间线工具：像剪辑软件一样拖动、缩放动画片段，调整缓动曲线
• 零依赖可选：Vanilla JS 适配器不带任何运行时依赖，纯 HTML 页面也能用

接入后，页面上会出现一个可拖拽、可折叠的浮层面板（DialRoot），所有注册的参数都集中管理。

二、DialKit 一键安装步骤

安装命令因框架略有差异（React/Solid/Vue 需要搭配 motion 动画库）：

依赖声明见 package.json，各入口的导出定义可在 src/index.ts（React）与 src/vanilla/index.ts（原生）中查到。

三、五大框架接入对照表

接入 API 的命名遵循各框架习惯，记住一张表就够了：

config 怎么写？一个普通对象即可：键名自动变成面板标签，值决定控件类型。例如radius: [24, 0, 64]是滑块（默认值、最小、最大），visible: true是开关，accent: "#a78bfa"是颜色选择器，嵌套对象会自动折叠成文件夹。完整控件清单见 docs/reference.md。

四、各框架最小接入代码

4.1 React 接入

import { DialRoot, useDialKit } from "dialkit"; import "dialkit/styles.css"; export default function App() { const values = useDialKit("Card", { radius: [24, 0, 64], color: "#a78bfa", }); return ( <> <div style={{ borderRadius: values.radius, background: values.color }}>Card</div> <DialRoot /> </> ); }

提示：Next.js App Router 中请在客户端组件里使用。

4.2 Solid 接入

import { createDialKit, DialRoot } from "dialkit/solid"; import "dialkit/styles.css"; const values = createDialKit("Card", { radius: [24, 0, 64] }); return ( <> <div style={{ "border-radius": `${values().radius}px` }}>Card</div> <DialRoot /> </> );

Solid 遵循其惯例，通过返回的 accessor 读取：values().radius。

4.3 Svelte 接入

<script> import { createDialKit, DialRoot } from "dialkit/svelte"; const values = createDialKit("Card", { radius: [24, 0, 64] }); </script> <div style:border-radius={`${values.radius}px`}>Card</div> <DialRoot />

Svelte 版DialRoot会自动注入样式，无需手动导入 CSS。

4.4 Vue 接入

<script setup> import { DialRoot, useDialKit } from "dialkit/vue"; import "dialkit/styles.css"; const values = useDialKit("Card", { radius: [24, 0, 64] }); </script> <template> <div :style="{ borderRadius: `${values.radius}px` }">Card</div> <DialRoot /> </template>

模板中 ref 会自动解包；在<script>里则需要values.value.radius。

4.5 Vanilla JS 接入（无依赖）

import { createDialKit, createDialRoot } from "dialkit/vanilla"; import "dialkit/vanilla/styles.css"; const card = document.querySelector("#card"); const root = createDialRoot(); const kit = createDialKit("Card", { radius: [24, 0, 64] }); kit.subscribe(values => { card.style.borderRadius = `${values.radius}px`; });

没有打包器？把构建产物中的dist/vanilla/browser.global.js和dist/vanilla/styles.css拷进项目，用<script>标签直接引用即可，完全离线可用。官方纯 HTML 示例见 examples/vanilla/index.html。

五、跑一跑官方示例 🚀

想直观感受效果？clone 仓库后启动example/目录（一个 Vite + React 工程）：

git clone https://gitcode.com/gh_mirrors/di/dialkit cd dialkit/example npm install npm run dev # 默认端口 3000

首页是一个"照片堆叠"演示，参数面板里可以实时调整照片的阴影、偏移、弹簧过渡等十几个参数：

核心实现就在 example/src/PhotoStack.tsx——注意看useDialKit里如何定义颜色、文件夹和 spring 控件。同目录还有 EasingDemo.tsx（缓动曲线调试）与 DialPadDemo.tsx（XY 旋钮）两个演示页面，入口配置见 example/src/main.tsx。

六、进阶：面板布局、快捷键与持久化

6.1 面板布局与主题

DialRoot常用选项：

6.2 快捷键加速调试 ⚡

const values = useDialKit("Card", { radius: [24, 0, 64], visible: true }, { shortcuts: { radius: { key: "r", mode: "fine" }, visible: { key: "v" } }, });

按住R滚动鼠标即可微调圆角，按V切换显隐，改参数从此解放双手。

6.3 跨刷新保留参数

useDialKit("Card", config, { id: "card", persist: true });

加上persist: true后，参数值与已保存的版本会写入localStorage（键名为dialkit:card），刷新页面不丢失。

6.4 别忘了生产环境隐藏

框架版DialRoot在生产构建中默认自动隐藏（Vanilla 版默认显示）；若希望生产环境仍可见，设置productionEnabled: true。它只控制编辑面板，不影响读取参数值的业务代码。

七、如何选择你的接入方式？

• 已有 React / Vue 项目→ 装对应适配器，10 行代码接入，体验最顺滑
• Svelte / Solid 用户→ 同样开箱即用，Svelte 版连 CSS 都帮你注好了
• 老旧页面、纯 HTML、工具脚本→ 选 Vanilla 版，无依赖、可离线、还能直接file://打开

调参、对比版本、打磨动画，把"改代码—刷新"的循环变成"拖一下—看一眼"。更多 API 细节可查阅 README.md、docs/reference.md 和 docs/timeline.md。