Dev bqx

packages/competition/src/App.css

@@ -1,10 +1,4 @@
 @import url("./reset.css");
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 .logo {
   height: 6em;

packages/competition/src/App.tsx

@@ -1,12 +1,23 @@
-import { Button, DatePicker, Input, showToast } from "../../ui/dist";
+import { useState } from "react";
+import { Button, Sheet, SheetWrapper } from "../../ui/dist";
 import "./App.css";
 
 function App() {
+  const [visible, setVisible] = useState<boolean>(false);
   return (
     <>
-      <Button onClick={() => showToast()}>showToast</Button>
-      <Input></Input>
-      <DatePicker></DatePicker>
+      <SheetWrapper>
+        <div style={{ width: "100vw", backgroundColor: "white" }}>
+          <div style={{ height: "19900px" }}></div>
+          <Button onClick={() => setVisible(true)}>test</Button>
+          <div style={{ height: "19900px" }}></div>
+        </div>
+      </SheetWrapper>
+      <Sheet
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        width={400}
+      ></Sheet>
     </>
   );
 }

packages/ui/lib/Accordion/Accordion.module.scss

@@ -1,3 +1,4 @@
+@use '../variables' as *;
 .base {
   display: grid;
   grid-template-rows: 0fr 0fr;
@@ -28,8 +29,7 @@
       }
     }
     &.disabled {
-      cursor: not-allowed;
-      opacity: 0.3;
+      @include disabled;
     }
   }
   .accordionContentWrap {

packages/ui/lib/Button/Button.module.scss

@@ -1,7 +1,7 @@
 @use '../variables' as *;
 .base {
   background-color: var(--primary-color);
-  color: white;
+  color: var(--white-color);
   padding: 10px;
   border-radius: 5px;
   border: none;
@@ -25,7 +25,7 @@
     border: 1px solid var(--primary-color);
   }
   &.border {
-    border: solid 1px #f1f1f1;
+    border: solid 1px var(--border-white);
     background-color: var(--white-color);
     color: var(--black-color);
     font-weight: 500;
@@ -43,9 +43,8 @@
     background-color: var(--danger-color);
   }
   &.disabled {
+    @include disabled;
     filter: grayscale(1);
-    cursor: not-allowed;
-    opacity: 0.4;
     &:hover {
       backdrop-filter: none;
     }

packages/ui/lib/Calendar/Calendar.module.scss

@@ -3,7 +3,7 @@
   height: fit-content;
   width: fit-content;
   padding: 10px;
-  border-radius: 10px;
+  border-radius: $radius-10;
   background-color: var(--white-color);
   color: var(--black-color);
   box-shadow: $shadow;
@@ -24,10 +24,7 @@
         width: 24px;
         position: relative;
         svg {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
+          @include absolute-center;
         }
       }
     }
@@ -51,20 +48,20 @@
         opacity: 0.4;
       }
       &:hover:not(&.today):not(&.select) {
-        background-color: #ecf2ff;
+        background-color: var(--background-blue);
         color: var(--primary-color);
-        border-radius: 5px;
-        transition: all 0.2s ease-in-out;
+        border-radius: $radius-5;
+        transition: all $duration-200 ease-in-out;
       }
       &.today {
-        background-color: #ecf2ff;
+        background-color: var(--background-blue);
         color: var(--primary-color);
-        border-radius: 5px;
+        border-radius: $radius-5;
       }
       &.select {
         background-color: var(--primary-color);
         border-radius: 5px;
-        color: white;
+        color: var(--white-color);
         transition: all 0.2s ease-in-out;
       }
     }
@@ -78,7 +75,7 @@
     padding: 10px;
     border-radius: 5px;
     font-weight: 600;
-    color: #4b4b4b;
+    color: var(--shadow-color);
     .weekday {
       font-size: 14px;
       width: 35px;

packages/ui/lib/Card/Card.module.scss

@@ -25,25 +25,29 @@
     }
   }
   .contentContainer {
-    padding: 20px;
     width: 100%;
     box-sizing: border-box;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
     .mainContent {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: 8px;
       min-height: 100px;
+      flex-grow: 1;
       .header {
         width: 100%;
       }
       .content {
         width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
       }
     }
   }
   .footer {
-    margin-top: 40px;
     width: 100%;
     display: flex;
   }

packages/ui/lib/Card/Card.stories.tsx

@@ -38,7 +38,7 @@ const defaultProps: CardProps = {
   size: 'medium',
   shadow: 'medium',
   header: <span>header</span>,
-  content: <span>content</span>,
+  mainContent: <span>content</span>,
   footer: <span>footer</span>,
 };
 
@@ -59,7 +59,7 @@ export const ExampleCard: Story = {
         </h1>
       </>
     ),
