feat: 用户信息管理

Author: Kerwin

service/src/index.ts

@@ -1,11 +1,12 @@
 import express from 'express'
 import jwt from 'jsonwebtoken'
+import { ObjectId } from 'mongodb'
 import type { ChatContext, ChatMessage } from './chatgpt'
 import { chatConfig, chatReplyProcess, currentModel } from './chatgpt'
 import { auth } from './middleware/auth'
-import type { ChatOptions } from './storage/model'
+import type { ChatOptions, UserInfo } from './storage/model'
 import { Status } from './storage/model'
-import { clearChat, createChatRoom, createUser, deleteChat, deleteChatRoom, existsChatRoom, getChat, getChatRooms, getChats, getUser, insertChat, renameChatRoom, updateChat, verifyUser } from './storage/mongo'
+import { clearChat, createChatRoom, createUser, deleteChat, deleteChatRoom, existsChatRoom, getChat, getChatRooms, getChats, getUser, getUserById, insertChat, renameChatRoom, updateChat, updateUserInfo, verifyUser } from './storage/mongo'
 import { sendMail } from './utils/mail'
 import { checkUserVerify, getUserVerifyUrl, md5 } from './utils/security'
 
@@ -248,14 +249,36 @@ router.post('/user-login', async (req, res) => {
       throw new Error('用户不存在或密码错误 | User does not exist or incorrect password.')
     }
 
-    const token = jwt.sign({ email: username, userId: user._id }, process.env.AUTH_SECRET_KEY)
+    const token = jwt.sign({
+      name: user.name ? user.name : user.email,
+      avatar: user.avatar,
+      description: user.description,
+      userId: user._id,
+      root: username.toLowerCase() === process.env.ROOT_USER,
+    }, process.env.AUTH_SECRET_KEY)
     res.send({ status: 'Success', message: '登录成功 | Login successfully', data: { token } })
   }
   catch (error) {
     res.send({ status: 'Fail', message: error.message, data: null })
   }
 })
 
