refactor: update view select

Author: ziyujiahao

frontend/src/views/dashboard/components/sq-view/index.vue

@@ -8,7 +8,6 @@ defineProps({
 })
 
 import { ref } from 'vue'
-
 const chartRef = ref(null)
 const renderChart = () => {
   //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -23,6 +22,14 @@ defineExpose({
 
 <template>
   <div class="chart-base-container">
+    <div class="header-bar">
+      <div class="title">
+        {{ viewInfo.chart.title }}
+      </div>
+      <div class="buttons-bar">
+        <div class="chart-select-container"></div>
+      </div>
+    </div>
     <div style="height: 100%; width: 100%">
       <ChartComponent
         v-if="viewInfo.id"
@@ -43,5 +50,120 @@ defineExpose({
 .chart-base-container {
   width: 100%;
   height: 100%;
+  background: #fff;
+  .header-bar {
+    height: 32px;
+    display: flex;
+
+    align-items: center;
+    flex-direction: row;
+
+    .tool-btn {
+      width: 24px;
+      height: 24px;
+
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      border-radius: 6px;
+      color: rgba(100, 106, 115, 1);
+
+      .tool-btn-inner {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &:hover {
+        background: rgba(31, 35, 41, 0.1);
+      }
+      &:active {
+        background: rgba(31, 35, 41, 0.1);
+      }
+    }
+
+    .chart-active {
+      background: rgba(28, 186, 144, 0.1);
+      color: rgba(28, 186, 144, 1);
+      border-radius: 6px;
+
+      :deep(.ed-select__wrapper) {
+        background: transparent;
+      }
+      :deep(.ed-select__input) {
+        color: rgba(28, 186, 144, 1);
+      }
+      :deep(.ed-select__placeholder) {
+        color: rgba(28, 186, 144, 1);
+      }
+      :deep(.ed-select__caret) {
+        color: rgba(28, 186, 144, 1);
+      }
+    }
+
+    .title {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      color: rgba(31, 35, 41, 1);
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .buttons-bar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      gap: 16px;
+
+      .divider {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid rgba(31, 35, 41, 0.15);
+      }
+    }
+
+    .chart-select-container {
+      padding: 3px;
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+      border-radius: 6px;
+
+      border: 1px solid rgba(217, 220, 223, 1);
+
+      .chart-select {
+        min-width: 40px;
+        width: 40px;
+        height: 24px;
+
+        :deep(.ed-select__wrapper) {
+          padding: 4px;
+          min-height: 24px;
+          box-shadow: unset;
+          border-radius: 6px;
+
+          &:hover {
+            background: rgba(31, 35, 41, 0.1);
+          }
+          &:active {
+            background: rgba(31, 35, 41, 0.1);
+          }
+        }
+        :deep(.ed-select__caret) {
+          font-size: 12px !important;
+        }
+      }
+    }
+  }
+}
+
+.chart-show-area {
+  width: 100%;
+  height: calc(100% - 32px);
 }
 </style>

frontend/src/views/dashboard/editor/ChartSelection.vue

@@ -31,10 +31,10 @@ const curSelectChange = (value: boolean) => {
 
 <style scoped lang="less">
 .chart-selection-container {
-  width: 33%;
-  height: 250px;
+  width: 50%;
+  height: 320px;
   position: relative;
-  padding: 15px;
+  padding: 8px;
   float: left;
   overflow: hidden;
   .select-area {

frontend/src/views/dashboard/editor/ChatChartSelection.vue

@@ -24,13 +24,12 @@
       </el-aside>
       <el-container :loading="loading">
         <el-main v-if="!loading" class="chat-record-list">
-          <el-scrollbar ref="chatListRef">
+          <el-scrollbar ref="chatListRef" style="padding: 8px">
             <chart-selection
               v-for="(viewInfo, index) in chartInfoList"
               :key="index"
               :view-info="viewInfo"
               :select-change="(value: boolean) => selectChange(value, viewInfo)"
-              style="width: 33%"
             >
             </chart-selection>
           </el-scrollbar>
@@ -100,11 +99,8 @@ function adaptorChartInfoList(chatInfo: ChatInfo) {
   chartInfoList.value = []
   if (chatInfo && chatInfo.records) {
     chatInfo.records.forEach((record: any) => {
-      const recordeInfo = { id: chatInfo.id + '_' + record.id, data: null, chart: {} }
-      if (record?.data) {
-        recordeInfo['data'] = JSON.parse(record.data)
-      }
-      if (record?.chart) {
+      if (record?.chart && record.data) {
+        const recordeInfo = { id: chatInfo.id + '_' + record.id, data: record.data, chart: {} }
         const chartBaseInfo = JSON.parse(record.chart)
         recordeInfo['chart'] = {
           type: chartBaseInfo.type,
@@ -114,8 +110,8 @@ function adaptorChartInfoList(chatInfo: ChatInfo) {
           yAxis: chartBaseInfo.axis?.y ? [chartBaseInfo.axis.y] : [],
           series: chartBaseInfo.axis?.series ? [chartBaseInfo.axis.series] : [],
         }
+        chartInfoList.value.push(recordeInfo)
       }
-      chartInfoList.value.push(recordeInfo)
     })
   }
 }

frontend/src/views/dashboard/editor/DashboardChatList.vue

@@ -24,49 +24,35 @@ function onClickHistory(chat: Chat) {
   emits('chatSelected', chat)
 }
 
-// 获取当前日期和本周的开始日期
 const now = new Date()
 const startOfWeek = new Date(now)
 startOfWeek.setDate(now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)) // 设置为本周一
 startOfWeek.setHours(0, 0, 0, 0)
 
-// 格式化日期函数
-const formatDate = (dateString: string) => {
-  const date = new Date(dateString)
-  return date.toLocaleString()
-}
-
-// 过滤和分类数据
 const filteredAndGroupedData = computed(() => {
   const today: Chat[] = []
   const thisWeek: Chat[] = []
   const earlier: Chat[] = []
 
-  // 先过滤数据
   const filteredList = props.chatList.filter(
     (chat) =>
       !filterText.value ||
       (chat.brief && chat.brief.toLowerCase().includes(filterText.value.toLowerCase()))
   )
 
-  // 然后分类
   filteredList.forEach((item) => {
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
     const itemDate = new Date(item.create_time)
 
-    // 检查是否是今天
     if (
       itemDate.getDate() === now.getDate() &&
       itemDate.getMonth() === now.getMonth() &&
       itemDate.getFullYear() === now.getFullYear()
     ) {
       today.push(item)
-    }
-    // 检查是否是本周但不是今天
-    else if (itemDate >= startOfWeek && itemDate < now) {
+    } else if (itemDate >= startOfWeek && itemDate < now) {
       thisWeek.push(item)
-    }
-    // 更早的数据
-    else {
+    } else {
       earlier.push(item)
     }
   })