From 9d2e7d9e137abf35b2be10f8ed74f805274e8a29 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Wed, 25 Mar 2026 11:36:56 +0800
Subject: [PATCH] =?UTF-8?q?style(@vben/web-antd):=20P0=20=E7=B4=A7?=
 =?UTF-8?q?=E6=80=A5=E5=B7=A5=E5=8D=95=E5=8D=A1=E7=89=87=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92=E6=B8=90=E5=8F=98=E5=85=89=E6=99=95?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除左侧红色竖条（border-left），改为右上角径向渐变
- 渐变色与 P0 标签色系协调（#C01D1D 14% 不透明度）
- 暗色模式适配渐变加深至 18%
- 移除 overflow:hidden 避免裁切子元素阴影
- 状态标签改为 span + inline style 双色渲染
- 同步更新 cleaning/work-order 卡片视图

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../cleaning/work-order/modules/card-view.vue | 50 ++++++++++++++++---
 .../ops/work-order/modules/card-view.vue      | 50 ++++++++++++++++---
 2 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
index 0225d7620..b6bb0f642 100644
--- a/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/modules/card-view.vue
@@ -300,7 +300,10 @@ onMounted(() => {
             <div class="card-header">
               <div
                 class="status-info"
-                :style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
+                :style="{
+                  '--status-color': STATUS_COLOR_MAP[item.status]?.text,
+                  '--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
+                }"
               >
                 <IconifyIcon
                   :icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -389,12 +392,15 @@ onMounted(() => {
             <div class="card-footer">
               <!-- 左侧：类型 + 时间 -->
               <div class="card-meta">
-                <Tag
-                  :color="ORDER_TYPE_COLOR_MAP[item.orderType]"
+                <span
                   class="type-tag"
+                  :style="{
+                    backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
+                    color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
+                  }"
                 >
                   {{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
-                </Tag>
+                </span>
                 <span class="create-time">{{
                   formatTime(item.createTime)
                 }}</span>
@@ -536,7 +542,22 @@ onMounted(() => {
     }
 
     &--urgent {
-      border-left: 3px solid #ff4d4f;
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 120px;
+        height: 120px;
+        pointer-events: none;
+        content: '';
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 14%) 0%,
+          rgb(192 29 29 / 6%) 40%,
+          transparent 70%
+        );
+        border-radius: 0 8px 0 0;
+      }
     }
 
     &--terminal {
@@ -557,14 +578,18 @@ onMounted(() => {
   }
 
   .status-info {
-    --status-color: #8c8c8c;
+    --status-color: #6b5e52;
+    --status-bg: #f0ede8;
 
     display: flex;
     gap: 4px;
     align-items: center;
+    padding: 2px 8px;
     font-size: 12px;
     font-weight: 500;
     color: var(--status-color);
+    background: var(--status-bg);
+    border-radius: 4px;
 
     .status-icon {
       font-size: 14px;
@@ -693,10 +718,12 @@ onMounted(() => {
 
     .type-tag {
       flex-shrink: 0;
+      padding: 1px 6px;
       margin: 0;
       font-size: 11px;
+      font-weight: 500;
       line-height: 16px;
-      border: none;
+      border-radius: 4px;
     }
 
     .order-code {
@@ -784,6 +811,15 @@ html.dark {
       &:hover {
         border-color: #434343;
       }
+
+      &--urgent::before {
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 18%) 0%,
+          rgb(192 29 29 / 7%) 40%,
+          transparent 70%
+        );
+      }
     }
 
     .card-title {
diff --git a/apps/web-antd/src/views/ops/work-order/modules/card-view.vue b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
index ed075c153..4c26e8ee0 100644
--- a/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
+++ b/apps/web-antd/src/views/ops/work-order/modules/card-view.vue
@@ -298,7 +298,10 @@ defineExpose({
             <div class="card-header">
               <div
                 class="status-info"
-                :style="{ '--status-color': STATUS_COLOR_MAP[item.status] }"
+                :style="{
+                  '--status-color': STATUS_COLOR_MAP[item.status]?.text,
+                  '--status-bg': STATUS_COLOR_MAP[item.status]?.bg,
+                }"
               >
                 <IconifyIcon
                   :icon="STATUS_ICON_MAP[item.status] || 'solar:circle-bold'"
@@ -387,12 +390,15 @@ defineExpose({
             <div class="card-footer">
               <!-- 左侧：类型 + 时间 -->
               <div class="card-meta">
-                <Tag
-                  :color="ORDER_TYPE_COLOR_MAP[item.orderType]"
+                <span
                   class="type-tag"
+                  :style="{
+                    backgroundColor: ORDER_TYPE_COLOR_MAP[item.orderType]?.bg,
+                    color: ORDER_TYPE_COLOR_MAP[item.orderType]?.text,
+                  }"
                 >
                   {{ ORDER_TYPE_TEXT_MAP[item.orderType] }}
-                </Tag>
+                </span>
                 <span class="create-time">{{
                   formatTime(item.createTime)
                 }}</span>
@@ -534,7 +540,22 @@ defineExpose({
     }
 
     &--urgent {
-      border-left: 3px solid #ff4d4f;
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 120px;
+        height: 120px;
+        pointer-events: none;
+        content: '';
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 14%) 0%,
+          rgb(192 29 29 / 6%) 40%,
+          transparent 70%
+        );
+        border-radius: 0 8px 0 0;
+      }
     }
 
     &--terminal {
@@ -555,14 +576,18 @@ defineExpose({
   }
 
   .status-info {
-    --status-color: #8c8c8c;
+    --status-color: #6b5e52;
+    --status-bg: #f0ede8;
 
     display: flex;
     gap: 4px;
     align-items: center;
+    padding: 2px 8px;
     font-size: 12px;
     font-weight: 500;
     color: var(--status-color);
+    background: var(--status-bg);
+    border-radius: 4px;
 
     .status-icon {
       font-size: 14px;
@@ -691,10 +716,12 @@ defineExpose({
 
     .type-tag {
       flex-shrink: 0;
+      padding: 1px 6px;
       margin: 0;
       font-size: 11px;
+      font-weight: 500;
       line-height: 16px;
-      border: none;
+      border-radius: 4px;
     }
 
     .order-code {
@@ -782,6 +809,15 @@ html.dark {
       &:hover {
         border-color: #434343;
       }
+
+      &--urgent::before {
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgb(192 29 29 / 18%) 0%,
+          rgb(192 29 29 / 7%) 40%,
+          transparent 70%
+        );
+      }
     }
 
     .card-title {