vue-manage-system 版本更新，让开发更加简单

<el-tabs v-model="activePath" class="tabs" type="card" closable @tab-click="clickTabs" @tab-remove="closeTabs">  <el-tab-pane v-for="item in tabs.list" :key="item.path" :label="item.title" :name="item.path" @click="setTags(item)"></el-tab-pane></el-tabs>

const activePath = ref(route.fullPath);watch(() => route.fullPath, (newVal, oldVal) => {  activePath.value = newVal;})

const tabs = useTabsStore();const closeTabs = (name: string) => {  const index = tabs.list.findIndex((item) => item.path === name);  tabs.delTabsItem(index);  const item = tabs.list[index] || tabs.list[index - 1];  router.push(item?item.path:'/')}

document.documentElement.style.setProperty('--el-color-primary', '#ff0000');

--el-color-primary-light-3: #79bbff;--el-color-primary-light-5: #a0cfff;--el-color-primary-light-7: #c6e2ff;--el-color-primary-light-8: #d9ecff;--el-color-primary-light-9: #ecf5ff;--el-color-primary-dark-2: #337ecc;

const mix = (color1, color2, weight) => {    let color = '#';    for (let i = 0; i <= 2; i++) {        const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);        const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);        const c = Math.round(c1 * weight + c2 * (1 - weight));        color += c.toString(16).padStart(2, '0');    }    return color;};const setThemeLight (type) => {  [3, 5, 7, 8, 9].forEach((v) => {    setProperty(`--el-color-${type}-light-${v}`, mix('#ffffff', this[type], v / 10));  });  setProperty(`--el-color-${type}-dark-2`, mix('#000000', this[type], 0.2));}

<template>  <div>    <!-- 查询组件 -->    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />    <!-- 表格组件 -->    <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index" :changePage="changePage">      <!-- 自定义内容 -->      <template #toolbarBtn>        <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>      </template>      <template #money="{ rows }">￥{{ rows.money }}</template>      <template #thumb="{ rows }">        <el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]" preview-teleported></el-image>      </template>      <template #state="{ rows }">        <el-tag :type="rows.state ? 'success' : 'danger'">          {{ rows.state ? '正常' : '异常' }}        </el-tag>      </template>    </TableCustom>    <!-- 新增/编辑 -->    <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">        <template #thumb="{ rows }">          <img class="table-td-thumb" :src="rows.thumb" />        </template>      </TableEdit>    </el-dialog>    <!-- 表格详情 -->    <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>      <TableDetail :data="viewData">        <template #thumb="{ rows }">          <el-image :src="rows.thumb" />        </template>      </TableDetail>    </el-dialog>  </div></template>

<template>  <v-chart class="schart" :option="wordOptions" /></template><script setup>import VChart from 'vue-echarts';import 'echarts-wordcloud';const wordOptions = {    series: [        {            type: 'wordCloud',            rotationRange: [0, 0],            autoSize: { enable: true, minSize: 14,},            textStyle: {                fontFamily: '微软雅黑,sans-serif',                color: () => (                    'rgb(' +                    [                        Math.round(Math.random() * 160),                        Math.round(Math.random() * 160),                        Math.round(Math.random() * 160),                    ].join(',') +                    ')'                )            },            data: [                {name: 'Vue',value: 10000},                {name: 'React',value: 9000},                {name: '图表',value: 4000},                {name: 'vue-manage-system',value: 2000},            ],        },    ],};</script>

// countup.vue<template>    <span ref="countRef"></span></template>
<script setup lang="ts">import { onMounted, ref, watch } from 'vue';import { CountUp } from 'countup.js';
const props = defineProps({    end: { type: Number, required: true, },    options: { type: Object, default: () => ({}), required: false, },});const countRef = ref<any>(null);let countUp: any;onMounted(() => {    countUp = new CountUp(countRef.value, props.end, props.options);    if (countUp.error) return;    countUp.start();});
watch(() => props.end, (newVal) => {    countUp && countUp.update(newVal);});</script>