feat: 退出登录

shared/api/buildStorage.ts

@@ -1,6 +1,7 @@
 import 'regenerator-runtime/runtime'; // react-native-storage 需要, 确保其存在
 import Storage, { NotFoundError } from 'react-native-storage';
 import _isNil from 'lodash/isNil';
+import _isUndefined from 'lodash/isUndefined';
 
 /**
  * 构建一个存储对象
@@ -36,7 +37,7 @@ export function buildStorage(backend: any) {
   const rnStorage = {
     set: async (key: string, data: any) => {
       try {
-        if (!!key && typeof key === 'string' && !_isNil(data)) {
+        if (!!key && typeof key === 'string' && !_isUndefined(data)) {
           await storage.save({ key, data });
         }
       } catch (e) {
@@ -51,7 +52,7 @@ export function buildStorage(backend: any) {
      */
     setWithExpires: async (key: string, data: any, expires: number) => {
       try {
-        if (!!key && typeof key === 'string' && !_isNil(data)) {
+        if (!!key && typeof key === 'string' && !_isUndefined(data)) {
           await storage.save({ key, data, expires });
         }
       } catch (e) {
@@ -83,11 +84,10 @@ export function buildStorage(backend: any) {
     },
     /**
      * 持久化存储, 永不过期
-     * TODO: 移除key允许为对象的写法
      */
     save: async (key: string, data: any) => {
       try {
-        if (!!key && typeof key === 'string' && !_isNil(data)) {
+        if (!!key && typeof key === 'string' && !_isUndefined(data)) {
           await storage.save({
             key,
             data,

shared/i18n/langs/en-US/translation.json

@@ -16,6 +16,7 @@
   "k3c7c48f8": "Invite not found",
   "k3f3597fc": "All",
   "k42a44318": "Joined",
+  "k42a98418": "File Service",
   "k4603baea": "Create Group Panel",
   "k47489688": "Group Service",
   "k4d32a754": "Group Name",
@@ -71,6 +72,7 @@
   "kdd4c838c": "Jump to Group",
   "kdd6c18f8": "Service exception",
   "ked5385d5": "Create Panel",
+  "kf15499b4": "Logout",
   "kf1eac01c": "Failed to load group information",
   "kf48ae58": "Group information not found",
   "kf5d66247": "Panel Name",

shared/i18n/langs/zh-CN/translation.json

@@ -16,6 +16,7 @@
   "k3c7c48f8": "找不到邀请信息",
   "k3f3597fc": "全员",
   "k42a44318": "已加入",
+  "k42a98418": "文件服务",
   "k4603baea": "创建群组面板",
   "k47489688": "群组服务",
   "k4d32a754": "群组名称",
@@ -71,6 +72,7 @@
   "kdd4c838c": "跳转到群组",
   "kdd6c18f8": "服务异常",
   "ked5385d5": "创建面板",
+  "kf15499b4": "退出登录",
   "kf1eac01c": "群组信息加载失败",
   "kf48ae58": "找不到群组信息",
   "kf5d66247": "面板名",

web/src/components/modals/SettingsView/Account.tsx

@@ -4,7 +4,10 @@ import {
   DefaultFullModalInputEditorRender,
   FullModalField,
 } from '@/components/FullModal/Field';
-import React from 'react';
+import { getUserJWT, setUserJWT } from '@/utils/jwt-helper';
+import { Button, Divider } from 'antd';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router';
 import {
   modifyUserField,
   showToasts,
@@ -19,6 +22,7 @@ import {
 export const SettingsAccount: React.FC = React.memo(() => {
   const userInfo = useUserInfo();
   const dispatch = useAppDispatch();
+  const history = useHistory();
 
   const [, handleUserAvatarChange] = useAsyncRequest(
     async (fileInfo: UploadFileResult) => {
@@ -48,25 +52,40 @@ export const SettingsAccount: React.FC = React.memo(() => {
     []
   );
 
+  // 登出
+  const handleLogout = useCallback(async () => {
+    await setUserJWT(null);
+    history.push('/');
+  }, []);
+
   if (!userInfo) {
     return null;
   }
 
   return (
-    <div className="flex">
-      <div className="w-1/3">
-        <AvatarUploader onUploadSuccess={handleUserAvatarChange}>
-          <Avatar size={128} src={userInfo.avatar} name={userInfo.nickname} />
-        </AvatarUploader>
+    <div>
+      <div className="flex">
+        <div className="w-1/3">
+          <AvatarUploader onUploadSuccess={handleUserAvatarChange}>
+            <Avatar size={128} src={userInfo.avatar} name={userInfo.nickname} />
+          </AvatarUploader>
+        </div>
+        <div className="w-2/3">
+          <FullModalField
+            title={t('用户昵称')}
+            value={userInfo.nickname}
+            editable={true}
+            renderEditor={DefaultFullModalInputEditorRender}
+            onSave={handleUpdateNickName}
+          />
+        </div>
       </div>
-      <div className="w-2/3">
-        <FullModalField
-          title={t('用户昵称')}
-          value={userInfo.nickname}
-          editable={true}
-          renderEditor={DefaultFullModalInputEditorRender}
-          onSave={handleUpdateNickName}
-        />
+      <Divider />
+
+      <div>
+        <Button type="primary" danger={true} onClick={handleLogout}>
+          {t('退出登录')}
+        </Button>
       </div>
     </div>
   );

web/src/styles/antd/dark.less

@@ -2,7 +2,8 @@
   --antd-primary-border: #165996;
   --antd-primary-color: #177ddc;
   --antd-primary-color-hover: #095cb5;
-
+  --antd-primary-dangerous-color: #a61d24;
+  --antd-primary-dangerous-color-hover: #800f19;
 
   // 按钮
   .ant-btn {
@@ -24,6 +25,16 @@
         border-color: var(--antd-primary-color-hover);
         background: var(--antd-primary-color-hover);
       }
+
+      &.ant-btn-dangerous {
+        border-color: var(--antd-primary-dangerous-color);
+        background: var(--antd-primary-dangerous-color);
+
+        &:hover {
+          border-color: var(--antd-primary-dangerous-color-hover);
+          background: var(--antd-primary-dangerous-color-hover);
+        }
+      }
     }
   }
 

web/src/utils/jwt-helper.ts

@@ -24,7 +24,7 @@ let _userJWT: string | null = null;
 /**
  * 设置用户登录标识
  */
-export async function setUserJWT(jwt: string): Promise<void> {
+export async function setUserJWT(jwt: string | null): Promise<void> {
   _userJWT = jwt; // 更新内存中的缓存
 
   await getStorage().set('jsonwebtoken', jwt);