Merge branch 'UI'

UI/VAP.VUE/src/assets/sass/_vb-theme.scss

@@ -0,0 +1,9 @@
+[data-bs-theme="light"] {
+	--bs-app-footer-bg-color: #fff;
+	--vb-tr-even-bg-color: rgba(0, 0, 0, 0.02);
+	--vb-tags-view-item-color: var(--bs-primary);
+}
+[data-bs-theme="dark"] {
+	--vb-tr-even-bg-color: rgba(0, 0, 0, 0.5);
+	--vb-tags-view-item-color: var(--bs-gray-700);
+}

UI/VAP.VUE/src/layouts/main/header/Header.vue

@@ -53,12 +53,10 @@ import Toolbar from "@/layouts/main/toolbar/Toolbar.vue"
 					</router-link>
 				</div>
 			</template>
-			<div
-				class="d-flex align-items-stretch justify-content-between flex-lg-grow-1"
-				id="vb_app_header_wrapper">
-				<Toolbar v-if="headerDisplayToolbar" />
-				<HeaderMenu v-else />
-				<HeaderNavbar />
+			<div class="d-flex align-items-stretch w-100 flex-lg-grow-1" id="vb_app_header_wrapper">
+				<Toolbar class="flex-row-fluid" v-if="headerDisplayToolbar" />
+				<HeaderMenu class="flex-row-fluid" v-else />
+				<HeaderNavbar class="flex-row-auto" />
 			</div>
 		</div>
 	</div>

UI/VAP.VUE/src/layouts/main/toolbar/Toolbar.vue

