imbytecat/fullstack-starter
1
1
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 替换原生下拉控件

Browse Source
This commit is contained in:
imbytecat
2026-05-12 00:39:44 +08:00
parent 84e3f02752
commit 8f953cd6a1
2 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/batteries.tsx
+21 -20
View File
@@ -6,13 +6,14 @@ import { useEffect, useMemo, useState } from 'react'
import { z } from 'zod'
import { orpc } from '@/client/orpc'
import { MotionCardDiv, MotionHeader, MotionSection, MotionTableRow } from '@/components/motion'
import { Badge, Button, Card, Input, SectionTitle, Select } from '@/components/ui'
import { Badge, Button, Card, Input, SectionTitle, Select, SelectOption } from '@/components/ui'
import type { BatteryInfo, BatteryListSort, PowerStatus } from '@/domain/battery'
import { BATTERY_LIST_SORT, BATTERY_LIST_SORT_VALUES, POWER_STATUS, POWER_STATUS_VALUES } from '@/domain/battery'
const pageSizeOptions = [20, 50, 100] as const
type PageSizeOption = (typeof pageSizeOptions)[number]
const firstPageCursor = '__FIRST_PAGE__'
const allPowerStatusValue = 'all'
const searchFilterSchema = z.preprocess(
(value) => (typeof value === 'string' ? value.trim() || undefined : value),
@@ -78,7 +79,7 @@ function parseSort(value: string): BatteryListSort {
}
function parsePowerStatus(value: string): PowerStatus | undefined {
if (value === '') return undefined
if (value === allPowerStatusValue) return undefined
const parsed = Number(value)
@@ -326,22 +327,22 @@ function BatteriesPage() {
</label>
<Select
id="power-status-select"
value={search.powerStatus ?? ''}
onChange={(e) => {
value={search.powerStatus ?? allPowerStatusValue}
onValueChange={(value) => {
navigate({
search: (prev) => ({
...prev,
powerStatus: parsePowerStatus(e.target.value),
powerStatus: parsePowerStatus(value),
cursor: undefined,
cursors: [],
}),
})
}}
>
<option value="">所有充电状态</option>
<option value={POWER_STATUS.NOT_CHARGING}>未充电</option>
<option value={POWER_STATUS.CHARGING}>充电中</option>
<option value={POWER_STATUS.FULL}>已充满</option>
<SelectOption value={allPowerStatusValue}>所有充电状态</SelectOption>
<SelectOption value={POWER_STATUS.NOT_CHARGING}>未充电</SelectOption>
<SelectOption value={POWER_STATUS.CHARGING}>充电中</SelectOption>
<SelectOption value={POWER_STATUS.FULL}>已充满</SelectOption>
</Select>
</div>
@@ -352,21 +353,21 @@ function BatteriesPage() {
<Select
id="sort-select"
value={search.sort}
onChange={(e) => {
onValueChange={(value) => {
navigate({
search: (prev) => ({
...prev,
sort: parseSort(e.target.value),
sort: parseSort(value),
cursor: undefined,
cursors: [],
}),
})
}}
>
<option value={BATTERY_LIST_SORT.CREATED_AT_DESC}>最新更新</option>
<option value={BATTERY_LIST_SORT.CREATED_AT_ASC}>最早更新</option>
<option value={BATTERY_LIST_SORT.POWER_DESC}>电量从高到低</option>
<option value={BATTERY_LIST_SORT.POWER_ASC}>电量从低到高</option>
<SelectOption value={BATTERY_LIST_SORT.CREATED_AT_DESC}>最新更新</SelectOption>
<SelectOption value={BATTERY_LIST_SORT.CREATED_AT_ASC}>最早更新</SelectOption>
<SelectOption value={BATTERY_LIST_SORT.POWER_DESC}>电量从高到低</SelectOption>
<SelectOption value={BATTERY_LIST_SORT.POWER_ASC}>电量从低到高</SelectOption>
</Select>
</div>
@@ -377,20 +378,20 @@ function BatteriesPage() {
<Select
id="page-size-select"
value={search.pageSize}
onChange={(e) => {
onValueChange={(value) => {
navigate({
search: (prev) => ({
...prev,
pageSize: parsePageSize(e.target.value),
pageSize: parsePageSize(value),
cursor: undefined,
cursors: [],
}),
})
}}
>
<option value="20">20 条/页</option>
<option value="50">50 条/页</option>
<option value="100">100 条/页</option>
<SelectOption value="20">20 条/页</SelectOption>
<SelectOption value="50">50 条/页</SelectOption>
<SelectOption value="100">100 条/页</SelectOption>
</Select>
</div>