feat: 消息ui优化

Yi.Ai.Vue3/src/pages/chat/components/ChatHeader.vue

@@ -0,0 +1,126 @@
+<!-- 聊天页面头部组件 -->
+<script setup lang="ts">
+import Collapse from '@/layouts/components/Header/components/Collapse.vue';
+import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
+import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
+import { useSessionStore } from '@/stores/modules/session';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  /** 是否显示标题编辑 */
+  showTitle?: boolean;
+  /** 额外的左侧内容 */
+  leftExtra?: boolean;
+}>();
+
+const sessionStore = useSessionStore();
+const currentSession = computed(() => sessionStore.currentSession);
+</script>
+
+<template>
+  <div class="chat-header">
+    <div class="chat-header__content">
+      <div class="chat-header__left">
+        <Collapse />
+        <CreateChat />
+        <div
+          v-if="showTitle && currentSession"
+          class="chat-header__divider"
+        />
+      </div>
+
+      <div v-if="showTitle" class="chat-header__center">
+        <TitleEditing />
+      </div>
+
+      <div v-if="$slots.right" class="chat-header__right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  flex-shrink: 0;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+    padding-left: 20px;
+  }
+
+  &__divider {
+    width: 1px;
+    height: 30px;
+    background-color: rgba(217, 217, 217);
+  }
+
+  &__center {
+    flex: 1;
+    min-width: 0;
+    margin-left: 12px;
+    overflow: hidden;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    padding-right: 20px;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .chat-header {
+    height: 50px;
+
+    &__left {
+      padding-left: 8px;
+      gap: 8px;
+    }
+
+    &__center {
+      margin-left: 8px;
+    }
+
+    &__right {
+      padding-right: 12px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-header {
+    height: 48px;
+
+    &__left {
+      padding-left: 4px;
+      gap: 6px;
+    }
+
+    &__center {
+      margin-left: 6px;
+    }
+
+    &__right {
+      padding-right: 8px;
+    }
+  }
+}
+</style>