主题
Window 窗口
Window 窗口组件是展示页面的基础框架，它充当所有页面内容的容器。它提供了一个统一的界面样式，使得所有的内容都能够在一个标准化的环境中展示。
基础用法
vue
<template>
<cb-window>
<div class="app-layout-view">
<div class="app-layout-body-view">
这里有一个窗口！
</div>
</div>
</cb-window>
</template>
<script setup>
import CbWindow from '@/public/components/window/window.vue'
</script>多页面路由
属性：
routes类型：
object[]默认值：
[]必须：
否使用示例：
vue
<template>
<cb-window :routes="routes">
<router-view></router-view>
</cb-window>
</template>
<script setup>
import { ref } from 'vue'
import CbWindow from '@/public/components/window/window.vue'
const routes = ref([
{ name: 'Home', label: 'HOME' }
])
</script>提示
这里需要其他文件配合，可以参考创建一个窗口。
窗口标题
属性：
title类型：
string默认值：
''必须：
否示例：
提示
从这里开始，之后的参数不再通过 props 传递，而是使用 mitt 的方式，通过在组件内监听 view 事件传递。
vue
<template>
<cb-window></cb-window>
</template>
<script setup>
import { onMounted } from 'vue'
import emitter from '@/public/utils/mitt'
import CbWindow from '@/public/components/window/window.vue'
onMounted(() => {
emitter.emit('view', {
title: '标题'
})
})
</script>窗口模式
属性：
mode类型：
'clean' | 'clean-white' | 'multiple'默认值：
''必须：
否示例：
vue
<template>
<cb-window></cb-window>
</template>
<script setup>
import { onMounted } from 'vue'
import emitter from '@/public/utils/mitt'
import CbWindow from '@/public/components/window/window.vue'
onMounted(() => {
emitter.emit('view', {
mode: 'clean'
})
})
</script>阴影模式
属性：
shadow类型：
boolean默认值：
false必须：
否示例：
vue
<template>
<cb-window></cb-window>
</template>
<script setup>
import { onMounted } from 'vue'
import emitter from '@/public/utils/mitt'
import CbWindow from '@/public/components/window/window.vue'
onMounted(() => {
emitter.emit('view', {
shadow: true
})
})
</script>