update style and add sku

src/pages/product/ProductStockRecordList.vue

@@ -16,8 +16,8 @@
 					:options="dateOptions"
 					@change="selectDateFilter"
 				/>
-				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
+				<t-dropdown-item v-model="operationType" :label="operationFilterLabel" :options="operationOptions" @change="selectOperationType" />
-				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
+				<t-dropdown-item v-model="direction" :label="directionFilterLabel" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
@@ -110,8 +110,13 @@
 							<div class="title">
 								<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
 								<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
-								<strong class="operation" v-text="getStockOperationText(record.operationType)" />
+								<strong class="operation" :class="getOperationClass(record.operationType)" v-text="getStockOperationText(record.operationType)" />
-								<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
+								<strong class="product-name clip-text" v-text="record.productNameSnapshot || '未命名产品'" />
+								<t-tag
+									v-if="record.productNameSnapshot !== record.skuNameSnapshot"
+									size="small"
+									:content="record.skuNameSnapshot"
+								/>
 								<span
 									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
 									class="quantity"
@@ -216,7 +221,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "自定义范围", value: "custom" }
 ];
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "thisWeek"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -239,7 +244,6 @@ const emptyText = computed(() => {
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 const operationOptions = [
 	{ label: "全部操作", value: "ALL" },
-	{ label: "期初入库", value: "INITIAL_IN" },
 	{ label: "手工入库", value: "MANUAL_IN" },
 	{ label: "手工出库", value: "MANUAL_OUT" },
 	{ label: "手工流水冲正", value: "MANUAL_REVOKE" },
@@ -255,6 +259,8 @@ const directionOptions = [
 	{ label: "入库", value: "IN" },
 	{ label: "出库", value: "OUT" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
+const directionFilterLabel = computed(() => directionOptions.find(item => item.value === direction.value)?.label || "出入库");
 
 function getQueryText(key: string): string {
 	const value = route.query[key];
@@ -274,7 +280,6 @@ function getDefaultFilteredSkuUnitId(): string {
 
 function getOperationIcon(type?: StockOperationType): string {
 	return ({
-		INITIAL_IN: "import",
 		MANUAL_IN: "import",
 		MANUAL_OUT: "export",
 		MANUAL_REVOKE: "rollback",
@@ -287,6 +292,21 @@ function getOperationIcon(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "history";
 }
 
+function getOperationClass(type?: StockOperationType): string {
+	return ({
+		INITIAL_IN: "initial-in",
+		MANUAL_IN: "manual-in",
+		MANUAL_OUT: "manual-out",
+		MANUAL_REVOKE: "manual-revoke",
+		ORDER_RESERVE: "order-reserve",
+		ORDER_RELEASE: "order-release",
+		ORDER_OUT: "order-out",
+		ORDER_REVOKE: "order-revoke",
+		STOCKTAKE_GAIN: "stocktake-gain",
+		STOCKTAKE_LOSS: "stocktake-loss"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStockQuantityText(record: StockRecord): string {
 	if (record.quantity === undefined || record.quantity === null || record.quantity === "") {
 		return "";
@@ -635,16 +655,6 @@ onUnmounted(() => {
 				padding: 10px;
 				min-width: 0;
 
-				:deep(.t-cell__title) {
-					min-width: 0;
-					width: 0;
-				}
-
-				:deep(.t-cell__title-text) {
-					min-width: 0;
-					width: 100%;
-				}
-
 				.avatar {
 					width: 3.5rem;
 					height: 3.5rem;
@@ -661,7 +671,7 @@ onUnmounted(() => {
 				}
 
 				.title {
-					gap: .5rem;
+					gap: .25rem;
 					min-width: 0;
 					max-width: 100%;
 					flex: 1;
@@ -671,20 +681,59 @@ onUnmounted(() => {
 					white-space: nowrap;
 
 					.actor {
-						color: var(--td-text-color-secondary);
 						flex: 0 0 auto;
+						color: var(--td-text-color-brand);
 					}
 
 					.operation {
 						flex: 0 0 auto;
+						color: var(--operation-color, var(--td-text-color-secondary));
+						font-weight: 700;
+
+						&.initial-in {
+							--operation-color: #2563eb;
+						}
+
+						&.manual-in {
+							--operation-color: #15803d;
+						}
+
+						&.manual-out {
+							--operation-color: #c2410c;
+						}
+
+						&.manual-revoke {
+							--operation-color: #be123c;
+						}
+
+						&.order-reserve {
+							--operation-color: #7c3aed;
+						}
+
+						&.order-release {
+							--operation-color: #0891b2;
+						}
+
+						&.order-out {
+							--operation-color: #dc2626;
+						}
+
+						&.order-revoke {
+							--operation-color: #4f46e5;
+						}
+
+						&.stocktake-gain {
+							--operation-color: #0f766e;
+						}
+
+						&.stocktake-loss {
+							--operation-color: #a16207;
+						}
 					}
 
 					.product-name {
-						min-width: 0;
 						flex: 0 1 auto;
-						overflow: hidden;
+						color: var(--td-text-color-primary);
-						text-overflow: ellipsis;
-						white-space: nowrap;
 					}
 
 					.quantity {
@@ -720,4 +769,46 @@ onUnmounted(() => {
 		color: var(--td-error-color);
 	}
 }
+
+:global(html.theme-dark) .product-stock-record-list .operation {
+	&.initial-in {
+		--operation-color: #93c5fd;
+	}
+
+	&.manual-in {
+		--operation-color: #86efac;
+	}
+
+	&.manual-out {
+		--operation-color: #fdba74;
+	}
+
+	&.manual-revoke {
+		--operation-color: #fda4af;
+	}
+
+	&.order-reserve {
+		--operation-color: #c4b5fd;
+	}
+
+	&.order-release {
+		--operation-color: #67e8f9;
+	}
+
+	&.order-out {
+		--operation-color: #fca5a5;
+	}
+
+	&.order-revoke {
+		--operation-color: #a5b4fc;
+	}
+
+	&.stocktake-gain {
+		--operation-color: #5eead4;
+	}
+
+	&.stocktake-loss {
+		--operation-color: #fcd34d;
+	}
+}
 </style>