Skip to content

brave9uy/dsn-uaa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

简介

这一年经历了许多的困难,庆幸的是许多人对我伸出援手让我度过难关。基于于助人为乐,以及对自身技术的总结提高,我决定把这几年来专注于管理系统的开发经验,整理成一个方案,并将其前端的绝大部分代码开源出来。

概述

DSN-UI是基于Vue3 + Typescript + Vue Router 4 + Pinia + Element Plus再封装的前端方案,它能够让你更快速地搭建自己的后台管理系统,避免花过多的时间编写一些组件和后台的基础页面。同时它没有使用Element Plus自带的icon库,而是选择了Font Awesome 5作为icon库。

目前DSN-UI并没有完全实现用户登录等具体的业务,需要使用者自己进行对接。

由于需要请求数据,才能说明一些组件的用法,因此通过Koa搭建后端,模拟出提供数据的api以供使用。

DSN-UI有可以满足一定的自适应(Responsive)需求。

组件说明会说明一些重要以及方便的组件,剩余的一些小组件需要使用者自己根据例子研究源码。

intro1.png

intro2.png

目录结构

dir1.png

启动

打开终端,进入uaa-ui目录,安装依赖后执行npm run serve即可启动dsn-ui
打开终端,进入uaa-serve目录,安装依赖后执行npm run serve即可启动Koa后端

组件说明

表格

menu.png

不同的功能节点分别展示了三个不同的表格组件,源码当中展示了组件的用法。

dir2.png

因为是基于ts,列配置的参数可以参考接口的属性。

column.png

分页表格

pageable-table.png

树型表格

tree-table1.png

tree-table2.png

滚动表格

scrollable-table1.png

scrollable-table2.png

scrollable-table3.png

scrollable-table4.png

表格自适应

responsive1.png

responsive2.png

树型选择

点击权限的修改按钮,进入权限的详情页

select-tree1.png

简单代码即可使用

select-tree2.png

select-tree3.png

select-tree4.png

滚动弹窗/图标选择器

icon-select1.png

icon-select2.png

icon-select3.png

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published