refactor: update dashboard view selected style

Author: ziyujiahao

frontend/src/i18n/zh-CN.json

@@ -34,6 +34,10 @@
     "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
+    "no_chat": "暂无对话",
+    "today": "今日",
+    "this_week": "本周",
+    "earlier": "更早",
     "add_component_tips": "从顶部工具栏中选择组件，添加到这里创建仪表板",
     "add_view": "添加图表",
     "delete_dashboard_warn": "是否删除仪表板：{0}",

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

@@ -214,33 +214,14 @@ defineExpose({
   color: #1f2329;
   line-height: 22px;
 }
-</style>
-
-<style lang="less" scoped>
-.custom-drawer {
-  .ed-drawer__footer {
-    height: 64px !important;
-    padding: 0 !important;
-    box-shadow: 0 -1px 0px #d7d7d7 !important;
-  }
-
-  .ed-drawer__body {
-    padding: 0 0 64px 0 !important;
-  }
-}
 
 .chat-container {
   height: 100%;
-
   .chat-container-left {
     padding-top: 20px;
     --ed-aside-width: 260px;
     border-radius: 12px 0 0 12px;
-    //box-shadow: 0 0 3px #d7d7d7;
-    //z-index: 1;
-
-    background: var(--ed-fill-color-blank);
-
+    border-right: 1px solid rgba(31, 35, 41, 0.15);
     .chat-container-right-container {
       height: 100%;
 
@@ -258,7 +239,6 @@ defineExpose({
 
   .chat-record-list {
     padding: 0 0 20px 0;
-    background: rgba(255, 255, 255, 1);
   }
 
   .chat-footer {
@@ -295,3 +275,18 @@ defineExpose({
   }
 }
 </style>
+
+<style lang="less">
+.custom-drawer {
+  .ed-drawer__footer {
+    height: 64px !important;
+    padding: 0 !important;
+    box-shadow: 0 -1px 0px #d7d7d7 !important;
+  }
+
+  .ed-drawer__body {
+    background: rgba(245, 246, 247, 1) !important;
+    padding: 0 0 64px 0 !important;
+  }
+}
+</style>

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { type Chat } from '@/api/chat.ts'
+import { ElIcon } from 'element-plus-secondary'
+import { Icon } from '@/components/icon-custom'
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     currentChatId?: number
     chatList: Array<Chat>
@@ -11,28 +16,139 @@ withDefaults(
     chatList: () => [],
   }
 )
-
+const { t } = useI18n()
 const emits = defineEmits(['chatSelected'])
+const filterText = ref('')
 
 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) => {
+    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) {
+      thisWeek.push(item)
+    }
+    // 更早的数据
+    else {
+      earlier.push(item)
+    }
+  })
+
+  return { today, thisWeek, earlier }
+})
 </script>
 
 <template>
-  <el-scrollbar ref="chatListRef">
-    <div class="chat-list-inner">
-      <template v-for="chat in chatList" :key="chat.id">
+  <div style="width: 100%; height: 100%">
+    <el-input
+      v-model="filterText"
+      :placeholder="t('dashboard.search')"
+      clearable
+      class="search-bar"
+    >
+      <template #prefix>
+        <el-icon>
+          <Icon name="icon_search-outline_outlined">
+            <icon_searchOutline_outlined class="svg-icon" />
+          </Icon>
+        </el-icon>
+      </template>
+    </el-input>
+    <el-scrollbar ref="chatListRef" class="custom-chart-list">
+      <div class="chat-list-inner">
+        <!-- today -->
+        <div v-if="filteredAndGroupedData.today.length > 0" class="time-group">
+          <div class="time-group-title">{{ t('dashboard.today') }}</div>
+          <div
+            v-for="chat in filteredAndGroupedData.today"
+            :key="chat.id"
+            class="chat-list-item"
+            :class="{ active: currentChatId === chat.id }"
+            @click="onClickHistory(chat)"
+          >
+            <span class="title">{{ chat.brief ?? 'Untitled' }}</span>
+          </div>
+        </div>
+
+        <!-- this week -->
+        <div v-if="filteredAndGroupedData.thisWeek.length > 0" class="time-group">
+          <div class="time-group-title">{{ t('dashboard.this_week') }}</div>
+          <div
+            v-for="chat in filteredAndGroupedData.thisWeek"
+            :key="chat.id"
+            class="chat-list-item"
+            :class="{ active: currentChatId === chat.id }"
+            @click="onClickHistory(chat)"
+          >
+            <span class="title">{{ chat.brief ?? 'Untitled' }}</span>
+          </div>
+        </div>
+
+        <!-- earlier -->
+        <div v-if="filteredAndGroupedData.earlier.length > 0" class="time-group">
+          <div class="time-group-title">{{ t('dashboard.earlier') }}</div>
+          <div
+            v-for="chat in filteredAndGroupedData.earlier"
+            :key="chat.id"
+            class="chat-list-item"
+            :class="{ active: currentChatId === chat.id }"
+            @click="onClickHistory(chat)"
+          >
+            <span class="title">{{ chat.brief ?? 'Untitled' }}</span>
+          </div>
+        </div>
+
+        <!-- no data -->
         <div
-          class="chat-list-item"
-          :class="{ active: currentChatId === chat.id }"
-          @click="onClickHistory(chat)"
+          v-if="
+            filteredAndGroupedData.today.length === 0 &&
+            filteredAndGroupedData.thisWeek.length === 0 &&
+            filteredAndGroupedData.earlier.length === 0
+          "
+          class="no-data"
         >
-          <span class="title">{{ chat.brief ?? 'Untitled' }}</span>
+          {{ t('dashboard.no_chat') }}
         </div>
-      </template>
-    </div>
-  </el-scrollbar>
+      </div>
+    </el-scrollbar>
+  </div>
 </template>
 
 <style scoped lang="less">
@@ -49,6 +165,24 @@ function onClickHistory(chat: Chat) {
 
   gap: 8px;
 
+  .time-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .time-group-title {
+      font-size: 12px;
+      color: rgba(100, 106, 115, 1);
+      padding: 4px 8px;
+      font-weight: 500;
+    }
+  }
+
   .chat-list-item {
     width: 100%;
     height: 42px;
@@ -67,6 +201,8 @@ function onClickHistory(chat: Chat) {
     .title {
       flex: 1;
       width: 0;
+      color: rgba(31, 35, 41, 1);
+      font-size: 14px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -80,16 +216,31 @@ function onClickHistory(chat: Chat) {
     }
 
     &:hover {
-      background-color: var(--hover-color);
+      background-color: rgba(255, 255, 255, 0.75);
 
       .icon-more {
         display: inline-flex;
       }
     }
 
     &.active {
-      background-color: var(--active-color);
+      background-color: rgba(255, 255, 255, 1);
     }
   }
+
+  .no-data {
+    text-align: center;
+    padding: 16px;
+    color: var(--ed-text-color-placeholder);
+    font-size: 14px;
+  }
+}
+.custom-chart-list {
+  height: calc(100% - 32px);
+}
+.search-bar {
+  padding: 0 12px 10px 12px;
+  width: 100%;
+  --ed-input-bg-color: rgba(245, 246, 247, 1);
 }
 </style>