ginv

ginv backend

Quick Start

npm install ginv

Import ginv in man.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import ArcoVue, { Message } from '@arco-design/web-vue'
import ArcoVueIcon from '@arco-design/web-vue/es/icon'
import Ginv, { getRoutes, App, type Config } from 'ginv'

import '@arco-design/web-vue/dist/arco.css'
import 'ginv/index.css'
import iconfont from './assets/font/iconfont.js?url'
import { auth, logout } from '@/api/authorization/auth'
import { getGlobalOptions } from '@/api/authorization/auth'

export const ossConfig = {
  default: {
    bucket: 'default',
    domain: '//assets.ginv.com/'
  }
}

const config: Config = {
  systemCode: 'ginv',
  systemName: 'Ginv管理后台',
  iconfont,
  gallery: false
  authFn: auth
  logoutFn: logout
  // globalFn: getGlobalOptions
}

const router = createRouter({
  history: createWebHistory(),
  routes: getRoutes()
})

const pinia = createPinia()
const app = createApp(App)

// eslint-disable-next-line no-underscore-dangle
// eslint-disable-next-line no-underscore-dangle
Message._context = app._context
const ginv = new Ginv(app, pinia, config)
ginv.bootstrap(router).use(router).use(pinia).use(ArcoVue).use(ArcoVueIcon).mount('#app')

support route params

async import rules will remove the route params.

example:

path: /user/:userId
components file: views/user.vue

path: /user/:userId/info
components file: views/user/info.vue

path: /book/:bookId/:lang
components file: views/book.vue

authFn

example

/**
 * @description 为用户设置多个用户组
 */
export function auth() {
  const user: User = {
    name: '超管',
    avatar: '',
    department: '总经办'
  }
  const theme: Theme = {
    layout: 'default',
    primaryColor: 'default'
  }

  /**
   * menu是路由的name, 值是路由所在页面的按钮的权限值
   */
  const permissions: { [menu: string]: number } = {
    app: 2,
    service: 8,
    erd: 0,
    api: 4,
    http: 0,
    apiHttp: 0,
    grpc: 0,
    apiGrpc: 0,
  }

  const routers: Menu[] = [
    {
      n: 'test', // 路由命名
      p: '/test', // 路由路径
      m: {
        t: '测试',
        i: 'icon-app',
        s: 1,
        v: 1
      }, // 路由meta
      c: [] // 路由children
    },
    {
      n: 'app', // 路由命名
      p: '/app', // 路由路径
      m: {
        t: '应用管理',
        i: 'icon-app',
        s: 1,
        v: 1
      }, // 路由meta
      c: [] // 路由children
    },
    {
      n: 'service', // 路由命名
      p: '/service', // 路由路径
      m: {
        t: '微服务',
        i: 'icon-service',
        s: 1,
        v: 1
      }, // 路由meta
      c: [] // 路由children
    },
    {
      n: 'erd', // 路由命名
      p: '/erd', // 路由路径
      m: {
        t: '数据模型',
        i: 'icon-erd',
        s: 1,
        v: 1
      }, // 路由meta
      c: [] // 路由children
    },
    {
      n: 'api', // 路由命名
      p: '/api', // 路由路径
      m: {
        t: '接口管理',
        i: 'icon-api',
        s: 0,
        v: 1
      }, // 路由meta
      c: [
        {
          n: 'http', // 路由命名
          p: '/api/http', // 路由路径
          m: {
            t: 'HTTP服务接口',
            i: 'icon-http',
            s: 0,
            v: 1
          }, // 路由meta
          c: [
            {
              n: 'apiHttp', // 路由命名
              p: '/api/http/:apiId', // 路由路径
              m: {
                t: '接口详情',
                i: '',
                s: 0,
                v: 0
              }, // 路由meta
              c: [] // 路由children
            }
          ] // 路由children
        },
        {
          n: 'grpc', // 路由命名
          p: '/api/grpc', // 路由路径
          m: {
            t: 'gRPC网关接口',
            i: 'icon-grpc',
            s: 0,
            v: 1
          }, // 路由meta
          c: [
            {
              n: 'apiGrpc', // 路由命名
              p: '/api/grpc/:apiId', // 路由路径
              m: {
                t: '接口详情',
                i: '',
                s: 0,
                v: 0
              }, // 路由meta
              c: [] // 路由children
            }
          ] // 路由children
        }
      ] // 路由children
    },
  ]

  return Promise.resolve({ user, theme, menus: routers, permissions })
  // return request<types.SessionReply>(`/authorization/auth/session`, req)
}

when visit `/test`, we'll get 403 error responese
when visit `/test1`, we'll get 404 error responese
when visit `/app`, we'll get success response

globalFn

export function getGlobalOptions() {
  const globalOptions = [
    { label: '默认', value: 1 },
    { label: '自定义1', value: 2 }
  ]

  const globalValue = 1

  return Promise.resolve({ globalOptions, globalValue })
  // return request<types.globalReply>(`/serviceName/rpcName/methodName`, req)
}

now you can get a global select components on siderbar, and it's default value is: 1