@zamlia/mini-ui 0.0.1

package/lib/utils/city.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"city.d.ts","sourceRoot":"","sources":["../../src/utils/city.ts"],"names":[],"mappings":"AAuBA,eAAO,IAAI,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA65Hd,CAAA;AAeD,eAAO,MAAM,UAAU,OAmBnB,CAAA;AAEJ,QAAA,MAAM,SAAS;QACI,MAAM;WAAS,GAAG;GAYjC,CAAA;AAEJ,eAAe,SAAS,CAAA"}

package/lib/utils/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 工具函数
+ */
+export declare const Utils: {
+    /**
+     * 检查值是否为空
+     * @param value 要检查的值
+     * @returns 如果值为空返回 true，否则返回 false
+     */
+    isEmpty(value: any): boolean;
+    /**
+     * 深拷贝对象
+     * @param obj 要拷贝的对象
+     * @returns 深拷贝后的新对象
+     */
+    cloneDeep<T>(obj: T): T;
+    /**
+     * 判断 URL 是否是图片
+     * @param url 要检查的 URL
+     * @returns 如果是图片返回 true，否则返回 false
+     *
+     * @example
+     * isImg('https://example.com/image.jpg') // => true
+     * isImg('https://example.com/image.png') // => true
+     * isImg('https://example.com/video.mp4') // => false
+     */
+    isImg(url: string): boolean;
+    /**
+     * 判断 URL 是否是视频
+     * @param url 要检查的 URL
+     * @returns 如果是视频返回 true，否则返回 false
+     *
+     * @example
+     * isVideo('https://example.com/video.mp4') // => true
+     * isVideo('https://example.com/video.mov') // => true
+     * isVideo('https://example.com/image.jpg') // => false
+     */
+    isVideo(url: string): boolean;
+    /**
+     * 将字符串多余长度转化为...
+     * @param str 字符串
+     * @param len 字符串长度
+     */
+    substr(str: string, len: number): string;
+    /**
+     * 等待
+     */
+    delay: (delayTime?: number) => Promise<void>;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,KAAK;IAEhB;;;;OAIG;mBACY,GAAG,GAAG,OAAO;IAoB5B;;;;OAIG;cACO,CAAC,OAAO,CAAC,GAAG,CAAC;IA0BvB;;;;;;;;;OASG;eACQ,MAAM,GAAG,OAAO;IAmB3B;;;;;;;;;OASG;iBACU,MAAM,GAAG,OAAO;IAkB7B;;;;OAIG;gBACS,MAAM,OAAO,MAAM,GAAG,MAAM;IAuBxC;;OAEG;mCACuB,OAAO,CAAC,IAAI,CAAC;CAKxC,CAAA"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@zamlia/mini-ui",
+  "version": "0.0.1",
+  "description": "基于 Taro 和 nut-ui 的小程序通用组件库",
+  "repository": {
+    "type": "gitee",
+    "url": "https://gitee.com/liucaptain/ly-utils"
+  },
+  "bugs": "https://gitee.com/liucaptain/ly-utils/issues",
+  "homepage": "https://gitee.com/liucaptain/ly-utils.git#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./style": "./lib/styles/index.css",
+    "./style.scss": "./src/styles/index.scss"
+  },
+  "files": [
+    "lib",
+    "es",
+    "src"
+  ],
+  "scripts": {
+    "build": "npm run generate:styles && rollup -c && npm run build:styles",
+    "build:lib": "rollup -c --environment BUILD:cjs",
+    "build:es": "rollup -c --environment BUILD:esm",
+    "build:dts": "rollup -c --environment BUILD:dts",
+    "build:styles": "node scripts/copy-styles.js",
+    "generate:styles": "node scripts/generate-styles.js",
+    "dev": "npm run generate:styles && rollup -c --watch",
+    "dev:lib": "rollup -c --watch --environment BUILD:cjs",
+    "dev:es": "rollup -c --watch --environment BUILD:esm",
+    "clean": "rm -rf lib es",
+    "lint": "eslint src --ext .ts,.tsx",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "taro",
+    "react",
+    "miniprogram",
+    "components",
+    "nut-ui",
+    "weapp"
+  ],
+  "author": "liucaptain <13610333362@qq.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@tarojs/components": "^3.6.17",
+    "@tarojs/runtime": "^3.6.17",
+    "@tarojs/taro": "^3.6.17",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@nutui/icons-react-taro": "^3.0.2-cpp.3",
+    "@nutui/nutui-react-taro": "^3.0.19-cpp.24",
+    "@tarojs/plugin-framework-react": "^3.6.17",
+    "@tarojs/plugin-platform-weapp": "^3.6.17",
+    "@tarojs/webpack5-runner": "^3.6.17",
+    "classnames": "^2.3.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0"
+  }
+}

