自研electron31+vite5+vue3+elementPlus通用后台权限系统

举报
Andy Yan 发表于 2024/08/20 10:55:09 2024/08/20
【摘要】 Electron-Admin桌面后台系统|vite5+vue3+electron前端后台框架 最新原创electron31+vite5+vue3 setup+pinia2+element-plus+echarts实战轻量级后台管理系统。内置4种通用布局模板,支持i18n国际化、动态路由权限,整合了表格、表单、图表、列表、编辑器等业务场景。

前段时间有分享一款electron31+vue3跨平台仿微信客户端聊天项目,这次带来全新原创研发的Vite5.x+Electron31纯手撸一款客户端后台管理系统Exe应用Electron31ViteAdmin。

https://bbs.huaweicloud.com/blogs/430667

360截图20240817113830266.png

002360截图20240817102235304.png

vite5-electron31-admin内置4种经典布局模板,支持i18n国际化、动态路由权限、面包屑导航、多页签路由,实现了表格、表单、图表、列表、编辑器等常用功能模块。

p2.gif

p4.gif

技术栈

  • 编辑器:VScode
  • 框架技术:vite^5.3.4+vue^3.4.31+vue-router^4.4.0
  • 跨端框架:electron^31.3.0
  • 组件库:element-plus^2.7.8
  • 状态管理:pinia^2.2.0
  • 国际化方案:vue-i18n@9
  • 图表组件:echarts^5.5.1
  • markdown编辑器:md-editor-v3^4.18.0
  • 模拟数据:mockjs^1.1.0
  • 打包工具:electron-builder^24.13.3
  • electron+vite桥接插件:vite-plugin-electron^0.28.7

p5.gif

p6.gif

项目结构框架

360截图20240817112117688.png

项目特性

  1. 最新前端技术栈electron31.x、vite5、vue3、elementPlus、vue-i18n、echarts
  2. 支持中英文/繁体国际化解决方案
  3. 支持动态权限路由、多页签缓存路由
  4. 封装多窗口管理器,内置4种通用布局模板、自由切换风格
  5. 整合通用的表格、表单、列表、图表、编辑器、错误处理等模块

p7.gif

Electron31-vue3Admin通用模板

如上图:提供了4个不同布局模板。

/**
 * 通用布局模板
 * @author Andy
*/

<script setup>
  import { appState } from '@/pinia/modules/app'

  // 引入布局模板
  import Classic from './template/classic/index.vue'
  import Columns from './template/columns/index.vue'
  import Vertical from './template/vertical/index.vue'
  import Horizontal from './template/horizontal/index.vue'

  const appstate = appState()

  const LayoutMap = {
    'classic': Classic,
    'columns': Columns,
    'vertical': Vertical,
    'horizontal': Horizontal
  }
</script>

<template>
  <div class="vuadmin__container" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="LayoutMap[appstate.config.layout]" />
  </div>
</template>

360截图20240817113819619.png

360截图20240817114302571.png

001360截图20240817095542611.png

002360截图20240817101227311.png

002360截图20240817101808396.png

002360截图20240817102602044.png

002360截图20240817102812572.png

electron+vue3国际化

/**
 * 国际化配置
 * @author YXY
 */

import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'

// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

// 默认语言
export const langVal = 'zh-CN'

export default async (app) => {
  const appstate = appState()
  const lang = appstate.lang || langVal
  appstate.setLang(lang)

  const i18n = createI18n({
    legacy: false,
    locale: lang,
    messages: {
      'en': enUS,
      'zh-CN': zhCN,
      'zh-TW': zhTW
    }
  })
  
  app.use(i18n)
}

vue3图表化hooks

/**
 * 动态图表Hook
 */

import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'

export function useEcharts(el, options) {
  let chartEl
  let chartRef = ref(null)
  let erd = elementResizeDetectorMaker()

  const resizeHandle = () => {
    chartEl && chartEl.resize()
  }

  onMounted(() => {
    if(el?.value) {
      chartEl = echarts.init(el.value)
      chartEl.setOption(options)
      chartRef.value = chartEl
    }
    erd.listenTo(el.value, resizeHandle)
  })

  onBeforeUnmount(() => {
    chartEl.dispose()
    erd.removeListener(el.value, resizeHandle)
  })

  return chartRef
}

009360截图20240817104021768.png

009360截图20240817104554385.png

009360截图20240817104642574.png

009360截图20240817104748931.png

011360截图20240817105144300.png

011360截图20240817105220159.png

012360截图20240817105457852.png

013360截图20240817105939948.png

014360截图20240817110129998.png

016360截图20240817110306478.png

017360截图20240817110727046.png

018360截图20240817111141070.png

019360截图20240817111455151.png

019360截图20240817111541390.png

021360截图20240817111751599.png

026360截图20240817112144125.png

026360截图20240817112216830.png

027360截图20240817112233238.png

vue3自定义多标签路由

