vue_zhongyou 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/ChatForm.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="chat-form">
+    <van-form :model="formData" ref="formRef">
+      <template v-for="field in schema" :key="field.field">
+        <!-- 输入框 -->
+        <van-field
+          v-if="field.type === 'input'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          :placeholder="field.placeholder"
+          :rules="field.rules"
+          :required="field.rules?.some(rule => rule.required)"
+        />
+        
+        <!-- 文本域 -->
+        <van-field
+          v-else-if="field.type === 'textarea'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          type="textarea"
+          :placeholder="field.placeholder"
+          :rows="field.rows || 2"
+          :autosize="field.autosize || false"
+        />
+        
+        <!-- 选择器 -->
+        <van-field
+          v-else-if="field.type === 'select'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          is-link
+          readonly
+          :placeholder="field.placeholder"
+          @click="() => showPicker(field)"
+        >
+          <template #input>
+            <span v-if="formData[field.field]">{{ getOptionLabel(field, formData[field.field]) }}</span>
+          </template>
+        </van-field>
+        
+        <!-- 单选框 -->
+        <van-cell-group v-else-if="field.type === 'radio'" :title="field.label">
+          <van-radio-group v-model="formData[field.field]" direction="horizontal">
+            <van-radio 
+              v-for="option in field.options" 
+              :key="option.value" 
+              :name="option.value"
+              icon-size="16px"
+              checked-color="#1989fa"
+            >
+              {{ option.label }}
+            </van-radio>
+          </van-radio-group>
+        </van-cell-group>
+        
+        <!-- 复选框 -->
+        <van-cell-group v-else-if="field.type === 'checkbox'" :title="field.label">
+          <van-checkbox-group v-model="formData[field.field]" direction="horizontal">
+            <van-checkbox 
+              v-for="option in field.options" 
+              :key="option.value" 
+              :name="option.value"
+              icon-size="16px"
+              checked-color="#1989fa"
+            >
+              {{ option.label }}
+            </van-checkbox>
+          </van-checkbox-group>
+        </van-cell-group>
+        
+        <!-- 日期选择 -->
+        <van-field
+          v-else-if="field.type === 'date'"
+          v-model="formData[field.field]"
+          :label="field.label"
+          is-link
+          readonly
+          :placeholder="field.placeholder"
+          @click="() => showDatePicker(field)"
+        />
+        
+        <!-- 日期范围 -->
+        <van-cell-group v-else-if="field.type === 'dateRange'" :title="field.label">
+          <van-cell
+            :title="`${field.label}开始`"
+            :value="formData[field.field]?.[0] || '请选择'"
+            is-link
+            @click="() => showDateRangePicker(field, 0)"
+          />
+          <van-cell
+            :title="`${field.label}结束`"
+            :value="formData[field.field]?.[1] || '请选择'"
+            is-link
+            @click="() => showDateRangePicker(field, 1)"
+          />
+        </van-cell-group>
+      </template>
+      
+      <!-- 操作按钮 -->
+      <div class="form-actions" v-if="showActions">
+        <van-button 
+          v-if="submitButtonLabel" 
+          type="primary" 
+          block 
+          :loading="isSubmitting"
+          @click="onSubmit"
+        >
+          {{ submitButtonLabel }}
+        </van-button>
+        <van-button 
+          v-if="resetButtonLabel" 
+          type="default" 
+          block 
+          @click="onReset"
+        >
+          {{ resetButtonLabel }}
+        </van-button>
+      </div>
+    </van-form>
+    
+    <!-- 选择器弹窗 -->
+    <van-popup v-model:show="showPickerDialog" position="bottom">
+      <van-picker
+        :columns="currentPickerColumns"
+        @confirm="onPickerConfirm"
+        @cancel="showPickerDialog = false"
+      />
+    </van-popup>
+    
+    <!-- 日期选择器弹窗 -->
+    <van-popup v-model:show="showDatePickerDialog" position="bottom">
+      <van-date-picker
+        v-model="currentDateValue"
+        @confirm="onDatePickerConfirm"
+        @cancel="showDatePickerDialog = false"
+      />
+    </van-popup>
+    
+    <!-- 日期范围选择器弹窗 -->
+    <van-popup v-model:show="showDateRangePickerDialog" position="bottom">
+      <van-date-picker
+        v-model="currentDateRangeValue"
+        @confirm="onDateRangePickerConfirm"
+        @cancel="showDateRangePickerDialog = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted } from 'vue'
+import { showToast } from 'vant'
+
+// 定义组件属性
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({})
+  },
+  schema: {
+    type: Array,
+    required: true
+  },
+  submitButtonLabel: {
+    type: String,
+    default: '提交'
+  },
+  resetButtonLabel: {
+    type: String,
+    default: '重置'
+  },
+  showActions: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['update:modelValue', 'submit', 'change'])
+
+// 表单数据
+const formData = ref({})
+
+// 表单引用
+const formRef = ref(null)
+
+// 提交状态
+const isSubmitting = ref(false)
+
+// 弹窗相关
+const showPickerDialog = ref(false)
+const showDatePickerDialog = ref(false)
+const showDateRangePickerDialog = ref(false)
+const currentField = ref(null)
+const currentPickerColumns = ref([])
+const currentDateValue = ref(new Date())
+const currentDateRangeValue = ref([new Date(), new Date()])
+
+// 初始化表单数据
+const initializeFormData = () => {
+  const data = { ...props.modelValue }
+  
+  props.schema.forEach(field => {
+    // 如果没有初始值但有默认值，则使用默认值
+    if (!(field.field in data) && 'default' in field) {
+      data[field.field] = field.default
+    }
+    
+    // 确保所有字段都在数据中
+    if (!(field.field in data)) {
+      if (field.type === 'checkbox') {
+        data[field.field] = []
+      } else if (field.type === 'dateRange') {
+        data[field.field] = []
+      } else {
+        data[field.field] = ''
+      }
+    }
+  })
+  
+  formData.value = data
+}
+
+// 获取选项标签
+const getOptionLabel = (field, value) => {
+  const option = field.options.find(opt => opt.value === value)
+  return option ? option.label : value
+}
+
+// 显示选择器
+const showPicker = (field) => {
+  currentField.value = field
+  currentPickerColumns.value = field.options.map(option => ({
+    text: option.label,
+    value: option.value
+  }))
+  showPickerDialog.value = true
+}
+
+// 选择器确认
+const onPickerConfirm = ({ selectedValues }) => {
+  const value = selectedValues[0]
+  formData.value[currentField.value.field] = value
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value })
+  showPickerDialog.value = false
+}
+
+// 显示日期选择器
+const showDatePicker = (field) => {
+  currentField.value = field
+  currentDateValue.value = formData.value[field.field] ? new Date(formData.value[field.field]) : new Date()
+  showDatePickerDialog.value = true
+}
+
+// 日期选择器确认
+const onDatePickerConfirm = ({ selectedValues }) => {
+  const date = new Date(selectedValues[0], selectedValues[1] - 1, selectedValues[2])
+  const dateString = date.toISOString().split('T')[0]
+  formData.value[currentField.value.field] = dateString
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value: dateString })
+  showDatePickerDialog.value = false
+}
+
+// 显示日期范围选择器
+const showDateRangePicker = (field, index) => {
+  currentField.value = field
+  const range = formData.value[field.field] || []
+  if (range[index]) {
+    currentDateRangeValue.value[index] = new Date(range[index])
+  }
+  showDateRangePickerDialog.value = true
+}
+
+// 日期范围选择器确认
+const onDateRangePickerConfirm = ({ selectedValues }) => {
+  const startDate = new Date(selectedValues[0][0], selectedValues[0][1] - 1, selectedValues[0][2])
+  const endDate = new Date(selectedValues[1][0], selectedValues[1][1] - 1, selectedValues[1][2])
+  
+  const range = [...(formData.value[currentField.value.field] || [])]
+  range[0] = startDate.toISOString().split('T')[0]
+  range[1] = endDate.toISOString().split('T')[0]
+  
+  formData.value[currentField.value.field] = range
+  emit('update:modelValue', formData.value)
+  emit('change', { field: currentField.value.field, value: range })
+  showDateRangePickerDialog.value = false
+}
+
+// 提交表单
+const onSubmit = async () => {
+  if (formRef.value) {
+    try {
+      await formRef.value.validate()
+      isSubmitting.value = true
+      emit('submit', formData.value)
+    } catch (error) {
+      showToast(error.message || '请检查表单填写是否正确')
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+}
+
+// 重置表单
+const onReset = () => {
+  initializeFormData()
+  emit('update:modelValue', formData.value)
+}
+
+// 监听表单数据变化
+watch(formData, (newVal) => {
+  emit('update:modelValue', newVal)
+}, { deep: true })
+
+// 监听外部传入的值变化
+watch(() => props.modelValue, (newVal) => {
+  formData.value = { ...newVal }
+}, { deep: true })
+
+// 组件挂载时初始化数据
+onMounted(() => {
+  initializeFormData()
+})
+</script>
+
+<style lang="scss" scoped>
+.chat-form {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 8px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  
+  // 当在消息气泡中显示时，调整样式
+  :deep(.message-bubble) & {
+    background: transparent;
+    box-shadow: none;
+    margin: 0;
+  }
+  
+  .form-actions {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  :deep(.van-cell-group) {
+    margin-bottom: 16px;
+    
+    .van-cell {
+      padding: 12px 0;
+    }
+  }
+  
+  :deep(.van-radio-group--horizontal) {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+  }
+  
+  :deep(.van-checkbox-group--horizontal) {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 0;
+  }
+  
+  :deep(.van-radio) {
+    margin-bottom: 4px;
+  }
+  
+  :deep(.van-checkbox) {
+    margin-bottom: 4px;
+  }
+}
+</style>

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/aiChatPage.vue

@@ -0,0 +1,757 @@
+<template>
+  <div class="ai-chat-page">
+    <!-- 顶部导航栏 -->
+    <van-nav-bar
+      class="nav-bar"
+      title="智能工作台"
+      left-arrow
+      @click-left="$router.back()"
+      fixed
+      placeholder
+    />
+
+    <!-- 消息列表容器 -->
+    <div class="chat-container" ref="chatContainerRef">
+      <div class="messages-wrapper">
+        <!-- 消息列表 -->
+        <div
+          v-for="(message, index) in messages"
+          :key="index"
+          class="message-item"
+          :class="{ 'user-message': message.role === 'user', 'ai-message': message.role === 'assistant' }"
+        >
+          <div class="message-content">
+            <div class="message-bubble">
+              <!-- 文本消息 -->
+              <div v-if="isTextMessage(message)" class="message-text" v-html="formatMessage(message.content)"></div>
+              
+              <!-- 表单消息 -->
+              <div v-else-if="isFormMessage(message)">
+                <!-- 文字介绍 -->
+                <div v-if="message.output" class="message-output" v-html="formatMessage(message.output)"></div>
+                <!-- 表单内容 -->
+                <ChatForm 
+                  :schema="message.formSchema"
+                  :model-value="message.formData || {}"
+                  @submit="handleFormSubmit(index, $event)"
+                />
+              </div>
+              
+              <!-- 列表卡片消息 -->
+              <div v-else-if="isCardListMessage(message)">
+                <!-- 文字介绍 -->
+                <div v-if="message.output" class="message-output" v-html="formatMessage(message.output)"></div>
+                <!-- 卡片列表内容 -->
+                <NewChatCardList 
+                  :items="message.items"
+                  :showLoadMore="message.showLoadMore"
+                  :page-size="message.pageSize || 10"
+                  :current-page="message.currentPage || 1"
+                  :loading="message.loading"
+                  @item-click="handleCardItemClick"
+                  @action-click="handleCardActionClick(index, $event)"
+                  @load-more="handleLoadMore(message)"
+                />
+              </div>
+              
+              <!-- 推荐信息 -->
+              <div v-if="message.suggestions && message.suggestions.length > 0" class="suggestions-container">
+                <div class="suggestions-title">推荐:</div>
+                <van-tag 
+                  v-for="(suggestion, index) in message.suggestions" 
+                  :key="index" 
+                  class="suggestion-tag"
+                  @click="() => handleSuggestionClick(suggestion)"
+                >
+                  {{ suggestion }}
+                </van-tag>
+              </div>
+              
+              <!-- 加载状态 -->
+              <div v-if="message.role === 'assistant' && message.loading" class="loading-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+            <div class="message-time">{{ formatTime(message.timestamp) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 输入区域 -->
+    <div class="input-area">
+      <div class="input-wrapper">
+        <van-field
+          v-model="inputText"
+          type="textarea"
+          rows="1"
+          autosize
+          placeholder="输入您的问题..."
+          :disabled="isLoading"
+          @keydown.enter.exact.prevent="handleEnter"
+          @keydown.shift.enter.exact="handleShiftEnter"
+          @focus="handleInputFocus"
+          class="chat-input"
+        />
+        <van-button
+          type="primary"
+          size="small"
+          :disabled="!inputText.trim() || isLoading"
+          :loading="isLoading"
+          @click="sendMessage"
+          class="send-btn"
+        >
+          发送
+        </van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, watch } from 'vue'
+import { showToast } from 'vant'
+import ChatForm from '@/components/ChatForm.vue'
+import NewChatCardList from '@/components/newChatCardList.vue'
+
+// 消息列表
+const messages = ref([])
+// 输入文本
+const inputText = ref('')
+// 加载状态
+const isLoading = ref(false)
+// 聊天容器引用
+const chatContainerRef = ref(null)
+// 会话ID
+const sessionId = ref('')
+
+// 判断消息类型
+const isTextMessage = (message) => {
+  return typeof message.content === 'string'
+}
+
+const isFormMessage = (message) => {
+  return message.type === 'form' && message.formSchema
+}
+
+const isCardListMessage = (message) => {
+  return message.type === 'cardList' && Array.isArray(message.items)
+}
+
+// 初始化欢迎消息
+onMounted(() => {
+  addMessage('assistant', '您好！有什么可以帮助您的吗？', false)
+  scrollToBottom()
+})
+
+// 添加消息
+const addMessage = (role, content, loading = false) => {
+  let message = {
+    role,
+    timestamp: new Date(),
+    loading
+  }
+
+  // 根据内容类型设置消息属性
+  if (typeof content === 'string') {
+    // 文本消息
+    message.content = content
+  } else if (content.type === 'form') {
+    // 表单消息
+    message.type = 'form'
+    message.formSchema = content.schema
+    message.formData = content.data || {}
+    // 添加介绍文字（如果存在）
+    if (content.output) {
+      message.output = content.output
+    }
+  } else if (content.type === 'cardList') {
+    // 列表卡片消息
+    for(let key in content){
+      message[key] = content[key]
+    }
+  }
+
+  // 为AI助手消息添加推荐信息
+  if (role === 'assistant' && !loading) {
+    message.suggestions = generateSuggestions(content)
+  }
+
+  messages.value.push(message)
+  nextTick(() => {
+    scrollToBottom()
+  })
+}
+
+// 生成推荐信息
+const generateSuggestions = (content) => {
+  // 这里可以根据实际内容生成相关的推荐信息
+  // 目前先使用一些示例推荐信息
+  const sampleSuggestions = [
+    '您还可以询问相关问题',
+    '了解更多详细信息',
+    '查看相关文档',
+    '获取更多帮助'
+  ]
+  
+  // 根据内容类型生成不同的推荐信息
+  if (typeof content === 'string') {
+    if (content.includes('时间')) {
+      return ['查看时区信息', '设置提醒', '查看日程安排']
+    } else if (content.includes('表单')) {
+      return ['查看表单填写指南', '了解数据隐私政策', '联系客服']
+    } else if (content.includes('产品')) {
+      return ['比较不同产品', '查看用户评价', '获取优惠信息']
+    }
+  } else if (content && content.type === 'form') {
+    return ['查看表单填写示例', '了解字段含义', '下载填写模板']
+  } else if (content && content.type === 'cardList') {
+    return ['筛选产品类别', '按价格排序', '查看更多产品']
+  }
+  
+  // 默认推荐信息
+  return sampleSuggestions.slice(0, 3)
+}
+
+// 发送消息
+const sendMessage = async () => {
+  const text = inputText.value.trim()
+  if (!text || isLoading.value) return
+
+  // 添加用户消息
+  addMessage('user', text)
+  inputText.value = ''
+
+  // 添加AI加载消息
+  addMessage('assistant', '', true)
+  isLoading.value = true
+
+  // 拼装一下请求体
+  let requestBody = {
+    sessionId: sessionId.value,
+    input: text,
+    payload: {
+      sceneType : "QUERY",
+      queryType : "CREATOR",
+      processType : "BUSINESS_TRIP",
+      queryBackLogReq: {
+        userId: '123456',
+        pageNum:1,
+        pageSize: 10
+      }
+    }
+  }
+
+  try {
+    // 模拟AI回复（实际应该调用API）
+    await simulateAIResponse(text)
+  } catch (error) {
+    console.error('发送消息失败:', error)
+    showToast('发送失败，请重试')
+    // 移除加载中的消息
+    messages.value.pop()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 模拟AI回复（实际应该替换为真实的API调用）
+const simulateAIResponse = async (userMessage) => {
+  // 模拟网络延迟
+  await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000))
+
+  // 移除加载中的消息
+  const loadingMessage = messages.value.pop()
+
+  // 生成模拟回复
+  let response = ''
+  if (userMessage.includes('你好') || userMessage.includes('您好')) {
+    response = '您好！很高兴为您服务。'
+  } else if (userMessage.includes('帮助') || userMessage.includes('功能')) {
+    response = '我可以帮您解答问题、提供建议、分析数据等。请告诉我您需要什么帮助？'
+  } else if (userMessage.includes('时间')) {
+    response = `当前时间是：${new Date().toLocaleString('zh-CN')}`
+  } else if (userMessage.includes('表单')) {
+    // 返回表单类型消息，带介绍文字
+    response = {
+      type: 'form',
+      output: '请您填写以下信息，以便我们为您提供更好的服务。所有信息都将严格保密，请放心填写。',
+      schema: [
+        {
+          field: 'name',
+          label: '姓名',
+          type: 'input',
+          placeholder: '请输入您的姓名',
+          rules: [{ required: true, message: '请输入姓名' }]
+        },
+        {
+          field: 'email',
+          label: '邮箱',
+          type: 'input',
+          placeholder: '请输入您的邮箱',
+          rules: [{ required: true, message: '请输入邮箱' }, { pattern: /\w+@\w+\.\w+/, message: '邮箱格式不正确' }]
+        },
+        {
+          field: 'age',
+          label: '年龄',
+          type: 'input',
+          placeholder: '请输入您的年龄'
+        },
+        {
+          field: 'gender',
+          label: '性别',
+          type: 'radio',
+          options: [
+            { label: '男', value: 'male' },
+            { label: '女', value: 'female' }
+          ]
+        },
+        {
+          field: 'hobbies',
+          label: '爱好',
+          type: 'checkbox',
+          options: [
+            { label: '阅读', value: 'reading' },
+            { label: '运动', value: 'sports' },
+            { label: '音乐', value: 'music' },
+            { label: '旅行', value: 'travel' }
+          ]
+        },
+        {
+          field: 'bio',
+          label: '个人简介',
+          type: 'textarea',
+          placeholder: '请简单介绍一下自己',
+          rows: 3
+        }
+      ]
+    }
+  } else if (userMessage.includes('列表') || userMessage.includes('卡片')) {
+    // 返回列表卡片类型消息，带介绍文字
+    // TODO 生成这种卡片列表的时候，要初始化一个这张卡片的独有的page,用来做分页
+    const items = [
+      {
+        title: '产品A',
+        subtitle: '高性能计算服务',
+        statusName : '待审',
+        creator : '刘松煜',
+        createTime : '2023-10-01 10:00:00',
+        currentNode : '节点1',
+        dpName : '信息科技部',
+      },
+      {
+        title: '产品B',
+        subtitle: '云存储解决方案',
+        statusName : '驳回',
+        creator : '刘松煜',
+        createTime : '2023-10-01 10:00:00',
+        currentNode : '节点1',
+        dpName : '固定收益投资部',
+      },
+      {
+        title: '信息科技部xxxaaaa啊啊啊你还是低哦是大家扫IDiOS滴哦啊啊大家送啊点喝酒哦洒几滴撒娇都i爱睡觉',
+        subtitle: '人工智能平台',
+        statusName : '待审',
+        creator : '刘松煜',
+        createTime : '2023-10-01',
+        currentNode : '节点1',
+        dpName : '信息科技部',
+      }
+    ];
+    const total = 10
+    
+    response = {
+      type: 'cardList',
+      output: '根据您的需求，我们为您推荐以下几款热门产品，您可以点击查看详细信息或进行相关操作：',
+      showLoadMore: items.length < total, // 根据当前items长度与总数的比较来确定是否显示"查看更多"
+      currentPage: 1,
+      pageSize: 10,
+      total: total,
+      items: items,
+      loading: false // 初始化加载状态
+    }
+  } else {
+    response = `我理解您说的是："${userMessage}"。这是一个很好的问题，让我为您详细解答...\n\n（这是模拟回复，实际使用时需要接入真实的AI API）`
+  }
+
+  // 添加AI回复
+  addMessage('assistant', response, false)
+}
+
+// 格式化消息内容（支持换行）
+const formatMessage = (content) => {
+  if (!content) return ''
+  return content.replace(/\n/g, '<br>')
+}
+
+// 格式化时间
+const formatTime = (timestamp) => {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now - date
+
+  // 今天
+  if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
+    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+  }
+  // 昨天
+  if (diff < 48 * 60 * 60 * 1000) {
+    return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
+  }
+  // 更早
+  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+// 滚动到底部
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (chatContainerRef.value) {
+      chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight
+    }
+  })
+}
+
+// 监听消息变化，自动滚动
+watch(() => messages.value.length, () => {
+  scrollToBottom()
+})
+
+// 处理输入框聚焦事件
+const handleInputFocus = (e) => {
+  // scrollToBottom()
+  setTimeout(() => {
+    e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }, 300);
+}
+
+// 处理Enter键（发送）
+const handleEnter = () => {
+  if (!isLoading.value && inputText.value.trim()) {
+    sendMessage()
+  }
+}
+
+// 处理Shift+Enter（换行）
+const handleShiftEnter = () => {
+  // 允许换行，不做处理
+}
+
+// 处理表单提交
+const handleFormSubmit = (index, formData) => {
+  // 在实际应用中，这里应该将表单数据发送到服务器
+  console.log('表单提交数据:', formData)
+  
+  // 添加确认消息
+  addMessage('assistant', `感谢您提交的信息！我们已经收到以下数据：\n${JSON.stringify(formData, null, 2)}`)
+}
+
+// 处理卡片项点击，跳转至详情页
+const handleCardItemClick = (item) => {
+  console.log('卡片项被点击:', item)
+}
+
+// 处理卡片操作点击
+const handleCardActionClick = (index, { action, item, index: itemIndex }) => {
+  console.log('卡片操作被点击:', action, item, itemIndex)
+  addMessage('assistant', `您对"${item.title}"执行了"${action.text}"操作`)
+}
+
+// 处理推荐信息点击
+const handleSuggestionClick = (suggestion) => {
+  console.log('Suggestion clicked:', suggestion)
+  // 将推荐信息作为用户消息发送
+  inputText.value = suggestion
+  sendMessage()
+}
+
+// 处理加载更多卡片
+const handleLoadMore = (message) => {
+  console.log('加载更多卡片:', message)
+  // 设置加载状态
+  message.loading = true;
+  
+  // 在实际应用中，这里应该从服务器获取更多数据
+  // 示例实现：
+  // 1. 更新当前页码
+  // 2. 发起API请求获取下一页数据
+  // 3. 将新数据追加到现有items中
+  
+  // 模拟异步加载
+  setTimeout(() => {
+    // 模拟新增的数据
+    const newItems = [
+      {
+        title: '新产品C',
+        subtitle: '大数据分析平台',
+        statusName : '待审',
+        creator : '刘松煜',
+        createTime : '2023-10-02 09:30:00',
+        currentNode : '节点2',
+        dpName : '信息科技部',
+      },
+      {
+        title: '新产品D',
+        subtitle: '区块链解决方案',
+        statusName : '草稿',
+        creator : '刘松煜',
+        createTime : '2023-10-02 11:45:00',
+        currentNode : '节点1',
+        dpName : '固定收益投资部',
+      }
+    ];
+    
+    // 将新数据添加到消息的items中
+    message.items = [...message.items, ...newItems];
+    
+    // 如果有分页信息，也需要更新
+    if (message.currentPage !== undefined) {
+      message.currentPage += 1;
+    }
+    
+    // 更新showLoadMore状态，根据当前items长度与总数的比较
+    if (message.total !== undefined) {
+      message.showLoadMore = message.items.length < message.total;
+    }
+    
+    // 取消加载状态
+    message.loading = false;
+  }, 1000);
+}
+
+</script>
+
+<style lang="scss" scoped>
+.ai-chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #f5f5f5;
+  position: relative;
+}
+.nav-bar{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.chat-container {
+  // flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  padding-bottom: 80px;
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  top: 46px;
+  left: 0;
+  right: 0;
+  bottom: 63px;
+
+  .messages-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+.message-item {
+  display: flex;
+  gap: 12px;
+  animation: fadeIn 0.3s ease-in;
+
+  &.user-message {
+    flex-direction: row-reverse;
+
+    .message-content {
+      align-items: flex-end;
+    }
+
+    .message-bubble {
+      background: linear-gradient(135deg, #1989fa 0%, #0d7ce8 100%);
+      color: #fff;
+      border-radius: 18px 18px 4px 18px;
+    }
+
+    .message-avatar {
+      background: linear-gradient(135deg, #1989fa 0%, #0d7ce8 100%);
+      color: #fff;
+    }
+  }
+
+  &.ai-message {
+    .message-bubble {
+      background: #fff;
+      color: #333;
+      border-radius: 18px 18px 18px 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    .message-avatar {
+      background: #fff;
+      color: #1989fa;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+  }
+}
+
+.message-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+  // max-width: 75%;
+  gap: 6px;
+}
+
+.message-bubble {
+  padding: 12px 16px;
+  word-wrap: break-word;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.message-text {
+  font-size: 15px;
+  white-space: pre-wrap;
+}
+
+.message-output {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  // border-left: 3px solid #1989fa;
+}
+
+.message-time {
+  font-size: 11px;
+  color: #999;
+  padding: 0 4px;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0 4px;
+
+  span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #1989fa;
+    animation: bounce 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.input-area {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1px solid #ebedf0;
+  padding: 8px 12px;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom));
+  z-index: 100;
+
+  .input-wrapper {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+    max-width: 100%;
+  }
+
+  .chat-input {
+    flex: 1;
+    background: #f7f8fa;
+    border-radius: 20px;
+    padding: 8px 12px;
+    min-height: 40px;
+    max-height: 120px;
+
+    :deep(.van-field__control) {
+      font-size: 15px;
+      line-height: 1.5;
+    }
+  }
+
+  .send-btn {
+    flex-shrink: 0;
+    height: 40px;
+    padding: 0 20px;
+    border-radius: 20px;
+  }
+}
+
+
+/* 推荐信息样式 */
+.suggestions-container {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #e0e0e0;
+}
+
+.suggestions-title {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.suggestion-tag {
+  margin-right: 8px;
+  margin-bottom: 8px;
+  background-color: #f0f0f0;
+  border-color: #ddd;
+  color: #666;
+  cursor: pointer;
+}
+
+.suggestion-tag:hover {
+  background-color: #e0e0e0;
+}
+</style>

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/newChatCardList.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="chat-card-list">
+        <div 
+            v-for="item in items" 
+            :key="item.title" 
+            class="chat-card"
+            @click="handleClick(item)"
+        >
+            <div class="title" v-if="item.title">{{ item.title }}</div>
+            <div class="card-header">
+                <div class="left-content">
+                    <div class="subtitle" v-if="item.subtitle">{{ item.subtitle }}</div>
+                </div>
+                <div class="right-content">
+                    <van-tag :type="statusType(item.statusName)">{{ item.statusName }}</van-tag>
+                </div>
+            </div>
+            <div class="card-info" v-if="item.creator || item.createTime">
+                <span class="creator" v-if="item.creator">创建人：{{ item.creator }}</span>
+                <span class="time" v-if="item.dpName">部门：{{ item.dpName }}</span>
+            </div>
+            <div class="depart" v-if="item.createTime">
+                创建日期：{{ item.createTime }}
+            </div>
+            <div class="process-node" v-if="item.currentNode">
+                当前流程：{{ item.currentNode }}
+            </div>
+        </div>
+        <div class="load-more" v-if="showLoadMore && !loading" @click="loadMore">
+    查看更多
+</div>
+<div class="loading" v-if="loading">
+    加载中...
+</div>
+    </div>
+    
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue'
+const props = defineProps({
+  // 聊天卡片列表
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  // 是否显示"查看更多"按钮
+  showLoadMore: {
+    type: Boolean,
+    default: false
+  },
+  // 每页显示的卡片数量
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  // 当前页码
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  // 是否正在加载
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+console.log(props);
+
+const emit = defineEmits(['item-click', 'load-more'])
+
+const statusType = (statusName) => {
+    if (['待办','待审'].includes(statusName)) {
+        return 'primary'
+    } else if (['草稿'].includes(statusName)) {
+        return 'info'
+    } else if (['已完成'].includes(statusName)) {
+        return 'success'
+    } else if (['驳回'].includes(statusName)) {
+        return 'danger'
+    } else {
+        return 'default'
+    }
+}
+
+const handleClick = (item) => {
+    emit('item-click', item)
+}
+
+const loadMore = () => {
+    emit('load-more')
+}
+
+</script>
+
+<style lang='scss' scoped>
+
+.chat-card{
+    background: #f7f7f9;
+    border-radius: 12px;
+    overflow: hidden;
+    padding: 12px;
+    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    margin-bottom: 16px;
+    &:active {
+        transform: scale(0.98);
+    }
+    .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #2c3e50;
+        margin-bottom: 4px;
+        line-height: 1.4;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+    }
+    .card-header{
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        .left-content{
+                flex:1;
+                .subtitle {
+                    font-size: 13px;
+                    color: #7f8c8d;
+                    line-height: 1.4;
+                }
+        }
+        .right-content{
+            width: 50px;
+        }
+    }
+    
+    .card-info {
+        display: flex;
+        justify-content: space-between;
+        border-top: 1px solid #e1e8ed;
+        font-size: 12px;
+        color: #555;
+        margin-top: 8px;
+        padding: 4px 0;
+        
+        .creator, .time {
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        
+        .creator {
+            margin-right: 10px;
+        }
+    }
+    
+    .process-node {
+        font-size: 12px;
+        border-radius: 4px;
+        padding: 4px 0px;
+        max-width: calc(100% - 24px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .depart {
+        font-size: 12px;
+        border-radius: 4px;
+        padding: 4px 0px;
+        max-width: calc(100% - 24px);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+.load-more {
+    text-align: center;
+    padding: 12px 0;
+    color: #1989fa;
+    font-size: 14px;
+    border-radius: 8px;
+    margin: 16px 0;
+    cursor: pointer;
+    user-select: none;
+    
+    &:active {
+        opacity: 0.8;
+    }
+}
+
+.loading {
+    text-align: center;
+    padding: 12px 0;
+    color: #999;
+    font-size: 14px;
+    margin: 16px 0;
+}
+</style>

package//346/226/207/346/241/243/ai/346/250/241/345/235/227.md

@@ -0,0 +1,33 @@
+### 前端模块
+1、表单模块  
+前端封装一个json表单，根据json内容生产对应表单项  
+例如：
+```js
+[
+    {
+        type: 'input',
+        field: 'title',
+        value: ''
+        label: '公文标题',
+        placeholder: '请输入标题',
+        rules: [
+            { required: true, message: '请输入标题' }
+        ]
+    },
+    {
+        type: 'select',
+        field: 'category',
+        value: 'notice'
+        label: '公文类型',
+        placeholder: '请选择类型',
+        options: [
+            { label: '通知', value: 'notice' },
+            { label: '通报', value: 'circular' },
+            { label: '请示', value: 'request' }
+        ],
+        rules: [{ required: true, message: '请选择类型' }]
+    },
+]
+```
+
+2、卡片模块