Skip to content

A
apaas-ui
Commit 7be22da7 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

sdk中心

parent f4278363
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1172 additions and 211 deletions
src/components/doc-width-nav.vue 0 → 100644
View file @ 7be22da7
<template>
<div class="doc_width_nav">
<div class="part doc_part">
<h3 class="part_title">
<span>{{ title || "-" }}</span>
<span>更新时间：{{ time || "-" }}</span>
</h3>
<div
class="part_content doc_content apaas_scroll"
v-html="content"
ref="docContent"
></div>
</div>
<div class="part nav_part">
<h3 class="part_title">
<span>导航</span>
</h3>
<ul class="part_content nav_content apaas_scroll">
<li
v-for="(item, index) in navTree"
:class="[
'text_clip',
'level_' + item.level,
item.id === curNav ? ' current' : '',
]"
:key="index"
>
<a v-text="item.title" @click="clickNav(item)"></a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
richText: {
type: String,
defalut: "",
},
title: {
type: String,
defalut: "",
},
time: {
type: String,
defalut: "",
},
},
data() {
return {
content: "",
navTree: [],
curNav: "",
};
},
watch: {
richText() {
this.translate();
},
},
mounted() {
this.translate();
},
methods: {
translate() {
let content = this.richText;
let titles =
content.match(
/<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
) || [];
let time = new Date().getTime();
let pre_h1_index = 0;
let pre_h2_index = 0;
let pre_h3_index = 0;
let newTitles = titles
.map((title, index) => {
let newTitle = title;
let level = 0;
let id = "";
if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
pre_h1_index++;
pre_h2_index = 0;
pre_h3_index = 0;
level = 1;
id = `nav_${pre_h1_index}` + "_" + time;
newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
} else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
pre_h2_index++;
pre_h3_index = 0;
level = 2;
id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
} else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
pre_h3_index++;
level = 3;
id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
}
content = content.replace(new RegExp(title), newTitle);
return {
level,
id,
title: title.replace(/<\/?.+?>/g, ""),
};
})
.filter((item) => item.title);
this.content = content;
this.navTree = newTitles;
this.curNav = (newTitles[0] && newTitles[0].id) || "";
},
clickNav(item) {
let target = document.querySelector(`#${item.id}`);
this.setScroll(target, this.$refs.docContent);
this.curNav = item.id;
},
setScroll(el, parentEl) {
let actualTop = el.offsetTop;
let current = el.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
parentEl.scrollTop = actualTop - parentEl.offsetTop;
},
},
};
</script>
<style scoped>
.doc_width_nav {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.doc_width_nav > .part {
background-color: #fff;
border-radius: 10px;
padding-bottom: 20px;
box-sizing: border-box;
box-sizing: 0;
}
.doc_width_nav > .part + .part {
margin-left: 20px;
}
.doc_part {
flex-grow: 1;
}
.nav_part {
width: 270px;
flex-shrink: 0;
}
.part_title {
padding: 10px 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.part_title::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #e3e5ef;
}
.part_title > span:nth-child(1) {
font-size: 18px;
font-weight: bold;
line-height: 36px;
color: #58617a;
position: relative;
padding-left: 15px;
}
.part_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
left: 0;
}
.part_title > span:nth-child(2) {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
background-repeat: no-repeat;
background-position: left center;
}
.part_content {
height: calc(100% - 76px);
margin-top: 20px;
box-sizing: border-box;
overflow: auto;
}
.doc_content {
padding: 0 20px;
}
.nav_content {
padding-left: 20px;
}
.nav_content > li > a {
display: block;
height: 30px;
padding: 0 20px;
font-size: 14px;
line-height: 30px;
color: #58617a;
text-decoration: none;
cursor: pointer;
}
.nav_content > li.level_1 > a {
color: #242c43;
}
.nav_content > li.level_2 > a {
text-indent: 2em;
}
.nav_content > li.level_3 > a {
text-indent: 4em;
}
.nav_content > li.current > a {
background-color: #e6ebfe;
color: #515fe7;
}
</style>
src/pages/technical-support/answer-center/index.vue
View file @ 7be22da7
......@@ -145,6 +145,7 @@ export default {
font-size: 0;
}
.user_img > img {
width: 104px;
border-radius: 50%;
border: 2px solid #e3e5ef;
}
......
src/pages/technical-support/doc-manage/index.vue
View file @ 7be22da7
......@@ -23,11 +23,6 @@ export default {
data: () => ({
navList: [],
}),
watch: {
"$route.fullPath"(path) {
this.initNavList();
},
},
methods: {
initNavList() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
......
src/pages/technical-support/doc/detail.vue
View file @ 7be22da7
......@@ -14,51 +14,28 @@
</el-breadcrumb>
</div>
<div class="main_container">
<div class="part doc_part">
<h3 class="part_title">
<span>{{ title || typeText }}</span>
<span>更新时间：{{ update_time }}</span>
</h3>
<div
class="part_content doc_content apaas_scroll"
v-html="content"
ref="docContent"
></div>
</div>
<div class="part nav_part">
<h3 class="part_title">
<span>导航</span>
</h3>
<ul class="part_content nav_content apaas_scroll">
<li
v-for="(item, index) in navTree"
:class="[
'text_clip',
'level_' + item.level,
item.id === curNav ? ' current' : '',
]"
:key="index"
>
<a v-text="item.title" @click="clickNav(item)"></a>
</li>
</ul>
</div>
</div>
<doc-width-nav
class="main_container"
:title="title"
:time="update_time"
:rich-text="content"
></doc-width-nav>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import DocWidthNav from "@/components/doc-width-nav.vue";
export default {
components: {
DocWidthNav,
},
data() {
return {
title: "",
update_time: "",
content: "",
navTree: [],
curNav: "",
};
},
computed: {
......@@ -87,59 +64,6 @@ export default {
},
methods: {
getContent() {
let successCallback = (content) => {
let titles =
content.match(
/<h1(([\s\S])*?)<\/h1>|<h2(([\s\S])*?)<\/h2>|<h3(([\s\S])*?)<\/h3>/g
) || [];
let time = new Date().getTime();
let pre_h1_index = 0;
let pre_h2_index = 0;
let pre_h3_index = 0;
let newTitles = titles
.map((title, index) => {
let newTitle = title;
let level = 0;
let id = "";
if (title.match(/<h1(([\s\S])*?)<\/h1>/g)) {
pre_h1_index++;
pre_h2_index = 0;
pre_h3_index = 0;
level = 1;
id = `nav_${pre_h1_index}` + "_" + time;
newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
} else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
pre_h2_index++;
pre_h3_index = 0;
level = 2;
id = `nav_${pre_h1_index}_${pre_h2_index}` + "_" + time;
newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
} else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
pre_h3_index++;
level = 3;
id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}`;
newTitle = title.replace(/<h3/g, `<h3 id="${id}"`) + "_" + time;
}
content = content.replace(new RegExp(title), newTitle);
return {
level,
id,
title: title.replace(/<\/?.+?>/g, ""),
};
})
.filter((item) => item.title);
this.content = content;
this.navTree = newTitles;
this.curNav = (newTitles[0] && newTitles[0].id) || "";
};
this.$http
.get("/apaas/support/document/get", {
params: {
......@@ -152,7 +76,7 @@ export default {
this.update_time = this.getTimeText(data.data.updated);
if (data.data.content) {
successCallback(data.data.content);
this.content = data.data.content;
}
}
});
......@@ -160,23 +84,6 @@ export default {
getTimeText(time) {
return helper.dateStringTransform(time);
},
clickNav(item) {
let target = document.querySelector(`#${item.id}`);
this.setScroll(target, this.$refs.docContent);
this.curNav = item.id;
},
setScroll(el, parentEl) {
let actualTop = el.offsetTop;
let current = el.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
parentEl.scrollTop = actualTop - parentEl.offsetTop;
},
},
};
</script>
......@@ -189,102 +96,5 @@ export default {
}
.main_container {
height: calc(100% - 53px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.main_container > .part {
background-color: #fff;
border-radius: 10px;
padding-bottom: 20px;
box-sizing: border-box;
box-sizing: 0;
}
.main_container > .part + .part {
margin-left: 20px;
}
.doc_part {
flex-grow: 1;
}
.nav_part {
width: 270px;
flex-shrink: 0;
}
.part_title {
padding: 10px 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.part_title::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #e3e5ef;
}
.part_title > span:nth-child(1) {
font-size: 18px;
font-weight: bold;
line-height: 36px;
color: #58617a;
position: relative;
padding-left: 15px;
}
.part_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
left: 0;
}
.part_title > span:nth-child(2) {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-image: url("../../../assets/imgs/shop_ic_updatetime.png");
background-repeat: no-repeat;
background-position: left center;
}
.part_content {
height: calc(100% - 76px);
margin-top: 20px;
box-sizing: border-box;
overflow: auto;
}
.doc_content {
padding: 0 20px;
}
.nav_content {
padding-left: 20px;
}
.nav_content > li > a {
display: block;
height: 30px;
padding: 0 20px;
font-size: 14px;
line-height: 30px;
color: #58617a;
text-decoration: none;
cursor: pointer;
}
.nav_content > li.level_1 > a {
color: #242c43;
}
.nav_content > li.level_2 > a {
text-indent: 2em;
}
.nav_content > li.level_3 > a {
text-indent: 4em;
}
.nav_content > li.current > a {
background-color: #e6ebfe;
color: #515fe7;
}
</style>
src/pages/technical-support/sdk-manage/index.vue 0 → 100644
View file @ 7be22da7
<template>
<div class="doc_container">
<side-nav-bar
title="SDK管理"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
style="width: 200px;"
></side-nav-bar>
<div class="main_container">
<router-view />
</div>
</div>
</template>
<script>
import sideNavBar from "@/components/side-nav-bar";
export default {
components: {
sideNavBar,
},
data: () => ({
navList: [],
}),
methods: {
initNavList() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) {
let arr = response.data.data[0].Child;
for (let i = 0; i < arr.length; i++) {
let first = arr[i];
if (first.visit_url == "/technical_support") {
for (let j = 0; j < first.Child.length; j++) {
let second = first.Child[j];
if (second.visit_url == "/technical_support/sdk_manage") {
this.navList = second.Child.map((item) => ({
name: item.menu_name,
path: item.visit_url,
}));
break;
}
}
break;
}
}
}
});
},
},
mounted() {
this.initNavList();
},
};
</script>
<style scoped>
.doc_container {
height: calc(100vh - 58px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.side_nav_bar {
width: 180px;
flex-shrink: 0;
}
.main_container {
width: calc(100% - 180px);
flex-grow: 1;
flex-shrink: 1;
background-color: #f6f7fb;
overflow: auto;
}
</style>
src/pages/technical-support/sdk-manage/list.vue 0 → 100644
View file @ 7be22da7
This diff is collapsed.
src/pages/technical-support/sdk-manage/type/index.vue 0 → 100644
View file @ 7be22da7
<template>
<div class="doc_manage_container">
<apass-list
ref="list"
search-placeholder="请输入关键字"
:list-padding-left="paddingLeft"
:hide-search="true"
:list-total="listTotal"
:list-header="listHeader"
:list-data="listData"
@list-action="init"
>
<el-breadcrumb separator="/" slot="breadcrumb">
<el-breadcrumb-item to="/technical_support">
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc_manage">
SDK管理
</el-breadcrumb-item>
<el-breadcrumb-item>
SDK类型管理
</el-breadcrumb-item>
</el-breadcrumb>
<template slot="top">
<div class="top_fliter">
<show-more-filter class="filter_list">
<div class="filter_item">
<span class="filter_title">SDK类型：</span>
<el-select v-model="topFilter.type" placeholder="请选择">
<el-option label="全部" value=""></el-option>
<el-option
v-for="(item, index) in types"
:key="'top_type_' + index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">最后更新时间：</span>
<el-date-picker
v-model="topFilter.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</show-more-filter>
<div class="filter_action apaas_button">
<el-button type="primary" @click="topFilterAction">
查询
</el-button>
<el-button type="defalut" @click="topFilterClear">
重置
</el-button>
</div>
</div>
</template>
</apass-list>
</div>
</template>
<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default {
components: {
apassList,
apassDialog,
showMoreFilter,
},
data() {
return {
paddingLeft: 25,
listTotal: 0,
listHeader: [],
listData: [],
topFilter: {
type: "",
time: "",
},
types: [],
tempFilter: {},
};
},
methods: {
init(filter) {
let fullFilter = {
...filter,
...this.topFilter,
};
this.tempFilter = filter;
console.log(fullFilter);
},
topFilterClear() {
this.topFilter = {
name: "",
type: "",
time: "",
};
this.refreshPage();
},
topFilterAction() {
this.refreshPage();
},
refreshPage() {
this.$refs.list.resetCurrentPage();
},
},
};
</script>
src/pages/technical-support/sdk/detail.vue 0 → 100644
View file @ 7be22da7
This diff is collapsed.
src/pages/technical-support/sdk/index.vue 0 → 100644
View file @ 7be22da7
<template>
<div class="page_container">
<side-nav-bar
title="SDK中心"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="navList[0] && navList[0].path"
style="width: 250px;"
></side-nav-bar>
<div class="main_container">
<router-view :key="$route.params.type + $route.params.id" />
</div>
</div>
</template>
<script>
import sideNavBar from "@/components/side-nav-bar";
export default {
components: {
sideNavBar,
},
data: () => ({
navList: [],
}),
methods: {
initNavList() {
let activePath = "";
let baseUrl = "/technical_support/sdk";
let data = [
{
name: "JavaScript SDK",
id: 1,
children: [
{
name: "在地图上添加图层",
id: 101,
},
{
name: "测测测自己创建测",
id: 102,
},
],
},
{
name: "Android SDK",
id: 2,
children: [
{
name: "Android",
id: 201,
},
{
name: "测测测自己创建测",
id: 202,
},
],
},
];
this.navList = data.map((item) => {
let children = item.children;
let nav = {
name: item.name,
path: `${baseUrl}/${item.name}`,
};
if (children.length > 0) {
nav.children = children.map((v) => {
let path = `${baseUrl}/${item.name}/${v.id}`;
if (activePath === "") {
activePath = path;
}
return {
name: v.name,
path: path,
};
});
nav.open = true;
} else {
nav.disabled = true;
}
return nav;
});
if (activePath && this.$route.params.id === undefined) {
this.$router.push(activePath);
} else if (activePath === "") {
this.$message.error("您尚未创建任何SDK文档");
}
},
},
mounted() {
this.initNavList();
},
};
</script>
<style scoped>
.page_container {
height: calc(100vh - 58px);
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.side_nav_bar {
width: 180px;
flex-shrink: 0;
}
.main_container {
width: calc(100% - 180px);
flex-grow: 1;
flex-shrink: 1;
background-color: #f6f7fb;
overflow: auto;
}
</style>
src/router/index.js
View file @ 7be22da7
......@@ -167,7 +167,8 @@ export default new Router({
path: "/technical_support/doc_manage",
name: "technicalSupportDoc",
redirect: "/technical_support/doc_manage/list",
component: () => import("@/pages/technical-support/doc-manage/index"),
component: () =>
import("@/pages/technical-support/doc-manage/index"),
children: [
{
path: "/technical_support/doc_manage/list",
......@@ -201,7 +202,8 @@ export default new Router({
path: "/technical_support/answer_center/",
name: "technicalSupportDoc",
redirect: "/technical_support/answer_center/list",
component: () => import("@/pages/technical-support/answer-center/index"),
component: () =>
import("@/pages/technical-support/answer-center/index"),
children: [
{
path: "/technical_support/answer_center/list",
......@@ -220,6 +222,18 @@ export default new Router({
}, // 问答中心详情
],
}, // 问答中心
{
path: "/technical_support/sdk",
name: "technicalSupportSdk",
component: () => import("@/pages/technical-support/sdk/index"),
children: [
{
path: "/technical_support/sdk/:type/:id",
name: "technicalSupportSdkDetail",
component: () => import("@/pages/technical-support/sdk/detail"),
}, // 问答中心列表
],
}, // 问答中心
],
}, // 技术支持
{
......@@ -448,14 +462,16 @@ export default new Router({
{
path: "/qa/questions", // 提问列表
name: "questions",
component: () => import("@/pages/user/questions-answers/community"),
component: () =>
import("@/pages/user/questions-answers/community"),
},
{
path: "/qa/answers", // 回答列表
name: "answers",
component: () => import("@/pages/user/questions-answers/community"),
component: () =>
import("@/pages/user/questions-answers/community"),
},
]
],
},
{
path: "/authority", // 权限管理
......
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