From 8243a82aa78d63712968d15e2ddc8ed1ac533c63 Mon Sep 17 00:00:00 2001
From: xuan <1359774872@qq.com>
Date: Thu, 8 Oct 2026 18:11:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=BE=E5=A4=A7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E7=8A=B6=E6=80=81=E6=A0=87=E7=AD=BE=E5=B9=B6?=
 =?UTF-8?q?=E6=8F=90=E9=AB=98=E8=BE=A8=E8=AF=86=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/status-tag.scss                     | 15 +++++++++++++++
 .../card/storeFabricBusinessOutItem.vue        | 18 ++++++------------
 .../card/storeGoodsProcessInItem.vue           | 18 ++++++------------
 .../card/storeGoodsProcessOutItem.vue          | 18 ++++++------------
 .../card/storeGoodsProcessReturnInItem.vue     | 18 ++++++------------
 .../card/storeGoodsPurchaseInItem.vue          | 18 ++++++------------
 src/components/storefabric/OrderStatusBar.vue  | 17 ++++-------------
 7 files changed, 49 insertions(+), 73 deletions(-)
 create mode 100644 src/common/status-tag.scss

diff --git a/src/common/status-tag.scss b/src/common/status-tag.scss
new file mode 100644
index 0000000..002cb6d
--- /dev/null
+++ b/src/common/status-tag.scss
@@ -0,0 +1,15 @@
+@import '@/common/pda-typography.scss';
+
+.statusTag {
+	flex-shrink: 0;
+	font-size: $pda-font-body;
+	line-height: 1.25;
+	padding: 10rpx 22rpx;
+	border-radius: 10rpx;
+	font-weight: bold;
+}
+.status-0 { background: #d9d9d9; color: #434343; }
+.status-1 { background: #fa8c16; color: #fff; }
+.status-2 { background: #52c41a; color: #fff; }
+.status-3 { background: #f5222d; color: #fff; }
+.status-4 { background: #8c8c8c; color: #fff; }
diff --git a/src/components/card/storeFabricBusinessOutItem.vue b/src/components/card/storeFabricBusinessOutItem.vue
index 1fb6576..428aed9 100644
--- a/src/components/card/storeFabricBusinessOutItem.vue
+++ b/src/components/card/storeFabricBusinessOutItem.vue
@@ -46,21 +46,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>
diff --git a/src/components/card/storeGoodsProcessInItem.vue b/src/components/card/storeGoodsProcessInItem.vue
index e4b7f55..1bba886 100644
--- a/src/components/card/storeGoodsProcessInItem.vue
+++ b/src/components/card/storeGoodsProcessInItem.vue
@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>
diff --git a/src/components/card/storeGoodsProcessOutItem.vue b/src/components/card/storeGoodsProcessOutItem.vue
index 0fd814f..55d8ee0 100644
--- a/src/components/card/storeGoodsProcessOutItem.vue
+++ b/src/components/card/storeGoodsProcessOutItem.vue
@@ -51,21 +51,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>
diff --git a/src/components/card/storeGoodsProcessReturnInItem.vue b/src/components/card/storeGoodsProcessReturnInItem.vue
index eef6d01..feab5ea 100644
--- a/src/components/card/storeGoodsProcessReturnInItem.vue
+++ b/src/components/card/storeGoodsProcessReturnInItem.vue
@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>
diff --git a/src/components/card/storeGoodsPurchaseInItem.vue b/src/components/card/storeGoodsPurchaseInItem.vue
index 14ec1d5..c0e6d3f 100644
--- a/src/components/card/storeGoodsPurchaseInItem.vue
+++ b/src/components/card/storeGoodsPurchaseInItem.vue
@@ -47,21 +47,15 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .cardTopName {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
+	gap: 16rpx;
+	overflow: visible;
+	white-space: normal;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>
diff --git a/src/components/storefabric/OrderStatusBar.vue b/src/components/storefabric/OrderStatusBar.vue
index 7ca07cc..429cc58 100644
--- a/src/components/storefabric/OrderStatusBar.vue
+++ b/src/components/storefabric/OrderStatusBar.vue
@@ -22,7 +22,9 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/common/status-tag.scss';
+
 .statusRow {
 	display: flex;
 	align-items: center;
@@ -32,18 +34,7 @@ export default {
 	border-bottom: 1rpx solid #f5f5f5;
 }
 .statusLabel {
-	font-size: 28rpx;
+	font-size: $pda-font-body;
 	color: #333;
 }
-.statusTag {
-	font-size: 24rpx;
-	padding: 4rpx 12rpx;
-	border-radius: 6rpx;
-	font-weight: normal;
-}
-.status-0 { background: #f0f0f0; color: #666; }
-.status-1 { background: #fff7e6; color: #fa8c16; }
-.status-2 { background: #f6ffed; color: #52c41a; }
-.status-3 { background: #fff1f0; color: #f5222d; }
-.status-4 { background: #f5f5f5; color: #999; }
 </style>