feat: 添加AIPPT切换模型选项

src/components/OutlineEditor.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="outline-editor">
+    <div class="item" :class="[{ 'title': item.title }, `lv-${item.lv}`]" :style="{ marginLeft: 20 * item.lv + 'px' }" v-for="item in data" :key="item.id">
+      <Input ref="editableRef" class="editable-text" :value="item.content" v-if="activeItemId === item.id" @blur="activeItemId = ''" />
+      <div class="text" @click="handleFocus(item.id)" v-else>{{ item.content }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, onMounted } from 'vue'
+import { nanoid } from 'nanoid'
+import Input from './Input.vue'
+
+interface OutlineItem {
+  id: string
+  content: string
+  lv: number
+  title?: boolean
+  item?: boolean
+}
+
+const props = defineProps<{
+  value: string
+}>()
+
+const data = ref<OutlineItem[]>([])
+const activeItemId = ref('')
+const editableRef = ref<InstanceType<typeof Input>[]>()
+
+onMounted(() => {
+  const lines = props.value.split('\n')
+  const result: OutlineItem[] = []
+
+  for (const line of lines) {
+    if (!line.trim()) continue
+
+    const headerMatch = line.match(/^(#+)\s*(.*)/)
+    const listMatch = line.match(/^-\s*(.*)/)
+
+    if (headerMatch) {
+      const lv = headerMatch[1].length
+      const content = headerMatch[2]
+      result.push({
+        id: nanoid(),
+        content,
+        title: true,
+        lv,
+      })
+    }
+    else if (listMatch) {
+      const content = listMatch[1]
+      result.push({
+        id: nanoid(),
+        content,
+        item: true,
+        lv: 4,
+      })
+    }
+    else {
+      result.push({
+        id: nanoid(),
+        content: line.trim(),
+        lv: 4
+      })
+    }
+  }
+  data.value = result
+})
+
+const handleFocus = (id: string) => {
+  activeItemId.value = id
+
+  nextTick(() => {
+    editableRef.value && editableRef.value[0].focus()
+  })
+}
+</script>
+
+<style lang="scss">
+.outline-editor {
+  height: 600px;
+  overflow: auto;
+
+  .item {
+    height: 32px;
+  
+    & + .item {
+      margin-top: 2px;
+    }
+
+    &.title {
+      font-weight: 700;
+    }
+    &.lv-1 {
+      font-size: 20px;
+    }
+    &.lv-2 {
+      font-size: 17px;
+    }
+    &.lv-3 {
+      font-size: 15px;
+    }
+    &.lv-4 {
+      font-size: 13px;
+    }
+  }
+  .text {
+    height: 100%;
+    color: #41464b;
+    padding: 0 10px;
+    line-height: 32px;
+  }
+}
+</style>

src/services/index.ts

@@ -15,7 +15,7 @@ export default {
   AIPPT_Outline(
     content: string,
     language: string,
-    model = 'doubao-1.5-pro-32k'
+    model: string,
   ): Promise<any> {
     return fetch(`${SERVER_URL}/tools/aippt_outline`, {
       method: 'POST',
@@ -34,7 +34,7 @@ export default {
   AIPPT(
     content: string,
     language: string,
-    model = 'doubao-1.5-pro-32k'
+    model: string,
   ) {
     return axios.post(`${SERVER_URL}/tools/aippt`, {
       content,

src/views/Editor/AIPPTDialog.vue

@@ -24,6 +24,17 @@
       <div class="recommends">
         <div class="recommend" v-for="(item, index) in recommends" :key="index" @click="keyword = item">{{ item }}</div>
       </div>
+      <div class="model-selector">
+        <div class="label">选择AI模型：</div>
+        <Select 
+          style="width: 160px;"
+          v-model:value="model"
+          :options="[
+            { label: 'DeepSeek-v3', value: 'ark-deepseek-v3' },
+            { label: 'Doubao-1.5-Pro', value: 'doubao-1.5-pro-32k' },
+          ]"
+        />
+      </div>
     </template>
     <div class="preview" v-if="step === 'outline'">
       <pre ref="outlineRef">{{ outline }}</pre>
@@ -64,6 +75,7 @@ import message from '@/utils/message'
 import { useMainStore, useSlidesStore } from '@/store'
 import Input from '@/components/Input.vue'
 import Button from '@/components/Button.vue'
+import Select from '@/components/Select.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 
 const mainStore = useMainStore()
@@ -79,6 +91,7 @@ const outlineCreating = ref(false)
 const outlineRef = ref<HTMLElement>()
 const inputRef = ref<InstanceType<typeof Input>>()
 const step = ref<'setup' | 'outline' | 'template'>('setup')
+const model = ref('ark-deepseek-v3')
 
 const recommends = ref([
   '大学生职业生涯规划',
@@ -104,7 +117,7 @@ const createOutline = async () => {
   loading.value = true
   outlineCreating.value = true
   
-  const stream = await api.AIPPT_Outline(keyword.value, language.value)
+  const stream = await api.AIPPT_Outline(keyword.value, language.value, model.value)
 
   loading.value = false
   step.value = 'outline'
@@ -136,7 +149,7 @@ const createPPT = async () => {
   loading.value = true
 
   // const AISlides: AIPPTSlide[] = await api.getMockData('AIPPT')
-  const AISlides: AIPPTSlide[] = await api.AIPPT(outline.value, language.value).then(ret => {
+  const AISlides: AIPPTSlide[] = await api.AIPPT(outline.value, language.value, 'doubao-1.5-pro-32k').then(ret => {
     const obj = JSON.parse(getJSONContent(ret.data[0].content))
     return obj.data
   })
@@ -256,6 +269,12 @@ const createPPT = async () => {
     }
   }
 }
+.model-selector {
+  margin-top: 10px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+}
 .count {
   font-size: 12px;
   color: #999;