page: 📄 前端获取后端web配置文件

public/platform-config.json

@@ -1,28 +0,0 @@
-{
-  "Version": "5.8.0",
-  "Title": "BunnyAdmin",
-  "Copyright": "Copyright © 2020-present",
-  "FixedHeader": true,
-  "HiddenSideBar": false,
-  "MultiTagsCache": false,
-  "KeepAlive": true,
-  "Locale": "zh",
-  "Layout": "vertical",
-  "Theme": "light",
-  "DarkMode": false,
-  "OverallStyle": "light",
-  "Grey": false,
-  "Weak": false,
-  "HideTabs": false,
-  "HideFooter": false,
-  "Stretch": false,
-  "SidebarStatus": true,
-  "EpThemeColor": "#409EFF",
-  "ShowLogo": true,
-  "ShowModel": "smart",
-  "MenuArrowIconNoTransition": false,
-  "CachingAsyncRoutes": false,
-  "TooltipEffect": "light",
-  "ResponsiveStorageNameSpace": "responsive-",
-  "MenuSearchHistory": 6
-}

src/api/v1/system.ts

@@ -10,3 +10,8 @@ export const getRouterAsync = () => {
 export const fetchUploadFile = (data: any) => {
 	return http.request<BaseResult<any>>('post', '/files/upload', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
 };
+
+/** 获取前端配置文件 */
+export const fetchPlatformConfig = () => {
+	return http.request<any>('get', '/files/noManage/resourceFiles/platform-config.json');
+};

src/config/index.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import type { App } from 'vue';
 
 let config: object = {};
-const { VITE_PUBLIC_PATH } = import.meta.env;
+const { VITE_PUBLIC_PATH, VITE_BASE_API } = import.meta.env;
 
 const setConfig = (cfg?: unknown) => {
 	config = Object.assign(config, cfg);
@@ -31,7 +31,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
 	app.config.globalProperties.$config = getConfig();
 	return axios({
 		method: 'get',
-		url: `${VITE_PUBLIC_PATH}platform-config.json`,
+		url: `${VITE_BASE_API}/files/noManage/resourceFiles/platform-config.json`,
 	})
 		.then(({ data: config }) => {
 			let $config = app.config.globalProperties.$config;
@@ -45,7 +45,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
 			return $config;
 		})
 		.catch(() => {
-			throw '请在public文件夹下添加platform-config.json配置文件';
+			throw '请在后端文件夹下添加platform-config.json配置文件';
 		});
 };
 

src/types/global.d.ts

@@ -72,7 +72,7 @@ declare global {
 	interface TableColumnList extends Array<TableColumns> {}
 
 	/**
-	 * 对应 `public/platform-config.json` 文件的类型声明
+	 * 对应 `server/platform-config` 文件的类型声明
 	 * @see {@link https://pure-admin.github.io/pure-admin-doc/pages/config/#platform-config-json}
 	 */
 	interface PlatformConfigs {

src/views/configuration/webConifg/index.vue

@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import { rules } from '@/views/configuration/menuIcon/utils/columns';
+import { $t } from '@/plugins/i18n';
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import ReCol from '@/components/MyCol';
+import { form, onSearch } from '@/views/configuration/webConifg/utils/hooks';
+
+const formRef = ref<FormInstance>();
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" class="bg-white p-[30px]" label-width="auto">
+		<el-row :gutter="30">
+			<!-- 应用程序的版本 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('version')" prop="version">
+					<el-input v-model="form.version" :placeholder="$t('input') + $t('version')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 应用程序的标题 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('appTitle')" prop="title">
+					<el-input v-model="form.title" :placeholder="$t('input') + $t('appTitle')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 版权信息 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('copyright')" prop="copyright">
+					<el-input v-model="form.copyright" :placeholder="$t('input') + $t('copyright')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 头部是否固定 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('fixedHeader')" prop="fixedHeader">
+					<el-switch v-model="form.fixedHeader" :placeholder="$t('input') + $t('fixedHeader')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 侧边栏是否隐藏 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('hiddenSideBar')" prop="hiddenSideBar">
+					<el-switch v-model="form.hiddenSideBar" :placeholder="$t('input') + $t('hiddenSideBar')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否缓存多个标签 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('multiTagsCache')" prop="multiTagsCache">
+					<el-switch v-model="form.multiTagsCache" :placeholder="$t('input') + $t('multiTagsCache')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否持久化 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('keepAlive')" prop="keepAlive">
+					<el-switch v-model="form.keepAlive" :placeholder="$t('input') + $t('keepAlive')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 语言类型 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('appLocale')" prop="locale">
+					<el-input v-model="form.locale" :placeholder="$t('input') + $t('appLocale')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 应用程序的布局 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('layout')" prop="layout">
+					<el-input v-model="form.layout" :placeholder="$t('input') + $t('layout')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 应用程序的主题 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('theme')" prop="theme">
+					<el-input v-model="form.theme" :placeholder="$t('input') + $t('theme')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否启用深色模式 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('darkMode')" prop="darkMode">
+					<el-switch v-model="form.darkMode" :placeholder="$t('input') + $t('darkMode')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 应用程序的整体样式 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('overallStyle')" prop="overallStyle">
+					<el-input v-model="form.overallStyle" :placeholder="$t('input') + $t('overallStyle')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否启用灰色模式 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('greyStyle')" prop="grey">
+					<el-switch v-model="form.grey" :placeholder="$t('input') + $t('greyStyle')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 色弱模式 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('weakStyle')" prop="weak">
+					<el-switch v-model="form.weak" :placeholder="$t('input') + $t('weakStyle')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否隐藏选项卡 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('hideTabs')" prop="weak">
+					<el-switch v-model="form.hideTabs" :placeholder="$t('input') + $t('hideTabs')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否隐藏页脚 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('hideFooter')" prop="weak">
+					<el-switch v-model="form.hideFooter" :placeholder="$t('input') + $t('hideFooter')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否拉伸显示 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('stretch')" prop="stretch">
+					<el-switch v-model="form.stretch" :placeholder="$t('input') + $t('stretch')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 侧边栏的状态 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('sidebarStatus')" prop="sidebarStatus">
+					<el-switch v-model="form.sidebarStatus" :placeholder="$t('input') + $t('sidebarStatus')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 主题颜色 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('epThemeColor')" prop="epThemeColor">
+					<el-switch v-model="form.epThemeColor" :placeholder="$t('input') + $t('epThemeColor')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否显示logo -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('showLogo')" prop="showLogo">
+					<el-switch v-model="form.showLogo" :placeholder="$t('input') + $t('showLogo')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 要显示的模型 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('showModel')" prop="showModel">
+					<el-switch v-model="form.showModel" :placeholder="$t('input') + $t('showModel')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 菜单箭头图标是否没有过渡效果 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('menuArrowIconNoTransition')" prop="menuArrowIconNoTransition">
+					<el-switch v-model="form.menuArrowIconNoTransition" :placeholder="$t('input') + $t('menuArrowIconNoTransition')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 是否缓存异步路由 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('cachingAsyncRoutes')" prop="cachingAsyncRoutes">
+					<el-switch v-model="form.cachingAsyncRoutes" :placeholder="$t('input') + $t('cachingAsyncRoutes')" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 工具提示的效果 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('tooltipEffect')" prop="tooltipEffect">
+					<el-input v-model="form.tooltipEffect" :placeholder="$t('input') + $t('tooltipEffect')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 响应式存储的命名空间 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('responsiveStorageNameSpace')" prop="responsiveStorageNameSpace">
+					<el-input v-model="form.responsiveStorageNameSpace" :placeholder="$t('input') + $t('responsiveStorageNameSpace')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 菜单搜索历史 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('menuSearchHistory')" prop="menuSearchHistory">
+					<el-input v-model="form.menuSearchHistory" :placeholder="$t('input') + $t('menuSearchHistory')" autocomplete="off" type="number" />
+				</el-form-item>
+			</re-col>
+		</el-row>
+	</el-form>
+</template>
+
+<style lang="scss" scoped></style>

src/views/configuration/webConifg/utils/hooks.ts

@@ -0,0 +1,38 @@
+import { fetchPlatformConfig } from '@/api/v1/system';
+import { ref } from 'vue';
+
+export const form = ref({
+	version: '', // 应用程序的版本
+	title: '', // 应用程序的标题
+	copyright: '', // 版权信息
+	fixedHeader: false, // 头部是否固定
+	hiddenSideBar: false, // 侧边栏是否隐藏
+	multiTagsCache: false, // 是否缓存多个标签
+	keepAlive: false, // 是否持久化
+	locale: '', // 语言类型
+	layout: '', // 应用程序的布局
+	theme: '', // 应用程序的主题
+	darkMode: false, // 是否启用深色模式
+	overallStyle: '', // 应用程序的整体样式
+	grey: false, // 是否启用灰色模式
+	weak: false, // 色弱模式
+	hideTabs: false, // 是否隐藏选项卡
+	hideFooter: false, // 是否隐藏页脚
+	stretch: false, // 是否拉伸显示
+	sidebarStatus: false, // 侧边栏的状态
+	epThemeColor: '', // 主题颜色
+	showLogo: false, // 是否显示logo
+	showModel: '', // 要显示的模型
+	menuArrowIconNoTransition: false, // 菜单箭头图标是否没有过渡效果
+	cachingAsyncRoutes: false, // 是否缓存异步路由
+	tooltipEffect: '', // 工具提示的效果
+	responsiveStorageNameSpace: '', // 响应式存储的命名空间
+	menuSearchHistory: 0, // 菜单搜索历史
+});
+
+/** 获取前端配置文件 */
+export const onSearch = async () => {
+	const result = await fetchPlatformConfig();
+	console.log(result);
+	form.value = result;
+};

src/views/monitor/server/index.vue

@@ -1,35 +1,10 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
-import Info from '@/views/monitor/server/info.vue';
+import SystemInfo from '@/views/monitor/server/info.vue';
-import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
 import { $t } from '@/plugins/i18n';
 import { svg } from '@/views/monitor/server/utils/columns';
 import ListCard from '@/views/monitor/server/list-card.vue';
-
+import { datalist, info, loading, onSearch } from '@/views/monitor/server/utils/hooks';
-// 系统健康状态
-const datalist = ref([]);
-// 系统运行信息
-const info = ref({ java: { vendor: {}, runtime: {}, jvm: {} }, os: {} });
-const loading = ref(false);
-
-/** 获取系统服务数据 */
-const onSearch = async () => {
-	loading.value = true;
-
-	// 获取系统运行状态信息
-	const result = await fetchSystemHealthList();
-	datalist.value = Object.entries(result.components).map(([key, value]: any) => ({
-		type: key,
-		key: `${key}`,
-		status: value.status === 'UP',
-		details: value.details && Object.entries(value.details).map(([key, value]: any) => ({ key, value })),
-	}));
-
-	// 系统信息
-	info.value = await fetchSystemInfo();
-
-	loading.value = false;
-};
 
 onMounted(() => {
 	onSearch();
@@ -41,7 +16,7 @@ onMounted(() => {
 		<el-empty v-if="false" :description="$t('no_server')" />
 
 		<el-row :gutter="16">
-			<info v-if="info.java.jvm" :info="info" />
+			<system-info v-if="info.java.jvm" :info="info" />
 			<el-col v-for="(product, index) in datalist" :key="index" :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
 				<ListCard :product="product" />
 			</el-col>

src/views/monitor/server/info.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
-import { $t } from '@/plugins/i18n';
 import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
 
 defineProps({
@@ -16,11 +15,6 @@ defineProps({
 					<div :class="cardLogoClass">
 						<component :is="useRenderIcon('devicon:java')" />
 					</div>
-					<div class="list-card-item_detail--operation">
-						<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark">
-							{{ $t('enable') }}
-						</el-tag>
-					</div>
 				</el-row>
 				<p class="list-card-item_detail--name text-text_color_primary">java</p>
 				<el-text>
@@ -46,11 +40,6 @@ defineProps({
 					<div :class="cardLogoClass">
 						<component :is="useRenderIcon('mdi:server')" />
 					</div>
-					<div class="list-card-item_detail--operation">
-						<el-tag class="mx-1 list-card-item_detail--operation--tag" color="#00a870" effect="dark">
-							{{ $t('enable') }}
-						</el-tag>
-					</div>
 				</el-row>
 				<p class="list-card-item_detail--name text-text_color_primary">系统信息</p>
 				<el-text>

src/views/monitor/server/utils/hooks.ts

@@ -0,0 +1,27 @@
+// 系统健康状态
+import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
+import { ref } from 'vue';
+
+export const datalist = ref([]);
+// 系统运行信息
+export const info = ref({ java: { vendor: {}, runtime: {}, jvm: {} }, os: {} });
+export const loading = ref(false);
+
+/** 获取系统服务数据 */
+export const onSearch = async () => {
+	loading.value = true;
+
+	// 获取系统运行状态信息
+	const result = await fetchSystemHealthList();
+	datalist.value = Object.entries(result.components).map(([key, value]: any) => ({
+		type: key,
+		key: `${key}`,
+		status: value.status === 'UP',
+		details: value.details && Object.entries(value.details).map(([key, value]: any) => ({ key, value })),
+	}));
+
+	// 系统信息
+	info.value = await fetchSystemInfo();
+
+	loading.value = false;
+};