diff --git a/.image/common/ai-feature.png b/.image/common/ai-feature.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4a55f547c85650d1b34e0bf0852a40634ecc99f
Binary files /dev/null and b/.image/common/ai-feature.png differ
diff --git a/.image/common/ai-preview.gif b/.image/common/ai-preview.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5f13ac4ff9281a683d216f47c257f19e4e968f3f
Binary files /dev/null and b/.image/common/ai-preview.gif differ
diff --git a/README.md b/README.md
index f69861f0e7c0b4297e411c3f95f49b65b0c4ef07..ce6f2b4585e64294c74ac3e6bff3d5c501fbe1da 100644
--- a/README.md
+++ b/README.md
@@ -191,26 +191,24 @@ ps：核心功能已经实现，正在对接微信小程序中...
 
 ### 商城系统
 
+演示地址：<https://doc.iocoder.cn/mall-preview/>
+
 ![功能图](/.image/common/mall-feature.png)
 
 ![功能图](/.image/common/mall-preview.png)
 
-_前端基于 crmeb uniapp 经过授权重构，优化代码实现，接入芋道快速开发平台_
-
-演示地址：<https://doc.iocoder.cn/mall-preview/>
-
 ### ERP 系统
 
-![功能图](/.image/common/erp-feature.png)
-
 演示地址：<https://doc.iocoder.cn/erp-preview/>
 
-### CRM 系统
+![功能图](/.image/common/erp-feature.png)
 
-![功能图](/.image/common/crm-feature.png)
+### CRM 系统
 
 演示地址：<https://doc.iocoder.cn/crm-preview/>
 
+![功能图](/.image/common/crm-feature.png)
+
 ## 🐷 演示图
 
 ### 系统功能