+router.post('/user-info', auth, async (req, res) => {
+  try {
+    const { name, avatar, description } = req.body as UserInfo
+    const userId = new ObjectId(req.headers.userId.toString())
+
+    const user = await getUserById(userId)
+    if (user == null || user.status !== Status.Normal)
+      throw new Error('用户不存在 | User does not exist.')
+    await updateUserInfo(userId, { name, avatar, description } as UserInfo)
+    res.send({ status: 'Success', message: '更新成功 | Update successfully' })
+  }
+  catch (error) {
+    res.send({ status: 'Fail', message: error.message, data: null })
+  }
+})
+
 router.post('/verify', async (req, res) => {
   try {
     const { token } = req.body as { token: string }

service/src/storage/model.ts

@@ -16,6 +16,8 @@ class UserInfo {
   status: Status
   createTime: string
   verifyTime?: string
+  avatar?: string
+  description?: string
   constructor(email: string, password: string) {
     this.name = email
     this.email = email

service/src/storage/mongo.ts

@@ -117,7 +117,7 @@ export async function deleteChat(roomId: number, uuid: number, inversion: boolea
   chatCol.updateOne(query, update)
 }
 
-export async function createUser(email: string, password: string) {
+export async function createUser(email: string, password: string): Promise<UserInfo> {
   email = email.toLowerCase()
   const userInfo = new UserInfo(email, password)
   if (email === process.env.ROOT_USER)
@@ -127,14 +127,19 @@ export async function createUser(email: string, password: string) {
   return userInfo
 }
 
-export async function updateUserName(userId: ObjectId, name: string) {
-  const result = userCol.updateOne({ _id: userId }, { name: { $set: name } })
+export async function updateUserInfo(userId: ObjectId, user: UserInfo) {
+  const result = userCol.updateOne({ _id: userId }
+    , { $set: { name: user.name, description: user.description, avatar: user.avatar } })
   return result
 }
 
-export async function getUser(email: string) {
+export async function getUser(email: string): Promise<UserInfo> {
   email = email.toLowerCase()
-  return await userCol.findOne({ email })
+  return await userCol.findOne({ email }) as UserInfo
+}
+
+export async function getUserById(userId: ObjectId): Promise<UserInfo> {
+  return await userCol.findOne({ _id: userId }) as UserInfo
 }
 
 export async function verifyUser(email: string) {

src/api/index.ts

@@ -64,6 +64,13 @@ export function fetchRegister<T = any>(username: string, password: string) {
   })
 }
 
+export function fetchUpdateUserInfo<T = any>(name: string, avatar: string, description: string) {
+  return post<T>({
+    url: '/user-info',
+    data: { name, avatar, description },
+  })
+}
+
 export function fetchGetChatRooms<T = any>() {
   return get<T>({
     url: '/chatrooms',

src/components/common/Setting/About.vue

@@ -44,29 +44,6 @@ onMounted(() => {
       <h2 class="text-xl font-bold">
         Version - {{ pkg.version }}
       </h2>
-      <div class="p-2 space-y-2 rounded-md bg-neutral-100 dark:bg-neutral-700">
-        <p>
-          此项目开源于
-          <a
-            class="text-blue-600 dark:text-blue-500"
-            href="https://github.com/kerwin1202/chatgpt-web"
-            target="_blank"
-          >
-            kerwin1202/chatgpt-web
-          </a>是基于
-          <a
-            class="text-blue-600 dark:text-blue-500"
-            href="https://github.com/Chanzhaoyu/chatgpt-web"
-            target="_blank"
-          >
-            Chanzhaoyu/chatgpt-web
-          </a> 分支而来
-          ，免费且基于 MIT 协议，没有任何形式的付费行为！
-        </p>
-        <p>
-          如果你觉得此项目对你有帮助，请在 Github 帮我点个 Star 或者给予一点赞助，谢谢！
-        </p>
-      </div>
       <p>{{ $t("setting.api") }}：{{ config?.apiModel ?? '-' }}</p>
       <p v-if="isChatGPTAPI">
         {{ $t("setting.balance") }}：{{ config?.balance ?? '-' }}

src/components/common/Setting/General.vue

@@ -59,17 +59,11 @@ const languageOptions: { label: string; key: Language; value: Language }[] = [
   { label: 'English', key: 'en-US', value: 'en-US' },
 ]
 
-function updateUserInfo(options: Partial<UserInfo>) {
-  userStore.updateUserInfo(options)
+async function updateUserInfo(options: Partial<UserInfo>) {
+  await userStore.updateUserInfo(true, options)
   ms.success(t('common.success'))
 }
 
-function handleReset() {
-  userStore.resetUserInfo()
-  ms.success(t('common.success'))
-  window.location.reload()
-}
-
 function exportData(): void {
   const date = getCurrentDate()
   const data: string = localStorage.getItem('chatStorage') || '{}'
@@ -123,32 +117,23 @@ function handleImportButtonClick(): void {
 <template>
   <div class="p-4 space-y-5 min-h-[200px]">
     <div class="space-y-6">
-      <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
-        <div class="flex-1">
-          <NInput v-model:value="avatar" placeholder="" />
-        </div>
-        <NButton size="tiny" text type="primary" @click="updateUserInfo({ avatar })">
-          {{ $t('common.save') }}
-        </NButton>
-      </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.name') }}</span>
         <div class="w-[200px]">
           <NInput v-model:value="name" placeholder="" />
         </div>
-        <NButton size="tiny" text type="primary" @click="updateUserInfo({ name })">
-          {{ $t('common.save') }}
-        </NButton>
       </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.description') }}</span>
         <div class="flex-1">
           <NInput v-model:value="description" placeholder="" />
         </div>
-        <NButton size="tiny" text type="primary" @click="updateUserInfo({ description })">
-          {{ $t('common.save') }}
-        </NButton>
+      </div>
+      <div class="flex items-center space-x-4">
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.avatarLink') }}</span>
+        <div class="flex-1">
+          <NInput v-model:value="avatar" placeholder="" />
+        </div>
       </div>
 
       <div
@@ -214,9 +199,9 @@ function handleImportButtonClick(): void {
         </div>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
-        <NButton size="small" @click="handleReset">
-          {{ $t('common.reset') }}
+        <span class="flex-shrink-0 w-[100px]">{{ $t('setting.saveUserInfo') }}</span>
+        <NButton size="small" type="primary" @click="updateUserInfo({ avatar, name, description })">
+          {{ $t('common.save') }}
         </NButton>
       </div>
     </div>

src/components/common/Setting/index.vue

@@ -4,11 +4,14 @@ import { NModal, NTabPane, NTabs } from 'naive-ui'
 import General from './General.vue'
 import About from './About.vue'
 import { SvgIcon } from '@/components/common'
+import { useUserStore } from '@/store'
 
 const props = defineProps<Props>()
 
 const emit = defineEmits<Emit>()
 
+const userStore = useUserStore()
+
 interface Props {
   visible: boolean
 }
@@ -42,7 +45,7 @@ const show = computed({
             <General />
           </div>
         </NTabPane>
-        <NTabPane name="Config" tab="Config">
+        <NTabPane v-if="userStore.userInfo.root" name="Config" tab="Config">
           <template #tab>
             <SvgIcon class="text-lg" icon="ri:list-settings-line" />
             <span class="ml-2">{{ $t('setting.config') }}</span>

src/locales/en-US.ts

@@ -8,7 +8,6 @@ export default {
     deleteSuccess: 'Delete Success',
     save: 'Save',
     saveSuccess: 'Save Success',
-    reset: 'Reset',
     action: 'Action',
     export: 'Export',
     exportSuccess: 'Export Success',
@@ -57,7 +56,7 @@ export default {
     avatarLink: 'Avatar Link',
     name: 'Name',
     description: 'Description',
-    resetUserInfo: 'Reset UserInfo',
+    saveUserInfo: 'Save User Info',
     chatHistory: 'ChatHistory',
     theme: 'Theme',
     language: 'Language',

src/locales/zh-CN.ts

@@ -8,7 +8,6 @@ export default {
     deleteSuccess: '删除成功',
     save: '保存',
     saveSuccess: '保存成功',
-    reset: '重置',
     action: '操作',
     export: '导出',
     exportSuccess: '导出成功',
@@ -57,7 +56,7 @@ export default {
     avatarLink: '头像链接',
     name: '名称',
     description: '描述',
-    resetUserInfo: '重置用户信息',
+    saveUserInfo: '保存用户信息',
     chatHistory: '聊天记录',
     theme: '主题',
     language: '语言',

src/locales/zh-TW.ts

@@ -8,7 +8,6 @@ export default {
     deleteSuccess: '刪除成功',
     save: '儲存',
     saveSuccess: '儲存成功',
-    reset: '重設',
     action: '操作',
     export: '匯出',
     exportSuccess: '匯出成功',
@@ -57,7 +56,7 @@ export default {
     avatarLink: '頭貼連結',
     name: '名稱',
     description: '描述',
-    resetUserInfo: '重設使用者資訊',
+    saveUserInfo: '保存用户資訊',
     chatHistory: '紀錄',
     theme: '主題',
     language: '語言',

src/store/modules/auth/index.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import jwt_decode from 'jwt-decode'
+import type { UserInfo } from '../user/helper'
 import { getToken, removeToken, setToken } from './helper'
 import { store, useUserStore } from '@/store'
 import { fetchSession } from '@/api'
@@ -39,14 +40,15 @@ export const useAuthStore = defineStore('auth-store', {
       }
     },
 
-    setToken(token: string) {
+    async setToken(token: string) {
       this.token = token
-      const decoded = jwt_decode(token) as { email: string }
+      const decoded = jwt_decode(token) as UserInfo
       const userStore = useUserStore()
-      userStore.updateUserInfo({
-        avatar: '',
-        name: decoded.email,
-        description: '',
+      await userStore.updateUserInfo(false, {
+        avatar: decoded.avatar,
+        name: decoded.name,
+        description: decoded.description,
+        root: decoded.root,
       })
       setToken(token)
     },

src/store/modules/user/helper.ts

@@ -6,6 +6,7 @@ export interface UserInfo {
   avatar: string
   name: string
   description: string
+  root: boolean
 }
 
 export interface UserState {
@@ -18,6 +19,7 @@ export function defaultSetting(): UserState {
       avatar: '',
       name: '',
       description: '',
+      root: false,
     },
   }
 }

src/store/modules/user/index.ts

@@ -1,13 +1,16 @@
 import { defineStore } from 'pinia'
+import { fetchUpdateUserInfo } from '../../../api/'
 import type { UserInfo, UserState } from './helper'
 import { defaultSetting, getLocalState, setLocalState } from './helper'
 
 export const useUserStore = defineStore('user-store', {
   state: (): UserState => getLocalState(),
   actions: {
-    updateUserInfo(userInfo: Partial<UserInfo>) {
+    async updateUserInfo(update: boolean, userInfo: Partial<UserInfo>) {
       this.userInfo = { ...this.userInfo, ...userInfo }
       this.recordState()
+      if (update)
+        await fetchUpdateUserInfo(userInfo.name ?? '', userInfo.avatar ?? '', userInfo.description ?? '')
     },
 
     resetUserInfo() {

src/views/chat/layout/Permission.vue

@@ -66,7 +66,7 @@ async function handleLogin() {
   try {
     loading.value = true
     const result = await fetchLogin(name, pwd)
-    authStore.setToken(result.data.token)
+    await authStore.setToken(result.data.token)
     ms.success('success')
     router.go(0)
   }