手记

超颜值Svelte3+Vite3+SvelteUi中后台前端管理系统

项目介绍

SvelteVite3Admin 基于svelte3.x+vite3+svelte-ui+svelte-i18n 等技术构建的中后台管理系统平台。包含常用的表单验证/表格/列表/图表/权限控制/错误处理等功能,整合svelte-i18n国际化多语言。

技术框架

  • 框架技术: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. 动态路由及菜单联动控制。

项目结构目录

公共布局模板

通过+layout.svelte来控制公共布局模板。

<div class="svadmin__container" >
    <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-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()
        }
    }
}

基于svelte3+vite3+svelte-ui开发后台系统就分享到这里了。

1人推荐
随时随地看视频
慕课网APP

热门评论

想要学习一下

有完整的项目么

查看全部评论