Tauri-Admin通用后台管理系统|tauri+vue3+pinia桌面端后台EXE

import { createApp } from "vue" import "./styles.scss" import App from "./App.vue"  // 引入路由及状态管理 import Router from './router' import Pinia from './pinia'  // 引入插件配置 import Libs from './libs'  const app = createApp(App)  app .use(Router) .use(Pinia) .use(Libs) .mount("#app")

<script setup>     import { computed } from 'vue'     import { appStore } from '@/pinia/modules/app'      // 引入布局模板     import Columns from './template/columns/index.vue'     import Vertical from './template/vertical/index.vue'     import Transverse from './template/transverse/index.vue'      const store = appStore()     const config = computed(() => store.config)      const LayoutConfig = {         columns: Columns,         vertical: Vertical,         transverse: Transverse     } </script>  <template>     <div class="veadmin__container" :style="{'--themeSkin': store.config.skin}">         <component :is="LayoutConfig[config.layout]" />     </div> </template>

/**  * 路由配置  * @author YXY    Q：282310962  */  import { appWindow } from '@tauri-apps/api/window' import { createRouter, createWebHistory } from 'vue-router' import { appStore } from '@/pinia/modules/app' import { hasPermission } from '@/hooks/usePermission' import { loginWin } from '@/multiwins/actions'  // 批量导入modules路由 const modules = import.meta.glob('./modules/*.js', { eager: true }) const patchRoutes = Object.keys(modules).map(key => modules[key].default).flat()  /**  * @description 动态路由参数配置  * @param path ==> 菜单路径  * @param redirect ==> 重定向地址  * @param component ==> 视图文件路径  * 菜单信息(meta)  * @param meta.icon ==> 菜单图标  * @param meta.title ==> 菜单标题  * @param meta.activeRoute ==> 路由选中(默认空 route.path)  * @param meta.rootRoute ==> 所属根路由选中(默认空)  * @param meta.roles ==> 页面权限 ['admin', 'dev', 'test']  * @param meta.breadcrumb ==> 自定义面包屑导航 [{meta:{...}, path: '...'}]  * @param meta.isAuth ==> 是否需要验证  * @param meta.isHidden ==> 是否隐藏页面  * @param meta.isFull ==> 是否全屏页面  * @param meta.isKeepAlive ==> 是否缓存页面  * @param meta.isAffix ==> 是否固定标签(tabs标签栏不能关闭)  * */ const routes = [     // 首页     {         path: '/',         redirect: '/home'     },     // 错误模块     {         path: '/:pathMatch(.*)*',         component: () => import('@views/error/404.vue'),         meta: {             title: 'page__error-notfound'         }     },     ...patchRoutes ]  const router = createRouter({     history: createWebHistory(),     routes })  // 全局钩子拦截 router.beforeEach((to, from, next) => {     // 开启加载提示     loading({         text: 'Loading...',         background: 'rgba(70, 255, 170, .1)',         onOpen: () => {             console.log('开启loading')         },         onClose: () => {             console.log('关闭loading')         }     })          const store = appStore()     if(to?.meta?.isAuth && !store.isLogged) {         loginWin()         loading.close()     }else if(!hasPermission(store.roles, to?.meta?.roles)) {         // 路由鉴权         appWindow?.show()         next('/error/forbidden')         loading.close()         Notify({             title: '访问限制！',             description: `<span style="color: #999;">当前登录角色 ${store.roles} 没有操作权限，请联系管理员授权后再操作。</div>`,             type: 'danger',             icon: 've-icon-unlock',             time: 10         })     }else {         appWindow?.show()         next()     } })  router.afterEach(() => {     loading.close() })  router.onError(error => {     loading.close()     console.warn('Router Error》》', error.message); })  export default router

/**  * 状态管理 Pinia util  * @author YXY  */  import { createPinia } from 'pinia' // 引入pinia本地持久化存储 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'  const pinia = createPinia() pinia.use(piniaPluginPersistedstate)  export default pinia

