feat: 菜单新增 active_menu 字段

This commit is contained in:
JaguarJack
2023-03-01 15:11:53 +08:00
parent b81d4796ff
commit bcf3d9ec34
11 changed files with 145 additions and 103 deletions

View File

@@ -19,9 +19,9 @@ const breadcrumbs = ref<string[]>([])
// 监听当前路由的变化
watch(router.currentRoute, (newValue, oldValue) => {
// 如果是内页,则不切换激活菜单
if (newValue.meta.is_inner === undefined || !newValue.meta.is_inner) {
appStore.setActiveMenu(newValue.path)
// 激活菜单
if (newValue.meta.active_menu) {
appStore.setActiveMenu(newValue.meta.active_menu)
}
getBreadcrumbs(newValue)
})
@@ -29,7 +29,12 @@ watch(router.currentRoute, (newValue, oldValue) => {
// get init breadcrumb
onMounted(() => {
if (router.currentRoute.value.path !== '/') {
appStore.setActiveMenu(router.currentRoute.value.path)
// 如果是内页,并且设置激活菜单
if (router.currentRoute.value.meta.active_menu) {
appStore.setActiveMenu(router.currentRoute.value.meta.active_menu)
} else {
appStore.setActiveMenu(router.currentRoute.value.path)
}
}
getBreadcrumbs(router.currentRoute.value)

View File

@@ -1,103 +1,110 @@
<template>
<div>
<Editor :api-key="aipKey" :init="config" v-model="content"/>
</div>
<div>
<Editor :api-key="aipKey" :init="config" v-model="content" />
</div>
</template>
<script setup lang="ts">
import Editor from "@tinymce/tinymce-vue";
import Editor from '@tinymce/tinymce-vue'
import { env } from '/admin/support/helper'
import Http from "/admin/support/http"
import Http from '/admin/support/http'
import Message from '/admin/support/message'
import {ref, watch, watchEffect} from "vue";
import { ref, watch } from 'vue'
const props = defineProps({
value: {
type: String,
default: '',
require: true,
},
width: {
type: [Number, String],
required: false,
default: 'auto'
},
height: {
type: [Number, String],
required: false,
default: 'auto'
},
language: {
type: String,
default: 'zh_CN'
},
modelValue: {
type: String,
default: '',
require: true,
},
width: {
type: [Number, String],
required: false,
default: 'auto',
},
height: {
type: [Number, String],
required: false,
default: 'auto',
},
language: {
type: String,
default: 'zh_CN',
},
placeholder: {
type: String,
default: '在这里输入内容'
},
placeholder: {
type: String,
default: '在这里输入内容',
},
plugins: {
type: String,
default: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code ' +
'codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave emoticons'
},
toolbar: {
type: Array,
default: ["undo redo restoredraft cut copy paste pastetext forecolor backcolor bold italic underline strikethrough link anchor alignleft aligncenter alignright alignjustify outdent indent bullist numlist blockquote subscript superscript removeformat styleselect formatselect fontselect fontsizeselect " +
"table upload image axupimgs media emoticons charmap hr pagebreak insertdatetime " +
"selectall visualblocks searchreplace code print preview indent2em fullscreen"]
}
plugins: {
type: String,
default:
'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code ' +
'codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave emoticons',
},
toolbar: {
type: Array,
default: [
'undo redo restoredraft cut copy paste pastetext forecolor backcolor bold italic underline strikethrough link anchor alignleft aligncenter alignright alignjustify outdent indent bullist numlist blockquote subscript superscript removeformat styleselect formatselect fontselect fontsizeselect ' +
'table upload image axupimgs media emoticons charmap hr pagebreak insertdatetime ' +
'selectall visualblocks searchreplace code print preview indent2em fullscreen',
],
},
})
const aipKey: string = 's1ntkmnev0ggx0hhaqnubrdxhv0ly99uyrdbckeaycx7iz6v'
const uploaded = (blobInfo, progress) => new Promise((resolve, reject) => {
if(blobInfo.blob().size/1024/1024 > 10){
Message.error('上传失败,图片大小请控制在 10M 以内')
const uploaded = (blobInfo, progress) =>
new Promise((resolve, reject) => {
if (blobInfo.blob().size / 1024 / 1024 > 10) {
Message.error('上传失败,图片大小请控制在 10M 以内')
} else {
let params = new FormData()
params.append('image', blobInfo.blob())
Http.post(env('VITE_BASE_URL') + 'upload/image', params).then(res=>{
console.log(res)
if (res.data.code === 10000) {
resolve(res.data.data.path)
} else {
Message.error(res.message)
}
}).catch(()=>{
Message.error('Server Error!')
let params = new FormData()
params.append('image', blobInfo.blob())
Http.post(env('VITE_BASE_URL') + 'upload/image', params)
.then(res => {
console.log(res)
if (res.data.code === 10000) {
resolve(res.data.data.path)
} else {
Message.error(res.message)
}
})
.catch(() => {
Message.error('Server Error!')
})
}
})
})
const config = {
language: props.language,
placeholder: props.placeholder,
width: props.width,
height: props.height,
plugins: props.plugins,
toolbar: props.toolbar,
branding: false,
// menubar: false,
images_upload_handler: uploaded
language: props.language,
placeholder: props.placeholder,
width: props.width,
height: props.height,
plugins: props.plugins,
toolbar: props.toolbar,
branding: false,
// menubar: false,
images_upload_handler: uploaded,
}
const emits = defineEmits(['update:value'])
const content = ref(props.value)
watch(content, (value) => {
emits('update:value',value);
const emits = defineEmits(['update:modelValue'])
const content = ref(props.modelValue)
watch(content, value => {
emits('update:modelValue', value)
})
</script>
<style scoped>
.tinymce-boxz > textarea {
display: none;
display: none;
}
</style>
<style>
/* 隐藏apikey没有绑定这个域名的提示 */
.tox-notifications-container .tox-notification--warning {
display: none !important;
display: none !important;
}
.tox{z-index:9999!important;}
.tox {
z-index: 9999 !important;
}
</style>

View File

@@ -138,7 +138,7 @@ export const usePermissionsStore = defineStore('PermissionsStore', {
name: permission.module + '_' + permission.permission_mark,
component: importComponent,
redirect: permission.redirect,
meta: Object.assign({ title: permission.permission_name, icon: permission.icon, hidden: permission.hidden, is_inner: permission.is_inner }),
meta: Object.assign({ title: permission.permission_name, icon: permission.icon, hidden: permission.hidden, active_menu: permission.active_menu }),
})
// child menu

View File

@@ -19,16 +19,12 @@ html.dark {
/* 自定义深色背景颜色 */
--el-bg-color: var(--sider-sub-menu-hover-bg-color);
--el-fill-color-blank: var(--sider-bg-color);
--el-bg-color-overlay: var(--sider-bg-color);
--header-bg-color: var(--sider-bg-color);
// border color
--el-border-color-lighter: #3b4253;
--el-fill-color-light: #161d31;
// side sub menu margin

View File

@@ -141,6 +141,8 @@ class Http {
// set ajax request
this.headers['X-Requested-With'] = 'XMLHttpRequest'
// set dashboard request
this.headers['Request-from'] = 'Dashboard'
this.config.headers = this.headers
return this.config

View File

@@ -14,7 +14,7 @@ export interface Meta {
keepalive?: boolean
is_inner?: boolean
active_menu?: string
}
// @ts-ignore

View File

@@ -11,5 +11,5 @@ export interface Permission {
redirect: string
keepAlive: boolean
hidden: boolean
is_inner: boolean
active_menu: string
}