Merge remote-tracking branch 'origin/wanzi'

src/views/AIPage/aiGenerate/DialogContent.vue

@@ -64,7 +64,7 @@
       <!-- 诗词显示区域 -->
       <div v-if="showPoem" class="poem-display">
         <div class="poem-content">
-          <div class="poem-text" v-html="parseMarkdown(currentPoemContent)"></div>
+          <div class="poem-text" v-html="formatPoemContent(currentPoemContent)" ></div>
         </div>
       </div>
 
@@ -259,6 +259,20 @@ const parseMarkdown = (content) => {
   return marked(content)
 }
 
+// 格式化诗词内容，在逗号和句号后添加换行
+const formatPoemContent = (content) => {
+  if (!content) return ''
+  // 移除markdown格式符号，保留文字
+  let plainText = content.replace(/[\*#`\[\]\(\)]/g, '')
+  // 在逗号和句号后添加换行符（保留标点符号）
+  let formatted = plainText.replace(/([。！？；、])/g, '$1<br/>')
+  
+  // 写死的额外数据
+  // const extraData = '<p>' + formatted + '</p>'
+  
+  return formatted
+}
+
 const getCharacterSide = () => {
   return currentDialogueIndex.value % 2 === 0 ? 'left' : 'right'
   
@@ -1599,13 +1613,18 @@ onUnmounted(() => {
   top: 25%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 100%;
-  max-width: rpx(600);
-  padding: rpx(20);
+  width: rpx(500);
+  height: rpx(200);
+  padding: rpx(0);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 5;
+  background-image: url('@/assets/dialogue/long-scroll.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  animation: scrollBackgroundFadeIn 0.8s ease-out;
 }
 
 .poem-content {
@@ -1615,18 +1634,34 @@ onUnmounted(() => {
 }
 
 .poem-text {
+  width: rpx(300);
+  height: rpx(90);
   font-family: 'STKaiti', 'KaiTi', '楷体', 'Ma Shan Zheng', cursive;
-  font-size: rpx(30);
-  line-height: 1.5;
-  color: white;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-  padding: rpx(20);
-  background-color: #ffffff1a;
-  border-radius: rpx(10);
+  font-size: rpx(20);
+  color: black;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
   transition: all 0.5s ease-in-out;
-  white-space: nowrap;
+}
+
+.poem-text::-webkit-scrollbar {
+  width: rpx(0);
+}
+.poem-text::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: rpx(4);
+}
+.poem-text::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: rpx(4);
+}
+
+.poem-text::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .poem-text::before {
@@ -1636,7 +1671,7 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
+  // background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
   animation: poemShine 3s ease-in-out infinite;
 }
 
@@ -1651,15 +1686,26 @@ onUnmounted(() => {
   }
 }
 
-@keyframes poemShine {
-  0% {
-    transform: translateX(-100%) rotate(45deg);
+@keyframes scrollBackgroundFadeIn {
+  from {
+    opacity: 0;
+    background-size: 80%;
   }
-  100% {
-    transform: translateX(100%) rotate(45deg);
+  to {
+    opacity: 1;
+    background-size: 100%;
   }
 }
 
+// @keyframes poemShine {
+//   0% {
+//     transform: translateX(-100%) rotate(45deg);
+//   }
+//   100% {
+//     transform: translateX(100%) rotate(45deg);
+//   }
+// }
+
 .poem-text p {
   margin: rpx(10) 0;
   opacity: 0;