Skip to content

fix: add user info to app-center #1734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hexqi merged 5 commits into from
Jan 9, 2026
Merged

fix: add user info to app-center #1734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e4e8f49
fix: add user info to app-center
xuanlid Jan 8, 2026
e759ee7
fix: add a default tenant in the login state
xuanlid Jan 8, 2026
2877e00
fix: token is not changed when tenant is changed
xuanlid Jan 8, 2026
0758e28
Merge remote-tracking branch 'open/develop' into fix/template-tenant
xuanlid Jan 8, 2026
0c11bb9
fix: add a default tenant in the login state
xuanlid Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions packages/design-core/assets/log-out.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/design-core/assets/organize.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
172 changes: 167 additions & 5 deletions packages/layout/src/DesignWorkspace.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,50 @@
class="icon-arrow-left"
@click="$emit('backToDesigner', '')"
></tiny-icon-arrow-left>
<svg-icon name="template-logo"></svg-icon>
<svg-icon class="logo-icon" name="template-logo"></svg-icon>
<span>TinyEngine</span>
</div>
<div class="user-wrapper">
<tiny-popover :visible-arrow="false" width="150" trigger="click">
<template #reference>
<div class="tenant-wrapper">
<span>{{ tenantValue.label }}</span>
<svg-icon class="expand-icon" name="down-arrow"></svg-icon>
</div>
</template>
<div class="dropdown-menu__items">
<div class="tenant-title">选择组织</div>
<div v-if="tenantList.length">
<div
class="dropdown-menu__item"
:class="{ 'active-menu': item.id === tenantValue?.id }"
v-for="item in tenantList"
:key="item.id"
@click="changeTenant(item.id)"
>
<svg-icon class="tenant-icon" name="organize"></svg-icon>
<span>{{ item.label }}</span>
</div>
</div>
<div class="empty" v-else>暂无相关数据</div>
</div>
</tiny-popover>
<tiny-popover :visible-arrow="false" width="150" trigger="click">
<template #reference>
<div>
<svg-icon class="user-icon" name="default-user"></svg-icon>
</div>
</template>
<div class="user-name">
<svg-icon class="user-icon" name="default-user"></svg-icon>{{ userInfo.username }}
</div>
<div class="divider"></div>
<div class="user-out" @click="logOut">
<svg-icon class="out-icon" name="log-out"></svg-icon>
退出登录
</div>
</tiny-popover>
</div>
</div>
<div class="manager-index">
<div class="manager-menu">
Expand All @@ -28,11 +69,14 @@
</template>

<script>
import { ref } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { iconArrowLeft } from '@opentiny/vue-icon'
import { getMetaApi, META_SERVICE, getMergeMeta } from '@opentiny/tiny-engine-meta-register'
import { Popover } from '@opentiny/vue'

