perf: 优化menu组件逻辑、登陆页面交互样式

This commit is contained in:
rd
2025-07-04 14:49:36 +08:00
parent 1d52fda0cd
commit 6e590dbb04
7 changed files with 55 additions and 34 deletions

View File

@ -146,7 +146,7 @@ export default defineComponent({
} }
.arco-menu-title { .arco-menu-title {
color: var(--Text-2, #3c4043); color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular'; font-family: 'PuHuiTi-Medium';
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

View File

@ -9,6 +9,7 @@ import { MENU_GROUP_IDS } from '@/router/constants';
import router from '@/router'; import router from '@/router';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue'; import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
import { appRoutes } from '@/router/routes';
interface MenuItem { interface MenuItem {
name: string; name: string;
@ -56,21 +57,31 @@ const handleSelect = (index: any) => {
} }
}; };
const flattenRoutes = (routes: any, parentPath = ''): any[] => {
let result: any[] = [];
for (const route of routes) {
const fullPath = route.path.startsWith('/') ? route.path : parentPath.replace(/\/$/, '') + '/' + route.path;
if (route.children && route.children.length) {
result = result.concat(flattenRoutes(route.children, fullPath));
} else {
result.push({ ...route, fullPath });
}
}
return result;
};
const handleDopdownClick = (index: any, ind: any) => { const handleDopdownClick = (index: any, ind: any) => {
const { children } = lists.value[index]; const { children } = lists.value[index];
const indPath = children[ind] as any; const indPath = children[ind];
if (indPath.name === '行业热门话题洞察') {
router.push('/dataEngine/hotTranslation'); const allChildren = flattenRoutes(appRoutes);
} else if (indPath.name === '行业词云') {
router.push('/dataEngine/hotCloud'); const target = allChildren.find((item) => item.meta && item.meta.menuId === indPath.id);
} else if (indPath.name === '行业关键词动向') {
router.push('/dataEngine/keyWord'); if (target) {
} else if (indPath.name === '用户痛点观察') { router.push(target.fullPath);
router.push('/dataEngine/userPainPoints'); } else {
} else if (indPath.name === '重点品牌动向') { console.warn('未找到对应的菜单路由', indPath.id);
router.push('/dataEngine/keyBrandMovement');
} else if (indPath.name === '用户画像') {
router.push('/dataEngine/userPersona');
} }
}; };
</script> </script>

View File

@ -27,7 +27,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '行业热门话题洞察', locale: '行业热门话题洞察',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 2, menuId: 2,
}, },
component: () => import('@/views/components/dataEngine/hotTranslation.vue'), component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
}, },
@ -38,7 +38,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '行业词云', locale: '行业词云',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 3, menuId: 3,
}, },
component: () => import('@/views/components/dataEngine/hotCloud.vue'), component: () => import('@/views/components/dataEngine/hotCloud.vue'),
}, },
@ -49,7 +49,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '行业关键词动向', locale: '行业关键词动向',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 4, menuId: 4,
}, },
component: () => import('@/views/components/dataEngine/keyWord.vue'), component: () => import('@/views/components/dataEngine/keyWord.vue'),
}, },
@ -60,7 +60,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '用户痛点观察', locale: '用户痛点观察',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 5, menuId: 5,
}, },
component: () => import('@/views/components/dataEngine/userPainPoints.vue'), component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
}, },
@ -71,7 +71,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '重点品牌动向', locale: '重点品牌动向',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 6, menuId: 6,
}, },
component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'), component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
}, },
@ -82,7 +82,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '用户画像', locale: '用户画像',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
id: 7, menuId: 7,
}, },
component: () => import('@/views/components/dataEngine/userPersona.vue'), component: () => import('@/views/components/dataEngine/userPersona.vue'),
}, },

View File

@ -27,6 +27,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '品牌信息', locale: '品牌信息',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
menuId: 11,
}, },
component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'), component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
}, },
@ -52,6 +53,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '账号管理', locale: '账号管理',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
menuId: 12,
}, },
component: () => import('@/views/property-marketing/media-account/account-manage'), component: () => import('@/views/property-marketing/media-account/account-manage'),
}, },
@ -99,6 +101,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '账户管理', locale: '账户管理',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
menuId: 13,
}, },
component: () => import('@/views/property-marketing/put-account/account-manage'), component: () => import('@/views/property-marketing/put-account/account-manage'),
}, },
@ -154,6 +157,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
locale: '业务洞察报告', locale: '业务洞察报告',
requiresAuth: true, requiresAuth: true,
roles: ['*'], roles: ['*'],
menuId: 14,
}, },
component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'), component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
}, },

View File

@ -239,16 +239,10 @@ const getCode = async () => {
// 先重置验证状态 // 先重置验证状态
formRef.value.clearValidate('mobile'); formRef.value.clearValidate('mobile');
// 验证手机号字段 const result = await formRef.value.validateField('mobile');
try { // 只有当验证通过时才会显示滑块验证
const result = await formRef.value.validateField('mobile'); if (result === true || result === undefined) {
// 只有当验证通过时才会显示滑块验证 isVerificationVisible.value = true;
if (result === true || result === undefined) {
isVerificationVisible.value = true;
}
} catch (error) {
// 验证失败,错误信息会自动显示
console.log('手机号验证失败:', error);
} }
}; };
@ -261,7 +255,6 @@ const handleVerificationSubmit = async () => {
await fetchLoginCaptCha({ mobile: loginForm.mobile }); await fetchLoginCaptCha({ mobile: loginForm.mobile });
AMessage.success('验证码发送成功'); AMessage.success('验证码发送成功');
} catch (error) { } catch (error) {
AMessage.error('验证码发送失败');
// 重置倒计时 // 重置倒计时
countdown.value = 0; countdown.value = 0;
clearInterval(timer.value); clearInterval(timer.value);

View File

@ -1,4 +1,19 @@
.login-wrap { .login-wrap {
.arco-input-wrapper,
.arco-select-view-single,
.arco-textarea-wrapper,
.arco-picker,
.arco-select-view-multiple {
border-radius: 4px;
border-color: #d7d7d9 !important;
background-color: #fff !important;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
// border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
.login-bg { .login-bg {
position: fixed; position: fixed;
left: 0; left: 0;
@ -38,8 +53,6 @@
} }
} }
.account-bind-container { .account-bind-container {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;

View File

@ -8,7 +8,7 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
display: inline-flex; display: inline-flex;
margin: 10px; // margin: 10px;
.arco-tabs { .arco-tabs {
margin-bottom: 10px; margin-bottom: 10px;