Vite B端后台管理起始项

使用 NPM:
$ npm create vite@latest

使用 Yarn:
$ yarn create vite

使用 PNPM:
$ pnpm create vite

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

module.exports = {
    rules: {
        'at-rule-no-unknown': [
            true,
            {
                ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen']
            }
        ],
        'declaration-block-trailing-semicolon': null,
        'no-descending-specificity': null
    }
}

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

npm i -D vite-plugin-windicss windicss

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

import 'virtual:windi.css'

<script setup>

</script>

<template>
  <button class='btn'>
    按钮
  </button>
</template>

<style>
  .btn{
    @apply bg-purple-500 text-indigo-50 px-4 py-2 rounded-full transition-all duration-500 hover:( bg-purple-900) focus:(ring-8 ring-purple-900);
  }
</style>

npm install vue-router@4
yarn add vue-router@4

import {
    createRouter,
    // 函数用来创建一个路由实例
    createWebHashHistory
    // 用来创建一个基于哈希路由的历史对象
} from 'vue-router'

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
}]

// 这段代码定义了一个路由器，该路由器使用createWebHashHistory()创建的历史记录对象和给定的路由（routes）来定义路由。
// createWebHashHistory()创建的历史记录对象会把URL的片段存储在window.location.hash中，以支持前进和后退按钮和书签。
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

<template>
  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
      ><div class="grid-content ep-bg-purple"
    /></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
      ><div class="grid-content ep-bg-purple-light"
    /></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
      ><div class="grid-content ep-bg-purple"
    /></el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
      ><div class="grid-content ep-bg-purple-light"
    /></el-col>
  </el-row>
</template>

<style>
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

<el-input v-model="form.username" placeholder="请输入用户名">
  <template #prefix>
    <el-icon class="el-input__icon">
      <search />
    </el-icon>
  </template>
</el-input>

import { Calendar, Search } from '@element-plus/icons-vue'

// mian.js
import './assets/icon/iconfont.css'


<el-link type="primary" class="text-white" @click="JumpToGithub">
  <i class="iconfont icon-icon_github mr-1"></i>
  Github
</el-link>

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

<template>
    <ul>
        <li>{{ myref0 }}</li>
        <li>{{ myref1 }}</li>
        <li>{{ myref2 }}</li>
        <li>{{ myref3 }}</li>
        <li>{{ myrea0 }}</li>
        <li>{{ myrea1 }}</li>
        <li>{{ myrea2.age }}</li>
        <li>{{ myrea3.user.name }}</li>
        <li>{{ myrea4.one.three.age.four }}</li>
    </ul>
    <el-button @click="change">change</el-button>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
    setup() {
        let myref0 = ref(1);
        let myref1 = ref(2);
        let myref2 = ref(true);
        let myref3 = ref('myref3')
        let myrea0 = reactive(0);
        let myrea1 = reactive('myrea1');
        let myrea2 = reactive({ age: 3 })
        let myrea3 = reactive({
            user: {
                name: "zs",
            }
        })
        let myrea4 = reactive({
            top: 'top', one: {
                two: "two",
                three: {
                    name: "LS",
                    age: {
                        four: "four"
                    }
                },
            }
        })
        function change() {
            myref0 = 2;
            myref1.value++;
            myref2.value = false;
            myref3.value = 'MyRef333'
            myrea0++;
            myrea1 = 'myrea1111';
            myrea2.age++;
            myrea3.user.name = "ww";
            myrea4.one.three.age.four = "five";
            console.log(myref0);
            console.log(myrea0);
            console.log(myrea1);
        }
        return { myref0, myrea0, myref1, myrea1, myref2, myrea2, myref3, myrea3, myrea4, change }
    }
}
</script>

1                 =>            1
2                 =>            3
false             =>            flase
MyRef3            =>            MyRef333
0                 =>            0
myrea1            =>            myrea1
3                 =>            4
zs                =>            ww
four              =>            five

<el-form ref="formRef" :model="form" :rules="rules" class="w-2/4">
  <el-form-item prop="username">
    <el-input v-model="form.username" placeholder="请输入用户名">
      <template #prefix>
        <el-icon>
          <User />
        </el-icon>
      </template>
    </el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password @keyup.enter.native="onSubmit">
      <template #prefix>
        <el-icon>
          <Lock />
        </el-icon>
      </template>
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button round color="#2563eb " class="w-full" type="primary" @click="onSubmit">登 录</el-button>
  </el-form-item>
</el-form>

import { reactive, ref } from 'vue'

