fix(@six/smart-pharmacy): 智慧药事系统第一版处方详情页黑色模式下页面颜色问题

apps/smart-pharmacy/src/views/prescription/management/detail.vue

@@ -179,7 +179,7 @@ watch(prescriptionId, loadDetail, { immediate: true });
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-3">
           <button
-            class="flex items-center gap-1 text-gray-600 transition-colors hover:text-gray-900"
+            class="text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
             type="button"
             @click="goBack"
           >
@@ -195,20 +195,20 @@ watch(prescriptionId, loadDetail, { immediate: true });
     </template>
 
     <Spin :spinning="loading">
-      <div class="rounded-lg bg-white p-6 shadow-sm">
-        <div class="mb-6 flex items-center justify-between border-b pb-4">
+      <div class="prescription-detail rounded-lg bg-card p-6 shadow-sm">
+        <div class="border-border mb-6 flex items-center justify-between border-b pb-4">
           <div class="flex items-center gap-4">
-            <span class="text-lg font-semibold">煎药中心处方</span>
-            <span class="text-gray-400">|</span>
-            <span class="text-gray-600">
+            <span class="text-foreground text-lg font-semibold">煎药中心处方</span>
+            <span class="text-muted-foreground">|</span>
+            <span class="text-foreground/80">
               处方号：{{ header.number || header.id || '-' }}
             </span>
           </div>
-          <div class="flex items-center gap-2 text-gray-600">
+          <div class="text-foreground/80 flex items-center gap-2">
             <span>{{ header.date }}</span>
-            <span class="text-gray-400">|</span>
+            <span class="text-muted-foreground">|</span>
             <span
-              class="rounded-full bg-yellow-100 px-3 py-1 text-sm text-yellow-700"
+              class="rounded-full bg-yellow-100 px-3 py-1 text-sm text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
             >
               {{ header.status }}
             </span>
@@ -227,7 +227,7 @@ watch(prescriptionId, loadDetail, { immediate: true });
           </Descriptions.Item>
           <Descriptions.Item label="代煎代配" :label-style="{ width: '120px' }">
             <span
-              class="rounded bg-blue-100 px-2 py-0.5 text-sm text-blue-700"
+              class="rounded bg-blue-100 px-2 py-0.5 text-sm text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
             >
               {{ header.decoctionCode }}
             </span>
@@ -249,8 +249,8 @@ watch(prescriptionId, loadDetail, { immediate: true });
         <Tabs v-model:active-key="activeTab" type="card">
           <Tabs.TabPane key="prescription" tab="处方详情">
             <div class="space-y-6">
-              <div class="rounded-lg bg-gray-50 p-4">
-                <h3 class="mb-4 text-sm font-medium text-gray-700">煎药要求</h3>
+              <div class="bg-muted/50 rounded-lg p-4">
+                <h3 class="text-foreground/90 mb-4 text-sm font-medium">煎药要求</h3>
                 <Descriptions :column="4" :size="'small'">
                   <Descriptions.Item label="中药类型">
                     {{ prescriptionDetails.chineseMedicineType }}
@@ -285,8 +285,8 @@ watch(prescriptionId, loadDetail, { immediate: true });
                 </Descriptions>
               </div>
 
-              <div class="rounded-lg bg-gray-50 p-4">
-                <h3 class="mb-4 text-sm font-medium text-gray-700">配送信息</h3>
+              <div class="bg-muted/50 rounded-lg p-4">
+                <h3 class="text-foreground/90 mb-4 text-sm font-medium">配送信息</h3>
                 <Descriptions :column="4" :size="'small'">
                   <Descriptions.Item label="配送方式">
                     {{ deliveryInfo.deliveryMethod }}
@@ -309,8 +309,8 @@ watch(prescriptionId, loadDetail, { immediate: true });
                 </Descriptions>
               </div>
 
-              <div class="rounded-lg bg-gray-50 p-4">
-                <h3 class="mb-4 text-sm font-medium text-gray-700">
+              <div class="bg-muted/50 rounded-lg p-4">
+                <h3 class="text-foreground/90 mb-4 text-sm font-medium">
                   用药信息和金额
                 </h3>
                 <Descriptions :column="4" :size="'small'">
@@ -356,8 +356,8 @@ watch(prescriptionId, loadDetail, { immediate: true });
                 </Descriptions>
               </div>
 
