forked from github/dataease
Merge pull request #6445 from dataease/pr@dev@feat_help-model
feat: 添加帮助模块
This commit is contained in:
王嘉豪
GitHub
commit
cebfa9979e
5
core/core-frontend/src/assets/svg/top-doc-default.svg
Normal file
5
core/core-frontend/src/assets/svg/top-doc-default.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.8608C14.9949 1.5 15.1234 1.55387 15.2174 1.64951L19.8566 6.36941C19.9485 6.46292 20 6.58879 20 6.7199V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#3370FF"/>
|
||||
<path d="M15 1.51978C15.0817 1.54345 15.1567 1.58778 15.2174 1.64952L19.8566 6.36942C19.8946 6.40806 19.9256 6.45223 19.949 6.50001H16.1351C15.5082 6.50001 15 5.99179 15 5.36488V1.51978Z" fill="#245BDB"/>
|
||||
<path d="M8.07282 10.1819H15.6546C15.745 10.1819 15.8183 10.2551 15.8183 10.3455V11.1092C15.8183 11.1995 15.745 11.2728 15.6546 11.2728H8.07282C7.98244 11.2728 7.90918 11.1995 7.90918 11.1092V10.3455C7.90918 10.2551 7.98244 10.1819 8.07282 10.1819ZM8.07282 13.4546H15.6546C15.745 13.4546 15.8183 13.5279 15.8183 13.6182V14.3819C15.8183 14.4723 15.745 14.5455 15.6546 14.5455H8.07282C7.98244 14.5455 7.90918 14.4723 7.90918 14.3819V13.6182C7.90918 13.5279 7.98244 13.4546 8.07282 13.4546ZM8.07282 16.7273H12.1092C12.1996 16.7273 12.2728 16.8006 12.2728 16.891V17.6546C12.2728 17.745 12.1996 17.8182 12.1092 17.8182H8.07282C7.98244 17.8182 7.90918 17.745 7.90918 17.6546V16.891C7.90918 16.8006 7.98244 16.7273 8.07282 16.7273Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -158,7 +158,6 @@ const { t } = useI18n()
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const filterStyle = computed<any>(() => {
|
||||
console.log('filterStyle==' + JSON.stringify(dvMainStore.canvasStyleData.component.filterStyle))
|
||||
return dvMainStore.canvasStyleData.component.filterStyle
|
||||
})
|
||||
|
||||
|
||||
@ -1,20 +1,48 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Icon } from '@/components/icon-custom'
|
||||
import TopDocCard from '@/layout/components/TopDocCard.vue'
|
||||
const helpLink = ref('https://dataease.io/docs/')
|
||||
const openBlank = () => {
|
||||
window.open(helpLink.value)
|
||||
}
|
||||
|
||||
const cardInfoList = [
|
||||
{ name: '帮助文档', url: 'https://dataease.io/docs/index.html', icon: 'top-doc-default' },
|
||||
{ name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: 'top-doc-default' },
|
||||
{
|
||||
name: '技术博客',
|
||||
url: 'https://blog.fit2cloud.com/categories/dataease',
|
||||
icon: 'top-doc-default'
|
||||
},
|
||||
{ name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: 'top-doc-default' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-tooltip class="box-item" effect="dark" content="帮助文档" placement="top">
|
||||
<div class="sys-setting">
|
||||
<el-icon @click="openBlank">
|
||||
<Icon name="docs" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-popover
|
||||
:show-arrow="false"
|
||||
popper-class="top-popover"
|
||||
placement="bottom-end"
|
||||
width="208"
|
||||
trigger="click"
|
||||
>
|
||||
<el-row>
|
||||
<top-doc-card
|
||||
:span="12"
|
||||
v-for="(item, index) in cardInfoList"
|
||||
:key="index"
|
||||
:card-info="item"
|
||||
></top-doc-card>
|
||||
</el-row>
|
||||
<template #reference>
|
||||
<div class="sys-setting">
|
||||
<el-icon>
|
||||
<Icon name="docs" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -31,3 +59,9 @@ const openBlank = () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.top-popover {
|
||||
padding: 0 0 16px 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
63
core/core-frontend/src/layout/components/TopDocCard.vue
Normal file
63
core/core-frontend/src/layout/components/TopDocCard.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<script lang="ts" setup>
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
cardInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
name: '',
|
||||
url: '',
|
||||
icon: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const { cardInfo } = toRefs(props)
|
||||
|
||||
const openBlank = () => {
|
||||
window.open(cardInfo.value.url)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="doc-card" @click="openBlank">
|
||||
<el-row class="base-show">
|
||||
<Icon class-name="item-top-icon" :name="cardInfo.icon" />
|
||||
</el-row>
|
||||
<el-row class="base-show show-content"> {{ cardInfo.name }}</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.doc-card {
|
||||
padding-top: 2px;
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(30, 39, 56, 0.05);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(30, 39, 56, 0.1);
|
||||
}
|
||||
}
|
||||
.base-show {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.show-content {
|
||||
font-size: 14px;
|
||||
color: #1f2329;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.item-top-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user