Jelajahi Sumber

✨ feat(components): add cell and cell-group components

- 创建Cell组件,支持标题、值、图标、箭头和点击事件
- 创建CellGroup组件,支持标题和边框控制
- 添加基础样式,包括背景、边框、间距和文字样式
- 实现单元格组内最后一个单元格自动去除底部边框的功能
yourname 1 bulan lalu
induk
melakukan
4f5fb15742

+ 28 - 0
mini/src/components/tdesign/cell-group/index.css

@@ -0,0 +1,28 @@
+.tdesign-cell-group {
+  margin: 20rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.tdesign-cell-group__title {
+  padding: 24rpx 40rpx;
+  font-size: 28rpx;
+  color: #999;
+  background: #fafafa;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.tdesign-cell-group__content {
+  position: relative;
+}
+
+.tdesign-cell-group__content--border {
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+/* 最后一个单元格不需要底部边框 */
+.tdesign-cell-group__content .tdesign-cell:last-child::after {
+  display: none;
+}

+ 36 - 0
mini/src/components/tdesign/cell-group/index.tsx

@@ -0,0 +1,36 @@
+import { View } from '@tarojs/components'
+import './index.css'
+
+interface CellGroupProps {
+  /** 单元格组标题 */
+  title?: string
+  /** 是否显示边框 */
+  border?: boolean
+  /** 自定义样式类 */
+  className?: string
+  /** 子元素 */
+  children?: React.ReactNode
+}
+
+export default function TDesignCellGroup({
+  title,
+  border = true,
+  className = '',
+  children
+}: CellGroupProps) {
+  return (
+    <View className={`tdesign-cell-group ${className}`}>
+      {/* 标题 */}
+      {title && (
+        <View className="tdesign-cell-group__title">
+          {title}
+        </View>
+      )}
+
+      {/* 单元格列表 */}
+      <View className={`tdesign-cell-group__content ${border ? 'tdesign-cell-group__content--border' : ''}`}>
+        {children}
+      </View>
+    </View>
+  )
+}

+ 51 - 0
mini/src/components/tdesign/cell/index.css

@@ -0,0 +1,51 @@
+.tdesign-cell {
+  display: flex;
+  align-items: center;
+  padding: 32rpx 40rpx;
+  background: #fff;
+  position: relative;
+}
+
+.tdesign-cell--border::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 40rpx;
+  right: 0;
+  height: 1px;
+  background: #f5f5f5;
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+}
+
+.tdesign-cell__icon {
+  margin-right: 24rpx;
+  display: flex;
+  align-items: center;
+}
+
+.tdesign-cell__content {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tdesign-cell__title {
+  font-size: 32rpx;
+  color: #333;
+  line-height: 1.2;
+}
+
+.tdesign-cell__value {
+  font-size: 28rpx;
+  color: #999;
+  line-height: 1.2;
+  text-align: right;
+}
+
+.tdesign-cell__arrow {
+  margin-left: 16rpx;
+  display: flex;
+  align-items: center;
+}

+ 71 - 0
mini/src/components/tdesign/cell/index.tsx

@@ -0,0 +1,71 @@
+import { View, Text } from '@tarojs/components'
+import TDesignIcon from '../icon'
+import './index.css'
+
+interface CellProps {
+  /** 单元格标题 */
+  title: string
+  /** 单元格值 */
+  value?: string
+  /** 左侧图标名称 */
+  icon?: string
+  /** 是否显示箭头 */
+  arrow?: boolean
+  /** 是否显示边框 */
+  border?: boolean
+  /** 点击回调 */
+  onClick?: () => void
+  /** 自定义样式类 */
+  className?: string
+}
+
+export default function TDesignCell({
+  title,
+  value = '',
+  icon,
+  arrow = false,
+  border = true,
+  onClick,
+  className = ''
+}: CellProps) {
+  return (
+    <View
+      className={`tdesign-cell ${border ? 'tdesign-cell--border' : ''} ${className}`}
+      onClick={onClick}
+    >
+      {/* 左侧图标 */}
+      {icon && (
+        <View className="tdesign-cell__icon">
+          <TDesignIcon
+            name={icon}
+            size="40rpx"
+            color="#333"
+          />
+        </View>
+      )}
+
+      {/* 内容区域 */}
+      <View className="tdesign-cell__content">
+        <Text className="tdesign-cell__title">
+          {title}
+        </Text>
+        {value && (
+          <Text className="tdesign-cell__value">
+            {value}
+          </Text>
+        )}
+      </View>
+
+      {/* 右侧箭头 */}
+      {arrow && (
+        <View className="tdesign-cell__arrow">
+          <TDesignIcon
+            name="arrow-right"
+            size="32rpx"
+            color="#999"
+          />
+        </View>
+      )}
+    </View>
+  )
+}