// do not use same name with ref
const form = reactive({
  username: "",
  password: ""
})

const rules = {
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur'
    },
  ]
}


const formRef = ref(null)
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    console.log("验证通过");
  })
}

npm install axios

// /src/axios.js

import axios from 'axios';


console.log(import.meta.env.VITE_APP_BASE_API);

const instance = axios.create({
    baseURL:import.meta.env.VITE_APP_BASE_API,
})

export default instance;

// vue.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  // 它将别名“~”映射到当前目录的“src”文件夹，因此在进行路径引用时，可以使用“~”，而不是使用相对路径。
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },
  plugins: [
    vue(),
    WindiCSS()
  ],
  server: {
    cors: true,
    proxy: {
      '/api': {
        target: 'https://ceshi13.dishait.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    sourcemap: false,
    // 消除打包大小超过500kb警告
    chunkSizeWarningLimit: 4000
  },
})

import axios from '~/axios';

// 通过 export 导出
export const login = (username, password) => {
    return axios.post('/admin/login', {
        username,
        password
    });
};

npm i @vueuse/integrations
npm i universal-cookie

<template>
    <div class="container">
        <div class="row">
        <div class="col-12">
            <el-button type="primary" @click="set('test', 'test')">设置cookie</el-button>
            <el-button type="primary" @click="remove('test')">删除cookie</el-button>
            <el-button type="primary" @click="get('test')">读取cookie</el-button>
        </div>
        </div>
    </div>
</template>

<script setup>
    import { useCookies } from "@vueuse/integrations/useCookies";
    
    const TokenKey = "admin-token";
    const cookies = useCookies();
    
    // 获取token
    export function getToken() {
        return cookies.get(TokenKey);
    }
    
    // 设置token
    export function setToken(token) {
        // token 有效期为 60 分钟
        const expires = new Date(Date.now() + 60 * 60 * 1000);
        cookies.set(TokenKey, token, { expires });
    }
    
    // 移除token
    export function removeToken() {
        return cookies.remove(TokenKey);
    }
</script>

import { getToken} from '~/composables/auth'
import { toast } from '~/composables/util'
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
})

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    const token = getToken();

    if (token) {
        config.headers['token'] = token;
    }
    
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data.data;
}, function (error) {
    // 对响应错误做点什么
    toast(error.response.data.msg, 'error');

    return Promise.reject(error);
});

export default instance;

npm install vuex@next --save

// /store/index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            // 用户信息
            user: {}
        }
    },
    mutations: {
        // 设置用户信息
        SET_USER_INFO(state, user) {
            state.user = user
        }
    }
});

export default store

import { useStore } from 'vuex'

const store = useStore();
store.commit('SET_USER_INFO', res2);

<template>
    <div class="about">
        <h1> {{ $store.state.user }}</h1>
    </div>
</template>

// /src/permission.js

// 处理权限相关
import router from '~/router'
import { getToken } from '~/composables/auth'
import { toast } from '~/composables/util'

// 全局前置守卫
router.beforeEach((to, from, next) => {
    // 如果有token，就放行
    const token = getToken();

    // 如果没有token，就跳转到登录页
    if (!token && to.path !== '/login') {
        toast("请先登录", "warning");
        return next ({ path: "/login" })
    };

    // 防止重复登录
    if (token && to.path === '/login') {
        toast("请先退出登录", "warning");

        return next ({ path: from.path })
    };

    next()
})

// mian.js

import "./permission"

app.use(store)

// npm i nprogress
// main.js

import "nprogress/nprogress.css"

// composable/util.js
// 显示全屏loading
export function showFullLoading() {
    nprogress.start()
}

// 隐藏全屏loading
export function hideFullLoading() {
    nprogress.done()
}

// permission.js

import { toast, showFullLoading, hideFullLoading } from '~/composables/util'

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
    // 显示 loading
    showFullLoading();
}

// 全局后置守卫
router.afterEach(() => {
    // 隐藏 loading
    hideFullLoading();
})

#nprogress .bar {
    background: wheat !important;
     height: 3px !important;
}

// router/index.js

{
    path: '/login',
    name: 'Login',
    component: Login,
    meta: {
        title: '登录'
    }
}

// permission.js

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 设置页面标题
  document.title = to.meta.title;
}

// /layout/admin.vue

<template>
    <el-container>
        <el-header>
            <f-header></f-header>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <f-menu></f-menu>
            </el-aside>
            <el-main>
                <f-tag-list></f-tag-list>
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

