Compare commits

..

No commits in common. "515ae4e78c55ead98bdb1348df93ea0765f7fb53" and "f57fbd29aa2e5dd57c2c1a8eb07ee11fd21a8e37" have entirely different histories.

32 changed files with 1978 additions and 2311 deletions

View File

@ -2,11 +2,12 @@
position: relative; position: relative;
padding: 6px 2px 2px; padding: 6px 2px 2px;
display: inline-block; display: inline-block;
} }
.module-title { .module-title {
font-size: 18px; font-size: 18px;
font-family: PingFang SC, PingFang SC; font-family: DingTalk JinBuTi, DingTalk JinBuTi;
color: #000; color: #000;
position: relative; position: relative;
z-index: 1; z-index: 1;

View File

@ -2,14 +2,8 @@
<view class="container"> <view class="container">
<view class="chat-ai"> <view class="chat-ai">
<view class="loading-container" > <view class="loading-container" >
<image <image v-if="isLoading" class="loading-img" src="/static/msg_loading.svg" />
v-if="isLoading"
class="loading-img"
src="/static/msg_loading.svg"
/>
<!-- <loading v-if="isLoading" /> -->
<ChatMarkdown :key="textKey" :text="processedText" /> <ChatMarkdown :key="textKey" :text="processedText" />
<DotLoading v-if="isLoading" />
</view> </view>
<slot name="content"></slot> <slot name="content"></slot>
</view> </view>
@ -20,8 +14,6 @@
<script setup> <script setup>
import { defineProps, computed, ref, watch } from "vue"; import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "./ChatMarkdown.vue"; import ChatMarkdown from "./ChatMarkdown.vue";
import loading from "@/pages/loading/loading.vue";
import DotLoading from "@/pages/loading/DotLoading.vue";
const props = defineProps({ const props = defineProps({
text: { text: {
@ -76,8 +68,8 @@ watch(
.chat-ai { .chat-ai {
margin: 6px 12px; margin: 6px 12px;
padding: 0 12px; padding: 0 12px;
max-width: 100%; //
min-width: 100px; min-width: 90px;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
border-radius: 4px 20px 20px 20px; border-radius: 4px 20px 20px 20px;
@ -90,7 +82,6 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
padding: 4px 0; padding: 4px 0;
max-width: 100%; //
} }
.loading-img { .loading-img {
@ -98,4 +89,5 @@ watch(
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
</style> </style>

View File

@ -10,9 +10,10 @@ import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: "", default: ''
}, }
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -20,11 +21,11 @@ defineProps({
margin: 6px 12px; margin: 6px 12px;
padding: 8px 16px; padding: 8px 16px;
background-color: #00a6ff; background-color: #00A6FF;
box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.1); box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.1);
border-radius: 20px 4px 20px 20px; border-radius: 20px 4px 20px 20px;
border: 1px solid; border: 1px solid;
border-color: #ffffff; border-color: #FFFFFF;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -34,8 +35,8 @@ defineProps({
text { text {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 14px;
color: #ffffff; color: #FFFFFF;
line-height: 22px; line-height: 22px;
text-align: justify; text-align: justify;
font-style: normal; font-style: normal;

View File

@ -10,9 +10,9 @@ import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: "", default: ''
}, }
}); })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -31,5 +31,6 @@ defineProps({
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
} }
</style> </style>

View File

@ -3,7 +3,10 @@
<view v-if="!visibleWaveBtn" class="area-input"> <view v-if="!visibleWaveBtn" class="area-input">
<!-- 语音/键盘切换 --> <!-- 语音/键盘切换 -->
<view class="input-container-voice" @click="toggleVoiceMode"> <view class="input-container-voice" @click="toggleVoiceMode">
<image v-if="!isVoiceMode" src="/static/input_voice_icon.png"></image> <image
v-if="!isVoiceMode"
src="/static/input_voice_icon.png"
></image>
<image v-else src="/static/input_keyboard_icon.png"></image> <image v-else src="/static/input_keyboard_icon.png"></image>
</view> </view>

View File

@ -20,8 +20,6 @@
scroll-y scroll-y
:scroll-with-animation="true" :scroll-with-animation="true"
class="area-msg-list" class="area-msg-list"
@scroll="handleScroll"
@scrolltolower="handleScrollToLower"
> >
<!-- welcome栏 --> <!-- welcome栏 -->
<ChatTopWelcome <ChatTopWelcome
@ -40,7 +38,9 @@
<template v-if="item.msgType === MessageRole.AI"> <template v-if="item.msgType === MessageRole.AI">
<ChatCardAI <ChatCardAI
class="message-item-ai" class="message-item-ai"
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :key="`ai-${item.msgId}-${
item.msg ? item.msg.length : 0
}`"
:text="item.msg || ''" :text="item.msg || ''"
, ,
:isLoading="item.isLoading" :isLoading="item.isLoading"
@ -48,21 +48,26 @@
<template #content v-if="item.toolCall"> <template #content v-if="item.toolCall">
<QuickBookingComponent <QuickBookingComponent
v-if=" v-if="
item.toolCall.componentName === CompName.quickBookingCard item.toolCall.componentName ===
CompName.quickBookingCard
" "
/> />
<DiscoveryCardComponent <DiscoveryCardComponent
v-else-if=" v-else-if="
item.toolCall.componentName === CompName.discoveryCard item.toolCall.componentName ===
CompName.discoveryCard
" "
/> />
<CreateServiceOrder <CreateServiceOrder
v-else-if=" v-else-if="
item.toolCall.componentName === CompName.createWorkOrderCard item.toolCall.componentName ===
CompName.createWorkOrderCard
" "
/> />
<DetailCardCompontent <DetailCardCompontent
v-else-if="item.toolCall.componentName === ''" v-else-if="
item.toolCall.componentName === ''
"
:toolCall="item.toolCall" :toolCall="item.toolCall"
/> />
</template> </template>
@ -79,12 +84,18 @@
</template> </template>
<template v-else-if="item.msgType === MessageRole.ME"> <template v-else-if="item.msgType === MessageRole.ME">
<ChatCardMine class="message-item-mine" :text="item.msg"> <ChatCardMine
class="message-item-mine"
:text="item.msg"
>
</ChatCardMine> </ChatCardMine>
</template> </template>
<template v-else> <template v-else>
<ChatCardOther class="message-item-other" :text="item.msg"> <ChatCardOther
class="message-item-other"
:text="item.msg"
>
<ChatMoreTips <ChatMoreTips
@replySent="handleReply" @replySent="handleReply"
:itemList="mainPageDataModel.guideWords" :itemList="mainPageDataModel.guideWords"
@ -96,8 +107,12 @@
/> />
<RecommendPostsComponent <RecommendPostsComponent
v-if="mainPageDataModel.recommendTheme.length > 0" v-if="
:recommendThemeList="mainPageDataModel.recommendTheme" mainPageDataModel.recommendTheme.length > 0
"
:recommendThemeList="
mainPageDataModel.recommendTheme
"
/> />
</ChatCardOther> </ChatCardOther>
</template> </template>
@ -174,9 +189,6 @@ const isKeyboardShow = ref(false);
/// ///
const scrollTop = ref(99999); const scrollTop = ref(99999);
//
const isUserScrolling = ref(false);
/// ///
const chatMsgList = ref([]); const chatMsgList = ref([]);
/// ///
@ -203,6 +215,8 @@ let typewriterManager = null;
// IDmessageId // IDmessageId
let currentSessionMessageId = null; let currentSessionMessageId = null;
let loadingTimer = null;
// //
const emits = defineEmits(["openDrawer"]); const emits = defineEmits(["openDrawer"]);
const openDrawer = () => emits("openDrawer"); const openDrawer = () => emits("openDrawer");
@ -238,21 +252,13 @@ const handleKeyboardHide = () => {
holdKeyboard.value = false; holdKeyboard.value = false;
}; };
//
const handleScroll = (e) => {
//
};
//
const handleScrollToLower = () => {};
// - // -
const scrollToBottom = () => { const scrollToBottom = () => {
nextTick(() => { nextTick(() => {
scrollTop.value = 99999; scrollTop.value = 99999;
// //
setTimeout(() => { setTimeout(() => {
scrollTop.value = scrollTop.value + Math.random(); scrollTop.value = scrollTop.value + 1;
}, 10); }, 10);
}); });
}; };
@ -347,15 +353,6 @@ onMounted(async () => {
addNoticeListener(); addNoticeListener();
initTypewriterManager(); initTypewriterManager();
initWebSocket(); initWebSocket();
uni.getProvider({
service: "oauth",
success: (res) => {
console.log("getProvider success", res);
},
fail: (err) => {
console.log("getProvider fail", err);
},
});
} catch (error) { } catch (error) {
console.error("页面初始化错误:", error); console.error("页面初始化错误:", error);
} }
@ -454,6 +451,11 @@ const initWebSocket = () => {
// WebSocket // WebSocket
const handleWebSocketMessage = (data) => { const handleWebSocketMessage = (data) => {
if (loadingTimer) {
clearInterval(loadingTimer);
loadingTimer = null;
}
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) { if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) {
return; return;
@ -477,6 +479,8 @@ const handleWebSocketMessage = (data) => {
// //
if (data.finish) { if (data.finish) {
clearInterval(loadingTimer);
loadingTimer = null;
// //
const waitForTypingComplete = () => { const waitForTypingComplete = () => {
const status = typewriterManager const status = typewriterManager
@ -489,7 +493,7 @@ const handleWebSocketMessage = (data) => {
const msg = chatMsgList.value[aiMsgIndex].msg; const msg = chatMsgList.value[aiMsgIndex].msg;
console.log("全量消息内容:", msg); console.log("全量消息内容:", msg);
if (!msg || msg === "加载中" || msg.startsWith("加载中")) { if (!msg || msg === "加载中." || msg.startsWith("加载中")) {
chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试"; chatMsgList.value[aiMsgIndex].msg = "未获取到内容,请重试";
chatMsgList.value[aiMsgIndex].isLoading = false; chatMsgList.value[aiMsgIndex].isLoading = false;
if (data.toolCall) { if (data.toolCall) {
@ -522,16 +526,22 @@ const initTypewriterManager = () => {
} }
typewriterManager = new TypewriterManager({ typewriterManager = new TypewriterManager({
typingSpeed: 30, typingSpeed: 50,
cursorText: "", cursorText: '<text class="typing-cursor">|</text>',
}); });
// //
typewriterManager.setCallbacks({ typewriterManager.setCallbacks({
// //
onCharacterTyped: (displayedContent) => { onCharacterTyped: (displayedContent) => {
// //
scrollToBottom(); nextTick(() => {
scrollTop.value = 99999;
//
setTimeout(() => {
scrollTop.value = 99999 + Math.random();
}, 20);
});
}, },
// //
onContentUpdate: (content) => { onContentUpdate: (content) => {
@ -635,7 +645,7 @@ const sendChat = (message, isInstruct = false) => {
const aiMsg = { const aiMsg = {
msgId: `msg_${chatMsgList.value.length}`, msgId: `msg_${chatMsgList.value.length}`,
msgType: MessageRole.AI, msgType: MessageRole.AI,
msg: "加载中", msg: "加载中.",
isLoading: true, isLoading: true,
msgContent: { msgContent: {
type: MessageType.TEXT, type: MessageType.TEXT,
@ -645,6 +655,14 @@ const sendChat = (message, isInstruct = false) => {
chatMsgList.value.push(aiMsg); chatMsgList.value.push(aiMsg);
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
//
let dotCount = 1;
loadingTimer && clearInterval(loadingTimer);
loadingTimer = setInterval(() => {
dotCount = (dotCount % 3) + 1;
chatMsgList.value[aiMsgIndex].msg = "加载中" + ".".repeat(dotCount);
}, 400);
// //
const success = sendWebSocketMessage(messageType, messageContent); const success = sendWebSocketMessage(messageType, messageContent);
if (!success) { if (!success) {
@ -662,6 +680,11 @@ const stopRequest = () => {
// (messageType=2) // (messageType=2)
sendWebSocketMessage(2, "stop_request", { silent: true }); sendWebSocketMessage(2, "stop_request", { silent: true });
if (loadingTimer) {
clearInterval(loadingTimer);
loadingTimer = null;
}
// //
if (typewriterManager) { if (typewriterManager) {
typewriterManager.stopTypewriter(); typewriterManager.stopTypewriter();

View File

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<zero-markdown-view :markdown="text" :aiMode="true"></zero-markdown-view> <zero-markdown-view :markdown="text" :aiMode='true'></zero-markdown-view>
</view> </view>
</template> </template>
@ -10,9 +10,12 @@ import { defineProps } from "vue";
defineProps({ defineProps({
text: { text: {
type: String, type: String,
default: "", default: ''
}, }
}); })
</script> </script>
<style scoped></style> <style scoped>
</style>

View File

@ -16,7 +16,9 @@
<image :src="item.icon"></image> <image :src="item.icon"></image>
<text>{{ item.title }}</text> <text>{{ item.title }}</text>
</view> </view>
<text class="quick-access-item-content">{{ item.content }}</text> <text class="quick-access-item-content">{{
item.content
}}</text>
</view> </view>
</view> </view>
</view> </view>

View File

@ -1,15 +1,17 @@
<template> <template>
<view class="top-bg"> </view> <view class="top-bg">
</view>
</template> </template>
<script></script> <script>
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-bg { .top-bg {
width: 100%; width: 100%;
height: 270px; height: 270px;
overflow: hidden; overflow: hidden;
background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%); background: linear-gradient( 180deg, #42ADF9 0%, #6CD1FF 51%, #E9F3F7 99%);
.top-bg-img { .top-bg-img {
width: 100%; width: 100%;
height: 100%; height: 100%;

View File

@ -7,23 +7,25 @@
<uni-drawer ref="showLeft" mode="left" :width="320"> <uni-drawer ref="showLeft" mode="left" :width="320">
<DrawerHome @closeDrawer="closeDrawer('showLeft')" /> <DrawerHome @closeDrawer="closeDrawer('showLeft')" />
</uni-drawer> </uni-drawer>
</view> </view>
</template> </template>
<script setup> <script setup>
import { defineEmits, ref } from "vue"; import { defineEmits, ref } from 'vue'
import DrawerHome from "@/pages/drawer/DrawerHome.vue"; import DrawerHome from "@/pages/drawer/DrawerHome.vue";
const showLeft = ref(false); const showLeft = ref(false)
// //
const showDrawer = (e) => { const showDrawer = (e) => {
showLeft.value.open(); showLeft.value.open()
}; }
// //
const closeDrawer = (e) => { const closeDrawer = (e) => {
showLeft.value.close(); showLeft.value.close()
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -6,7 +6,10 @@
class="top-item-left" class="top-item-left"
:src="initPageImages.welcomeImageUrl" :src="initPageImages.welcomeImageUrl"
></image> ></image>
<image class="top-item-right" :src="initPageImages.logoImageUrl"></image> <image
class="top-item-right"
:src="initPageImages.logoImageUrl"
></image>
</view> </view>
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" /> <ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
</view> </view>

View File

@ -1,7 +1,7 @@
.chat-container { .chat-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #e9f3f7; background-color: #E9F3F7;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,7 +17,7 @@
right: 0; right: 0;
z-index: 0; z-index: 0;
height: 270px; height: 270px;
background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%); background: linear-gradient( 180deg, #42ADF9 0%, #6CD1FF 51%, #E9F3F7 99%);
} }
.chat-content { .chat-content {
@ -70,7 +70,7 @@
width: 100vw; width: 100vw;
flex-shrink: 0; flex-shrink: 0;
padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */ padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
background-color: #e9f3f7; background-color: #E9F3F7;
touch-action: pan-x; touch-action: pan-x;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -88,7 +88,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 22px; border-radius: 22px;
background-color: #ffffff; background-color: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05); box-shadow: 0px 0px 20px 0px rgba(52,25,204,0.05);
margin: 0 12px; margin: 0 12px;
@ -136,7 +136,7 @@
// 打字机光标闪烁动画 // 打字机光标闪烁动画
.typing-cursor { .typing-cursor {
display: inline-block; display: inline-block;
color: #42adf9; color: #42ADF9;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
animation: blink 1s infinite; animation: blink 1s infinite;
@ -144,12 +144,10 @@
} }
@keyframes blink { @keyframes blink {
0%, 0%, 50% {
50% {
opacity: 1; opacity: 1;
} }
51%, 51%, 100% {
100% {
opacity: 0; opacity: 0;
} }
} }

View File

@ -1,28 +1,24 @@
<template> <template>
<view class="drawer-home"> <view class="drawer-home">
<view class="drawer-home-nav"> <view class="drawer-home-nav">
<uni-icons <uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="closeDrawer"></uni-icons>
type="closeempty"
size="22"
color="#333333"
class="close-icon"
@click="closeDrawer"
></uni-icons>
<text class="title">我的</text> <text class="title">我的</text>
</view> </view>
<MineSetting/> <MineSetting/>
</view> </view>
</template> </template>
<script setup> <script setup>
import MineSetting from "./MineSetting.vue"; import MineSetting from './MineSetting.vue'
import { defineEmits } from "vue"; import { defineEmits } from 'vue'
const emits = defineEmits(["closeDrawer"]); const emits = defineEmits(['closeDrawer'])
const closeDrawer = () => { const closeDrawer = () => {
emits("closeDrawer"); emits('closeDrawer')
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -36,64 +36,60 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from 'vue'
import { getLoginUserPhone } from "@/request/api/LoginApi"; import { getLoginUserPhone } from '@/request/api/LoginApi'
// //
const userInfo = ref({ const userInfo = ref({
avatar: "/static/default-avatar.png", avatar: '/static/default-avatar.png',
nickname: "微信用户", nickname: '微信用户',
phone: "", phone: ''
}); })
// type // type
const menuList = ref([ const menuList = ref([
// { label: '', type: 'navigate', url: '/pages/change-phone/change-phone' }, // { label: '', type: 'navigate', url: '/pages/change-phone/change-phone' },
{ { label: '账号注销', type: 'navigate', url: '/pages/cancel-account/cancel-account' },
label: "账号注销",
type: "navigate",
url: "/pages/cancel-account/cancel-account",
},
// { label: '&', type: 'navigate', url: '/pages/agreement/agreement' }, // { label: '&', type: 'navigate', url: '/pages/agreement/agreement' },
{ label: "联系客服", type: "action", action: "contactService" }, { label: '联系客服', type: 'action', action: 'contactService' }
]); ])
// //
onMounted(() => { onMounted(() => {
getLoginUserPhoneInfo(); getLoginUserPhoneInfo()
}); })
const getLoginUserPhoneInfo = async () => { const getLoginUserPhoneInfo = async () => {
const res = await getLoginUserPhone(); const res = await getLoginUserPhone()
if (res.code === 0) { if (res.code === 0) {
userInfo.value.phone = res.data; userInfo.value.phone = res.data
}
} }
};
// //
const handleMenuClick = (item) => { const handleMenuClick = (item) => {
if (item.type === "navigate" && item.url) { if (item.type === 'navigate' && item.url) {
uni.navigateTo({ url: item.url }); uni.navigateTo({ url: item.url })
} else if (item.type === "action") { } else if (item.type === 'action') {
if (item.action === "contactService") { if (item.action === 'contactService') {
uni.showToast({ title: "联系客服功能待实现", icon: "none" }); uni.showToast({ title: '联系客服功能待实现', icon: 'none' })
}
} }
} }
};
// 退 // 退
const handleLogout = () => { const handleLogout = () => {
uni.showModal({ uni.showModal({
title: "温馨提示", title: '温馨提示',
content: "确定要退出登录吗?", content: '确定要退出登录吗?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.clearStorageSync(); uni.clearStorageSync()
uni.reLaunch({ url: "/pages/login/index" }); uni.reLaunch({ url: '/pages/login/index' })
}
}
})
} }
},
});
};
</script> </script>
<style scoped> <style scoped>

View File

@ -17,7 +17,7 @@
<ModuleTitle title="购买须知" /> <ModuleTitle title="购买须知" />
<zero-markdown-view :markdown="goodsData.commodityTip" :aiMode='true' /> <zero-markdown-view :markdown="goodsData.commodityTip" />
</view> </view>
</scroll-view> </scroll-view>

View File

@ -1,47 +0,0 @@
<template>
<view class="wave">
<view class="dot"></view>
<view class="dot"></view>
<view class="dot"></view>
</view>
</template>
<script></script>
<style lang="scss" scoped>
.wave {
position: relative;
text-align: center;
width: 30px;
.dot {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
margin-right: 3px;
background: #333333;
animation: wave 1.3s linear infinite;
&:nth-child(2) {
animation-delay: -1.1s;
}
&:nth-child(3) {
animation-delay: -0.9s;
}
}
}
@keyframes wave {
0%,
60%,
100% {
transform: initial;
}
30% {
transform: translateY(-5px);
}
}
</style>

View File

@ -1,23 +0,0 @@
<template>
<view class="ai">
<view class="container">
<view class="c c4"></view>
<view class="c c1"></view>
<view class="c c2"></view>
<view class="c c3"></view>
<view class="rings"></view>
</view>
<view class="glass"></view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
@import "styles/loading.scss";
</style>

View File

@ -1,281 +0,0 @@
@property --a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
@property --l {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --x {
syntax: "<length>";
inherits: false;
initial-value: 0;
}
@property --y {
syntax: "<length>";
inherits: false;
initial-value: 0;
}
@property --o {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.ai {
--s: 32px;
// --p: calc(var(--s) / 4);
width: var(--s);
aspect-ratio: 1;
--bg-color: color-mix(in srgb, #7b7bf4, transparent 90%);
background: radial-gradient(
60% 75% at center,
var(--bg-color) 50%,
transparent 50%
),
radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
padding: var(--p);
margin-right: 6px;
display: grid;
place-items: center;
position: relative;
border-radius: 50%;
transform: scale(1.0);
}
$count: 4;
:root {
--count: #{$count};
--radius: 6vmin;
}
@keyframes ai {
from {
--a: 360deg;
--l: 0.35;
--o: 1;
}
30% {
--l: 1.5;
}
70% {
--o: 0.4;
--l: 0.05;
}
98% {
--o: 0.7;
}
to {
--a: 0deg;
--l: 0.35;
--o: 1;
}
}
.c {
opacity: 0.9;
position: absolute;
width: 10vmin;
aspect-ratio: 1;
border-radius: 50%;
--offset-per-item: calc(360deg / var(--count));
--current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));
translate: calc(
cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0)
)
calc(sin(var(--current-angle-offset)) * var(--radius) * -1);
scale: calc(0.6 + var(--l));
animation: ai 5.5s cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;
transition: opacity 0.3s linear;
opacity: var(--o, 1);
@for $i from 0 through $count {
&:nth-child(#{$i + 1}) {
--i: #{$i};
}
}
}
.c1 {
background: #79e3ee;
background: radial-gradient(50% 50% at center, #79e3ee, #e7e7fb);
background: radial-gradient(50% 50% at center, #c979ee, #74bcd6);
--x: 1vmin;
width: 16vmin;
animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);
}
.c2 {
background: radial-gradient(50% 50% at center, #ef788c, #e7e7fb);
width: 15vmin;
}
.c3 {
background: radial-gradient(50% 50% at center, #eb7fc6, transparent);
width: 5vmin;
opacity: 0.6;
--x: -1vmin;
}
.c4 {
background: #6d67c8;
animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);
}
.container {
overflow: hidden;
background: #b6a9f8;
width: 100%;
border-radius: 50%;
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
}
.glass {
overflow: hidden;
position: absolute;
--w: 0.5vmin;
inset: calc(var(--s) - var(--s));
border-radius: 50%;
backdrop-filter: blur(1.3vmin);
box-shadow: 0 0 8vmin color-mix(in srgb, black, transparent 70%);
background: radial-gradient(
10vmin at 70% 30%,
rgba(255, 255, 255, 0.2),
transparent
);
// // lines
// &:after {
// content: "";
// position: absolute;
// inset: 0;
// --c: rgba(255, 255, 255, 0.03);
// --w: 0.0625rem;
// --g: 0.1875rem;
// background: repeating-linear-gradient(
// var(--c),
// var(--c),
// var(--w),
// transparent var(--w),
// transparent calc(var(--w) + var(--g))
// );
// border-radius: inherit;
// border: 1vmin rgba(255, 255, 255, 0.1) solid;
// }
}
@property --value {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
@property --width-ratio {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --scale {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
:root {
--width: 1vmin;
--duration: 8s;
}
.rings {
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
inset: 0;
perspective: 11rem;
opacity: .9;
&:before,
&:after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 0, 0, 1);
border-radius: 50%;
--width-ratio: 1;
border: calc(var(--width) * var(--width-ratio)) solid transparent;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
background: linear-gradient(
white,
blue,
magenta,
violet,
lightyellow) border-box;
mask-composite: exclude;
animation: ring var(--duration) ease-in-out infinite;
--start: 180deg;
--value: var(--start);
--scale: 1;
transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))
scale(var(--scale));
}
&:before {
--start: 180deg;
}
&:after {
--start: 90deg;
}
> .rings {
&:before {
--start: 360deg;
}
&:after {
--start: 270deg;
}
}
}
@keyframes ring {
from {
--value: var(--start);
--scale: 1;
}
50% {
--scale: 1.2;
--width-ratio: 1.5;
}
70% {
--scale: 1;
--value: calc(var(--start) + 180deg);
--width-ratio: 1;
}
80% {
--scale: 1.2;
--width-ratio: 1.5;
}
to {
--value: calc(var(--start) + 360deg);
--scale: 1;
--width-ratio: 1;
}
}

View File

@ -12,31 +12,32 @@
</template> </template>
<script setup> <script setup>
import { ref, nextTick, defineEmits } from "vue"; import { ref, nextTick, defineEmits } from 'vue'
import { onMounted } from "vue"; import { onMounted } from 'vue'
import { SCROLL_TO_BOTTOM } from "@/constant/constant"; import { SCROLL_TO_BOTTOM } from '@/constant/constant'
const props = defineProps({ const props = defineProps({
question: { question: {
type: String, type: String,
default: "", default: ''
}, }
}); })
const tags = ref([]); const tags = ref([])
const emits = defineEmits(["replySent"]); const emits = defineEmits(['replySent']);
const handleClick = (item) => { const handleClick = (item) => {
emits("replySent", item); emits('replySent', item)
}; }
onMounted(() => { onMounted(() => {
tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== ""); tags.value = props.question.split(/[&|;]/).filter(tag => tag.trim() !== '')
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true); uni.$emit(SCROLL_TO_BOTTOM, true)
}, 300); }, 300)
});
}); });
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -58,7 +59,7 @@ onMounted(() => {
} }
.tag-text { .tag-text {
color: #00a6ff; /* 蓝色文字,可根据设计调整 */ color: #00A6FF; /* 蓝色文字,可根据设计调整 */
font-size: 14px; font-size: 14px;
} }
</style> </style>

View File

@ -1,15 +1,12 @@
<template> <template>
<view class="container"> <view class="container">
<swiper <swiper class="swiper" circular
class="swiper"
circular
:indicator-dots="activityList.length > 1" :indicator-dots="activityList.length > 1"
indicator-color="#FFFFFF" indicator-color="#FFFFFF"
indicator-active-color="#00A6FF" indicator-active-color="#00A6FF"
:autoplay="autoplay" :autoplay="autoplay"
:interval="interval" :interval="interval"
:duration="duration" :duration="duration">
>
<swiper-item v-for="item in activityList" :key="item.id"> <swiper-item v-for="item in activityList" :key="item.id">
<view class="swiper-item" @click="handleClick(item)"> <view class="swiper-item" @click="handleClick(item)">
<image :src="item.activityCover" mode="aspectFill"></image> <image :src="item.activityCover" mode="aspectFill"></image>
@ -17,27 +14,29 @@
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from 'vue'
import { SEND_COMMAND_TEXT } from "@/constant/constant"; import { SEND_COMMAND_TEXT } from '@/constant/constant'
const autoplay = ref(true); const autoplay = ref(true)
const interval = ref(3000); const interval = ref(3000)
const duration = ref(500); const duration = ref(500)
const props = defineProps({ const props = defineProps({
activityList: { activityList: {
type: Array, type: Array,
default: [], default: []
}, }
}); })
const handleClick = (item) => { const handleClick = (item) => {
uni.$emit(SEND_COMMAND_TEXT, "快速预定"); uni.$emit(SEND_COMMAND_TEXT, '快速预定')
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -78,5 +77,6 @@ const handleClick = (item) => {
line-height: 1.5; line-height: 1.5;
} }
} }
} }
</style> </style>

View File

@ -22,6 +22,7 @@
<text class="calendar-text">日历</text> <text class="calendar-text">日历</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>

View File

@ -8,10 +8,16 @@
> >
<view class="mk-card-item" @click="placeOrderHandle(item)"> <view class="mk-card-item" @click="placeOrderHandle(item)">
<!-- <view class="card-badge">超值推荐</view> --> <!-- <view class="card-badge">超值推荐</view> -->
<image class="card-img" :src="item.commodityIcon" mode="aspectFill" /> <image
class="card-img"
:src="item.commodityIcon"
mode="aspectFill"
/>
<view class="card-content"> <view class="card-content">
<view class="card-title-column"> <view class="card-title-column">
<text class="card-title">{{ item.commodityName }}</text> <text class="card-title">{{
item.commodityName
}}</text>
<view <view
class="card-tags" class="card-tags"
v-for="tag in item.commodityTradeRuleList" v-for="tag in item.commodityTradeRuleList"
@ -21,7 +27,9 @@
</view> </view>
</view> </view>
<template <template
v-for="(serviceItem, index) in item.commodityServices" v-for="(
serviceItem, index
) in item.commodityServices"
:key="serviceItem.serviceTitle" :key="serviceItem.serviceTitle"
> >
<view v-if="index < 3" class="card-desc" <view v-if="index < 3" class="card-desc"
@ -31,7 +39,9 @@
<view class="card-bottom-row"> <view class="card-bottom-row">
<view class="card-price-row"> <view class="card-price-row">
<text class="card-price-fu"></text> <text class="card-price-fu"></text>
<text class="card-price">{{ item.commodityPrice }}</text> <text class="card-price">{{
item.commodityPrice
}}</text>
<text class="card-unit">/</text> <text class="card-unit">/</text>
</view> </view>
@ -146,6 +156,7 @@ const placeOrderHandle = (item) => {
} }
.card-tag { .card-tag {
background: #f5f5f5;
color: #ff6600; color: #ff6600;
font-size: 10px; font-size: 10px;
border-radius: 4px; border-radius: 4px;

View File

@ -8,21 +8,23 @@
<template v-if="toolCall.commodityList"> <template v-if="toolCall.commodityList">
<DetailCardGoodsContentList :commodityList="toolCall.commodityList" /> <DetailCardGoodsContentList :commodityList="toolCall.commodityList" />
</template> </template>
</view> </view>
</template> </template>
<script setup> <script setup>
import { defineProps } from "vue"; import { defineProps } from 'vue'
import ModuleTitle from "@/components/ModuleTitle/index.vue"; import ModuleTitle from '@/components/ModuleTitle/index.vue'
import ImageSwiper from "@/components/ImageSwiper/index.vue"; import ImageSwiper from '@/components/ImageSwiper/index.vue'
import DetailCardGoodsContentList from "./DetailCardGoodsContentList.vue"; import DetailCardGoodsContentList from './DetailCardGoodsContentList.vue'
const props = defineProps({ const props = defineProps({
toolCall: { toolCall: {
type: Object, type: Object,
default: {}, default: {}
}, }
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -30,4 +32,5 @@ const props = defineProps({
width: 100%; width: 100%;
padding: 12px 0; padding: 12px 0;
} }
</style> </style>

View File

@ -14,7 +14,9 @@
/> />
<view class="card-content"> <view class="card-content">
<view class="card-title-column"> <view class="card-title-column">
<text class="card-title">{{ item.commodityName }}</text> <text class="card-title">{{
item.commodityName
}}</text>
<view <view
class="card-tags" class="card-tags"
v-for="tag in item.commodityTradeRuleList" v-for="tag in item.commodityTradeRuleList"
@ -24,7 +26,9 @@
</view> </view>
</view> </view>
<template <template
v-for="(serviceItem, index) in item.commodityServices" v-for="(
serviceItem, index
) in item.commodityServices"
:key="serviceItem.serviceTitle" :key="serviceItem.serviceTitle"
> >
<view v-if="index < 3" class="card-desc" <view v-if="index < 3" class="card-desc"
@ -34,7 +38,9 @@
<view class="card-bottom-row"> <view class="card-bottom-row">
<view class="card-price-row"> <view class="card-price-row">
<text class="card-price-fu"></text> <text class="card-price-fu"></text>
<text class="card-price">{{ item.specificationPrice }}</text> <text class="card-price">{{
item.specificationPrice
}}</text>
<text class="card-unit">/</text> <text class="card-unit">/</text>
</view> </view>
<text class="card-btn">下单</text> <text class="card-btn">下单</text>
@ -150,6 +156,7 @@ const placeOrderHandle = (item) => {
} }
.card-tag { .card-tag {
background: #f5f5f5;
color: #ff6600; color: #ff6600;
font-size: 10px; font-size: 10px;
border-radius: 4px; border-radius: 4px;

View File

@ -7,30 +7,31 @@
</template> </template>
<script setup> <script setup>
import { ref, nextTick } from "vue"; import { ref, nextTick } from 'vue'
import { onMounted } from "vue"; import { onMounted } from 'vue'
import { discoveryCradComponent } from "@/request/api/MainPageDataApi"; import { discoveryCradComponent } from '@/request/api/MainPageDataApi'
import RecommendPostsList from "../recommend/RecommendPostsList.vue"; import RecommendPostsList from '../recommend/RecommendPostsList.vue'
import { SCROLL_TO_BOTTOM } from "@/constant/constant"; import { SCROLL_TO_BOTTOM } from '@/constant/constant'
const themeDTOList = ref([]); const themeDTOList = ref([])
const loadDiscoveryCradComponent = async () => { const loadDiscoveryCradComponent = async () => {
const res = await discoveryCradComponent(); const res = await discoveryCradComponent()
if(res.code === 0 && res.data) { if(res.code === 0 && res.data) {
themeDTOList.value = res.data.themeDTOList; themeDTOList.value = res.data.themeDTOList
nextTick(() => { nextTick(() => {
setTimeout(() => { setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true); uni.$emit(SCROLL_TO_BOTTOM, true)
}, 300); }, 300)
}); });
} }
}; }
onMounted(() => { onMounted(() => {
loadDiscoveryCradComponent(); loadDiscoveryCradComponent()
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -7,15 +7,17 @@
</template> </template>
<script setup> <script setup>
import RecommendPostsList from "./RecommendPostsList.vue"; import RecommendPostsList from './RecommendPostsList.vue';
import { defineProps } from "vue"; import { defineProps } from 'vue'
const props = defineProps({ const props = defineProps({
recommendThemeList: { recommendThemeList: {
type: Array, type: Array,
default: [], default: []
}, }
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -2,10 +2,7 @@
<view class="container"> <view class="container">
<ModuleTitle :title="recommendTheme.themeName" /> <ModuleTitle :title="recommendTheme.themeName" />
<view class="container-scroll"> <view class="container-scroll">
<view <view v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
v-for="(item, index) in recommendTheme.recommendPostsList"
:key="index"
>
<view class="mk-card-item" @click="sendReply(item)"> <view class="mk-card-item" @click="sendReply(item)">
<image :src="item.coverPhoto" mode="aspectFill"></image> <image :src="item.coverPhoto" mode="aspectFill"></image>
<view class="overlay-gradient"> <view class="overlay-gradient">
@ -18,21 +15,22 @@
</template> </template>
<script setup> <script setup>
import ModuleTitle from "@/components/ModuleTitle/index.vue"; import ModuleTitle from '@/components/ModuleTitle/index.vue'
import { defineProps } from "vue"; import { defineProps } from 'vue'
import { RECOMMEND_POSTS_TITLE } from "@/constant/constant.js"; import { RECOMMEND_POSTS_TITLE } from '@/constant/constant.js'
const props = defineProps({ const props = defineProps({
recommendTheme: { recommendTheme: {
type: Object, type: Object,
default: {}, default: {}
}, }
}); })
const sendReply = (item) => { const sendReply = (item) => {
const topic = item.userInputContent || item.topic.replace(/^#/, ""); const topic = item.userInputContent || item.topic.replace(/^#/, '');
uni.$emit(RECOMMEND_POSTS_TITLE, topic); uni.$emit(RECOMMEND_POSTS_TITLE, topic);
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -44,7 +42,7 @@ const sendReply = (item) => {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow-x: auto; overflow-x: auto;
margin: 4px 0 6px; margin-top: 4px;
.mk-card-item { .mk-card-item {
flex-shrink: 0; /* 关键:防止 flex 布局压缩子元素宽度 */ flex-shrink: 0; /* 关键:防止 flex 布局压缩子元素宽度 */
@ -89,4 +87,5 @@ const sendReply = (item) => {
} }
} }
} }
</style> </style>

View File

@ -2,11 +2,7 @@
<view class="notice-info mb12"> <view class="notice-info mb12">
<view class="notice-title"> 购买须知 </view> <view class="notice-title"> 购买须知 </view>
<zero-markdown-view <zero-markdown-view :markdown="orderData.commodityTip" :fontSize="14" />
:markdown="orderData.commodityTip"
:fontSize="14"
:aiMode="true"
/>
</view> </view>
</template> </template>

View File

@ -36,10 +36,6 @@ export default {
type: String, type: String,
default: '#2d2d2d' default: '#2d2d2d'
}, },
fontFamily: {
type: String,
default: 'PingFang SC, PingFang SC'
},
aiMode: { aiMode: {
type: Boolean, type: Boolean,
default: false default: false
@ -91,64 +87,59 @@ export default {
initTagStyle() { initTagStyle() {
const themeColor = this.themeColor const themeColor = this.themeColor
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor
const fontFamily = this.fontFamily
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:6px 0; margin:5px 5px;
font-size: 15px; font-size: 15px;
line-height:1.65; line-height:1.75;
font-family: ${fontFamily}; letter-spacing:0.2em;
word-spacing:0.1em;
`, `,
// //
h1: ` h1: `
margin:6px 0; margin:25px 0;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
padding:3px 10px 1px; padding:3px 10px 1px;
border-bottom: 2px solid ${themeColor}; border-bottom: 2px solid ${themeColor};
border-top-right-radius:3px; border-top-right-radius:3px;
border-top-left-radius:3px; border-top-left-radius:3px;
`, `,
// //
h2: ` h2: `
margin:6px 0; margin:40px 0 20px 0;
font-size: 20px; font-size: 20px;
text-align:center; text-align:center;
color:${themeColor}; color:${themeColor};
font-family: ${fontFamily};
font-weight:bolder; font-weight:bolder;
padding-left:10px; padding-left:10px;
// border:1px solid ${themeColor}; // border:1px solid ${themeColor};
`, `,
// //
h3: ` h3: `
margin:6px 0; margin:30px 0 10px 0;
font-size: 18px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
padding-left:10px; padding-left:10px;
border-left:3px solid ${themeColor}; border-left:3px solid ${themeColor};
`, `,
// //
blockquote: ` blockquote: `
margin:6px 0; margin:15px 0;
font-size:15px; font-size:15px;
font-family: ${fontFamily};
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
`, `,
// //
ul: ` ul: `
margin: 6px 0; margin: 10px 0;
color: #555; color: #555;
`, `,
li: ` li: `
margin: 4px 0; margin: 5px 0;
color: #555; color: #555;
`, `,
// //
@ -159,12 +150,10 @@ export default {
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
em: ` em: `
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
letter-spacing:0.3em; letter-spacing:0.3em;
`, `,
// 线 // 线
@ -205,72 +194,61 @@ export default {
initTagStyleForAi() { initTagStyleForAi() {
const themeColor = this.themeColor const themeColor = this.themeColor
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor
const fontFamily = this.fontFamily
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:6px 0; font-size: 16px;
font-size: 15px;
line-height:1.55;
font-family: ${fontFamily};
`, `,
// //
h1: ` h1: `
margin:4px 0; margin:12px 0 10px 0;
font-size: 20px; font-size: 22px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
h2: ` h2: `
margin:4px 0; margin:10px 0 10px 0;
font-size: 18px; font-size: 20px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
h3: ` h3: `
margin:4x 0; margin:8x 0 8px 0;
font-size: 16px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
h4: ` h4: `
margin:4px 0; margin:6px 0 8px 0;
font-size: 15px; font-size: 16px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
h5: ` h5: `
margin:4px 0; margin:6px 0 8px 0;
font-size: 14px; font-size: 16px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
h6: ` h6: `
margin:4px 0; margin:6px 0 8px 0;
font-size: 12px; font-size: 16px;
color: ${themeColor}; color: ${themeColor}
font-family: ${fontFamily};
`, `,
// //
blockquote: ` blockquote: `
margin:4px 0; margin:12px 0;
font-size:14px; font-size:14px;
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
font-family: ${fontFamily};
`, `,
// //
ul: ` ul: `
margin: 4px 0; margin: 8px 0;
color: #555; color: #555;
`, `,
li: ` li: `
margin: 4px 0; margin: 5px 0;
color: #555; color: #555;
`, `,
// //
@ -281,7 +259,6 @@ export default {
strong: ` strong: `
font-weight: border; font-weight: border;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily};
`, `,
// //
em: ` em: `
@ -295,14 +272,14 @@ export default {
border:none; border:none;
text-align:center; text-align:center;
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
margin:4px 0; margin:8px 0;
`, `,
// //
table: ` table: `
border-spacing:0; border-spacing:0;
overflow:auto; overflow:auto;
min-width:100%; min-width:100%;
margin:4px 0; margin:8px 0;
border-collapse: collapse; border-collapse: collapse;
`, `,
th: ` th: `
@ -319,7 +296,6 @@ export default {
background: ${codeBgColor}; background: ${codeBgColor};
font-size:12px; font-size:12px;
position: relative; position: relative;
font-family: ${fontFamily};
`, `,
} }
this.tagStyle = zeroStyle this.tagStyle = zeroStyle

View File

@ -7,7 +7,7 @@ class TypewriterManager {
// 配置选项 // 配置选项
this.options = { this.options = {
typingSpeed: 50, // 打字速度(毫秒) typingSpeed: 50, // 打字速度(毫秒)
cursorText: '', // 光标样式 cursorText: '<text class="typing-cursor">|</text>', // 光标样式
...options ...options
}; };
@ -59,7 +59,7 @@ class TypewriterManager {
if (this.isTyping) return; if (this.isTyping) return;
this.isTyping = true; this.isTyping = true;
// 不要在启动时重置displayedContent而是从当前位置继续 this.displayedContent = "";
this._typeNextChar(); this._typeNextChar();
} }
@ -75,7 +75,7 @@ class TypewriterManager {
this.displayedContent.length + 1 this.displayedContent.length + 1
); );
const displayContent = this.displayedContent; const displayContent = this.displayedContent + this.options.cursorText;
// 调用内容更新回调 // 调用内容更新回调
if (this.onContentUpdate) { if (this.onContentUpdate) {
@ -87,12 +87,10 @@ class TypewriterManager {
this.onCharacterTyped(this.displayedContent); this.onCharacterTyped(this.displayedContent);
} }
// 确保最小延迟,避免定时器堆积 // 继续下一个字符
const delay = Math.max(this.options.typingSpeed, 30); // 设置最小延迟30ms
this.typewriterTimer = setTimeout(() => { this.typewriterTimer = setTimeout(() => {
this._typeNextChar(); this._typeNextChar();
}, delay); }, this.options.typingSpeed);
} else { } else {
// 打字完成,移除光标 // 打字完成,移除光标
if (this.onContentUpdate) { if (this.onContentUpdate) {