LLH · 一套轻量的后台 UI 框架

Why LLH

为什么再造一个框架

因为绝大多数内部系统并不需要一套前端工程化。它们需要的是：稳定的视觉、够用的组件、不用教就能上手。 LLH 只做这三件事，并把所有可调项收敛成 30 多个 CSS 变量。

一套令牌，全站统一

颜色、圆角、阴影、字体、尺寸全部走 CSS 变量。换主色只改一个 --llh-primary，整套按钮、标签、选中态跟着变。

零依赖，零构建

一个 CSS、一个 JS，直接 link 引入。没有 node_modules，没有编译步骤，丢进任何 PHP、JSP、Django 项目都能跑。

布局骨架现成

侧边栏可折叠、移动端抽屉化、顶栏吸顶、内容区自适应，三行结构即可搭出完整后台，不用再调 flex。

深浅双主题

在 html 上切换 data-llh-theme="dark" 即整套变色，自动记忆到 localStorage，无需维护两套样式。

40+ 组件

按钮、表单、表格、标签页、弹窗、抽屉、下拉、气泡、轮播、分页、步骤条、时间线、树、上传、评分、空状态、骨架屏，覆盖中后台日常。

默认可用

弹窗自动锁滚动、Esc 关闭、焦点回归，下拉点外部收起，标签页切换零 JS，键盘 tab 有清晰 focus 环。

Get started

三分钟上手

把 oak 目录整个丢进项目，改一行链接就能用。没有构建步骤，也不需要改任何配置。

第 1 步 · 引入资源

<link rel="stylesheet" href="/oak/assets/llh.css">
<script src="/oak/assets/llh.js" defer></script>

第 2 步 · 复制布局骨架

<div class="llh-layout">
    <aside class="llh-sidebar">
        <a class="llh-sidebar__brand" href="/">
            <span class="llh-sidebar__logo">LLH</span>
            <span class="llh-sidebar__name">控制台</span>
        </a>
        <nav class="llh-sidebar__nav">
            <a class="llh-sidebar__link is-active" href="/">首页</a>
        </nav>
    </aside>
    <div class="llh-main">
        <header class="llh-topbar">...</header>
        <main class="llh-content">...</main>
    </div>
</div>

第 3 步 · 用 data 属性驱动交互

<!-- 打开弹窗 -->
<button class="llh-btn llh-btn--primary" data-llh-toggle="modal" data-llh-target="#demoModal">打开</button>

<!-- 折叠侧边栏 -->
<button class="llh-ico-btn" data-llh-toggle="sidebar">折叠</button>

<!-- 切换主题 -->
<button class="llh-ico-btn" data-llh-toggle="theme">主题</button>

<script>
LLH.toast('保存成功', { type: 'success' });
LLH.modal.open('#demoModal');
LLH.theme.set('dark');
</script>

所有交互都由 data-llh-* 属性委托处理，页面里不需要写初始化代码。动态插入的节点调用一次 LLH.init(scope) 即可绑定。

Design tokens

设计令牌

全部定义在 :root 上，覆盖这些变量就能整站换肤。深色主题只重定义同名变量，组件样式一行都不用改。

主色
--llh-primary

正文
--llh-ink

次要文字
--llh-ink-3

描边
--llh-line-2

页面底色
--llh-bg

卡片
--llh-card

成功
--llh-success

危险
--llh-danger

换主色

:root {
    --llh-primary: #0f766e;
    --llh-primary-hover: #0d6a62;
    --llh-primary-active: #0b5a53;
    --llh-primary-soft: rgba(15, 118, 110, .10);
}

圆角与阴影

sm 8 md 12 lg 14 xl 16 pill

shadow-1 shadow-2 shadow-3

Components

组件长什么样

随手挑几个常用组件。完整列表在组件总览，每个组件都标注了用到的类名。

按钮 Button

标签 Badge

进行中已完成待审核已取消 Solid

开关与勾选

启用小号记住我

进度 Progress

分段控制器 Segmented

日周月

加载中

折叠面板 Accordion

展开状态

原生 details，无需脚本，内容可被浏览器搜索命中。

收起状态

点击标题展开。

Files

交付清单

文件	说明	必需
`assets/llh.css`	设计令牌、布局与全部组件样式，未压缩约 61KB（gzip 后约 11KB）	是
`assets/llh.js`	弹窗、抽屉、下拉、提示、主题、标签页、轮播、侧栏折叠、返回顶部，约 13KB	是
`index.html`	本页，框架概览与快速开始	否
`dashboard.html`	后台布局完整演示	否
`components.html`	组件总览，逐个标注完整类名与状态类	否
`docs.html`	类名速查、变量表、JS API、常见问题	否
`assets/demo.css`	仅演示页使用，可整目录不拷贝	否

一套骨架，撑起所有后台