style:菜单中英文适配

besure_bit
黄伟杰 2 weeks ago
parent 14ae8b6534
commit f81e94ea2b

@ -37,7 +37,7 @@
<!-- <view class="module-icon" :style="{ background: getModuleColor(moduleIndex) }"> <!-- <view class="module-icon" :style="{ background: getModuleColor(moduleIndex) }">
<text class="icon-text">{{ getMenuSymbol(module.name, moduleIndex) }}</text> <text class="icon-text">{{ getMenuSymbol(module.name, moduleIndex) }}</text>
</view> --> </view> -->
<text class="module-title">{{ translateLiteral(module.name) }}</text> <text class="module-title">{{ getDisplayName(module) }}</text>
</view> </view>
<view class="function-grid"> <view class="function-grid">
@ -60,9 +60,9 @@
size="24" size="24"
:color="getModuleColor(moduleIndex)" :color="getModuleColor(moduleIndex)"
></u-icon> ></u-icon>
<text v-else class="icon-inner">{{ getMenuSymbol(entry.name, entryIndex) }}</text> <text v-else class="icon-inner">{{ getMenuSymbol(getDisplayName(entry), entryIndex) }}</text>
</view> </view>
<text class="function-name">{{ translateLiteral(entry.name) }}</text> <text class="function-name">{{ getDisplayName(entry) }}</text>
</view> </view>
</view> </view>
</view> </view>
@ -77,10 +77,10 @@
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import AppEmptyState from '@/components/common/AppEmptyState.vue' import AppEmptyState from '@/components/common/AppEmptyState.vue'
import { translateLiteral } from '@/locales'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { buildPageModules, findTabMenuByPage, getMenuSymbol, getModuleColor, resolveMenuUrl } from '@/utils/permissionMenu' import { buildPageModules, findTabMenuByPage, getLocalizedMenuName, getMenuSymbol, getModuleColor, resolveMenuUrl } from '@/utils/permissionMenu'
const props = defineProps({ const props = defineProps({
pagePath: { pagePath: {
@ -118,6 +118,7 @@ const props = defineProps({
}) })
const userStore = useUserStore() const userStore = useUserStore()
const { locale } = useI18n()
const menuSearchKeyword = ref('') const menuSearchKeyword = ref('')
const scrollTop = ref(0) const scrollTop = ref(0)
const currentScrollTop = ref(0) const currentScrollTop = ref(0)
@ -138,11 +139,11 @@ const filteredModules = computed(() => {
.map((module) => ({ .map((module) => ({
...module, ...module,
children: (module.children || []).filter((entry) => { children: (module.children || []).filter((entry) => {
const target = `${module.name}|${entry.name}`.toLowerCase() const target = `${getDisplayName(module)}|${getDisplayName(entry)}`.toLowerCase()
return target.includes(keyword) return target.includes(keyword)
}) })
})) }))
.filter((module) => (module.children || []).length > 0 || String(module.name || '').toLowerCase().includes(keyword)) .filter((module) => (module.children || []).length > 0 || getDisplayName(module).toLowerCase().includes(keyword))
}) })
const hasMenuPermission = computed(() => modules.value.length > 0) const hasMenuPermission = computed(() => modules.value.length > 0)
@ -209,16 +210,22 @@ function getUviewIconName(icon) {
return String(icon || '').replace(/^uview-plus:/, '').trim() return String(icon || '').replace(/^uview-plus:/, '').trim()
} }
function getDisplayName(menu) {
locale.value
return getLocalizedMenuName(menu)
}
function handleClick(menu) { function handleClick(menu) {
const url = resolveMenuUrl(menu) const url = resolveMenuUrl(menu)
console.log('[PermissionMenu] 点击菜单:', menu?.name, '| _splitKey:', menu?._splitKey, '| 路由:', url) const displayName = getDisplayName(menu)
console.log('[PermissionMenu] 点击菜单:', displayName, '| _splitKey:', menu?._splitKey, '| 路由:', url)
if (url) { if (url) {
uni.navigateTo({ url }) uni.navigateTo({ url })
return return
} }
uni.showToast({ uni.showToast({
title: `暂未配置${menu?.name || '该菜单'}页面`, title: `暂未配置${displayName || '该菜单'}页面`,
icon: 'none' icon: 'none'
}) })
} }

@ -25,9 +25,8 @@
import { ref, computed, onMounted, onUnmounted, watch } from 'vue' import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { getTabBarMenus } from '@/utils/permissionMenu' import { getLocalizedMenuName, getTabBarMenus } from '@/utils/permissionMenu'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { translateLiteral } from '@/locales'
const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change' const TABBAR_VISIBILITY_EVENT = 'tabbar-visibility-change'
@ -87,7 +86,7 @@ function resolveTabIconMeta(menu) {
function createTabItem(menu) { function createTabItem(menu) {
const iconMeta = resolveTabIconMeta(menu) const iconMeta = resolveTabIconMeta(menu)
return { return {
text: translateLiteral(String(menu.name || menu.enName || '').trim()), text: getLocalizedMenuName(menu),
icon: iconMeta.icon, icon: iconMeta.icon,
selectedIcon: iconMeta.selectedIcon, selectedIcon: iconMeta.selectedIcon,
iconType: iconMeta.iconType, iconType: iconMeta.iconType,

@ -178,7 +178,7 @@ function dialogClose() {
.server-address-text { .server-address-text {
max-width: 400rpx; max-width: 400rpx;
text-align: right; // text-align: right;
word-break: break-all; word-break: break-all;
} }
</style> </style>

@ -1,3 +1,4 @@
import { getCurrentLocale } from '@/locales'
const DIRECT_ROUTE_PREFIXES = ['pages/', 'page_', 'pages_'] const DIRECT_ROUTE_PREFIXES = ['pages/', 'page_', 'pages_']
@ -191,7 +192,7 @@ export function getConfigurableNavMenus(menus) {
export function buildNavMenuViewModels(menus) { export function buildNavMenuViewModels(menus) {
return getConfigurableNavMenus(menus).map((menu, index) => { return getConfigurableNavMenus(menus).map((menu, index) => {
const displayName = String(menu.name || menu.enName || '').trim() || `菜单${index + 1}` const displayName = getLocalizedMenuName(menu, `菜单${index + 1}`)
return { return {
...menu, ...menu,
displayName, displayName,
@ -334,13 +335,22 @@ export function getMenuSymbol(name, index) {
return MENU_SYMBOLS[index % MENU_SYMBOLS.length] return MENU_SYMBOLS[index % MENU_SYMBOLS.length]
} }
export function getLocalizedMenuName(menu, fallback = '') {
const name = String(menu?.name || '').trim()
const enName = String(menu?.enName || '').trim()
if (getCurrentLocale() === 'en-US') {
return enName || name || fallback
}
return name || enName || fallback
}
export function syncTabBarMenus(menus, options = {}) { export function syncTabBarMenus(menus, options = {}) {
const reportMenu = findTabMenuByPage(menus, 'pages/report') const reportMenu = findTabMenuByPage(menus, 'pages/report')
const workMenu = findTabMenuByPage(menus, 'pages/work') const workMenu = findTabMenuByPage(menus, 'pages/work')
return [ return [
options.homeText || '首页', options.homeText || '首页',
reportMenu?.name || options.reportFallback || '报表', getLocalizedMenuName(reportMenu, options.reportFallback || '报表'),
workMenu?.name || reportMenu?.name || options.workFallback || '管理', getLocalizedMenuName(workMenu, getLocalizedMenuName(reportMenu, options.workFallback || '管理')),
options.mineText || '我的' options.mineText || '我的'
] ]
} }

Loading…
Cancel
Save