import FHeader from './components/FHeader.vue';
import FMenu from './components/FMenu.vue';
import FTagList from './components/FTagList.vue';

<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-1"><eleme-filled /></el-icon>
            帝莎编程
        </span>
        <el-icon class="icon-btn">
            <fold />
        </el-icon>
        <el-icon class="icon-btn">
            <refresh />
        </el-icon>
        <div class="ml-auto flex items-center">
            <el-icon class="icon-btn"><full-screen /></el-icon>
            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex items-center text-light-50">
                    <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style>
.f-header {
    @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
}

.logo {
    width: 250px;
    @apply flex justify-center items-center text-xl font-thin;
}

.icon-btn {
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-600;
}

.f-header .dropdown {
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center mx-5;
}
</style>

<el-dropdown class="dropdown" @command="handleCommand">
    <span class="flex items-center text-light-50">
        <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
        {{ $store.state.user.username }}
        <el-icon class="el-icon--right">
            <arrow-down />
        </el-icon>
    </span>
    <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item command="rePwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
    </template>
</el-dropdown>

<script setup>
    const handleCommand = (command)=>{
        console.log(command);
    }
</script>

npm i @vueuse/core

<el-tooltip effect="dark" content="刷新" placement="bottom">
    <el-icon class="icon-btn" @click="handleRefresh">
        <refresh />
    </el-icon>
</el-tooltip>
<el-tooltip effect="dark" content="全屏" placement="bottom">
    <el-icon class="icon-btn" @click="toggle">
        <full-screen v-if="!isFullscreen" />
        <aim v-else />
    </el-icon>
</el-tooltip>
// full-screen v-if="!isFullscreen"和aim v-else是两个自定义的组件，它们
// 分别代表全屏和非全屏状态下的图标。其中，v-if="!isFullscreen"表示当
// isFullscreen为false时，显示full-screen组件，否则显示aim组件。

<script setup>
    import { useFullscreen } from '@vueuse/core'
    const handleRefresh = ()=>{
        // router.go(0);
        location.reload();
    }

    // const toggle = ()=>{
    //     if (document.fullscreenElement) {
    //         document.exitFullscreen();
    //     } else {
    //         document.documentElement.requestFullscreen();
    //     }
    // }
    const { isFullscreen, toggle } = useFullscreen()
    // isFullscreen 是否全屏
    // toggle 切换全屏
</script>

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

<template>
    <el-drawer v-model="showDrawer" title="修改密码" size="45%" :close-on-click-modal="false">
        <div class="formDrawer">
            <div class="body">
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary">提交</el-button>
                <el-button type="default" @click="close">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup>
    import { ref } from "vue"
    const showDrawer = ref(false)

    // 打开
    const open = ()=> showDrawer.value = true

    // 关闭
    const close = ()=>showDrawer.value = false

    // 向父组件暴露以下方法
    defineExpose({
        open,
        close
    })

</script>
<style>
    .formDrawer{
        width: 100%;
        height: 100%;
        position: relative;
        @apply flex flex-col;
    }

    .formDrawer .body{
        flex: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        overflow-y: auto;
    }

    .formDrawer .actions{
        height: 50px;
        @apply mt-auto flex items-center;
    }
</style>

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

<template>
    <el-drawer v-model="showDrawer" :title="title" :size="size" :close-on-click-modal="false"
        :destroy-on-close="destroyOnClose">
        <div class="formDrawer">
            <div class="body">
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading">{{ submitText }}</el-button>
                <el-button type="default" @click="close">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script setup>
  // defineProps() 接收父组件传递的参数
  const props = defineProps({
      title: String,
      size: {
          type: String,
          default: '45%'
      },
      // 控制是否在关闭 Drawer 之后将子元素全部销毁
      destroyOnClose: {
          type: Boolean,
          default: true
      },
      // 提交按钮的文字
      submitText: {
          type: String,
          default: '提交'
      },
  })
  
  // 这段代码使用了 Vue 3 中的 defineEmits 函数来声明了一个名为 submit 的事件。然后在 submit 函数中，调用了 emit 函数并传入了
  // 事件名称 'submit'，从而触发了名为 submit 的事件。这样做的好处是可以在组件的模板中使用 v-on:submit 或 @submit 来监听该事件
  // 从而实现组件与父组件之间的通信。
  const emit = defineEmits(['submit'])
  const submit = () => emit('submit')
<script>

<form-drawer ref="formDrawerRef" title="修改密码" size="30%" destroy-on-close @submit="onSubmit" />

