Code Monkey home page Code Monkey logo

geeker-admin's Introduction

Geeker-Admin

介绍 📖

Geeker-Admin 一款基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的后台管理框架,使用目前最新技术栈开发。项目提供强大的 ProTable 组件,在一定程度上提高您的开发效率。另外本项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。

React 版本 🔥

在线预览 👀

代码仓库 ⭐

项目文档 📚

项目功能 🔨

  • 使用 Vue3.4 + TypeScript 开发,单文件组件<script setup>
  • 采用 Vite5 作为项目开发、打包工具(配置 gzip/brotli 打包、tsx 语法、跨域代理…)
  • 使用 Pinia 替代 Vuex,轻量、简单、易用,集成 Pinia 持久化插件
  • 使用 TypeScript 对 Axios 整个二次封装(请求拦截、取消、常用请求封装…)
  • 基于 Element 二次封装 ProTable 组件,表格页面全部为配置项 Columns
  • 支持 Element 组件大小切换、多主题布局、暗黑模式、i18n 国际化
  • 使用 VueRouter 配置动态路由权限拦截、路由懒加载,支持页面按钮权限控制
  • 使用 KeepAlive 对页面进行缓存,支持多级嵌套路由缓存
  • 常用自定义指令开发(权限、复制、水印、拖拽、节流、防抖、长按…)
  • 使用 Prettier 统一格式化代码,集成 ESLint、Stylelint 代码校验规范
  • 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息

安装使用步骤 📔

  • Clone:
# Gitee
git clone https://gitee.com/HalseySpicy/Geeker-Admin.git
# GitHub
git clone https://github.com/HalseySpicy/Geeker-Admin.git
  • Install:
pnpm install
  • Run:
pnpm dev
pnpm serve
  • Build:
# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro
  • Lint:
# eslint 检测代码
pnpm lint:eslint

# prettier 格式化代码
pnpm lint:prettier

# stylelint 格式化样式
pnpm lint:stylelint
  • commit:
# 提交代码(提交前会自动执行 lint:lint-staged 命令)
pnpm commit

项目截图 📷

  • 登录页:

login_light

login_dark

  • 首页:

home_light

home_dark

  • 表格页:

table_light

table_dark

  • 数据可视化

dashboard

  • 数据大屏:

dataScreen

文件资源目录 📚

Geeker-Admin
├─ .husky                  # husky 配置文件
├─ .vscode                 # VSCode 推荐配置
├─ build                   # Vite 配置项
├─ public                  # 静态资源文件(该文件夹不会被打包)
├─ src
│  ├─ api                  # API 接口管理
│  ├─ assets               # 静态资源文件
│  ├─ components           # 全局组件
│  ├─ config               # 全局配置项
│  ├─ directives           # 全局指令文件
│  ├─ enums                # 项目常用枚举
│  ├─ hooks                # 常用 Hooks 封装
│  ├─ languages            # 语言国际化 i18n
│  ├─ layouts              # 框架布局模块
│  ├─ routers              # 路由管理
│  ├─ stores               # pinia store
│  ├─ styles               # 全局样式文件
│  ├─ typings              # 全局 ts 声明
│  ├─ utils                # 常用工具库
│  ├─ views                # 项目所有页面
│  ├─ App.vue              # 项目主组件
│  ├─ main.ts              # 项目入口文件
│  └─ vite-env.d.ts        # 指定 ts 识别 vue
├─ .editorconfig           # 统一不同编辑器的编码风格
├─ .env                    # vite 常用配置
├─ .env.development        # 开发环境配置
├─ .env.production         # 生产环境配置
├─ .env.test               # 测试环境配置
├─ .eslintignore           # 忽略 Eslint 校验
├─ .eslintrc.cjs           # Eslint 校验配置文件
├─ .gitignore              # 忽略 git 提交
├─ .prettierignore         # 忽略 Prettier 格式化
├─ .prettierrc.cjs         # Prettier 格式化配置
├─ .stylelintignore        # 忽略 stylelint 格式化
├─ .stylelintrc.cjs        # stylelint 样式格式化配置
├─ CHANGELOG.md            # 项目更新日志
├─ commitlint.config.cjs   # git 提交规范配置
├─ index.html              # 入口 html
├─ LICENSE                 # 开源协议文件
├─ lint-staged.config.cjs  # lint-staged 配置文件
├─ package-lock.json       # 依赖包包版本锁
├─ package.json            # 依赖包管理
├─ postcss.config.cjs      # postcss 配置
├─ README.md               # README 介绍
├─ tsconfig.json           # typescript 全局配置
└─ vite.config.ts          # vite 全局配置文件

