Skip to content

O
offical_web
Commit 66cafb79 by wusiyi
Options

feat: 帮助页内容新增

parent 23a91a5c
Showing with 182 additions and 177 deletions
src/assets/css/common.css
......@@ -1464,7 +1464,7 @@ ul li {
/* 菜单主题色 */
.el-menu {
background-color: var(--el-color-primary-light-9) !important;
background-color: #fff !important;
}
/* 评分主题色 */
......
src/components/head.vue
<template>
<div
class="header bg-white sticky shadow-sm"
:class="{ shadow: !$route.path.includes('help') }"
class="header bg-white sticky"
:class="{ 'shadow-sm': !$route.path.includes('help') }"
ref="header">
<headHelper v-if="$route.path.includes('help')" />
<headerNavMobile v-else-if="$isMobile" :userInfo="userInfo" />
......
src/router/index.js
......@@ -93,10 +93,11 @@ const routes = [
require(['../views/help/pages/index.vue'], resolve),
},
{
path: 'beginner',
name: 'HelpBeginner',
path: 'picTutorial/:id',
name: 'PicTutorial',
component: (resolve) =>
require(['../views/help/pages/Beginner/beginner.vue'], resolve),
require(['../views/help/components/picTutorial.vue'], resolve),
props: true,
},
{
path: 'artical1',
......
src/views/help/components/MenuItem.vue 0 → 100644
<template>
<div>
<el-submenu
v-if="menuItem.children && menuItem.children.length > 0"
:index="String(menuItem.id)">
<template slot="title">
<span>{{ menuItem.name }}</span>
</template>
<menu-item
v-for="child in menuItem.children"
:key="child.id"
:menu-item="child" />
</el-submenu>
<el-menu-item
v-else
:index="
menuItem.url
? '/help/' + menuItem.path + '/' + menuItem.url
: '/help/' + menuItem.path
"
@click="handleMenuItemClick">
<span>{{ menuItem.name }}</span>
</el-menu-item>
</div>
</template>
<script>
import { menuList } from '../menuConfig'
export default {
name: 'MenuItem',
props: {
menuItem: {
type: Object,
required: true,
},
},
methods: {
handleMenuItemClick() {
if (this.menuItem.link) {
this.$router.push({
path: `/help/${this.menuItem.path}/${this.menuItem.url}`,
query: { url: this.menuItem.link },
})
}
const id = [...String(this.menuItem.id)].map(Number)
const result = []
let fullPath = ''
let current = menuList
id.forEach((index, i) => {
current = current?.[index - 1] || current?.children?.[index - 1]
if (i === id.length - 1 && current.url) {
fullPath = current.url
}
result.push({ name: current.name, path: fullPath || 'index' })
})
this.$store.dispatch('path/setCurrentPathNames', result)
},
},
}
</script>
src/views/help/components/bread.vue
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in breadList"
:key="item.path"
@click.native="handleBreadClick(index)">
<a href="javascript:void(0)">{{ item.name }}</a>
<el-breadcrumb-item v-for="(item, index) in breadList" :key="item.id">
<a
v-if="index === 0"
href="javascript:void(0)"
@click="handleBreadClick(index)"
:class="{ 'breadcrumb-clickable': true }">
{{ item.name }}
</a>
<span v-else class="breadcrumb-disabled">{{ item.name }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
......@@ -15,7 +19,6 @@ export default {
name: 'Bread',
computed: {
breadList() {
// currentPathNames 已经包含了帮助中心作为第一项
return this.$store.getters['path/currentPathNames'] || []
},
},
......@@ -27,9 +30,31 @@ export default {
const clickedItem = currentPathNames[index]
const newPathNames = currentPathNames.slice(0, index + 1)
this.$store.dispatch('path/setCurrentPathNames', newPathNames)
this.$router.push(`/help/${clickedItem.path}`)
// 如果是帮助中心，跳转到 /help/index
if (index === 0) {
this.$router.push('/help/index')
} else {
this.$router.push(`/help/${clickedItem.path}`)
}
}
},
},
}
</script>
<style scoped>
.breadcrumb-clickable {
color: var(--primary-color);
cursor: pointer;
text-decoration: none;
}
.breadcrumb-clickable:hover {
color: var(--el-color-primary-light-4);
}
.breadcrumb-disabled {
color: #606266;
cursor: default;
}
</style>
src/views/help/components/homeGuides.vue
......@@ -92,15 +92,13 @@ export default {
this.$router.push(content.url)
},
goToMore(tab) {
const breadcrumbPath = [
{ name: '帮助中心', path: 'index' },
{ name: tab.title, path: tab.url },
]
this.$store.dispatch('path/setCurrentPathNames', breadcrumbPath)
this.$router.push(`/help/${tab.url}`)
goToMore() {
// const breadcrumbPath = [
// { name: '帮助中心', path: 'index' },
// { name: tab.title, path: tab.url },
// ]
// this.$store.dispatch('path/setCurrentPathNames', breadcrumbPath)
// this.$router.push(`/help/${tab.url}`)
},
},
}
......
src/views/help/components/picTutorial.vue 0 → 100644
<template>
<div style="height: 80vh">
<iframe :key="link" class="w-full h-full" frameborder="0" :src="link" />
</div>
</template>
<script>
import { FEISHU_BASE_URL } from '../menuConfig.js'
export default {
name: 'PicTutorial',
props: {
id: {
type: [String, Number],
required: true,
},
},
data() {
return {
isLoading: true,
}
},
computed: {
link() {
const anchor = this.$route.query.url || ''
if (!anchor) return ''
if (this.$route.name === 'PicTutorial') {
return FEISHU_BASE_URL + anchor
}
return ''
},
},
watch: {},
methods: {},
}
</script>
<style scoped></style>
src/views/help/helpPage.vue
<template>
<div>
<div class="top flex flex-col items-center py-16">
<div
v-if="$route.path === '/help/index'"
class="top flex flex-col items-center py-6">
<div class="text-gray-700 text-4xl font-bold">帮助中心</div>
<el-input
v-model="keyword"
......@@ -13,7 +15,8 @@
<div class="content p-5">
<sideNav />
<div
class="right-content w-full h-full p-5"
class="right-content w-full p-5"
style="height: 90vh"
:class="{ 'rounded-md bg-white': $route.path !== '/help/index' }">
<Bread v-if="$route.path !== '/help/index'" />
<router-view></router-view>
......
src/views/help/pages/Beginner/beginner.vue deleted 100644 → 0
<template>
<div class="w-full h-full bg-white rounded-md">
<div class="text-xl font-bold my-10">{{ title }}</div>
<div class="content">
<a
v-for="(t, index) in titles"
:key="t"
class="content-title text-gray-600 ml-8 block mb-3 pb-3 border-b border-gray-200"
@click="goArtical(t, index)"
:href="`/help/artical${index + 1}`">
{{ t }}
</a>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
title: '',
titles: [],
}
},
created() {
const currentPathNames = this.$store.getters['path/currentPathNames']
this.title = currentPathNames[currentPathNames.length - 1].name
try {
const ctx = require.context('./', false, /\.vue$/)
ctx.keys().forEach((key) => {
if (/beginner\.vue$/i.test(key)) return
const mod = ctx(key)
const comp = mod && (mod.default || mod)
if (comp && typeof comp.data === 'function') {
const dataObj = comp.data.call({}) || {}
if (dataObj.title) {
this.titles.push(dataObj.title)
}
}
})
} catch (e) {
// ignore
}
},
methods: {
goArtical(title, index) {
// 调用 vuex action 添加文章路径
this.$store.dispatch('path/addArticlePath', { title, index })
},
},
}
</script>
<style scoped lang="scss">
.content-title {
position: relative;
transition: all 0.2s ease;
&::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
position: absolute;
left: -23px;
top: 10px;
background-color: var(--primary-color);
box-shadow: 0 0 0 5px #e6c07977;
}
&:hover {
color: var(--primary-color);
}
}
</style>
src/views/help/sideNav.vue
<template>
<div class="side-nav mr-5 rounded-md">
<div class="side-nav mr-5 rounded-md overflow-scroll">
<el-input
class="mt-3 ml-5 w-4/5 mb-5"
v-model="searchKeyword"
placeholder="在目录中搜索..."></el-input>
<el-menu
@select="handleSelect"
:key="menuKey"
router
:unique-opened="true"
:default-active="activeMenu">
<span v-for="item in menuList" :key="item.path">
<el-submenu
v-if="item.children && item.children.length > 0"
:index="item.path">
<template slot="title">
<span>{{ item.name }}</span>
</template>
<el-menu-item
v-for="child in item.children"
:key="child.path"
:index="child.path">
<span>{{ child.name }}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="item.path" :index="item.path">
<span>{{ item.name }}</span>
</el-menu-item>
</span>
:default-active="$route.path"
:default-openeds="openedMenus">
<menu-item v-for="item in menuList" :key="item.id" :menu-item="item" />
</el-menu>
</div>
</template>
<script>
import MenuItem from './components/MenuItem.vue'
import { menuList } from './menuConfig.js'
export default {
name: 'sideNav',
components: {
MenuItem,
},
data() {
return {
searchKeyword: '',
activeMenu: '',
menuList: [
{
id: 1,
path: 'mustSee',
name: '入门必看',
children: [{ id: 11, path: 'beginner', name: '新手入门' }],
},
{
id: 2,
path: 'pic',
name: '图文教程',
children: [{ id: 21, path: 'base', name: '基础数据维护' }],
},
{ id: 3, path: 'video', name: '视频教程' },
// { id: 4, path: 'problem', name: '常见问题' },
// { id: 5, path: 'contact', name: '联系我们' },
],
menuList,
menuKey: 0,
}
},
mounted() {
this.syncMenuWithRoute()
},
watch: {
$route() {
this.syncMenuWithRoute()
'$route.path'() {
this.$nextTick(() => {
this.menuKey += 1
})
},
},
methods: {
syncMenuWithRoute() {
const path = this.$route && this.$route.path ? this.$route.path : ''
const match = path.match(/^\/help\/([^/]+)/)
const currentKey = match ? match[1] : ''
this.activeMenu = currentKey
},
handleSelect(key, keyPath) {
if (key === this.activeMenu) return
const names = []
for (const item of this.menuList) {
if (item.path === keyPath[0]) {
names.push({ name: item.name, path: item.path })
if (keyPath[1] && Array.isArray(item.children)) {
for (const child of item.children) {
if (child.path === keyPath[1]) {
names.push({ name: child.name, path: child.path })
break
}
}
}
break
}
}
// 使用 vuex 保存路径名称
this.$store.dispatch('path/setCurrentPathNames', names)
const target = keyPath[1] || keyPath[0]
this.$router.push(`/help/${target}`)
computed: {
// 需要展开的父级菜单
openedMenus() {
const id = this.$route.path.split('/').pop()
const result = Array.from(id).map((_, i) => id.slice(0, i + 1))
return result
},
},
}
......@@ -102,8 +50,8 @@ export default {
<style scoped lang="scss">
.side-nav {
background-color: #ffffff;
height: 100%;
width: 13%;
height: 90vh;
width: 15%;
}
::v-deep .el-input--mini .el-input__inner {
background-color: var(--background-color);
......
src/views/product/production.vue
......@@ -413,7 +413,7 @@
<!-- 九猫物流 -->
<div
v-else-if="activeTab === 'logistics'"
class="flex items-center justify-center bg-white lg:p-10 py-5 lg:w-3/5 w-full">
class="flex items-center justify-center bg-white lg:p-10 py-5 lg:w-3/5 w-full m-auto">
<img
class="erp-image"
src="../../assets/images/product/logistic/01.png"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment