feat(components): 新增编辑功能(不完善,待优化) #22 解决用户语句换行问题 #37

mjjh1717 · Aug 2, 2023 · 1e8edfd · 1e8edfd
1 parent b30c6f5
commit 1e8edfd
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 40 deletions.
diff --git a/src/components/common/roomHeader.vue b/src/components/common/roomHeader.vue
@@ -1,20 +1,62 @@
-<!--
- * @Author: mjjh
- * @LastEditTime: 2023-07-16 18:58:12
- * @FilePath: \ai-beehive-web\src\components\common\roomHeader.vue
- * @Description:
--->
 <script setup lang="ts">
+import { useMessage } from 'naive-ui'
+import type { CellConfigResponse, CellConfigVO, addRoomVo } from '~/src/views/page-main/types/types'
+import api from '~/src/views/page-main/api'
+const props = withDefaults(defineProps<Props>(), {})
+
+const ms = useMessage()
+
 interface Props {
   /** 图标名称(图片的文件名) */
   color: string
   name: string
   cellCode: string
   createTime: string
+  roomId: string
 }
-const props = withDefaults(defineProps<Props>(), {})
+const EditModalFormRef = ref()
+const showModalLoading = ref(false)
 
 const showEdit = ref(false)
+const editloading = ref(false)
+
+const editModalForm = ref<addRoomVo>({
+  roomId: props.roomId,
+  roomConfigParams: undefined,
+})
+
+const cellConfigList = ref<CellConfigVO[]> ()
+
+async function initData() {
+  showModalLoading.value = true
+  const { data }: CellConfigResponse = await api.getRoomConfig(props.roomId)
+  cellConfigList.value = data
+  showModalLoading.value = false
+}
+
+function resetEditData() {
+  editModalForm.value.roomConfigParams = undefined
+  cellConfigList.value = undefined
+}
+
+function editItem() {
+  EditModalFormRef.value?.validate(async (err: any) => {
+    if (err) {
+      ms.error('请填写完整数据')
+      return
+    }
+
+    editloading.value = true
+    if (!editModalForm.value.roomConfigParams)
+      editModalForm.value.roomConfigParams = []
+
+    api.editRoomConfig(editModalForm.value).finally(() => {
+      editloading.value = false
+      showEdit.value = false
+      resetEditData()
+    })
+  })
+}
 
 // todo 编辑按钮未绑定
 </script>
@@ -48,7 +90,7 @@ const showEdit = ref(false)
     </div>
     <div flex-1 />
     <!-- :color="`${props.color}`" -->
-    <n-button type="primary" @click="showEdit = true">
+    <n-button type="primary" @click="showEdit = true, initData()">
       <n-icon size="16">
         <icon-ri:edit-line />
       </n-icon>
@@ -57,17 +99,34 @@ const showEdit = ref(false)
 
     <n-modal
       v-model:show="showEdit"
-      preset="dialog"
-      title="房间参数编辑"
-      :style="{ width: 600 }"
-      :show-icon="false"
-      positive-text="确认"
-      negative-text="取消"
-      @positive-click="showEdit = false"
-      @negative-click="showEdit = false"
-      @mask-click="showEdit = false"
+      style="width: 960px"
+      title="编辑房间配置"
+      :bordered="false"
+      size="huge"
+      aria-modal="true"
+      preset="card"
+      :on-after-leave="resetEditData()"
     >
-      开发中........
+      <n-spin :show="showModalLoading">
+        <n-form v-show="!showModalLoading" ref="EditModalFormRef" :model="editModalForm">
+          <n-form-item>
+            <ConfigList v-model:newCellConfigList="editModalForm.roomConfigParams" :cell-config-list="cellConfigList ?? []" />
+          </n-form-item>
+        </n-form>
+      </n-spin>
+
+      <template #footer>
+        <footer flex justify-end>
+          <slot name="footer">
+            <NButton @click="showEdit = false, resetEditData()">
+              取消
+            </NButton>
+            <NButton :loading="editloading" ml-20 type="primary" @click="editItem()">
+              提交
+            </NButton>
+          </slot>
+        </footer>
+      </template>
     </n-modal>
   </div>
 </template>