-              <div class="rounded-lg bg-gray-50 p-4">
-                <h3 class="mb-4 text-sm font-medium text-gray-700">就诊信息</h3>
+              <div class="bg-muted/50 rounded-lg p-4">
+                <h3 class="text-foreground/90 mb-4 text-sm font-medium">就诊信息</h3>
                 <Descriptions :column="4" :size="'small'">
                   <Descriptions.Item label="门诊/住院">
                     {{ doctorInfo.outpatientType }}
@@ -395,39 +395,39 @@ watch(prescriptionId, loadDetail, { immediate: true });
           </Tabs.TabPane>
 
           <Tabs.TabPane key="herbal" tab="饮片明细">
-            <div class="rounded-lg bg-gray-50 p-4">
+            <div class="bg-muted/50 rounded-lg p-4">
               <div v-if="herbalDetails.length" class="overflow-x-auto">
-                <table class="w-full text-sm">
+                <table class="prescription-detail-table w-full text-sm">
                   <thead>
-                    <tr class="bg-white">
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                    <tr class="bg-muted/30">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         药品名称
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         国标编码
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         医疗机构药品名称
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         规格
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         产地
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         剂量
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         药品单位
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         中药特殊煎法
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         药品单价（元）
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         医生签名
                       </th>
                     </tr>
@@ -436,20 +436,20 @@ watch(prescriptionId, loadDetail, { immediate: true });
                     <tr
                       v-for="(item, index) in herbalDetails"
                       :key="index"
-                      class="bg-white hover:bg-gray-50"
+                      class="hover:bg-muted/30 bg-card"
                     >
-                      <td class="border-b px-4 py-3">{{ item.name }}</td>
-                      <td class="border-b px-4 py-3">{{ item.nationalCode }}</td>
-                      <td class="border-b px-4 py-3">{{ item.hospitalName }}</td>
-                      <td class="border-b px-4 py-3">{{ item.spec }}</td>
-                      <td class="border-b px-4 py-3">{{ item.origin }}</td>
-                      <td class="border-b px-4 py-3">{{ item.dosage }}</td>
-                      <td class="border-b px-4 py-3">{{ item.unit }}</td>
-                      <td class="border-b px-4 py-3">{{ item.specialMethod }}</td>
-                      <td class="border-b px-4 py-3">
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.name }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.nationalCode }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.hospitalName }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.spec }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.origin }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.dosage }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.unit }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.specialMethod }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">
                         {{ item.price || '-' }}
                       </td>
-                      <td class="border-b px-4 py-3">{{ item.doctorSignature }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.doctorSignature }}</td>
                     </tr>
                   </tbody>
                 </table>
@@ -459,15 +459,15 @@ watch(prescriptionId, loadDetail, { immediate: true });
           </Tabs.TabPane>
 
           <Tabs.TabPane key="flow" tab="流程物流追溯">
-            <div class="rounded-lg bg-gray-50 p-4">
+            <div class="bg-muted/50 rounded-lg p-4">
               <div class="grid grid-cols-2 gap-4">
-                <div class="rounded-lg bg-white p-4">
-                  <h3 class="mb-4 text-sm font-medium text-gray-700">
+                <div class="bg-card rounded-lg p-4">
+                  <h3 class="text-foreground/90 mb-4 text-sm font-medium">
                     处方流转流程
                   </h3>
                   <div
                     v-if="processFlowDetails.length"
-                    class="relative border-l-2 border-gray-200 pl-6"
+                    class="border-border relative border-l-2 pl-6"
                   >
                     <div
                       v-for="(item, index) in processFlowDetails"
@@ -475,19 +475,19 @@ watch(prescriptionId, loadDetail, { immediate: true });
                       class="relative pb-4 last:pb-0"
                     >
                       <div
-                        class="absolute -left-[9px] h-4 w-4 rounded-full border-2 border-white bg-green-500"
+                        class="border-card absolute -left-[9px] h-4 w-4 rounded-full border-2 bg-green-500"
                       />
                       <div class="ml-2">
                         <div
-                          class="flex items-center justify-between pr-24 text-sm font-medium text-gray-800"
+                          class="text-foreground flex items-center justify-between pr-24 text-sm font-medium"
                         >
                           <span>{{ item.status }}</span>
-                          <span class="text-xs text-gray-500">
+                          <span class="text-muted-foreground text-xs">
                             操作时间: {{ item.operationTime }}
                           </span>
                         </div>
                         <div
