udxcms 1.0.1

package/dist/components/cmsComponents/paragen/SubMenu.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2021-12-17 01:23:22
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-12-28 15:58:05
+-->
+<template>
+    <div class='subMenu'>
+        <ul>
+            <li v-for='(item, index) in list' :key='index' :class="!index && 'active'" @click="goUrl(item)">
+                <span class='menu-text'>
+                    {{ item.bar_name }}
+                    <menu-tag :content='item.menu_tag' v-if='item.menu_tag'></menu-tag>
+                </span>
+            </li>
+        </ul>
+        <div class='subArrow'>
+            <div class='arrow'></div>
+        </div>
+    </div>
+</template>
+
+<script lang='ts'>
+    export default {
+        props: {
+            list: Array
+        },
+        methods: {
+            goUrl(item) {
+                this.$emit('goUrl', item)
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .subMenu {
+        position: absolute;
+        min-width: 260px;
+        left: 50%;
+        top: 48px;
+        transform: translateX(-50%);
+        backdrop-filter: blur(12px);
+        border-radius: 4px;
+        // filter: drop-shadow(0px 0px 1px white);
+        .menu-text {
+            display: flex;
+            white-space: nowrap;
+            align-items: center;
+        }
+        .subArrow {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%) rotate(45deg);
+            top: -15px;
+            width: 30px;
+            height: 30px;
+            border-radius: 6px 0 0 0;
+            // background: red;
+            overflow: hidden;
+            .arrow {
+                border: 15px solid #2A2A2E;
+                border-color: #2A2A2E transparent transparent #2A2A2E ; 
+            }
+        }
+        &::after {
+            position: absolute;
+            content: ' ';
+            border: 100px solid rgba(0, 0, 0, 0.82);
+            border-color: transparent;
+            left: 50%;
+            transform: translateX(-50%);
+            top: -36px;
+        }
+        ul {
+            padding: 16px 40px 16px 20px;
+            background: #2A2A2E;
+            border-radius: 4px;
+        }
+        ul li {
+            position: relative;
+            z-index:10;
+            font-family: Font;
+            font-size: 14px;
+            line-height: 22px;
+            color: rgba(255, 255, 255, 1);
+            padding: 4px 0;
+            border-radius: 2px;
+            border-bottom: 1px solid transparent;
+            &:hover {
+                color: white;
+                border-bottom: 1px solid white;
+                
+            }
+        }
+    }
+</style>

package/dist/components/cmsComponents/sdk/Logo.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="wiki-logo" @click="goHome"
+      :style="{ backgroundColor: commonConf.headerBg }">
+    <img
+      :src="logoSrc + '/' + lang + '/w72.png'"
+      class="imgsvg"
+      :style="{ height: commonConf.logoHeight }"
+    />
+  </div>
+</template>
+
+<script>
+import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
+
+export default {
+  data() {
+    return {
+      commonConf: {},
+      lang: localStorage.getItem("language") || conf.baseLanguage,
+    };
+  },
+  computed: {
+    logoSrc() {
+      let path =
+        this.$t("site_common_logo_base_url") + window.location.hostname;
+      return path;
+    },
+  },
+  created() {
+    this.dealTheme();
+  },
+  methods: {
+    goHome() {
+      this.$router.push({
+        path: "/",
+      });
+    },
+    dealTheme() {
+      theme_config.map((v) => {
+        v.pageList.map((component) => {
+          component.configList.map((config) => {
+            if (
+              component.pageKey == "common" &&
+              config.componentsKey == "common_conf"
+            ) {
+              this.commonConf = unwrapJSONStr(config.config) || {};
+            }
+          });
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+.wiki-logo {
+  height: 56px;
+  font-size: 0;
+  padding: 16px 20px;
+  cursor: pointer;
+  margin-top: -2px;
+  display: flex;
+  align-items: center;
+  .imgsvg {
+    width: auto;
+    height: 40px;
+    color: white;
+    position: absolute;
+  }
+  .imgsvgactive {
+    filter: invert(1) brightness(2);
+  }
+}
+</style>

package/dist/components/cmsComponents/sdk/NavBread.vue

@@ -0,0 +1,104 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-04 21:10:32
+ * @LastEditTime: 2021-11-15 19:42:58
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+  <div class="wiki-breaadcrumb">
+    <Breadcrumb separator="">
+      <span
+        v-for="(item, index) in list"
+        :key="index"
+        @click="breadHandle(item, index)"
+      >
+        <BreadcrumbItem>
+          {{ item.name }}
+        </BreadcrumbItem>
+      </span>
+    </Breadcrumb>
+
+    <div class="layou-export">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  methods: {
+    breadHandle(item, index) {
+      this.$emit("breadClick", { index, item: item });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.wiki-breaadcrumb {
+  position: relative;
+  padding: 0 20px;
+  /deep/ .ivu-breadcrumb {
+    padding: 14px 0px;
+    span {
+      line-height: 32px;
+    }
+  }
+  /deep/ .ivu-breadcrumb > span:last-child {
+    font-weight: 500;
+  }
+  /deep/ .ivu-breadcrumb-item-link {
+    width: 54px;
+    height: 32px;
+    font-family: FontMedium;
+    text-align: center;
+    color: var(--text-color-secondary);
+    line-height: 32px;
+    font-size: 24px;
+  }
+  /deep/ .ivu-breadcrumb-item-separator {
+    position: relative;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin: 0 15px;
+  }
+  /deep/ .ivu-breadcrumb-item-separator::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background-size: contain;
+    background-image: url("../../../assets/img/bread.png");
+  }
+  .layou-export {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    padding: 13px 10px 15px;
+    span {
+      font-size: 18px;
+      line-height: 32px;
+      font-family: Font;
+      text-align: left;
+      color: var(--text-color-placeholder);
+      &:first-child {
+        cursor: pointer;
+      }
+    }
+  }
+  .ivu-breadcrumb > span {
+    color: #515a6e;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+<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>
+.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/sdk/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/sdk/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>