halseyspicy / geeker-admin Goto Github PK
View Code? Open in Web Editor NEW✨✨✨ Geeker Admin,基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的一套后台管理框架。
Home Page: https://admin.spicyboy.cn
License: MIT License
✨✨✨ Geeker Admin,基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的一套后台管理框架。
Home Page: https://admin.spicyboy.cn
License: MIT License
在研究的时候,有个小小的问题目前没研究懂。比如我登录成功,已经持久化了权限菜单相关的对象,但在左侧菜单的跳转路径里面,又引用了 route.ts里面的静态文件,我尝试在route.ts里面调用 pinia 缓存的权限菜单动态写入,提示我没有初始化 pinia。暂时没有办法,就只能数据库里面存一套,静态文件写一套。暂时应付着,还不太会这一套。
src/routers/route.ts
本想在这个文件里面引入 Pinia
持久化的 MenuStore
结果提示如下报错。
// 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
官网的解决文案,无赖自己还不太懂,所以在这里插个眼,看有没有好心大佬给出解决方案。万分感谢,如果自己后面研究出来了,也会来解答自己留下的这个疑问。
暂时没吊在这棵树上,我现在数据库和接口都弄好了。为了不影响 后面的开发,我还是在 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;
点击左边导航栏或者顶部导航栏切换组件时,会出现内容区组件不渲染问题,如果出现该问题之后,后续不管怎么点击,内容区组件就一直不会渲染,一直处于空白状态
如果配置表单项columns,如果columns里的某个select的数据是后台接口返回的, 应该如何操作,通过column[2] 这种索引方式吗 ?
作者您好,在clone最新的项目(commit:c95a1c054ee9eacae470bcaae7574d5c989b86a2)到本地,运行npm I安装依赖后运行npm run build:pro后构建的包有7M大小,请问这个是正常的嘛?还是需要进一步配置?
路由跳转偶尔会出现白屏,本地开发也发现过这个问题,以为是vite热更新的问题没在意,但是打包到线上部署后也有这个问题。
检查了前后端路由配置都正常,没有拼写问题或者多余空格。尝试了去掉路由缓存也没有解决问题。
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)
点击切换中文或者英文,刷新后还是显示中文
顺便问问有用了那些优化 可以写到readme里面我也想知道 主要感觉这个网页很快 但是我自己写后台的时候没多少东西还会卡卡的
我是搞 java的,前端能力渣渣。想开发个后台管理,对比了很多前端框架,发现 Geeker 颜值最高。
但相比 scui ,页面较少
大佬有时间完善下 菜单管理、个人设置、首页报表 等页面吗
或者出个pro版本 🙂
什么时候能把recat的功能补充完整呐?
登录页的那个背景图是在css里面设置的background-images:url()引入的svg图片 打包后会被打包在asstes/svg/xxx.svg路径下,但是页面引入的背景图路径是在assets/css/xxx.svg,所以部署后背景图出不来 目前有俩种方法 一种是打包后手动把svg目录图片移动到css目录下,另一种是在vite.congfig.ts文件里去掉打包目录分级 把所有资源都打包到同一个目录下 , 但是感觉这俩方法都不太好 ,我想问下 还有更好的办法吗
感觉应该把 el-table自带的属性也可以透传过去。否则直接使用pro-table 之后 要对table的属性进行一些配置,得改动 column的接口类型
请问有适配移动端的计划么?
Hi 我是 cz-git 的作者,很高兴看见你们使用 cz-git
我查看你们的配置和当前项目结构以及你们commit的习惯
发现其实配置文件可以参考一下,这个项目,会更好:
https://github.com/buqiyuan/vue3-antd-admin/blob/main/commitlint.config.js
但如果只是提供给用户自己修改的话,可以忽略我这个issue
🥳 如果有好的建议或者想法和我说~ 💡
{ headers: { noLoading: true } }会覆盖默认headers
在您的源码中重构了大量element-plus组件的样式,我想问一下关于element-plus组件对应的html元素类名(以及子元素类名,例如.el-table__header
)有没有什么详细的文档。
我找了很久一直没找到,只能用F12看页面元素硬找,很麻烦。
hello 我是cz-git 的作者可以考虑把 commitizen
依赖换成 czg
。会更适合成为项目的开发依赖
github: https://github.com/Zhengqbbb/cz-git
website: https://cz-git.qbenben.com/cli/
'
Line 20 in fc98443
"commit": "git pull && git add -A && czg && git push"
Line 48 in fc98443
在组件views/dashboard/dataVisualize
中,index.vue中使用
const dataScreen: ChartProps = reactive({
chart1: null,
chart2: null
});
来保留初始化后的echarts对象,但是根据echarts issue中的描述,不建议声明为响应式对象(apache/echarts#17619 (comment))
自己在使用过程中也遇到tooltip组件异常的情况,简单的解决办法是将reactive
删去。
首先效果确实很好 很强大
但是 protable 这块
1 有没有感觉配置太繁琐了 对新手使用有点困难,可否再给个详细问博客文章
2 我一个页面 感觉需要引入好多的依赖才可以 有点眼花缭乱的。
可能还是我太菜了
一个稍微懂点前端的后端程序员
使用pnpm i 安装依赖的话会报错
This admin dashboard look cool, but it's useless in its current state as it cannot be used as a package. So everything should be abstracted.
Also an admin dashboard already exists. See https://marmelab.com/react-admin/
https://www.fastmock.site/ 的接口方便导出一份吗?公司内网访问不了,想重新部署一份,私发也ok:[email protected]
非常感谢
感谢作者提供的 开源admin框架,我有个疑惑
这个项目首次切换未访问过的路由 会有点慢 大概要等1-2秒 再次访问就能秒跳转 是为什么呢?
我看 vue-vben-admin 这个库的 预览地址 好像不会有这个问题。
谢谢答疑,再次感谢!!!
这几天搭项目 参考了几个开源项目 只有您这个符合我们的技术栈
而且代码注释很多 我这种小白都看的懂
微信请作者喝了个咖啡 希望继续更新下去
var.scss 中配置主题颜色只能修改部分
同级路由带参数跳转,如下配置,由/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;
后端开发不太懂前端,有个功能很符合这个组件,能像UI库一样直接引入吗?
我之前也写过图标选择器,发现其中图标的名称有自动换行的问题,不美观
发现element文档中是用grid布局实现的,自己试了一下,可以比较好的解决
@HalseySpicy
如图, 这是太多数据的问题吗
关于引导页面
在一些管理平台 以及一些大型线上平台 引导页面出现率时很高的,
引导页对于第一次进入项目,可以简单介绍基本功能
在业务复杂场景 也可以做步骤引导
可以使用 driver.js 实现效果
driver.js
如果可以的话 我愿意贡献代码😀
估摸着插件格式化问题
具体页面: 超级表格使用 component
具体代码:src/components/ProTable/index.vue 85-91
格式化一下即可
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.