d3george / slash-admin Goto Github PK

View Code? Open in Web Editor NEW

1.0K 10.0 135.0 62.68 MB

A modern react admin. It is based on react 18, vite and TypeScript. It's fast !

Home Page: https://admin.slashspaces.com/

License: MIT License

JavaScript 6.32% Shell 0.03% HTML 0.08% TypeScript 91.96% CSS 1.47% Dockerfile 0.14%

admin-dashboard antd react react-query react-router-v6 tailwindcss ts vite zustand framer-motion

slash-admin's Introduction

Slash Admin

Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems.

English | 中文

Sponsor

Preview

https://admin.slashspaces.com/

Features

Built using React 18 hooks.
Powered by Vite for rapid development and hot module replacement.
Integrates Ant Design, providing a rich set of UI components and design patterns.
Written in TypeScript, offering type safety and an improved development experience.
Responsive design, adapting to various screen sizes and devices.
Flexible routing configuration, supporting nested routes.
Integrated access control based on user roles.
Supports internationalization for easy language switching.
Includes common admin features like user management, role management, and permission management.
Customizable themes and styles to meet your branding needs.
Mocking solution based on MSW and Faker.js.
State management using Zustand.
Data fetching using React-Query.

Document

Quick Start

Get the Project Code

git clone https://github.com/d3george/slash-admin.git

Install Dependencies

In the project's root directory, run the following command to install project dependencies:

pnpm install

Start the Development Server

Run the following command to start the development server:

pnpm dev

Visit http://localhost:3001 to view your application.

Build for Production

Run the following command to build the production version:

pnpm build

Docker deployment

Build image and Run container

build image

Enter the project root directory in the terminal and execute the following command to build the Docker image:

docker build -t your-image-name .

Make sure to replace your-image-name with your own image name

run container

Run your application in the Docker container using the following command:

docker run -p 3001:80 your-image-name

This will run your application on port 80(exposed in Dockerfile) of the container and map it to port 3001 on your host.

Now you can access http://localhost:3001 to view the deployed applications.

use docker-compose.yaml

Enter the project root directory in the terminal and execute the following command to start Docker Compose:

docker-compose up -d

Docker Compose will build an image based on the configuration defined by 'docker-compose. yaml' and run the container in the background.

After the container runs successfully, it can also be accessed through http://localhost:3001 To view the deployed applications.

Git Contribution submission specification

reference.commitlint.config.js

feat new features
fix fix the
docs documentation or comments
style code format (changes that do not affect code execution)
refactor refactor
perf performance optimization
revert revert commit
test test related
chore changes in the construction process or auxiliary tools
ci modify CI configuration and scripts
types type definition file changes
wip in development

slash-admin's People

Contributors

Stargazers

Watchers

Forkers

ctk41 mfp22 nqduy1999 gxiaorui frank-node zombiebrand pandaqlee lenguyenthuyhang xiaojiang9 deephon dachao001 otaciliofox asnowbear zsigma hhnnks zghnsqczg jueduiyheng peijunlei piaohan oh8 liuhoom polibee 1103409364 chenyuxi2002 fliu2476 deltaniu crazyforks wzhiyog enending trdmm zmh69695328 bumony zhaohaodang stevenlee19820119 royswale palzj minorboy stitchlau soxhwhat markthree laoxubuer xsir99 oovucc784 zhoujiangang0911 xinmans disunbow tsinghuasigs iamherdad alexleeyy wooodhead tangyiyong kendrickcheung007 passion0619 yoyo702 didnhdj2 shawnz42 aifuxi nickdine linecode developeramarish coderabbit214 opptimus weisk yanglvyou agentmishra originzero sulnong yongk moweiwei wztlink1013 lhzhou180606 leaveslvmoon pbluesky 21haoxingxiu kelseyshi chun1hao wenbingyin dinliang wotermelon arctanzyy werner-klier 1telescope1 joncv zdsrkj jilongsong cantfinditanymore wingjson entremets ronje gaurav-r-a-j atlethe cloud-prg iron-fe qizhenshuai kisdex fengshch tingxiuxiu cloudlet12138 brucejing lucyanddarlin

slash-admin's Issues

用了下很不错。不过关于路由权限这块可以帮完善下基础的使用文档嘛

十分感谢 ! 用了下很不错 🎉 🎉 🎉

我是重新搭建的用了最新的vite5 unocss等依赖

仓库地址

有两个现在不好处理的

动态路由现在只会生成一个tab => use/:id 不同的id应该生成不同的tab才对这个好像不太好改
可以帮完善下基础的使用文档嘛关于路由配置权限这块

发现了几个小问题有项目要用我自己的先修复了

1.tabs不能滑动最好还是能达到图二的效果

2.主题色好像使用起来不太方便

我在vite中注入了所有antd的主题色token自定义了8个全局变量到全局使用vscode插件达到less文件有提示
自定义了8个全局变量通过less变量 unocss html-var antd的useToken都可以使用

