@cloudbase/weda-ui-mp 0.2.20

package/components/navLayout/index.wxss

@@ -0,0 +1,135 @@
+@import '../../style/weda-ui.wxss';
+
+/* pc style */
+.weda-grid-navigation {
+  width: 100%;
+}
+
+.weda-grid-navigation .weda-grid-navigation__wrapper {
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.weda-grid-navigation .weda-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.weda-grid-navigation .weda-grid .weda-grid__item {
+  flex-grow: 1;
+}
+
+.weda-grid-navigation .weda-grid-navigation__col .weda-grid__box {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: flex-start;
+  /* align-items: center; */
+  padding: 8px 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__row:first-child
+  .weda-grid-navigation__col
+  .weda-grid__box {
+  padding-top: 16px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__row:last-child
+  .weda-grid-navigation__col
+  .weda-grid__box {
+  padding-bottom: 16px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .weda-grid__box {
+  padding: 10px 0;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__row:first-child
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .weda-grid__box {
+  padding-top: 20px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__row:last-child
+  .weda-grid-navigation__col.weda-grid-navigation__col--big
+  .weda-grid__box {
+  padding-bottom: 20px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--medium
+  .weda-grid-navigation__img {
+  width: 2.57142em;
+  height: 2.57142em;
+}
+.weda-grid-navigation .weda-grid-navigation__icon .lcap-icon-padding {
+  padding: 2px 0;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--medium
+  .weda-grid-navigation__icon
+  .weda-icon {
+  font-size: 2.57142em;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__img {
+  height: 2.2857em;
+  width: 2.2857em;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--small
+  .weda-grid-navigation__icon
+  .weda-icon {
+  font-size: 2.2857em;
+}
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__img {
+  width: 2.85714em;
+  height: 2.85714em;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__icon
+  .weda-icon {
+  font-size: 2.85714em;
+}
+
+.weda-grid-navigation .weda-grid-navigation__icon .weda-grid-navigation__img {
+  width: 100%;
+  height: 100%;
+}
+.weda-grid-navigation__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.weda-grid-navigation .weda-grid-navigation__col .weda-grid-navigation__text {
+  font-size: 0.85714em;
+  line-height: 1.42857em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.6);
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-top: 4px;
+}
+
+.weda-grid-navigation
+  .weda-grid-navigation__col--big
+  .weda-grid-navigation__text {
+  margin-top: 8px;
+}

package/components/navigationBar/index.js

@@ -0,0 +1,205 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+import destr from '../../utils/destr';
+import { isUrl } from '../../utils/platform';
+import { getAppCustomNav, resolveStaticResourceUrl } from '../../utils/tcb';
+
+Component({
+  options: {
+    multipleSlots: true, // 启用多slot支持
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navigationbar: { type: Object, value: {} },
+  },
+  data: {
+    defaultLogoUrl:
+      'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg',
+    visible: false,
+    selectedKey: 'index',
+    menuData: [],
+    navigationStyle: {
+      isHorizontal: false,
+      showMenuIcon: true,
+      fixedTop: true,
+      menuFontSize: 14,
+      menuBackgroundColor: '#fff',
+      menuColor: '#000',
+      menuHoverColor: '#f3f3f3',
+      showTitle: true,
+      title: '标题',
+      showLogo: true,
+      logoPath: '',
+      logoUrl:
+        'https://imgcache.qq.com/qcloud/tcloud_dtc/static/static_source_business/43d3b2b7-445c-4858-8eb0-50ac5d5cc08e.svg  ',
+      titleFontSize: '18',
+      titleColor: '#000',
+      logoWidth: '32',
+      logoHeight: '32',
+    },
+  },
+  observers: {
+    navigationbar: function (navigationbar) {
+      this.getMenusByapi(navigationbar);
+    },
+  },
+  methods: {
+    getMenusByapi(navigationbar) {
+      getAppCustomNav()
+        .then((res) => {
+          const { Content } = res;
+          const navigationData = destr(Content);
+          if (navigationData?.navigationStyle) {
+            const {
+              menuData,
+              navigationStyle,
+              isMultiTerminal,
+              mobileMenuData,
+            } = navigationData;
+            let menus = isMultiTerminal ? mobileMenuData : menuData;
+            let selectedKey = this.defaultSelectedMenu(menus);
+            // 从cdn中读取图片
+            const logoUrl =
+              resolveStaticResourceUrl(navigationStyle.logoPath) ||
+              navigationStyle.logoUrl;
+            navigationStyle.logoUrl = logoUrl;
+
+            this.setData({
+              menuData: this.generateMenuData(
+                menus,
+                { key: selectedKey },
+                true
+              ),
+              navigationStyle,
+              selectedKey,
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          const { menuData, navigationStyle } = navigationbar;
+          let selectedKey = this.defaultSelectedMenu(menuData);
+
+          this.setData({
+            menuData: this.generateMenuData(
+              menuData,
+              { key: selectedKey },
+              true
+            ),
+            navigationStyle,
+            selectedKey,
+          });
+        });
+    },
+    generateMenuData(menuData, menuItem, init = false) {
+      let menus = JSON.parse(JSON.stringify(menuData));
+      return menus?.map((i) => {
+        let { iconUrl = 'td:view-module', children, iconPath } = i;
+        let iconType = 'image';
+        let ticon = '';
+        if (isUrl(iconUrl)) {
+          // 从cdn中读取图片
+          iconUrl = resolveStaticResourceUrl(iconPath) || iconUrl;
+        } else {
+          iconType = 'icon';
+          if (iconUrl.includes('td:')) {
+            iconType = 't-icon';
+            ticon = iconUrl?.replace('td:', '');
+          }
+        }
+
+        if (init) {
+          i.expand = this.hasSelectedMenu(i, menuItem.key);
+        } else if (i.key === menuItem.key) {
+          i.expand = menuItem.expand;
+        }
+        return {
+          ...i,
+          iconType,
+          iconUrl,
+          ticon,
+          children: this.generateMenuData(children || [], menuItem, init),
+        };
+      });
+    },
+    showMenu() {
+      this.setData({ visible: !this.data.visible });
+    },
+    menuClick(itemInfo) {
+      const menu = itemInfo?.currentTarget?.dataset?.menu;
+      const { path, type, children, expand, packageName } = menu;
+      if (children.length) {
+        this.setData({
+          menuData: this.generateMenuData(this.data.menuData, {
+            ...menu,
+            expand: !expand,
+          }),
+        });
+        return;
+      }
+      if (type === 'route') {
+        let { app } = getWedaAPI();
+        app.navigateTo({
+          pageId: path?.replace('/', ''),
+          packageName: packageName || '',
+          mode: 'weDa',
+        });
+      }
+    },
+    hasSelectedMenu(menu, selectedkey) {
+      let opened = false;
+      if (menu.key === selectedkey) {
+        return true;
+      }
+      menu?.children?.forEach((i) => {
+        if (i.key === selectedkey) {
+          opened = true;
+        }
+        if (i?.children?.length) {
+          opened = this.hasSelectedMenu(i, selectedkey);
+        }
+      });
+      return opened;
+    },
+    findMenuItemByPath(menus, targetPath) {
+      const queue = [];
+      let targetNode = null;
+      menus.forEach((node) => queue.push(node));
+
+      while (queue.length) {
+        const node = queue.shift();
+        if (!node) return null;
+
+        if (node.path === targetPath) {
+          // 添加节点
+          targetNode = node;
+          break;
+        } else {
+          node.children?.forEach((node) => queue.push(node));
+        }
+      }
+
+      return targetNode;
+    },
+    defaultSelectedMenu(menu) {
+      try {
+        const activePage = getWedaAPI()?.app?.__internal__?.activePage;
+        let path = activePage.id;
+        let selectedKey = '';
+        const targetMenu = this.findMenuItemByPath(menu, `/${path}`);
+        if (targetMenu) {
+          selectedKey = targetMenu.key;
+        }
+        return selectedKey;
+      } catch (error) {
+        return '';
+      }
+    },
+  },
+});

package/components/navigationBar/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/navigationBar/index.wxml

@@ -0,0 +1,83 @@
+<view class="weda-menu weda-menu-mobile">
+  <view class="weda-menu__wrapper" style="background:{{navigationStyle.menuBackgroundColor}}">
+    <view class="weda-menu__bar-main">
+      <view class="weda-menu__main-logo">
+        <image wx:if="{{navigationStyle.showLogo}}" class="weda-menu__main-icon" style="width:{{navigationStyle.logoWidth}}px;height:{{navigationStyle.logoHeight}}px;" src="{{navigationStyle.logoUrl||defaultLogoUrl}}"></image>
+        <text wx:if="{{navigationStyle.showTitle}}" style="font-size:{{navigationStyle.titleFontSize}}px;color:{{navigationStyle.titleColor}};line-height: 2px;"> {{navigationStyle.title}} </text>
+      </view>
+    </view>
+    <view class="weda-menu__mobile-content">
+      <slot name="navigationSlot"></slot>
+    </view>
+    <view class="weda-menu__bar-extra">
+      <view wx:if="{{!visible}}" class=".weda-menu__bar-btn weda-icon t-icon t-icon-view-list" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+      <view wx:else class="weda-menu__bar-btn--close weda-icon t-icon t-icon-close" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+    </view>
+  </view>
+  <view class="menu-solt">
+    <slot name="contentSlot"></slot>
+  </view>
+</view>
+
+<view class="weda-menu-mobile__drawer" wx-if="{{visible}}">
+  <view class="weda-menu weda-menu-mobile">
+    <view class="weda-menu__wrapper" style="background:{{navigationStyle.menuBackgroundColor}}">
+      <view class="weda-menu__bar-main">
+        <view class="weda-menu__main-logo">
+          <image wx:if="{{navigationStyle.showLogo}}" class="weda-menu__main-icon" style="width:{{navigationStyle.logoWidth}}px;height:{{navigationStyle.logoHeight}}px;" src="{{navigationStyle.logoUrl||defaultLogoUrl}}"></image>
+          <text wx:if="{{navigationStyle.showTitle}}" style="font-size:{{navigationStyle.titleFontSize}}px;color:{{navigationStyle.titleColor}};line-height: 2px;"> {{navigationStyle.title}} </text>
+        </view>
+      </view>
+      <view class="weda-menu__bar-extra">
+        <view wx:if="{{!visible}}" class=".weda-menu__bar-btn weda-icon t-icon t-icon-view-list" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+        <view wx:else class="weda-menu__bar-btn--close weda-icon t-icon t-icon-close" bindtap="showMenu" style="color:{{navigationStyle.titleColor}}"></view>
+      </view>
+    </view>
+  </view>
+  <view class="weda-drawer-drawer__body">
+    <scroll-view class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" scroll-y>
+      <view class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" style="background:{{navigationStyle.menuBackgroundColor}}">
+        <view class="weda-drawer-menu__body">
+          <view class="weda-drawer-menu__list">
+            <block wx:for="{{menuData}}" wx:key="menuIndex" wx:for-item="menu">
+              <view class="{{menu.children ? 'weda-drawer-menu__submenu' : ''}} {{menu.expand?'expand':''}}">
+                <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===menu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{menu}}">
+                  <view wx:if="{{navigationStyle.showMenuIcon && menu.iconType!=='image'}}" class="weda-grid-navigation__icon">
+                    <view wx:if="{{menu.iconType === 't-icon'}}" class="weda-icon t-icon t-icon-{{menu.ticon}}" style="font-size:{{navigationStyle.menuFontSize}}px;color:{{navigationStyle.menuColor}}"></view>
+                    <view wx:if="{{menu.iconType !== 't-icon'}}" class="weda-icon lcap-icon-padding lcap-icon lcap-icon-{{menu.iconUrl}}" style="font-size:{{navigationStyle.menuFontSize}}px;color:{{navigationStyle.menuColor}}"> </view>
+                  </view>
+                  <image wx:if="{{navigationStyle.showMenuIcon && menu.iconType==='image'}}" class="weda-drawer-menu__list-icon" src="{{menu.iconUrl}}" alt="icon"></image>
+                  <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}}px;color:{{navigationStyle.menuColor}}">{{menu.title}}</view>
+                  <view wx-if="{{menu.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+                </view>
+                <view class="weda-drawer-menu__list">
+                  <block wx-if="{{menu.children}}">
+                    <block wx:for="{{menu.children}}" wx:key="secondIndex" wx:for-item="secondMenu">
+                      <view class="{{secondMenu.children ? 'weda-drawer-menu__submenu weda-menu__submenu' : ''}} {{secondMenu.expand?'expand':''}}">
+                        <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===secondMenu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{secondMenu}}">
+                          <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}}px;color:{{navigationStyle.menuColor}}">{{secondMenu.title}}</view>
+                          <view wx-if="{{secondMenu.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+                        </view>
+                        <view class="weda-drawer-menu__list">
+                          <block wx-if="{{secondMenu.children}}">
+                            <block wx:for="{{secondMenu.children}}" wx:key="thridIndex" wx:for-item="thridMenu">
+                              <view class="">
+                                <view class="weda-drawer-menu__item" style="background-color:{{selectedKey===thridMenu.key?navigationStyle.menuHoverColor:'unset'}};" bindtap="menuClick" data-menu="{{thridMenu}}">
+                                  <view class="weda-drawer-menu__text" style="font-size:{{navigationStyle.menuFontSize}}px;color:{{navigationStyle.menuColor}}">{{thridMenu.title}}</view>
+                                </view>
+                              </view>
+                            </block>
+                          </block>
+                        </view>
+                      </view>
+                    </block>
+                  </block>
+                </view>
+              </view>
+            </block>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</view>

package/components/navigationBar/index.wxss

@@ -0,0 +1,205 @@
+@import '../../style/weda-ui.wxss';
+.weda-menu-mobile {
+  display: block;
+  position: relative;
+  z-index: 1000;
+  width: 100%;
+}
+
+.weda-menu-mobile .weda-menu__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 0 16px;
+  height: 64px;
+  background-color: #fff;
+  position: relative;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+.weda-menu-mobile .weda-menu__bar-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile .weda-menu__bar-main .weda-menu__main-logo {
+  font-weight: normal;
+  font-size: 18px;
+  color: #000000;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile .weda-menu__bar-main .weda-menu__main-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 12px;
+}
+
+.weda-menu-mobile .weda-menu__bar-extra {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn,
+.weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn--close {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+.weda-menu-mobile .weda-menu__bar-extra .weda-menu__bar-btn--close {
+  font-size: 28px;
+}
+.weda-menu-mobile__drawer {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  right: auto;
+  bottom: 0;
+  top: 0;
+  flex-direction: column;
+  background-color: #fff;
+  box-shadow: 0 0.14286rem 0.28571rem 0 rgb(54 58 80 / 32%);
+  display: flex;
+  color: rgba(0, 0, 0, 0.9);
+  z-index: 1001;
+}
+
+.weda-menu-mobile__drawer .weda-drawer-drawer__body {
+  padding: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.weda-menu-mobile__drawer .weda-drawer-menu--light {
+  position: relative;
+  width: 100%;
+  background-color: #1e222d;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  vertical-align: top;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-x: hidden;
+  background-color: #fff;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__body {
+  width: 100%;
+  border: none;
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__item {
+  padding: 14px 16px 16px 16px;
+  border-bottom: 1px solid rgba(160, 160, 160, 0.2);
+  display: flex;
+  align-items: center;
+}
+.weda-grid-navigation__icon {
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__list {
+  padding-bottom: 0;
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-drawer-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__item {
+  padding-left: 50px;
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__item {
+  padding-left: 70px;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__list-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  margin-top: 0;
+  vertical-align: text-top;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__text,
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__submenu,
+.weda-drawer-menu__item .weda-drawer-menu__text,
+.weda-menu-mobile__drawer
+  .weda-drawer-menu--light
+  .weda-drawer-menu__submenu.is-expanded
+  > .weda-drawer-menu__item
+  > .weda-drawer-menu__text,
+.weda-menu-mobile__drawer
+  .weda-drawer-menu--light
+  .weda-drawer-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__text {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0;
+  max-width: 100%;
+  font-weight: normal;
+  display: inline-block;
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-drawer-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__text {
+  font-weight: normal;
+}
+
+.weda-drawer-menu__submenu {
+  width: 100%;
+}
+
+.wedatea2td-menu--light.wedatea2td-menu.weda-menu__drawer-menu {
+  width: 100%;
+}
+
+.weda-menu-mobile__drawer .weda-grid-navigation__icon .weda-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  margin-right: 4px;
+}
+
+.weda-drawer-menu__submenu > .weda-drawer-menu__list {
+  display: none;
+}
+.weda-drawer-menu__submenu.expand > .weda-drawer-menu__list {
+  display: block;
+}
+.weda-menu__bar-btn-expand {
+  top: 10px;
+  right: 10px;
+  font-size: 16px;
+  margin-left: auto;
+}
+.weda-drawer-menu__submenu.expand
+  > .weda-drawer-menu__item
+  > .weda-menu__bar-btn-expand {
+  transform: scaleY(-1);
+}
+
+.weda-menu__mobile-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 15px;
+}