Svelte-Ui-Admin基于svelte-ui中后台管理系统|Svelte3+Vite3后台框架

class="svadmin__container" style="--themeSkin: {$skin}">
    <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: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-UI高颜值组件库

Svelte Ui Admin遵循Svelte Ui组件风格设计，高颜值的组件让整体风格更加规范统一。

svelte-ui：基于svelte3桌面pc版组件库 

错误页处理

 sveltekit提供了+layout.svelte公共模板及+error.svelte错误页模板。

 
<svelte:head>
    <title>{$page.status} Error!title>
svelte:head>
 
<div class="svadmin__pageErr flexbox flex-col flex-alignc flex-justifyc">
    <div class="svadmin__pageErr-img"><i class="sv-icon-round_close_fill_light">i>div>
    <div class="svadmin__pageErr-content">
        <div class="c-red fs-18">┗| {$page.status} |┛  Page Error~~div>
        <div class="c-999 mt-10 mb-10">{$page.error.message}div>
        <Button size="small" on:click={goHome}>Go HomeButton>
    div>
div>

Svelte自定义路由菜单

基于svelte-ui组件库中的Menu组件实现自定义动态路由菜单。

<Menu
    class="svadmin__menu-list"
    data={getNewRoutes}
    active={activeRoute}
    trigger="click"
    collapse={collapsed}
    backgroundHover="#e2f2ff"
>
    {#each getNewRoutes as route}
        <svelte:component this={routeMenuItem} item={route} {activeRootRoute} {rootRouteEnable} />
    {/each}
Menu>

<script>
    import { goto } from '$app/navigation'
    import { _ } from 'svelte-i18n'
 
    import { Menu, MenuItem, MenuSub } from '$lib/svelte-ui'
    import routeMenuItem from './routeMenuItem.svelte'
 
    import utils from '@/utils'
    import { getCurrentRootRoute, hasChildrenRoute } from '@/utils/routes'
 
    export let item = []
    // 根菜单
    export let activeRootRoute = ''
    // 是否开启一级路由菜单
    export let rootRouteEnable = true
 
    function changeRoute(path) {
        if(utils.isExternal(path)) {
            window.open(path, '_blank')
        }else {
            goto(path)
        }
    }
script>
 
{#if !item.meta.hidden}
    {#if activeRootRoute !== getCurrentRootRoute(item) && rootRouteEnable === true}
    
    {:else}
        {#if item.children && Array.isArray(item.children) && hasChildrenRoute(item.children)}
            <MenuSub key={item.key}>
                <span slot="icon"><i class={item.meta.icon}>i>span>
                <div slot="title">{$_(`menu.${item.meta.title}`)}div>
 
                {#each item.children || [] as route2}
                <svelte:component this={routeMenuItem} item={route2} {activeRootRoute} {rootRouteEnable} />
                {/each}
            MenuSub>
        {:else}
            <MenuItem key={item.key} title={$_(`menu.${item.meta.title}`)} on:click={changeRoute(item.path)}>MenuItem>
        {/if}
    {/if}
{/if}

svelte-admin国际化解决方案

通过svelte-i18n支持中英文/繁体三种语言显示。

import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n'
import { browser } from '$app/env'
import Storage from '@/utils/storage'
 
// 引入语言配置
import cn from '@/locale/zh-CN'
import tw from '@/locale/zh-TW'
import en from '@/locale/en-US'
 
export const langKey = 'lang'
export const langVal = 'cn'
 
addMessages('cn', cn)
addMessages('tw', tw)
addMessages('en', en)
 
const lang = getLang()
console.log('当前国际化：', lang)
init({
    fallbackLocale: lang,
    initialLocale: getLocaleFromNavigator()
})
setHtmlLang(lang)
 
/* 获取语言 */
export function getLang() {
    const lang = Storage.get(langKey)
    return lang || langVal
}
 
/* 持久化存储 */
export function setLang(lang, reload = false) {
    if(lang != getLang()) {
        Storage.set(langKey, lang || '')
        setHtmlLang(lang)
 
        // 重载页面
        if(reload) {
            window.location.reload()
        }
    }
}

 Endless，基于svelte.js+svelteUi开发后台管理系统就分享到这里。希望能喜欢哈！

最后附上两个项目实例

uniapp+uview跨端手机后台管理解决方案

electron+vue3+elementPlus仿Macos桌面端管理后台框架