测试升级为vue3

zyplayer-doc-ui/wiki-ui-2/src/components/layouts/ShareLayout.vue

@@ -0,0 +1,228 @@
+<template>
+  <div style="height: 100%">
+    <el-container>
+      <el-aside
+        width="300px"
+        style="background-color: #fafafa"
+        :style="{ width: rightAsideWidth + 'px' }"
+        v-show="leftCollapse"
+      >
+        <div class="logo">{{ nowSpaceShow.name }}</div>
+        <div style="padding: 10px; box-sizing: border-box; background: #fafafa">
+          <el-input
+            v-model="searchKeywords"
+            @keyup.enter="searchByKeywords"
+            placeholder="搜索文档"
+            style="margin: 10px 0"
+          >
+            <template v-slot:append>
+              <el-button
+                :icon="ElIconSearch"
+                v-on:click="searchByKeywords"
+              ></el-button>
+            </template>
+          </el-input>
+          <el-tree
+            :props="defaultProps"
+            :data="wikiPageList"
+            @node-click="handleNodeClick"
+            ref="wikiPageTree"
+            :filter-node-method="filterPageNode"
+            highlight-current
+            :expand-on-click-node="false"
+            :default-expanded-keys="wikiPageExpandedKeys"
+            node-key="id"
+            style="background-color: #fafafa; padding-bottom: 30px"
+          >
+            <template v-slot="{ node, data }">
+              <span style="font-size: 14px">
+                <el-icon><el-icon-document /></el-icon>&nbsp;
+                <span>{{ node.label }}</span>
+              </span>
+            </template>
+          </el-tree>
+          <!--请手下留情，别删我(╥╯^╰╥)，给我一个露脸的机会，我长的不碍眼的-->
+          <div class="build-info">
+            本文档使用<a
+              target="_blank"
+              href="https://gitee.com/zyplayer/zyplayer-doc"
+              >zyplayer-doc</a
+            >构建
+          </div>
+        </div>
+      </el-aside>
+      <RightResize
+        v-model:value="rightAsideWidth"
+        v-show="leftCollapse"
+      ></RightResize>
+      <el-container>
+        <el-main class="doc-body-box">
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import {
+  Document as ElIconDocument,
+  Search as ElIconSearch,
+} from '@element-plus/icons-vue'
+import pageApi from '../../common/api/page'
+import RightResize from './RightResize.vue'
+
+export default {
+  data() {
+    return {
+      leftCollapse: true,
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+      },
+      // 空间搜索相关
+      spaceUuid: '',
+      nowPageId: '',
+      nowSpaceShow: {},
+      // 搜索的输入内容
+      searchKeywords: '',
+      // 页面展示相关
+      wikiPageList: [],
+      wikiPageExpandedKeys: [],
+      rightAsideWidth: 300,
+      ElIconSearch,
+    }
+  },
+  components: {
+    RightResize,
+    ElIconDocument,
+  },
+  mounted: function () {
+    this.spaceUuid = this.$route.query.space || ''
+    this.getSpaceInfo()
+    this.doGetPageList(null)
+  },
+  methods: {
+    filterPageNode(value, data) {
+      if (!value || !data.name) return true
+      // issues:I2CG72 忽略大小写
+      let name = data.name.toLowerCase()
+      return name.indexOf(value.toLowerCase()) !== -1
+    },
+    handleNodeClick(data) {
+      if (this.nowPageId == data.id) {
+        return
+      }
+      console.log('点击节点：', data)
+      this.nowPageId = data.id
+      this.$router.push({
+        path: '/page/share/view',
+        query: { pageId: data.id, space: this.spaceUuid },
+      })
+    },
+    searchByKeywords() {
+      this.$refs.wikiPageTree.filter(this.searchKeywords)
+    },
+    doGetPageList() {
+      pageApi.openPageList({ space: this.spaceUuid }).then((json) => {
+        this.wikiPageList = json.data || []
+        this.nowPageId = ''
+      })
+    },
+    getSpaceInfo() {
+      pageApi.openSpaceInfo({ space: this.spaceUuid }).then((json) => {
+        this.nowSpaceShow = json.data
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 14px;
+  font-family: auto;
+}
+.el-menu {
+  box-sizing: border-box;
+  border-right: 0;
+  margin-right: 3px;
+}
+.el-header {
+  background-color: #409eff;
+  color: #333;
+  line-height: 40px;
+  text-align: right;
+  height: 40px !important;
+}
+.doc-body-box {
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+  padding: 10px;
+  border-left: 1px solid #f1f1f1;
+  box-sizing: border-box;
+}
+.el-tree {
+  margin-right: 3px;
+}
+.logo {
+  border-bottom: 1px solid #f1f1f1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 5px 10px;
+  width: 260px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 25px;
+  color: #666;
+  text-align: center;
+}
+.icon-collapse {
+  float: left;
+  font-size: 25px;
+  color: #aaa;
+  cursor: pointer;
+  position: fixed;
+}
+.icon-collapse:hover {
+  color: #ccc;
+}
+.comment-box .head {
+  float: left;
+  background-color: #ccc;
+  border-radius: 50%;
+  margin-right: 10px;
+  width: 45px;
+  height: 45px;
+  line-height: 45px;
+  text-align: center;
+  color: #fff;
+}
+.build-info {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: #fafafa;
+  width: 240px;
+  text-align: center;
+  padding: 5px 0;
+  color: #aaa;
+  font-size: 12px;
+}
+.build-info a {
+  color: #4183c4;
+  cursor: pointer;
+  text-decoration: none;
+}
+</style>