Giter Club home page Giter Club logo

honghuangdc / soybean-admin Goto Github PK

View Code? Open in Web Editor NEW
7.8K 75.0 1.4K 12.17 MB

A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia, NaiveUI and UnoCSS. 一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia, NaiveUI 和 UnoCSS。

Home Page: https://soybeanjs.cn

License: MIT License

JavaScript 0.11% TypeScript 59.76% HTML 0.07% Vue 37.24% CSS 2.71% SCSS 0.11%
vue3 admin-template naive-ui vue-admin typescript naive-ui-admin pinia unocss vite5 admin vue

soybean-admin's Introduction

SoybeanAdmin

English | 中文

license github stars github forks gitee stars

Note

If you think SoybeanAdmin is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!

Introduction

SoybeanAdmin is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. SoybeanAdmin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.

Features

  • Cutting-edge technology application: using the latest popular technology stack such as Vue3, Vite5, TypeScript, Pinia and UnoCSS.
  • Clear project architecture: using pnpm monorepo architecture, clear structure, elegant and easy to understand.
  • Strict code specifications: follow the SoybeanJS specification, integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.
  • TypeScript: support strict type checking to improve code maintainability.
  • Rich theme configuration: built-in a variety of theme configurations, perfectly integrated with UnoCSS.
  • Built-in internationalization solution: easily realize multi-language support.
  • Automated file routing system: automatically generate route import, declaration and type. For more details, please refer to Elegant Router.
  • Flexible permission routing: support both front-end static routing and back-end dynamic routing.
  • Rich page components: built-in a variety of pages and components, including 403, 404, 500 pages, as well as layout components, tag components, theme configuration components, etc.
  • Command line tool: built-in efficient command line tool, git commit, delete file, release, etc.
  • Mobile adaptation: perfectly support mobile terminal to realize adaptive layout.

Version

Documentation

Example Images

Usage

Environment Preparation

Make sure your environment meets the following requirements:

  • git: you need git to clone and manage project versions.
  • NodeJS: >=18.0.0, recommended 18.19.0 or higher.
  • pnpm: >= 8.0.0, recommended 8.14.0 or higher.

Clone Project

git clone https://github.com/soybeanjs/soybean-admin.git

Install Dependencies

pnpm i

Since this project uses the pnpm monorepo management method, please do not use npm or yarn to install dependencies.

Start Project

pnpm dev

Build Project

pnpm build

Ecosystem

  • electron-mock-admin: A Mock Api management system that helps front-end developers quickly implement interface mocks.
  • T-Shell: A terminal emulator and SSH client with configurable command prompts.
  • pea : Adopting SpringBoot3.2 + JDK21, MyBatis-Plus, SpringSecurity security framework, etc., suitable for the simple permission system developed by soybean-admin.
  • MalusAdmin: A backend management framework developed based on Vue3/TypeScript/NaiveUI and NET7 & Sqlsugar. It is implemented in the most original and simplest way, with a fresh and elegant front-end, a clear and elegant backend structure, and powerful functions.
  • PanisAdmin: Adopting SpringBoot 3, SaToken, MySQL and other frameworks to develop and modify soybean-admin for the second time, adapting dynamic menu/button-level authorization. Retaining the original flavor, fresh and elegant, high-value back-end management system scaffold.
  • snail-job: A distributed task retry and task scheduling platform with "high performance, high value and high activity".
  • SuperApi: Quickly turn your idea into an online stable product! Entity-less library and table building, add, delete, change and check entity-less library table, support 15 kinds of condition query, as well as paging, list, unlimited tree list and other functions of the API deployment! With interface documentation, Auth authorisation, interface flow restriction, access to the client's real IP, advanced server caching components, dynamic APIs and other features, we look forward to your experience!
  • FastSoyAdmin: A modern Management Platform based on FastAPI+Vue3+Naive UI.

How to Contribute

We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting pull requests or creating GitHub issue.

Git Commit Guidelines

This project has built-in commit command, you can execute pnpm commit to generate commit information that conforms to Conventional Commits specification. When submitting PR, please be sure to use commit command to create commit information to ensure the standardization of information.

Browser Support

It is recommended to use the latest version of Chrome in development for a better experience.

IE  Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

OpenSource Author

Soybean

Contributors

Thanks the following people for their contributions. If you want to contribute to this project, please refer to How to Contribute.

Communication

SoybeanAdmin is a completely open source and free project, helping developers to develop medium and large-scale management systems more conveniently. It also provides WeChat and QQ communication groups. If you have any questions, please feel free to ask in the group.

QQ Group

Add the following WeChat to invite to the WeChat group

