Perf: Account Side Show

ui/src/renderer/src/lang/modules/en.ts

@@ -47,6 +47,7 @@ export default {
     Username: 'Username',
     Password: 'Password',
     Confirm: 'Confirm',
+    Cancel: '取消',
     UsernamePlaceholder: 'Please enter the username',
     InputAccountPassword: 'Manual input',
     None: 'None',
@@ -117,6 +118,8 @@ export default {
     NotMatched: 'Client that does not match the corresponding protocol!',
     PleaseAuthFirst: 'Login authentication is required first',
     HistoryRequireAuth: 'Authentication required to view history',
-    LoginAuthenticationExpired: 'Login authentication has expired'
+    LoginAuthenticationExpired: 'Login authentication has expired',
+    RemoveAccountConfirm: 'Are you sure you want to delete the current account?',
+    RemoveAccount: 'Remove Account'
   }
 };

ui/src/renderer/src/lang/modules/zh.ts

@@ -47,13 +47,14 @@ export default {
     Username: '用户名',
     Password: '密码',
     Confirm: '确认',
+    Cancel: '取消',
     UsernamePlaceholder: '请输入用户名',
     InputAccountPassword: '手动输入',
     None: '无',
     Address: '地址',
     Connectability: '可连接性',
     NoData: '暂无数据',
-    Appearance: '外观',
+    Appearance: '外观选择',
     SwitchLanguage: '切换语言'
   },
   Dialog: {
@@ -116,6 +117,8 @@ export default {
     GetDefaultSettingFailed: '自动启用默认设置',
     PleaseAuthFirst: '请先进行登录认证!',
     HistoryRequireAuth: '查看历史记录需要先登录认证',
-    LoginAuthenticationExpired: '登录认证已失效'
+    LoginAuthenticationExpired: '登录认证已失效',
+    RemoveAccountConfirm: '确定要删除当前账号吗?',
+    RemoveAccount: '移除账号'
   }
 };

ui/src/renderer/src/layouts/components/AccountList/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <n-flex
-    align="center"
-    justify="start"
-    class="w-full !flex-nowrap cursor-pointer group"
-    @click="changeAccount"
-  >
+  <n-flex align="center" justify="start" class="w-full !flex-nowrap cursor-pointer group">
     <n-avatar round class="flex-shrink-0" :src="userAvator" />
 
     <n-flex align="center" vertical justify="start" class="w-full !flex-nowrap !gap-0">
@@ -17,22 +12,18 @@
       </n-flex>
     </n-flex>
 
-    <Check
+    <!-- <Check
       :size="18"
       :color="userToken === userStore.currentUser!.token ? '#63e2b7' : 'gray'"
       class="cursor-pointer flex-shrink-0"
-    />
+    /> -->
   </n-flex>
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { Check } from 'lucide-vue-next';
-import { useUserStore } from '@renderer/store/module/userStore';
-
 import type { Component } from 'vue';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     userAvator: string | Component;
     username: string;
@@ -46,17 +37,6 @@ const props = withDefaults(
     userToken: ''
   }
 );
-
-const emits = defineEmits<{
-  (e: 'changeAccount', token: string): void;
-}>();
-
-const { t } = useI18n();
-const userStore = useUserStore();
-
-const changeAccount = () => {
-  emits('changeAccount', props.userToken);
-};
 </script>
 
 <style scoped>

ui/src/renderer/src/layouts/components/sideMenu/config/index.tsx

@@ -1,10 +1,11 @@
 import { renderIcon } from '@renderer/layouts/components/HeaderSection/helper';
 import { useI18n } from 'vue-i18n';
 import { h } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 import { BrandWindows, Database, Terminal2, Star, History } from '@vicons/tabler';
-import { Trash2, CircleCheck } from 'lucide-vue-next';
-import { NFlex, NAvatar, NText } from 'naive-ui';
+import { NFlex, NAvatar, NText, NButton, NModal } from 'naive-ui';
+import { Trash2 } from 'lucide-vue-next';
 import { Devices } from '@vicons/carbon';
 import { RouterLink } from 'vue-router';
 
@@ -106,18 +107,19 @@ export const menuOptions = () => {
  * @param option
  * @returns
  */
-export const getAccountOptionsRender = (option: SelectOption) => {
+export const getAccountOptionsRender = (option: SelectOption, callback?: () => void) => {
   return h(
     NFlex,
     {
-      class: 'w-full',
+      class: 'w-full !gap-x-0',
       align: 'center',
       justify: 'start'
     },
     {
       default: () => [
         h(NAvatar, {
-          size: 20,
+          round: true,
+          size: 'small',
           src: option.avatar_url as string,
           class: 'mr-2'
         }),
@@ -127,26 +129,78 @@ export const getAccountOptionsRender = (option: SelectOption) => {
             depth: 1,
             class: 'font-medium text-sm'
           },
-          { default: () => option.display_name }
+          { default: () => option.label }
         ),
         h(
           NFlex,
           {
-            class: 'ml-auto'
+            class: 'ml-auto',
+            align: 'center'
           },
           {
             default: () => [
-              h(Trash2, {
-                size: 16,
-                class: 'mr-2'
-              }),
-              h(CircleCheck, {
-                size: 16
-              })
+              h(
+                NButton,
+                {
+                  size: 'tiny',
+                  type: 'error',
+                  round: true,
+                  quaternary: true,
+                  onClick: e => {
+                    e.stopPropagation();
+                    callback?.();
+                  }
+                },
+                {
+                  icon: () => {
+                    return h(Trash2, {
+                      size: 16
+                    });
+                  }
+                }
+              )
             ]
           }
         )
       ]
     }
   );
 };
+
+export const RemoveAccountConfirm = defineComponent({
+  name: 'RemoveAccountConfirm',
+  props: {
+    showModal: {
+      type: Boolean,
+      required: true
+    },
+    onConfirm: {
+      type: Function as PropType<() => void>,
+      default: undefined
+    },
+    onCancel: {
+      type: Function as PropType<() => void>,
+      default: undefined
+    }
+  },
+  setup(props) {
+    const { t } = useI18n();
+
+    return () => (
+      <NModal
+        preset="dialog"
+        title={t('Message.RemoveAccount')}
+        content={t('Message.RemoveAccountConfirm')}
+        positiveText={t('Common.Confirm')}
+        negativeText={t('Common.Cancel')}
+        class="rounded-lg"
+        showIcon={false}
+        show={props.showModal}
+        onPositiveClick={props.onConfirm}
+        onNegativeClick={props.onCancel}
+        positiveButtonProps={{ type: 'error', round: true }}
+        negativeButtonProps={{ round: true }}
+      />
+    );
+  }
+});