<template>
  <div class="vu__tabview">
    <el-tabs
      v-model="activeTab"
      class="vu__tabview-tabs"
      @tab-change="changeTabs"
      @tab-remove="removeTab"
    >
    <el-tab-pane
      v-for="(item, index) in tabList"
      :key="index"
      :name="item.path"
      :closable="!item?.meta?.isAffix"
    >
      <template #label>
        <el-dropdown ref="dropdownRef" trigger="contextmenu" :id="item.path" @visible-change="handleDropdownChange($event, item.path)" @command="handleDropdownCommand($event, item)">
          <span class="vu__tabview-tabs__label">
            <span>{{$t(item?.meta?.title)}}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="refresh" :icon="Refresh">{{$t('tabview__contextmenu-refresh')}}</el-dropdown-item>
              <el-dropdown-item command="close" :icon="Close" :disabled="item.meta.isAffix">{{$t('tabview__contextmenu-close')}}</el-dropdown-item>
              <el-dropdown-item command="closeOther" :icon="Switch">{{$t('tabview__contextmenu-closeother')}}</el-dropdown-item>
              <el-dropdown-item command="closeLeft" :icon="DArrowLeft">{{$t('tabview__contextmenu-closeleft')}}</el-dropdown-item>
              <el-dropdown-item command="closeRight" :icon="DArrowRight">{{$t('tabview__contextmenu-closeright')}}</el-dropdown-item>
              <el-dropdown-item command="closeAll" :icon="CircleCloseFilled">{{$t('tabview__contextmenu-closeall')}}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
  /**
 * 自定义多页签  By Andy Q: 282310962
 */
  import { onMounted, ref, computed, watch, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { Refresh, Close, Switch, DArrowLeft, DArrowRight, CircleCloseFilled } from '@element-plus/icons-vue'
  import { isObject, isImg } from '@/utils'
  import { useLink } from '@/hooks/useLink'
  import { appState } from '@/pinia/modules/app'
  
  const router = useRouter()
  const route = useRoute()
  const { jump } = useLink()
  const { locale } = useI18n()
  let { config: { keepAlive, tabRoutes, cacheRoutes }, updateConfig } = appState()

  const dropdownRef = ref()
  const activeTab = ref(route.path)
  const tabList = ref(tabRoutes)

  // 新增选项卡
  const addTab = () => {
    const index = tabList.value.findIndex(item => item?.path === activeTab.value)
    if(index == -1) {
      tabList.value.push({
        path: route?.path,
        name: route?.name,
        meta: {
          ...route?.meta,
        }
      })
    }
    updateConfig('tabRoutes', tabList.value)
    updateCacheRoutes()
  }

  // 删除选项卡
  const removeTab = (path) => {
    const index = tabList.value.findIndex(item => item?.path === path)
    if(index > -1) {
      tabList.value.splice(index, 1)
      updateTabs(tabList.value)
    }
  }

  // 删除左侧选项卡
  const removeLeftTab = (path) => {
    const index = tabList.value.findIndex(item => item?.path === path)
    if(index > -1) {
      tabList.value = tabList.value.filter((item, i) => item?.meta?.isAffix || i >= index)
      updateTabs(tabList.value)
    }
  }

  // 删除右侧选项卡
  const removeRightTab = (path) => {
    const index = tabList.value.findIndex(item => item?.path === path)
    if(index > -1) {
      tabList.value = tabList.value.filter((item, i) => item?.meta?.isAffix || i <= index)
      updateTabs(tabList.value)
    }
  }

  // 删除其它选项卡
  const removeOtherTab = (path) => {
    tabList.value = tabList.value.filter(item => item?.meta?.isAffix || item?.path === path)
    updateTabs(tabList.value)
  }

  // 删除全部
  const removeAllTab = (path) => {
    tabList.value = tabList.value.filter(item => item?.meta?.isAffix)
    updateTabs(tabList.value)
  }

  // 更新选项卡
  const updateTabs = (tabs) => {
    updateConfig('tabRoutes', tabs)
    updateCacheRoutes()
    const nextTab = tabs[tabs.length + 1] || tabs[tabs.length - 1]
    if(!nextTab) return
    jump(nextTab?.path)
  }

  // 更新keep-alive缓存
  const updateCacheRoutes = () => {
    let caches = tabList.value.filter(item => keepAlive || item?.meta?.isKeepAlive).map(item => item.name)
    updateConfig('cacheRoutes', caches)
  }

  // 清空keep-alive缓存
  const clearCacheRoutes = () => {
    updateConfig('cacheRoutes', [])
  }

  // 点击选项卡
  const changeTabs = (path) => {
    jump(path)
  }

  // 右键菜单更新
  const handleDropdownChange = (visible, name) => {
    // 控制每次只显示一个右键菜单
    if(!visible) return
    dropdownRef.value.forEach(item => {
      if(item.id === name) return
      item.handleClose()
    })
  }
  // 右键菜单命令
  const handleDropdownCommand = (cmd, item) => {
    const path = item?.path
    switch(cmd) {
      case 'refresh':
        router.go(0)
        break
      case 'close':
        removeTab(path)
        break
      case 'closeLeft':
        removeLeftTab(path)
        break
      case 'closeRight':
        removeRightTab(path)
        break
      case 'closeOther':
        removeOtherTab(path)
        break
      case 'closeAll':
        removeAllTab()
        break
    }
  }

  watch(() => route.path, () => {
    activeTab.value = route.path
    addTab()
  }, {
    immediate: true
  })
</script>

作者:xiaoyan2017
链接:https://www.cnblogs.com/xiaoyan2017/p/18366451
来源:博客园
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。