better unit selector

src/pages/product/ProductStockDetail.vue

@@ -9,13 +9,24 @@
 				</template>
 			</product-profile>
 			<t-cell-group theme="card" title="库存" v-entrance-transition="70">
-				<t-cell
+				<t-cell v-if="1 < unitList.length" class="units" title="显示单位">
-					v-if="1 < unitList.length"
+					<template #note>
-					title="显示单位"
+						<div class="options" role="group" aria-label="选择库存展示单位">
-					:note="selectedUnitName"
+							<t-button
-					arrow
+								v-for="item in unitList"
-					@click="openUnitPicker"
+								:key="item.id"
-				/>
+								size="extra-small"
+								:theme="selectedUnit?.id === item.id ? 'primary' : 'default'"
+								:variant="selectedUnit?.id === item.id ? 'base' : 'outline'"
+								:aria-label="`切换到${item.name || '未命名单位'}`"
+								:aria-pressed="selectedUnit?.id === item.id"
+								@click="selectUnit(item.id || '')"
+							>
+								<span v-text="item.name || '未命名单位'" />
+							</t-button>
+						</div>
+					</template>
+				</t-cell>
 				<t-cell class="empty-cell-title-margin">
 					<template #title>
 						<span></span>
@@ -81,15 +92,6 @@
 			:operation="operationType"
 			@success="loadAll"
 		/>
-		<t-popup v-model="unitPickerVisible" placement="bottom">
-			<t-picker
-				v-model="unitPickerDraft"
-				:columns="unitPickerOptions"
-				title="选择库存展示单位"
-				@cancel="unitPickerVisible = false"
-				@confirm="confirmUnit"
-			/>
-		</t-popup>
 	</div>
 </template>
 
@@ -107,7 +109,6 @@ import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
 type ManualStockOperation = Extract<StockOperationType, "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
-type PickerValue = string | number;
 
 defineOptions({ name: "ProductStockDetail" });
 
@@ -122,15 +123,12 @@ const isLoading = ref(false);
 const operationVisible = ref(false);
 const operationType = ref<ManualStockOperation>("MANUAL_IN");
 const selectedUnitId = shallowRef("");
-const unitPickerVisible = shallowRef(false);
-const unitPickerDraft = ref<PickerValue[]>([]);
 const canOperate = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
 const unitList = computed(() => (sku.value?.unitList || []).filter(unit => !!unit.id));
 const selectedUnit = computed<ProductSkuUnit | undefined>(() => unitList.value.find(unit => unit.id === selectedUnitId.value)
 	|| unitList.value.find(unit => unit.isBase)
 	|| unitList.value[0]);
 const selectedUnitName = computed(() => selectedUnit.value?.name || "基础单位");
-const unitPickerOptions = computed(() => [unitList.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
 const displayStock = computed(() => ({
 	onHandQuantity: getStockQuantityText(stock.value?.onHandQuantity),
 	availableQuantity: getStockQuantityText(stock.value?.availableQuantity),
@@ -173,20 +171,10 @@ function setDefaultUnit(nextSku: ProductSku): void {
 	selectedUnitId.value = nextUnitList.find(unit => unit.isBase)?.id || nextUnitList[0]?.id || "";
 }
 
-function openUnitPicker(): void {
+function selectUnit(unitId: string): void {
-	if (1 >= unitList.value.length) {
-		return;
-	}
-	unitPickerDraft.value = [selectedUnit.value?.id || ""];
-	unitPickerVisible.value = true;
-}
-
-function confirmUnit(value: PickerValue[]): void {
-	const unitId = String(value[0] || "");
 	if (unitList.value.some(unit => unit.id === unitId)) {
 		selectedUnitId.value = unitId;
 	}
-	unitPickerVisible.value = false;
 }
 
 async function loadAll(): Promise<void> {
@@ -341,6 +329,17 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.units {
+
+		.options {
+			--td-button-border-radius: .5rem;
+
+			gap: .5rem;
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
+
 	.actions-wrap {
 
 		:deep(.content) {