package/src/components/common/BottomPopup/index.scss

@@ -0,0 +1,34 @@
+.we-popup {
+  color: red;
+  .nut-overlay {
+    z-index: 100 !important;
+  }
+
+  .nut-popup {
+    position: fixed;
+
+    &-title {}
+
+    &__close-icon--top-right {
+      width: 12px;
+      height: 12px;
+
+      text {
+        font-size: 10px;
+      }
+    }
+  }
+
+  &__title {
+    font-size: 32px;
+    color: #000000;
+  }
+
+  &__footer {}
+
+  &__footer-fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+}

package/src/components/common/BottomPopup/index.tsx

@@ -0,0 +1,129 @@
+import React, { CSSProperties, PropsWithChildren, useEffect, useState, useImperativeHandle } from 'react';
+import { Popup, PopupProps } from '@nutui/nutui-react-taro';
+import { View, Text } from '@tarojs/components';
+import { Close } from '@nutui/icons-react-taro';
+import './index.scss';
+
+export type BottomPopupProps = {
+  /**
+   * 标题
+   */
+  title?: string | React.ReactElement
+  /**
+   * 弹窗是否开启
+   * @default false
+   */
+  visible?: boolean
+  /**
+   * 弹窗高度
+   */
+  height?: number
+  /**
+   * 是否展示关闭按钮
+   * @default false
+   */
+  showClose?: boolean
+  /**
+   * 点击遮罩是否关闭
+   * @default false
+   */
+  maskClose?: boolean
+  /**
+   * 自定义头部导航样式
+  */
+  customHeaderStyles?: CSSProperties
+  /**
+   * 底部固定区域
+   */
+  bottomFixedCard?: React.ReactElement
+} & Partial<Omit<PopupProps, 'round' | 'transition' | 'position' | 'title'>>;
+
+export type BottomPopupRef = {
+  /** 打开弹窗 */
+  open: () => void
+  /** 关闭弹窗 */
+  close: () => void
+} | undefined;
+
+const BottomPopup: React.FC<PropsWithChildren<BottomPopupProps>> = (props, ref) => {
+  const {
+    visible: propsVisible = false,
+    title,
+    height,
+    showClose = false,
+    maskClose = false,
+    customHeaderStyles = {},
+    bottomFixedCard,
+    children,
+    ...restProps
+  } = props;
+  const [visible, setVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setVisible(propsVisible)
+  }, [propsVisible])
+
+  /** 打开 */
+  const handleOpen = () => {
+    setVisible(true)
+  }
+
+  /** 关闭 */
+  const handleClose = () => {
+    setVisible(false);
+  }
+
+  // 暴露方法给外部
+  useImperativeHandle(ref, () => ({
+    open: handleOpen,
+    close: handleClose,
+  }), [])
+
+  const titleRender = () => {
+    if (!title) return
+
+    if (typeof title === 'string') {
+      return (
+        <Text className='bd-popup__title'>{title}</Text>
+      )
+    } else {
+      return title
+    }
+  }
+
+  const footerRender = () => {
+    if (!bottomFixedCard) return
+
+    return (
+      <View className='bd-popup__footer-fixed'>
+        {bottomFixedCard}
+      </View>
+    )
+  }
+
+  return (
+    <View className='we-popup'>
+      {
+        visible && (
+          <Popup
+            round
+            visible={visible}
+            transition="slide-top"
+            style={{ minHeight: '30%' }}
+            position="bottom"
+            title={titleRender()}
+            onClose={handleClose}
+            closeIcon={<Close size={14} />}
+            closeable={showClose}
+            {...restProps}
+          >
+            {children}
+            {footerRender()}
+          </Popup>
+        )
+      }
+    </View>
+  );
+};
+
+export default React.forwardRef<BottomPopupRef, PropsWithChildren<BottomPopupProps>>(BottomPopup as any);

