乐趣区

关于svelte:Svelte3Admin基于svelteui中后台管理系统框架svelteadmin后台系统

jiezi

一、介绍

svelte.js 前端新框架爆火，可是网上对于 svelte.js 开发的组件库及后盾零碎比拟少。于是就本人入手开发了一个 svelte-ui 组件库和 svelte-admin 后盾管理系统。

Svelte Ui Admin 一款基于 svelte3.x+svelteKit+svelte-ui+sass+mockjs 等技术构建的中后盾治理。

二、技术实现

  • 开发工具：Vscode
  • 技术框架：svelte3.x+svelteKit+vite3
  • UI 组件库：svelte-ui (基于 svelte 自定义 pc 端 UI 组件库)
  • 图表组件：echarts^5.3.3
  • 图文编辑器：wangeditor^4.7.15
  • 国际化计划：svelte-i18n^3.4.0
  • 数据模仿：mockjs^1.1.0

svelte-admin反对 动态化换肤、中英文 / 繁体 国际化语言。

目录构造

Svelte-Ui 组件库

我的项目中所有的组件均是遵循应用 svelte-ui 组件库。整体格调对立好看。

svelte-ui 桌面 pc 端 UI 组件库

公共布局模板

svelte-admin整体分为 顶部导航条 + 左侧动静路由菜单 + 右侧主内容 区域三个模块。

<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-i18n 国际化

我的项目路由菜单及页面反对动静配置中英文 / 繁体多语言。

npm i svelte-i18n
/**
 * 国际化语言配置
 * @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 动静图表配置

为了解决多个中央应用图表的问题，新建了一个图表 hooks 文件。

/**
 * @title    动静图表 Hooks
 * @author    YXY
*/
import * as echarts from 'echarts'
import elementResizeDetector from "element-resize-detector"
import utils from '@/utils'

export const useCharts = async(node, options) => {
    let chartInstance
    let chartNode = null
    let erd = elementResizeDetector()

    const resizeFn = utils.debounce(() => {chartInstance.resize()
    }, 100)

    if(node) {chartInstance = echarts.init(node)
        chartInstance.setOption(options)
        chartNode = chartInstance
    }
    erd.listenTo(node, resizeFn)
}

好了，基于 svlete-ui 开发后盾管理系统就先分享这么多。后续会陆续分享一些实例我的项目。

https://segmentfault.com/a/11…

https://segmentfault.com/a/11…

退出移动版