udxcms 1.0.1

package/dist/components/cmsComponents/wiki/SiderBar.vue

@@ -0,0 +1,206 @@
+<template>
+    <div>
+        <a-menu
+            v-if="list && list.length > 0"
+            class="wiki-menu"
+            popupClassName="wiki-menu-submenu"
+            mode="inline"
+            style="width: 284px"
+            :openKeys.sync="openKeys"
+            :selectedKeys="selectedKeys"
+            @click="menuClick"
+            @openChange="openChangeHandle"
+        >
+            <template v-for="menu in list" :name="menu.name">
+                <SiderBarItem
+                    v-if="menu.content && menu.content.length > 0"
+                    :key="menu.name"
+                    :item="menu"
+                />
+                <a-menu-item v-else :key="menu.name">{{
+                    menu.title
+                }}</a-menu-item>
+            </template>
+        </a-menu>
+    </div>
+</template>
+
+<script>
+import SiderBarItem from "./SiderBarItem";
+import { Menu } from "ant-design-vue";
+import Vue from "vue";
+
+Vue.use(Menu);
+Vue.use(Menu.SubMenu);
+Vue.use(Menu.Item);
+
+export default {
+    props: {
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        // initName: {
+        //   type: Array,
+        //   default: () => [],
+        // },
+        initPath: {
+            type: String,
+            default: "",
+        },
+    },
+    component: {
+        SiderBarItem,
+        "a-menu": Menu,
+    },
+    data() {
+        return {
+            openKeys: [],
+            selectedKeys: [],
+        };
+    },
+    computed: {},
+
+    watch: {
+        initPath(n, o) {
+            if (!n) {
+                return false;
+            }
+
+            let openkeys =
+                this.initPath.length > 0
+                    ? this.initPath.split("/").reverse().slice(1)
+                    : [];
+            this.openKeys = [...this.openKeys, ...openkeys];
+
+            this.selectedKeys =
+                this.initPath.length > 0
+                    ? this.initPath.split("/").reverse().slice(0, 1)
+                    : [];
+        },
+    },
+    mounted() {
+        this.openKeys =
+            this.initPath.length > 0
+                ? this.initPath.split("/").reverse().slice(1)
+                : [];
+        this.selectedKeys =
+            this.initPath.length > 0
+                ? this.initPath.split("/").reverse().slice(0, 1)
+                : [];
+    },
+
+    methods: {
+        menuClick(e) {
+            this.selectedKeys = [e.key];
+
+            this.$emit("selectItem", {
+                path: e.keyPath.slice(0, 2).reverse().join("/"),
+                keyPath: e.keyPath,
+            });
+        },
+        openChangeHandle(e) {
+            console.log("openChangeHandle", e);
+            this.openKeys = e;
+        },
+    },
+};
+</script>
+
+<style lang="less" scope>
+.theme-dark .wiki-menu {
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        background: rgba(34, 39, 52, 1);
+    }
+}
+
+.wiki-menu {
+    &.ant-menu-inline,
+    &.ant-menu-vertical,
+    &.ant-menu-vertical-left {
+        border: none;
+    }
+
+    .ant-menu-vertical .ant-menu-submenu,
+    .ant-menu-vertical-left .ant-menu-submenu,
+    .ant-menu-vertical-right .ant-menu-submenu,
+    .ant-menu-inline .ant-menu-submenu {
+        border-radius: 6px;
+    }
+
+    .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-submenu-selected,
+    .ant-menu-item-selected {
+        color: var(--primary-color) !important;
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        background: none;
+    }
+
+    .ant-menu-submenu-vertical
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::after,
+    .ant-menu-submenu-vertical-left
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::after,
+    .ant-menu-submenu-vertical-right
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::after,
+    .ant-menu-submenu-inline
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::after,
+    .ant-menu-submenu-vertical
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::before,
+    .ant-menu-submenu-vertical-left
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::before,
+    .ant-menu-submenu-vertical-right
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::before,
+    .ant-menu-submenu-inline
+        > .ant-menu-submenu-title:hover
+        .ant-menu-submenu-arrow::before {
+        // background: linear-gradient(to right, var(--primary-color), var(--primary-color));
+        background: linear-gradient(to right, #70747c, #70747c);
+    }
+
+    .ant-menu-submenu-active,
+    .ant-menu-submenu-open {
+        border-radius: 6px !important;
+    }
+
+    .ant-menu-item,
+    .ant-menu-submenu-title {
+        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-vertical .ant-menu-item::after,
+    .ant-menu-vertical-left .ant-menu-item::after,
+    .ant-menu-vertical-right .ant-menu-item::after,
+    .ant-menu-inline .ant-menu-item::after {
+        border-right: none;
+    }
+
+    .wiki-menu-submenu {
+        border-radius: 6px;
+    }
+}
+</style>

package/dist/components/cmsComponents/wiki/SiderBarItem.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-sub-menu :key="props.item.name" v-bind="$props" v-on="$listeners">
+    <template v-if="props.item.content && props.item.content.length > 0">
+      <span slot="title">{{ props.item.title }}</span>
+      <template v-for="sub in props.item.content">
+        <SiderBarItem
+          v-if="sub.content && sub.content.length > 0"
+          :key="sub.name"
+          :item="sub"
+        />
+        <a-menu-item v-else :key="sub.name">{{ sub.title }}</a-menu-item>
+      </template>
+    </template>
+
+    <a-menu-item v-else :key="props.item.name">{{
+      props.item.title
+    }}</a-menu-item>
+  </a-sub-menu>
+</template>
+
+
+<script>
+import { Menu } from "ant-design-vue";
+export default {
+  name: "SiderBarItem",
+  isSubMenu: true,
+  props: {
+    ...Menu.SubMenu.props,
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
+  background: none;
+  color: inherit;
+  .menu-link {
+    // color: var(--primary-color);
+  }
+}
+
+.ivu-menu-light.ivu-menu-vertical
+  .ivu-menu-item-active:not(.ivu-menu-submenu):after {
+  background: none;
+}
+
+.ant-menu-submenu-selected {
+  color: var(--primary-color);
+}
+.menu-list {
+  .menu-link {
+    padding: 6px 12px;
+    border-radius: 6px;
+  }
+}
+</style>

package/dist/components/cmsComponents/wiki/TitleList.vue

@@ -0,0 +1,74 @@
+<template>
+  <ul class="list-group">
+    <li class="list-item" v-for="(item, index) of list" :key="index">
+      <p
+        :class="activeId === item.id ? 'active' : ''"
+        @click="toTitlePos(item)"
+      >
+        {{ item.innerText }}
+      </p>
+      <TitleList
+        v-if="item.children.length > 0"
+        :moveId="activeId"
+        :list="item.children"
+        @toTitlePos="toTitlePos"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "TitleList",
+  props: {
+    moveId: {
+      type: String,
+      default: "",
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      activeId: "",
+    };
+  },
+  methods: {
+    toTitlePos(item) {
+      this.activeId = item.id;
+      this.$emit("toTitlePos", item);
+    },
+  },
+  mounted() {
+    this.activeId = this.moveId;
+  },
+  watch: {
+    moveId(n, o) {
+      this.activeId = n;
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.list-group {
+  padding-left: 16px;
+  .list-item {
+    margin: 12px 0;
+    cursor: pointer;
+
+    p {
+      line-height: 20px;
+      margin-block-end: 0;
+      margin-block-start: 0;
+    }
+
+    .active {
+      font-weight: 600;
+      color: var(--primary-color);
+    }
+  }
+}
+</style>