feat: new group

packages/components/src/components/td-doc-footer/index.js

@@ -1,34 +1,102 @@
 import { html, define } from 'hybrids';
 import { getFooterConfig } from '@config/footer.js';
 import { getLocale } from '@config/locale.js';
-import style from './style.less';
 import { patchShadowDomIntoDom, mobileBodyStyle } from '@utils';
 import tencentCloudIcon from '@images/tencentcloud-logo.svg?raw';
 import committeeIcon from '@images/committee-logo.svg?raw';
-import qrcodeIcon from '@images/tdesign-qrcode.svg?raw';
+
+import designLogo from '@images/groups/design-logo.svg?raw';
+import flutterLogo from '@images/groups/flutter-logo.svg?raw';
+import vueLogo from '@images/groups/vue-logo.svg?raw';
+import reactLogo from '@images/groups/react-logo.svg?raw';
+import wxLogo from '@images/groups/wx-logo.svg?raw';
+
+import designQrcodeIcon from '@images/groups/design-group.png';
+import flutterQrcodeIcon from '@images/groups/flutter-group.png';
+import vue2QrcodeIcon from '@images/groups/vue2-group.png';
+import vue3QrcodeIcon from '@images/groups/vue3-group.png';
+import reactQrcodeIcon from '@images/groups/react-group.png';
+import wxQrcodeIcon from '@images/groups/wx-group.png';
+
+import style from './style.less';
+import portalStyle from './portal.less';
 
 const footerLinks = getFooterConfig();
 const locale = getLocale();
 const currentYear = new Date().getFullYear();
 
+const qrcodeMap = {
+  vue2: vue2QrcodeIcon,
+  vue3: vue3QrcodeIcon,
+  react: reactQrcodeIcon,
+  wx: wxQrcodeIcon,
+  design: designQrcodeIcon,
+  flutter: flutterQrcodeIcon,
+};
 export default define({
   tag: 'td-doc-footer',
   mobileBodyStyle,
   platform: 'web',
+  displayQrCode: '',
   patchDom: {
     get: (_host, lastValue) => lastValue || false,
     set: (_host, value) => value,
     connect: patchShadowDomIntoDom,
   },
   render: (host) => {
     const mobileBodyStyle = { ...host.mobileBodyStyle };
+    const { displayQrCode } = host;
+
+    const handleHoverLogo = (type) => {
+      host.displayQrCode = qrcodeMap[type];
+    };
 
     return html`
       <div class="TDesign-doc-footer" style="${mobileBodyStyle}">
         <div class="TDesign-doc-footer__inner">
           <div class="TDesign-doc-footer__content">
             <div class="TDesign-doc-footer__qrcode">
-              <i innerHTML="${qrcodeIcon}"></i>
+              <td-doc-popup
+                placement="left-start"
+                portal-class="TDesign-doc__qrcode-popup"
+                portal-style="${portalStyle}"
+              >
+                <div class="TDesign-doc-footer__qrcode-trigger">
+                  <div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('vue2')}">
+                      <i innerHTML="${vueLogo}"></i>
+                      <span>Vue 2</span>
+                    </div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('vue3')}">
+                      <i innerHTML="${vueLogo}"></i>
+                      <span>Vue 3</span>
+                    </div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('react')}">
+                      <i innerHTML="${reactLogo}"></i>
+                      <span>React</span>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('flutter')}">
+                      <i innerHTML="${flutterLogo}"></i>
+                      <span>Flutter</span>
+                    </div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('design')}">
+                      <i innerHTML="${designLogo}"></i>
+                      <span>Design</span>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="qrcode" onmouseenter="${() => handleHoverLogo('wx')}">
+                      <i innerHTML="${wxLogo}"></i>
+                      <span>MiniProgram</span>
+                    </div>
+                  </div>
+                </div>
+                <div slot="content" class="TDesign-doc__qrcode-inner">
+                  <img width="120" height="120" src="${displayQrCode}" />
+                </div>
+              </td-doc-popup>
               <h4 class="TDesign-doc-footer__qrcode-title">${locale.footer.weComGroup}</h4>
               <p class="TDesign-doc-footer__qrcode-desc">${locale.footer.weComGroupDesc}</p>
             </div>

packages/components/src/components/td-doc-footer/portal.less

@@ -0,0 +1,21 @@
+/* stylelint-disable */
+.TDesign-doc__qrcode-inner {
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 6px;
+}
+
+.TDesign-doc__qrcode-popup::after {
+  position: absolute;
+  content: '';
+  width: 16px;
+  height: 16px;
+  transform: rotate(45deg);
+  transform: rotate(45deg);
+  background: #fff;
+  border-bottom: 1px solid #fff;
+  border-right: 1px solid #fff;
+  top: 64px;
+  right: -4px;
+}

packages/components/src/components/td-doc-footer/style.less

@@ -1,8 +1,10 @@
+/* stylelint-disable */
 :host {
   font-size: 14px;
   color: var(--text-secondary);
   min-height: var(--footer-height);
   box-sizing: border-box;
+
   --footer-logo-position: absolute;
   --footer-inner-position: static;
 }
@@ -13,7 +15,7 @@
   padding-right: var(--content-padding-right);
   background-color: var(--bg-color-footer);
   box-shadow: var(--footer-box-shadow);
-  
+
   &__inner {
     position: var(--footer-inner-position);
     margin: 0 auto;
@@ -70,7 +72,7 @@
 
   &__qrcode {
     width: 192px;
-    padding: 24px;
+    padding: 16px;
     box-sizing: border-box;
     border-radius: 9px;
     background: var(--bg-color-code);
@@ -83,13 +85,13 @@
     top: 40px;
 
     &-title {
-      margin: 0 0 4px 0;
+      margin: 0 0 4px;
       font-size: 16px;
       line-height: 24px;
       font-weight: bold;
       color: var(--text-primary);
     }
-    
+
     &-desc {
       margin: 0;
       font-size: 14px;
@@ -99,13 +101,75 @@
   }
 }
 
+.TDesign-doc-footer__qrcode-trigger {
+  background: linear-gradient(180deg, #4282ec 0%, var(--brand-main) 100%);
+  width: 160px;
+  height: 160px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 8px 8px 0 #0000001a;
+  margin-bottom: 12px;
+
+  > div {
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--text-primary);
+
+    :hover {
+      color: var(--brand-main);
+      font-weight: bold;
+    }
+
+    > div {
+      background-color: var(--bg-color-container);
+      border-radius: 3px;
+      text-align: left;
+      padding: 4px;
+      display: flex;
+      font-size: 12px;
+      flex-direction: column;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        text-align: left;
+      }
+    }
+
+    &:nth-child(1) {
+      div {
+        width: 48px;
+      }
+    }
+
+    &:nth-child(2) {
+      div {
+        width: 74px;
+      }
+    }
+
+    &:nth-child(3) {
+      div {
+        width: 152px;
+      }
+    }
+  }
+}
+
 .TDesign-doc-footer__bottom {
   height: 56px;
   overflow: hidden;
   color: var(--text-placeholder);
   padding-right: var(--content-padding-right);
   background: var(--bg-color-secondaryfooter);
-  
+
   .TDesign-doc-footer__inner {
     padding: 0 var(--content-padding-left-right);
     align-items: center;
@@ -166,7 +230,7 @@
 
   .TDesign-doc-footer__bottom {
     height: 112px;
-    
+
     .TDesign-doc-footer__inner {
       flex-direction: column-reverse;
       padding-top: 16px;