vue-manage-system 近期進行了一次版本升級，主要是支援了更多功能、升級依賴版本和最佳化樣式，並且上線了官方文件網站，大部分功能都有文件或者使用示例，更加適合新手上手開發，只需要根據實際業務簡單修改，就可以完成產品需求。
- github倉庫：vue-manage-system
- 線上示例：https://lin-xin.gitee.io/example/vue-manage-system/
視覺最佳化
比較長時間沒對視覺做什麼改動，多少會有點審美疲勞，所以這次也做了一些改動，至少我覺得比之前好看點了（請輕點噴，哭笑不得）
標籤頁
之前標籤頁的樣式是自己實現，最多隻能支援8個標籤頁，再多會覆蓋之前的頁面。現在直接用 el-tabs 元件實現，程式碼量更少，而且不限制標籤數量，超出寬度可以滾動檢視。
<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;
})
activePath 用當前路由的路徑來選中對應的標籤頁，當路由變化時，透過監聽器 watch 來給 activePath 賦值新路由，以確保選中的標籤一直是當前頁面路由。
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:'/')
}
關閉標籤時會觸發 tab-remove 事件，把該標籤從 tabs.list 列表中移除。先透過 findIndex 找到該標籤的索引，傳到 pinia 中的 delTabsItem 方法進行移除標籤，移除後路由跳轉到下一個標籤或者上一個標籤，如果標籤已清空，則跳到首頁。
設定主題
Element plus的預設主題色是#409EFF，CSS變數是--el-color-primary，要改變主題色時，給這個變數賦值即可。
document.documentElement.style.setProperty('--el-color-primary', '#ff0000');
同時要修改它的附屬顏色，比如:hover、:active等用到的顏色變數
--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));
}
封裝表格
表格是後臺管理系統中最常見的功能了，會在多個頁面中重複使用，所以這裡對 element 表格元件做了二次封裝，包括了查詢、分頁、檢視詳情、新增/編輯/刪除等常用功能，在使用表格的時候程式碼量可以更少，比較方便維護。
/src/components/table-custom.vue: 表格元件/src/components/table-edit.vue: 新增/編輯表單/src/components/table-detail.vue: 檢視詳情元件/src/components/table-search.vue: 查詢元件
使用方式如下：
<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>
具體元件的傳參可以參考文件：vuems-doc
詞雲圖
echarts 沒有詞雲圖，需要引入第三方庫 echarts-wordcloud
<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>
數字滾動
數字展示時帶有滾動動畫，能給視覺上帶來一點衝擊。Element Plus 的統計元件也可以實現這個效果，但是需要結合 vueuse 實現，比較麻煩。所以引入了第三方庫 countup.js，封裝成小元件，使用方便。
// 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>