浏览器支持 🌎

  • 本地开发推荐使用 Chrome 最新版浏览器 Download
  • 生产环境支持现代浏览器,不再支持 IE 浏览器,更多浏览器可以查看 Can I Use Es Module
IE Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

项目后台接口 🧩

项目后台接口完全采用 Mock 数据,感谢以下 Mock 平台支持:

微信交流群 👨‍👨‍👦‍👦

微信一群、二群、三群、四群已满,加作者微信进入五群(支持知识付费)🤪

微信二维码

捐赠 🍵

如果你正在使用这个项目或者喜欢这个项目的,可以通过以下方式支持我:

  • Star、Fork、Watch 一键三连 🚀
  • 通过微信、支付宝一次性捐款 ❤
微信 支付宝
Alipay QRcode Wechat QRcode

geeker-admin's People

Contributors

abulo avatar ahchi529 avatar bossbaba avatar denganjia avatar deyuqin avatar gaga-change avatar gamefake588 avatar gwangchn avatar halseyspicy avatar isafairy avatar jeff2go avatar jeffrey-mu avatar kassell avatar limuen avatar lzhd avatar phcreery avatar skiyee avatar topyou avatar wan-kong avatar yanbowe avatar yuanlee301415 avatar zhuimen avatar zjb-it 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

geeker-admin's Issues

关于element-plus组件的类名

在您的源码中重构了大量element-plus组件的样式,我想问一下关于element-plus组件对应的html元素类名(以及子元素类名,例如.el-table__header)有没有什么详细的文档。
我找了很久一直没找到,只能用F12看页面元素硬找,很麻烦。

proForm 动态赋值问题

如果配置表单项columns,如果columns里的某个select的数据是后台接口返回的, 应该如何操作,通过column[2] 这种索引方式吗 ?

感谢

这几天搭项目 参考了几个开源项目 只有您这个符合我们的技术栈
而且代码注释很多 我这种小白都看的懂
微信请作者喝了个咖啡 希望继续更新下去

提一个关于tab的小建议

image
现在标签栏使用的是el-tabs来实现,在点击之后可以使用左右方向键来切换页面,而且会出现一个难看的框框。就算用@keydown.capture.stop.prevent禁用了键盘切换也还是会出现框框。建议像其他模板一样用其他方式写一个标签栏,感激不尽。

路由跳转白屏问题

路由跳转偶尔会出现白屏,本地开发也发现过这个问题,以为是vite热更新的问题没在意,但是打包到线上部署后也有这个问题。

检查了前后端路由配置都正常,没有拼写问题或者多余空格。尝试了去掉路由缓存也没有解决问题。

后端程序员进来报道。最近在研究vue3,首先非常感谢大佬提供一个纯净的后台管理系统

在研究的时候,有个小小的问题目前没研究懂。比如我登录成功,已经持久化了权限菜单相关的对象,但在左侧菜单的跳转路径里面,又引用了 route.ts里面的静态文件,我尝试在route.ts里面调用 pinia 缓存的权限菜单动态写入,提示我没有初始化 pinia。暂时没有办法,就只能数据库里面存一套,静态文件写一套。暂时应付着,还不太会这一套。

image

src/routers/route.ts 本想在这个文件里面引入 Pinia 持久化的 MenuStore 结果提示如下报错。

image

// routers/route.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// * 导入所有router
const metaRouters = import.meta.globEager("./modules/*.ts");

