【XIUNOX插件】图标库演示 v1.0.0 [复制链接]

管理员组

xnx_icon_gallery 图标库演示

前台图标浏览页:a,支持搜索、常规/实心分类与点击复制,供开发者与用户查阅。访问 /icons.htm

功能

  • 图标清单实时解析自 view/vendor/tabler-icons/tabler-icons.min.css,不独立维护列表,字体子集更新后页面自动同步

  • 分类筛选:名称以 -filled 结尾为实心(filled),其余为常规(outline),分类按钮带数量徽章

  • 关键字搜索:按图标名本地过滤(如 home / heart),实时计数,无 AJAX

  • 点击图标复制 class(如 ti-home),优先 navigator.clipboard,失败降级 execCommand('copy'),toast 反馈

  • 无匹配结果时显示空状态提示

  • 接入发现页(DiscoverService,rank 120),前台导航可直达

  • 纯展示插件:不建表、无后台设置,随装随用

文件结构

plugin/xnx_icon_gallery/
├── conf.json
├── install.php / uninstall.php       # 留空守卫:无表、无配置
├── discover_register.php             # 自注册到发现页,不改核心 DiscoverService.php
├── route/icons.php                   # /icons.htm:解析 CSS 得图标清单,分 outline/filled
├── hook/
│   ├── index_route_case_end.php      # case 'icons' 路由分发
│   ├── model_route_table_end.php     # $routes['icons'],url('icons') 生成伪静态地址
│   ├── lang_zh_cn_bbs.php
│   ├── lang_zh_tw_bbs.php
│   └── lang_en_us_bbs.php
├── view/htm/icons.htm                # 独立工具页模板(header/footer 包裹,不用三栏骨架,居中铺满)
├── static/
│   ├── css/gallery.css
│   └── js/gallery.js                 # 原生 JS,无 jQuery 依赖
└── lang/
    ├── zh-cn.php / zh-tw.php / en-us.php

实现要点

  • 服务端一次性渲染全部图标进 DOM,前端本地过滤,不依赖任何接口

  • 静态资源 URL 用 filemtime 作版本串,改动 JS/CSS 后浏览器自动拉新,无需手动 bump

  • 前端文案经模板 json_encode(HEX 转义)注入 window.XIUNOX_GALLERY.lang,复制提示走 XN.toast

  • 列表与用户输入均经 esc_attr / esc_html 转义输出

配置流程

  1. 后台「插件管理」启用 xnx_icon_gallery

  2. 访问 /icons.htm(或从发现页进入)浏览图标,搜索筛选后点击复制 class 即可用于模板/插件开发

  3. 如需扩充图标,用 tool/subset_tabler_icons.py 重新子集化字体,图标库页面自动跟随更新



图标库演示 截图



版本:v1.0.0
适用版本:1.1
开发者:贰先生

请登录后查看此内容
最新回复

请先登录后再回复 登录