hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

log、名称、底栏自定义

Browse Source
This commit is contained in:
Double-_-Z 2024-11-18 15:59:53 +08:00
parent 53fdad11a2
commit 1ca8573505
9 changed files with 137 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@ -20,6 +20,7 @@ import other from '/@/utils/other';
import { Local, Session } from '/@/utils/storage';
import mittBus from '/@/utils/mitt';
import setIntroduction from '/@/utils/setIconfont';
import logoMini from '/@/assets/logo-mini.svg';
// 引入组件
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
@ -59,6 +60,14 @@ const getGlobalComponentSize = computed(() => {
const getGlobalI18n = computed(() => {
return messages.value[locale.value];
});
// 动态设置网站图标
let link: any = document.querySelector("link[rel*='icon']") || document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = themeConfig.logoMini||logoMini;
document.getElementsByTagName("head")[0].appendChild(link);
// 设置初始化，防止刷新时恢复默认
onBeforeMount(() => {
// 设置批量第三方 icon 图标

4
src/i18n/lang/en.ts
View File

@ -170,6 +170,10 @@ export default {
fourIsDark: 'Dark Mode',
fourIsWartermark: 'Turn on watermark',
fourWartermarkText: 'Watermark copy',
logoTitle: 'Logo title',
footTitle: 'Foot title',
footTip: 'Foot tip',
logoSetting: 'Logo setting',
fiveTitle: 'Other settings',
fiveTagsStyle: 'Tagsview style',
fiveAnimation: 'page animation',

4
src/i18n/lang/zh-cn.ts
View File

@ -170,6 +170,10 @@ export default {
fourIsDark: '深色模式',
fourIsWartermark: '开启水印',
fourWartermarkText: '水印文案',
logoTitle: 'Logo名称',
footTitle: '页脚版权说明',
logoSetting: 'Logo设置',
footTip: '页脚Tip',
fiveTitle: '其它设置',
fiveTagsStyle: 'Tagsview 风格',
fiveAnimation: '主页面切换动画',

4
src/i18n/lang/zh-tw.ts
View File

@ -170,6 +170,10 @@ export default {
fourIsDark: '深色模式',
fourIsWartermark: '開啟浮水印',
fourWartermarkText: '浮水印文案',
logoTitle: 'Logo 標題',
footTitle: '頁腳版權說明',
footTip: '頁腳tip',
logoSetting: 'Logo 配置',
fiveTitle: '其它設定',
fiveTagsStyle: 'Tagsview 風格',
fiveAnimation: '主頁面切換動畫',

11
src/layout/footer/index.vue
View File

@ -1,14 +1,19 @@
<template>
<div class="layout-footer pb15">
<div class="layout-footer-warp">
<div>vue-next-admin，Made by lyt with ❤️</div>
<div class="mt5">深圳市 xxx 公司版权所有</div>
<div>{{ themeConfig.globalFootTipMsg }}</div>
<div class="mt5">{{ themeConfig.globalFootTitleMsg }}</div>
</div>
</div>
</template>
<script setup lang="ts" name="layoutFooter">
// 此处需有内容（注释也得），否则缓存将失败
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
</script>
<style scoped lang="scss">

4
src/layout/logo/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
<img :src="logoMini" class="layout-logo-medium-img" />
<img :src="themeConfig.logoMini||logoMini" class="layout-logo-medium-img" />
<span>{{ themeConfig.globalTitle }}</span>
</div>
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
<img :src="logoMini" class="layout-logo-size-img" />
<img :src="themeConfig.logoMini||logoMini" class="layout-logo-size-img" />
</div>
</template>

100
src/layout/navBars/topBar/setings.vue
View File

@ -285,6 +285,35 @@
<el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput"></el-input>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.logoTitle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input v-model="getThemeConfig.globalTitle" size="default" style="width: 90px" @input="onWartermarkTitleInput"></el-input>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.footTitle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input v-model="getThemeConfig.globalFootTitleMsg" size="default" style="width: 90px" @input="onWartermarkFootTitleInput"></el-input>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.footTip') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-input v-model="getThemeConfig.globalFootTipMsg" size="default" style="width: 90px" @input="onWartermarkFootTipInput"></el-input>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt14">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.logoSetting') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-upload ref="uploadRef" action="#" :limit="1" :auto-upload="false" @change="onWartermarkLogoUpload" :on-preview="handlePreview"
:file-list="getThemeConfig.logoMini?[{name:getThemeConfig.globalTitle,url:getThemeConfig.logoMini}]:[]" accept='image/*'>
<template #default>
<el-button v-if="!getThemeConfig.logoMini" class="logo-picture" type="text">上传文件</el-button>
</template>
</el-upload>
</div>
</div>
<!-- 其它设置 -->
<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
@ -426,12 +455,15 @@
</div>
</el-scrollbar>
</el-drawer>
<el-dialog v-model="dialogVisible">
<img w-full :src="getThemeConfig.logoMini" alt="预览logo" />
</el-dialog>
</div>
</template>
<script setup lang="ts" name="layoutBreadcrumbSeting">
import { nextTick, onUnmounted, onMounted, computed, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { nextTick, onUnmounted, onMounted, computed, reactive, ref } from 'vue';
import { ElMessage, UploadFile, UploadFiles, UploadProps } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
@ -442,6 +474,7 @@ import Watermark from '/@/utils/watermark';
import commonFunction from '/@/utils/commonFunction';
import other from '/@/utils/other';
import mittBus from '/@/utils/mitt';
import { articleApi } from '/@/api/article';
// 定义变量内容
const { locale } = useI18n();
@ -453,6 +486,9 @@ const state = reactive({
isMobile: false,
});
// 引入 api 请求接口
const artApi = articleApi();
// 获取布局配置信息
const getThemeConfig = computed(() => {
return themeConfig.value;
@ -577,7 +613,59 @@ const onWartermarkTextInput = (val: string) => {
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
setLocalThemeConfig();
};
// 5、布局切换
// 5、界面显示 --> logo标题
const onWartermarkTitleInput = (val: string) => {
getThemeConfig.value.globalTitle = verifyAndSpace(val);
if (getThemeConfig.value.globalTitle === '') return false;
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.globalTitle);
setLocalThemeConfig();
};
// 6、界面显示 --> 页脚tip
const onWartermarkFootTitleInput = (val: string) => {
getThemeConfig.value.globalFootTitleMsg = verifyAndSpace(val);
if (getThemeConfig.value.globalFootTitleMsg === '') return false;
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.globalFootTitleMsg);
setLocalThemeConfig();
};
// 7、界面显示 --> 页脚版权
const onWartermarkFootTipInput = (val: string) => {
getThemeConfig.value.globalFootTipMsg = verifyAndSpace(val);
if (getThemeConfig.value.globalFootTipMsg === '') return false;
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.globalFootTipMsg);
setLocalThemeConfig();
};
const uploadRef = ref();
const dialogVisible = ref(false);
const handlePreview: UploadProps['onPreview'] = (uploadFile) =>{
dialogVisible.value = true;
};
// 封面基本路径
const viteUrl = import.meta.env.VITE_API_URL;
// 8、界面显示 --> logo设置
const onWartermarkLogoMiniInput = (val: string) => {
getThemeConfig.value.logoMini = verifyAndSpace(val);
if (getThemeConfig.value.logoMini === '') return false;
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.logoMini);
setLocalThemeConfig();
};
// 8、界面显示 --> logo上传
const onWartermarkLogoUpload = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
if(uploadFile.raw?.type.includes('image')){
const file:any = uploadFile.raw;
const formdata = new FormData();
formdata.append('file', file);
let res = await artApi.uploadFile(formdata);
if(res?.success&&res?.data){
onWartermarkLogoMiniInput(encodeURI(viteUrl+res.data.path));
}else{
ElMessage.error('logo上传失败！');
}
}else{
ElMessage.error('请上传图片文件！');
uploadRef.value.clearFiles();
}
}
// 9、布局切换
const onSetLayout = (layout: string) => {
Local.set('oldLayout', layout);
if (getThemeConfig.value.layout === layout) return false;
@ -823,4 +911,10 @@ defineExpose({
}
}
}
.logo-picture{
display: flex;
align-items: center;
justify-content: center;
padding: 8px 15px 0;
}
</style>

6
src/stores/themeConfig.ts
View File

@ -105,6 +105,10 @@ export const useThemeConfig = defineStore('themeConfig', {
isWartermark: true,
// 水印文案
wartermarkText: 'vue-next-admin',
// 页脚版权信息内容
globalFootTitleMsg: '深圳市 xxx 公司版权所有',
// 页脚tip
globalFootTipMsg: 'vue-next-admin，Made by lyt with ❤️',
/**
* 其它设置
@ -146,6 +150,8 @@ export const useThemeConfig = defineStore('themeConfig', {
globalI18n: 'zh-cn',
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
globalComponentSize: 'large',
// 网站logo
logoMini: '/@/assets/logo-mini.svg',
},
}),
actions: {

3
src/types/pinia.d.ts vendored
View File

@ -77,6 +77,8 @@ declare interface ThemeConfigState {
isIsDark: boolean;
isWartermark: boolean;
wartermarkText: string;
globalFootTitleMsg: string;
globalFootTipMsg: string;
tagsStyle: string;
animation: string;
columnsAsideStyle: string;
@ -88,5 +90,6 @@ declare interface ThemeConfigState {
globalViceTitleMsg: string;
globalI18n: string;
globalComponentSize: string;
logoMini: string;
};
}