基于svelte-ui前端后台管理系统SvelteAdmin

Svelte Ui Admin 最新基于svelte3.x+svelte-ui研发的中后台管理系统解决方案。

svelte-admin整合了常用的图表、表格、表单、权限控制及错误页等功能。

使用技术

  • 框架技术: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

特性

  1. 支持中文/英文/繁体多语言解决方案。
  2. 支持表格单选/多选、边框/隔行换色、横向/纵向虚拟滚动条等功能。
  3. 整体搭配高颜值的Svelte Ui组件库,风格更加统一。
  4. 高效率开发,整个框架已经搭建完毕,只需新增相应模块即可。
  5. 动态路由及菜单联动控制。

项目结构

svelte-ui组件库

这是一个基于svelte.js开发的桌面pc组件库。历时了两个月左右开发完成,最新研发的svelte-admin后台管理系统全部采用了svelte-ui组件库。

juejin.cn/post/7133363507256360968

公共布局模板

整体版面分为了顶部导航栏、左侧路由菜单、右侧主体区域。

<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>

Menu组件路由菜单

左侧的动态路由菜单是由svelte-ui组件库中的Menu组件实现功能。

基于svelte-ui前端后台管理系统SvelteAdmin

<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}
/**
 * 动态路由菜单
 */
export function load() {
    return {
        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: 'permission',
                path: '/permission',
                redirect: '/permission/all',
                meta: {
                    auth: true,
                    icon: 'sv-icon-secret',
                    title: 'layouts__main-menu__permission',
                    hidden: false,
                },
                children: [
                    ...
                ]
            },

            // 错误页面模块
            {
                key: 'error',
                path: '/error',
                redirect: '/error/403',
                meta: {
                    icon: 'sv-icon-roundclosefill',
                    title: 'layouts__main-menu__error',
                    hidden: false,
                },
                children: [
                    ...
                ]
            },
        ]
    }
}

svelte-i18n多语言配置

通过svelte-i18n插件来实现中英文/繁体字动态切换。
npm i svelte-i18n

基于svelte-ui前端后台管理系统SvelteAdmin

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()
        }
    }
}

Ok,以上就是svelte-ui开发后台管理系统的一些分享,希望对大家有些帮助哈!
uni-uadmin后台管理系统|uniapp+uView跨端后台框架实例

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
31
粉丝
38
喜欢
90
收藏
48
排名:390
访问:2.2 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
社区赞助商