-                          class="mt-1 flex items-center justify-between pr-24 text-xs text-gray-500"
+                          class="text-muted-foreground mt-1 flex items-center justify-between pr-24 text-xs"
                         >
                           <span>操作人: {{ item.operator }}</span>
                           <span v-if="item.hasPhoto">
@@ -495,7 +495,7 @@ watch(prescriptionId, loadDetail, { immediate: true });
                             <a
                               v-if="item.photoUrl"
                               :href="item.photoUrl"
-                              class="text-blue-500 hover:text-blue-700"
+                              class="text-primary hover:text-primary/80"
                               rel="noopener noreferrer"
                               target="_blank"
                             >
@@ -504,19 +504,7 @@ watch(prescriptionId, loadDetail, { immediate: true });
                             <span v-else>有</span>
                           </span>
                         </div>
-                        <!-- <div v-if="item.water" class="text-xs text-gray-500">
-                          加水量: {{ item.water }}ml
-                        </div>
-                        <div v-if="item.weightCheck" class="text-xs text-gray-500">
-                          复核重量: {{ item.weightCheck }}
-                        </div>
-                        <div v-if="item.startConcentrating" class="text-xs text-gray-500">
-                          开始浓缩药量: {{ item.startConcentrating }}ml
-                        </div> -->
-                        <!-- <div v-if="item.deviceName" class="text-xs text-gray-500">
-                          设备: {{ item.deviceName }}
-                        </div> -->
-                        <div v-if="item.note" class="mt-1 text-xs text-gray-500">
+                        <div v-if="item.note" class="text-muted-foreground mt-1 text-xs">
                           备注: {{ item.note }}
                         </div>
                       </div>
@@ -525,8 +513,8 @@ watch(prescriptionId, loadDetail, { immediate: true });
                   <Empty v-else description="暂无流转流程" />
                 </div>
 
-                <div class="rounded-lg bg-white p-4">
-                  <h3 class="mb-4 text-sm font-medium text-gray-700">物流跟踪</h3>
+                <div class="bg-card rounded-lg p-4">
+                  <h3 class="text-foreground/90 mb-4 text-sm font-medium">物流跟踪</h3>
                   <template
                     v-if="
                       logisticsInfo.company ||
@@ -535,20 +523,20 @@ watch(prescriptionId, loadDetail, { immediate: true });
                     "
                   >
                     <div class="mb-4 flex items-center justify-between">
-                      <span class="text-sm text-gray-500">
+                      <span class="text-muted-foreground text-sm">
                         {{ logisticsInfo.company }}
                         {{ logisticsInfo.trackingNo }}
                       </span>
                       <span
                         v-if="logisticsInfo.status !== '-'"
-                        class="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-700"
+                        class="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
                       >
                         {{ logisticsInfo.status }}
                       </span>
                     </div>
                     <div
                       v-if="logisticsNodes.length"
-                      class="relative border-l-2 border-gray-200 pl-6"
+                      class="border-border relative border-l-2 pl-6"
                     >
                       <div
                         v-for="(item, index) in logisticsNodes"
@@ -556,35 +544,35 @@ watch(prescriptionId, loadDetail, { immediate: true });
                         class="relative pb-4 last:pb-0"
                       >
                         <div
-                          class="absolute -left-[9px] h-4 w-4 rounded-full border-2 border-white bg-yellow-500"
+                          class="border-card absolute -left-[9px] h-4 w-4 rounded-full border-2 bg-yellow-500"
                         />
                         <div class="ml-2">
                           <div
-                            class="flex items-center justify-between pr-8 text-sm font-medium text-gray-800"
+                            class="text-foreground flex items-center justify-between pr-8 text-sm font-medium"
                           >
                             <span>{{ item.status }}</span>
-                            <span class="text-xs text-gray-500">
+                            <span class="text-muted-foreground text-xs">
                               {{ item.operationTime }}
                             </span>
                           </div>
-                          <div class="mt-1 text-xs text-gray-500">
+                          <div class="text-muted-foreground mt-1 text-xs">
                             操作人: {{ item.operator }}
                           </div>
                           <div
                             v-if="item.location && item.location !== '-'"
-                            class="text-xs text-gray-500"
+                            class="text-muted-foreground text-xs"
                           >
                             地点: {{ item.location }}
                           </div>
                           <div
                             v-if="item.trackingNumber && item.trackingNumber !== '-'"
