V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhangfg
V2EX  ›  分享创造

react-antd-console 支持主题和多标签了

  •  
  •   zhangfg · 9 天前 · 1164 次点击

    Github 地址 | 在线预览 | 文档

    react-antd-console 是一个后台管理系统的前端解决方案,封装了后台管理系统必要功能(如登录、鉴权、菜单、面包屑、标签页等),帮助开发人员专注于业务快速开发。项目基于 React 18Ant design 5ViteTypeScript 等新版本。对于使用到的各项技术,会被持续更新至最新版本

    如果你喜欢这个项目或认为对你有用,欢迎使用体验和 Star

    概述

    在本项目发布之初,我们额外提供了一个主题版的预览。在主题版中,额外多了主题、多标签、示例等功能。如今,这些功能中的核心部分,经过了优化,已经都被本项目所支持,并保持了整体代码的精简。之前的文章多从技术层面介绍,以下主要从产品层面做一些介绍

    布局

    • 布局设计为多个圆角、阴影的模块的组合,有一些立体感。菜单、页头、页脚空间紧凑,把大空间留给了页面内容
    • 提供了全局全屏(按钮在页头)和页面全屏(按钮在多标签的右键菜单)功能,进一步放大页面主体内容
    • 页头提供了刷新页面按钮,点击有动画效果
    • 页面切换/刷新时有进度条,颜色随主色
    • 页头提供了切换语言按钮

    主题

    Light Dark
    Yolk Cosmic
    Ocean Monokai
    • 页头提供主色选择器,主色可动态切换为任意颜色
    • Layout 背景色和 Container 背景色也可任意配置。可与主色搭配配置不同主题风格。代码亦支持动态切换,但没有开放到界面上
    • 页头提供亮色/暗色动态切换按钮

    多标签

    • 打开路由页面自动新增/切换 tab
    • 刷新页面保留 tab 记录
    • 支持右键菜单,包括关闭当前、关闭其他、关闭左右、刷新页面、当前页全屏等功能
    • 可拖拽
    • 动画效果,交互体验更佳
    • 支持同时展示不同 id 的相同路由页面。例如详情页 a 和详情页 b 可以同时显示在多标签中

    其他动画效果

    • 页面切换时,有动画效果,代码可配置
    • 页头功能按钮 hover 时放大图标
    • 导航菜单项 hover 时放大图标
    • 展开/收起菜单按钮,点击时缩放,展开/收起后,图标有动画效果

    搜索表格

    后台管理系统一般有很多可搜索的表格页,我们提供了一款强大的组件 admin-search-list,方便快速开发,适用于各种场景。

    • 封装了大部分逻辑,最少只需要提供 url ,搜索区域、列表区域。基本上只需要写样式即可
      • 封装了收集搜索数据、搜索、重置、分页、滚动加载、请求等逻辑
    • 搜索区域是响应式的,适配各种不同宽度的设备,只需要无脑排放样式组件即可
    • 列表区域可渲染任意元素,可以是表格、列表、卡片等任意元素
    • 支持滚动加载分页条两种分页模式
    • 支持分页数据自动同步至 url ,刷新页面可保留分页状态
    • 支持搜索区域吸顶表头吸顶
    • 支持额外参数变化时执行搜索,适用于组件外的数据作为搜索条件
    • 支持格式化搜索参数
    • 支持自定义搜索按钮和重置按钮样式
    • 支持延迟请求,适用于进页面时不加载数据
    • 支持回到顶部
    • 支持在组件加载前预制一些搜索数据
    • 支持自定义多语言
    • 完整的ts 类型提示

    结尾

    如果你喜欢这个项目或认为对你有用,欢迎使用体验和 Star

    Github 地址 | 在线预览 | 文档

    22 条回复    2024-11-29 18:23:59 +08:00
    Moyyyyyyyyyyye
        1
    Moyyyyyyyyyyye  
       9 天前
    有设计感,不错
    blankmiss
        2
    blankmiss  
       9 天前
    能不能出一个 精简版 这样用户可以直接 clone 就可以修改
    sealinfree
        3
    sealinfree  
       9 天前
    挺好看的,现在用着 layui ,一直想换一下,关注了
    ixixi
        4
    ixixi  
       8 天前
    这类 xxx admin 我感觉最大的痛点是无法真正做到轻量 和 按需引用
    如果可以 npm install xxx 替代 git clone xxx 这样就好了
    zhangfg
        5
    zhangfg  
    OP
       8 天前
    @blankmiss 把示例代码删掉就是精简版。示例代码都在/pages 文件夹里面,相关的多语言、接口 api 、mock 等文件也都在一个文件夹里面内聚。删掉文件夹就可以了。
    zhangfg
        6
    zhangfg  
    OP
       8 天前
    @ixixi 其实我个人观点认为这是一个误解。把代码放到本地,比放到 node_modules 更加可控。如果在 node_modules 里,有 bug 或者有 diy 需求就会比较麻烦。参考下 shadcn/ui 的火热。
    为了让用户容易 diy 自己的需求,本项目中的模块设计为高内聚和松散耦合,即各功能模块基本上都是通过<Component />这种使用的,不需要的直接注释掉即可。例如不需要多标签功能,那么直接注释 <Tabs> 就可以了。尽可能做到方便按需使用的效果。
    另一方面,本项目虽然是一个模板,但其中的内容也是可以替换 diy 的。除了替换布局和各功能模块,在结构层面,也可以替换 antd ,替换样式框架,替换数据管理方案,甚至替换 react 为 vue 或 angular 。
    zhangfg
        7
    zhangfg  
    OP
       8 天前
    @Moyyyyyyyyyyye 非常感谢支持😊
    zhangfg
        8
    zhangfg  
    OP
       8 天前
    @sealinfree 可以的,如果遇到问题可以联系我
    ixixi
        9
    ixixi  
       8 天前
    @zhangfg #6

    antd mui 这类也都是把代码放到 node_modules 遇到不可控的不用即可 , 自己再写一个就是了

    shadcn/ui 是通过 npx shadcn add xxxx 安装的 和项目中一堆注释实际体验是不一样的
    zhangfg
        10
    zhangfg  
    OP
       8 天前
    @ixixi 体验的不同具体体现在:shadcn/ui 可以一键新增,而本项目可以一键删除😊
    sepit
        11
    sepit  
       8 天前
    不知道你们谁拉过代码看过,github 上的版本和演示的页面可以说是毫不相关,挂羊头卖狗肉了
    zhangfg
        12
    zhangfg  
    OP
       8 天前
    @sepit 你在这瞎扯什么呢,你拉过代码吗?在这里诋毁。你自己 clone 下看看再说。真是造谣 0 成本
    zhangfg
        13
    zhangfg  
    OP
       8 天前
    @sepit 你拉下代码看看是不是和演示一样,然后过来道歉
    zhangfg
        14
    zhangfg  
    OP
       8 天前
    @sepit 请你核实后,务必回来回复,否则误导众人,毕竟本项目是作者辛辛苦苦做出来的,不能被流言蜚语搅臭。我在这里等你
    byronzhu
        15
    byronzhu  
       8 天前
    支持缓存页面嘛?
    zhangfg
        16
    zhangfg  
    OP
       8 天前 via Android
    @byronzhu 目前不支持。但也有办法。可以使用 react@experience 版本,可以支持的了
    xshwy
        17
    xshwy  
       8 天前
    蛮好的,怎么实现的多标签呀,之前用 Arco React 版,他们说没有 Vue keepalive 缓存所以无法实现…
    zcybupt2016
        18
    zcybupt2016  
       8 天前   ❤️ 1
    @sepit 真是张嘴就来啊

    zhangfg
        19
    zhangfg  
    OP
       8 天前
    @xshwy 他们说的多标签功能是包含了缓存页面的功能的,所以说没有 keepalive 就没法实现。本项目虽然有多标签,但目前没有实现缓存页面的功能。但是没关系,react 的下一个大的新版本会支持类似于 keepalive 的功能。而目前使用 react@experience 体验版也是可以实现缓存页面功能。
    至于界面层面的多标签的实现:是利用了 antd 的 Tabs 组件。传 items 就会展示多标签,传 activeKey 会高亮指定的 tab 。所以只需要管理好 items 数据即可。items 相关数据存到 localstorage,刷新页面就还会继续展示。另外封装好拖拽和右键逻辑以复用,我们就可以只写样式,便可产出多个不同样式的标签页。
    再补充一些,如何管理 items 数据:当点击标签,需要跳转路由;当路由切换,需要新增 item ;当点击关闭标签,需要删除当前 item 并需要跳转到下一个 item ;右键菜单还有一些关闭其他,关闭右侧,关闭左侧的逻辑,和上述关闭逻辑是类似的。把这些逻辑封装封装。
    zhangfg
        20
    zhangfg  
    OP
       8 天前
    @zcybupt2016 我怀着感激的心情,非常感谢您的澄清👍
    sepit
        21
    sepit  
       8 天前   ❤️ 1
    @zhangfg #20 这是我回复的看的页面,想必是之前版本的页面 这是在重新全新拉取的时候的页面 ,我的确张嘴就来非常抱歉了,维护一个开源项目是非常无私的行为,非常对不起你和上面那位澄清的同学,非常抱歉。
    zhangfg
        22
    zhangfg  
    OP
       8 天前 via Android
    @sepit 这是一个误会。我也为前面言辞有些激烈向您道歉,我们都不要有心理负担。您的表达让我更有动力维护好这个项目,也欢迎一起参与共建
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   960 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 23:19 · PVG 07:19 · LAX 15:19 · JFK 18:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.