auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
bunny 2024-10-23 16:58:37 +08:00
parent daffb0883b
commit 671f3831e5
10 changed files with 282 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/platform-config.json
View File

@ -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
}

5
src/api/v1/system.ts
View File

@ -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');
};

6
src/config/index.ts
View File

@ -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配置文件';
});
};

2
src/types/global.d.ts vendored
View File

@ -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 {

204
src/views/configuration/webConifg/index.vue Normal file
View File

@ -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>

0
src/views/configuration/webConifg/utils/columns.ts Normal file
View File

38
src/views/configuration/webConifg/utils/hooks.ts Normal file
View File

@ -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;
};

33
src/views/monitor/server/index.vue
View File

@ -1,35 +1,10 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Info from '@/views/monitor/server/info.vue';
import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
import { onMounted } from 'vue';
import SystemInfo from '@/views/monitor/server/info.vue';
import { $t } from '@/plugins/i18n';
import { svg } from '@/views/monitor/server/utils/columns';
import ListCard from '@/views/monitor/server/list-card.vue';
// 系统健康状态
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;
};
import { datalist, info, loading, onSearch } from '@/views/monitor/server/utils/hooks';
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>

11
src/views/monitor/server/info.vue
View File

@ -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>

27
src/views/monitor/server/utils/hooks.ts Normal file
View File

@ -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;
};