feat: add new card components and fix chat list code issues
- add three new Vue card components: AddCarCard, DetailCardComponent, SurveyQuestionnaire - remove unused RecordingWaveBtn component - fix component naming and import paths in ChatMainList - correct `notitceConent` variable typo to `noticeContent` - reorganize imports for better code maintainability
This commit is contained in:
@@ -1,124 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="recording-wave-btn">
|
|
||||||
<div class="audio-visualizer">
|
|
||||||
<div v-for="(bar, index) in audioBars" :key="index" class="audio-bar" :style="{
|
|
||||||
height: bar.height + 'px',
|
|
||||||
transition: 'height 0.1s ease-out',
|
|
||||||
}"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, onUnmounted } from "vue";
|
|
||||||
|
|
||||||
const animationTimer = ref(null);
|
|
||||||
const isAnimating = ref(false);
|
|
||||||
|
|
||||||
// 音频条数据
|
|
||||||
const audioBars = ref([]);
|
|
||||||
const BAR_COUNT = 30;
|
|
||||||
|
|
||||||
// 初始化音频条
|
|
||||||
const initAudioBars = () => {
|
|
||||||
audioBars.value = [];
|
|
||||||
for (let i = 0; i < BAR_COUNT; i++) {
|
|
||||||
audioBars.value.push({
|
|
||||||
height: 4 + Math.random() * 8,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新音频条动画
|
|
||||||
const updateAudioBars = () => {
|
|
||||||
if (!isAnimating.value) return;
|
|
||||||
|
|
||||||
// 使用 for 循环随机修改每个音频条的高度
|
|
||||||
for (let i = 0; i < audioBars.value.length; i++) {
|
|
||||||
const bar = audioBars.value[i];
|
|
||||||
|
|
||||||
// 生成随机高度值
|
|
||||||
const minHeight = 4;
|
|
||||||
const maxHeight = 20;
|
|
||||||
const randomHeight = minHeight + Math.random() * (maxHeight - minHeight);
|
|
||||||
|
|
||||||
// 添加一些变化幅度,让高度变化更自然
|
|
||||||
const variation = (Math.random() - 0.5) * 10;
|
|
||||||
bar.height = Math.max(
|
|
||||||
minHeight,
|
|
||||||
Math.min(maxHeight, randomHeight + variation),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始动画
|
|
||||||
const startAnimation = () => {
|
|
||||||
if (!isAnimating.value) {
|
|
||||||
isAnimating.value = true;
|
|
||||||
|
|
||||||
const animate = () => {
|
|
||||||
if (isAnimating.value) {
|
|
||||||
updateAudioBars();
|
|
||||||
animationTimer.value = setTimeout(animate, 200); // 每200ms更新一次,模仿人类说话语速
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 停止动画
|
|
||||||
const stopAnimation = () => {
|
|
||||||
isAnimating.value = false;
|
|
||||||
if (animationTimer.value) {
|
|
||||||
clearTimeout(animationTimer.value);
|
|
||||||
animationTimer.value = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 组件挂载时初始化并自动开始动画
|
|
||||||
onMounted(() => {
|
|
||||||
initAudioBars();
|
|
||||||
startAnimation();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 组件卸载时停止动画
|
|
||||||
onUnmounted(() => {
|
|
||||||
stopAnimation();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 暴露方法给父组件
|
|
||||||
defineExpose({
|
|
||||||
startAnimation,
|
|
||||||
stopAnimation,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.recording-wave-btn {
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
|
||||||
margin: 0 12px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #0CCD58;
|
|
||||||
height: 44px;
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-visualizer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 20px;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.audio-bar {
|
|
||||||
width: 2px;
|
|
||||||
height: 4px;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -77,12 +77,12 @@
|
|||||||
item.toolCall &&
|
item.toolCall &&
|
||||||
item.toolCall.componentName === CompName.feedbackCard
|
item.toolCall.componentName === CompName.feedbackCard
|
||||||
" :toolCall="item.toolCall" />
|
" :toolCall="item.toolCall" />
|
||||||
<DetailCardCompontent v-else-if="
|
<DetailCardComponent v-else-if="
|
||||||
item.toolCall &&
|
item.toolCall &&
|
||||||
item.toolCall.componentName ===
|
item.toolCall.componentName ===
|
||||||
CompName.pictureAndCommodityCard
|
CompName.pictureAndCommodityCard
|
||||||
" :toolCall="item.toolCall" />
|
" :toolCall="item.toolCall" />
|
||||||
<AddCarCrad v-else-if="
|
<AddCarCard v-else-if="
|
||||||
item.toolCall &&
|
item.toolCall &&
|
||||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||||
" :toolCall="item.toolCall" />
|
" :toolCall="item.toolCall" />
|
||||||
@@ -138,6 +138,7 @@
|
|||||||
import { onMounted, nextTick, onUnmounted, ref } from "vue";
|
import { onMounted, nextTick, onUnmounted, ref } from "vue";
|
||||||
import { emitter } from '@/utils/events'
|
import { emitter } from '@/utils/events'
|
||||||
import { MessageRole, MessageType, CompName, Command } from "@/constants/ChatModel";
|
import { MessageRole, MessageType, CompName, Command } from "@/constants/ChatModel";
|
||||||
|
import WebSocketManager from "@/utils/WebSocketManager";
|
||||||
import {
|
import {
|
||||||
SWITCH_TO_COMPANION_TAB,
|
SWITCH_TO_COMPANION_TAB,
|
||||||
SWITCH_TO_DISCOVERY_TAB,
|
SWITCH_TO_DISCOVERY_TAB,
|
||||||
@@ -147,6 +148,13 @@ import {
|
|||||||
NOTICE_EVENT_LOGOUT,
|
NOTICE_EVENT_LOGOUT,
|
||||||
NOTICE_EVENT_LOGIN_SUCCESS,
|
NOTICE_EVENT_LOGIN_SUCCESS,
|
||||||
} from "@/constants/constant";
|
} from "@/constants/constant";
|
||||||
|
import { mainPageData, conversationMsgList, recentConversation } from "@/api/home";
|
||||||
|
import { IdUtils } from "@/utils/IdUtils";
|
||||||
|
import { resolveChatSocketUrl } from "@/utils/socketUrl";
|
||||||
|
import { appendLongTextChunk, createLongTextData } from "@/constants/longTextCard";
|
||||||
|
import { checkToken } from "@/hooks/useGoLogin";
|
||||||
|
import { useAppStore } from "@/store";
|
||||||
|
import { getAccessToken } from "@/constants/token";
|
||||||
import Welcome from "../Welcome/index.vue";
|
import Welcome from "../Welcome/index.vue";
|
||||||
import AiTabSwitch from "../AiTabSwitch/index.vue";
|
import AiTabSwitch from "../AiTabSwitch/index.vue";
|
||||||
import Discovery from "../Discovery/index.vue";
|
import Discovery from "../Discovery/index.vue";
|
||||||
@@ -163,23 +171,15 @@ import DiscoveryCardComponent from "../DiscoveryCardComponent/index.vue";
|
|||||||
import ActivityListComponent from "../ActivityListComponent/index.vue";
|
import ActivityListComponent from "../ActivityListComponent/index.vue";
|
||||||
import RecommendPostsComponent from "../RecommendPostsComponent/index.vue";
|
import RecommendPostsComponent from "../RecommendPostsComponent/index.vue";
|
||||||
import AttachListComponent from "../AttachListComponent/index.vue";
|
import AttachListComponent from "../AttachListComponent/index.vue";
|
||||||
import DetailCardCompontent from "../DetailCardCompontent/index.vue";
|
import DetailCardComponent from "../DetailCardComponent/index.vue";
|
||||||
import OpenMapComponent from "../OpenMapComponent/index.vue";
|
import OpenMapComponent from "../OpenMapComponent/index.vue";
|
||||||
import AnswerComponent from "../AnswerComponent/index.vue";
|
import AnswerComponent from "../AnswerComponent/index.vue";
|
||||||
import GeneratorPhotoComponent from "../GeneratorPhotoComponent/index.vue";
|
import GeneratorPhotoComponent from "../GeneratorPhotoComponent/index.vue";
|
||||||
import LongTextGuideCardPreview from "../LongTextGuideCardPreview/index.vue";
|
import LongTextGuideCardPreview from "../LongTextGuideCardPreview/index.vue";
|
||||||
import CreateServiceOrder from "../CreateServiceOrder/index.vue";
|
import CreateServiceOrder from "../CreateServiceOrder/index.vue";
|
||||||
import Feedback from "../Feedback/index.vue";
|
import Feedback from "../Feedback/index.vue";
|
||||||
import AddCarCrad from "@/components/AddCarCrad/index.vue";
|
import AddCarCard from "../AddCarCard/index.vue";
|
||||||
import SurveyQuestionnaire from "@/components/SurveyQuestionnaire/index.vue";
|
import SurveyQuestionnaire from "../SurveyQuestionnaire/index.vue";
|
||||||
import { mainPageData, conversationMsgList, recentConversation } from "@/api/home";
|
|
||||||
import WebSocketManager from "@/utils/WebSocketManager";
|
|
||||||
import { IdUtils } from "@/utils/IdUtils";
|
|
||||||
import { resolveChatSocketUrl } from "@/utils/socketUrl";
|
|
||||||
import { appendLongTextChunk, createLongTextData } from "@/constants/longTextCard";
|
|
||||||
import { checkToken } from "@/hooks/useGoLogin";
|
|
||||||
import { useAppStore } from "@/store";
|
|
||||||
import { getAccessToken } from "@/constants/token";
|
|
||||||
|
|
||||||
const emit = defineEmits(["showDrawer"]);
|
const emit = defineEmits(["showDrawer"]);
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
@@ -188,7 +188,7 @@ const appStore = useAppStore();
|
|||||||
const inputAreaRef = ref(null);
|
const inputAreaRef = ref(null);
|
||||||
const mainScrollRef = ref(null);
|
const mainScrollRef = ref(null);
|
||||||
const topNavBarRef = ref();
|
const topNavBarRef = ref();
|
||||||
const notitceConent = ref(null);
|
const noticeContent = ref(null);
|
||||||
|
|
||||||
const holdKeyboardTimer = ref(null);
|
const holdKeyboardTimer = ref(null);
|
||||||
/// focus时,点击页面的时候不收起键盘
|
/// focus时,点击页面的时候不收起键盘
|
||||||
@@ -633,7 +633,7 @@ const handleWebSocketMessage = (data) => {
|
|||||||
if (data.messageType && data.messageType === "broadcast") {
|
if (data.messageType && data.messageType === "broadcast") {
|
||||||
console.log("收到 welcome 类型消息:", data);
|
console.log("收到 welcome 类型消息:", data);
|
||||||
if (data.content) {
|
if (data.content) {
|
||||||
notitceConent.value = data.content;
|
noticeContent.value = data.content;
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user