@@ -14,19 +14,19 @@ const showBackBtn = computed(() => {
 </script>
 
 <template>
-	<div id="vb_app_toolbar" class="app-toolbar w-100 pt-2 pb-1">
+	<div id="vb_app_toolbar" class="app-toolbar pt-2 pb-1">
 		<div
 			v-if="toolbarDisplay"
 			id="vb_app_toolbar_container"
-			class="d-flex justify-content-between border-2 px-5"
+			class="d-flex flex-row border-2 px-5"
 			:class="{
 				'container-fluid': toolbarWidthFluid,
 				'container-xxl': !toolbarWidthFluid,
 				'border-bottom': !headerDisplayToolbar
 			}">
-			<PageTitle />
-			<TagView />
-			<div v-if="showBackBtn" class="d-flex align-items-center gap-2 gap-lg-3 ps-5">
+			<PageTitle class="flex-row-auto" />
+			<TagView class="flex-row-fluid" />
+			<div v-if="showBackBtn" class="d-flex align-items-center gap-2 gap-lg-3 ps-5 flex-row-auto">
 				<a
 					href="#"
 					class="btn btn-sm btn-light-primary text-nowrap"

UI/VAP.VUE/src/layouts/main/toolbar/tag-view/Index.vue

@@ -208,26 +208,9 @@ function handleScroll() {
 	closeMenu()
 }
 
-function changeContainerWidth() {
-	nextTick(() => {
-		const $container = document.querySelector(".tags-view-container") as HTMLElement
-		const $parent = $container?.parentElement as HTMLElement
-		if ($parent) {
-			let ow = 0
-			for (let i = 0; i < $parent.childElementCount; i++) {
-				if (i != 1) {
-					ow += $parent.children[i].clientWidth
-				}
-			}
-			$container.style.width = ($parent.clientWidth ?? 0) - ow - 30 + "px"
-		}
-	})
-}
-
 watch(route, () => {
 	addTags()
 	moveToCurrentTag()
-	changeContainerWidth()
 })
 watch(visible, (value) => {
 	if (value) {
@@ -240,8 +223,7 @@ watch(visible, (value) => {
 onMounted(() => {
 	initTags()
 	addTags()
-	changeContainerWidth()
-	window.addEventListener("resize", changeContainerWidth)
+	window.addEventListener("resize", moveToCurrentTag)
 	const $minimizeToggle = document.querySelector(
 		"[data-vb-toggle-name='app-sidebar-minimize']"
 	) as HTMLElement
@@ -249,9 +231,7 @@ onMounted(() => {
 		const $toggleComponent = VbComponents.ToggleComponent.getInstance(
 			$minimizeToggle
 		) as VbComponents.ToggleComponent
-		$toggleComponent?.on("vb.toggle.changed", function () {
-			setTimeout(changeContainerWidth, 300)
-		})
+		$toggleComponent?.on("vb.toggle.changed", moveToCurrentTag)
 	}
 })
 </script>
@@ -267,7 +247,7 @@ onMounted(() => {
 				v-for="tag in visitedViews"
 				:key="tag.path"
 				:data-path="tag.path"
-				:class="`${isActive(tag) ? 'active ps-8' : 'text-primary'} ${isAffix(tag) ? '' : 'pe-8'}`"
+				:class="`${isActive(tag) ? 'active ps-8' : ''} ${isAffix(tag) ? '' : 'pe-8'}`"
 				:to="{ path: tag.path, query: tag.query }"
 				class="tags-view-item py-0 px-3"
 				:style="activeStyle(tag)"
@@ -323,9 +303,7 @@ onMounted(() => {
 	padding: 0 20px;
 	.tags-view-wrapper {
 		height: 30px;
-		background: #fff;
-		// border-bottom: 1px solid #d8dce5;
-		// box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+		background: var(--bs-app-header-minimize-bg-color);
 		.tags-view-item {
 			display: flex;
 			position: relative;
@@ -333,9 +311,10 @@ onMounted(() => {
 			white-space: nowrap;
 			height: 28px;
 			line-height: 28px;
-			border: 1px solid #d8dce5;
-			border-bottom: 2px solid rgb(0, 158, 247);
-			background: #fefefe;
+			border: 1px solid;
+			color: var(--vb-tags-view-item-color);
+			border-bottom: 2px solid;
+			border-radius: 5px 5px 0 0;
 			font-size: 12px;
 			margin-left: 5px;
 			.icon {
@@ -387,16 +366,3 @@ onMounted(() => {
 	}
 }
 </style>
-
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-	.tags-view-item {
-		.ki-duotone {
-			&:icon {
-				transform: scale(1.2);
-			}
-		}
-	}
-}
-</style>

UI/VAP.Vue/package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "vue-tsc && vite build",
+		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "eslint \"./src/**/*.{ts,js,vue}\"",
 		"fix": "eslint --fix \"./src/**/*.{ts,js,vue}\"",

UI/VAP.Vue/src/assets/sass/_common.scss

@@ -18,7 +18,7 @@ dl {
 	margin-bottom: 0.75rem !important;
 	.el-form-item__label {
 		font-weight: 600;
-		color: #3c3c3c;
+		color: var(--bs-gray-800);
 	}
 }
 
@@ -50,6 +50,12 @@ dl {
 	opacity: 1;
 }
 
-[data-bs-theme="light"] {
-	--bs-app-footer-bg-color: #fff;
+.tags-view-wrapper {
+	.tags-view-item {
+		.ki-duotone {
+			&:icon {
+				transform: scale(1.2);
+			}
+		}
+	}
 }

UI/VAP.Vue/src/assets/sass/_table.scss

@@ -1,7 +1,7 @@
 .vb-table {
 	--table-footer-height: 50px;
 	--table-radius: var(--bs-card-inner-border-radius);
-	--table-bg: #fefefe;
+	--table-bg: var(--bs-app-header-minimize-bg-color);
 	width: 100%;
 	position: relative;
 	background-color: var(--table-bg);
@@ -96,7 +96,7 @@
 
 				tr {
 					&:nth-child(even) {
-						background-color: #f9f9f9;
+						background-color: var(--vb-tr-even-bg-color);
 					}
 					td {
 						padding-top: 0px;

UI/VAP.Vue/src/assets/sass/style.scss

@@ -13,6 +13,7 @@
 @import "./core/layout/base/layout";
 @import "layout/layout";
 
+@import "vb-theme";
 @import "table";
 @import "loading";
 @import "common";

UI/VAP.Vue/src/components/iFrame/iFrame.vue

@@ -9,9 +9,15 @@ function init() {
 	setTimeout(() => {
 		loading.value = false
 	}, 300)
-	window.onresize = function temp() {
-		height.value = document.documentElement.clientHeight - 150.5 + "px;"
-	}
+	window.addEventListener("resize", () => {
+		//height.value = document.documentElement.clientHeight - 150.5 + "px;"
+		const tableBoxAuotHeight =
+			document.documentElement.clientHeight -
+			(document.querySelector(".app-header")?.clientHeight ?? 0) -
+			(document.querySelector(".app-footer")?.clientHeight ?? 0) -
+			5
+		height.value = tableBoxAuotHeight + "px"
+	})
 }
 
 onMounted(init)

UI/VAP.Vue/src/components/table/VbDataTable.vue

@@ -300,27 +300,7 @@ const tableBoxClass = computed(() => {
 
 	return classStr
 })
-const tableBoxStyle = computed(() => {
-	const style = props.tableBoxStyle ?? {}
-	if (props.tableBoxHeight) {
-		style.height = Number(props.tableBoxHeight) ? props.tableBoxHeight + "px" : props.tableBoxHeight
-	} else {
-		nextTick(() => {
-			const tableBoxAuotHeight =
-				document.documentElement.clientHeight -
-				(document.querySelector(".app-header")?.clientHeight ?? 0) -
-				(document.querySelector(".app-footer")?.clientHeight ?? 0) -
-				5
-			style.height = tableBoxAuotHeight + "px"
-		})
-	}
-	if (props.tableBoxWidth) {
-		style.width = Number(props.tableBoxWidth) ? props.tableBoxWidth + "px" : props.tableBoxWidth
-	} else {
-		style.width = "100%"
-	}
-	return style
-})
+const _tableBoxStyle = ref(calcTableBoxStyle())
 const fixedColumn = computed(() => props.fixedNumber > 0 || props.fixedRightNumber > 0)
 const tableStyle = computed(() => {
 	let style = ""
@@ -567,7 +547,27 @@ const customSearch = () => {
 		search()
 	}
 }
-
+function calcTableBoxStyle() {
+	const style = props.tableBoxStyle ?? {}
+	if (props.tableBoxHeight) {
+		style.height = Number(props.tableBoxHeight) ? props.tableBoxHeight + "px" : props.tableBoxHeight
+	} else {
+		nextTick(() => {
+			const tableBoxAuotHeight =
+				document.documentElement.clientHeight -
+				(document.querySelector(".app-header")?.clientHeight ?? 0) -
+				(document.querySelector(".app-footer")?.clientHeight ?? 0) -
+				5
+			style.height = tableBoxAuotHeight + "px"
+		})
+	}
+	if (props.tableBoxWidth) {
+		style.width = Number(props.tableBoxWidth) ? props.tableBoxWidth + "px" : props.tableBoxWidth
+	} else {
+		style.width = "100%"
+	}
+	return style
+}
 function search(isReset = true) {
 	if (isReset) {
 		resetData()
@@ -878,6 +878,9 @@ function init() {
 		initFixedColumns()
 		BindInterEvent()
 	})
+	window.addEventListener("resize", () => {
+		_tableBoxStyle.value = calcTableBoxStyle()
+	})
 }
 
 onMounted(init)
@@ -896,7 +899,7 @@ defineExpose({
 })
 </script>
 <template>
-	<div ref="tableBoxRef" class="vb-table" :id="id" :class="tableBoxClass" :style="tableBoxStyle">
+	<div ref="tableBoxRef" class="vb-table" :id="id" :class="tableBoxClass" :style="_tableBoxStyle">
 		<Toolbar
 			v-if="showToolbar"
 			:tableTitle="tableTitle"
@@ -925,15 +928,15 @@ defineExpose({
 				</Content>
 				<template v-if="loading">
 					<div class="h-100px d-flex justify-content-center flex-column align-items-center">
-						<div class="spinner-border text-gray-500 mb-5"></div>
-						<span class="text-gray-500">{{ loadingText }}</span>
+						<div class="spinner-border text-gray-700 mb-5"></div>
+						<span class="text-gray-700">{{ loadingText }}</span>
 					</div>
 				</template>
 				<div
 					v-else-if="displayData.length == 0 && !loading"
 					class="h-100px d-flex justify-content-center flex-column align-items-center">
 					<img class="mb-2" :src="getAssetPath('media/table/empty.svg')" />
-					<span class="text-gray-500">{{ emptyTableText }}</span>
+					<span class="text-gray-700">{{ emptyTableText }}</span>
 				</div>
 			</div>
 			<div v-if="props.fixedRightNumber > 0" ref="rightFixedRef" class="fixed-columns-right">

UI/VAP.Vue/src/components/tree/DeptTree.vue

@@ -10,8 +10,8 @@ const props = withDefaults(
 	}>(),
 	{
 		searchWords: "",
-		treeBoxClass: " p-3 bg-white h-100 ",
-		treeBoxStyle: "margin:10px"
+		treeBoxClass: "h-100",
+		treeBoxStyle: "margin-top:15px;background: var(--bs-app-header-minimize-bg-color);"
 	}
 )
 const emits = defineEmits<{

UI/VAP.Vue/vite.config.ts

@@ -39,16 +39,16 @@ export default defineConfig(({ mode, command }) => {
 			strictPort: true,
 			open: true,
 			proxy: {
-				"/dev-api": {
-					target: "http://localhost:6060",
-					changeOrigin: true,
-					rewrite: (p) => p.replace(/^\/dev-api/, "")
-				}
 				// "/dev-api": {
-				// 	target: "http://shvber.com:6066",
+				// 	target: "http://localhost:6060",
 				// 	changeOrigin: true,
-				// 	rewrite: (p) => p.replace(/^\/dev-api/, "/prod-api")
+				// 	rewrite: (p) => p.replace(/^\/dev-api/, "")
 				// }
+				"/dev-api": {
+					target: "http://shvber.com:6066",
+					changeOrigin: true,
+					rewrite: (p) => p.replace(/^\/dev-api/, "/prod-api")
+				}
 			}
 		},
 		preview: {