velodyne网络配置：Svelte基础后台框架SvelteAdmin
velodyne网络配置：Svelte基础后台框架SvelteAdmin如果大家有一些其它比较好的svelte后台管理系统，欢迎一起交流讨论。<div class="svadmin__wrapper-layout flexbox flex-col"> <!-- //顶部导航 --> <div class="sv__layout-Header"> <Header /> </div> <div class="sv__layout-body flex1 flexbox"> <!-- //侧边栏 --> {#if rootRouteEnable} <div class="sv__bd-sidebar">
基于 Svelte3 桌面端组件库Svelte-UI
Svelte Ui Admin 基于 Svelte3 SvelteKit SvelteUI 前端技术构建的轻量级中后台前端框架。
svelte-admin路由菜单完美融合了svelte-ui组件库中的Menu组件，支持多级菜单联动，而且Breadcrumb组件可显示当前路由面包屑。
公共布局模板如下图：整体分为顶部 侧边一级菜单/二级菜单 面包屑 内容区。
<div class="svadmin__wrapper-layout flexbox flex-col">
<!-- //顶部导航 -->
<div class="sv__layout-Header">
<Header />
</div>
<div class="sv__layout-body flex1 flexbox">
<!-- //侧边栏 -->
{#if rootRouteEnable}
<div class="sv__bd-sidebar">
<SideMenu routes={mainRoutes} {activeRoute} />
</div>
{/if}
<!-- //中间栏 -->
{#if (rootRouteEnable && route != '/') || !rootRouteEnable}
<div class="sv__bd-menus" class:hidden={collapsed&&rootRouteEnable} class:collapsed={collapsed&&!rootRouteEnable}>
<RouteMenu
routes={getAllRoutes}
{activeRoute}
{activeRootRoute}
{rootRouteEnable}
{collapsed}
/>
</div>
{/if}
<!-- //右边栏 -->
<div class="sv__bd-main flex1 flexbox flex-col">
<!-- 面包屑导航 -->
<BreadCrumb routes={getAllRoutes} {activeRoute} {activeRootRoute} />
<!-- 主内容区 -->
<Scrollbar autohide gap={2}>
<div class="sv__main-wrapper">
<slot />
</div>
</Scrollbar>
</div>
</div>
</div>svelte-admin国际化
通过svelte-i18n来设置国际化语言，目前支持中英文及繁体。
layout.js中配置页面路由。格式和vue中的路由配置比较相似。
mainRoutes: [
// 主页模块
{
key: 'home' // 标识Menu组件匹配路径
path: '/home' // 跳转路由
redirect: '/home/index' // 重定向路由
meta: {
auth: true // 是否验证状态
icon: 'sv-icon-homefill' // 路由图标
title: 'layouts__main-menu__home' // 路由标题
hidden: false //是否隐藏菜单项
}
children: [
// 首页
{
key: 'home_index'
path: 'index'
meta: {
auth: true
icon: 'sv-icon-home'
title: 'layouts__main-menu__home_index'
}
}
// 工作台
{
key: 'home_workplace'
path: 'workplace'
meta: {
auth: true
icon: 'sv-icon-dashboard'
title: 'layouts__main-menu__home_dashboard'
}
}
// 自定义面包屑
{
key: 'home_breadcrumb'
path: 'breadcrumb'
meta: {
auth: true
icon: 'sv-icon-breadcrumb'
title: 'layouts__main-menu__home_breadcrumb'
// 自定义面包屑
breadcrumb: [
{
meta: {title: 'layouts__main-menu__home_breadcrumb'}
path: '/home/breadcrumb'
}
{
meta: {title: 'layouts__main-menu__home'}
path: '/home'
}
{
meta: {title: 'layouts__main-menu__home_breadcrumb-links'}
}
]
}
}
// 外部链接
{
key: 'https://svelte.dev/'
path: 'https://svelte.dev/'
meta: {
icon: 'sv-icon-openlink'
title: 'layouts__main-menu__home_apidocs'
rootRoute: '/home'
}
}
]
}
// 组件模块
{
key: 'component'
path: '/component'
redirect: '/component/table/all'
meta: {
auth: true //是否验证状态
icon: 'sv-icon-apps-fill'
title: 'layouts__main-menu__component'
hidden: false //是否隐藏菜单项
}
children: [
{
key: 'component_table'
path: 'table'
redirect: '/component/table/all'
meta: {
auth: true
icon: 'sv-icon-table'
title: 'layouts__main-menu__component_table'
}
children: [
{
key: 'component_table_all'
path: 'all'
meta: {
title: 'layouts__main-menu__component_table-all'
}
}
{
key: 'component_table_custom'
path: 'custom'
meta: {
title: 'layouts__main-menu__component_table-custom'
}
}
{
key: 'component_table_search'
path: 'search'
redirect: '/component/table/search/list'
meta: {
title: 'layouts__main-menu__component_table-search'
}
children: [
{
key: 'component_table_search_list'
path: 'list'
meta: {
title: 'layouts__main-menu__component_table-search-list'
}
}
]
}
]
}
{
key: 'component_list'
path: 'list'
meta: {
icon: 'sv-icon-sort'
title: 'layouts__main-menu__component_list'
}
}
{
key: 'component_form'
path: 'form'
redirect: '/component/form/all'
meta: {
auth: true
icon: 'sv-icon-forms'
title: 'layouts__main-menu__component_form'
}
children: [
{
key: 'component_form_all'
path: 'all'
meta: {
title: 'layouts__main-menu__component_form-all'
}
}
{
key: 'component_form_custom'
path: 'custom'
meta: {
title: 'layouts__main-menu__component_form-custom'
}
}
]
}
{
key: 'component_editor'
path: 'editor'
meta: {
icon: 'sv-icon-editor'
title: 'layouts__main-menu__component_editor'
}
}
]
}
// 配置模块
{
key: 'setting'
path: '/setting'
redirect: '/setting/mine'
meta: {
icon: 'sv-icon-setting'
title: 'layouts__main-menu__setting'
hidden: false
}
children: [
{
key: 'setting_mine'
path: 'mine'
meta: {
icon: 'sv-icon-my'
title: 'layouts__main-menu__setting-ucenter'
}
}
{
key: 'setting_manage'
path: 'manage'
redirect: '/setting/manage/user'
meta: {
auth: true
icon: 'sv-icon-group_fill_light'
title: 'layouts__main-menu__setting-manage'
}
children: [
{
key: 'setting_manage_user'
path: 'user'
meta: {
title: 'layouts__main-menu__setting-manage_user'
}
}
{
key: 'setting_manage_role'
path: 'role'
meta: {
title: 'layouts__main-menu__setting-manage_role'
}
}
{
key: 'setting_manage_department'
path: 'department'
meta: {
title: 'layouts__main-menu__setting-manage_department'
}
}
]
}
{
key: 'setting_editpwd'
path: 'editpwd'
meta: {
icon: 'sv-icon-permission'
title: 'layouts__main-menu__setting-editpwd'
}
}
{
key: 'setting_logs'
path: 'logs'
meta: {
icon: 'sv-icon-logs'
title: 'layouts__main-menu__setting-logs'
}
}
]
}
// 权限验证模块
{
key: 'permission'
path: '/permission'
redirect: '/permission/all'
meta: {
auth: true
icon: 'sv-icon-secret'
title: 'layouts__main-menu__permission'
hidden: false
}
children: [
{
key: 'permission_all'
path: 'all'
meta: {
icon: 'sv-icon-safe'
title: 'layouts__main-menu__permission-all'
}
}
{
key: 'permission_dev'
path: 'dev'
meta: {
icon: 'sv-icon-safe'
title: 'layouts__main-menu__permission-dev'
}
}
{
key: 'permission_test'
path: 'test'
meta: {
icon: 'sv-icon-safe'
title: 'layouts__main-menu__permission-test'
}
}
]
}
// 错误页面模块
{
key: 'error'
path: '/error'
redirect: '/error/403'
meta: {
icon: 'sv-icon-roundclosefill'
title: 'layouts__main-menu__error'
hidden: false
}
children: [
{
key: 'error_403'
path: '403'
meta: {
icon: 'sv-icon-error-403'
title: 'layouts__main-menu__error-403'
}
}
{
key: 'error_404'
path: '404'
meta: {
icon: 'sv-icon-error-404'
title: 'layouts__main-menu__error-404'
}
}
{
key: 'error_405'
path: '405error'
meta: {
icon: 'sv-icon-attentionforbid'
title: 'layouts__main-menu__error-notfound'
}
}
]
}
]
svelte-admin基础框架已经搭建完毕，后续会陆续地完善相关页面。
如果大家有一些其它比较好的svelte后台管理系统，欢迎一起交流讨论。