// * 处理路由表
export const routerArray: RouteRecordRaw[] = [];
Object.keys(metaRouters).forEach(item => {
	Object.keys(metaRouters[item]).forEach((key: any) => {
		routerArray.push(...metaRouters[item][key]);
	});
});
/**
 * @description 路由配置简介(💢没有使用动态路由,路由全部配置在本地,需要使用动态路由请自行改造)
 * @param path ==> 路由路径
 * @param name ==> 路由名称
 * @param redirect ==> 路由重定向
 * @param component ==> 路由组件
 * @param meta ==> 路由元信息
 * @param meta.requireAuth ==> 是否需要权限验证
 * @param meta.keepAlive ==> 是否需要缓存该路由
 * @param meta.title ==> 路由标题
 * @param meta.key	==> 路由key,用来匹配按钮权限
 * */
const routes: RouteRecordRaw[] = [
	{
		path: "/",
		redirect: { name: "login" }
	},
	{
		path: "/login",
		name: "login",
		component: () => import("@/views/login/index.vue"),
		meta: {
			requiresAuth: false,
			title: "登录页",
			key: "login"
		}
	},
	...routerArray,
	{
		// 找不到路由重定向到404页面
		path: "/:pathMatch(.*)",
		redirect: { name: "404" }
	}
];

const router = createRouter({
	// history: createWebHashHistory(),
	history: createWebHistory(),
	routes,
	strict: false,
	// 切换页面,滚动到最顶部
	scrollBehavior: () => ({ left: 0, top: 0 })
});

export default router;

类似如上问题。我参考了 pinia 官网的解决文案,无赖自己还不太懂,所以在这里插个眼,看有没有好心大佬给出解决方案。万分感谢,如果自己后面研究出来了,也会来解答自己留下的这个疑问。

vuejs/pinia#971

暂时没吊在这棵树上,我现在数据库和接口都弄好了。为了不影响 后面的开发,我还是在 src/routers/modules/ 目录里面加了一次所有接口返回的接口,这样才能让左侧菜单栏点击跳转到对应的组件页面。

// src/routers/modules/system.ts

import { RouteRecordRaw } from "vue-router";
import { Layout } from "@/routers/constant";

// 系统组件模块
const systemRouter: Array<RouteRecordRaw> = [
	{
		path: "/system",
		component: Layout,
		redirect: "/system/admin",
		meta: {
			title: "系统管理",
			icon: "icon"
		},
		children: [
			{
				path: "/system/admin",
				name: "admin",
				component: () => import("@/views/system/admin/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "管理员管理",
					key: "admin"
				}
			},
			{
				path: "/system/role",
				name: "role",
				component: () => import("@/views/system/role/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "角色管理",
					key: "role"
				}
			},
			{
				path: "/system/menu",
				name: "menu",
				component: () => import("@/views/system/menu/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "菜单管理",
					key: "menu"
				}
			},
			{
				path: "/system/config",
				name: "config",
				component: () => import("@/views/system/config/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "系统配置",
					key: "config"
				}
			},
			{
				path: "/system/attach",
				name: "attach",
				component: () => import("@/views/system/attach/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: true,
					title: "附件管理",
					key: "attach"
				}
			}
		]
	}
];

export default systemRouter;

eslint校验问题

你好 项目启动后 超级表格 --> 使用Component模块 eslint报错 请问是eslint配置未全 还是我有未安装的插件
image

大佬可以增强些页面吗

我是搞 java的,前端能力渣渣。想开发个后台管理,对比了很多前端框架,发现 Geeker 颜值最高。
但相比 scui ,页面较少
大佬有时间完善下 菜单管理、个人设置、首页报表 等页面吗
或者出个pro版本 🙂

大佬牛逼

什么时候能把recat的功能补充完整呐?

组件不渲染问题

点击左边导航栏或者顶部导航栏切换组件时,会出现内容区组件不渲染问题,如果出现该问题之后,后续不管怎么点击,内容区组件就一直不会渲染,一直处于空白状态

路由跳转参数丢失

问题描述

