【页面优化】优化商城相关页面的黑暗模式适配问题，临时优化客服的页面

f61f0fa2 · 卢越 · 323e6197 · f61f0fa2 · f61f0fa2 · f61f0fa2
Commit f61f0fa2 authored Aug 22, 2024 by 卢越
9 changed files
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -66,10 +66,10 @@ export const defaultShortcuts = [
 export function formatDate(date: Date, format?: string): string {
  // 日期不存在，则返回空
  if (!date) {
-    return ''
+    return '';
  }
  // 日期存在，则进行格式化
-  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
+  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
 }
 /**

--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -22,17 +22,16 @@
        <div class="ml-10px w-100%">
          <div class="flex justify-between items-center w-100%">
            <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[#989EA6]">
+            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px;">
-              {{ formatPast(item.lastMessageTime, 'YYYY-mm-dd') }}
+              {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
            </span>
          </div>
          <!-- 最后聊天内容 -->
          <div
-            v-dompurify-html="
+            v-dompurify-html="getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)"
-              getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
+            class="last-message flex items-center color-[var(--left-menu-text-color)]"
-            "
+          >
-            class="last-message flex items-center color-[#989EA6]"
+          </div>
-          ></div>
        </div>
      </div>
    </div>
@@ -182,7 +181,7 @@ watch(showRightMenu, (val) => {
  &-conversation {
    height: 60px;
    padding: 10px;
-    background-color: #fff;
+    //background-color: #fff;
    transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
    .username {
@@ -196,6 +195,7 @@ watch(showRightMenu, (val) => {
    }
    .last-message {
+      font-size: 13px;
      width: 200px;
      overflow: hidden; // 隐藏超出的文本
      white-space: nowrap; // 禁止换行
@@ -205,16 +205,16 @@ watch(showRightMenu, (val) => {
  .active {
    border-left: 5px #3271ff solid;
-    background-color: #eff0f1;
+    background-color: var(--left-menu-bg-active-color);
  }
  .pinned {
-    background-color: #eff0f1;
+    background-color: var(--left-menu-bg-active-color);
  }
  .right-menu-ul {
    position: absolute;
-    background-color: #fff;
+    background-color: var(--app-content-bg-color);
    padding: 10px;
    margin: 0;
    list-style-type: none; /* 移除默认的项目符号 */
@@ -228,7 +228,7 @@ watch(showRightMenu, (val) => {
      border-radius: 12px;
      transition: background-color 0.3s; /* 平滑过渡 */
      &:hover {
-        background-color: #e0e0e0; /* 悬停时的背景颜色 */
+        background-color: var(--left-menu-bg-active-color); /* 悬停时的背景颜色 */
      }
    }
  }

--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -369,9 +369,10 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
      position: absolute;
      bottom: 35px;
      right: 35px;
-      background-color: #fff;
+      background-color: var(--app-content-bg-color);
      padding: 10px;
      border-radius: 30px;
+      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }
@@ -445,7 +446,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
      border-radius: 12rpx;
      padding: 8rpx 16rpx;
      margin-bottom: 16rpx;
-      background-color: #e8e8e8;
+      //background-color: #e8e8e8;
      color: #999;
      font-size: 24rpx;
    }

--- a/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
@@ -7,7 +7,7 @@
      <el-tab-pane label="订单列表" name="b" />
    </el-tabs>
    <div>
-      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 400px)" @scroll="handleScroll">
+      <el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
        <!-- 最近浏览 -->
        <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
        <!-- 订单列表 -->

--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
 <template>
  <div v-if="isObject(getMessageContent)">
    <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
-      <div class="order-card-header flex items-center justify-between p-x-20px">
+      <div class="order-card-header flex items-center justify-between p-x-5px">
        <div class="order-no">订单号：{{ getMessageContent.no }}</div>
        <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
          {{ formatOrderStatus(getMessageContent) }}
@@ -16,7 +16,7 @@
          :title="item.spuName"
        />
      </div>
-      <div class="pay-box flex justify-end pr-20px">
+      <div class="pay-box flex justify-end pr-5px">
        <div class="flex items-center">
          <div class="discounts-title pay-color"
            >共 {{ getMessageContent?.productCount }} 件商品,总金额:
@@ -97,18 +97,21 @@ function formatOrderStatus(order: any) {
 .order-list-card-box {
  border-radius: 10px;
  padding: 10px;
-  background-color: #e2e2e2;
+  border: 1px #6a6a6a solid;
+  background-color: var(--app-content-bg-color);
  .order-card-header {
    height: 28px;
    .order-no {
-      font-size: 16px;
+      font-size: 10px;
      font-weight: 500;
    }
  }
  .pay-box {
+    padding-top: 10px;
    .discounts-title {
      font-size: 16px;
      line-height: normal;
@@ -123,24 +126,33 @@ function formatOrderStatus(order: any) {
    }
    .pay-color {
-      color: #333;
+      font-size: 13px;
+      color: var(--left-menu-text-color);
    }
  }
 }
 .warning-color {
  color: #faad14;
+  font-size: 11px;
+  font-weight: bold;
 }
 .danger-color {
  color: #ff3000;
+  font-size: 11px;
+  font-weight: bold;
 }
 .success-color {
  color: #52c41a;
+  font-size: 11px;
+  font-weight: bold;
 }
 .info-color {
  color: #999999;
+  font-size: 11px;
+  font-weight: bold;
 }
 </style>
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -113,7 +113,8 @@ const skuString = computed(() => {
 .ss-order-card-warp {
  padding: 20px;
  border-radius: 10px;
-  background-color: #e2e2e2;
+  border: 1px #6a6a6a solid;
+  background-color: var(--app-content-bg-color);
  .img-box {
    width: 80px;
@@ -139,13 +140,13 @@ const skuString = computed(() => {
  }
  .title-text {
-    font-size: 16px;
+    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
  }
  .spec-text {
-    font-size: 16px;
+    font-size: 10px;
    font-weight: 400;
    color: #999999;
    min-width: 0;
@@ -157,13 +158,13 @@ const skuString = computed(() => {
  }
  .price-text {
-    font-size: 16px;
+    font-size: 11px;
    font-weight: 500;
    font-family: OPPOSANS;
  }
  .total-text {
-    font-size: 16px;
+    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    color: #999999;

--- a/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -80,8 +80,8 @@ export const useEmoji = () => {
  /**
   * 将文本中的表情替换成图片
   *
-   * @param data 文本
   * @return 替换后的文本
+   * @param content 消息内容
   */
  const replaceEmoji = (content: string) => {
    let newData = content
@@ -93,7 +93,7 @@ export const useEmoji = () => {
          const emojiFile = getEmojiFileByName(item)
          newData = newData.replace(
            item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}"/>`
+            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
          )
        })
      }

--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -41,7 +41,7 @@
          <template #header>
            <div
              class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
-              style="background-color: #f7f7f7"
+              style="background-color: var(--app-content-bg-color)"
            >
              <span class="mr-20px">订单号：{{ scope.row.no }} </span>
              <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>

--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -397,13 +397,14 @@ onMounted(async () => {
    align-items: center;
    min-height: 30px;
    padding: 10px;
-    background-color: #f7f8fa;
+    border-radius: var(--el-card-border-radius);
+    background-color: var(--app-content-bg-color);
    &::before {
      position: absolute;
      top: 10px;
      left: 13px; /* 将伪元素水平居中 */
-      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+      border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
      border-style: solid;
      border-width: 8px; /* 调整尖角大小 */
      content: ''; /* 必须设置 content 属性 */