fix(layout/appmain): 修复飞书客户端_首页Panel暗黑模式无效问题

.env.development

@@ -2,10 +2,10 @@
 VITE_APP_TITLE = 王小卤-链路中心
 
 # 基地址
-VITE_APP_BASE_API = '/dev-api'
+# VITE_APP_BASE_API = '/dev-api'
 # VITE_APP_BASE_API = '/qllan'
 # VITE_APP_BASE_API = '/bclan'
-# VITE_APP_BASE_API = '/home'
+VITE_APP_BASE_API = '/home'
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

src/assets/styles/element-ui.scss

@@ -94,3 +94,7 @@
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
 }
+
+.el-select{
+  width: 215px;
+}
\ No newline at end of file

src/assets/styles/variables.module.scss

@@ -82,15 +82,20 @@ $--color-info: #909399;
 
 // 高亮模式变量
 html {
+  --el-gray-1: rgba(0, 0, 0, 0.45);
+  --el-gray-2: #666666;
 
   /* 主页背景 */
   .app-main {
-    --el-bg-color: #f1f3f8;
+    background-color: #f1f3f8 !important;
   }
 }
 
 // 暗黑模式变量
 html.dark {
+  --el-gray-1: white;
+  --el-gray-2: white;
+
   /* 默认通用 */
   --el-bg-color: #141414;
   --el-bg-color-overlay: #1d1e1f;
@@ -235,6 +240,6 @@ html.dark {
 
   /* 主页背景 */
   .app-main {
-    --el-bg-color: var(--el-bg-color);
+    background-color: var(--el-bg-color) !important;
   }
 }
\ No newline at end of file

src/components/ECharts/GroupLegend/index.vue

@@ -48,7 +48,7 @@ export default {
   methods: {
     handleClick(item) {
       item.effective = !item.effective
-      this.$emit('click')
+      this.$emit('clickItem')
     }
   }
 }
@@ -134,8 +134,8 @@ export default {
           border: 3px solid var(--color);
           border-radius: 50%;
           position: absolute;
-          top: 0;
-          left: 7.75px;
+          top: 0.5px;
+          left: 7.45px;
         }
       }
 

src/components/LevitatedSphere/index.vue

@@ -136,7 +136,7 @@ export default {
 
   }
 
-  ::v-deep .el-drawer__body {
+  ::v-deep(.el-drawer__body) {
     padding: 10px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);

src/layout/components/AppMain.vue

@@ -40,7 +40,7 @@ function addIframe() {
   width: 100%;
   position: relative;
   overflow: hidden;
-  background: var(--el-bg-color);
+  background-color: var(--el-bg-color);
 }
 
 .fixed-header + .app-main {

src/views/bi/competitor/cmm/index.vue

@@ -2,13 +2,14 @@
   <div class="chart_wrap">
     <el-form :model="queryParams"
       inline
-      size="small">
+      size="default">
       <el-form-item label="直播间">
         <el-select v-model="queryParams.brandList"
           @change="queryChangeFn"
           multiple
           clearable
-          collapse-tags>
+          collapse-tags
+          collapse-tags-tooltip>
           <el-option v-for="str in brandList"
             :label="str"
             :value="str">
@@ -37,7 +38,7 @@
     </el-form>
     <div class="chart_wrap">
       <group-legend :legendData="chartData.legend"
-        @click="legendChangeFn"></group-legend>
+        @click-item="legendChangeFn"></group-legend>
       <line-charts :chartData="chartData"></line-charts>
     </div>
     <levitated-sphere>

src/views/bi/competitor/index.vue

@@ -6,7 +6,9 @@
         :label="item.name"
         :name="item.name"
         lazy>
+        <keep-alive>
           <component :is="item.component"></component>
+        </keep-alive>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -17,7 +19,11 @@ import cmm from './cmm'
 import sycmStore from './sycm_store'
 import sycmPrd from './sycm_prd'
 import { ref } from 'vue'
-const list = ref([{ name: '蝉妈妈', component: cmm }, { name: '生意参谋-竞店', component: sycmStore }, { name: '生意参谋-竞品', component: sycmPrd }])
+const list = ref([
+  { name: '蝉妈妈', component: cmm },
+  { name: '生意参谋-竞店', component: sycmStore },
+  { name: '生意参谋-竞品', component: sycmPrd }
+])
 const activeName = ref(list.value[0].name)
 </script>
 

src/views/bi/competitor/sycm_store/GradientArea.vue

@@ -53,6 +53,7 @@ export default {
       this.initChart()
     })
   },
+
   beforeDestroy() {
     if (!this.chart) {
       return

src/views/bi/competitor/sycm_store/index.vue

@@ -8,14 +8,15 @@
           @change="queryChangeFn"
           multiple
           clearable
-          collapse-tags>
+          collapse-tags
+          collapse-tags-tooltip>
           <el-option v-for="str in brandList"
             :label="str"
             :value="str">
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="数据查看">
+      <!-- <el-form-item label="数据查看">
         <el-select v-model="queryParams.typeList"
           @change="queryChangeFn"
           multiple
@@ -37,25 +38,25 @@
           end-placeholder="结束日期"
           @change="queryChangeFn('date')">
         </el-date-picker>
-      </el-form-item>
+      </el-form-item> -->
     </el-form>
     <div class="chart_wrap">
-      <gradient-area :chartData="chartData"></gradient-area>
+      <!-- <gradient-area :chartData="chartData"></gradient-area> -->
     </div>
   </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 import GradientArea from './GradientArea.vue';
 import { getSycmListAPI } from '@/api'
 import { generatorDayList, parseTime, getBrandColor } from '@/utils'
 
 const queryParams = reactive({ // 查询表单
   brandList: [],
-  date: [new Date().setDate(1), new Date().setDate((new Date().getDate() - 1))],
-  typeList: []
+  date: [new Date().setDate(new Date().getDate() - 30), new Date().setDate(new Date().getDate() - 1)],
+  // typeList: []
 })
 const brandList = ref([]) // 直播间列表
 const typeList = ref(['支付买家数', '交易增速', '独立访客范围', '流量增速'])
@@ -194,18 +195,20 @@ const filterData = () => {
 }
 
 // 默认打开页面请求一次所有数据，并保存在数据源
-(async function init() {
-  // 初始化时间
-  allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
-  // 请求数据
+(function init() {
+  nextTick(async () => {
+    // // 初始化时间
+    // allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
     const data = await getList()
-  // 初始化直播间列表
+    console.log(data)
+    // 直播间列表
     brandList.value = data.map(list => list[0].platformStore)
     // 初始化筛选条件（默认请求第一个店铺的第一类型数据）
-  queryParams.brandList = [data[0][0].platformStore]
-  queryParams.typeList = [typeList.value[0]]
+    // queryParams.brandList = [data[0][0].platformStore]
+    // queryParams.typeList = [typeList.value[0]]
     // 筛选图表数据
-  filterData()
+    // filterData()
+  })
 })();
 
 // 查询条件改变

src/views/dashboard/PanelGroup.vue

@@ -109,7 +109,7 @@ const handleSetLineChartData = () => {}
       font-size: 12px;
       position: relative;
       overflow: hidden;
-      color: var(--el-text-color-primary);
+      color: var(--el-gray-2);
       background: var(--el-bg-color-overlay);
       box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
       border-color: rgba(0, 0, 0, .05);
@@ -173,7 +173,7 @@ const handleSetLineChartData = () => {}
 
         .card-panel-text {
           line-height: 18px;
-          color: var(--el-text-color-primary);
+          color: var(--el-gray-1);
           font-size: 16px;
           margin-bottom: 12px;
         }