<template>
    <div class="f-menu" :style="{ width: $store.state.asideWidth }">
        <el-menu :default-active="defaultActive" unique-opened default-active="2" class="border-0" @select="handleSelect"
            :collapse="isCollapse" :collapse-transition="false">
            <template v-for="(item, index) in asideMenus" :key="index">
                <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="(item2, index2) in item.child" :key="index2" :index="item2.frontpath">
                        <el-icon>
                            <component :is="item2.icon"></component>
                        </el-icon>
                        <span>{{ item2.name }}</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-menu-item v-else :index="item.frontpath">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore()
const isCollapse = computed(() => store.state.asideWidth != "250px")

// 默认选中当前路由路径
const route = useRoute()
const defaultActive = ref(route.path)


const router = useRouter()
const asideMenus = [
    {
        "name": "后台面板",
        "icon": "help",
        "child": [{
            "name": "主控台",
            "icon": "home-filled",
            "frontpath": "/",
        }]
    },
    {
        "name": "商城管理",
        "icon": "shopping-bag",
        "child": [{
            "name": "商品管理",
            "icon": "shopping-cart-full",
            "frontpath": "/goods/list",
        }],
    },
    {
        "name": "用户管理",
        "icon": "user",
        "frontpath": "/user/list"
    }
]

const handleSelect = (e) => {
    router.push(e)
}
</script>

<style>
.f-menu {
    transition: all 0.2s;
    top: 64px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    @apply shadow-md fixed bg-light-50;
}

.f-menu::-webkit-scrollbar {
    width: 0px;
}
</style>

const store = createStore({
  state() {
      return {
          // 用户信息
          user: {},

          // 侧边栏宽度
          asideWidth: "250px",

      }
  },
  mutations: {
      // 设置用户信息
      SET_USER_INFO(state, user) {
          state.user = user
      },
      // 侧边栏展开
      ASIDE_OPEN(state) {
          state.asideWidth = state.asideWidth == "250px" ? "64px" : "250px"
      }
  }
});

import {
    createRouter,
    // 函数用来创建一个路由实例
    createWebHashHistory
    // 用来创建一个基于哈希路由的历史对象
} from 'vue-router'

import Index from '~/pages/index.vue'
import NotFound from '~/pages/404.vue'
import Admin from '~/layouts/admin.vue'
import GoodList from '~/pages/goods/list.vue'
import CategoryList from '~/pages/category/list.vue'

import Login from '~/pages/login/login.vue'

// 默认路由, 所有用户都可以访问
const routes = [
    {
        path: '/',
        name: 'Admin',
        component: Admin,
        meta: {
            title: '后台首页'
        }
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: NotFound,
        meta: {
            title: '404'
        }
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        meta: {
            title: '登录'
        }
    }

]

// 动态路由, 用于匹配用户权限添加的路由
const asyncRoutes = [{
    path: "/",
    name: "/",
    component: Index,
    meta: {
        title: "后台首页"
    }
}, {
    path: "/goods/list",
    name: "/goods/list",
    component: GoodList,
    meta: {
        title: "商品管理"
    }
}, {
    path: "/category/list",
    name: "/category/list",
    component: CategoryList,
    meta: {
        title: "分类列表"
    }
}]

// 这段代码定义了一个路由器，该路由器使用createWebHashHistory()创建的历史记录对象和给定的路由（routes）来定义路由。
// createWebHashHistory()创建的历史记录对象会把URL的片段存储在window.location.hash中，以支持前进和后退按钮和书签。
export const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 用于添加动态路由
export function addRoutes(menus) {
    // 是否有新的路由
    let hasNewRoutes = false
    const findAndAddRoutesByMenu = (menuList) => {
        menuList.forEach(menu => {
            let item = asyncRoutes.find(item => item.path == menu.frontpath)
            // 判断是否已经添加过路由
            if (item && !router.hasRoute(item.path)) {
                router.addRoute('Admin', item)
                hasNewRoutes = true
            }
            if (menu.child && menu.child.length > 0) {
                findAndAddRoutesByMenu(menu.child)
            }
        })
    }

    findAndAddRoutesByMenu(menus)

    return hasNewRoutes
}

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
    // 如果用户登录了，自动获取用户信息，并存储在vuex当中
    let hasNewRoutes = false
    if (token) {
        let { menus } = await store.dispatch("getinfo")
        // 动态添加路由
        hasNewRoutes = addRoutes(menus);
    }

    // 设置页面标题
    document.title = to.meta.title;

    hasNewRoutes ? next(to.fullPath) : next();
})

