feat(fun): 添加 AI 剧本生成功能

- 在 素材录入页面添加 AI 生成剧本按钮
- 新增 AiDrama 页面用于与 AI 助手交互
- 实现与 DeepSeek API 的流式和非流式通信
- 添加 Markdown 渲染功能
- 优化聊天界面布局和交互

pages.json

@@ -656,6 +656,12 @@
 					"navigationBarTitleText": "视频预览",
 					"navigationBarBackgroundColor": "#fff"
 				}
+			},{
+				"path": "AiDrama",
+				"style": {
+					"navigationBarTitleText": "AI 剧本助手",
+					"navigationBarBackgroundColor": "#fff"
+				}
 			}]
 		},
 		{

pages/fun/AiDrama.vue

@@ -0,0 +1,634 @@
+<template>
+  <view class="chat-container">
+    <!-- 聊天内容区域 -->
+    <scroll-view 
+      class="chat-content" 
+      scroll-y 
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scrolltoupper="loadMoreMessages"
+      :refresher-enabled="false"
+      ref="scrollView"
+    >
+      <view class="message-wrapper-box" >
+      	<view v-for="(message, index) in messages" :key="index" class="message-wrapper">
+      	  <!-- 系统消息或AI消息 -->
+      	  <block v-if="message.role === 'system' || message.role === 'assistant'">
+      	    <view class="message-container ai-message-container">
+      	      <view class="message ai-message">
+      	        <!-- 使用渲染后的Markdown内容 -->
+      	        <rich-text class="message-content markdown-body" :nodes="message.renderedContent"></rich-text>
+      	      </view>
+      	      <text class="message-time">{{ message.time }}</text>
+      	    </view>
+      	    <!-- 在每条AI消息后显示确认按钮（除了系统消息） -->
+      	    <view v-if="message.role === 'assistant' && message.endStatus" class="accept-button-container">
+      	      <u-button 
+      	        type="success" 
+      	        size="mini" 
+      	        @click="acceptScript(message.content)"
+      	        :custom-style="{marginTop: '10px'}"
+      	      >
+      	        <u-icon name="checkmark" size="14" class="button-icon"></u-icon>
+      	        确认使用此剧本
+      	      </u-button>
+      	    </view>
+      	  </block>
+      	  
+      	  <!-- 用户消息 -->
+      	  <block v-else-if="message.role === 'user'">
+      	    <view class="message-container user-message-container">
+      	      <view class="message user-message">
+      	        <text class="message-content">{{ message.content }}</text>
+      	      </view>
+      	      <text class="message-time">{{ message.time }}</text>
+      	    </view>
+      	  </block>
+      	</view>
+      	
+      	<!-- 加载中提示 -->
+      	<view v-if="loading" class="loading-container">
+      	  <u-loading mode="circle" size="24"></u-loading>
+      	  <text class="loading-text">正在生成剧本...</text>
+      	</view>
+      	
+      	<!-- 用于滚动到底部的空白元素 -->
+      	<view id="scroll-bottom-anchor" style="height: 1px;"></view>
+      	
+      	<!-- 底部占位，确保内容不被输入框遮挡 -->
+      	<view class="bottom-placeholder"></view>
+      </view>
+    </scroll-view>
+
+    <!-- 输入区域 - 固定在底部 -->
+    <view class="chat-input-container">
+      <view class="chat-input">
+        <u-input
+          v-model="inputMessage"
+          placeholder="请输入剧本相关描述，AI将为您生成专业剧本..."
+          :disabled="loading"
+					type='textarea' 
+          :auto-height="true"
+          :custom-style="{flex: 1, minHeight: '80rpx', maxHeight: '200rpx'}"
+          @confirm="sendMessage"
+        ></u-input>
+        <u-button 
+          type="primary" 
+          :disabled="loading || !inputMessage.trim()" 
+          @click="sendMessage"
+          :custom-style="{marginLeft: '10px'}"
+        >
+          发送
+        </u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { renderMarkdown } from './markdown.js';
+
+export default {
+  data() {
+    return {
+      // 聊天消息列表
+      messages: [
+        {
+          role: 'system',
+          content: '你好！我是你的AI剧本助手。请告诉我你想创作的剧本类型和主要情节，我会为你生成专业的剧本内容。',
+          renderedContent: '',
+          time: this.formatTime(new Date()),
+          endStatus: true
+        }
+      ],
+      // 输入框内容
+      inputMessage: '',
+      // 加载状态
+      loading: false,
+      // 滚动位置
+      scrollTop: 0,
+      // URL参数
+      orderId: '',
+      // API密钥
+      apiKey: 'sk-uobtjwyzastkxcnrrbllxpftqxdumkafnitdqqhoermmioru',
+      // 当前AI消息索引
+      currentAiMessageIndex: -1,
+      // 是否是H5环境
+      isH5: false,
+      // 是否需要滚动到底部
+      needScrollToBottom: true,
+      // 滚动计时器
+      scrollTimer: null
+    };
+  },
+  onLoad(options) {
+    // 从URL获取参数
+    this.orderId = options.orderId || '';
+    
+    // 检测是否是H5环境
+    // #ifdef H5
+    this.isH5 = true;
+    // #endif
+    
+    // 初始化
+    this.initPage();
+    
+    // 渲染初始消息的Markdown内容
+    this.renderAllMarkdown();
+  },
+  onReady() {
+    // 页面加载完成后滚动到底部
+    this.throttledScrollToBottom();
+  },
+  onUnload() {
+    // 清除滚动计时器
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer);
+      this.scrollTimer = null;
+    }
+  },
+  watch: {
+    // 监听消息变化，自动滚动到底部
+    messages: {
+      deep: true,
+      handler() {
+        if (this.needScrollToBottom) {
+          this.throttledScrollToBottom();
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化页面
+    initPage() {
+      // 设置导航栏标题
+      uni.setNavigationBarTitle({
+        title: 'AI 剧本助手'
+      });
+    },
+    
+    // 渲染所有消息的Markdown内容
+    renderAllMarkdown() {
+      this.messages.forEach((message, index) => {
+        if (message.role === 'system' || message.role === 'assistant') {
+          this.messages[index].renderedContent = renderMarkdown(message.content);
+        }
+      });
+    },
+    
+    // 格式化时间为 HH:MM 格式
+    formatTime(date) {
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      return `${hours}:${minutes}`;
+    },
+    
+    // 发送消息
+    async sendMessage() {
+      if (!this.inputMessage.trim() || this.loading) return;
+      
+      // 添加用户消息
+      const userMessage = {
+        role: 'user',
+        content: this.inputMessage,
+        time: this.formatTime(new Date())
+      };
+      this.messages.push(userMessage);
+      
+      // 清空输入框
+      const userInput = this.inputMessage;
+      this.inputMessage = '';
+      
+      // 设置加载状态
+      this.loading = true;
+      
+      // 滚动到底部
+      this.throttledScrollToBottom();
+      
+      try {
+        // 准备发送给API的消息
+        const apiMessages = [
+          {
+            role: 'system',
+            content: '你好！我是你的AI剧本助手。请告诉我你想创作的剧本类型和主要情节，我会为你生成专业的剧本内容。请使用Markdown格式来组织你的回答，可以使用标题、列表、粗体、斜体等Markdown语法来增强可读性。'
+          },
+          ...this.messages
+            .filter(msg => msg.role !== 'system')
+            .map(msg => ({
+              role: msg.role,
+              content: msg.content
+            }))
+        ];
+        
+        // 在H5环境中使用fetch API进行流式请求
+        if (this.isH5) {
+          await this.fetchStreamResponse(apiMessages);
+        } else {
+          // 在非H5环境中使用普通请求
+          await this.fetchNormalResponse(apiMessages);
+        }
+      } catch (error) {
+        console.error('API请求失败:', error);
+        uni.showToast({
+          title: '生成剧本失败，请稍后重试',
+          icon: 'none'
+        });
+      } finally {
+        this.loading = false;
+        // 滚动到底部
+        this.throttledScrollToBottom();
+      }
+    },
+    
+    // 使用fetch API进行流式请求（仅H5环境）
+    async fetchStreamResponse(apiMessages) {
+      try {
+        // 添加一个空的AI回复，用于流式更新
+        this.currentAiMessageIndex = this.messages.length;
+        this.messages.push({
+          role: 'assistant',
+          content: '',
+          renderedContent: '',
+          time: this.formatTime(new Date()),
+          endStatus: false
+        });
+        
+        const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${this.apiKey}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-7B',
+            messages: apiMessages,
+            stream: true,
+            max_tokens: 8192,
+            stop: '',
+            temperature: 0.6,
+            top_p: 0.7,
+            top_k: 50,
+            frequency_penalty: 0
+          })
+        });
+
+        if (!response.ok) {
+          throw new Error(`API请求失败: ${response.status}`);
+        }
+
+        if (!response.body) {
+          throw new Error('响应体为空');
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let result = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\n').filter(line => line.trim() !== '');
+          
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const data = line.substring(6).trim();
+              if (data === '[DONE]') {
+                // 设置消息已完成状态
+                if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
+                  this.messages[this.currentAiMessageIndex].endStatus = true;
+                  // 最后一次滚动到底部
+                  this.throttledScrollToBottom();
+                }
+                continue;
+              }
+              
+              try {
+                const parsed = JSON.parse(data);
+                // 检查parsed和choices是否存在
+                if (!parsed || !parsed.choices || !Array.isArray(parsed.choices) || parsed.choices.length === 0) {
+                  console.warn('无效的响应格式:', data);
+                  continue;
+                }
+                
+                // 安全地访问delta属性
+                const delta = parsed.choices[0].delta || {};
+                
+                // 根据您提供的格式解析内容
+                const content = delta.content;
+                // 有些响应可能包含reasoning_content而不是content
+                const reasoningContent = delta.reasoning_content || '';
+                
+                // 只有当content不是null且有值，或者reasoningContent有值时才添加
+                const textToAdd = (content !== null && content !== undefined) ? content : reasoningContent;
+                
+                if (textToAdd) {
+                  result += textToAdd;
+                  // 确保messages[currentAiMessageIndex]存在
+                  if (this.currentAiMessageIndex >= 0 && this.currentAiMessageIndex < this.messages.length) {
+                    this.messages[this.currentAiMessageIndex].content = result;
+                    this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
+                    
+                    // 滚动到底部，但限制频率以提高性能
+										this.throttledScrollToBottom();
+                  }
+                }
+              } catch (e) {
+                console.error('解析流数据失败:', e, line);
+              }
+            }
+          }
+        }
+        
+        return result;
+      } catch (error) {
+        console.error('调用DeepSeek流式API失败:', error);
+        // 如果出错，确保移除空的AI消息
+        if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
+          this.messages.pop();
+          this.currentAiMessageIndex = -1;
+        }
+        throw error;
+      }
+    },
+    
+    // 使用普通请求（非H5环境）
+    async fetchNormalResponse(apiMessages) {
+      try {
+        // 添加一个空的AI回复
+        this.currentAiMessageIndex = this.messages.length;
+        this.messages.push({
+          role: 'assistant',
+          content: '',
+          renderedContent: '',
+          time: this.formatTime(new Date()),
+          endStatus: false
+        });
+        
+        const response = await uni.request({
+          url: 'https://api.siliconflow.cn/v1/chat/completions',
+          method: 'POST',
+          header: {
+            'Authorization': `Bearer ${this.apiKey}`,
+            'Content-Type': 'application/json'
+          },
+          data: {
+            model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-7B',
+            messages: apiMessages,
+            stream: false,
+            max_tokens: 8192,
+            stop: '',
+            temperature: 0.6,
+            top_p: 0.7,
+            top_k: 50,
+            frequency_penalty: 0
+          },
+          dataType: 'json'
+        });
+        
+        // 检查响应状态
+        if (response.statusCode !== 200) {
+          throw new Error(`API请求失败: ${response.statusCode}`);
+        }
+        
+        // 获取响应内容
+        const result = response.data.choices[0].message.content;
+        
+        // 更新消息内容
+        this.messages[this.currentAiMessageIndex].content = result;
+        this.messages[this.currentAiMessageIndex].renderedContent = renderMarkdown(result);
+        this.messages[this.currentAiMessageIndex].endStatus = true;
+        
+        // 滚动到底部
+        this.throttledScrollToBottom();
+        
+        return result;
+      } catch (error) {
+        console.error('调用DeepSeek API失败:', error);
+        // 如果出错，确保移除空的AI消息
+        if (this.messages.length > 0 && this.messages[this.messages.length - 1].content === '') {
+          this.messages.pop();
+          this.currentAiMessageIndex = -1;
+        }
+        throw error;
+      }
+    },
+    
+    // 接受剧本
+    acceptScript(scriptContent) {
+      // // 使用全局方法返回选择的剧本
+      // getApp().globalData.selectedScript = {
+      //   orderId: this.orderId,
+      //   content: scriptContent
+      // };
+			// const pages = getCurrentPages();
+			// // 上一个页面实例（假设是 pageA）
+			// const prevPage = pages[pages.length - 2];
+			// console.log("prevPage",prevPage)
+      
+      uni.showToast({
+        title: '已确认使用此剧本',
+        icon: 'success'
+      });
+      
+      // 返回上一页
+      // setTimeout(() => {
+      //   uni.navigateBack();
+      // }, 1500);
+			
+			// 当前页面（假设是 pageB）
+			uni.navigateBack({
+			  delta: 1, // 返回的页面层数，1 表示返回上一个页面
+			  success: function() {
+			    // 获取页面栈
+			    const pages = getCurrentPages();
+			    // 上一个页面实例（假设是 pageA）
+			    const prevPage = pages[pages.length - 2];
+					console.log("prevPage",prevPage)
+			    // 调用上一个页面的方法
+			    prevPage.getAiDramaTxt(scriptContent);
+			  }
+			});
+    },
+    
+    // 节流滚动到底部函数，避免频繁滚动
+    throttledScrollToBottom() {
+      // if (this.scrollTimer) return;
+      
+      // this.scrollTimer = setTimeout(() => {
+      //   this.scrollToBottom();
+      //   this.scrollTimer = null;
+      // }, 1000); // 300ms内只执行一次滚动
+			this.$u.throttle(this.scrollToBottom, 300)
+    },
+    
+    // 滚动到底部
+    scrollToBottom() {
+      this.$nextTick(() => {
+        // 方法1: 使用scrollTop设置滚动位置
+        // const query = uni.createSelectorQuery().in(this);
+        // query.select('.chat-content').boundingClientRect(data => {
+        //   if (data) {
+        //     // 设置一个非常大的值确保滚动到底部
+        //     this.scrollTop = 999999;
+        //   }
+        // }).exec();
+        
+        // 方法2: 使用选择器定位到底部锚点元素
+        setTimeout(() => {
+          const query = uni.createSelectorQuery().in(this);
+          query.select('#scroll-bottom-anchor').boundingClientRect(data => {
+            if (data) {
+              // 滚动到锚点元素位置
+              uni.pageScrollTo({
+                selector: '#scroll-bottom-anchor',
+                duration: 100
+              });
+            }
+          }).exec();
+        }, 100);
+      });
+    },
+    
+    // 加载更多消息（上拉加载）
+    loadMoreMessages() {
+      // 这里可以实现加载历史消息的逻辑
+      // 目前不需要，保留接口
+      this.needScrollToBottom = false; // 上拉加载时禁用自动滚动
+      
+      // 加载完成后恢复自动滚动
+      setTimeout(() => {
+        this.needScrollToBottom = true;
+      }, 1000);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--window-top));
+  position: relative;
+}
+
+.chat-content {
+  flex: 1;
+	background-color: #f5f7fa;
+  // padding: 20rpx;
+  // padding-bottom: 180rpx; /* 为底部输入框留出空间 */
+}
+
+.message-wrapper-box{
+	padding: 20rpx;
+	// padding-bottom: 180rpx; /* 为底部输入框留出空间 */
+}
+
+.message-wrapper {
+  margin-bottom: 40rpx;
+}
+
+.message-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-message-container {
+  align-items: flex-start;
+}
+
+.user-message-container {
+  align-items: flex-end;
+}
+
+.message {
+  max-width: calc(80% - 40rpx);
+  padding: 24rpx 30rpx;
+  border-radius: 16rpx;
+  position: relative;
+}
+
+.ai-message {
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.user-message {
+  background-color: #4e6ef2;
+  color: white;
+  box-shadow: 0 2px 8px rgba(78, 110, 242, 0.2);
+}
+
+.message-content {
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* Markdown样式 */
+.markdown-body {
+  color: #333;
+}
+
+.message-time {
+  font-size: 24rpx;
+  color: #909399;
+  margin-top: 10rpx;
+  padding: 0 10rpx;
+}
+
+.user-message-container .message-time {
+  color: #909399;
+}
+
+/* 固定在底部的输入区域 */
+.chat-input-container {
+  // position: fixed;
+  // bottom: 0;
+  // left: 0;
+  // right: 0;
+  background-color: #fff;
+  border-top: 1px solid #ebeef5;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+  z-index: 100;
+	// min-height: 170rpx;
+	margin-top: auto;
+	position: sticky;
+	bottom: 0;
+}
+
+.chat-input {
+  display: flex;
+  align-items: flex-end;
+}
+
+.bottom-placeholder {
+  height: 40rpx; /* 确保内容不被输入框遮挡 */
+}
+
+.accept-button-container {
+  // display: flex;
+  // justify-content: flex-start;
+  // margin-top: 20rpx;
+  margin-bottom: 40rpx;
+}
+
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 28rpx;
+  margin: 20rpx 0;
+}
+
+.loading-text {
+  margin-left: 16rpx;
+}
+
+.button-icon {
+  margin-right: 8rpx;
+}
+</style>

pages/fun/markdown.js

@@ -0,0 +1,64 @@
+// 简单的Markdown渲染函数
+export function renderMarkdown(content) {
+  if (!content) return '';
+  
+  // 由于UniApp的rich-text组件支持HTML，我们将Markdown转换为HTML
+  // 这是一个简化版的Markdown解析器，仅支持基本语法
+  
+  let html = content
+    // 转义HTML特殊字符
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    
+    // 标题
+    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+    .replace(/^#### (.*$)/gm, '<h4>$1</h4>')
+    .replace(/^##### (.*$)/gm, '<h5>$1</h5>')
+    .replace(/^###### (.*$)/gm, '<h6>$1</h6>')
+    
+    // 粗体和斜体
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/__(.*?)__/g, '<strong>$1</strong>')
+    .replace(/_(.*?)_/g, '<em>$1</em>')
+    
+    // 链接
+    .replace(/\[([^\]]+)\]$$([^)]+)$$/g, '<a href="$2">$1</a>')
+    
+    // 图片
+    .replace(/!\[([^\]]+)\]$$([^)]+)$$/g, '<img src="$2" alt="$1">')
+    
+    // 无序列表
+    .replace(/^\s*[-*+]\s+(.*$)/gm, '<li>$1</li>')
+    
+    // 有序列表
+    .replace(/^\s*\d+\.\s+(.*$)/gm, '<li>$1</li>')
+    
+    // 代码块
+    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+    
+    // 行内代码
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    
+    // 引用
+    .replace(/^\> (.*$)/gm, '<blockquote>$1</blockquote>')
+    
+    // 段落
+    .replace(/\n\s*\n/g, '</p><p>')
+    
+    // 换行
+    .replace(/\n/g, '<br>');
+  
+  // 包装在段落标签中
+  html = '<p>' + html + '</p>';
+  
+  // 修复列表
+  html = html.replace(/<li>.*?<\/li>/g, function(match) {
+    return '<ul>' + match + '</ul>';
+  });
+  
+  return html;
+}

