说明

想给后台系统换张“Win10脸”？Win10-UI 直接帮你把 Windows 10 桌面搬进浏览器：会动的磁贴、能拖的窗口、带消息中心的小娜菜单，全都打包好。不用啃文档，照着 HTML 拼积木就能搭出桌面、开始菜单、任务栏，手机端也能自动缩放，懒得写 JS 也能玩。

——下面三招，10 分钟搞定个性化后台。

1. 桌面图标想放啥就放啥
把下面这段代码随便塞到页面，图标可以是图片，也能塞一整段 HTML：
“`html
<div id=”win10-shortcuts”>
<div class=”shortcut” onclick=”alert(‘hello’)”>
<img src=”logo.png” class=”icon”>
<div class=”title”>首页</div>
</div>

<div class=”shortcut” onclick=”location.href=’/report'”>
<div class=”icon”>
<!– 随便写，比如放 echarts 图表 –>
<span style=”color:#409eff”>📊</span>
</div>
<div class=”title”>报表</div>
</div>
</div>
“`
图标大小、排序、点击事件全靠这段结构，改完刷新立即生效。

2. 开始菜单列表，两级随便混
一级菜单加 `item`，二级菜单加 `sub-item`，顺序写对就行，不用嵌套：
“`html
<div class=”list win10-menu-hidden”>
<div class=”item”>系统概览</div>
<div class=”item”>用户管理</div>
<div class=”sub-item”>新增用户</div>
<div class=”sub-item”>角色权限</div>
<div class=”item”>退出登录</div>
</div>
“`
框架会自动把“新增用户”“角色权限”归到“用户管理”下面，省心。

3. 磁贴区域像拼地板
先把区域切成 6×N 的小格子，再用 `loc` 定起点、`size` 占几格：
“`html
<div class=”blocks”>
<div class=”menu_group”>
<div class=”title”>常用功能</div>
<div loc=”1,1″ size=”1,1″ class=”block”>
<div class=”content”>待办</div>
</div>
<div loc=”2,1″ size=”2,2″ class=”block”>
<div class=”content”>数据大盘</div>
</div>
</div>

<div class=”menu_group”>
<div class=”title”>监控中心</div>
<div loc=”1,1″ size=”1,1″ class=”block”>
<div class=”content”>服务器</div>
</div>
</div>
</div>
“`
想再大一点？把 `size` 改成 `3,2`，立刻横向拉宽。

到此，后台颜值已上线，剩下的业务接口你爱怎么接怎么接。

演示图

感谢您的来访，获取更多精彩文章请收藏本站。