export default {
components: {
TinyPopover: Popover,
TinyIconArrowLeft: iconArrowLeft()
},
props: {
Expand All @@ -51,13 +95,60 @@ export default {
props.workspaceRegistry.find((item) => item.id === props.currentPageId) || props.workspaceRegistry[0]
)

const enableLogin = getMergeMeta('engine.config')?.enableLogin
const { getUserInfo, setNeedToLogin, getBaseInfo } = getMetaApi(META_SERVICE.GlobalService)

const userInfo = computed(() => getUserInfo())
const tenantList = computed(() => {
const info = getUserInfo()

return Array.isArray(info?.tenant)
? info.tenant?.map((item) => {
return {
...item,
label: item.nameEn
}
})
: []
})
const tenantValue = computed(() =>
enableLogin
? tenantList.value.find((item) => item.id === getBaseInfo().tenantId) || tenantList.value[0]
: { ...getBaseInfo(), label: 'Public' }
)

const changeTenant = (id) => {
const baseUrl = `${window.location.origin}${window.location.pathname}?type=app&`
window.location.href = `${baseUrl}tenant=${id}`
}

const logOut = () => {
localStorage.removeItem('engineToken')
setNeedToLogin(true)
}
const handleMenuClick = (menu) => {
activeNode.value = menu
}

onMounted(() => {
if (enableLogin) {
const tenantId = getBaseInfo().tenantId || tenantList.value[0].id
const url = new URL(window.location.href)
if (!url.searchParams.has('tenant')) {
url.searchParams.append('tenant', tenantId)
window.history.replaceState({}, '', url.toString())
}
}
})

return {
activeNode,
handleMenuClick
tenantValue,
userInfo,
tenantList,
handleMenuClick,
changeTenant,
logOut
}
}
}
Expand All @@ -74,13 +165,13 @@ export default {
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--te-common-border-bg-divider);
padding: 0 24px;
padding: 0 32px;
.icon-arrow-left {
font-size: 28px;
padding-right: 10px;
cursor: pointer;
}
.svg-icon {
.logo-icon {
font-size: 28px;
padding-right: 8px;
}
Expand All @@ -89,6 +180,22 @@ export default {
font-size: 14px;
font-weight: 500;
}
.user-wrapper {
display: flex;
align-items: center;
gap: 12px;
.tenant-wrapper {
display: flex;
align-items: center;
gap: 4px;
.expand-icon {
font-size: 16px;
}
}
.user-icon {
font-size: 32px;
}
}
}
.manager-index {
display: flex;
Expand Down Expand Up @@ -130,4 +237,59 @@ export default {
background: var(--te-common-bg-container);
}
}
.user-name {
color: var(--te-layout-common-text-color-weaken);
.user-icon {
margin-right: 6px;
font-size: 20px;
}
}
.divider {
width: 100%;
height: 1px;
background: var(--te-layout-common-border-color);
margin: 8px 0;
}
.user-out {
display: flex;
align-items: center;
font-size: 12px;
padding: 4px 16px;
margin: 0 -16px;
cursor: pointer;
.out-icon {
margin-right: 6px;
}
&:hover {
background: var(--te-layout-workspace-dropdown-bg-color-hover);
}
}
.dropdown-menu__items {
.tenant-title {
font-size: 14px;
line-height: 16px;
margin-bottom: 14px;
color: var(--te-layout-common-text-color-secondary);
}
.dropdown-menu__item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 16px;
margin: 0 -16px;
line-height: 16px;
.tenant-icon {
font-size: 20px;
}
&:hover {
background: var(--te-layout-workspace-dropdown-bg-color-hover);
}
}
.empty {
color: var(--te-layout-common-text-color-weaken);
}
.active-menu {
background: var(--te-layout-workspace-dropdown-bg-color-active);
}
}
</style>
4 changes: 4 additions & 0 deletions packages/layout/src/styles/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@
--te-layout-common-text-color-secondary-checked: var(--te-common-text-checked);
--te-layout-common-text-color: var(--te-common-text-primary);
--te-layout-common-text-color-secondary: var(--te-common-text-secondary);
--te-layout-common-text-color-weaken: var(--te-common-text-weaken);
--te-layout-common-text-color-hover: var(--te-common-text-primary);
--te-layout-common-text-color-active: var(--te-common-text-primary);
--te-layout-common-icon-color-primary: var(--te-common-icon-primary);
--te-layout-common-icon-color: var(--te-common-icon-secondary);
--te-layout-common-icon-bg-color-hover: var(--te-common-bg-disabled);

--te-layout-panel-active-color: var(--te-common-bg-primary-checked);

--te-layout-workspace-dropdown-bg-color-hover: var(--te-common-bg-container);
--te-layout-workspace-dropdown-bg-color-active: var(--te-common-bg-container);
}
12 changes: 4 additions & 8 deletions packages/toolbars/user/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<script lang="ts">
import { reactive, computed } from 'vue'
import type { Component } from 'vue'
import { Popover, Select, Input} from '@opentiny/vue'
import { Popover, Select, Input } from '@opentiny/vue'
import { getMetaApi, META_SERVICE, useModal } from '@opentiny/tiny-engine-meta-register'

export default {
Expand All @@ -59,7 +59,7 @@ export default {
}
},
setup() {
const { getUserInfo, fetchUserInfo, setUserInfo, setTenantInfo, setNeedToLogin, getBaseInfo } = getMetaApi(
const { getUserInfo, fetchUserInfo, setUserInfo, setNeedToLogin, getBaseInfo } = getMetaApi(
META_SERVICE.GlobalService
)
const state = reactive({
Expand Down Expand Up @@ -116,12 +116,8 @@ export default {
}

const changeTenant = (id) => {
setTenantInfo(id).then((tenantData) => {
setUserInfo(tenantData)
localStorage.setItem('engineToken', tenantData.token)
const baseUrl = `${window.location.origin}${window.location.pathname}?type=app&`
window.location.href = `${baseUrl}tenant=${id}`
})
const baseUrl = `${window.location.origin}${window.location.pathname}?type=app&`
window.location.href = `${baseUrl}tenant=${id}`
}

return {
Expand Down