同级路由带参数跳转,如下配置,由/location跳转至/node,携带参数id,参数丢失。(query方式跳转瞬间能看到URL栏参数存在,跳转完成后参数丢失)

路由配置

const locationRouter: Array<RouteRecordRaw> = [
	{
		path: "/location",
		component: Layout,
		redirect: "/location/index",
		meta: {
			title: "线路管理"
		},
		children: [
			{
				path: "/location",
				name: "locationList",
				component: () => import("@/views/location/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: false,
					title: "线路",
					key: "locationList"
				}
			},
			{
				path: "/node",
				name: "node",
				component: () => import("@/views/location/node/index.vue"),
				meta: {
					keepAlive: true,
					requiresAuth: false,
					title: "节点",
					key: "node"
				}
			}
		]
	}
];

传参方式

多种传参方式都尝试过。

const router = useRouter();
const goNode = async (params: Location) => {
	await router.push({ path: "/node", query: { id: params.id } });
};

取参方式

const route = useRoute();
const id = route.query.id;

关于引导页

关于引导页面
在一些管理平台 以及一些大型线上平台 引导页面出现率时很高的,
引导页对于第一次进入项目,可以简单介绍基本功能
在业务复杂场景 也可以做步骤引导

可以使用 driver.js 实现效果
driver.js

如果可以的话 我愿意贡献代码😀

proTable建议

首先效果确实很好 很强大
但是 protable 这块
1 有没有感觉配置太繁琐了 对新手使用有点困难,可否再给个详细问博客文章
2 我一个页面 感觉需要引入好多的依赖才可以 有点眼花缭乱的。

可能还是我太菜了

一个稍微懂点前端的后端程序员

组件 bug(格式化问题)

估摸着插件格式化问题
具体页面: 超级表格使用 component
具体代码:src/components/ProTable/index.vue 85-91

格式化一下即可

打包后体积过大

作者您好,在clone最新的项目(commit:c95a1c054ee9eacae470bcaae7574d5c989b86a2)到本地,运行npm I安装依赖后运行npm run build:pro后构建的包有7M大小,请问这个是正常的嘛?还是需要进一步配置?

打包后有个问题呀

登录页的那个背景图是在css里面设置的background-images:url()引入的svg图片 打包后会被打包在asstes/svg/xxx.svg路径下,但是页面引入的背景图路径是在assets/css/xxx.svg,所以部署后背景图出不来 目前有俩种方法 一种是打包后手动把svg目录图片移动到css目录下,另一种是在vite.congfig.ts文件里去掉打包目录分级 把所有资源都打包到同一个目录下 , 但是感觉这俩方法都不太好 ,我想问下 还有更好的办法吗

切换路由页面的时候 比较慢的原因

感谢作者提供的 开源admin框架,我有个疑惑
这个项目首次切换未访问过的路由 会有点慢 大概要等1-2秒 再次访问就能秒跳转 是为什么呢?

我看 vue-vben-admin 这个库的 预览地址 好像不会有这个问题。

谢谢答疑,再次感谢!!!

提个建议

感觉应该把 el-table自带的属性也可以透传过去。否则直接使用pro-table 之后 要对table的属性进行一些配置,得改动 column的接口类型

无法登录,接口报错,貌似是SSL问题

ERROR 上午9:25:42 [vite] http proxy error:
Error: unable to verify the first certificate
at TLSSocket.onConnectSecure (node:_tls_wrap:1530:34)
at TLSSocket.emit (node:events:390:28)
at TLSSocket._finishInit (node:_tls_wrap:944:8)
at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:725:12) (x3)

echarts实例不应声明为响应式对象

在组件views/dashboard/dataVisualize中,index.vue中使用

const dataScreen: ChartProps = reactive({
	chart1: null,
	chart2: null
});

来保留初始化后的echarts对象,但是根据echarts issue中的描述,不建议声明为响应式对象(apache/echarts#17619 (comment))
自己在使用过程中也遇到tooltip组件异常的情况,简单的解决办法是将reactive删去。

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.