<script setup>   import { ref, computed, h, watch, nextTick } from 'vue'   import { useI18n } from 'vue-i18n'   import { Icon, useLink } from 've-plus'   import { useRoutes } from '@/hooks/useRoutes'   import { appStore } from '@/pinia/modules/app'    // 引入路由集合   import mainRoutes from '@/router/modules/main.js'    const props = defineProps({     // 菜单模式(vertical|horizontal)     mode: { type: String, default: 'vertical' },     // 是否开启一级路由菜单     rootRouteEnable: { type: Boolean, default: true },     // 是否要收缩     collapsed: { type: Boolean, default: false },      // 菜单背景色     background: { type: String, default: 'transparent' },     // 滑过背景色     backgroundHover: String,     // 菜单文字颜色     color: String,     // 菜单激活颜色     activeColor: String   })    const { t } = useI18n()   const { jumpTo } = useLink()   const { route, getActiveRoute, getCurrentRootRoute, getTreeRoutes } = useRoutes()   const store = appStore()    const rootRoute = computed(() => getCurrentRootRoute(route))   const activeKey = ref(getActiveRoute(route))   const menuOptions = ref(getTreeRoutes(mainRoutes))   const menuFilterOptions = computed(() => {     if(props.rootRouteEnable) {       return menuOptions.value     }     // 过滤掉一级菜单     return menuOptions.value.find(item => item.path == rootRoute.value && item.children)?.children   })    watch(() => route.path, () => {     nextTick(() => {       activeKey.value = getActiveRoute(route)     })   })    // 批量渲染图标   const batchRenderIcon = (option) => {     return h(Icon, {name: option?.meta?.icon ?? 've-icon-verticleleft'})   }    // 批量渲染标题   const batchRenderLabel = (option) => {     return t(option?.meta?.title)   }    // 路由菜单更新   const handleUpdate = ({key}) => {     jumpTo(key)   } </script>  <template>   <Menu     class="veadmin__menus"     v-model="activeKey"     :options="menuFilterOptions"     :mode="mode"     :collapsed="collapsed && store.config.collapse"     iconSize="18"     key-field="path"     :renderIcon="batchRenderIcon"     :renderLabel="batchRenderLabel"     :background="background"     :backgroundHover="backgroundHover"     :color="color"     :activeColor="activeColor"     @change="handleUpdate"     style="border: 0;"   /> </template>

<RouteMenu     :rootRouteEnable="false"     backgroundHover="#f1f8fb"     activeColor="#24c8db" />  <RouteMenu     rootRouteEnable     collapsed     background="#193c47"     backgroundHover="#1a5162"     color="rgba(235,235,235,.7)"     activeColor="#24c8db"     :collapsedIconSize="20" />  <RouteMenu     mode="horizontal"     background="#193c47"     backgroundHover="#1a5162"     color="rgba(235,235,235,.7)"     activeColor="#24c8db"     arrowIcon="ve-icon-caretright" />

import { createI18n } from 'vue-i18n' import { appStore } 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 store = appStore()     const lang = store.lang || langVal      const i18n = createI18n({         legacy: false,         locale: lang,         messages: {             'en': enUS,             'zh-CN': zhCN,             'zh-TW': zhTW         }     })          app.use(i18n) }

<template>   <div v-if="app.config.tabsview" class="veadmin__tabsview">     <Scrollbar ref="scrollbarRef" mousewheel>       <ul class="tabview__wrap">         <li           v-for="(tab,index) in tabOptions" :key="index"           :class="{'actived': tabKey == tab.path}"           @click="changeTab(tab)"           @contextmenu.prevent="openContextMenu(tab, $event)"         >           <Icon class="tab-icon" :name="tab.meta?.icon" />           <span class="tab-title">{{$t(tab.meta?.title)}}</span>           <Icon v-if="!tab.meta?.isAffix" class="tab-close" name="ve-icon-close" size="12" @click.prevent.stop="closeTab(tab)" />         </li>       </ul>     </Scrollbar>   </div>   <!-- 右键菜单 -->   <Dropdown     ref="contextmenuRef"     trigger="manual"     :options="contextmenuOptions"     fixed="true"     :render-label="handleRenderLabel"     @change="changeContextMenu"     style="height: 0;"   /> </template>