diff --git a/src/components/useComponents/ConfigList.vue b/src/components/useComponents/ConfigList.vue
@@ -8,6 +8,11 @@
 import { watch } from 'vue'
 
 interface CellConfigVO {
+  // 编辑
+  value?: string
+
+  // 是否使用默认值
+  isUseDefaultValue?: boolean
   /**
    * 配置项编码
    */
@@ -83,8 +88,8 @@ watch(
       const newList: RoomConfigVO[] = []
       for (const item of toRaw(value)) {
         newList.push({
-          value: item.isUserValueVisible && item.isHaveDefaultValue ? item.defaultValue : '',
-          isUseDefaultValue: (item.isHaveDefaultValue && item.isUserModifiable) ?? false,
+          value: item?.value ?? (item.isUserValueVisible && item.isHaveDefaultValue ? item.defaultValue : ''),
+          isUseDefaultValue: item?.isUseDefaultValue ?? (item.isHaveDefaultValue && item.isUserModifiable) ?? false,
           cellConfigCode: item.cellConfigCode ?? '',
         })
       }

diff --git a/src/views/cellRoom/midjourney/index.vue b/src/views/cellRoom/midjourney/index.vue
@@ -562,7 +562,7 @@ function getTimeDate(newDate: string, oldDate: string) {
 
 <template>
   <div style="height: 100vh;" class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :create-time="roomData.createTime" />
+    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :room-id="roomData.roomId" :create-time="roomData.createTime" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -715,7 +715,8 @@ function getTimeDate(newDate: string, oldDate: string) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;  color: #3a3a3a;">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a;">
+                <!-- <MdEditor v-model="sendData" preview-only :theme="themeStyle" rd-10 card-shadow /> -->
                 {{ `/${item.action}${item.uvIndex ? `: ${item.uvIndex}` : ''} ${item.prompt ?? ''}` }}
               </div>
             </div>

diff --git a/src/views/cellRoom/newBing/index.vue b/src/views/cellRoom/newBing/index.vue
@@ -249,7 +249,7 @@ async function changData(talkdata: any, done = false) {
 
 <template>
   <div h-screen class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :create-time="roomData.createTime" />
+    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :room-id="roomData.roomId" :create-time="roomData.createTime" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -292,7 +292,7 @@ async function changData(talkdata: any, done = false) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;  color: #3a3a3a;">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a;">
                 {{ item.content }}
               </div>
             </div>
@@ -308,7 +308,7 @@ async function changData(talkdata: any, done = false) {
       </div>
       <!-- 用户的提问 -->
       <div v-if="isSend" flex justify-end items-start mb-20>
-        <div p-10 rd-10 break-all card-shadow style="background-color: #fed784; color: #3a3a3a; ">
+        <div p-10 rd-10 break-all card-shadow whitespace-pre style="background-color: #fed784; color: #3a3a3a; ">
           {{ sendData }}
         </div>
         <div min-w-50 flex justify-end>

diff --git a/src/views/cellRoom/openaiChat/index.vue b/src/views/cellRoom/openaiChat/index.vue
@@ -214,7 +214,7 @@ async function changData(talkdata: any, done = false) {
 
 <template>
   <div h-screen class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :create-time="roomData.createTime" />
+    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :room-id="roomData.roomId" :create-time="roomData.createTime" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -252,7 +252,7 @@ async function changData(talkdata: any, done = false) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;  color: #3a3a3a; ">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a; ">
                 {{ item.content }}
               </div>
             </div>
@@ -268,7 +268,7 @@ async function changData(talkdata: any, done = false) {
       </div>
       <!-- 用户的提问 -->
       <div v-if="isSend" flex justify-end items-start mb-20>
-        <div p-10 rd-10 break-all card-shadow style="background-color: #fed784; color: #3a3a3a; ">
+        <div p-10 rd-10 break-all card-shadow whitespace-pre style="background-color: #fed784; color: #3a3a3a; ">
           {{ sendData }}
         </div>
         <div min-w-50 flex justify-end>

diff --git a/src/views/cellRoom/openaiChatWeb/index.vue b/src/views/cellRoom/openaiChatWeb/index.vue
@@ -214,7 +214,7 @@ async function changData(talkdata: any, done = false) {
 
 <template>
   <div h-screen class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :create-time="roomData.createTime" />
+    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :room-id="roomData.roomId" :create-time="roomData.createTime" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -253,7 +253,7 @@ async function changData(talkdata: any, done = false) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;   color: #3a3a3a; ">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;   color: #3a3a3a; ">
                 {{ item.content }}
               </div>
             </div>
@@ -269,7 +269,7 @@ async function changData(talkdata: any, done = false) {
       </div>
       <!-- 用户的提问 -->
       <div v-if="isSend" flex justify-end items-start mb-20>
-        <div p-10 rd-10 break-all card-shadow style="background-color: #fed784;  color: #3a3a3a; ">
+        <div p-10 rd-10 break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a; ">
           {{ sendData }}
         </div>
         <div min-w-50 flex justify-end>

diff --git a/src/views/cellRoom/openaiImg/index.vue b/src/views/cellRoom/openaiImg/index.vue
@@ -216,7 +216,7 @@ async function changData(talkdata: any, done = false) {
 
 <template>
   <div h-screen class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color ?? ''" :name="roomData.name ?? ''" :cell-code="roomData.cellCode ?? ''" :create-time="roomData.createTime ?? ''" />
+    <roomHeader :color="roomData.color ?? ''" :name="roomData.name ?? ''" :cell-code="roomData.cellCode ?? ''" :room-id="roomData.roomId" :create-time="roomData.createTime ?? ''" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -265,7 +265,7 @@ async function changData(talkdata: any, done = false) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;  color: #3a3a3a;">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a;">
                 {{ item.prompt }}
               </div>
             </div>
@@ -281,7 +281,7 @@ async function changData(talkdata: any, done = false) {
       </div>
       <!-- 用户的提问 -->
       <div v-if="isSend" flex justify-end items-start mb-20>
-        <div p-10 rd-10 break-all card-shadow style="background-color: #fed784; color: #3a3a3a; ">
+        <div p-10 rd-10 break-all card-shadow whitespace-pre style="background-color: #fed784; color: #3a3a3a; ">
           {{ sendData }}
         </div>
         <div min-w-50 flex justify-end>

diff --git a/src/views/cellRoom/wyqfChat/index.vue b/src/views/cellRoom/wyqfChat/index.vue
@@ -214,7 +214,7 @@ async function changData(talkdata: any, done = false) {
 
 <template>
   <div h-screen class="text-[#3a3a3a] dark:text-[#fff]" flex flex-col>
-    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :create-time="roomData.createTime" />
+    <roomHeader :color="roomData.color" :name="roomData.name" :cell-code="roomData.cellCode" :room-id="roomData.roomId" :create-time="roomData.createTime" />
     <div id="scrollRef" ref="scrollRef" relative flex-1 overflow-hidden overflow-y-auto p-r-24 p-l-24 p-t-24 class=" text-[#3a3a3a] dark:text-[#fff]" @scroll="getScrollData">
       <div v-if="getMore && showGetMoreBtn" absolute top-10 right-0 left-0 f-c-c>
         <n-button tertiary round size="small" @click="loadingMore">
@@ -252,7 +252,7 @@ async function changData(talkdata: any, done = false) {
               </n-ellipsis>
             </div>
             <div flex justify-end>
-              <div p-10 rd-10 inline-block break-all card-shadow style="background-color: #fed784;  color: #3a3a3a; ">
+              <div p-10 rd-10 inline-block break-all card-shadow whitespace-pre style="background-color: #fed784;  color: #3a3a3a; ">
                 {{ item.content }}
               </div>
             </div>
@@ -268,7 +268,7 @@ async function changData(talkdata: any, done = false) {
       </div>
       <!-- 用户的提问 -->
       <div v-if="isSend" flex justify-end items-start mb-20>
-        <div p-10 rd-10 break-all card-shadow style="background-color: #fed784; color: #3a3a3a; ">
+        <div p-10 rd-10 break-all card-shadow whitespace-pre style="background-color: #fed784; color: #3a3a3a; ">
           {{ sendData }}
         </div>
         <div min-w-50 flex justify-end>

diff --git a/src/views/page-main/api.ts b/src/views/page-main/api.ts
@@ -21,4 +21,8 @@ export default {
   getCellList: () => request.get('/cell/list'),
   getCellImgList: () => request.get('/cell/list_image'),
   getCellConfigList: (cellCode: string) => request.get(`/cell_config/list?cellCode=${cellCode}`),
+
+  // 获取房间配置
+  getRoomConfig: (roomId: string) => request.get(`/room_config_param/list?roomId=${roomId}`),
+  editRoomConfig: (data: addRoomVo) => request.post('/room_config_param/edit', data),
 }
diff --git a/src/views/page-main/types/types.ts b/src/views/page-main/types/types.ts
@@ -107,15 +107,17 @@ export interface editRoomVo {
  * 房间创建请求参数
  */
 export interface addRoomVo {
+  // id 编辑房间时候使用
+  roomId?: string
   /**
    * cell code
    */
-  cellCode: CellCode2 | undefined
+  cellCode?: CellCode2 | undefined
   /**
    * 房间配置参数列表
    */
-  roomConfigParams: RoomConfigParamRequest[] | undefined
-  roomInfo: RoomInfoRequest
+  roomConfigParams?: RoomConfigParamRequest[] | undefined
+  roomInfo?: RoomInfoRequest
 }
 
 /**
@@ -311,6 +313,12 @@ export interface CellConfigResponse {
 * Cell 配置项展示对象
 */
 export interface CellConfigVO {
+  // 编辑
+  value?: string
+
+  // 是否使用默认值
+  isUseDefaultValue?: boolean
+
   /**
    * 配置项编码
    */