feat: mobile chat left menu

ui/src/locales/lang/zh-CN/ai-chat.ts

@@ -1,4 +1,7 @@
 export default {
+  mine: '我的',
+  logoutContent: '退出登录不会丢失任何数据，你仍可以登录此账号。',
+  confirmModification: '确认修改',
   noHistory: '暂无历史记录',
   createChat: '新建对话',
   history: '历史记录',

ui/src/views/chat/mobile/component/ResetPasswordDrawer.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-drawer v-model="show" :with-header="false" class="reset-password-drawer" size="100%">
+    <div class="navigation flex align-center mb-16">
+      <el-icon size="16" @click="show = false">
+        <ArrowLeftBold />
+      </el-icon>
+    </div>
+    <h2 class="mb-16">{{ $t('views.login.resetPassword') }}</h2>
+
+    <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="rules">
+      <el-form-item prop="password">
+        <el-input type="password" size="large" v-model="resetPasswordForm.password"
+          :placeholder="$t('views.login.loginForm.new_password.placeholder')" show-password>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="re_password">
+        <el-input type="password" size="large" v-model="resetPasswordForm.re_password"
+          :placeholder="$t('views.login.loginForm.re_password.placeholder')" show-password>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" size="large" class="w-full" @click="resetPassword">{{ $t('chat.confirmModification')
+      }}</el-button>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { t } from '@/locales'
+import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
+import type { FormInstance, FormRules } from 'element-plus'
+import useStore from '@/stores'
+import chatAPI from '@/api/chat/chat'
+import { useRouter } from 'vue-router'
+import { MsgSuccess } from '@/utils/message'
+
+const router = useRouter()
+const { chatUser } = useStore()
+
+const show = defineModel<boolean>('show', {
+  required: true,
+});
+
+const resetPasswordFormRef = ref<FormInstance>()
+
+const resetPasswordForm = ref<ResetCurrentUserPasswordRequest>({
+  password: '',
+  re_password: '',
+})
+
+const rules = ref<FormRules<ResetCurrentUserPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.new_password.placeholder'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+  ],
+  re_password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.re_password.requiredMessage'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error(t('views.login.loginForm.re_password.validatorMessage')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+})
+
+function resetPassword() {
+  resetPasswordFormRef.value?.validate().then(() => {
+    chatAPI.resetCurrentPassword(resetPasswordForm.value).then(() => {
+      MsgSuccess(t('common.modifySuccess'))
+      chatUser.logout().then(() => {
+        router.push({ name: 'login' })
+      })
+    })
+  })
+}
+</script>
+
+<style lang="scss">
+.reset-password-drawer {
+  .el-drawer__body {
+    padding: 16px;
+    padding-top: 0;
+    background: #FFFFFF;
+
+    .navigation {
+      height: 44px;
+    }
+  }
+}
+</style>