package/src/components/common/Card/index.scss

@@ -0,0 +1,160 @@
+$card-item-inline-padding: 8px;
+
+.we-card {
+  width: 690px;
+  margin: 0 auto;
+  padding: 25px 30px 30px;
+  box-sizing: border-box;
+  border-radius: 20px;
+  background: #ffffff;
+  font-size: 26px;
+  color: #333333;
+
+  &__header {
+    margin-bottom: 40px;
+    padding-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-title {
+      font-size: 30px;
+      font-weight: bold;
+    }
+  }
+
+  &__header-border {
+    border-bottom: 1px solid #F0F0F0;
+  }
+
+  &__body {}
+
+  &__footer-btns {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+
+    &--hidden {
+      position: relative;
+      width: 80px;
+      height: 51px;
+      text-align: center;
+      line-height: 42px;
+      letter-spacing: 4px;
+      font-weight: bold;
+
+      &__list {
+        margin-top: 8px;
+        margin-left: -32px;
+        position: absolute;
+        width: max-content;
+        background: #ffffff;
+        border-radius: 20px;
+        box-shadow: 0 2px 12px rgba(50, 50, 51, .122);
+        z-index: 10001;
+
+        &-item {
+          padding: 12px;
+          box-sizing: border-box;
+          border-bottom: 1px solid #eeeeee;
+
+          /** 只要是card footer中的按钮必须加上这个类型 */
+          .bd-card-footer-btn {
+            margin-inline: 0 !important;
+            border: none !important;
+          }
+        }
+
+        &-item:nth-last-child(1) {
+          border-bottom: none;
+        }
+      }
+
+      &__list::after {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid #ffffff;
+      }
+    }
+  }
+}
+
+.we-card-item {
+  position: relative;
+  margin-bottom: 30px;
+  padding-inline: $card-item-inline-padding;
+  box-sizing: border-box;
+  font-size: 28px;
+  color: #333333;
+
+  &__l {
+    margin-right: 31px;
+    color: #999999;
+  }
+
+  &__l-col {
+    margin-bottom: 12px;
+  }
+
+  &__l-text {}
+
+  &__v {}
+
+  &__v-text {}
+
+  &__v-absolute {
+    width: max-content;
+    height: max-content;
+    position: absolute;
+    right: $card-item-inline-padding;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+
+  &__extra {
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.we-card-item:nth-last-child(1) {
+  margin-bottom: 0;
+}
+
+.we-card-item--align-start {
+  align-items: flex-start!important;
+}
+
+.we-card-item--align-center {
+  align-items: center!important;
+}
+
+.we-card-item--align-end {
+  align-items: flex-end!important;
+}
+
+.we-card-item--row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.we-card-item--row-start {
+  justify-content: flex-start!important;
+}
+
+.we-card-item--row-between {
+  justify-content: space-between!important;
+}
+
+.we-card-item-col {}

package/src/components/common/Card/index.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from '@tarojs/components';
+import CardItem, { CardItemProps } from '../CardItem';
+import classNames from 'classnames';
+import './index.scss';
+
+export type CardProps = {
+  /**
+   * 是否显示Header
+   * @default true
+   */
+  showHeader?: boolean
+  /**
+   * 是否显示Header Border
+   * @default true
+  */
+  showHeaderBorder?: boolean
+  /** 标题 */
+  title?: string | React.ReactElement
+  /** header右边区域 */
+  extra?: React.ReactElement
+  /**
+   * 底部模块
+   * @type {React.ReactElement | React.ReactElement[]}
+   * 如果是类型是数组 则是一个按钮集群，
+   * 超出部分可以一点点点显示剩下的按钮
+  */
+  footer?: React.ReactElement | React.ReactElement[]
+  className?: string
+  onClick?: (e: React.MouseEvent) => void
+};
+
+interface CardComponent extends React.FC<PropsWithChildren<CardProps>> {
+  Item: React.FC<CardItemProps>;
+}
+
+const Card: CardComponent = (props) => {
+  const {
+    showHeader = true,
+    showHeaderBorder = true,
+    title,
+    extra,
+    footer,
+    className,
+    onClick,
+    children
+  } = props
+
+  return (
+    <View className={classNames('we-card', className)} onClick={(e: any) => onClick?.(e)}>
+      {
+        !showHeader ? null : (
+          <View className={classNames(
+            'we-card__header',
+            { 'we-card__header-border': showHeaderBorder }
+          )}>
+            <View className='we-card__header-title'>{title}</View>
+            {!!extra && extra}
+          </View>
+        )
+      }
+      <View className='we-card__body'>
+        {children}
+      </View>
+      {!!footer && footer}
+    </View>
+  );
+};
+
+Card.Item = CardItem
+
+export default Card;

package/src/components/common/CardItem/index.tsx

@@ -0,0 +1,153 @@
+import React, { CSSProperties } from 'react';
+import { ITouchEvent, View } from '@tarojs/components';
+import classNames from 'classnames'
+/** 和Card共用样式 */
+import '../Card/index.scss';
+
+export type CardItemProps = {
+  /** label */
+  label: string | React.ReactElement
+  /** 值 */
+  value: string | number | React.ReactElement | null
+  /**
+   * label分割方式
+   * @default :
+   */
+  labelDivider?: string
+  /**
+ * 是隐藏分割符
+ * @default false
+ */
+  disabledLabelDivider?: boolean
+  /**
+   * 右边区域
+   * x轴排列方向 justify = 'start' 才显示
+  */
+  extra?: React.ReactElement | string | number | null
+  /**
+   * x轴排列方向
+   * @default start
+   */
+  justify?: 'start' | 'between'
+  /**
+ * y轴排列方向
+ * @default center
+ */
+  align?: 'center' | 'start' | 'end'
+  /**
+   * 排列方式
+   * @default inline
+   */
+  layout?: 'inline' | 'vertical'
+  /**
+   * value DOM是否脱离文档流
+   * 仅在layout == 'inline' 支持
+   * 不会影响上下item的间距
+   * @default false
+   */
+  valueAbsolute?: boolean
+  /** 自定义字体样式 */
+  labelStyle?: CSSProperties
+  valueStyle?: CSSProperties
+  className?: string
+  /** 点击事件 */
+  onClick?: (e: ITouchEvent) => void
+  /**
+   * 是否隐藏该组件
+   * @default false
+  */
+  hide?: boolean
+};
+
+const CardItem: React.FC<CardItemProps> = (props) => {
+  const {
+    label,
+    value,
+    labelDivider = ':',
+    extra,
+    justify = 'start',
+    align = 'center',
+    layout = 'inline',
+    valueAbsolute = false,
+    className,
+    disabledLabelDivider = false,
+    labelStyle = {},
+    valueStyle = {},
+    hide,
+    onClick
+  } = props
+
+  const isRow = layout === 'inline';
+
+  const labelRender = () => {
+    let _render = value;
+    // if (typeof label === 'string') {
+    _render = (
+      <View className='bd_card-item__l-text' style={labelStyle}>{label}{disabledLabelDivider ? '' : labelDivider}</View>
+    )
+    // }
+
+    return (
+      <View className={classNames(
+        'bd_card-item__l',
+        { 'bd_card-item__l-col': !isRow }
+      )}
+      >
+        {_render}
+      </View>
+    )
+  }
+
+  const valueRender = () => {
+    let _render = value;
+    if (['string', 'number']?.includes(typeof value)) {
+      _render = (
+        <View className='bd_card-item__v-text' style={valueStyle}>{value}</View>
+      )
+    }
+
+    return (
+      <View
+        className={classNames('bd_card-item__v', {
+          'bd_card-item__v-absolute': isRow && valueAbsolute
+        })}
+        style={valueStyle}
+      >
+        {_render}
+      </View>
+    )
+  }
+
+  const extraRender = () => {
+    if (!(!!extra && justify === 'start')) return null;
+
+    return (
+      <View className='bd_card-item__extra'>
+        {extra}
+      </View>
+    )
+  }
+
+  return (
+    hide ? null : (
+      <View
+        className={classNames(
+          'bd_card-item',
+          `bd_card-item--align-${align}`,
+          {
+            'bd_card-item--row': isRow,
+            'bd_card-item--col': !isRow,
+            'bd_card-item--row-start': isRow && justify === 'start',
+            'bd_card-item--row-between': isRow && justify === 'between'
+          }, className)}
+        onClick={onClick}
+      >
+        {labelRender()}
+        {valueRender()}
+        {extraRender()}
+      </View>
+    )
+  );
+};
+
+export default CardItem;