优化视图的滚动方法

src/modules/base/pages/main/components/views.vue

@@ -1,13 +1,11 @@
 <template>
 	<div class="app-views">
 		<router-view v-slot="{ Component }">
-			<el-scrollbar :ref="setRefs('scrollbar')" :key="key">
 			<transition :name="app.info.router.transition || 'none'">
-					<keep-alive :include="caches">
+				<keep-alive :include="caches" :key="key">
 					<component :is="Component" />
 				</keep-alive>
 			</transition>
-			</el-scrollbar>
 		</router-view>
 	</div>
 </template>
@@ -17,7 +15,7 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useBase } from "/$/base";
 import { useCool } from "/@/cool";
 
-const { refs, setRefs, mitt } = useCool();
+const { mitt } = useCool();
 const { process, app } = useBase();
 
 // 缓存数
@@ -37,27 +35,11 @@ function refresh() {
 	key.value += 1;
 }
 
-// 滚动到
-function scrollTo({ el, top }: { el?: string; top?: number }) {
-	const scrollbar = refs.scrollbar.wrapRef;
-
-	if (el) {
-		top = scrollbar.querySelector(el).offsetTop;
-	}
-
-	scrollbar.scrollTo({
-		top,
-		behavior: "smooth"
-	});
-}
-
 onMounted(() => {
-	mitt.on("view.scrollTo", scrollTo);
 	mitt.on("view.refresh", refresh);
 });
 
 onUnmounted(() => {
-	mitt.off("view.scrollTo");
 	mitt.off("view.refresh");
 });
 </script>
@@ -72,10 +54,6 @@ onUnmounted(() => {
 	border-radius: 4px;
 	position: relative;
 
-	:deep(.el-scrollbar__view) {
-		height: 100%;
-	}
-
 	.none-enter-active {
 		position: absolute;
 	}

src/modules/base/static/css/index.scss

@@ -1,16 +1,3 @@
-*::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
-}
-
-*::-webkit-scrollbar-thumb {
-	background-color: rgba(144, 147, 153, 0.3);
-}
-
-*::-webkit-scrollbar-track {
-	background: transparent;
-}
-
 #app {
 	height: 100vh;
 	width: 100vw;

src/modules/demo/views/home/index.vue

@@ -1,4 +1,5 @@
 <template>
+	<el-scrollbar>
 		<div class="view-home">
 			<el-row :gutter="15">
 				<el-col :lg="6" :md="12" :xs="24">
@@ -49,6 +50,7 @@
 				</el-col>
 			</el-row>
 		</div>
+	</el-scrollbar>
 </template>
 
 <script lang="ts" name="home" setup>

src/modules/design/views/page.vue

@@ -7,10 +7,11 @@
 		<div class="footer">
 			<el-button @click="clear">清空</el-button>
 			<el-button type="info" @click="save">保存草稿</el-button>
-			<el-button type="success" @click="create">生成代码</el-button>
-		</div>
 
-		<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')" />
+			<cl-editor-preview title="代码预览" name="monaco" :ref="setRefs('preview')">
+				<el-button type="success" @click="create">生成代码</el-button>
+			</cl-editor-preview>
+		</div>
 	</div>
 </template>
 

src/modules/helper/hooks/ai.ts

@@ -142,28 +142,3 @@ export function useAi() {
 		matchType
 	};
 }
-
-export function useScroll() {
-	const { mitt } = useCool();
-
-	let timer: any;
-
-	function start() {
-		stop();
-
-		timer = setInterval(() => {
-			mitt.emit("view.scrollTo", { top: Math.random() + 10000 });
-		}, 100);
-	}
-
-	function stop() {
-		if (timer) {
-			clearInterval(timer);
-		}
-	}
-
-	return {
-		start,
-		stop
-	};
-}

src/modules/helper/static/index.scss

