Location>code7788 >text

tauri2.0-admin desktop backend system|tauri2+vite5+element-plus management backend EXE program

Popularity:550 ℃/2024-10-15 13:35:50

innovationTauri2.0+Vue3+ElementPlusClient-side general-purpose back-office management systemTauri2Admin

tauri2-vue3-adminBased on the latest cross-platform frameworkTauri2.0 conformVite5+Vue3 Family Bucket Built a lightweight desktop backend management system template.Encapsulate tauri2 multi-window switching management, provide 4 common layout templates, support vue-i18n internationalization, breadcrumb navigation, multi-tag fast routingand other features.

Use of technology

  • Encoder: vscode
  • Technical framework: tauri2.0+vite^5.4.8+vue^3.5.11+vue-router^4.4.5
  • Status management: pinia^2.2.4
  • Storage service: pinia-plugin-persistedstate^4.1.1
  • Component library: element-plus^2.8.5
  • Chart component: echarts^5.5.1
  • Internationalization: vue-i18n^10.0.4
  • Rich text editor: @vueup/vue-quill^1.2.0
  • md editor: md-editor-v3^4.20.3
  • Simulated data: mockjs^1.1.0
  • Preprocessing style: sass^1.79.4

functional

  1. Based on the latest cross-platform technology stack,, Vue3 setup, Pinia2, ElementPlus, Vue-I18n, Echarts
  2. Support internationalized Chinese/English/Traditional languages
  3. Supports dynamic permission routing, breadcrumb navigation, shortcut tab bar caching routing
  4. tauri2 Highly reusable multi-window management
  5. Provide 4 common layout templates, free to change style
  6. Integration of commonly used tables, forms, lists, charts, editors, error handling and other business scenarios
  7. Clean UI, lightweight and freely customizable templates

Project Framework Catalog

tauri2-vue3adminUtilizes the latest cross-platform technologyTauri2.0+Vite5 Build a project template.

Tauri 2.0-Vue3Admin has been updated to my original portfolio, so feel free to go download and use it.

/item/detail/1107226011

Entrance Configuration

import { createApp } from 'vue'
import './'
import App from './'

// Introducing Plugin Configuration
import Plugins from './plugins'

// Introduction of routing/state management
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')

tauri2.0-admin general template

offers4 typesCommon layout templates, but also freely customizable functional templates.

<!-- Layout templates (classic)-->

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

  import Toolbar from '@/layouts/components/'
  import Sidebar from '@/layouts/components/sidebar/'
  import Menus from '@/layouts/components/menus/'
  import Breadcrumb from '@/layouts/components/'
  import Tabview from '@/layouts/components/'
  import Main from '@/layouts/components/'

  const appstate = appState()
</script>

<template>
  <div class="vuadmin__layout flexbox flex-col">
    <Toolbar />

    <div class="vuadmin__layout-body flex1 flexbox">
      <!-- a side-bar (in software)-->
      <div class="vuadmin__layout-sidebar">
        <Sidebar />
      </div>

      <!-- menu bar-->
      <div class="vuadmin__layout-menus" :class="{'hidden': }">
        <el-scrollbar>
          <Menus :rootRouteEnable="false" />
        </el-scrollbar>
      </div>

      <!-- Right main content area-->
      <div class="vuadmin__layout-main flex1 flexbox flex-col">
        <!-- breadcrumb navigation-->
        <Breadcrumb v-if="" />

        <!-- tabs-->
        <Tabview v-if="" />

        <!-- content area-->
        <Main />
      </div>
    </div>
  </div>
</template>

tauri2.0+vue3 custom navigation/drag and drop window

