测试wiki的移动端展示

zyplayer-doc-ui/wiki-ui/src/components/layouts/ShareMobileLayout.vue

@@ -1,38 +1,73 @@
 <template>
 	<div style="height: 100%;">
-		<el-container>
+		<nut-icon type="top"></nut-icon>
-			<el-aside width="300px" style="background-color: #fafafa;" v-show="leftCollapse">
+		<nut-popup position="left" v-model="popupShow" :style="{ height: '100%', width: '80%' }">
-				<div class="logo">{{nowSpaceShow.name}}</div>
+			<nut-sidenavbar>
-				<div style="padding: 10px;box-sizing: border-box;background: #fafafa;">
+				<nut-sidenavbar>
-					<el-input v-model="searchKeywords" @keyup.enter.native="searchByKeywords" placeholder="搜索文档" style="margin: 10px 0;">
+					<nut-sidenavbaritem ikey="1" title="人脸识别"></nut-sidenavbaritem>
-						<el-button slot="append" icon="el-icon-search" v-on:click="searchByKeywords"></el-button>
+					<nut-sidenavbaritem ikey="2" title="云存自然语言处理"></nut-sidenavbaritem>
-					</el-input>
+					<nut-subsidenavbar title="图像理解" ikey="3" :open="false">
-					<el-tree :props="defaultProps" :data="wikiPageList" @node-click="handleNodeClick"
+						<nut-sidenavbaritem ikey="4" title="菜品识别"></nut-sidenavbaritem>
-							 ref="wikiPageTree" :filter-node-method="filterPageNode" highlight-current
+						<nut-sidenavbaritem ikey="5" title="拍照购"></nut-sidenavbaritem>
-							 :expand-on-click-node="false" :default-expanded-keys="wikiPageExpandedKeys"
+					</nut-subsidenavbar>
-							 node-key="id"
+					<nut-sidenavbaritem ikey="313" title="人脸识别"></nut-sidenavbaritem>
-							 style="background-color: #fafafa;padding-bottom: 30px;">
+					<nut-sidenavbaritem ikey="3232" title="云存自然语言处理"></nut-sidenavbaritem>
-					</el-tree>
+					<nut-subsidenavbar title="智能城市AI" ikey="6">
-					<!--请手下留情，别删我(╥╯^╰╥)，给我一个露脸的机会，我长的不碍眼的-->
+						<nut-sidenavbaritem ikey="7" title="企业风险预警模型"></nut-sidenavbaritem>
-					<div class="build-info">本文档使用<a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a>构建</div>
+						<nut-sidenavbaritem ikey="8" title="水质量检测"></nut-sidenavbaritem>
-				</div>
+						<nut-subsidenavbar title="人体识别" ikey="9">
-			</el-aside>
+							<nut-sidenavbaritem ikey="10" title="人体检测"></nut-sidenavbaritem>
-			<el-container>
+							<nut-sidenavbaritem ikey="11" title="细粒度人像分割"></nut-sidenavbaritem>
-				<el-main class="doc-body-box">
+						</nut-subsidenavbar>
-					<router-view></router-view>
+					</nut-subsidenavbar>
-				</el-main>
+					<nut-subsidenavbar title="自然语言处理" ikey="12">
-			</el-container>
+						<nut-sidenavbaritem ikey="13" title="词法分析"></nut-sidenavbaritem>
-		</el-container>
+						<nut-sidenavbaritem ikey="14" title="句法分析"></nut-sidenavbaritem>
+					</nut-subsidenavbar>
+				</nut-sidenavbar>
+<!--				<nut-sidenavbaritem data-v-7bf5e136="" ikey="1" title="关于zyplayer-doc工具"></nut-sidenavbaritem>-->
+<!--				<nut-subsidenavbar data-v-7bf5e136="" title="dsadadsadas" ikey="16">-->
+<!--					<nut-sidenavbaritem data-v-7bf5e136="" ikey="17" title="dsadasd"></nut-sidenavbaritem>-->
+<!--				</nut-subsidenavbar>-->
+<!--				<nut-sidenavbaritem data-v-7bf5e136="" ikey="2" title="开发规划"></nut-sidenavbaritem>-->
+<!--				<nut-sidenavbaritem data-v-7bf5e136="" ikey="3" title="升级日志"></nut-sidenavbaritem>-->
+<!--				<nut-sidenavbaritem data-v-7bf5e136="" ikey="4" title="贡献人员列表"></nut-sidenavbaritem>-->
+<!--				<nut-subsidenavbar data-v-7bf5e136="" title="xx" ikey="8">-->
+<!--					<nut-sidenavbaritem data-v-7bf5e136="" ikey="9" title="xxxxx"></nut-sidenavbaritem>-->
+<!--				</nut-subsidenavbar>-->
+<!--				<nut-subsidenavbar data-v-7bf5e136="" title="zyplayer-doc-swagger" ikey="5">-->
+<!--					<nut-sidenavbaritem data-v-7bf5e136="" ikey="6" title="如何使用"></nut-sidenavbaritem>-->
+<!--					<nut-sidenavbaritem data-v-7bf5e136="" ikey="11" title="发发沙发沙发是否"></nut-sidenavbaritem>-->
+<!--				</nut-subsidenavbar>-->
+				<!--				<template v-for="page in wikiPageList">-->
+<!--					<nut-sidenavbaritem1 :ikey="page.id" :title="page.name" v-if="!page.children"></nut-sidenavbaritem1>-->
+<!--					<nut-subsidenavbar1 :title="page.name" :ikey="page.id" v-else>-->
+<!--						<template v-for="page1 in page.children">-->
+<!--							<nut-sidenavbaritem1 :ikey="page1.id" :title="page1.name" v-if="!page1.children"></nut-sidenavbaritem1>-->
+<!--							<nut-subsidenavbar1 :title="page1.name" :ikey="page1.id" v-else>-->
+<!--								<template v-for="page2 in page1.children">-->
+<!--									<nut-sidenavbaritem1 :ikey="page2.id" :title="page2.name" v-if="!page2.children"></nut-sidenavbaritem1>-->
+<!--								</template>-->
+<!--							</nut-subsidenavbar1>-->
+<!--						</template>-->
+<!--					</nut-subsidenavbar1>-->
+<!--				</template>-->
+			</nut-sidenavbar>
+		</nut-popup>
+		<router-view @popupShow="popupShowChange"></router-view>
 	</div>
 </template>
 
 <script>
