best_yunwei
/
ai_images
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 个人中心隐藏有奖邀请和邀请消费记录，多语言选择改为disable

This commit is contained in:
old burden 2026-03-30 17:21:38 +08:00
parent 55588504a1
commit 33a10f55a5
7 changed files with 201 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
portal-ui/src/layout/components/User.vue
View File

@ -24,11 +24,8 @@
:title="$t('common.myAccount')"> :title="$t('common.myAccount')">
<UserAccount /> <UserAccount />
</a-tab-pane> </a-tab-pane>
<a-tab-pane <!-- 隐藏有奖邀请 -->
key="money" <!-- <a-tab-pane key="money" :title="$t('common.moneyInvite')"><Money /></a-tab-pane> -->
:title="$t('common.moneyInvite')">
<Money />
</a-tab-pane>
<!-- 隐藏快速充值入口 --> <!-- 隐藏快速充值入口 -->
<!-- <a-tab-pane <!-- <a-tab-pane
key="recharge" key="recharge"
@ -40,11 +37,8 @@
:title="$t('common.myProduct')"> :title="$t('common.myProduct')">
<ResumeRecord /> <ResumeRecord />
</a-tab-pane> </a-tab-pane>
<a-tab-pane <!-- 隐藏邀请消费记录 -->
key="invite" <!-- <a-tab-pane key="invite" :title="$t('common.inviteRecord')"><RewardRecord /></a-tab-pane> -->
:title="$t('common.inviteRecord')">
<RewardRecord />
</a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
</mf-dialog> </mf-dialog>
@ -64,12 +58,8 @@
<script> <script>
import Forgot from './Forgot.vue' import Forgot from './Forgot.vue'
import Register from './Register.vue' import Register from './Register.vue'
import { mapGetters } from 'vuex'
import i18n from '@/lang/i18n'
import Money from './Money.vue'
import UserAccount from './UserAccount.vue' import UserAccount from './UserAccount.vue'
import ResumeRecord from './ResumeRecord.vue' import ResumeRecord from './ResumeRecord.vue'
import RewardRecord from './RewardRecord.vue'
export default { export default {
data() { data() {
@ -91,13 +81,8 @@ export default {
components: { components: {
Forgot, Forgot,
Register, Register,
Money,
UserAccount, UserAccount,
ResumeRecord, ResumeRecord
RewardRecord
},
computed: {
...mapGetters(['lang'])
}, },
mounted() { mounted() {
if (this.register) { if (this.register) {
@ -123,12 +108,6 @@ export default {
this.registerVisible = true this.registerVisible = true
this.$emit('cancel') this.$emit('cancel')
}, },
changeLang(value) {
if (value != this.lang) {
this.$store.dispatch('main/setLanguage', value)
i18n.global.locale = value
}
},
back() { back() {
this.forgotVisible = false this.forgotVisible = false
this.$emit('open') this.$emit('open')

24
portal-ui/src/layout/components/appMain.vue
View File

@ -24,6 +24,8 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb.vue' import Breadcrumb from './Breadcrumb.vue'
const LAYOUT_MOBILE_MAX = 768
export default { export default {
name: 'app-main', name: 'app-main',
props: { props: {
@ -33,6 +35,21 @@ export default {
} }
}, },
components: { Breadcrumb }, components: { Breadcrumb },
data() {
return {
layoutWidth:
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
}
},
mounted() {
this._layoutOnResize = () => {
this.layoutWidth = window.innerWidth
}
window.addEventListener('resize', this._layoutOnResize)
},
beforeUnmount() {
window.removeEventListener('resize', this._layoutOnResize)
},
computed: { computed: {
...mapGetters(['cachedViews', 'sidebar']), ...mapGetters(['cachedViews', 'sidebar']),
// 相同路由，不同参数缓存问题 // 相同路由，不同参数缓存问题
@ -43,7 +60,10 @@ export default {
return !this.sidebar.opened return !this.sidebar.opened
}, },
style() { style() {
let sidebarWidth = this.isCollapsed ? '50px' : this.sidebar.width if (this.layoutWidth <= LAYOUT_MOBILE_MAX) {
return { width: '100%' }
}
const sidebarWidth = this.isCollapsed ? '56px' : this.sidebar.width
return { return {
width: `calc(100% - ${sidebarWidth})` width: `calc(100% - ${sidebarWidth})`
} }
@ -70,7 +90,7 @@ export default {
} }
} }
@media (max-width: 576px) { @media (max-width: 768px) {
.app-main { .app-main {
&-wrap { &-wrap {
width: 100% !important; width: 100% !important;

156
portal-ui/src/layout/components/navBar.vue
View File

@ -1,11 +1,23 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<div class="left-menu"> <div class="left-menu">
<mf-icon <button
:class="['left-collapse', { isCollapse: isCollapse }]" type="button"
cursor="pointer" class="sidebar-trigger"
@click="$store.dispatch('main/toggleSideBar')" :aria-expanded="sidebar.opened"
value="icon-shrink" /> aria-label="展开或收起侧栏"
@click="$store.dispatch('main/toggleSideBar')">
<mf-icon
class="sidebar-trigger__icon sidebar-trigger__icon--desktop"
:class="{ isCollapse: isCollapse }"
cursor="pointer"
value="icon-shrink" />
<span class="sidebar-trigger__icon sidebar-trigger__icon--mobile" aria-hidden="true">
<span class="hamburger-line" />
<span class="hamburger-line" />
<span class="hamburger-line" />
</span>
</button>
<div class="logo"> <div class="logo">
<div <div
class="logo-wrap" class="logo-wrap"
@ -31,20 +43,9 @@
</mf-button> </mf-button>
</div> </div>
<div class="right-menu-item language"> <div class="right-menu-item language">
<a-dropdown @select="handleSelect"> <mf-button type="text" disabled class="language-display">
<mf-button type="text"> {{ localeName }}
{{ localeName }} </mf-button>
<icon-down />
</mf-button>
<template #content>
<a-doption
v-for="(name, code) in localeNames"
:key="code"
:value="code">
{{ name }}
</a-doption>
</template>
</a-dropdown>
</div> </div>
<div <div
class="right-menu-item user" class="right-menu-item user"
@ -97,7 +98,7 @@ import { mapGetters, mapState } from 'vuex'
import cloneDeep from 'lodash-es/cloneDeep' import cloneDeep from 'lodash-es/cloneDeep'
import { constantRoutes } from '@/router/index.js' import { constantRoutes } from '@/router/index.js'
import Login from './Login.vue' import Login from './Login.vue'
import i18n, { LOCALE_NAMES } from '@/lang/i18n' import { LOCALE_NAMES } from '@/lang/i18n'
import User from './User.vue' import User from './User.vue'
export default { export default {
@ -126,9 +127,6 @@ export default {
demoEnv() { demoEnv() {
return import.meta.env.MODE === 'demo' return import.meta.env.MODE === 'demo'
}, },
localeNames() {
return LOCALE_NAMES
},
localeName() { localeName() {
return LOCALE_NAMES[this.lang] || 'English' return LOCALE_NAMES[this.lang] || 'English'
}, },
@ -219,12 +217,6 @@ export default {
this.openLogin() this.openLogin()
} }
}, },
handleSelect(value) {
if (value != this.lang) {
this.$store.dispatch('main/setLanguage', value)
i18n.global.locale = value
}
},
logout() { logout() {
this.$store.dispatch('user/logout2').then((_) => { this.$store.dispatch('user/logout2').then((_) => {
this.$router.replace('/') this.$router.replace('/')
@ -246,39 +238,71 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: content-box; box-sizing: content-box;
padding-left: 30px; padding-left: 20px;
padding-right: 30px; padding-right: 30px;
.left { .left-menu {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
padding-left: 4px;
height: 60px;
gap: 8px;
min-width: 0;
&-collapse { .sidebar-trigger {
display: none; display: inline-flex;
transition: 0.25s; align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 8px;
margin: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 10px;
color: rgba(255, 255, 255, 0.92);
&.isCollapse { &:hover {
transform: rotate(-180deg); background: rgba(255, 255, 255, 0.08);
}
&__icon--desktop {
display: flex;
transition: transform 0.25s;
&.isCollapse {
transform: rotate(-180deg);
}
}
&__icon--mobile {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 22px;
padding: 2px 0;
} }
} }
&-menu { .hamburger-line {
padding-left: 8px; display: block;
height: 2px;
width: 100%;
border-radius: 1px;
background: currentColor;
}
.logo {
display: flex; display: flex;
align-items: center; align-items: flex-end;
height: 60px; cursor: pointer;
color: var(--color-text-1);
.logo { &-wrap {
display: flex; display: flex;
align-items: flex-end; align-items: center;
cursor: pointer;
color: var(--color-text-1);
&-wrap {
display: flex;
align-items: center;
}
} }
} }
} }
@ -309,6 +333,12 @@ export default {
background-color: transparent; background-color: transparent;
} }
} }
.language-display[disabled] {
color: #999999 !important;
opacity: 0.85;
cursor: not-allowed;
}
} }
&.logout { &.logout {
@ -410,23 +440,23 @@ export default {
} }
} }
@media (max-width: 576px) { @media (max-width: 768px) {
.navbar { .navbar {
padding: 0 10px; padding: 0 12px;
.left {
&-collapse { .left-menu {
display: block; .sidebar-trigger {
font-size: 18px; &__icon--desktop {
display: none !important;
}
&__icon--mobile {
display: flex !important;
}
} }
&-menu { .logo {
display: flex; display: none;
.logo {
display: none;
}
.mf-icon {
color: #fff;
}
} }
} }

25
portal-ui/src/layout/components/sideBar.vue
View File

@ -124,7 +124,7 @@ export default {
1 100%; 1 100%;
&.collapsed { &.collapsed {
width: 50px !important; width: 56px !important;
overflow: hidden; overflow: hidden;
:deep(.arco-menu) { :deep(.arco-menu) {
@ -134,20 +134,27 @@ export default {
:deep(.arco-menu) { :deep(.arco-menu) {
background-color: transparent; background-color: transparent;
padding-left: 16px; padding: 8px 12px 12px;
&-item { &-item {
width: 180px; min-height: 48px;
line-height: 1.4;
font-size: 15px;
background-color: transparent; background-color: transparent;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
border-radius: 10px; border-radius: 10px;
margin-bottom: 12px; margin-bottom: 10px;
&.arco-menu-selected, &.arco-menu-selected,
&:hover { &:hover {
background-color: rgb(var(--primary-6)); background-color: rgb(var(--primary-6));
} }
} }
&:not(.arco-menu-collapsed) .arco-menu-item {
width: calc(100% - 8px);
max-width: 100%;
}
} }
.toogle-menu { .toogle-menu {
@ -172,18 +179,22 @@ export default {
} }
} }
@media (max-width: 576px) { @media (max-width: 768px) {
.sidebar-container { .sidebar-container {
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 60px; top: 60px;
z-index: 10; z-index: 100;
height: calc(100% - 60px); height: calc(100% - 60px);
overflow: hidden; overflow: hidden;
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
&.collapsed { &.collapsed {
width: 0px !important; width: 0px !important;
min-width: 0 !important;
border-right: 0; border-right: 0;
box-shadow: none;
pointer-events: none;
} }
} }
} }

51
portal-ui/src/layout/default.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="app-wrapper"> <div class="app-wrapper">
<div
v-show="showSidebar && mobileDrawerOpen"
class="sidebar-backdrop"
aria-hidden="true"
@click="closeMobileDrawer" />
<div class="fixed-header"> <div class="fixed-header">
<nav-bar class="nav-bar" /> <nav-bar class="nav-bar" />
</div> </div>
@ -18,6 +23,8 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { sideBar, appMain, navBar, appFooter } from './components' import { sideBar, appMain, navBar, appFooter } from './components'
const LAYOUT_MOBILE_MAX = 768
export default { export default {
name: 'layout', name: 'layout',
components: { components: {
@ -26,16 +33,44 @@ export default {
navBar, navBar,
appFooter appFooter
}, },
data() {
return {
layoutWidth:
typeof window !== 'undefined' ? window.innerWidth : LAYOUT_MOBILE_MAX + 1
}
},
computed: { computed: {
...mapGetters(['sidebar']), ...mapGetters(['sidebar']),
isCollapsed() { isCollapsed() {
return !this.sidebar.opened return !this.sidebar.opened
}, },
isMobileLayout() {
return this.layoutWidth <= LAYOUT_MOBILE_MAX
},
mobileDrawerOpen() {
return this.isMobileLayout && this.sidebar.opened
},
// 是否显示菜单 // 是否显示菜单
showSidebar() { showSidebar() {
let { menu } = this.$route.query || {} let { menu } = this.$route.query || {}
return menu != 0 return menu != 0
} }
},
mounted() {
this._layoutOnResize = () => {
this.layoutWidth = window.innerWidth
}
window.addEventListener('resize', this._layoutOnResize)
},
beforeUnmount() {
window.removeEventListener('resize', this._layoutOnResize)
},
methods: {
closeMobileDrawer() {
if (this.isMobileLayout && this.sidebar.opened) {
this.$store.dispatch('main/closeSideBar')
}
}
} }
} }
</script> </script>
@ -49,6 +84,10 @@ export default {
overflow: hidden; overflow: hidden;
background: #0f0f12; background: #0f0f12;
.sidebar-backdrop {
display: none;
}
.fixed-header { .fixed-header {
z-index: 100; z-index: 100;
.navbar { .navbar {
@ -59,6 +98,18 @@ export default {
.main-wrapper { .main-wrapper {
display: flex; display: flex;
height: calc(100% - 60px); height: calc(100% - 60px);
position: relative;
}
}
@media (max-width: 768px) {
.app-wrapper .sidebar-backdrop {
display: block;
position: fixed;
inset: 60px 0 0 0;
z-index: 99;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
} }
} }
</style> </style>

6
portal-ui/src/store/modules/main.js
View File

@ -16,11 +16,13 @@ const state = {
sidebar: { sidebar: {
opened: isMobile() ? false : true, opened: isMobile() ? false : true,
withoutAnimation: false, withoutAnimation: false,
width: Cookies.get('sidebarWidth') || '230px' // 左侧导航默认适中宽度（用户若需更窄/宽可本地调小范围会写 cookie）
width: Cookies.get('sidebarWidth') || '268px'
}, },
topMenu: Cookies.get('topMenu'), topMenu: Cookies.get('topMenu'),
// 当前语言 // 当前语言
language: Cookies.get('language') || 'en_US', // 多语言切换已禁用：全站固定繁体中文（zh_HK）
language: 'zh_HK',
// 主题 ''：亮色 / dark:暗黑 // 主题 ''：亮色 / dark:暗黑
theme: $storage.get('theme') || '', theme: $storage.get('theme') || '',
// 系统端 // 系统端

13
portal-ui/src/utils/base.js
View File

@ -27,9 +27,12 @@ export const isFirefox = (_) => {
} }
} }
export const isMobile = _=> { export const isMobile = (_) => {
const userAgent = navigator.userAgent; const userAgent = navigator.userAgent
const isMobile = /iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); const uaMobile =
const isSmallScreen = window.innerWidth <= 576; /iPad|Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
return isMobile || isSmallScreen; userAgent
)
const isSmallScreen = typeof window !== 'undefined' && window.innerWidth <= 768
return uaMobile || isSmallScreen
} }