添加 cl-process 定位处理，更新 vue-echarts@6

package.json

@@ -9,6 +9,7 @@
 		"inspect": "vue inspect --mode=production > output.js"
 	},
 	"dependencies": {
+		"@vue/composition-api": "^1.0.0-rc.5",
 		"axios": "^0.21.1",
 		"cl-admin": "^1.5.1",
 		"cl-admin-crud": "^1.6.4",
@@ -17,7 +18,7 @@
 		"codemirror": "^5.59.4",
 		"core-js": "^3.6.5",
 		"dayjs": "^1.10.4",
-		"echarts": "^4.5.0",
+		"echarts": "^5.0.2",
 		"element-ui": "^2.15.1",
 		"js-beautify": "^1.13.5",
 		"mockjs": "^1.1.0",
@@ -30,7 +31,7 @@
 		"vue": "^2.6.11",
 		"vue-codemirror": "^4.0.6",
 		"vue-cron": "^1.0.9",
-		"vue-echarts": "^5.0.0-beta.0",
+		"vue-echarts": "^6.0.0-rc.3",
 		"vue-router": "^3.2.0",
 		"vuedraggable": "^2.24.3",
 		"vuex": "^3.4.0"

src/cool/modules/base/common/resize.js

@@ -6,6 +6,9 @@ const lock = {
 };
 
 function resize() {
+	// 更新数据
+	store.commit("SET_BROWSER");
+
 	const { browser, menuCollapse, app } = store.getters;
 
 	if (browser.isMini) {
@@ -41,8 +44,6 @@ function resize() {
 			lock.menuCollapse = null;
 		}
 	}
-
-	store.commit("SET_BROWSER");
 }
 
 window.onload = function() {

src/cool/modules/base/components/process/index.vue

@@ -4,24 +4,20 @@
 			<i class="el-icon-arrow-left"></i>
 		</div>
 
-		<div class="app-process__scroller">
+		<div class="app-process__scroller" ref="scroller">
 			<div
-				class="block"
+				class="app-process__item"
 				v-for="(item, index) in processList"
 				:key="index"
+				:ref="`item-${index}`"
 				:class="{ active: item.active }"
 				:data-index="index"
-				@click="onTap(item)"
+				@click="onTap(item, index)"
 				@contextmenu.stop.prevent="openCM($event, item)"
 			>
 				<span>{{ item.label }}</span>
 
-				<i
+				<i class="el-icon-close" v-if="index > 0" @click.stop="onDel(index)"></i>
-					class="el-icon-close"
-					v-if="index > 0"
-					:class="{ active: index > 0 }"
-					@click.stop="onDel(index)"
-				></i>
 			</div>
 		</div>
 
@@ -43,10 +39,17 @@ export default {
 		...mapGetters(["processList"])
 	},
 
+	watch: {
+		"$route.path"(val) {
+			this.adScroll(this.processList.findIndex(e => e.value === val) || 0);
+		}
+	},
+
 	methods: {
 		...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]),
 
-		onTap(item) {
+		onTap(item, index) {
+			this.adScroll(index);
 			this.$router.push(item.value);
 		},
 
@@ -100,9 +103,23 @@ export default {
 			}
 		},
 
+		adScroll(index) {
+			const el = this.$refs[`item-${index}`][0];
+
+			if (el) {
+				this.scrollTo(el.offsetLeft + el.clientWidth - this.$refs["scroller"].clientWidth);
+			}
+		},
+
 		toScroll(f) {
-			const scroller = this.$el.querySelector(".app-process__scroller");
+			this.scrollTo(this.$refs["scroller"].scrollLeft + (f ? -100 : 100));
-			scroller.scrollTo(scroller.scrollLeft + (f ? -100 : 100), 0);
+		},
+
+		scrollTo(left) {
+			this.$refs["scroller"].scrollTo({
+				left,
+				behavior: "smooth"
+			});
 		}
 	}
 };
@@ -149,7 +166,7 @@ export default {
 		}
 	}
 
