目前svelte.js框架已经受到越来越多的前端开发者的关注。但是基于svelte开发的UI组件库及后台管理系统却比较少。

由于前段时间有开发一个svelte-ui组件库，所以趁着捣鼓了一个基础版的后台管理系统svelte-admin。

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后台管理系统，欢迎一起交流讨论。