feat: wemeta-tab

README.md

@@ -14,14 +14,11 @@ taro -v 3.6.35
 
 **本地开发调式文件太大无法手机真机预览可使用**
 
+采用 build 模式开发
 ```
 pnpm devbuild:weapp 
 ```
 
-**小水智能**
-```
-pnpm xiaoshui:weapp
-```
 
 发布测试环境
 

src/components/popup/popup/index.module.less

@@ -7,18 +7,17 @@
   z-index: 1000;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(#000, .2);
+  background-color: rgba(#000, .45);
 }
 .container{
   position: absolute;
-  left: 0;
-  right: 0;
+  left: 10px;
+  right: 10px;
   bottom: 0;
-  padding-top: 28px;
-  width: 100%;
-  border-radius: 20px 20px 0 0;
+  padding-top: 12px;
+  width: calc(100% - 20px);
+  border-radius: 24px 24px 0 0;
   background-color: white;
-  box-shadow: 0px 8px 16px 0px #6A685E;
   transition: transform .14s ease-in;
   transform: translateY(100%);
 }
@@ -30,6 +29,7 @@
   display: flex;
   width: 100%;
   height: 48px;
+  align-items: center;
 }
 .content{
   padding: 0 16px;
@@ -39,8 +39,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   border-radius: 100%;
   background-color: #F2F4F5;
 }

src/components/wemeta-tabs/index.module.less

@@ -29,4 +29,22 @@
   font-weight: 500;
   color: var(--color-primary);
   background-color: var(--color-primary-light);
+}
+
+
+.rounedButton{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  padding: 8px 16px;
+  font-size: 12px;
+  border-radius: 20px;
+  color: rgba(#000, .45);
+  background-color: rgba(#000, .03);
+}
+.rounedButtonActived{
+  .rounedButton();
+  color: white;
+  background-color: var(--color-primary);
 }

src/components/wemeta-tabs/index.tsx

@@ -40,68 +40,64 @@ export default function Index({
     );
   };
 
-  if (tabStyle === "outline") {
-    return (
-      <View>
-        <View className="tab-buttons">
-          {list.map((item) => {
-            return (
-              <View
-                key={item.key}
-                className={`tab-button  ${
-                  tabIndex === item.key ? "tabButton-actived" : ""
-                }
-                  ${full ? "flex flex-1 items-center justify-center" : ""}
-                `}
-                onClick={() => setTabIndex(item.key)}
-              >
-                {item.label}
-              </View>
-            );
-          })}
-        </View>
-        {renderTabContent()}
-      </View>
-    );
-  }
+  // if (tabStyle === "outline") {
+  //   return (
+  //     <View>
+  //       <View className="tab-buttons">
+  //         {list.map((item) => {
+  //           return (
+  //             <View
+  //               key={item.key}
+  //               className={`tab-button  ${
+  //                 tabIndex === item.key ? "tabButton-actived" : ""
+  //               }
+  //                 ${full ? "flex flex-1 items-center justify-center" : ""}
+  //               `}
+  //               onClick={() => setTabIndex(item.key)}
+  //             >
+  //               {item.label}
+  //             </View>
+  //           );
+  //         })}
+  //       </View>
+  //       {renderTabContent()}
+  //     </View>
+  //   );
+  // }
 
-  if (tabStyle === "button") {
-    return (
-      <View>
-      <View className={`flex items-center gap-10 py-8 px-10 ${style.buttonTabs}`}>
-        {list.map((item) => {
-          return (
-            <View
-              key={item.key}
-              className={`${style.buttonTab}  ${
-                tabIndex === item.key ? style.buttonTabActived : ""
-              }
-                  flex-1 shrink-0
-                `}
-              onClick={() => setTabIndex(item.key)}
-            >
-              {item.label}
-            </View>
-          );
-        })}
-      </View>
-      {renderTabContent()}
-      </View>
-    );
-  }
+  // if (tabStyle === "button") {
+  //   return (
+  //     <View>
+  //     <View className={`flex items-center gap-10 py-8 px-10 ${style.buttonTabs}`}>
+  //       {list.map((item) => {
+  //         return (
+  //           <View
+  //             key={item.key}
+  //             className={`${style.buttonTab}  ${
+  //               tabIndex === item.key ? style.buttonTabActived : ""
+  //             }
+  //                 flex-1 shrink-0
+  //               `}
+  //             onClick={() => setTabIndex(item.key)}
+  //           >
+  //             {item.label}
+  //           </View>
+  //         );
+  //       })}
+  //     </View>
+  //     {renderTabContent()}
+  //     </View>
+  //   );
+  // }
 
   return (
     <View>
-      <View className="flex items-center gap-12 py-32">
+      <View className="flex items-center gap-8">
         {list.map((item) => {
           return (
             <View
               key={item.key}
-              className={`rounded-button  ${
-                tabIndex === item.key ? "actived" : ""
-              }
-                ${full ? "flex flex-1 items-center justify-center" : ""}
-              `}
+              className={tabIndex === item.key ? style.rounedButtonActived : style.rounedButton}
               onClick={() => setTabIndex(item.key)}
             >
               {item.label}

src/pages/test/index.tsx

@@ -17,6 +17,7 @@ import PageCustom from "@/components/page-custom/index";
 
 import IconVoiceColor from "@/components/icon/icon-voice-color";
 import TabBarButtons from "@/components/wemeta-tabs/TabBarButtons";
+import WemetaTabs from "@/components/wemeta-tabs/index";
 import CardList from "@/components/list/card-list";
 import CardListItem from "@/components/list/card-list-item";
 import IconPeopleColor from "@/components/icon/icon-people-color";
@@ -28,6 +29,8 @@ import WemetaSwitch from "@/components/wemeta-switch";
 import { useState } from "react";
 import IconArrow from "@/components/icon/icon-arrow";
 
+import Popup from "@/components/popup/popup";
+
 export default function Index() {
   const [tabIndex, setTabIndex] = useState("1");
 
@@ -52,6 +55,9 @@ export default function Index() {
     // onSwitchChanged && onSwitchChanged(checked);
   };
 
+
+  const [showPopup, setShowPopup] = useState(false);
+
   const IconArrowRight = () => {
     return (
       <View className="flex items-center">
@@ -60,6 +66,27 @@ export default function Index() {
     );
   };
 
+  const dataLibTabList = [
+    {
+      key: "1",
+      label: "个人知识",
+      children: <>
+        <View>
+          hello
+        </View>
+      </>
+    },
+    {
+      key: "2",
+      label: "企业知识",
+      children: <>
+        <View>
+          world
+        </View>
+      </>
+    },
+  ];
+
   return (
     <PageCustom>
       <NavBarNormal backText="创建"></NavBarNormal>
@@ -190,6 +217,16 @@ export default function Index() {
             </View>
           </CardList>
         </View>
+
+        <View className="rounded-button-big" onClick={()=> setShowPopup(true)}>拉起弹层</View>
+
+        <Popup setShow={setShowPopup} show={showPopup} title="知识库-图片/视频">
+          <View>你好啊世界</View>
+          <WemetaTabs current="1" list={dataLibTabList}>
+
+          </WemetaTabs>
+        </Popup>
+        
       </View>
     </PageCustom>
   );