Add Soybean's WeChat for business consultation, cooperation, project architecture, one-on-one guidance, etc.

Star Trend

Star History Chart

License

This project is based on the MIT © 2021 Soybean protocol, for learning purposes only, please retain the author's copyright information for commercial use, the author does not guarantee and is not responsible for the software.

soybean-admin's People

Contributors

alleycharming avatar azir-11 avatar chhinsras avatar codearhat avatar dodu2014 avatar dxxzst avatar ealiwei avatar elliotliu avatar greper avatar hhstore avatar honghuangdc avatar kirklin avatar lapislazulisch avatar li-0221 avatar lixin59 avatar pany-ang avatar particaly avatar paynezhuang avatar shabby2333 avatar smileluck avatar snowords avatar southliu avatar suiyingsky avatar sunhao1256 avatar taisha avatar toolvcn avatar xiaotao2018 avatar yanbowe avatar zq-xu avatar zuihou avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

soybean-admin's Issues

Icon依赖优化

image
为什么会引入这么多的icons插件,导致安装依赖特别大,是不是有些冗余呢

增加ifarme共用布局页面功能的建议

在实际应用中如果系统包含多个ifarme,并且ifarme的地址由使用者自定义,遇到这样的业务流程,目前系统这样的方式就无法满足。希望作者可以增加ifarme公用布局组件的功能。感谢

.vscode的一些非必要设置

很好的demo!
提个小建议,可以把.vscode的一些非必要设置删掉(比如 workbench.iconTheme)或者直接把文件夹ignore掉,第一次打开以为自己vscode坏了🤣🤣🤣。

一点疑惑

一般后台管理系统会基于一个主流的UI库(类似Elment-Plus这样的)。
这样的话,使用者在使用后台的过程中,更好的修改一些东西达到自己的要求。
不知道作者后面要做成什么样的一个后台管理系统呢,
使用者能否基于这个系统,构建出符合自己要求的系统呢?

多标签优化

image
点击关闭标签页的时候,关闭掉的并不是右键所选中的标签页,所以不在当前页的时候关闭标签页应该禁用吧

移动端适配问题

用浏览器手机模式,发现layout布局好像没有做相应的移动端适应。
特别是顶部的tab。个人建议做一下适配。

另感觉这个项目的样式和vue admin pro挺像的,不过比它良心太多太多了。我看了一下,他那个好像是稍微做了适配的。
(他的遮罩层有些做了高斯模糊效果,感觉还不错)

可以增加响应式布局吗?

目前整体体验非常好,准备拿来使用,非常感谢soybean的付出。

由于需要手机端或者pad端访问admin,可以在代码里增加响应式功能吗?

一点小建议

系统要用起来,菜单管理是必须的基础,是不是该着重实现一下菜单的管理,哪怕不对接接口,只是提供一个添加一级,多级菜单,外链和iframe,按钮的例子,这样使用的人能按照模板去自己实现接口的对接,系统也能更好的用起来

建议: 个人封装的组件位置

个人建议 项目自身封装的组件还是放在自身项目里,避免使用者有部分重写的需求时,操作不便。例如: 目前layout 和 tab

对于菜单管理 有无计划?

对于菜单管理 有无计划?
另外建议,增加 readmap.md 开发路线图,类似下图:
微信截图_20220301094337

建议:增加类似下图的布局
image

路由懒加载怎么改

image

看到楼主的 封装了 挺规范 ,问下路由懒加载怎么弄
顺便新年顶个人气

固定路由怎么加?

接触vue3 还不熟悉,后端是ruoyi,前台想用一下这个ui,发现了这个admin,

从登陆获取mock数据,加载动态路由,但是我需要几个固定路由无需登录,修改了 guard 还有 route, 发现要不还有些地方限制,要不就是逻辑报错了,请问怎么增加?

插眼好东西

插眼好东西,这个UI风格好看,缺一点基础的使用表格,后台一般就是 搜索表格,上传组件 这些 ,其它其实并不是太重要,

期待你的更新

建议:关于iframe 路由 的交互效果

建议:若是打开的是 iframe路由
layout 组件隐藏,鼠标滑动到屏幕边缘出现对应的loyout附件,按 esc loyout组件显示,效果见下面视频

ebeb7b826a93456a074c198e89b888b8.mp4

Unexpected token '.'

项目启动报
html = await server.transformIndexHtml?.(url, html, req.originalUrl);
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (E:\workspace\2022\synway\soybean-admin\vite.config.ts:43:31)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.require.extensions. [as .ts] (E:\workspace\2022\synway\soybean-admin\node_modules\vite\dist\node\chunks\dep-f9d9421a.js:71391:20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.