173 lines
3.1 KiB
Vue
173 lines
3.1 KiB
Vue
<template>
|
|
<div :class="prefixCls">
|
|
<div :class="`${prefixCls}-left`">
|
|
<a-menu
|
|
v-if="dataList?.length"
|
|
theme="dark"
|
|
:selected-keys="selectedKeys"
|
|
:collapsed="collapsed"
|
|
:default-open-keys="defaultOpenedKeys"
|
|
@menu-item-click="menuItemClick"
|
|
@sub-menu-click="subMenuClick">
|
|
<template v-for="item in dataList">
|
|
<template v-if="item.children && item.children.length > 0">
|
|
<a-sub-menu
|
|
:key="item.id"
|
|
:title="item.title">
|
|
<template #icon>
|
|
<mf-icon
|
|
v-if="item.icon"
|
|
:value="item.icon" />
|
|
</template>
|
|
<a-menu-item
|
|
v-for="child in item.children"
|
|
:key="child.key">
|
|
{{ child.title }}
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</template>
|
|
<template v-else>
|
|
<a-menu-item :key="item.id">
|
|
<template #icon>
|
|
<mf-icon
|
|
v-if="item.icon"
|
|
:value="item.icon" />
|
|
</template>
|
|
<div class="menu-item">
|
|
{{ item.title }}
|
|
</div>
|
|
</a-menu-item>
|
|
</template>
|
|
</template>
|
|
</a-menu>
|
|
</div>
|
|
<div :class="`${prefixCls}-right`">
|
|
<div
|
|
:class="`${prefixCls}-content ql-editor`"
|
|
v-html="content"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, inject, onMounted, watch } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
|
|
const prefixCls = 'help'
|
|
|
|
const $datas = inject('$datas')
|
|
const $axios = inject('$axios')
|
|
const defaultOpenedKeys = ref(['1'])
|
|
const selectedKeys = ref([1])
|
|
const collapsed = ref(false)
|
|
|
|
const dataList = ref([])
|
|
|
|
const store = useStore()
|
|
|
|
onMounted(() => {
|
|
getData()
|
|
})
|
|
|
|
watch(
|
|
() => store.getters.lang,
|
|
() => {
|
|
getData()
|
|
}
|
|
)
|
|
|
|
const getData = () => {
|
|
$axios({
|
|
url: 'api/help/list',
|
|
method: 'GET',
|
|
data: {
|
|
pageNum: 1,
|
|
pageSize: 1000
|
|
}
|
|
}).then((res) => {
|
|
dataList.value = res.rows || []
|
|
if (dataList.value?.length) {
|
|
selectedKeys.value = [dataList.value[0].id]
|
|
}
|
|
})
|
|
}
|
|
|
|
const content = computed(() => {
|
|
let selectedKey = selectedKeys.value[0]
|
|
if (selectedKey) {
|
|
let item = $datas.deepFind(dataList.value, (d) => d.id == selectedKey)
|
|
if (item) {
|
|
return item.content
|
|
}
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const menuItemClick = (key) => {
|
|
selectedKeys.value = [key]
|
|
}
|
|
|
|
const subMenuClick = (key, _openKeys) => {}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.help {
|
|
display: flex;
|
|
height: 100%;
|
|
&-left {
|
|
height: 100%;
|
|
width: 300px;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
|
|
.arco-menu-dark {
|
|
background-color: transparent;
|
|
.arco-menu-item {
|
|
margin-bottom: 12px;
|
|
background-color: transparent;
|
|
&:hover,
|
|
&.arco-menu-selected {
|
|
background-color: rgb(var(--primary-6));
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&-content {
|
|
color: #fff;
|
|
padding: 0 40px;
|
|
background-color: #000;
|
|
|
|
* {
|
|
color: #999999 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.help {
|
|
&-left {
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
|
|
:deep(.arco-menu-dark) {
|
|
.arco-menu-item {
|
|
font-size: 12px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.arco-menu-inner {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|