udxcms 1.0.9 → 1.0.10

package/dist/components/cmsComponents/api/DocMain.vue

@@ -1,506 +0,0 @@
-<template>
-	<div class="api-component">
-		<div class="bread-wrapper">
-			<div class="icon-mobile-menu" @click="showMobileMenu">
-				<img
-					class="list-icon-img"
-					src="../../../assets/img/wiki/icon_fi_list.png"
-					alt=""
-				/>
-			</div>
-			<div separator="">
-				<div v-for="(item, index) in bread" :key="index">
-					{{ item.name }}
-				</div>
-			</div>
-		</div>
-		<div class="api-wrapper" :style="cssVar">
-			<a-drawer
-				wrapClassName="api-drawer"
-				width="300"
-				placement="left"
-				:zIndex="2000"
-				:visible="mobileMenu"
-				:headerStyle="{ padding: '0px' }"
-				:bodyStyle="{ padding: '8px' }"
-				@close="showMobileMenu"
-                v-model="currentPro"
-			>
-				<a-menu
-					:default-selected-keys="['1']"
-					:open-keys.sync="openKeys"
-					mode="inline"
-					class="api-menu"
-					:style="`top:${sideTop}px; height: calc(100vh - ${sideTop}px);`"
-					:inlineIndent="12"
-					@click="onMenuClick"
-				>
-                    <a-sub-menu v-for="doc in docList" :key="'doc_' + doc.id">
-                        <span slot="title">
-                            <span>{{ doc.name }}</span>
-                        </span>
-                        <a-sub-menu v-for="cat in doc.list" :key="'cat_' + cat.id">
-                            <span slot="title">
-                                <span>{{ cat.title }}</span>
-                            </span>
-                            <a-menu-item
-                                v-for="article in cat.content"
-                                :key="article.id"
-                            >
-                                {{ article.title }}<span v-if="article.link" :class="['http-method', article.link.toLowerCase()]">{{ article.link }}</span>
-                            </a-menu-item>
-                        </a-sub-menu>
-                    </a-sub-menu>
-				</a-menu>
-			</a-drawer>
-			<div class="menu-wrapper">
-                <!-- v-model="currentPro" -->
-				<a-menu
-					:default-selected-keys="['1']"
-					:open-keys.sync="openKeys"
-					mode="inline"
-					class="api-menu"
-					:style="`top:${sideTop}px; height: calc(100vh - ${sideTop}px);`"
-					:inlineIndent="12"
-					@click="onMenuClick"
-                    v-model="currentPro"
-
-				>
-                    <a-sub-menu v-for="doc in docList" :key="'doc_' + doc.id">
-                        <span slot="title">
-                            <span>{{ doc.name }}</span>
-                        </span>
-                        <a-sub-menu v-for="cat in doc.list" :key="'cat_' + cat.id">
-                            <span slot="title">
-                                <span>{{ cat.title }}</span>
-                            </span>
-                            <a-menu-item
-                                v-for="article in cat.content"
-                                :key="article.id"
-                            >
-                                {{ article.title }}<span v-if="article.link" :class="['http-method', article.link.toLowerCase()]">{{ article.link }}</span>
-                            </a-menu-item>
-                        </a-sub-menu>
-                    </a-sub-menu>
-				</a-menu>
-			</div>
-			<div class="api-article">
-				<div v-for="article in articleList" :key="article.id" class="article-item" v-show="openKeys.includes('cat_' + article.type)">
-					<div class="api-content">
-						<a :id="'id_' + article.id" :name="'id_' + article.id"></a>
-						<h1>
-							{{ article.title }}
-							<span v-if="article.link" :class="['http-method', article.link.toLowerCase()]">{{ article.link }}</span>
-						</h1>
-						<div
-							class="md-content markdown-typora"
-							ref="md-content"
-							v-html="article.descriptionHtml"
-						></div>
-					</div>
-					<div :class="['api-code', {'empty': !article.example}]">
-						<div class="md-content markdown-typora md-code" v-html="article.exampleHtml"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<a-back-top />
-	</div>
-</template>
-
-<script>
-import Vue from "vue";
-import { Drawer, BackTop } from "ant-design-vue";
-import marked from "./../wiki/demo/marked";
-// import { marked } from 'marked'
-import hljs from "./../wiki/lib/highlight/lib/index.js"; // 引入 highlight.js
-import "./../wiki/lib/highlight/styles/vs2015.css"; // 引入高亮样式
-
-import katex from "./../wiki/lib/katex/katex.min.js";
-import "./../wiki/lib/katex/katex.min.css";
-import { isMobile } from './../../../utils/index'
-
-Vue.use(Drawer).use(BackTop);
-
-// 代码高亮
-marked.setOptions({
-	gfm: true,
-	breaks: true,
-	latexRender: katex.renderToString.bind(katex),
-	// langPrefix: 'hljs language-',
-	highlight: function(code) {
-		return hljs.highlightAuto(code).value;
-	},
-});
-
-// 测试 markdown
-import testMD from "./test.js";
-import codeContent from "./code.js";
-
-export default {
-	name: "ApiMain",
-	props: {
-		docList: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			bread: [
-				{
-					path: "/api",
-					name: this.$t("cms_api_common_api_value"),
-				},
-				{
-					path: "",
-					name: "",
-				},
-			],
-
-			openKeys: [],
-            currentPro: [],
-			articleContent: "",
-			codeContent: "",
-      		sideTop: 0,
-			mobileMenu: false,
-			isMobile: isMobile()
-		};
-	},
-	computed: {
-		// openKeys() {
-		// 	return this.list.map(item => 'cat_'+ item.id);
-		// },
-		cssVar() {
-			const barWidth = (window.innerWidth - document.body.clientWidth) || 15;
-			return {
-				"--bar-width": barWidth + "px",
-			};
-		},
-		articleList() {
-			let result = [];
-            this.docList.map(v => {
-                v.list.forEach(item => {
-                    result = result.concat(item.content.map(article => {
-                        article.descriptionHtml = marked
-                            .parse(article.description || '')
-                            .replace(/<pre>/g, "<pre class='hljs'>").replace(/\$\{site_name\}/g, this.$t("site_common_site_name"));
-                        article.exampleHtml = marked
-                            .parse(article.example || '')
-                            .replace(/<pre>/g, "<pre class='hljs'>").replace(/\$\{site_name\}/g, this.$t("site_common_site_name"));
-                        return article;
-                    }))
-                })
-            })
-
-			return result;
-		},
-	},
-	mounted() {
-		this.formatData();
-		this.initDom();
-    	window.addEventListener("scroll", this.handleScroll, true);
-	},
-	methods: {
-		showMobileMenu() {
-			this.mobileMenu = !this.mobileMenu;
-		},
-		formatData() {
-			this.docList.forEach((item, i) => {
-                if (!i) {
-                    this.openKeys.push("doc_" + item.id);
-                    this.currentPro.push("doc_" + item.id);
-                    item.list.forEach((listItem, first) => {
-                        if (!first) {
-                            this.openKeys.push("cat_" + listItem.id);
-                        }
-                    })
-                }
-			});
-		},
-		onMenuClick(e) {
-      		console.log('click', e);
-
-			this.mobileMenu = false;
-
-			const articleId = e.keyPath[0];
-			const el = document.querySelector("#id_"+ articleId);
-
-			window.scrollTo({
-				top: el.offsetTop - (this.isMobile ? 108 : 60),
-				behavior: "smooth",
-			});
-			// if (el) {
-			// 	el.scrollIntoView({
-			// 		behavior: 'smooth',
-			// 		block: 'start',
-			// 		// inline: 'center'
-			// 	});
-			// }
-		},
-		initDom() {
-			let mdtext = testMD;
-			this.articleContent = marked
-				.parse(mdtext)
-				.replace(/<pre>/g, "<pre class='hljs'>");
-
-			this.codeContent = marked
-				.parse(codeContent)
-				.replace(/<pre>/g, "<pre class='hljs'>");
-		},
-
-		handleScroll() {
-			const scrollY = window.scrollY;
-			// TODO
-			this.sideTop = scrollY > 500 ? 70 : 0;
-		},
-	},
-};
-</script>
-
-<style lang="less">
-.api-menu {
-	a{
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.ant-menu-submenu-active,
-	.ant-menu-submenu-open {
-		border-radius: 6px !important;
-	}
-	.ant-menu-item:hover,
-	.ant-menu-item-active,
-	.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
-	.ant-menu-submenu-active,
-	.ant-menu-submenu-title:hover {
-		color: inherit;
-		background: var(--doc-menu-select-bg-color) !important;
-	}
-
-	.ant-menu-item,
-	.ant-menu-submenu-title {
-		font-size: 16px;
-		height: 36px !important;
-		line-height: 36px !important;
-		padding-left: 12px !important;
-		border-radius: 6px;
-		margin: 0 !important;
-	}
-
-	.ant-menu-submenu .ant-menu-sub {
-		padding-left: 12px;
-	}
-	.ant-menu-submenu-selected,
-	.ant-menu-item-selected {
-		color: var(--primary-color) !important;
-		background-color: transparent;
-		&::after{
-			display: none;
-		}
-	}
-}
-.api-menu, .api-component {
-
-	.http-method{
-		margin-left: 8px;
-		font-size: 14px;
-	}
-	.http-method.put {
-		color: #7E57C2
-	}
-	.http-method.delete {
-		color: #FF7043
-	}
-	.http-method.get {
-		color: #66BB6A
-	}
-	.http-method.post {
-		color: #42A5F5
-	}
-}
-.api-drawer{
-	.api-menu{
-		border-right: none;
-		margin-top: 56px;
-	}
-}
-.api-component {
-	// max-width: 1400px;
-	// width: 1300px;
-	margin-left: auto;
-	margin-right: auto;
-
-	.bread-wrapper {
-		min-height: 52px;
-		padding: 14px 20px;
-		display: flex;
-		align-items: center;
-		position: sticky;
-		top: 56px;
-        background-color: var(--highlight-bg-color);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-		.icon-mobile-menu{
-			margin-right: 20px;
-		}
-		.ivu-breadcrumb {
-			color: var(--text-color);
-		}
-	}
-	.api-wrapper {
-		.menu-wrapper {
-			padding-left: 20px;
-			display: none;
-		}
-		.api-article{
-			// background-color: #eee;
-			overflow: hidden;
-		}
-		.article-item {
-			width: calc(100vw);
-			// display: grid;
-			// grid-template-columns: @content-width @code-width;
-		}
-		.api-content{
-			border-bottom: 1px solid #eee;
-			padding: 20px;
-			h1{
-				margin-top: 20px;
-				margin-bottom: 30px;
-				.http-method{
-					margin-left: 8px;
-					font-size: 18px;
-				}
-			}
-		}
-		.api-code {
-			padding: 20px;
-			color: #fff;
-			background-color: #333;
-			border-bottom: 1px solid rgba(238, 238, 238, 0.2);
-			&.empty{
-				display: none;
-			}
-		}
-	}
-
-	.api-menu {
-		padding-right: 20px;
-		position: sticky;
-		overflow-y: scroll;
-	}
-
-	.md-content {
-    	line-height: 1.68;
-		// margin: 40px;
-		pre.hljs {
-			padding: 0px;
-		}
-		pre.hljs code {
-			display: block;
-			overflow-x: auto;
-			// max-height: 500px;
-			padding: 10px;
-			background-color: #1e1e1e;
-		}
-		.table-wrapper{
-			max-width: 100%;
-			overflow: auto;
-		}
-		.language-http{
-			color: #fff !important;
-			span{
-				color: #fff !important;
-			}
-		}
-	}
-
-	.md-code {
-		code {
-			white-space: pre-wrap;
-			// word-break: break-all;
-		}
-	}
-	.api-content {
-		// ::-webkit-scrollbar {
-		// 	width: 8px;
-		// 	height: 20px;
-		//     background-color: #777;
-		// }
-
-		// ::-webkit-scrollbar-thumb {
-		// 	border-radius: 8px;
-		// 	height: 10px;
-		// 	padding: 2px;
-		// 	box-shadow: inset 0 0 2px rgba(0,0,0,.2);
-		// 	background-color: #999;
-		// 	margin: 5px;
-		// }
-		// ::-webkit-scrollbar-track {
-		// 	height: 10px;
-		// 	background-color: #555;
-		// 	// background-color: transparent;
-		// 	padding: 4px;
-		// }
-		// ::-webkit-scrollbar,
-		// ::-webkit-scrollbar-track {
-		// 	background-color: transparent;
-		// 	padding: 4px;
-		// }
-	}
-}
-
-@media screen and (min-width: 768px) {
-@bar-width: var(--bar-width);
-@exclude-menu: calc(100vw - 320px - @bar-width);
-.api-component {
-	.bread-wrapper {
-		position: relative;
-		top: 0;
-		box-shadow: none;
-		.icon-mobile-menu{
-			display: none;
-		}
-	}
-	.api-wrapper {
-		display: grid;
-		grid-template-columns: 320px @exclude-menu;
-		.menu-wrapper {
-			display: block;
-		}
-		.article-item {
-			width: @exclude-menu;
-		}
-	}
-}
-}
-@media screen and (min-width: 1200px) {
-
-@menu-width: 320px;
-@bar-width: var(--bar-width);
-@exclude-menu: calc(100vw - 320px - @bar-width);
-@content-width: calc(@exclude-menu * 1 / 1.7);
-@code-width: calc(@exclude-menu * 0.7 / 1.7);
-.api-component {
-	.api-wrapper {
-		.article-item {
-			display: grid;
-			grid-template-columns: @content-width @code-width;
-		}
-		.api-content, .api-code{
-			padding: 40px;
-		}
-		.api-code{
-			&.empty{
-				display: block;
-			}
-		}
-
-	}
-	.ant-back-top-content{
-		background-color: rgba(255, 255, 255, 0.45);
-	}
-}
-}
-</style>