import { ref, nextTick } from 'vue' import { useRoute } from 'vue-router' import { defineStore } from 'pinia' import { appStore } from '@/pinia/modules/app'  export const tabsStore = defineStore('tabs', () => {         const currentRoute = useRoute()         const store = appStore()          /*state*/         const tabViews = ref([]) // 标签栏列表         const cacheViews = ref([]) // 缓存列表         const reload = ref(true) // 刷新标识          // 判断tabViews某个路由是否存在         const tabIndex = (route) => {             return tabViews.value.findIndex(item => item?.path === route?.path)         }          /*actions*/         // 新增标签         const addTabs = (route) => {             const index = tabIndex(route)             if(index > -1) {                 tabViews.value.map(item => {                     if(item.path == route.path) {                         // 当前路由缓存                         return Object.assign(item, route)                     }                 })             }else {                 tabViews.value.push(route)             }              // 更新keep-alive缓存             updateCacheViews()         }          // 移除标签         const removeTabs = (route) => {             const index = tabIndex(route)             if(index > -1) {                 tabViews.value.splice(index, 1)             }              // 更新keep-alive缓存             updateCacheViews()         }          // 移除左侧标签         const removeLeftTabs = (route) => {             const index = tabIndex(route)             if(index > -1) {                 tabViews.value = tabViews.value.filter((item, i) => item?.meta?.isAffix || i >= index)             }              // 更新keep-alive缓存             updateCacheViews()         }          // 移除右侧标签         const removeRightTabs = (route) => {             const index = tabIndex(route)             if(index > -1) {                 tabViews.value = tabViews.value.filter((item, i) => item?.meta?.isAffix || i <= index)             }              // 更新keep-alive缓存             updateCacheViews()         }          // 移除其它标签         const removeOtherTabs = (route) => {             tabViews.value = tabViews.value.filter(item => item?.meta?.isAffix || item?.path === route?.path)              // 更新keep-alive缓存             updateCacheViews()         }          // 移除所有标签         const clearTabs = () => {             tabViews.value = tabViews.value.filter(item => item?.meta?.isAffix)              // 更新keep-alive缓存             updateCacheViews()         }          // 更新keep-alive缓存         const updateCacheViews = () => {             cacheViews.value = tabViews.value.filter(item => store.config.keepAlive || item?.meta?.isKeepAlive).map(item => item.name)             console.log('cacheViews缓存路由>>：', cacheViews.value)         }          // 移除keep-alive缓存         const removeCacheViews = (route) => {             cacheViews.value = cacheViews.value.filter(item => item !== route?.name)         }          // 刷新路由         const reloadTabs = () => {             removeCacheViews(currentRoute)             reload.value = false             nextTick(() => {                 updateCacheViews()                 reload.value = true                 document.documentElement.scrollTo({ left: 0, top: 0 })             })         }          // 清空缓存         const clear = () => {             tabViews.value = []             cacheViews.value = []         }          return {             tabViews,             cacheViews,             reload,              addTabs,             removeTabs,             removeLeftTabs,             removeRightTabs,             removeOtherTabs,             clearTabs,             reloadTabs,             clear         }     },     // 本地持久化存储(默认存储localStorage)     {         // persist: true         persist: {             // key: 'tabsState',             storage: localStorage,             paths: ['tabViews', 'cacheViews']         }     } )

{   "build": {     "beforeDevCommand": "yarn dev",     "beforeBuildCommand": "yarn build",     "devPath": "http://localhost:1420",     "distDir": "../dist",     "withGlobalTauri": false   },   "package": {     "productName": "tauri-admin",     "version": "0.0.0"   },   "tauri": {     "allowlist": {       "all": true,       "shell": {         "all": false,         "open": true       }     },     "bundle": {       "active": true,       "targets": "all",       "identifier": "com.tauri.admin",       "icon": [         "icons/32x32.png",         "icons/128x128.png",         "icons/128x128@2x.png",         "icons/icon.icns",         "icons/icon.ico"       ]     },     "security": {       "csp": null     },     "windows": [       {         "fullscreen": false,         "resizable": true,         "title": "tauri-admin",         "width": 1000,         "height": 640,         "center": true,         "decorations": false,         "fileDropEnabled": false,         "visible": false       }     ],     "systemTray": {       "iconPath": "icons/icon.ico",       "iconAsTemplate": true,       "menuOnLeftClick": false     }   } }

[package] name = "tauri-admin" version = "0.0.0" description = "基于tauri+vue3+vite4+pinia轻量级桌面端后台管理Tauri-Admin" authors = "andy <282310962@qq.com>" license = "" repository = "" edition = "2023"  # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html  [build-dependencies] tauri-build = { version = "1.4", features = [] }  [dependencies] tauri = { version = "1.4", features = ["api-all", "icon-ico", "icon-png", "system-tray"] } serde = { version = "1.0", features = ["derive"] } serde_json = "1.0"  [features] # this feature is used for production builds or when `devPath` points to the filesystem # DO NOT REMOVE!! custom-protocol = ["tauri/custom-protocol"]