@@ -1,9 +1,10 @@
 .plugins {
-	overflow-x: hidden;
-	background-color: var(--el-bg-color);
 	padding: 10px;
+
+	&__wrapper {
+		background-color: var(--el-bg-color);
 		height: 100%;
-	box-sizing: border-box;
+	}
 
 	.scope {
 		border-radius: 8px;

src/modules/helper/views/ai-code.vue

@@ -1,4 +1,5 @@
 <template>
+	<el-scrollbar :ref="setRefs('scrollbar')">
 		<div class="ai-code">
 			<div class="container">
 				<div class="head">
@@ -142,7 +143,9 @@
 							</div>
 
 							<template v-if="!temp.disabled">
-							<el-button round size="small" @click="copyCode('vue')">Copy</el-button>
+								<el-button round size="small" @click="copyCode('vue')"
+									>Copy</el-button
+								>
 							</template>
 						</div>
 
@@ -171,6 +174,7 @@
 			<!-- 创建菜单 -->
 			<cl-form ref="Form" />
 		</div>
+	</el-scrollbar>
 </template>
 
 <script lang="tsx" setup name="helper-ai-code">
@@ -180,19 +184,54 @@ import { Promotion, Loading, Close, Check } from "@element-plus/icons-vue";
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
 import { debounce, isEmpty } from "lodash-es";
 import { useClipboard } from "@vueuse/core";
-import { useMenu, useAi, useScroll } from "../hooks";
+import { useMenu, useAi } from "../hooks";
 import { isDev } from "/@/config";
 import { useForm } from "@cool-vue/crud";
 import type { CodeType } from "../types";
 import Text2 from "../components/text.vue";
 
-const { service, mitt, refs, setRefs } = useCool();
+const { service, refs, setRefs } = useCool();
 const { copy } = useClipboard();
 const menu = useMenu();
 const ai = useAi();
-const scroll = useScroll();
 const Form = useForm();
 
+// 滚动条
+const scroller = {
+	timer: null as any,
+
+	scrollTo({ el, top }: { el?: string; top?: number }) {
+		const scrollbar = refs.scrollbar.wrapRef;
+
+		if (el) {
+			top = scrollbar.querySelector(el).offsetTop;
+		}
+
+		scrollbar.scrollTo({
+			top,
+			behavior: "smooth"
+		});
+	},
+
+	start() {
+		this.stop();
+
+		this.timer = setInterval(() => {
+			if (codes.entity) {
+				this.scrollTo({
+					top: Math.random() + 10000
+				});
+			}
+		}, 100);
+	},
+
+	stop() {
+		if (this.timer) {
+			clearInterval(this.timer);
+		}
+	}
+};
+
 // 编辑器
 const editor = reactive({
 	options: {
@@ -275,14 +314,14 @@ function send(type: CodeType = "entity", data: any) {
 	});
 
 	// 开始滚动
-	scroll.start();
+	scroller.start();
 }
 
 // 结束
 function stop() {
 	temp.disabled = false;
 	temp.coding = "";
-	scroll.stop();
+	scroller.stop();
 }
 
 // 重置
@@ -454,7 +493,7 @@ const createVue = debounce((auto?: boolean) => {
 			stop();
 
 			setTimeout(() => {
-				mitt.emit("view.scrollTo", { el: `.codes .is-vue` });
+				scroller.scrollTo({ el: `.codes .is-vue` });
 				refs.codeVue.formatCode();
 			}, 300);
 		}
@@ -629,7 +668,7 @@ onMounted(() => {
 	}
 
 	.bottom {
-		height: 100px;
+		height: 10vh;
 	}
 }
 </style>

src/modules/helper/views/plugins/serve.vue

@@ -1,4 +1,6 @@
 <template>
+	<div class="plugins__wrapper">
+		<el-scrollbar>
 			<div class="plugins" @dragover="onDragover" @drop="onDrop">
 				<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
 					<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
@@ -6,7 +8,14 @@
 				</el-tabs>
 
 				<el-row :gutter="10">
-			<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
+					<el-col
+						v-for="(item, index) in list"
+						:key="index"
+						:xs="24"
+						:sm="12"
+						:md="8"
+						:lg="6"
+					>
 						<div class="scope">
 							<div class="c">
 								<el-icon class="set" @click="toSet(item)">
@@ -17,7 +26,9 @@
 
 								<div class="det">
 									<div class="tag">
-								<el-tag size="small" effect="dark">{{ item.keyName }}</el-tag>
+										<el-tag size="small" effect="dark">{{
+											item.keyName
+										}}</el-tag>
 										<el-tag size="small" effect="dark" type="success"
 											>v{{ item.version }}</el-tag
 										>
@@ -38,11 +49,16 @@
 
 							<div class="f">
 								<el-button round @click="toDetail(item)">详情</el-button>
-						<el-button type="danger" round @click="toDel(item, index)">卸载</el-button>
+								<el-button type="danger" round @click="toDel(item, index)"
+									>卸载</el-button
+								>
 
 								<cl-flex1 />
 
-						<cl-switch v-model="item.status" @change="onStatusChange(item)"></cl-switch>
+								<cl-switch
+									v-model="item.status"
+									@change="onStatusChange(item)"
+								></cl-switch>
 							</div>
 						</div>
 					</el-col>
@@ -91,6 +107,8 @@
 					</template>
 				</cl-form>
 			</div>
+		</el-scrollbar>
+	</div>
 </template>
 
 <script lang="ts" setup name="helper-plugins-serve">
@@ -137,6 +155,10 @@ function toSet(item: Eps.PluginInfoEntity) {
 	Form.value?.open({
 		title: "设置",
 
+		props: {
+			labelWidth: "60px"
+		},
+
 		form: {
 			...item
 		},

src/modules/helper/views/plugins/vue.vue

@@ -1,19 +1,33 @@
 <template>
+	<div class="plugins__wrapper">
+		<el-scrollbar>
 			<div class="plugins">
+				<div class="header">
 					<el-tabs v-model="tab.active" type="card" @tab-change="tab.onChange">
 						<el-tab-pane label="已安装插件" name="installed"> </el-tab-pane>
 						<el-tab-pane label="插件市场" name="shop"> </el-tab-pane>
 					</el-tabs>
+				</div>
 
+				<div class="container">
 					<el-row :gutter="10">
-			<el-col v-for="(item, index) in list" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
+						<el-col
+							v-for="(item, index) in list"
+							:key="index"
+							:xs="24"
+							:sm="12"
+							:md="8"
+							:lg="6"
+						>
 							<div class="scope">
 								<div class="c">
 									<img class="logo" :src="item.logo" />
 
 									<div class="det">
 										<div class="tag">
-								<el-tag size="small" effect="dark">{{ item.name }}</el-tag>
+											<el-tag size="small" effect="dark">{{
+												item.name
+											}}</el-tag>
 											<el-tag size="small" effect="dark" type="success"
 												>v{{ item.version || "1.0.0" }}</el-tag
 											>
@@ -44,6 +58,7 @@
 							</div>
 						</el-col>
 					</el-row>
+				</div>
 
 				<cl-dialog v-model="det.visible" :title="det.title" width="60%">
 					<el-tabs v-model="det.active" type="card" @tab-change="tab.onChange">
@@ -58,6 +73,8 @@
 					</el-tabs>
 				</cl-dialog>
 			</div>
+		</el-scrollbar>
+	</div>
 </template>
 
 <script lang="ts" setup name="helper-plugins-vue">

src/modules/space/views/list.vue

@@ -2,6 +2,6 @@
 	<space-inner />
 </template>
 
-<script lang="ts" setup name="space-list">
+<script lang="ts" setup name="upload-list">
 import SpaceInner from "../components/space-inner.vue";
 </script>