-	.block {
+	&__item {
 		display: inline-flex;
 		align-items: center;
 		border-radius: 3px;

src/main.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
-import App from "./App.vue";
+import VueECharts from "vue-echarts";
 import { bootstrap } from "cl-admin";
+import { app } from "@/config/env";
+import App from "./App.vue";
 import "./element";
 
 // 路由
@@ -12,12 +14,16 @@ import store from "@/store";
 // mock
 import "@/mock";
 
+// echarts 可视图表
+Vue.component("v-chart", VueECharts);
+
 // 阻止显示生产模式的消息
 Vue.config.productionTip = false;
 
 // 配置
 bootstrap()
 	.then(() => {
+		// 加载菜单、用户信息
 		store.dispatch("appLoad");
 
 		new Vue({
@@ -27,5 +33,5 @@ bootstrap()
 		}).$mount("#app");
 	})
 	.catch(err => {
-		console.error("COOL-ADMIN 启动失败", err);
+		console.error(`${app.name} 启动失败`, err);
 	});

src/views/home/components/category-ratio.vue

@@ -5,23 +5,16 @@
 		</div>
 
 		<div class="category-ratio__container">
-			<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+			<v-chart :option="chartOption" autoresize></v-chart>
 		</div>
 	</div>
 </template>
 
 <script>
-import VueEcharts from "vue-echarts";
-import "echarts";
-
 export default {
-	components: {
-		VueEcharts
-	},
-
 	data() {
 		return {
-			chartOptions: {
+			chartOption: {
 				tooltip: {
 					trigger: "item",
 					formatter: "{a} <br/>{b}: {c} ({d}%)"

src/views/home/components/count-paid.vue

@@ -7,7 +7,7 @@
 			</div>
 
 			<div class="card__container">
-				<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+				<v-chart :option="chartOption" autoresize></v-chart>
 			</div>
 
 			<div class="card__footer">
@@ -19,16 +19,10 @@
 </template>
 
 <script>
-import VueEcharts from "vue-echarts";
-
 export default {
-	components: {
-		VueEcharts
-	},
-
 	data() {
 		return {
-			chartOptions: {
+			chartOption: {
 				grid: {
 					left: "10%",
 					top: 0,

src/views/home/components/count-views.vue

@@ -7,7 +7,7 @@
 			</div>
 
 			<div class="card__container">
-				<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+				<v-chart :option="chartOption" autoresize></v-chart>
 			</div>
 
 			<div class="card__footer">
@@ -19,17 +19,12 @@
 </template>
 
 <script>
-import VueEcharts from "vue-echarts";
+import * as echarts from "echarts";
-import echarts from "echarts";
 
 export default {
-	components: {
-		VueEcharts
-	},
-
 	data() {
 		return {
-			chartOptions: {
+			chartOption: {
 				grid: {
 					left: 0,
 					top: 0,

src/views/home/components/hot-search.vue

@@ -19,7 +19,7 @@
 							</div>
 						</div>
 
-						<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+						<v-chart :option="chartOption" autoresize></v-chart>
 					</div>
 				</el-col>
 
@@ -36,7 +36,7 @@
 							</div>
 						</div>
 
-						<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+						<v-chart :option="chartOption" autoresize></v-chart>
 					</div>
 				</el-col>
 			</el-row>
@@ -89,17 +89,12 @@
 </template>
 
 <script>
-import VueEcharts from "vue-echarts";
+import * as echarts from "echarts";
-import echarts from "echarts";
 
 export default {
-	components: {
-		VueEcharts
-	},
-
 	data() {
 		return {
-			chartOptions: {
+			chartOption: {
 				grid: {
 					left: 0,
 					top: 0,

src/views/home/components/tab-chart.vue

@@ -10,23 +10,18 @@
 		</div>
 
 		<div class="tab-chart__container">
-			<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+			<v-chart :option="chartOption" autoresize></v-chart>
 		</div>
 	</div>
 </template>
 
 <script>
-import VueEcharts from "vue-echarts";
 import { mapGetters } from "vuex";
 
 export default {
-	components: {
-		VueEcharts
-	},
-
 	data() {
 		return {
-			chartOptions: {
+			chartOption: {
 				grid: {
 					top: "20px",
 					bottom: "30px",
@@ -113,7 +108,7 @@ export default {
 		"browser.isMini": {
 			immediate: true,
 			handler(v) {
-				this.chartOptions.series.map(e => {
+				this.chartOption.series.map(e => {
 					e.barWidth = v ? 15 : 25;
 				});
 			}
@@ -121,11 +116,11 @@ export default {
 	},
 
 	created() {
-		this.chartOptions.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
+		this.chartOption.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
-		this.chartOptions.series[0].data = new Array(12)
+		this.chartOption.series[0].data = new Array(12)
 			.fill(1)
 			.map(() => parseInt(Math.random() * 100));
-		this.chartOptions.series[1].data = new Array(12).fill(100);
+		this.chartOption.series[1].data = new Array(12).fill(100);
 	}
 };
 </script>