-    content: (
+    mainContent: (
       <>
         <div>
           基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛基础知识竞赛
@@ -181,7 +181,7 @@ export const LoginCard: Story = {
         </div>
       </>
     ),
-    content: (
+    mainContent: (
       <>
         <div
           style={{
@@ -195,14 +195,14 @@ export const LoginCard: Story = {
           }}
         >
           <Input
-            onChange={function (value: string) {
+            onchange={function (value: string) {
               console.log('昵称', value);
             }}
             isFillFather={true}
             label="昵称"
           ></Input>
           <Input
-            onChange={function (value: string) {
+            onchange={function (value: string) {
               console.log('密码', value);
             }}
             label="密码"

packages/ui/lib/Card/Card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Card.module.scss';
 import classnames from 'classnames';
 
-export interface CardProps {
+export interface CardProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
   /**
    * the image of the card
    */
@@ -26,11 +26,27 @@ export interface CardProps {
   /**
    * The content of the Card.
    */
-  content?: React.ReactNode;
+  mainContent?: React.ReactNode;
   /**
    * The footer of the Card.
    */
   footer?: React.ReactNode;
+  /**
+   * the className of the Card
+   */
+  className?: string;
+  /**
+   * padding, the padding of the card
+   */
+  padding?: number;
+  /**
+   * gap , the gap between the content and the header
+   */
+  gap?: number;
+  /**
+   * width , the width of the card
+   */
+  width?: number;
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -40,28 +56,42 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       size = 'medium',
       shadow = 'medium',
       header = <span>header</span>,
-      content = <span>content</span>,
+      mainContent = <span>content</span>,
       footer = <span>footer</span>,
       titleImage = undefined,
+      className = '',
+      padding = 20,
+      gap = 8,
       ...rest
     },
     ref,
   ) => {
-    const cardClass = classnames(styles['base'], styles[theme], styles[size], styles[`shadow-${shadow}`]);
+    const cardClass = classnames(
+      styles['base'],
+      styles[theme],
+      styles[size],
+      styles[`shadow-${shadow}`],
+    );
 
     return (
       <div
         ref={ref}
-        className={cardClass}
+        className={`${cardClass} ${className}`}
         {...rest}
       >
         {titleImage && <div className={styles['titleImage']}>{<>{titleImage}</>}</div>}
-        <div className={styles['contentContainer']}>
-          <div className={styles['mainContent']}>
-            <div className={styles['header']}>{header}</div>
-            <div className={styles['content']}>{content}</div>
+        <div
+          className={styles['contentContainer']}
+          style={{ padding: `${padding}px` }}
+        >
+          <div
+            className={styles['mainContent']}
+            style={{ gap: `${gap}px` }}
+          >
+            {header && <div className={styles['header']}>{header}</div>}
+            {mainContent && <div className={styles['content']}>{mainContent}</div>}
           </div>
-          <div className={styles['footer']}>{footer}</div>
+          {footer && <div className={styles['footer']}>{footer}</div>}{' '}
         </div>
       </div>
     );

packages/ui/lib/Carousel/Carousel.stories.tsx

@@ -8,15 +8,15 @@ const test = (value: number) => {
 };
 
 const styles = {
-  width: '280px',
-  height: '280px',
+  width: '290px',
+  height: '290px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '10px',
   fontSize: '40px',
   fontWeight: '1000',
-  boxShadow: '0px 3px 10px #e3e3e6',
+  boxShadow: '0px 1px 3px #e3e3e6',
 };
 
 const meta = {
@@ -38,8 +38,8 @@ const defaultProps: CarouselProps = {};
 export const DefaultCarousel: Story = {
   args: {
     ...defaultProps,
-    width: 400,
-    height: 400,
+    width: 300,
+    height: 300,
     CarouselItems: [
       { children: <div style={styles}>1</div> },
       { children: <div style={styles}>2</div> },

packages/ui/lib/Checkbox/Checkbox.module.scss

@@ -1,11 +1,11 @@
+@use '../variables' as *;
 .base {
   display: flex;
   align-items: center;
   gap: 5px;
   cursor: pointer;
   &.disabled {
-    opacity: 0.4;
-    cursor: not-allowed !important;
+    @include disabled;
   }
   .checkboxButton {
     all: unset;

packages/ui/lib/CodeEditor/CodeEditor.module.scss

@@ -0,0 +1,42 @@
+@use '../variables' as *;
+$padding: 10px;
+.base {
+  .header-container {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    background-color: var(--border-white);
+    padding: $padding;
+    padding-bottom: 7px;
+    color: var(--black-color);
+    border-radius: $radius-5 $radius-5 0 0;
+    font-weight: 700;
+    box-sizing: border-box;
+    svg {
+      fill: var(--primary-color);
+    }
+  }
+  .select-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: $padding;
+    .refresh-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 34px;
+      border-radius: $radius-half;
+      svg {
+        fill: var(--primary-color);
+      }
+    }
+  }
+  .divider {
+    flex-basis: 1px;
+    background-color: var(--border-white);
+  }
+  .editor-container {
+    flex-grow: 1;
+  }
+}