ui/src/views/chat/mobile/component/UserCenter.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-drawer v-model="show" :with-header="false" class="user-center-drawer" size="100%">
+    <div class="flex-center navigation mb-8">
+      <el-icon size="16" @click="show = false">
+        <ArrowLeftBold />
+      </el-icon>
+      <h4 class="medium">{{ $t('chat.mine') }}</h4>
+    </div>
+    <div class="card-item info p-16">
+      <el-avatar :size="64">
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+      </el-avatar>
+      <h2 class="mt-12 mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h2>
+      <div class="color-secondary lighter">{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}</div>
+    </div>
+
+    <div class="card-item reset-password flex-between" v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+      @click="resetPassword">
+      <div class="flex align-center">
+        <AppIcon iconName="app-copy" class="mr-12"></AppIcon>
+        <h4 class="lighter">{{ $t('views.login.resetPassword') }}</h4>
+      </div>
+      <el-icon size="16">
+        <ArrowRight />
+      </el-icon>
+    </div>
+
+    <div v-if="chatUser.chatUserProfile?.source === 'LOCAL'" class="card-item logout" @click="logout">
+      <h4 class="lighter">{{ $t('layout.logout') }}</h4>
+    </div>
+
+    <ResetPasswordDrawer v-model:show="resetPasswordDrawerShow" />
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useStore from '@/stores'
+import { MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import { useRouter } from 'vue-router'
+import ResetPasswordDrawer from './ResetPasswordDrawer.vue'
+
+const router = useRouter()
+const { chatUser } = useStore()
+
+const show = defineModel<boolean>('show', {
+  required: true,
+});
+
+const resetPasswordDrawerShow = ref(false)
+function resetPassword() {
+  resetPasswordDrawerShow.value = true
+}
+
+function logout() {
+  MsgConfirm(
+    t('layout.logout'),
+    t('chat.logoutContent'),
+    {
+      confirmButtonText: t('layout.logout'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      chatUser.logout().then(() => {
+        router.push({ name: 'login' })
+      })
+    })
+}
+</script>
+
+<style lang="scss">
+.user-center-drawer {
+  .el-drawer__body {
+    padding: 16px;
+    padding-top: 0;
+    background:
+      linear-gradient(187.61deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%), #EFF0F1;
+
+    .navigation {
+      height: 44px;
+      position: relative;
+
+      i {
+        position: absolute;
+        left: 0;
+      }
+    }
+
+    .card-item {
+      background-color: #FFFFFF;
+      border-radius: 8px;
+      margin-bottom: 16px;
+
+      &.info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &.logout,
+      &.reset-password {
+        padding: 13px 16px;
+      }
+
+      &.logout {
+        color: #F54A45;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

ui/src/views/chat/mobile/index.vue

@@ -3,19 +3,17 @@
     class="chat-mobile layout-bg"
     v-loading="loading"
     :style="{
-      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+    '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
+    '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
     }"
   >
     <div class="chat-embed__header" :style="customStyle">
       <div class="flex align-center">
-        <div class="mr-12 ml-24 flex">
+        <AppIcon iconName="app-history-outlined" style="font-size: 20px" class="ml-16" :style="{
-          <el-avatar
+          color: applicationDetail?.custom_theme?.header_font_color,
-            v-if="isAppIcon(applicationDetail?.icon)"
+        }" @click.prevent.stop="show = true" />
-            shape="square"
+        <div class="mr-12 ml-16 flex">
-            :size="32"
+          <el-avatar v-if="isAppIcon(applicationDetail?.icon)" shape="square" :size="32" style="background: none">
-            style="background: none"
-          >
             <img :src="applicationDetail?.icon" alt="" />
           </el-avatar>
           <LogoIcon v-else height="32px" />
@@ -48,53 +46,44 @@
         </AiChat>
       </div>
 
-      <!-- 历史记录弹出层 -->
+      <el-drawer v-model="show" :with-header="false" class="left-drawer" direction="ltr" :size="280">
-      <div @click.prevent.stop="show = !show" class="chat-popover-button cursor color-secondary">
+        <div>
-        <AppIcon
+          <div class="flex align-center mb-16">
-          iconName="app-history-outlined"
+            <div class="flex mr-8">
-          :style="{
+              <el-avatar v-if="isAppIcon(applicationDetail?.icon)" shape="square" :size="32" style="background: none">
-            color: applicationDetail?.custom_theme?.header_font_color,
+                <img :src="applicationDetail?.icon" alt="" />
-          }"
+              </el-avatar>
-        ></AppIcon>
+              <LogoIcon v-else height="32px" />
-      </div>
+            </div>
-
+            <h4>{{ applicationDetail?.name }}</h4>
-      <el-collapse-transition>
-        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
-          <div class="border-b p-16-24">
-            <span>{{ $t('chat.history') }}</span>
           </div>
+          <el-button class="add-button w-full primary" @click="newChat">
+            <AppIcon iconName="app-create-chat"></AppIcon>
+            <span class="ml-4">{{ $t('chat.createChat') }}</span>
+          </el-button>
+          <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
+        </div>
 
-          <el-scrollbar max-height="300">
+        <div class="left-height pt-0">
-            <div class="p-8">
+          <el-scrollbar>
-              <common-list
+            <div>
-                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+              <common-list :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
-                :data="chatLogData"
+                :data="chatLogData" v-loading="left_loading" :defaultActive="currentChatId" @click="clickListHandle"
-                v-loading="left_loading"
+                @mouseenter="mouseenter" @mouseleave="mouseId = ''">
-                :defaultActive="currentChatId"
-                @click="clickListHandle"
-                @mouseenter="mouseenter"
-                @mouseleave="mouseId = ''"
-              >
                 <template #default="{ row }">
                   <div class="flex-between">
-                    <ReadWrite
+                    <ReadWrite @change="editName($event, row)" :data="row.abstract" trigger="manual"
-                      @change="editName($event, row)"
+                      :write="row.writeStatus" @close="closeWrite(row)" :maxlength="1024" />
-                      :data="row.abstract"
+                    <div @click.stop v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus" class="flex">
-                      trigger="manual"
-                      :write="row.writeStatus"
-                      @close="closeWrite(row)"
-                      :maxlength="1024"
-                    />
-                    <div
-                      @click.stop
-                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
-                      class="flex"
-                    >
                       <el-button style="padding: 0" link @click.stop="openWrite(row)">
-                        <el-icon><EditPen /></el-icon>
+                        <el-icon>
+                          <EditPen />
+                        </el-icon>
                       </el-button>
                       <el-button style="padding: 0" link @click.stop="deleteLog(row)">
-                        <el-icon><Delete /></el-icon>
+                        <el-icon>
+                          <Delete />
+                        </el-icon>
                       </el-button>
                     </div>
                   </div>
@@ -111,9 +100,16 @@
             </div>
           </el-scrollbar>
         </div>
-      </el-collapse-transition>
+        <div class="flex align-center user-info" @click="toUserCenter">
-      <div class="chat-popover-mask" v-show="show"></div>
+          <el-avatar :size="32">
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </el-avatar>
+          <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">{{ chatUser.chatUserProfile?.nick_name }}</span>
+        </div>
+      </el-drawer>
     </div>
+
+    <UserCenter v-model:show="userCenterDrawerShow" />
   </div>
 </template>
 <script setup lang="ts">
@@ -124,7 +120,10 @@ import { hexToRgba } from '@/utils/theme'
 import { MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
-const { user, chatLog } = useStore()
+import UserCenter from './component/UserCenter.vue'
+import chatAPI from '@/api/chat/chat'
+
+const { user, chatLog, chatUser } = useStore()
 
 const AiChatRef = ref()
 const loading = ref(false)
@@ -214,13 +213,16 @@ function handleScroll(event: any) {
   }
 }
 
-function clickoutside() {
+const newObj = {
-  show.value = false
+  id: 'new',
+  abstract: t('chat.createChat'),
 }
-
 function newChat() {
   paginationConfig.current_page = 1
   currentRecordList.value = []
+  if (!chatLogData.value.some((v) => v.id === 'new')) {
+    chatLogData.value.unshift(newObj)
+  }
   currentChatId.value = 'new'
 }
 
@@ -230,7 +232,7 @@ function getChatLog(id: string) {
     page_size: 20,
   }
 
-  chatLog.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+  chatAPI.pageChat(page.current_page, page.page_size, left_loading).then((res: any) => {
     chatLogData.value = res.data.records
     paginationConfig.current_page = 1
     paginationConfig.total = 0
@@ -243,13 +245,12 @@ function getChatLog(id: string) {
 }
 
 function getChatRecord() {
-  return chatLog
+  return chatAPI
-    .asyncChatRecordLog(
+    .pageChatRecord(
-      applicationDetail.value.id,
       currentChatId.value,
-      paginationConfig,
+      paginationConfig.current_page,
+      paginationConfig.page_size,
       loading,
-      false,
     )
     .then((res: any) => {
       paginationConfig.total = res.data.total
@@ -296,6 +297,12 @@ const init = () => {
 onMounted(() => {
   init()
 })
+
+const userCenterDrawerShow = ref(false)
+function toUserCenter () {
+  if(!chatUser.chat_profile?.authentication) return
+  userCenterDrawerShow.value = true
+}
 </script>
 <style lang="scss">
 .chat-mobile {
@@ -322,36 +329,35 @@ onMounted(() => {
     font-size: 1rem;
   }
   // 历史对话弹出层
-  .chat-popover {
+  .left-drawer {
-    position: fixed;
+    .el-drawer__body {
-    top: var(--app-header-height);
+      padding: 16px;
-    background: #ffffff;
+      background: linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%), #eef1f4;
-    padding-bottom: 24px;
+      overflow: hidden;
-    z-index: 2009;
+
-  }
+      .add-button {
-  .chat-popover-button {
+        border: 1px solid var(--el-color-primary);
-    z-index: 2009;
+      }
-    position: fixed;
+
-    top: 16px;
+      .left-height {
-    right: 16px;
+        height: calc(100vh - 212px);
-    font-size: 22px;
+      }
+
+      .user-info {
+        border-radius: 6px;
+        padding: 4px 8px;
+        margin-top: 16px;
+        box-sizing: border-box;
+      }
+    }
   }
+
   // &.chat-embed--popup {
   //   .chat-popover-button {
   //     right: 85px;
   //   }
   // }
-  .chat-popover-mask {
+
-    background-color: var(--el-overlay-color-lighter);
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    right: 0;
-    top: var(--app-header-height);
-    z-index: 2008;
-  }
   .gradient-divider {
     position: relative;
     text-align: center;