Commit e990e729f4afc3a24ce6d80a791f0e11d58f4f11

Authored by fengwotao
1 parent 2b852e4a

perf(components/GoUserInfo): 覆盖external下的GoUserInfo

  1 +import GoUserInfo from './index.vue';
  2 +
  3 +export { GoUserInfo };
... ...
  1 +<template>
  2 + <n-dropdown trigger="hover" @select="handleSelect" :show-arrow="true" :options="options">
  3 + <div class="user-info-box">
  4 + <person-icon v-if="fallback"></person-icon>
  5 + <n-avatar v-if="!fallback" round object-fit="cover" size="medium" :src="Person" @error="errorHandle"></n-avatar>
  6 + </div>
  7 + </n-dropdown>
  8 +
  9 + <!-- 系统设置 model -->
  10 + <go-system-set v-model:modelShow="modelShow"></go-system-set>
  11 + <!-- 关于软件 model -->
  12 + <go-system-info v-model:modelShow="modelShowInfo"></go-system-info>
  13 +</template>
  14 +
  15 +<script lang="ts" setup>
  16 +import { h, ref, computed } from 'vue'
  17 +import { NAvatar, NText } from 'naive-ui'
  18 +import { renderIcon } from '@/utils'
  19 +import { logout, renderLang } from '@/utils'
  20 +import { GoSystemSet } from '@/components/GoSystemSet/index'
  21 +import { GoSystemInfo } from '@/components/GoSystemInfo/index'
  22 +import Person from './person.png'
  23 +import { icon } from '@/plugins'
  24 +import { useUserStore } from '@/store/external/modules/user'
  25 +import { useSyncRemote } from '@/views/chart/hooks/external/useRemote.hook'
  26 +const { ChatboxEllipsesIcon, PersonIcon, LogOutOutlineIcon, SettingsSharpIcon } = icon.ionicons5
  27 +
  28 +const t = window['$t']
  29 +
  30 +const { dataSyncUpdate } = useSyncRemote()
  31 +
  32 +const modelShowInfo = ref(false)
  33 +const modelShow = ref(false)
  34 +
  35 +// 是否失败
  36 +const fallback = ref(false)
  37 +
  38 +// 用户图标渲染
  39 +const renderUserInfo = () => {
  40 + const userStoreOverride = useUserStore()
  41 + const { username, avatar } = userStoreOverride.getUserInfo
  42 + console.log(userStoreOverride.getUserInfo)
  43 + return h(
  44 + 'div',
  45 + {
  46 + style: 'display: flex; align-items: center; padding: 8px 12px;'
  47 + },
  48 + [
  49 + h(NAvatar, {
  50 + round: true,
  51 + style: 'margin-right: 12px;',
  52 + src: Person
  53 + }),
  54 + h('div', null, [
  55 + h('div', null, [
  56 + h('div', null, [
  57 + h('div', null, [h(NText, { depth: 2 }, { default: () => (!username ? 'ThingsKit' : username) })])
  58 + ])
  59 + ])
  60 + ])
  61 + ]
  62 + )
  63 +}
  64 +const options = ref([
  65 + {
  66 + label: '我的信息',
  67 + key: 'info',
  68 + type: 'render',
  69 + render: renderUserInfo
  70 + },
  71 + {
  72 + type: 'divider',
  73 + key: 'd1'
  74 + },
  75 + {
  76 + label: renderLang('global.sys_set'),
  77 + key: 'sysSet',
  78 + icon: renderIcon(SettingsSharpIcon)
  79 + },
  80 + // THINGS_KIT 隐藏关于软件
  81 + // {
  82 + // label: renderLang('global.contact'),
  83 + // key: 'contact',
  84 + // icon: renderIcon(ChatboxEllipsesIcon)
  85 + // },
  86 + {
  87 + type: 'divider',
  88 + key: 'd3'
  89 + },
  90 + {
  91 + label: '关闭并退出',
  92 + key: 'closePage',
  93 + icon: renderIcon(LogOutOutlineIcon)
  94 + }
  95 + // {
  96 + // label: renderLang('global.logout'),
  97 + // key: 'logout',
  98 + // icon: renderIcon(LogOutOutlineIcon)
  99 + // }
  100 +])
  101 +
  102 +// 图片渲染错误
  103 +const errorHandle = (e: Event) => {
  104 + fallback.value = true
  105 +}
  106 +
  107 +// 系统设置
  108 +const sysSetHandle = () => {
  109 + modelShow.value = true
  110 +}
  111 +
  112 +// 系统设置
  113 +const sysInfoHandle = () => {
  114 + modelShowInfo.value = true
  115 +}
  116 +
  117 +// THINGS_KIT 修改退出登录
  118 +const userStore = useUserStore()
  119 +const handleSelect = (key: string) => {
  120 + switch (key) {
  121 + case 'contact':
  122 + sysInfoHandle()
  123 + break
  124 + case 'sysSet':
  125 + sysSetHandle()
  126 + break
  127 + case 'closePage':
  128 + handleClosePage()
  129 + break
  130 + case 'logout':
  131 + // THINGS_KIT 修改退出登录
  132 + userStore.logout(true)
  133 + // logout()
  134 + break
  135 + }
  136 +}
  137 +
  138 +const handleClosePage = () => {
  139 + //先保存当前页面数据
  140 + dataSyncUpdate()
  141 + //兼容Firefox Chrome
  142 + var userAgent = navigator.userAgent
  143 + if (userAgent.indexOf('Firefox') != -1 || userAgent.indexOf('Chrome') != -1) {
  144 + window.location.href = 'about:blank'
  145 + window.close()
  146 + } else {
  147 + window.opener = null
  148 + window.open('', '_self')
  149 + window.close()
  150 + }
  151 +}
  152 +</script>
  153 +
  154 +<style lang="scss" scoped>
  155 +.user-info-box {
  156 + cursor: pointer;
  157 + transform: scale(0.7);
  158 +}
  159 +</style>
... ...
... ... @@ -17,5 +17,10 @@
17 17 </template>
18 18 <script setup lang="ts">
19 19 import { LayoutHeader } from '@/layout/components/LayoutHeader'
20   -import { GoUserInfo } from '@/components/GoUserInfo'
  20 +/**
  21 + * THINGS_KIT 升级版本这里有冲突
  22 + * 源文件 '@/components/GoUserInfo'
  23 + * 修改后 '@/components/external/GoUserInfo'
  24 + */
  25 +import { GoUserInfo } from '@/components/external/GoUserInfo'
21 26 </script>
... ...