feat: 添加VITE_PUBLIC_IMG_PATH环境变量并更新图片路径

为了支持不同环境下的图片路径配置，添加了VITE_PUBLIC_IMG_PATH环境变量，并在相关组件中更新了图片路径的引用方式。同时，调整了标签组件的样式以提升用户体验。

.env.development

@@ -9,3 +9,5 @@ VITE_ROUTER_HISTORY = "hash"
 
 # 后端地址
 VITE_APP_BASE_API = '/dev-api'
+
+VITE_PUBLIC_IMG_PATH = "/"

.env.production

@@ -13,4 +13,6 @@ VITE_CDN = false
 VITE_COMPRESSION = "none"
 
 # 后端地址
-VITE_APP_BASE_API = '/shop-back-end'
+VITE_APP_BASE_API = '/shop-back-end'
+
+VITE_PUBLIC_IMG_PATH = "/shop-admin/"

.env.staging

@@ -16,4 +16,6 @@ VITE_CDN = false
 VITE_COMPRESSION = "none"
 
 # 后端地址
-VITE_APP_BASE_API = '/shop-back-end'
+VITE_APP_BASE_API = '/shop-back-end'
+
+VITE_PUBLIC_IMG_PATH = "/shop-admin/"

src/layout/components/tag/index.scss

@@ -51,18 +51,19 @@
   .scroll-item {
     position: relative;
     display: inline-block;
-    height: 28px;
+    height: 38px;
-    padding: 0 6px;
+    padding: 2px 6px;
     margin-right: 4px;
-    line-height: 28px;
+    line-height: 34px;
     cursor: pointer;
-    border-radius: 3px 3px 0 0;
+    border-color: transparent;
-    box-shadow: 0 0 1px #888;
+    border-radius: 6px 6px 0 0;
+    /* box-shadow: 0 0 1px #888; */
     transition: all 0.4s;
 
     .el-icon-close {
       position: absolute;
-      top: 50%;
+      top: 48%;
       font-size: 10px;
       color: var(--el-color-primary);
       cursor: pointer;
@@ -99,7 +100,7 @@
   .scroll-container {
     position: relative;
     flex: 1;
-    padding: 5px 0;
+    padding: 0;
     overflow: hidden;
     white-space: nowrap;
 
@@ -194,7 +195,31 @@
 
 .scroll-item.is-active {
   position: relative;
-  color: #fff;
+  background-color: #e6f7ff;
+  border-bottom: none;
+  z-index: 1;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    width: 18px;
+    height: 18px;
+    background: transparent;
+  }
+
+  &::before {
+    left: -18px;
+    border-bottom-right-radius: 18px;
+    box-shadow: 9px 0 0 0 #e6f7ff;
+  }
+
+  &::after {
+    right: -18px;
+    border-bottom-left-radius: 18px;
+    box-shadow: -9px 0 0 0 #e6f7ff;
+  }
 
   &:not(:first-child) {
     padding-right: 18px;
@@ -292,4 +317,4 @@
   height: 2px;
   background: var(--el-color-primary);
   animation: schedule-out-width 200ms ease-in;
-}
+}

src/views/cabinet/smart-cabinet-card/detail.vue

@@ -7,6 +7,7 @@ import { CabinetImgMap } from "@/utils/cabinetImgMap";
 import GatewayConfigModal from "@/views/cabinet/smart-cabinet/GatewayConfigModal.vue";
 import ShopConfigModal from "@/views/cabinet/smart-cabinet/ShopConfigModal.vue";
 import MainCabinetConfigModal from "@/views/cabinet/smart-cabinet/MainCabinetConfigModal.vue";
+const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
 
 defineOptions({
   name: "SmartCabinetDetail"
@@ -48,7 +49,7 @@ onMounted(() => {
     <div class="flex-container">
       <el-card class="cabinet-info-card">
         <div class="cabinet-header">
-          <img :src="`/img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
+          <img :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[cabinetInfo.templateNo]?.img || 'default.jpg'}`"
             class="cabinet-image" />
           <div class="cabinet-name">{{ cabinetInfo.cabinetName }}</div>
         </div>

src/views/cabinet/smart-cabinet-card/index.vue

@@ -12,6 +12,7 @@ import Refresh from "@iconify-icons/ep/refresh";
 import View from "@iconify-icons/ep/view";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import SmartCabinetCardFormModal from "./smart-cabinet-card-form-modal.vue";
+const { VITE_PUBLIC_IMG_PATH: IMG_PATH } = import.meta.env;
 
 defineOptions({
   name: "SmartCabinetCard"
@@ -113,7 +114,8 @@ onMounted(() => {
           <el-col v-for="(item, index) in dataList" :key="item.cabinetId" :xs="24" :sm="12" :md="8" :lg="4" :xl="4">
             <el-card class="cabinet-card" :body-style="{ padding: '8px 20px' }">
               <div class="card-content">
-                <img :src="`/img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
+                <img
+                  :src="`${IMG_PATH}img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
                   class="cabinet-image" />
                 <el-descriptions class="cabinet-info" :column="2">
                   <el-descriptions-item class="name" :span="2">柜体名称：{{ item.cabinetName }}
@@ -148,9 +150,11 @@ onMounted(() => {
     margin-right: 12px;
   }
 }
+
 :deep(.el-descriptions__cell) {
-  padding-bottom: 1px!important;
+  padding-bottom: 1px !important;
 }
+
 .cabinet-card {
   margin-bottom: 12px;
   min-height: 210px;