style: 实现毛玻璃效果

src/views/AIRobotChat/src/AIRobotChat.vue

@@ -178,13 +178,13 @@ function scrollToBottom() {
 const simulateStreamingMarkdown = () => {
   loadingAnswer.value = true
   const chunks = [
-    '# 欢迎使用 Markdown\n\n',
-    '这是一个用于测试的 **Markdown** 文本。\n\n',
-    '你可以使用 *斜体* 来强调重点。\n\n',
-    '也可以使用 [链接](https://example.com) 引导用户跳转。\n\n',
-    '- 支持无序列表\n',
-    '- 非常适合逐行流式显示\n\n',
-    '这是一段测试！\n'
+    '# 欢迎使用这是一个用于测试的 Markdown 文本 Markdown\n\n',
+    '这是一个用于测试的这是一个用于测试的 Markdown 文本 **Markdown** 文本。\n\n',
+    '你可以使用这是一个用于测试的 Markdown 文本 *斜体* 来强调重点。\n\n',
+    '也可以使用这是一个用于测试的 Markdown 文本 [链接](https://example.com) 引导用户跳转。\n\n',
+    '- 支持无这是一个用于测试的 Markdown 文本这是一个用于测试的 Markdown 文本序列表\n',
+    '- 非常适合这是一个用于测试的 Markdown 文本这是一个用于测试的 Markdown 文本这是一个用于测试的 Markdown 文本逐行流式显示\n\n',
+    '这是一段这是一个用于测试的 Markdown 文本这是一个用于测试的 Markdown 文本这是一个用于测试的 Markdown 文本测试！\n'
   ]
 
   messages.value.push({
@@ -580,8 +580,10 @@ defineExpose({
       height: 32px;
       width: 32px;
       border-radius: 50%;
-      background-color: #f5f4f4;
-      box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.1);
+      // background-color: #f5f4f4;
+      background: rgba(255, 255, 255, 0.1); /* 半透明背景色 */
+      box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(1.5px); /* 应用10px的模糊效果 */
       span {
         color: #2b2f36;
       }