<script setup>
  import { ref, markRaw } from 'vue'
  import { ElMessageBox } from 'element-plus'
  import { QuestionFilled, SwitchButton } from '@element-plus/icons-vue'
  import { getCurrentWindow } from '@tauri-apps/api/window'
  import { listen } from '@tauri-apps/api/event'
  import { exit } from '@tauri-apps/plugin-process'

  import { isTrue } from '@/utils'
  import { authState } from '@/pinia/modules/auth'

  const authstate = authState()

  const props = defineProps({
    color: String,
    // Whether the window can be minimized
    minimizable: {type: [Boolean, String], default: true},
    // Whether the window can be maximized or not
    maximizable: {type: [Boolean, String], default: true},
    // Whether the window can be closed or not
    closable: {type: [Boolean, String], default: true},
    // level
    zIndex: {type: [Number, String], default: 2024},
  })

  const hasMaximized = ref(false)
  const isResizable = ref(true)
  const isMaximizable = ref(true)
  
  // Whether the user can manually resize the window
  getCurrentWindow().isResizable().then(res => {
     = res
  })
  // Whether the window can be maximized
  getCurrentWindow().isMaximizable().then(res => {
     = res
  })
  // Initially listens to whether the window is maximized or not
  getCurrentWindow().isMaximized().then(res => {
     = res
  })
  // Listen to the maximization of the window in real time
  listen('tauri://resize', async() => {
     = await getCurrentWindow().isMaximized()
  })

  // minimize (computing)
  const handleWinMin = async() => {
    await getCurrentWindow().minimize()
  }
  // Maximize/Restore
  const handleWinToggle = async() => {
    await getCurrentWindow().toggleMaximize()
  }
  // cloture
  const handleWinClose = async() => {
    const isMajor = getCurrentWindow().('main') > -1
    if(isMajor) {
      ('Does it minimize to the system tray without exiting the program?', 'draw attention to sth.', {
        type: 'warning',
        icon: markRaw(QuestionFilled),
        confirmButtonText: 'Cruelty withdrawal',
        cancelButtonText: 'Minimize to tray',
        customStyle: {'width': '300px'},
        draggable: true,
        roundButton: true,
        center: true,
        buttonSize: 'small',
        distinguishCancelAndClose: true,
      }).then(async() => {
        ()
        await exit()
      }).catch(async(action) => {
        if(action === 'cancel') {
          await getCurrentWindow().hide()
        }
      })
    }else {
      await getCurrentWindow().close()
    }
  }
</script>

<template>
  <div class="ev__winbtns flexbox flex-alignc vu__drag" :style="{'z-index': zIndex}">
    <div class="ev__winbtns-actions flexbox flex-alignc vu__undrag" :style="{'color': color}">
      <a v-if="isTrue(minimizable)" class="wbtn min" title= "Minimize" @click="handleWinMin"><i class="wicon iconfont elec-icon-min"></i></a>
      <a v-if="isTrue(maximizable)" class="wbtn toggle" :title= "hasMaximized ? 'Restore Down' : 'Maximized'" @click="handleWinToggle">
        <i class="wicon iconfont" :class="hasMaximized ? 'elec-icon-restore' : 'elec-icon-max'"></i>
      </a>
      <a v-if="isTrue(closable)" class="wbtn close" title= "Close" @click="handleWinClose"><i class="wicon iconfont elec-icon-quit"></i></a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import './';
</style>

After tauri has set up the borderless decoration, the drag and drop window is directly on the label of the element that needs to be dragged plus thedata-tauri-drag-region attribute is sufficient.

tauri2+vue3 internationalization configuration

tari2-admin uses vue-i18n to set up internationalized multilingual support.

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

// Introducing Language Configuration
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

// default language
export const langVal = 'zh-CN'

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

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

tauri2-vue3admin dynamic charts

vue3 encapsulates adaptable dynamic charts using theelement-resize-detector The plugin dynamically listens for DOM size changes.

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

  onMounted(() => {
    if(el?.value) {
      chartEl = ()
      (options)
       = chartEl
    }
    (, resizeHandle)
  })

  onBeforeUnmount(() => {
    ()
    (, resizeHandle)
  })

  return chartRef
}

Just call it directly by the following.

import { useEcharts } from '@/hooks/useEcharts'

const visitChartRef = ref(null)
useEcharts(visitChartRef, {
  tooltip: {
    trigger: 'axis',
    appendToBody: true,
  },
  grid: {
    // ...
  },
  xAxis: {
    // ...
  },
  yAxis: {
    type: 'value'
  },
  series: [
    // ...
  ]
})

tauri2-vue3admin tab bar routing/breadcrumb navigation

<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=""
        :closable="!item?.meta?.isAffix"
      >
        <template #label>
          <el-dropdown ref="dropdownRef" trigger="contextmenu" :id="" @visible-change="handleDropdownChange($event, )" @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="">{{$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>
  import { computed } from 'vue'
  import { appState } from '@/pinia/modules/app'

  import { useRoutes } from '@/hooks/useRoutes'

  const props = defineProps({
    // Whether to show expand/collapse
    collapseEnable: { type: Boolean, default: true },
  })

  const appstate = appState()
  const { getMatchRoute } = useRoutes()

  const matchRoute = computed(() => getMatchRoute())

  const handleCollapse = () => {
     = !
  }
</script>

<template>
  <div class="vu__breadcrumb flexbox">
    <i class="iconfont" :class=" ? 'elec-icon-menuon' : 'elec-icon-menuoff'" @click="handleCollapse"></i>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in matchRoute" :key="index">
        <router-link v-if="" :to="">{{$t(item?.meta?.title)}}</router-link>
        <template v-else>{{$t(item?.meta?.title)}}</template>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

Ok, the above is tauri2.0 + vue3 combat hand jerk desktop version of the backend management system to share some knowledge, I hope to help you!

Finally, here are a few examples of the latest cross-platform projects

/xiaoyan2017/p/18437155

/xiaoyan2017/p/18396212

/xiaoyan2017/p/18290962