Merge pull request #45 from fuyapeng123456/main

#29 房间列表缩进保存之本地存储,修改图标的样式

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+# 匹配所有文件
+[*]
+# 在文件结尾插入新行
+insert_final_newline = false
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配.vue文件
+[*.vue]
+indent_style = space
+indent_size = 2

.gitignore

@@ -15,6 +15,9 @@ dist-ssr
 .env.development
 .env.production
 
+package-lock.json
+pnpm-lock.yaml
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

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>

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 ?? '',
         })
       }

src/layout/sidebar/components/Notice.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+import bgImg from '@/assets/images/notice/bg.jpg'
+import logoImg from '@/assets/images/notice/logo.png'
+
+const user = useUserStore()
+const isShowModal = ref(user.isShowNotice)
+</script>
+
+<template>
+  <div flex items-center justify-center mt-10 mb-20 cursor-pointer w-full>
+    <n-icon size="28" @click="isShowModal = true, user.changShow(true)">
+      <icon-mdi:email />
+    </n-icon>
+  </div>
+  <n-modal
+    v-model:show="isShowModal"
+    style="width: 960px"
+    title="通知公告"
+    :bordered="false"
+    size="huge"
+    aria-modal="true"
+    preset="card"
+    :on-after-leave="() => { user.changShow(false) }"
+  >
+    <div flex>
+      <n-card flex-1 title="通知">
+        <div>AI 蜂巢:</div>
+        基于 Java 使用 Spring Boot 3 和 JDK 17，支持的功能有 ChatGPT、OpenAi Image、Midjourney、NewBing、文心一言等等
+      </n-card>
+      <div
+        w-244 h-420 b-rd-10 b-2 b-hex-ededf3 ml-6
+        :style="{ 'background-image': `url(${bgImg})` }"
+        style="
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center center;
+        "
+      >
+        <img w-240 b-rd-10 :src="logoImg" alt="https://www.asiayun.com/aff/PJKGJTCD">
+        <div p-20 dark:c-hex-333639>
+          <div style="font-size: 18px;">
+            梦想在这里启航!~
+          </div>
+          <br>
+          <div>
+            精心为您挑选最适合的配置，让您即开即用、省心运营
+          </div>
+          <br>
+          <div>
+            本站专属 7.8 折优惠码：
+          </div>
+          <div>
+            aibeehive78
+          </div>
+          <br>
+          <a
+            href="https://www.asiayun.com/aff/PJKGJTCD" target="_Blank"
+          >
+
+            <NButton type="info" dark:c-hex-fff round @click="isShowModal = false">
+              点我直达
+            </NButton>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <footer flex justify-end>
+        <slot name="footer">
+          <NButton ml-20 type="primary" @click="isShowModal = false">
+            确定
+          </NButton>
+        </slot>
+      </footer>
+    </template>
+  </n-modal>
+</template>

src/layout/sidebar/index.vue

@@ -1,18 +1,16 @@
-<!--
- * @Author: mjjh
- * @LastEditTime: 2023-05-30 00:31:29
- * @FilePath: \ai-beehive-web\src\layout\sidebar\index.vue
- * @Description:
--->
 <script setup lang="ts">
 import UserAvatar from './components/UserAvatar.vue'
 import SideMenu from './components/SideMenu.vue'
 import ThemeMode from './components/ThemeMode.vue'
+import Notice from './components/Notice.vue'
 </script>
 
 <template>
   <UserAvatar />
   <SideMenu />
-  <ThemeMode absolute bottom-0 />
+  <div absolute bottom-0 left-0 right-0>
+    <Notice />
+    <ThemeMode />
+  </div>
 </template>
 

src/store/modules/user/index.ts

@@ -24,6 +24,7 @@ interface UserInfo {
   description?: string
   avatarUrl?: string
   role?: Array<string>
+  isShowNotice?: boolean
 }
 
 export const useUserStore = defineStore('user', {
@@ -54,15 +55,19 @@ export const useUserStore = defineStore('user', {
     role(): Array<string> {
       return this.userInfo.role || []
     },
+    isShowNotice(): boolean {
+      return this.userInfo.isShowNotice ?? false
+    },
   },
   actions: {
-    // TODO mock人员数据
     async getUserInfo() {
       try {
         const res: any = await api.getUser()
         if (res.code === 200) {
           const { baseUserId, nickname, status, email, description, avatarUrl } = res.data
-          this.userInfo = { baseUserId, nickname, status, email, description, avatarUrl }
+          const role = ['admin']
+          const isShowNotice = true
+          this.userInfo = { baseUserId, nickname, status, email, description, avatarUrl, role, isShowNotice }
           return Promise.resolve(res.data)
         }
         else {
@@ -73,6 +78,9 @@ export const useUserStore = defineStore('user', {
         return Promise.reject(error)
       }
     },
+    changShow(flag: boolean) {
+      this.userInfo.isShowNotice = flag
+    },
     async logout() {
       const { resetTabs } = useTabStore()
       const { resetPermission } = usePermissionStore()

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>

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>

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>