+	import Vue from 'vue';
 	import pageApi from '../../common/api/page'
+	import NutUI from '@nutui/nutui';
+	import '@nutui/nutui/dist/nutui.css';
+	NutUI.install(Vue);
 
 	export default {
 		data() {
 			return {
-				leftCollapse: true,
 				defaultProps: {
 					children: 'children',
 					label: 'name'
@@ -46,8 +81,11 @@
 				// 页面展示相关
 				wikiPageList:[],
 				wikiPageExpandedKeys: [],
+				popupShow: true,
 			}
 		},
+		components: {
+		},
 		mounted: function () {
 			this.spaceUuid = this.$route.query.space || '';
 			this.getSpaceInfo();
@@ -58,6 +96,9 @@
 				if (!value) return true;
 				return data.name.indexOf(value) !== -1;
 			},
+			popupShowChange(value) {
+				this.popupShow = value;
+			},
 			handleNodeClick(data) {
 				if (this.nowPageId == data.id) {
 					return;

zyplayer-doc-ui/wiki-ui/src/routes.js

@@ -1,5 +1,6 @@
 import GlobalLayout from './components/layouts/GlobalLayout'
 import ShareLayout from './components/layouts/ShareLayout'
+import ShareMobileLayout from './components/layouts/ShareMobileLayout'
 
 let routes = [
 	{path: '/', redirect: '/home'},
@@ -27,6 +28,14 @@ let routes = [
 			{path: '/page/share/view', name: 'WIKI-内容展示', component: () => import('@/views/page/share/pc/View')},
 		]
 	},
+	{
+		path: '/',
+		name: '页面管理',
+		component: ShareMobileLayout,
+		children: [
+			{path: '/page/share/mobile/home', name: 'WIKI-开放文档', component: () => import('@/views/page/share/mobile/Home')},
+		]
+	},
 ];
 
 export default routes;

zyplayer-doc-ui/wiki-ui/src/views/page/share/mobile/Home.vue

@@ -1,10 +1,15 @@
 <template>
 	<div style="padding: 10px;" class="page-share-home-vue">
+		<nut-button @click="popupShowChange">测试</nut-button>
 	</div>
 </template>
 
 <script>
-	import pageApi from '../../../../common/api/page'
+	import pageApi from '../../../../common/api/page';
+	import Button from '@nutui/nutui/dist/packages/button/button.js';
+	import '@nutui/nutui/dist/packages/button/button.css';
+	import Popup from '@nutui/nutui/dist/packages/popup/popup.js';
+	import '@nutui/nutui/dist/packages/popup/popup.css';
 
 	export default {
 		data() {
@@ -19,6 +24,10 @@
 				spacePageNews: [],
 			};
 		},
+		components: {
+			'nut-button': Button,
+			'nut-popup': Popup,
+		},
 		beforeRouteUpdate(to, from, next) {
 			this.initQueryParam(to);
 			next();
@@ -27,6 +36,9 @@
 			this.initQueryParam(this.$route);
 		},
 		methods: {
+			popupShowChange() {
+				this.$emit("popupShow", true);
+			},
 			getSpacePageNews() {
 				pageApi.openPageNews(this.searchParam).then(json => {
 					this.spacePageNews = json.data || [];