-                            class="text-xs text-gray-500"
+                            class="text-muted-foreground text-xs"
                           >
                             运单号: {{ item.trackingNumber }}
                           </div>
                           <div
                             v-if="item.note && item.note !== '-'"
-                            class="mt-1 text-xs text-gray-500"
+                            class="text-muted-foreground mt-1 text-xs"
                           >
                             备注: {{ item.note }}
                           </div>
@@ -593,7 +581,7 @@ watch(prescriptionId, loadDetail, { immediate: true });
                     </div>
                     <div
                       v-else-if="logisticsInfo.progress"
-                      class="text-xs text-gray-500"
+                      class="text-muted-foreground text-xs"
                     >
                       {{ logisticsInfo.progress }}
                     </div>
@@ -605,37 +593,37 @@ watch(prescriptionId, loadDetail, { immediate: true });
           </Tabs.TabPane>
 
           <Tabs.TabPane key="trace" tab="饮片追溯">
-            <div class="rounded-lg bg-gray-50 p-4">
+            <div class="bg-muted/50 rounded-lg p-4">
               <div v-if="herbalTraceDetails.length" class="overflow-x-auto">
-                <table class="w-full text-sm">
+                <table class="prescription-detail-table w-full text-sm">
                   <thead>
-                    <tr class="bg-white">
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                    <tr class="bg-muted/30">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         饮片名称
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         规格编码
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         饮片批号
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         供应商
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         生产厂家
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         饮片产地
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         生产日期
                       </th>
-                      <th class="border-b px-4 py-3 text-left font-medium text-gray-700">
+                      <th class="border-border text-foreground/90 border-b px-4 py-3 text-left font-medium">
                         有效期至
                       </th>
                       <th
-                        class="border-b px-4 py-3 text-center font-medium text-gray-700"
+                        class="border-border text-foreground/90 border-b px-4 py-3 text-center font-medium"
                       >
                         检验报告
                       </th>
@@ -645,21 +633,21 @@ watch(prescriptionId, loadDetail, { immediate: true });
                     <tr
                       v-for="(item, index) in herbalTraceDetails"
                       :key="index"
-                      class="bg-white hover:bg-gray-50"
+                      class="hover:bg-muted/30 bg-card"
                     >
-                      <td class="border-b px-4 py-3">{{ item.name }}</td>
-                      <td class="border-b px-4 py-3">{{ item.specCode }}</td>
-                      <td class="border-b px-4 py-3">{{ item.batchNo }}</td>
-                      <td class="border-b px-4 py-3">{{ item.supplier }}</td>
-                      <td class="border-b px-4 py-3">{{ item.manufacturer }}</td>
-                      <td class="border-b px-4 py-3">{{ item.origin }}</td>
-                      <td class="border-b px-4 py-3">{{ item.productionDate }}</td>
-                      <td class="border-b px-4 py-3">{{ item.expiryDate }}</td>
-                      <td class="border-b px-4 py-3 text-center">
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.name }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.specCode }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.batchNo }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.supplier }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.manufacturer }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.origin }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.productionDate }}</td>
+                      <td class="border-border text-foreground border-b px-4 py-3">{{ item.expiryDate }}</td>
+                      <td class="border-border border-b px-4 py-3 text-center">
                         <a
                           v-if="item.reportUrl"
                           :href="item.reportUrl"
-                          class="text-blue-500 underline hover:text-blue-700"
+                          class="text-primary hover:text-primary/80 underline"
                           rel="noopener noreferrer"
                           target="_blank"
                         >
@@ -679,3 +667,23 @@ watch(prescriptionId, loadDetail, { immediate: true });
     </Spin>
   </Page>
 </template>
+
+<style scoped>
+:deep(.ant-breadcrumb),
+:deep(.ant-breadcrumb a),
+:deep(.ant-breadcrumb li:last-child) {
+  color: hsl(var(--foreground) / 0.85);
+}
+
+:deep(.ant-breadcrumb a:hover) {
+  color: hsl(var(--foreground));
+}
+
+.prescription-detail :deep(.ant-descriptions-item-label) {
+  color: hsl(var(--muted-foreground));
+}
+
+.prescription-detail :deep(.ant-descriptions-item-content) {
+  color: hsl(var(--foreground));
+}
+</style>