diff --git a/src/api/ai/image/index.ts b/src/api/ai/image/index.ts
index 43ddc7ecfd221343fd164a8ed60f9654e3c83175..5f8f13ca504bcdb884a8ca80c5c64a0bbc6dd5c3 100644
--- a/src/api/ai/image/index.ts
+++ b/src/api/ai/image/index.ts
@@ -56,6 +56,10 @@ export const ImageApi = {
   getImagePageMy: async (params: PageParam) => {
     return await request.get({ url: `/ai/image/my-page`, params })
   },
+  // 获取公开的绘图记录
+  getImagePagePublic: async (params: PageParam) => {
+    return await request.get({ url: `/ai/image/public-page`, params })
+  },
   // 获取【我的】绘图记录
   getImageMy: async (id: number) => {
     return await request.get({ url: `/ai/image/get-my?id=${id}` })
diff --git a/src/api/ai/writer/index.ts b/src/api/ai/write/index.ts
similarity index 34%
rename from src/api/ai/writer/index.ts
rename to src/api/ai/write/index.ts
index 7494b2595135238cfa4a7c095db1980653235999..013f998fd3f9c2a8c87c05b25c8f632af635ab86 100644
--- a/src/api/ai/writer/index.ts
+++ b/src/api/ai/write/index.ts
@@ -1,9 +1,9 @@
 import { fetchEventSource } from '@microsoft/fetch-event-source'
-import request from '@/config/axios'
 
 import { getAccessToken } from '@/utils/auth'
 import { config } from '@/config/axios/config'
 import { AiWriteTypeEnum } from '@/views/ai/utils/constants'
+import request from '@/config/axios'
 
 export interface WriteVO {
   type: AiWriteTypeEnum.WRITING | AiWriteTypeEnum.REPLY // 1:撰写 2:回复
@@ -17,49 +17,69 @@ export interface WriteVO {
   platform?: string // 平台
   model?: string // 模型
   generatedContent?: string // 生成的内容
-  errorMessage: string // 错误信息
+  errorMessage?: string // 错误信息
   createTime?: Date // 创建时间
 }
 
-// TODO @hhero：搞成 WriteApi，类似 ConversationApi 一样。这样更有类的概念，后续引入某个 Api，然后调用它的方法就可以了。
-export const writeStream = ({
-  data,
-  onClose,
-  onMessage,
-  onError,
-  ctrl
-}: {
-  data: WriteVO
-  onMessage?: (res: any) => void
-  onError?: (...args: any[]) => void
-  onClose?: (...args: any[]) => void
-  ctrl: AbortController
-}) => {
-  const token = getAccessToken()
-  return fetchEventSource(`${config.base_url}/ai/write/generate-stream`, {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`
-    },
-    openWhenHidden: true,
-    body: JSON.stringify(data),
-    onmessage: onMessage,
-    onerror: onError,
-    onclose: onClose,
-    signal: ctrl.signal
-  })
+export interface AiWritePageReqVO extends PageParam {
+  userId?: number // 用户编号
+  type?: AiWriteTypeEnum //  写作类型
+  platform?: string // 平台
+  createTime?: [string, string] // 创建时间
+}
+
+export interface AiWriteRespVo {
+  id: number
+  userId: number
+  type: number
+  platform: string
+  model: string
+  prompt: string
+  generatedContent: string
+  originalContent: string
+  length: number
+  format: number
+  tone: number
+  language: number
+  errorMessage: string
+  createTime: string
 }
 
-// AI 写作 API
 export const WriteApi = {
-  // 查询AI 写作分页
-  getWritePage: async (params: any) => {
-    return await request.get({ url: `/ai/write/page`, params })
+  writeStream: ({
+    data,
+    onClose,
+    onMessage,
+    onError,
+    ctrl
+  }: {
+    data: WriteVO
+    onMessage?: (res: any) => void
+    onError?: (...args: any[]) => void
+    onClose?: (...args: any[]) => void
+    ctrl: AbortController
+  }) => {
+    const token = getAccessToken()
+    return fetchEventSource(`${config.base_url}/ai/write/generate-stream`, {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      },
+      openWhenHidden: true,
+      body: JSON.stringify(data),
+      onmessage: onMessage,
+      onerror: onError,
+      onclose: onClose,
+      signal: ctrl.signal
+    })
   },
-
-  // 删除AI 写作
-  deleteWrite: async (id: number) => {
-    return await request.delete({ url: `/ai/write/delete?id=` + id })
+  // 获取写作列表
+  getWritePage: (params: AiWritePageReqVO) => {
+    return request.get<PageResult<AiWriteRespVo[]>>({ url: `/ai/write/page`, params })
+  },
+  // 删除写作
+  deleteWrite(id: number) {
+    return request.delete({ url: `/ai/write/delete`, params: { id } })
   }
 }
diff --git a/src/views/ai/image/index/components/other/index.vue b/src/views/ai/image/index/components/other/index.vue
index 375c15b6df7c8873b04fc1b89fdb4490950b30aa..a688be1862a7c17f620f73cbac3a27eb0ea9a89e 100644
--- a/src/views/ai/image/index/components/other/index.vue
+++ b/src/views/ai/image/index/components/other/index.vue
@@ -36,7 +36,13 @@
       <el-text tag="b">平台</el-text>
     </div>
     <el-space wrap class="group-item-body">
-      <el-select v-model="otherPlatform" placeholder="Select" size="large" class="!w-350px" @change="handlerPlatformChange">
+      <el-select
+        v-model="otherPlatform"
+        placeholder="Select"
+        size="large"
+        class="!w-350px"
+        @change="handlerPlatformChange"
+      >
         <el-option
           v-for="item in OtherPlatformEnum"
           :key="item.key"
@@ -52,12 +58,7 @@
     </div>
     <el-space wrap class="group-item-body">
       <el-select v-model="model" placeholder="Select" size="large" class="!w-350px">
-        <el-option
-          v-for="item in models"
-          :key="item.key"
-          :label="item.name"
-          :value="item.key"
-        />
+        <el-option v-for="item in models" :key="item.key" :label="item.name" :value="item.key" />
       </el-select>
     </el-space>
   </div>
@@ -77,12 +78,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ImageApi, ImageDrawReqVO, ImageVO} from '@/api/ai/image'
+import { ImageApi, ImageDrawReqVO, ImageVO } from '@/api/ai/image'
 import {
   AiPlatformEnum,
+  ChatGlmModels,
   ImageHotWords,
   ImageModelVO,
   OtherPlatformEnum,
+  QianFanModels,
   TongYiWanXiangModels
 } from '@/views/ai/utils/constants'
 
@@ -96,10 +99,9 @@ const prompt = ref<string>('') // 提示词
 const width = ref<number>(512) // 图片宽度
 const height = ref<number>(512) // 图片高度
 const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI) // 平台
-const models = ref<ImageModelVO[]>(TongYiWanXiangModels) // 模型
+const models = ref<ImageModelVO[]>(TongYiWanXiangModels) // 模型  TongYiWanXiangModels、QianFanModels
 const model = ref<string>(models.value[0].key) // 模型
 
-
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
 
 /** 选择热词 */
@@ -131,9 +133,8 @@ const handleGenerateImage = async () => {
       prompt: prompt.value, // 提示词
       width: width.value, // 图片宽度
       height: height.value, // 图片高度
-      options: {
-      }
-    } as ImageDrawReqVO
+      options: {}
+    } as unknown as ImageDrawReqVO
     await ImageApi.drawImage(form)
   } finally {
     // 回调
@@ -148,21 +149,24 @@ const settingValues = async (detail: ImageVO) => {
   prompt.value = detail.prompt
   width.value = detail.width
   height.value = detail.height
-
 }
 
 /** 平台切换 */
-const handlerPlatformChange = async (platform) => {
+const handlerPlatformChange = async (platform: string) => {
   // 切换平台，切换模型、风格
-  if (AiPlatformEnum.YI_YAN === platform) {
+  if (AiPlatformEnum.TONG_YI === platform) {
     models.value = TongYiWanXiangModels
+  } else if (AiPlatformEnum.YI_YAN === platform) {
+    models.value = QianFanModels
+  } else if (AiPlatformEnum.ZHI_PU === platform) {
+    models.value = ChatGlmModels
   } else {
     models.value = []
   }
   // 切换平台，默认选择一个风格
   if (models.value.length > 0) {
     model.value = models.value[0].key
-  } else  {
+  } else {
     model.value = ''
   }
 }
diff --git a/src/views/ai/image/index/index.vue b/src/views/ai/image/index/index.vue
index c249f8f1b10f5f4eb425591c5280055d500d8df4..1217e793822eb843929c62f9047019cd3d521bb2 100644
--- a/src/views/ai/image/index/index.vue
+++ b/src/views/ai/image/index/index.vue
@@ -62,7 +62,7 @@ const platformOptions = [
     value: AiPlatformEnum.STABLE_DIFFUSION
   },
   {
-    label: '其他',
+    label: '其它',
     value: 'other'
   }
 ]
@@ -88,6 +88,7 @@ const handleRegeneration = async (image: ImageVO) => {
   } else if (image.platform === AiPlatformEnum.STABLE_DIFFUSION) {
     stableDiffusionRef.value.settingValues(image)
   }
+  // TODO @fan：貌似 other 重新设置不行？
 }
 </script>
 
diff --git a/src/views/ai/image/square/index.vue b/src/views/ai/image/square/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..81643d19995811e9cccdb16f0969e8247a2456c0
--- /dev/null
+++ b/src/views/ai/image/square/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="card-list">
+    <div v-for="item in publicList" :key="item.id" class="card">
+      <img :src="item.picUrl" class="img" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ImageApi, ImageVO } from '@/api/ai/image'
+
+/** 属性 */
+// TODO @fan：queryParams 里面搞分页哈。
+const pageNo = ref<number>(1)
+const pageSize = ref<number>(20)
+const publicList = ref<ImageVO[]>([])
+
+/** 获取数据 */
+const getListData = async () => {
+  const res = await ImageApi.getImagePagePublic({ pageNo: pageNo.value, pageSize: pageSize.value })
+  publicList.value = res.list as ImageVO[]
+  console.log('publicList.value', publicList.value)
+}
+
+onMounted(async () => {
+  await getListData()
+})
+</script>
+<style scoped lang="scss">
+.card-list {
+  //display: flex;
+  //flex-direction: column;
+  column-count: 4;
+  column-gap: 3px;
+}
+
+.card {
+  .img {
+    width: 50%;
+  }
+}
+</style>
diff --git a/src/views/ai/music/components/index.vue b/src/views/ai/music/components/index.vue
index 21272522fdb7e65fdc1d5eadf819244cf3306a27..e1395b560e854bb8a0e672f612fa98c26e947236 100644
--- a/src/views/ai/music/components/index.vue
+++ b/src/views/ai/music/components/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-1/1">
+  <div class="flex ">
     <!-- 模式 -->
     <Mode class="flex-none" @generate-music="generateMusic"/>
     <!-- 音频列表 -->
@@ -13,7 +13,7 @@ import List from './list/index.vue'
 
 defineOptions({ name: 'Index' })
 
-const listRef = ref<{generateMusic: (...args) => void} | null>(null)
+const listRef = ref<Nullable<{generateMusic: (...args) => void}>>(null)
 
 function generateMusic (args: {formData: Recordable}) {
  unref(listRef)?.generateMusic(args.formData)
diff --git a/src/views/ai/music/components/list/audioBar/index.vue b/src/views/ai/music/components/list/audioBar/index.vue
index 2b25e40f97b49d38122295ef4e1ec2ddc69fcb20..412d7fef708b558cb79ffcf375f7fc312ec49616 100644
--- a/src/views/ai/music/components/list/audioBar/index.vue
+++ b/src/views/ai/music/components/list/audioBar/index.vue
@@ -1,9 +1,68 @@
 <template>
-  <div class="h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">播放器</div>
+  <div class="flex items-center justify-between px-2 h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">
+    <!-- 歌曲信息 -->
+    <div class="flex gap-[10px]">
+      <el-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="w-[45px]"/>
+      <div>
+        <div>我很好</div>
+        <div class="text-[12px] text-gray-400">刘大壮</div>
+      </div>
+    </div>
+      
+    <!-- 音频controls -->
+    <div class="flex gap-[12px] items-center">
+      <Icon icon="majesticons:back-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <Icon :icon="audioProps.paused ? 'mdi:arrow-right-drop-circle' : 'solar:pause-circle-bold'" :size="30" class=" cursor-pointer" @click="toggleStatus('paused')"/>
+      <Icon icon="majesticons:next-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <div class="flex gap-[16px] items-center">
+        <span>{{audioProps.currentTime}}</span>
+        <el-slider v-model="audioProps.duration" color="#409eff" class="w-[160px!important] "/>
+        <span>{{ audioProps.duration }}</span>
+      </div>
+      <!-- 音频 -->
+      <audio v-bind="audioProps" ref="audioRef" controls v-show="!audioProps" @timeupdate="audioTimeUpdate">
+        <source :src="response"/>
+      </audio>
+    </div>
+
+    <!-- 音量控制器 -->
+    <div class="flex gap-[16px] items-center">
+      <Icon :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'" :size="20" class="cursor-pointer" @click="toggleStatus('muted')"/>
+      <el-slider v-model="audioProps.volume" color="#409eff" class="w-[160px!important] "/>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { formatPast } from '@/utils/formatTime'
+import response from '@/assets/audio/response.mp3'
 
 defineOptions({ name: 'Index' })
 
+  const audioRef = ref<Nullable<HTMLElement>>(null)
+    // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
+  const audioProps = reactive({
+    autoplay: true,
+    paused: false,
+    currentTime: '00:00',
+    duration: '00:00',
+    muted:  false,
+    volume: 50,
+  })
+
+  function toggleStatus (type: string) {
+    audioProps[type] = !audioProps[type]
+    if (type === 'paused' && audioRef.value) {
+      if (audioProps[type]) {
+        audioRef.value.pause()
+      } else {
+        audioRef.value.play()
+      }
+    }
+  }
+
+  // 更新播放位置
+  function audioTimeUpdate (args) {
+    audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss')
+  }
 </script>
diff --git a/src/views/ai/music/components/list/index.vue b/src/views/ai/music/components/list/index.vue
index 6dce9b8c831aa724832294473c835a173ce3a1c8..1b8a46e575af89fc3a1b3b27fa6d9c540144f34e 100644
--- a/src/views/ai/music/components/list/index.vue
+++ b/src/views/ai/music/components/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-[600px]">
     <div class="flex-auto flex overflow-hidden">
       <el-tabs v-model="currentType" class="flex-auto px-[var(--app-content-padding)]">
         <!-- 我的创作 -->
diff --git a/src/views/ai/music/components/mode/index.vue b/src/views/ai/music/components/mode/index.vue
index bb6cf11609016a95da026e2759ec89247c32c367..61cf238ed2a35c1fc3f00fd1f555b8941c8d936d 100644
--- a/src/views/ai/music/components/mode/index.vue
+++ b/src/views/ai/music/components/mode/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContentWrap class="w-300px h-full">
+  <ContentWrap class="w-300px h-full mb-[0!important]">
     <el-radio-group v-model="generateMode" class="mb-15px">
       <el-radio-button label="desc">
         描述模式
@@ -28,10 +28,7 @@ const emits = defineEmits(['generate-music'])
 
 const generateMode = ref('lyric')
 
-interface ModeRef {
-  formData: Recordable
-}
-const modeRef = ref<ModeRef | null>(null)
+const modeRef = ref<Nullable<{ formData: Recordable }>>(null)
 
 /*
  *@Description: 根据信息生成音乐
diff --git a/src/views/ai/utils/constants.ts b/src/views/ai/utils/constants.ts
index 0a88775b559ae89830c8c87c0cde0b8e8800817c..4fee2dc60c24752d616a9de0a616166aaf1587be 100644
--- a/src/views/ai/utils/constants.ts
+++ b/src/views/ai/utils/constants.ts
@@ -20,17 +20,21 @@ export const AiPlatformEnum = {
   Ollama: 'Ollama',
   STABLE_DIFFUSION: 'StableDiffusion', // Stability AI
   MIDJOURNEY: 'Midjourney', // Midjourney
-  SUNO: 'Suno', // Suno AI
+  SUNO: 'Suno' // Suno AI
 }
 
-export const OtherPlatformEnum:ImageModelVO [] = [
+export const OtherPlatformEnum: ImageModelVO[] = [
   {
     key: AiPlatformEnum.TONG_YI,
     name: '通义万相'
   },
   {
     key: AiPlatformEnum.YI_YAN,
-    name: '百度图片'
+    name: '百度千帆'
+  },
+  {
+    key: AiPlatformEnum.ZHI_PU,
+    name: '智谱 AI'
   }
 ]
 
@@ -60,6 +64,12 @@ export enum AiWriteTypeEnum {
   REPLY // 回复
 }
 
+// 表格展示对照map
+export const AiWriteTypeTableRender = {
+  [AiWriteTypeEnum.WRITING]: '撰写',
+  [AiWriteTypeEnum.REPLY]: '回复',
+}
+
 // ========== 【图片 UI】相关的枚举 ==========
 export const ImageHotWords = [
   '中国旗袍',
@@ -200,54 +210,6 @@ export const StableDiffusionStylePresets: ImageModelVO[] = [
   }
 ]
 
-// todo @芋艿 这些是通义的风格，看要不要删除
-export const TongYiWanXiangStylePresets: ImageModelVO[] = [
-  {
-    key: '-1',
-    name: '上传图像风格'
-  },
-  {
-    key: '0',
-    name: '复古漫画'
-  },
-  {
-    key: '1',
-    name: '3D童话'
-  },
-  {
-    key: '2',
-    name: '二次元'
-  },
-  {
-    key: '3',
-    name: '小清新'
-  },
-  {
-    key: '4',
-    name: '未来科技'
-  },
-  {
-    key: '5',
-    name: '国画古风'
-  },
-  {
-    key: '6',
-    name: '将军百战'
-  },
-  {
-    key: '7',
-    name: '炫彩卡通'
-  },
-  {
-    key: '8',
-    name: '清雅国风'
-  },
-  {
-    key: '9',
-    name: '喜迎新年'
-  }
-]
-
 export const TongYiWanXiangModels: ImageModelVO[] = [
   {
     key: 'wanx-v1',
@@ -259,6 +221,20 @@ export const TongYiWanXiangModels: ImageModelVO[] = [
   }
 ]
 
+export const QianFanModels: ImageModelVO[] = [
+  {
+    key: 'sd_xl',
+    name: 'sd_xl'
+  }
+]
+
+export const ChatGlmModels: ImageModelVO[] = [
+  {
+    key: 'cogview-3',
+    name: 'cogview-3'
+  }
+]
+
 export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
   {
     key: 'NONE',
@@ -318,7 +294,7 @@ export const Dall3StyleList: ImageModelVO[] = [
 
 export interface ImageSizeVO {
   key: string
-  name: string
+  name?: string
   style: string
   width: string
   height: string
diff --git a/src/views/ai/writer/index/components/Left.vue b/src/views/ai/write/index/components/Left.vue
similarity index 81%
rename from src/views/ai/writer/index/components/Left.vue
rename to src/views/ai/write/index/components/Left.vue
index 7e7744c7e1163dab58675b23f82f11f448f0c054..05cc04a5de12f9e8d41c73051ecf812625ae218f 100644
--- a/src/views/ai/writer/index/components/Left.vue
+++ b/src/views/ai/write/index/components/Left.vue
@@ -24,26 +24,28 @@
     </h3>
   </DefineLabel>
 
-  <div class="relative" v-bind="$attrs">
+  <div class="flex flex-col" v-bind="$attrs">
     <!-- tab -->
-    <div
-      class="absolute left-1/2 top-2 -translate-x-1/2 w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10"
-    >
-      <div
-        class="flex items-center relative after:content-[''] after:block after:bg-white after:h-[30px] after:w-1/2 after:absolute after:top-0 after:left-0 after:transition-transform after:rounded-full"
-        :class="selectedTab === AiWriteTypeEnum.REPLY && 'after:transform after:translate-x-[100%]'"
-      >
-        <ReuseTab
-          v-for="tab in tabs"
-          :key="tab.value"
-          :text="tab.text"
-          :active="tab.value === selectedTab"
-          :itemClick="() => switchTab(tab.value)"
-        />
+    <div class="w-full pt-2 bg-[#f5f7f9] flex justify-center">
+      <div class="w-[303px] rounded-full bg-[#DDDFE3] p-1 z-10">
+        <div
+          class="flex items-center relative after:content-[''] after:block after:bg-white after:h-[30px] after:w-1/2 after:absolute after:top-0 after:left-0 after:transition-transform after:rounded-full"
+          :class="
+            selectedTab === AiWriteTypeEnum.REPLY && 'after:transform after:translate-x-[100%]'
+          "
+        >
+          <ReuseTab
+            v-for="tab in tabs"
+            :key="tab.value"
+            :text="tab.text"
+            :active="tab.value === selectedTab"
+            :itemClick="() => switchTab(tab.value)"
+          />
+        </div>
       </div>
     </div>
     <div
-      class="px-7 pb-2 pt-[46px] overflow-y-auto lg:block w-[380px] box-border bg-[#ECEDEF] h-full"
+      class="px-7 pb-2 flex-grow overflow-y-auto lg:block w-[380px] box-border bg-[#f5f7f9] h-full"
     >
       <div>
         <template v-if="selectedTab === 1">
@@ -102,7 +104,7 @@
 import { createReusableTemplate } from '@vueuse/core'
 import { ref } from 'vue'
 import Tag from './Tag.vue'
-import { WriteVO } from '@/api/ai/writer'
+import { WriteVO } from 'src/api/ai/write'
 import { omit } from 'lodash-es'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { AiWriteTypeEnum, WriteExample } from '@/views/ai/utils/constants'
@@ -177,10 +179,18 @@ const initData: WriteVO = {
 }
 const formData = ref<WriteVO>({ ...initData })
 
+/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 **/
+const recordFormData = {} as Record<AiWriteTypeEnum, WriteVO>
+
 /** 切换tab **/
 const switchTab = (value: TabType) => {
-  selectedTab.value = value
-  formData.value = { ...initData }
+  if (value !== selectedTab.value) {
+    // 保存之前的久数据
+    recordFormData[selectedTab.value] = formData.value
+    selectedTab.value = value
+    // 将之前的旧数据赋值回来
+    formData.value = { ...initData, ...recordFormData[value] }
+  }
 }
 
 /** 提交写作 */
diff --git a/src/views/ai/writer/index/components/Right.vue b/src/views/ai/write/index/components/Right.vue
similarity index 74%
rename from src/views/ai/writer/index/components/Right.vue
rename to src/views/ai/write/index/components/Right.vue
index 00380a7e180cc8958add2bfcb229980b1eb7d499..d0aada5df8adc8ece017cf0362bd757ca788ea10 100644
--- a/src/views/ai/writer/index/components/Right.vue
+++ b/src/views/ai/write/index/components/Right.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="h-full box-border flex flex-col px-7">
-    <h3 class="m-0 h-14 -mx-7 px-7 shrink-0 flex items-center justify-between bg-[#ecedef]">
-      <span>预览</span>
-      <!-- 展示在右上角 -->
-      <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
-        <template #icon>
-          <Icon icon="ph:copy-bold" />
-        </template>
-        复制
-      </el-button>
-    </h3>
+  <el-card class="my-card h-full">
+    <template #header>
+      <h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
+        <span>预览</span>
+        <!-- 展示在右上角 -->
+        <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
+          <template #icon>
+            <Icon icon="ph:copy-bold" />
+          </template>
+          复制
+        </el-button>
+      </h3>
+    </template>
 
-    <div ref="contentRef" class="hide-scroll-bar flex-grow box-border overflow-y-auto">
+    <div ref="contentRef" class="hide-scroll-bar h-full box-border overflow-y-auto">
       <div class="w-full min-h-full relative flex-grow bg-white box-border p-3 sm:p-7">
         <!-- 终止生成内容的按钮 -->
         <el-button
@@ -36,7 +38,7 @@
         />
       </div>
     </div>
-  </div>
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -102,4 +104,17 @@ watch(copied, (val) => {
     height: 0;
   }
 }
+
+.my-card {
+  display: flex;
+  flex-direction: column;
+
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0;
+    @extend .hide-scroll-bar;
+  }
+}
 </style>
diff --git a/src/views/ai/writer/index/components/Tag.vue b/src/views/ai/write/index/components/Tag.vue
similarity index 97%
rename from src/views/ai/writer/index/components/Tag.vue
rename to src/views/ai/write/index/components/Tag.vue
index d496b5170800f18348d1c1cf4801ad7720378fd1..3d616bedd81060727426f969cde2d343bffb53d0 100644
--- a/src/views/ai/writer/index/components/Tag.vue
+++ b/src/views/ai/write/index/components/Tag.vue
@@ -1,3 +1,4 @@
+<!-- 标签选项 -->
 <template>
   <div class="flex flex-wrap gap-[8px]">
     <span
diff --git a/src/views/ai/writer/index/index.vue b/src/views/ai/write/index/index.vue
similarity index 78%
rename from src/views/ai/writer/index/index.vue
rename to src/views/ai/write/index/index.vue
index 9510e0598c026efc1ef41cbf9047e42a87ca650a..0dfda7429b71c86d8cf2d159ab7fee27240e1368 100644
--- a/src/views/ai/writer/index/index.vue
+++ b/src/views/ai/write/index/index.vue
@@ -1,6 +1,5 @@
 <template>
-  <!-- TODO @hhhero：整体没啥问题了。感觉整体框框的样子可以优化下，可以参考下绘图界面。例如说：1）写作的“预览”和绘图的“绘图任务”的 header；2）左右的边界，有个竖线之类的。 -->
-  <div class="h-[calc(100vh-var(--top-tool-height)-var(--app-footer-height)-40px)] -m-5 flex">
+  <div class="absolute top-0 left-0 right-0 bottom-0 flex">
     <Left
       :is-writing="isWriting"
       class="h-full"
@@ -21,7 +20,7 @@
 <script setup lang="ts">
 import Left from './components/Left.vue'
 import Right from './components/Right.vue'
-import * as WriteApi from '@/api/ai/writer'
+import { WriteApi, WriteVO } from '@/api/ai/write'
 import { WriteExample } from '@/views/ai/utils/constants'
 
 const message = useMessage()
@@ -38,7 +37,7 @@ const stopStream = () => {
 
 /** 执行写作 */
 const rightRef = ref<InstanceType<typeof Right>>()
-const submit = (data) => {
+const submit = (data: WriteVO) => {
   abortController.value = new AbortController()
   writeResult.value = ''
   isWriting.value = true
@@ -66,7 +65,7 @@ const submit = (data) => {
 }
 
 /** 点击示例触发 */
-const handleExampleClick = (type: keyof typeof WriteExampleDataJson) => {
+const handleExampleClick = (type: keyof typeof WriteExample) => {
   writeResult.value = WriteExample[type].data
 }
 
diff --git a/src/views/ai/write/manager/index.vue b/src/views/ai/write/manager/index.vue
index f31c375aa3cefae3f3b86132acd0338bd9a041a8..ddd1400a04896281b93a364fd8d0cd236e1daf21 100644
--- a/src/views/ai/write/manager/index.vue
+++ b/src/views/ai/write/manager/index.vue
@@ -39,7 +39,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="平台" prop="platform">
-        <el-select v-model="queryParams.status" placeholder="请选择平台" clearable class="!w-240px">
+        <el-select v-model="queryParams.platform" placeholder="请选择平台" clearable class="!w-240px">
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
             :key="dict.value"
@@ -70,6 +70,7 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
+        <!-- TODO @YunaiV  目前没有导出接口，需要导出吗 -->
         <el-button
           type="success"
           plain
@@ -103,7 +104,13 @@
         </template>
       </el-table-column>
       <el-table-column label="模型" align="center" prop="model" width="180" />
-      <el-table-column label="生成内容提示" align="center" prop="prompt" width="180" />
+      <el-table-column
+        label="生成内容提示"
+        align="center"
+        prop="prompt"
+        width="180"
+        show-overflow-tooltip
+      />
       <el-table-column label="生成的内容" align="center" prop="generatedContent" width="180" />
       <el-table-column label="原文" align="center" prop="originalContent" width="180" />
       <el-table-column label="长度" align="center" prop="length">
@@ -136,6 +143,7 @@
       <el-table-column label="错误信息" align="center" prop="errorMessage" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
+<!--          TODO @YunaiV 目前没有修改接口，写作要可以更改吗-->
           <el-button
             link
             type="primary"
@@ -168,8 +176,8 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-// TODO 芋艿：这里应该是 write
-import { WriteApi, WriteVO } from '@/api/ai/writer'
+import { useRouter } from 'vue-router'
+import { WriteApi, AiWritePageReqVO, AiWriteRespVo } from '@/api/ai/write'
 import * as UserApi from '@/api/system/user'
 
 /** AI 写作列表 */
@@ -177,17 +185,18 @@ defineOptions({ name: 'AiWriteManager' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const router = useRouter() // 路由
 
 const loading = ref(true) // 列表的加载中
-const list = ref<WriteVO[]>([]) // 列表的数据
+const list = ref<AiWriteRespVo[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
-const queryParams = reactive({
+const queryParams = reactive<AiWritePageReqVO>({
   pageNo: 1,
   pageSize: 10,
   userId: undefined,
   type: undefined,
   platform: undefined,
-  createTime: []
+  createTime: undefined
 })
 const queryFormRef = ref() // 搜索的表单
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -216,6 +225,15 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 新增方法，跳转到写作页面 **/
+const openForm = (type: string, id?: number) => {
+  switch (type) {
+    case 'create':
+      router.push('/ai/write')
+      break
+  }
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 6fb87c8b754662636a642863f51c179efe7969fa..fae88d71d315af4b8707ff887faf345c059c3c48 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -28,9 +28,7 @@ const message = useMessage() // 消息弹窗
 
 // ======================= WebSocket start =======================
 const server = ref(
-  (import.meta.env.VITE_BASE_URL + '/infra/ws/').replace('http', 'ws') +
-    '?token=' +
-    getAccessToken()
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
 ) // WebSocket 服务地址
 
 /** 发起 WebSocket 连接 */
diff --git a/types/global.d.ts b/types/global.d.ts
index e91e1fe4093035ada41708bef283ea20483a745b..eebe9bb830babf4ca4f4617e6e12d236f0b616b2 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -50,4 +50,9 @@ declare global {
     name: string
     children?: Tree[] | any[]
   }
+  // 分页数据公共返回
+  interface PageResult<T> {
+    list: T // 数据
+    total: number // 总量
+  }
 }