3.动态路由好像有点问题点击跳转到动态路由然后点一下自己的tab标题路径就会变成这样只有第一次正常的

应该要保存 params search state 参数。增加了一个配置用于动态路由设置标题

4.打开的tabs || menuList最好放在localStorege里面不然一刷新就没了我暂时先把自己的改了

5.这里需要做一下空的处理如果本地没文件会触发ErrorBoundary 定位bug也不太好定位我把404页面 || 了一下

黑夜模式的滚动条是白色的

应该和github的滚动条一样

可否增加一个微信登录的示例

微信登录和普通post登录方式不一样，回调数据不知道如何传入userStore

有没有感觉左侧的栏目展开时有卡顿

ui做的不错，就是antd这个动画感觉很不流畅，我现在用pad pro m1访问

第一次进入一级路由会重新渲染只有部署的环境会出现本地没事

只有第一次进去就会这样复现直接清除浏览器所有记录即可
我这样改了之后就好了

fullcalendar滚动条自定义

按照源码改成vue之后fullcalendar原来的滚动条不好看, 查看您的好像是使用simplebar, 请问如何将simplebar的滚动条怎么放进fullcalendar

hideMenu之后无法跳转到对应页面

某些情况：menu中不需要显示，但是可以跳转到对应页面
现在好像没办法实现这种需求

菜单栏外链菜单会打开一个空白的tab

需要简单的使用配置说明，依赖版本能跟进更新

有时间的话，增加简单的使用配置说明，依赖版本能跟进更新。

Can a Vue version be provided?

There are also many people who need the Vue version！！！

使用动态路由后，是不是就不需要在routes下定义静态路由？

RT，路由的定义都由后端传过来是吗

Both horizontal and vertical scroll bars appear when hovering over the language button

icon

左侧菜单栏的相同风格的图标我需要去哪里获取

如何优雅的编写主题相关的样式

现在需要从 useSettings 中取出 themeMode ，再根据这个值去写style对象

既然用了tailwind，可以适配 dark:bg-gray 这种写法

[Bug] 收缩菜单时会收缩所有展开的菜单，无论几级

首先点赞一下 UI，看起来还是挺舒服的

说一下这个收缩菜单的行为，这或许不是一个 bug，但从用户体验角度来说，这个行为比较影响使用体验。

左侧菜单收起时，onchange的逻辑会导致多级菜单显示异常，直接setOpenKeys(keys)的话没问题

当一开始鼠标经过的是系统并出现其下级菜单后，再移到用户那侧就会出现

添加按钮权限

目前我看权限是管控到路由，是否可以将颗粒度细化到组件，例如对页面中增删改查之类的按钮组件进行权限控制。实现方式可以动态的对组件进行权限设置(也可以取消权限设置)，然后在角色管理里进行分配

项目中的MotionLazy这个组件具体作用是什么，能解释吗？

如题

支持docker部署

https://github.com/xinmans/slash-admin.git

合并下，给个PR提交权限

日历页面，内容显示掩饰

如图，日历底部被遮挡了一部分

📌 Welcome to join the Discord channel to discuss everything about slash-admin.

Discord

VUE 的版本

大佬有没有vue的版本。

这种形式的路由 /article/:articleId 支持有些问题

src/router/hooks/use-match-route-meta.tsx

const currentRouteMeta = flattenedRoutes.find(
      (item) => item.key === lastRoute?.pathname || `${item.key}/` === lastRoute?.pathname,
    );
    if (currentRouteMeta) {
      if (!currentRouteMeta.hideTab) {
        currentRouteMeta.outlet = children;
        setMatchRouteMeta(currentRouteMeta);
      }
    } else {
      push(HOMEPAGE);
    }

lastRoute?.pathname => /article/123
key: '/article/:articleId' !== '/article/123'

导致这种形式的路由会一直跳HOMEPAGE

[BUG] Hidden tab will cause an empty page

issue description:

I try to select the first level breadcrumb item's menu multiple times in a three-level breadcrumb and it come across problem that it won't access the deepest route to show the according component

screenshot:

how to reproduce:

just do what I tried

other effect:

close the according components'tabs and I will get my expectation at the first or second times to select menu, then it will break again

src\theme\hooks\use-reponsive.ts 文件修改成下面这样可以解决

  // 使用 [...screenArray].reverse().find() 来代替 findLast 方法，避免兼容性问题
  // [...screenArray] 创建了一个 screenArray 的副本，这样 reverse 方法不会改变原数组的顺序
  const currentScrren = [...screenArray].reverse().find((item) => {
    const result = screenMap[item];
    return result === true;
  });

Modal的onOk事件放在父级组件调用，那Modal里面的Form怎么提交

请教一下，这个Form表单在父级怎么提交，我查了好多资料，都是放在Moal组件内定义的