mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 03:01:12 +00:00
no message
This commit is contained in:
kuaifan
parent
8904039515
commit
a130c049bf
@ -479,7 +479,7 @@ class Apps
|
||||
];
|
||||
|
||||
// 处理可选的UI配置
|
||||
$optionalConfigs = ['transparent', 'keepAlive'];
|
||||
$optionalConfigs = ['transparent', 'autoDarkTheme', 'keepAlive', 'disableScopecss'];
|
||||
foreach ($optionalConfigs as $config) {
|
||||
if (isset($menu[$config])) {
|
||||
$normalizedMenu[$config] = $menu[$config];
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
:ref="`ref-${app.name}`"
|
||||
:size="1200"
|
||||
:transparent="app.transparent"
|
||||
:inheritDarkMode="app.inheritDarkMode"
|
||||
:autoDarkTheme="app.autoDarkTheme"
|
||||
:beforeClose="async () => { await onBeforeClose(app.name) }">
|
||||
<micro-app
|
||||
v-if="app.isOpen"
|
||||
@ -331,9 +331,9 @@ export default {
|
||||
* - url 应用地址
|
||||
* - props 传递参数
|
||||
* - transparent 是否透明模式 (true/false)，默认 false
|
||||
* - autoDarkTheme 是否自动适配深色主题 (true/false)，默认 true
|
||||
* - keepAlive 是否开启微应用保活 (true/false)，默认 true
|
||||
* - disableScopecss 是否禁用样式隔离 (true/false)，默认 false
|
||||
* - inheritDarkMode 是否继承暗黑模式 (true/false)，默认 false
|
||||
*/
|
||||
observeMicroApp(config) {
|
||||
// 处理数据
|
||||
@ -341,9 +341,9 @@ export default {
|
||||
config.url = config.url || null
|
||||
config.props = $A.isJson(config.props) ? config.props : {}
|
||||
config.transparent = typeof config.transparent == 'boolean' ? config.transparent : false
|
||||
config.autoDarkTheme = typeof config.autoDarkTheme == 'boolean' ? config.autoDarkTheme : true
|
||||
config.keepAlive = typeof config.keepAlive == 'boolean' ? config.keepAlive : true
|
||||
config.disableScopecss = typeof config.disableScopecss == 'boolean' ? config.disableScopecss : false
|
||||
config.inheritDarkMode = typeof config.inheritDarkMode == 'boolean' ? config.inheritDarkMode : false
|
||||
|
||||
// 判断处理
|
||||
const app = this.apps.find(({name}) => name == config.name);
|
||||
|
||||
@ -1,29 +1,31 @@
|
||||
<template>
|
||||
<div v-transfer-dom :data-transfer="true" :class="className">
|
||||
<transition :name="transitions[0]">
|
||||
<div v-if="value" class="micro-modal-mask" @click="onClose" :style="maskStyle"></div>
|
||||
</transition>
|
||||
<transition :name="transitions[1]">
|
||||
<div v-if="value" class="micro-modal-content" :style="contentStyle">
|
||||
<div class="micro-modal-close" @click="onClose">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
|
||||
<path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
<div v-transfer-dom :data-transfer="true">
|
||||
<div :class="className">
|
||||
<transition :name="transitions[0]">
|
||||
<div v-if="value" class="micro-modal-mask" @click="onClose" :style="maskStyle"></div>
|
||||
</transition>
|
||||
<transition :name="transitions[1]">
|
||||
<div v-if="value" class="micro-modal-content" :style="contentStyle">
|
||||
<div class="micro-modal-close" @click="onClose">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="none" role="img" class="icon fill-current">
|
||||
<path d="M8.28596 6.51819C7.7978 6.03003 7.00634 6.03003 6.51819 6.51819C6.03003 7.00634 6.03003 7.7978 6.51819 8.28596L11.2322 13L6.51819 17.714C6.03003 18.2022 6.03003 18.9937 6.51819 19.4818C7.00634 19.97 7.7978 19.97 8.28596 19.4818L13 14.7678L17.714 19.4818C18.2022 19.97 18.9937 19.97 19.4818 19.4818C19.97 18.9937 19.97 18.2022 19.4818 17.714L14.7678 13L19.4818 8.28596C19.97 7.7978 19.97 7.00634 19.4818 6.51819C18.9937 6.03003 18.2022 6.03003 17.714 6.51819L13 11.2322L8.28596 6.51819Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<ResizeLine
|
||||
class="micro-modal-resize"
|
||||
v-model="dynamicSize"
|
||||
placement="right"
|
||||
:min="minSize"
|
||||
:max="0"
|
||||
:reverse="true"
|
||||
:beforeResize="beforeResize"
|
||||
@on-change="onChangeResize"/>
|
||||
<div ref="body" class="micro-modal-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<ResizeLine
|
||||
class="micro-modal-resize"
|
||||
v-model="dynamicSize"
|
||||
placement="right"
|
||||
:min="minSize"
|
||||
:max="0"
|
||||
:reverse="true"
|
||||
:beforeResize="beforeResize"
|
||||
@on-change="onChangeResize"/>
|
||||
<div ref="body" class="micro-modal-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -52,9 +54,9 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inheritDarkMode: {
|
||||
autoDarkTheme: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: true
|
||||
},
|
||||
beforeClose: Function
|
||||
},
|
||||
@ -65,11 +67,11 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
className({value, transparent, inheritDarkMode}) {
|
||||
className({value, transparent, autoDarkTheme}) {
|
||||
return {
|
||||
'micro-modal': true,
|
||||
'micro-modal-hidden': !value,
|
||||
'no-dark-content': !inheritDarkMode,
|
||||
'no-dark-content': !autoDarkTheme,
|
||||
'transparent-mode': transparent
|
||||
}
|
||||
},
|
||||
@ -146,7 +148,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
.micro-modal {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -177,10 +179,10 @@ export default {
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
animation: hidden-animation 0s forwards;
|
||||
animation: fade-hide 0s forwards;
|
||||
animation-delay: 300ms;
|
||||
|
||||
@keyframes hidden-animation {
|
||||
@keyframes fade-hide {
|
||||
to {
|
||||
display: none;
|
||||
}
|
||||
@ -286,14 +288,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 深色模式适配
|
||||
body.dark-mode-reverse {
|
||||
.micro-modal:not(.no-dark-content):not(.transparent-mode) {
|
||||
--modal-mask-bg: rgba(230, 230, 230, 0.6);
|
||||
--modal-close-color: #323232;
|
||||
.micro-modal {
|
||||
&:not(.transparent-mode) {
|
||||
&:not(.no-dark-content) {
|
||||
--modal-mask-bg: rgba(230, 230, 230, 0.6);
|
||||
--modal-close-color: #323232;
|
||||
}
|
||||
&.no-dark-content {
|
||||
--modal-mask-bg: rgba(20, 20, 20, 0.6);
|
||||
--modal-body-background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
2
resources/assets/js/store/actions.js
vendored
2
resources/assets/js/store/actions.js
vendored
@ -4676,7 +4676,7 @@ export default {
|
||||
event.name += `_${menuItem.key}`
|
||||
}
|
||||
for (let key in menuItem) {
|
||||
if (['props', 'transparent', 'keepAlive', 'disableScopecss'].includes(key)) {
|
||||
if (['transparent', 'autoDarkTheme', 'keepAlive', 'disableScopecss'].includes(key)) {
|
||||
event[key] = menuItem[key]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user