From 240c235921df31a82de74bf9a487b7a74200ab3a Mon Sep 17 00:00:00 2001 From: ozh Date: Wed, 9 Sep 2026 11:22:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=96=B0=E5=A2=9E=20ListRow=20?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=A1=8C=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=8E=A5?= =?UTF-8?q?=E5=85=A5=E6=88=91=E7=9A=84=E9=A1=B5/=E8=AE=BE=E5=A4=87?= =?UTF-8?q?=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/list-row/index.module.scss | 45 +++++++++++++++++++++++ src/components/list-row/index.tsx | 32 ++++++++++++++++ src/pages/device/detail.module.scss | 17 --------- src/pages/device/detail.tsx | 13 +++---- src/pages/mine/index.module.scss | 19 +--------- src/pages/mine/index.tsx | 18 +++------ 6 files changed, 90 insertions(+), 54 deletions(-) create mode 100644 src/components/list-row/index.module.scss create mode 100644 src/components/list-row/index.tsx diff --git a/src/components/list-row/index.module.scss b/src/components/list-row/index.module.scss new file mode 100644 index 0000000..c40c964 --- /dev/null +++ b/src/components/list-row/index.module.scss @@ -0,0 +1,45 @@ +.group { + background: $color-bg-white; + border-radius: $radius-lg; + box-shadow: $shadow-card; + overflow: hidden; +} + +.row { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 104px; + padding: 0 32px; + background: $color-bg-white; + border-bottom: 1px solid $color-border; +} + +.group .row:last-child { + border-bottom: none; +} + +.rowPressed { + background: $color-bg-press; +} + +.label { + font-size: 30px; + color: $color-text; +} + +.rowDanger .label { + color: $color-danger-deep; +} + +.value { + margin-left: 24px; + font-size: 28px; + color: $color-text; +} + +.arrow { + margin-left: 16px; + font-size: 36px; + color: $color-text-placeholder; +} diff --git a/src/components/list-row/index.tsx b/src/components/list-row/index.tsx new file mode 100644 index 0000000..c17e5b0 --- /dev/null +++ b/src/components/list-row/index.tsx @@ -0,0 +1,32 @@ +import { View, Text } from '@tarojs/components' +import type { ReactNode } from 'react' +import styles from './index.module.scss' + +interface ListRowProps { + label: string + value?: string + arrow?: boolean + onClick?: () => void + danger?: boolean +} + +export function ListRow({ label, value, arrow, onClick, danger }: ListRowProps) { + const cls = [styles.row, danger ? styles.rowDanger : ''].filter(Boolean).join(' ') + return ( + + {label} + {value && {value}} + {arrow && ›} + + ) +} + +// 分组容器：白卡外观 + 最后一条分割线由本模块组合选择器去除 +// （CSS Modules 行组件无法感知父级，:last-child 必须写在同模块内） +export function ListRowGroup({ children }: { children: ReactNode }) { + return {children} +} diff --git a/src/pages/device/detail.module.scss b/src/pages/device/detail.module.scss index f47a89c..cb0e70c 100644 --- a/src/pages/device/detail.module.scss +++ b/src/pages/device/detail.module.scss @@ -106,21 +106,4 @@ .infoCard { margin: 4px 24px 24px; - padding: 8px 32px; - background: $color-bg-white; - border-radius: $radius-lg; - box-shadow: $shadow-card; } - -.infoRow { - min-height: 104px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid $color-border; -} - -.infoRow:last-child { border-bottom: none; } - -.infoLabel { font-size: 28px; color: $color-text-secondary; } -.infoValue { font-size: 28px; color: $color-text; } diff --git a/src/pages/device/detail.tsx b/src/pages/device/detail.tsx index e5fe0e0..fd9ea2c 100644 --- a/src/pages/device/detail.tsx +++ b/src/pages/device/detail.tsx @@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useMemo } from 'react' import Taro, { useRouter, useDidShow, useDidHide } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import { Navbar } from '@/components/navbar' +import { ListRow, ListRowGroup } from '@/components/list-row' import { Loading } from '@/components/loading' import { StateView } from '@/components/state-view' import { VitalWave } from '@/components/vital-wave' @@ -140,14 +141,10 @@ export default function Detail() { - - 设备型号 - {deviceModel || '-'} - - - 设备 ID - {deviceId || '-'} - + + + + )} diff --git a/src/pages/mine/index.module.scss b/src/pages/mine/index.module.scss index 9629afe..d13aca9 100644 --- a/src/pages/mine/index.module.scss +++ b/src/pages/mine/index.module.scss @@ -38,21 +38,6 @@ color: $color-text-secondary; } -.menu { margin-top: 20px; } - -.item { - height: 104px; - padding: 0 32px; - background: $color-bg-white; - border-bottom: 1px solid $color-border; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 30px; - color: $color-text; -} - -.arrow { - font-size: 36px; - color: $color-text-placeholder; +.menuCard { + margin: 20px 24px 0; } diff --git a/src/pages/mine/index.tsx b/src/pages/mine/index.tsx index cb3ad6d..4a2a547 100644 --- a/src/pages/mine/index.tsx +++ b/src/pages/mine/index.tsx @@ -3,6 +3,7 @@ import { View, Text } from '@tarojs/components' import { useAppDispatch, useAppSelector } from '@/store/hooks' import { clearAuth } from '@/store/authSlice' import { Navbar } from '@/components/navbar' +import { ListRow, ListRowGroup } from '@/components/list-row' import { getUserInfo, type UserInfo } from '@/api/user' import { useToast } from '@/hooks/useToast' import { reLaunch, navigateTo } from '@/utils/navigation' @@ -36,18 +37,11 @@ export default function Mine() { - - navigateTo(ROUTES.DEVICE_ADD)} - > - 添加设备 - › - - - 退出登录 - › - + + + navigateTo(ROUTES.DEVICE_ADD)} /> + + )