pages/fun/materialEdit.vue

@@ -8,6 +8,16 @@
 				<u-icon name="arrow-down-fill" color="#999" size="28"></u-icon>
 			</view>
 		</view>
+		
+		<view class="form-item">
+			<text class="form-label">剧本 <text class="form-hint">视频的剧本</text> </text>
+			<!-- 文本输入 -->
+			<template>
+				<u-input style="max-height: 500rpx;overflow-y: auto;" :disabled="getDisabledStatus()" maxlength="9999" type='textarea' class="bg-gray" v-model="scriptContent" :placeholder="`请输入剧本`" />
+			</template>
+			<u-button @click="openAiDrama" type="primary" :disabled="getDisabledStatus()">Ai生成剧本</u-button>
+		</view>
+		
 		<view v-for="(item,index) in materialTemplateList" :key="index" class="form-item">
 			<text class="form-label">{{ item.attrTitle }} <text class="form-hint">{{ item.attrHint ? '(' +item.attrHint + ')' : '' }}</text> </text>
 			<!-- 文本输入 -->
@@ -100,6 +110,7 @@
 				audioType: ['.wav', '.mp3', '.aac', '.flac', '.ogg'],
 				audioH5Type: ['wav', 'mp3', 'aac', 'flac', 'ogg'],
 				buttonLoading:false,
+				scriptContent:'',
 				// videoType: ['.avi', '.mp4', '.mkv', '.flv', '.mov', '.wmv', '.mpeg', '.3gp'],
 			}
 		},
@@ -112,6 +123,14 @@
 			this.getProductDetail();
 		},
 		methods: {
+			getAiDramaTxt(txt){
+				this.scriptContent = txt;
+			},
+			openAiDrama(){
+				uni.navigateTo({
+					url:'./AiDrama'
+				})
+			},
 			getDisabledStatus(){
 				if(this.commitState !== 'add' && this.commitState !== 'draft' && this.commitState !== 'back'){
 					return true;