perf: 优化menu组件逻辑、登陆页面交互样式
This commit is contained in:
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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'),
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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'),
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user