fix ProductStockList.vue style

2026-09-03 16:45:37 +08:00
parent 8ca2de5676
commit 9b82ec6a04
5 changed files with 200 additions and 185 deletions
@@ -0,0 +1,104 @@
+<template>
+	<card-container class="info" v-entrance-transition>
+		<div class="content">
+			<div class="left">
+				<t-image
+					v-if="getProductPhotoURL(props.product)"
+					:src="getProductPhotoURL(props.product)"
+					:alt="props.product.name || '产品图片'"
+					fit="cover"
+					class="avatar"
+				/>
+				<div
+					v-else
+					class="avatar placeholder"
+					v-text="(props.product.name || props.product.code || '产').slice(0, 1)"
+				/>
+			</div>
+			<div class="main">
+				<div class="header">
+					<h3 class="name" v-text="props.product.name || '未命名产品'" />
+					<div class="code gray" v-text="props.product.code || '-'" />
+				</div>
+				<div class="tags">
+					<t-tag
+						variant="light-outline"
+						theme="primary"
+						:content="getProductTypeText(props.product.productType)"
+					/>
+					<t-tag
+						variant="light-outline"
+						:theme="getProductStatusTheme(props.product.status)"
+						:content="getProductStatusText(props.product.status)"
+					/>
+					<slot name="tags" />
+				</div>
+			</div>
+		</div>
+	</card-container>
+</template>
+
+<script setup lang="ts">
+import type { Product } from "@/types/Product";
+import { getProductPhotoURL, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+
+defineOptions({ name: "ProductProfile" });
+
+interface Props {
+	product: Product;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="less">
+.info {
+	margin: 0 1rem;
+
+	.content {
+		gap: .5rem;
+		padding: .5rem;
+		display: flex;
+
+		.avatar {
+			width: 7rem;
+			height: 7rem;
+			overflow: hidden;
+			border-radius: .75rem;
+		}
+
+		.placeholder {
+			color: var(--td-text-color-placeholder);
+			display: flex;
+			background: var(--td-bg-color-secondarycontainer);
+			align-items: center;
+			justify-content: center;
+		}
+
+		.main {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+
+			.header {
+
+				.name {
+					margin: 0;
+				}
+
+				.code {
+					font-size: .875rem;
+					margin-top: .25rem;
+				}
+			}
+
+			.tags {
+				gap: .5rem;
+				display: flex;
+				flex-wrap: wrap;
+			}
+		}
+	}
+}
+</style>