基於Svelte Ui中後台解決方案SvelteAdmin

語言: CN / TW / HK

Svelte Ui Admin 一款輕量級的svelte.js中後台管理系統。

基於最新前端技術框架 svelte.js+svelteKit 開發搭建,搭配了svelte-ui組件庫實現UI更加統一規範。包含了常用的 表格/表單/圖表/圖文編輯器/動態權限 等功能。

svelte-admin支持動態路由菜單、多語言國際化配置。

技術棧

  • 編輯器:Vscode
  • 框架技術:svelte3.x+svelteKit+vite3
  • UI組件庫:svelte-ui (基於svelte自定義pc端UI組件庫)
  • 樣式處理:sass^1.54.4
  • 圖表組件:echarts^5.3.3
  • 編輯器組件:wangeditor^4.7.15
  • 國際化方案:svelte-i18n^3.4.0
  • 數據模擬:mockjs^1.1.0

功能特點

  1. 支持中文/英文/繁體多語言解決方案。
  2. 支持表格單選/多選、邊框/隔行換色、橫向/縱向虛擬滾動條等功能。
  3. 整體搭配高顏值的Svelte Ui組件庫,風格更加統一。
  4. 高效率開發,整個框架已經搭建完畢,只需新增相應模塊即可。
  5. 動態路由及菜單聯動控制。

項目結構目錄

效果圖

svelte-ui桌面端組件庫

項目整體遵循了svelte-ui組件設計規範,超過30+組件,按需引入使用。

juejin.cn/post/713336…

公共佈局模板

項目佈局結構分為頂部導航欄、左側路由菜單、右側面包屑導航和內容區域。

<div 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>
</div>
複製代碼

+error.svelte錯誤處理

<script>
    import { page } from '$app/stores'
    import { goto } from '$app/navigation'
    import { Button } from '$lib/svelte-ui'

    function goHome() {
        goto('/home/index')
    }
</script>

<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 Home</Button>
    </div>
</div>
複製代碼

svelte多語言國際化

使用svelte.js構建的項目,可以使用svelte-i18n插件來配置國際化語言。

npm i svelte-i18n -D
複製代碼
/**
 * 國際化語言配置
 * @author YXY
 */

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()
        }
    }
}
複製代碼

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}
    <div></div>
    {: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}
複製代碼

行了,基於svelte3.x+svelteKit+svelteUi開發動態後台管理系統就先分享這麼多吧。

juejin.cn/post/705879…