const tabList = ref([
    {
        title: '后台首页',
        path: "/"
    }
])

// 添加标签导航
const addTab = (tab) => {
    // 判断是否存在
    let notab = tabList.value.findIndex(item => item.path == tab.path) == -1;
    if (notab) {
        tabList.value.push(tab);
    }

    cookies.set("tabList", tabList.value);

}


// 初始化标签导航列表
function initTabList() {
    let tbs = cookies.get("tabList");
    if (tbs) {
        tabList.value = tbs;
    }
}

initTabList()

// onBeforeRouteUpdate 监听路由变化
onBeforeRouteUpdate((to, from) => {
    activeTab.value = to.path;
    addTab({
        title: to.meta.title,
        path: to.path
    });
})

// 页面切换 
const changeTab = (t) => {
    activeTab.value = t;
    router.push(t);
}

// 移除标签导航
const removeTab = (t) => {
    let tabs = tabList.value
    let a = activeTab.value
    if (a == t) {
        tabs.forEach((tab, index) => {
            if (tab.path == t) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    a = nextTab.path
                }
            }
        })
    }

    activeTab.value = a;
    tabList.value = tabList.value.filter(tab => tab.path != t);

    cookies.set("tabList", tabList.value);
}

<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

// directives\permission.js
import store from "~/store"

function hasPermission(value, el = false) {
    if (!Array.isArray(value)) {
        throw new Error(`需要配置权限，例如 v-permission="['getStatistics3,GET']"`)
    }
    const hasAuth = value.findIndex(v => store.state.ruleNames.includes(v)) != -1
    if (el && !hasAuth) {
        // 拿到当前元素的父元素，然后删除当前元素
        el.parentNode && el.parentNode.removeChild(el)
    }
    return hasAuth
}

export default {
    install(app) {
        app.directive("permission", {
            // el: 指令所绑定的元素，可以用来直接操作 DOM 。
            // binding: 传递给指令的值，例如：v-my-directive="1 + 1" 中，参数为 2。
            mounted(el, binding) {
                hasPermission(binding.value, el)
            }
        })
    }
}

// main.js
import permission from '~/directives/permission'

const app = createApp(App)
app.use(permission)

app.mount('#app')

// 直接调用 directives\permission.js 中方法判断 不存在删除元素
<el-col v-permission="['getStatistics3,GET']" :span="12" :offset="0">               
    <IndexChart />
</el-col>

<template>
    <!-- toFix 保留两位 限制加载小数点过多 -->
    {{ d.num.toFixed(2) }}
</template>

<script setup>
import { reactive, watch } from 'vue';
import gsap from 'gsap'

const props = defineProps({
    value: {
        type: Number,
        default: 0
    }
})

const d = reactive({
    num: 0
})

function AnimateToValue() {
    gsap.to(d, {
        duration: 0.5,
        num: props.value
    })
}

AnimateToValue()

// watch 是 Vue.js 3 中的一个 API，用于监听变量或者对象的变化，并在变化时执行回调函数。
watch(() => props.value, () =>
    AnimateToValue()
)
</script>

import CountTo from "~/components/CountTo.vue";

<span class="text-3xl font-bold text-gray-500">
    <CountTo :value="item.value" />
</span>

<template>
    <el-card shadow="never" class="mt-5">
        <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item, index) in options" :key="index" :checked="current == item.value"
                        style="margin-right: 8px" @click="handleChoose(item.value)">{{ item.text }}</el-check-tag>
                </div>
            </div>
        </template>
        <div id="chart" style="width: 100%;height: 300px;"></div>
    </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

import {
    getStatistics3
} from "~/api/index.js"


const current = ref("week")
const options = [{
    text: "近1个月",
    value: "month"
}, {
    text: "近1周",
    value: "week"
}, {
    text: "近24小时",
    value: "hour"
}]

const handleChoose = (type) => {
    current.value = type;
    getData();
}

var myChart = null
onMounted(() => {
    var chartDom = document.getElementById('chart');
    myChart = echarts.init(chartDom);

    getData()
})

function getData() {
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    // option && myChart.setOption(option);
    myChart.showLoading()
    getStatistics3(current.value).then(res=>{
        option.xAxis.data = res.x
        option.series[0].data = res.y

        myChart.setOption(option)
    }).finally(()=>{
        myChart.hideLoading()
    })
}

</script>

myChart.showLoading()
myChart.hideLoading()