Merge pull request '重构产品路由权限模块逻辑' (#2) from feature/v1.3_营销资产中台 into main
Reviewed-on: ai-team/lingji-work-fe#2
This commit is contained in:
@ -21,7 +21,7 @@ export function configAutoImport() {
|
||||
'@vueuse/core',
|
||||
{
|
||||
dayjs: [['default', 'dayjs']],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'isNumber'],
|
||||
'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'uniq', 'isNumber', 'uniqBy', 'isEmpty'],
|
||||
'@/hooks': ['useModal'],
|
||||
},
|
||||
],
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"dayjs": "^1.11.7",
|
||||
"echarts": "^5.6.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jspdf": "^3.0.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
|
||||
13
src/App.vue
13
src/App.vue
@ -7,7 +7,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
import { getUserEnterpriseInfo } from '@/utils/user';
|
||||
|
||||
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const redTheme = {
|
||||
@ -16,11 +20,14 @@ const redTheme = {
|
||||
colorLink: '#f5222d', // 链接色
|
||||
},
|
||||
};
|
||||
// 初始化企业信息
|
||||
|
||||
const init = async () => {
|
||||
const { isLogin, getUserInfo } = userStore;
|
||||
|
||||
const init = () => {
|
||||
const { isLogin, fetchUserInfo } = userStore;
|
||||
if (isLogin) {
|
||||
fetchUserInfo();
|
||||
await getUserInfo(); // 初始化用户信息
|
||||
await getUserEnterpriseInfo();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -140,6 +140,11 @@ export const fetchImageUploadFile = (params: any) => {
|
||||
return Http.get(`/v1/oss/image-pre-signed-url`, params);
|
||||
};
|
||||
|
||||
// 获取预上传文件后缀
|
||||
export const fetchUploadFile = (params: any) => {
|
||||
return Http.get(`/v1/oss/file-pre-signed-url`, params);
|
||||
};
|
||||
|
||||
// 移除企业子账号
|
||||
export const removeEnterpriseAccount = (userId: number) => {
|
||||
return Http.delete(`/v1/enterprises/users/${userId}`);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-17 11:58:44
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2025-07-05 17:59:59
|
||||
* @LastEditors: rd 1344903914@qq.com
|
||||
* @LastEditTime: 2025-07-08 14:50:57
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
@ -42,13 +42,12 @@ export class Request {
|
||||
this.instance.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
const store = useEnterpriseStore(pinia);
|
||||
const enterprise = store.getEnterpriseInfo();
|
||||
|
||||
const token = localStorage.getItem('accessToken') as string;
|
||||
config.headers!.Authorization = token;
|
||||
|
||||
if (enterprise) {
|
||||
config.headers!['enterprise-id'] = enterprise.id;
|
||||
if (store.enterpriseInfo) {
|
||||
config.headers!['enterprise-id'] = store.enterpriseInfo.id;
|
||||
}
|
||||
|
||||
return config;
|
||||
|
||||
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.woff2
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.woff2
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.woff2
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.woff2
Normal file
Binary file not shown.
@ -67,7 +67,8 @@ export default defineComponent({
|
||||
};
|
||||
listenerRouteChange((newRoute) => {
|
||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
||||
if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
// if (requiresAuth && (!hideInMenu || activeMenu)) {
|
||||
if (!hideInMenu || activeMenu) {
|
||||
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
||||
openKeys.value = [...keySet];
|
||||
|
||||
@ -12,7 +12,7 @@ export default function useMenuTree() {
|
||||
// const appStore = useAppStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
const appRoute = computed(() => {
|
||||
const _filterRoutes = appRoutes.filter((v) => v.meta.id === sidebarStore.activeMenuId);
|
||||
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
|
||||
return _filterRoutes;
|
||||
});
|
||||
const menuTree = computed(() => {
|
||||
|
||||
@ -1,88 +1,42 @@
|
||||
<script lang="ts" setup>
|
||||
<script setup>
|
||||
import { useAppStore } from '@/stores';
|
||||
import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
||||
import { fetchMenusTree } from '@/api/all';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
import { fetchLogOut } from '@/api/all/login';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
||||
// import { handleUserLogout } from '@/utils/user';
|
||||
// import { fetchLogOut } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
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 { appRoutes } from '@/router/routes';
|
||||
// import { appRoutes } from '@/router/routes';
|
||||
// import { MENU_LIST } from './constants';
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
id: number;
|
||||
children: Array<{
|
||||
name: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
const lists = ref<MenuItem[]>([]);
|
||||
const sidebarStore = useSidebarStore();
|
||||
const route = useRoute();
|
||||
// const enterpriseStore = useEnterpriseStore();
|
||||
// const route = useRoute();
|
||||
const exitAccountModalRef = ref(null);
|
||||
// const selectedKey = ref([]);
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
// 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
|
||||
if (route.name === 'Home' || route.path === '/') {
|
||||
return [`${MENU_GROUP_IDS.WORK_BENCH_ID}`];
|
||||
}
|
||||
// 其他页面，activeMenuId 作为 key
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
|
||||
const clickExit = async () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const getMenus = async () => {
|
||||
const res = await fetchMenusTree();
|
||||
if (res.code === 200) {
|
||||
lists.value = res.data;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getMenus();
|
||||
});
|
||||
const appStore = useAppStore();
|
||||
|
||||
// const appStore = useAppStore();
|
||||
|
||||
const setServerMenu = () => {
|
||||
router.push('/management/person');
|
||||
};
|
||||
const handleSelect = (index: any) => {
|
||||
if (index === 0) {
|
||||
router.push('/');
|
||||
} else {
|
||||
router.push('/dataEngine/hotTranslation');
|
||||
}
|
||||
};
|
||||
|
||||
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 { children } = lists.value[index];
|
||||
const indPath = children[ind];
|
||||
|
||||
const allChildren = flattenRoutes(appRoutes);
|
||||
|
||||
const target = allChildren.find((item) => item.meta && item.meta.menuId === indPath.id);
|
||||
|
||||
if (target) {
|
||||
router.push(target.fullPath);
|
||||
} else {
|
||||
console.warn('未找到对应的菜单路由', indPath.id);
|
||||
}
|
||||
const handleDopdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -95,26 +49,26 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
</div>
|
||||
<div class="center-side">
|
||||
<div class="menu-demo h-100%">
|
||||
<a-menu
|
||||
mode="horizontal"
|
||||
:selected-keys="selectedKey"
|
||||
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
|
||||
>
|
||||
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
|
||||
<span class="menu-item-text">工作台</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
|
||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||
<template v-if="item.children">
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button>
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
|
||||
<span class="menu-item-text"> {{ item.name }}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
|
||||
@ -75,7 +75,6 @@ let previousFileListLength = 0;
|
||||
//删除图片
|
||||
const onChange = (fileList) => {
|
||||
if (fileList.length < previousFileListLength) {
|
||||
// 在这里执行你需要的操作
|
||||
if (props.limit === 1) {
|
||||
if (fileList.length === 0) {
|
||||
emit('update:modelValue', '');
|
||||
@ -90,7 +89,6 @@ const onChange = (fileList) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 更新上一次的文件列表长度
|
||||
previousFileListLength = fileList.length;
|
||||
};
|
||||
|
||||
|
||||
10
src/permission/permission.ts
Normal file
10
src/permission/permission.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
export function checkRoutePermission(routeName: string) {
|
||||
const userStore = useUserStore();
|
||||
const allowAccessRoutes = userStore.allowAccessRoutes;
|
||||
|
||||
if (!routeName) return false;
|
||||
|
||||
return allowAccessRoutes.includes(routeName);
|
||||
}
|
||||
@ -5,6 +5,8 @@
|
||||
import type { Router } from 'vue-router';
|
||||
import NProgress from 'nprogress';
|
||||
import { goUserLogin } from '@/utils/user';
|
||||
// import router from '@/router';
|
||||
import { checkRoutePermission } from '@/permission/permission';
|
||||
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
|
||||
@ -13,15 +15,27 @@ export default function setupUserLoginInfoGuard(router: Router) {
|
||||
NProgress.start();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const routeName = to?.name as string;
|
||||
const requiresAuth = to?.meta?.requiresAuth || false;
|
||||
const isLogin = !!userStore.isLogin;
|
||||
const requireLogin = to?.meta?.requireLogin || false;
|
||||
|
||||
if (requiresAuth && !isLogin) {
|
||||
if (requireLogin && !userStore.isLogin) {
|
||||
goUserLogin();
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
if (requiresAuth) {
|
||||
const hasPermission = checkRoutePermission(routeName);
|
||||
if (!hasPermission) {
|
||||
AMessage.error('您没有权限访问该页面');
|
||||
next('/');
|
||||
return;
|
||||
}
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
router.afterEach((to) => {
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { appRoutes } from './routes';
|
||||
import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
|
||||
import { NOT_FOUND_ROUTE } from './routes/base';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
import { MENU_GROUP_IDS } from './constants';
|
||||
import createRouteGuard from './guard';
|
||||
|
||||
NProgress.configure({ showSpinner: false }); // NProgress Configuration
|
||||
// console.log({ appRoutes });
|
||||
const router = createRouter({
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
@ -21,6 +21,7 @@ const router = createRouter({
|
||||
component: () => import('@/views/components/login'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -29,27 +30,31 @@ const router = createRouter({
|
||||
component: () => import('@/views/components/workplace'),
|
||||
meta: {
|
||||
hideSidebar: true,
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
name: 'permission',
|
||||
component: () => import('@/views/components/permission/choose-enterprise.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/auth',
|
||||
name: 'auth',
|
||||
component: () => import('@/views/components/permission/auth.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/auth',
|
||||
// name: 'auth',
|
||||
// component: () => import('@/views/components/permission/auth.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: true,
|
||||
// },
|
||||
// },
|
||||
...appRoutes,
|
||||
REDIRECT_MAIN,
|
||||
// REDIRECT_MAIN,
|
||||
NOT_FOUND_ROUTE,
|
||||
],
|
||||
scrollBehavior() {
|
||||
|
||||
@ -1,28 +1,35 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { REDIRECT_ROUTE_NAME } from '@/router/constants';
|
||||
|
||||
export const REDIRECT_MAIN: RouteRecordRaw = {
|
||||
path: '/redirect',
|
||||
name: 'redirect',
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
hideInMenu: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/redirect/:path',
|
||||
name: REDIRECT_ROUTE_NAME,
|
||||
component: () => import('@/layouts/Basic.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
hideInMenu: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// export const REDIRECT_MAIN: RouteRecordRaw = {
|
||||
// path: '/redirect',
|
||||
// name: 'redirect',
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: false,
|
||||
// hideInMenu: true,
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/redirect/:path',
|
||||
// name: REDIRECT_ROUTE_NAME,
|
||||
// component: () => import('@/layouts/Basic.vue'),
|
||||
// meta: {
|
||||
// requiresAuth: false,
|
||||
// requireLogin: false,
|
||||
// hideInMenu: true,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
|
||||
export const NOT_FOUND_ROUTE: RouteRecordRaw = {
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'notFound',
|
||||
component: () => import('@/layouts/NotFound.vue'),
|
||||
meta: {
|
||||
requiresAuth: false,
|
||||
hideInMenu: true,
|
||||
hideSidebar: true,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import type { RouteRecordNormalized } from 'vue-router';
|
||||
// import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './base';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
|
||||
const modules = import.meta.glob('./modules/*.ts', { eager: true });
|
||||
// const externalModules = import.meta.glob('./externalModules/*.ts', {
|
||||
|
||||
@ -15,8 +15,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '全域数据引擎',
|
||||
icon: IconBookmark,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
||||
},
|
||||
children: [
|
||||
@ -26,8 +26,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业热门话题洞察',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 2,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
|
||||
},
|
||||
@ -37,8 +37,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业词云',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 3,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/hotCloud.vue'),
|
||||
},
|
||||
@ -48,8 +48,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '行业关键词动向',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 4,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/keyWord.vue'),
|
||||
},
|
||||
@ -59,8 +59,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '用户痛点观察',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 5,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
|
||||
},
|
||||
@ -70,8 +70,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '重点品牌动向',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 6,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
|
||||
},
|
||||
@ -81,8 +81,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '用户画像',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 7,
|
||||
},
|
||||
component: () => import('@/views/components/dataEngine/userPersona.vue'),
|
||||
},
|
||||
|
||||
@ -14,9 +14,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '管理中心',
|
||||
icon: IconBookmark,
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.MANAGEMENT_ID,
|
||||
},
|
||||
children: [
|
||||
@ -26,7 +26,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
component: () => import('@/views/components/management/person'),
|
||||
meta: {
|
||||
locale: '个人信息',
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
@ -36,7 +37,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
component: () => import('@/views/components/management/enterprise'),
|
||||
meta: {
|
||||
locale: '企业信息',
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
@ -46,7 +48,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
component: () => import('@/views/components/management/account'),
|
||||
meta: {
|
||||
locale: '账号管理',
|
||||
requiresAuth: true,
|
||||
requiresAuth: false,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
},
|
||||
|
||||
@ -19,8 +19,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '品牌资产管理',
|
||||
icon: IconRepository,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -30,8 +30,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '品牌信息',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 11,
|
||||
},
|
||||
component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
|
||||
},
|
||||
@ -45,8 +45,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '账号资源中心',
|
||||
icon: IconMediaAccount,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -56,8 +56,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号管理',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 12,
|
||||
},
|
||||
component: () => import('@/views/property-marketing/media-account/account-manage'),
|
||||
},
|
||||
@ -67,6 +67,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号数据看板',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/media-account/account-dashboard'),
|
||||
@ -77,6 +78,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账号详情',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
hideInMenu: true,
|
||||
activeMenu: 'MediaAccountAccountDashboard',
|
||||
@ -93,8 +95,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '投放资源中心',
|
||||
icon: IconPutAccount,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -104,8 +106,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账户管理',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 13,
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-manage'),
|
||||
},
|
||||
@ -115,6 +117,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '账户数据',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-data'),
|
||||
@ -125,6 +128,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '投放表现分析',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/account-dashboard'),
|
||||
@ -135,6 +139,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '投放指南',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/put-account/investment-guidelines'),
|
||||
@ -161,8 +166,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
locale: '智能方案管理',
|
||||
icon: IconIntelligentSolution,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
requiresSidebar: true,
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
@ -172,8 +177,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '业务洞察报告',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
menuId: 14,
|
||||
},
|
||||
component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
|
||||
},
|
||||
@ -183,6 +188,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
locale: '竟品对比报告',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
|
||||
|
||||
1
src/router/typeings.d.ts
vendored
1
src/router/typeings.d.ts
vendored
@ -14,5 +14,6 @@ declare module 'vue-router' {
|
||||
noAffix?: boolean; // if set true, the tag will not affix in the tab-bar
|
||||
ignoreCache?: boolean; // if set true, the page will not be cached
|
||||
hideSidebar?: boolean;
|
||||
requireLogin?: boolean; // 是否需要登陆才能访问
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { fetchEnterpriseInfo } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
|
||||
|
||||
interface EnterpriseInfo {
|
||||
id: number;
|
||||
@ -7,6 +10,7 @@ interface EnterpriseInfo {
|
||||
used_update_name_count: number;
|
||||
sub_account_quota: number;
|
||||
used_sub_account_count: number;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
interface EnterpriseState {
|
||||
@ -15,24 +19,14 @@ interface EnterpriseState {
|
||||
|
||||
export const useEnterpriseStore = defineStore('enterprise', {
|
||||
state: (): EnterpriseState => ({
|
||||
enterpriseInfo: (() => {
|
||||
const stored = localStorage.getItem('enterpriseInfo');
|
||||
if (stored) {
|
||||
try {
|
||||
return JSON.parse(stored) as EnterpriseInfo;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})(),
|
||||
enterpriseInfo: (glsWithCatch('enterpriseInfo') && JSON.parse(glsWithCatch('enterpriseInfo') as string)) || null,
|
||||
}),
|
||||
actions: {
|
||||
setEnterpriseInfo(enterpriseInfo: EnterpriseInfo) {
|
||||
this.enterpriseInfo = enterpriseInfo;
|
||||
localStorage.setItem('enterpriseInfo', JSON.stringify(enterpriseInfo));
|
||||
slsWithCatch('enterpriseInfo', JSON.stringify(enterpriseInfo));
|
||||
},
|
||||
clearEnterpriseInfo() {
|
||||
clearUserEnterpriseInfo() {
|
||||
this.enterpriseInfo = null;
|
||||
localStorage.removeItem('enterpriseInfo');
|
||||
},
|
||||
@ -51,15 +45,13 @@ export const useEnterpriseStore = defineStore('enterprise', {
|
||||
this.enterpriseInfo.used_sub_account_count++;
|
||||
}
|
||||
},
|
||||
getEnterpriseInfo(): EnterpriseInfo | null {
|
||||
return this.enterpriseInfo;
|
||||
},
|
||||
async updateEnterpriseInfo() {
|
||||
const res = await fetchEnterpriseInfo(this.enterpriseInfo!.id);
|
||||
const { code, data } = res;
|
||||
async getEnterpriseInfo() {
|
||||
if (this.enterpriseInfo) {
|
||||
const { code, data } = await fetchEnterpriseInfo(this.enterpriseInfo!.id);
|
||||
if (code === 200) {
|
||||
this.setEnterpriseInfo(data);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
90
src/stores/modules/side-bar/constants.ts
Normal file
90
src/stores/modules/side-bar/constants.ts
Normal file
@ -0,0 +1,90 @@
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
export const MENU_LIST = [
|
||||
{
|
||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||
name: '工作台',
|
||||
routeName: 'Home',
|
||||
includeRouteNames: ['Home'],
|
||||
requiresAuth: false,
|
||||
permissionKey: '', // 权限key，如果为空，则表示该菜单不需要权限，与后端约定
|
||||
},
|
||||
{
|
||||
id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
||||
name: '全域数据分析',
|
||||
permissionKey: 'data_analysis',
|
||||
requiresAuth: true,
|
||||
children: [
|
||||
{
|
||||
name: '行业热门话题洞察',
|
||||
routeName: 'DataEngineHotTranslation',
|
||||
includeRouteNames: ['DataEngineHotTranslation'],
|
||||
},
|
||||
{
|
||||
name: '行业词云',
|
||||
routeName: 'DataEngineHotCloud',
|
||||
includeRouteNames: ['DataEngineHotCloud'],
|
||||
},
|
||||
{
|
||||
name: '行业关键词动向',
|
||||
routeName: 'DataEngineKeyWord',
|
||||
includeRouteNames: ['DataEngineKeyWord'],
|
||||
},
|
||||
{
|
||||
name: '用户痛点观察',
|
||||
routeName: 'DataEngineUserPainPoints',
|
||||
includeRouteNames: ['DataEngineUserPainPoints'],
|
||||
},
|
||||
{
|
||||
name: '重点品牌动向',
|
||||
routeName: 'DataEngineKeyBrandMovement',
|
||||
includeRouteNames: ['DataEngineKeyBrandMovement'],
|
||||
},
|
||||
{
|
||||
name: '用户画像',
|
||||
routeName: 'DataEngineUserPersona',
|
||||
includeRouteNames: ['DataEngineUserPersona'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
name: '营销资产中台',
|
||||
permissionKey: 'marketing_asset',
|
||||
requiresAuth: true,
|
||||
children: [
|
||||
{
|
||||
name: '品牌资产管理',
|
||||
routeName: 'RepositoryBrandMaterials',
|
||||
includeRouteNames: ['RepositoryBrandMaterials'],
|
||||
},
|
||||
{
|
||||
name: '账号资源中心',
|
||||
routeName: 'MediaAccountAccountManagement',
|
||||
includeRouteNames: [
|
||||
'MediaAccountAccountManagement',
|
||||
'MediaAccountAccountDashboard',
|
||||
'MediaAccountAccountDetails',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '投放资源中心',
|
||||
routeName: 'PutAccountAccountManagement',
|
||||
includeRouteNames: [
|
||||
'PutAccountAccountManagement',
|
||||
'PutAccountAccountData',
|
||||
'PutAccountAccountDashboard',
|
||||
'PutAccountInvestmentGuidelines',
|
||||
'guideDetail',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '智能方案管理',
|
||||
routeName: 'IntelligentSolutionBusinessAnalysisReport',
|
||||
includeRouteNames: [
|
||||
'IntelligentSolutionBusinessAnalysisReport',
|
||||
'IntelligentSolutionCompetitiveProductAnalysisReport',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -3,19 +3,23 @@
|
||||
* @Date: 2025-06-23 22:13:30
|
||||
*/
|
||||
import { defineStore } from 'pinia';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
import { appRoutes } from '@/router/routes';
|
||||
import router from '@/router';
|
||||
import type { RouteLocationNormalized } from 'vue-router';
|
||||
|
||||
const { DATA_ENGINE_ID, MANAGEMENT_ID } = MENU_GROUP_IDS;
|
||||
import { MENU_LIST } from './constants';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
|
||||
interface sidebarState {
|
||||
activeMenuId: number | null;
|
||||
menuList: any[];
|
||||
allowAccessRoutes: any[];
|
||||
}
|
||||
|
||||
export const useSidebarStore = defineStore('sidebar', {
|
||||
state: (): sidebarState => ({
|
||||
activeMenuId: null,
|
||||
menuList: [],
|
||||
|
||||
allowAccessRoutes: [], // 允许访问的路由列表
|
||||
}),
|
||||
actions: {
|
||||
clearActiveMenuId() {
|
||||
@ -24,14 +28,25 @@ export const useSidebarStore = defineStore('sidebar', {
|
||||
setActiveMenuId(id: number) {
|
||||
this.activeMenuId = id;
|
||||
},
|
||||
clearUserNavbarMenuList() {
|
||||
this.menuList = [];
|
||||
},
|
||||
// navbar菜单列表由企业对应权限决定
|
||||
getUserNavbarMenuList() {
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
this.menuList = MENU_LIST.filter(
|
||||
(item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
|
||||
);
|
||||
},
|
||||
// 根据当前路由自动设置 activeMenuId
|
||||
setActiveMenuIdByRoute(route: RouteLocationNormalized) {
|
||||
// console.log('setActiveMenuIdByRoute ');
|
||||
const appRoutes = router.options?.routes ?? [];
|
||||
|
||||
// 查找当前路由所属的菜单组
|
||||
const findMenuGroup = (routes: any[]): number | null => {
|
||||
for (const routeItem of routes) {
|
||||
// 检查子路由
|
||||
if (routeItem.children && routeItem.children.length > 0) {
|
||||
if (routeItem.children?.length > 0) {
|
||||
// 检查当前路由是否是这个父路由的子路由
|
||||
const isChildRoute = routeItem.children.some((child: any) => child.name === route.name);
|
||||
if (isChildRoute) {
|
||||
@ -42,12 +57,16 @@ export const useSidebarStore = defineStore('sidebar', {
|
||||
if (childResult !== null) {
|
||||
return routeItem.meta?.id || childResult;
|
||||
}
|
||||
} else {
|
||||
if (routeItem.name === route.name) {
|
||||
return routeItem.meta?.id || null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const menuId = findMenuGroup(appRoutes);
|
||||
const menuId = findMenuGroup(appRoutes as any);
|
||||
if (menuId !== null) {
|
||||
this.activeMenuId = menuId;
|
||||
}
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
import type { RouteRecordNormalized } from 'vue-router';
|
||||
|
||||
import { defineStore } from 'pinia';
|
||||
import { fetchProfileInfo } from '@/api/all/login';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import router from '@/router';
|
||||
import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
|
||||
|
||||
interface UserInfo {
|
||||
id: number;
|
||||
@ -10,16 +15,10 @@ interface UserInfo {
|
||||
// 添加其他用户属性...
|
||||
}
|
||||
|
||||
interface CompanyInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
// 添加其他公司属性...
|
||||
}
|
||||
|
||||
interface UserState {
|
||||
token: string;
|
||||
userInfo: UserInfo | null;
|
||||
companyInfo: CompanyInfo | null;
|
||||
allowAccessRoutes: string[];
|
||||
// isLogin: boolean;
|
||||
}
|
||||
|
||||
@ -31,9 +30,10 @@ interface UserInfo {
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: (): UserState => ({
|
||||
token: localStorage.getItem('accessToken') || '',
|
||||
userInfo: null,
|
||||
companyInfo: null,
|
||||
token: glsWithCatch('accessToken') || '',
|
||||
userInfo: (glsWithCatch('userInfo') && JSON.parse(glsWithCatch('userInfo') as string)) || null,
|
||||
allowAccessRoutes:
|
||||
(glsWithCatch('allowAccessRoutes') && JSON.parse(glsWithCatch('allowAccessRoutes') as string)) || [], // 允许访问的路由列表
|
||||
}),
|
||||
getters: {
|
||||
isLogin(): boolean {
|
||||
@ -44,12 +44,12 @@ export const useUserStore = defineStore('user', {
|
||||
// 设置 Token
|
||||
setToken(token: string) {
|
||||
this.token = `Bearer ${token}`;
|
||||
localStorage.setItem('accessToken', this.token);
|
||||
slsWithCatch('accessToken', this.token);
|
||||
},
|
||||
|
||||
deleteToken() {
|
||||
this.token = '';
|
||||
localStorage.removeItem('accessToken');
|
||||
rlsWithCatch('accessToken');
|
||||
},
|
||||
|
||||
// 获取 Token
|
||||
@ -60,14 +60,54 @@ export const useUserStore = defineStore('user', {
|
||||
// 设置用户信息
|
||||
setUserInfo(userInfo: UserInfo | null) {
|
||||
this.userInfo = userInfo;
|
||||
slsWithCatch('userInfo', JSON.stringify(userInfo));
|
||||
},
|
||||
clearUserInfo() {
|
||||
this.userInfo = null;
|
||||
rlsWithCatch('userInfo');
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
async fetchUserInfo() {
|
||||
async getUserInfo() {
|
||||
const { code, data } = await fetchProfileInfo();
|
||||
if (code === 200) {
|
||||
this.setUserInfo(data);
|
||||
}
|
||||
},
|
||||
clearUserAllowAccessRoutes() {
|
||||
this.allowAccessRoutes = [];
|
||||
rlsWithCatch('allowAccessRoutes');
|
||||
},
|
||||
getUserAllowAccessRoutes() {
|
||||
const sidebarStore = useSidebarStore();
|
||||
const menuList = sidebarStore.menuList;
|
||||
const appRoutes = router.getRoutes();
|
||||
|
||||
appRoutes.forEach((route: any) => {
|
||||
if (!route.meta?.requiresAuth) {
|
||||
this.allowAccessRoutes.push(route.name);
|
||||
}
|
||||
});
|
||||
|
||||
const pushAllowAccessRoutes = (includeRouteNames: string[]) => {
|
||||
const matchedRoute = appRoutes
|
||||
.filter((route: any) => includeRouteNames.includes(route.name))
|
||||
.map((route: any) => route.name);
|
||||
this.allowAccessRoutes.push(...matchedRoute);
|
||||
};
|
||||
|
||||
menuList.forEach((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((child: any) => {
|
||||
pushAllowAccessRoutes(child.includeRouteNames);
|
||||
});
|
||||
} else {
|
||||
pushAllowAccessRoutes(item.includeRouteNames);
|
||||
}
|
||||
});
|
||||
|
||||
this.allowAccessRoutes = uniq(this.allowAccessRoutes);
|
||||
slsWithCatch('allowAccessRoutes', JSON.stringify(this.allowAccessRoutes));
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,24 +1,30 @@
|
||||
@font-face {
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.otf');
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.otf');
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PuHuiTi-Bold';
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.otf');
|
||||
src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// 使用统一的字体族名
|
||||
.font-family-puhui-regular {
|
||||
font-family: 'PuHuiTi-Regular' !important;
|
||||
}
|
||||
|
||||
.font-family-puhui-medium {
|
||||
font-family: 'PuHuiTi-Medium' !important;
|
||||
}
|
||||
|
||||
.font-family-puhui-bold {
|
||||
font-family: PuHuiTi-Bold !important;
|
||||
}
|
||||
.font-family-puhui-medium {
|
||||
font-family: PuHuiTi-Medium !important;
|
||||
}
|
||||
.font-family-puhui-regular {
|
||||
font-family: PuHuiTi-Regular !important;
|
||||
font-family: 'PuHuiTi-Bold' !important;
|
||||
}
|
||||
|
||||
47
src/utils/stroage.ts
Normal file
47
src/utils/stroage.ts
Normal file
@ -0,0 +1,47 @@
|
||||
export const glsWithCatch = (key: string) => {
|
||||
try {
|
||||
return localStorage?.getItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const slsWithCatch = (key: string, value: any) => {
|
||||
try {
|
||||
localStorage?.setItem(key, value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const rlsWithCatch = (key: string) => {
|
||||
try {
|
||||
localStorage?.removeItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const gssWithCatch = (key: string) => {
|
||||
try {
|
||||
return sessionStorage?.getItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const sssWithCatch = (key: string, value: any) => {
|
||||
try {
|
||||
sessionStorage?.setItem(key, value);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const rssWithCatch = (key: string) => {
|
||||
try {
|
||||
sessionStorage?.removeItem(key);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
@ -12,9 +12,24 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
export function goUserLogin(query?: any) {
|
||||
router.push({ name: 'UserLogin', query });
|
||||
}
|
||||
// 初始化企业信息、navbar菜单、允许访问的路由
|
||||
export const getUserEnterpriseInfo = async () => {
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
await enterpriseStore.getEnterpriseInfo();
|
||||
sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
|
||||
userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
|
||||
};
|
||||
|
||||
// 登录处理
|
||||
export async function handleUserLogin() {
|
||||
const userStore = useUserStore();
|
||||
|
||||
await userStore.getUserInfo(); // 初始化用户信息
|
||||
await getUserEnterpriseInfo();
|
||||
|
||||
handleUserHome();
|
||||
}
|
||||
|
||||
@ -28,9 +43,13 @@ export function handleUserLogout() {
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
userStore.deleteToken();
|
||||
enterpriseStore.clearEnterpriseInfo();
|
||||
userStore.clearUserInfo();
|
||||
enterpriseStore.clearUserEnterpriseInfo();
|
||||
sidebarStore.clearUserNavbarMenuList();
|
||||
userStore.clearUserAllowAccessRoutes();
|
||||
|
||||
sidebarStore.clearActiveMenuId();
|
||||
userStore.deleteToken();
|
||||
|
||||
goUserLogin();
|
||||
}
|
||||
|
||||
@ -225,7 +225,6 @@ const clearError = (field: string) => {
|
||||
const handleOk = async () => {
|
||||
visible.value = false;
|
||||
|
||||
await enterpriseStore.updateEnterpriseInfo();
|
||||
handleUserLogin();
|
||||
};
|
||||
|
||||
@ -269,11 +268,9 @@ const getProfileInfo = async () => {
|
||||
mobileNumber.value = data['mobile'];
|
||||
accounts.value = enterprises;
|
||||
enterpriseStore.setEnterpriseInfo(data);
|
||||
userStore.setUserInfo(data);
|
||||
|
||||
if (enterprises.length > 0) {
|
||||
if (enterprises.length === 1) {
|
||||
await enterpriseStore.updateEnterpriseInfo();
|
||||
handleUserLogin();
|
||||
} else {
|
||||
// 多个企业时候需要弹窗让用户选择企业
|
||||
|
||||
@ -99,7 +99,7 @@ const addAccountVisible = ref(false);
|
||||
const deleteVisible = ref(false);
|
||||
const deleteTitle = ref('');
|
||||
|
||||
const enterpriseInfo = store.getEnterpriseInfo();
|
||||
const enterpriseInfo = store.enterpriseInfo;
|
||||
|
||||
const okText = computed(() => {
|
||||
if (!canAddAccount.value) {
|
||||
|
||||
@ -48,7 +48,7 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const enterpriseInfo = store.getEnterpriseInfo();
|
||||
const enterpriseInfo = store.enterpriseInfo;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
v-if="props.product.status === Status.Enable || props.product.status === Status.ON_TRIAL"
|
||||
class="primary-button"
|
||||
type="primary"
|
||||
@click="gotoModule(props.product.menu_id)"
|
||||
@click="gotoModule(props.product.id)"
|
||||
>
|
||||
进入模块
|
||||
</a-button>
|
||||
@ -70,13 +70,16 @@ import { trialProduct } from '@/api/all';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomerServiceModal from '@/components/customer-service-modal.vue';
|
||||
import { appRoutes } from '@/router/routes';
|
||||
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { useUserStore } from '@/stores';
|
||||
import { getUserEnterpriseInfo } from '@/utils/user';
|
||||
|
||||
const props = defineProps<{
|
||||
product: Product;
|
||||
}>();
|
||||
const emit = defineEmits(['refresh']);
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
enum Status {
|
||||
Disable = 0, // 禁用
|
||||
@ -87,30 +90,37 @@ enum Status {
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
status: Status;
|
||||
name: string;
|
||||
image: string;
|
||||
desc: string;
|
||||
menu_id: number;
|
||||
id: number;
|
||||
expired_at?: number;
|
||||
}
|
||||
|
||||
const visible = ref(false);
|
||||
const router = useRouter();
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const userStore = useUserStore();
|
||||
const sidebarStore = useSidebarStore();
|
||||
|
||||
const handleTrial = async (id: any) => {
|
||||
await trialProduct(id);
|
||||
const { code } = await trialProduct(id);
|
||||
if (code === 200) {
|
||||
getUserEnterpriseInfo();
|
||||
|
||||
AMessage.success('试用成功！');
|
||||
emit('refresh');
|
||||
}
|
||||
};
|
||||
|
||||
const gotoModule = (menuId: number) => {
|
||||
const _target = appRoutes.find((v) => v.meta.id === menuId);
|
||||
if (_target) {
|
||||
console.log({ _target });
|
||||
router.push({ name: _target.name });
|
||||
}
|
||||
const routeMap: Record<number, string> = {
|
||||
'1': 'DataEngineHotTranslation',
|
||||
'2': 'RepositoryBrandMaterials',
|
||||
};
|
||||
console.log(routeMap[menuId]);
|
||||
router.push({ name: routeMap[menuId] });
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
&.arco-input-focus,
|
||||
&.arco-textarea-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
|
||||
@ -36,7 +36,7 @@ export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
|
||||
{ title: '账号名称', dataIndex: 'name' },
|
||||
{ title: '项目分组', dataIndex: 'group.name' },
|
||||
{ title: '状态', dataIndex: 'status', type: 'status' },
|
||||
{ title: '运营人员', dataIndex: 'operator_name' },
|
||||
{ title: '运营人员', dataIndex: 'operator.name' },
|
||||
],
|
||||
[
|
||||
{ title: 'AI评价', dataIndex: 'ai_evaluation' },
|
||||
|
||||
@ -53,7 +53,7 @@ const open = (record) => {
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? batchDeleteMediaAccounts : deleteMediaAccount;
|
||||
const _params = isBatch.value ? { ids: accountId.value } : { id: accountId.value };
|
||||
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
|
||||
@ -87,15 +87,12 @@
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item label="手机号" field="mobile" required>
|
||||
<a-form-item label="手机号码" field="mobile" required>
|
||||
<a-input v-model="form.mobile" placeholder="请输入..." size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="运营人员" field="operator_name" required>
|
||||
<a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="号码持有人" field="holder_name" required>
|
||||
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="运营平台" :required="!isEdit">
|
||||
<img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
|
||||
<a-radio-group v-else v-model="form.platform">
|
||||
@ -103,6 +100,9 @@
|
||||
<a-radio :value="1">小红书</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="号码持有人" field="holder_name">
|
||||
<a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="选择分组">
|
||||
<GroupSelect
|
||||
v-model="form.group_id"
|
||||
@ -115,6 +115,41 @@
|
||||
<a-form-item label="选择标签">
|
||||
<TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item label="笔记链接" field="end_work_link">
|
||||
<template #label>
|
||||
<span class="label">笔记链接</span>
|
||||
<a-tooltip content="平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集">
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-textarea
|
||||
v-model="form.end_work_link"
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length="72"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
<template v-if="!isEdit">
|
||||
<a-form-item label="Cookie值">
|
||||
<template #label>
|
||||
<span class="label">Cookie值</span>
|
||||
<a-tooltip content="开启后可直接填写 Cookie，无需扫码授权">
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-switch v-model="isCustomCookie" size="large" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="isCustomCookie" label="" field="cookie">
|
||||
<a-textarea
|
||||
v-model="form.cookie"
|
||||
placeholder="请输入..."
|
||||
size="large"
|
||||
max-length="72"
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
@ -166,6 +201,8 @@ const INITIAL_FORM = {
|
||||
platform: 0,
|
||||
group_id: undefined,
|
||||
tag_ids: [],
|
||||
end_work_link: undefined,
|
||||
cookie: undefined,
|
||||
};
|
||||
|
||||
const groupOptions = ref([]);
|
||||
@ -181,6 +218,7 @@ const file = ref(null);
|
||||
const authorizedAccountModalRef = ref(null);
|
||||
const importPromptModalRef = ref(null);
|
||||
const uploadRef = ref(null);
|
||||
const isCustomCookie = ref(false);
|
||||
const form = ref(cloneDeep(INITIAL_FORM));
|
||||
|
||||
const rules = {
|
||||
@ -202,7 +240,7 @@ const rules = {
|
||||
},
|
||||
],
|
||||
operator_name: [{ required: true, message: '请输入运营人员' }],
|
||||
holder_name: [{ required: true, message: '请输入号码持有人' }],
|
||||
// holder_name: [{ required: true, message: '请输入号码持有人' }],
|
||||
};
|
||||
|
||||
const isBatchImport = computed(() => uploadType.value === 'batch');
|
||||
@ -250,6 +288,7 @@ const reset = () => {
|
||||
fileName.value = '';
|
||||
file.value = null;
|
||||
isEdit.value = false;
|
||||
isCustomCookie.value = false;
|
||||
uploadStatus.value = UploadStatus.DEFAULT;
|
||||
uploadType.value = 'manual';
|
||||
};
|
||||
@ -304,6 +343,30 @@ const handleBatchImport = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddAccount = async () => {
|
||||
const _isCustomCookie = isCustomCookie.value;
|
||||
const { code, data } = await postMediaAccounts({
|
||||
...form.value,
|
||||
cookie: _isCustomCookie ? form.value.cookie : undefined,
|
||||
});
|
||||
if (code === 200) {
|
||||
emits('update');
|
||||
onClose();
|
||||
|
||||
const { id, platform } = data;
|
||||
!_isCustomCookie && startAuthorized(id, platform);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditAccount = async () => {
|
||||
const { code } = await putMediaAccounts({ id: id.value, ...form.value });
|
||||
if (code === 200) {
|
||||
AMessage.success('修改成功');
|
||||
emits('update');
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
async function onSubmit() {
|
||||
if (isBatchImport.value) {
|
||||
handleBatchImport();
|
||||
@ -312,19 +375,7 @@ async function onSubmit() {
|
||||
|
||||
formRef.value.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
const _fn = id.value ? putMediaAccounts : postMediaAccounts;
|
||||
const _params = id.value ? { id: id.value, ...form.value } : form.value;
|
||||
const { code, data } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
isEdit.value && AMessage.success('修改成功');
|
||||
emits('update');
|
||||
|
||||
if (isEdit.value) {
|
||||
onClose();
|
||||
} else {
|
||||
startAuthorized(data?.id, data?.platform);
|
||||
}
|
||||
}
|
||||
isEdit.value ? handleEditAccount() : handleAddAccount();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="img-box">
|
||||
<template v-if="qrCodeLoading || isFailLoadQrCode">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image v-if="qrCodeLoading" :src="icon1" width="160" height="160" />
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
|
||||
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
|
||||
@ -49,7 +49,7 @@
|
||||
</template>
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
|
||||
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
|
||||
<div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
<icon-refresh size="24" class="mb-13px" />
|
||||
<p class="s1">二维码失效</p>
|
||||
<p class="s1">请点击刷新</p>
|
||||
@ -225,11 +225,15 @@ const clearOverdueTimer = () => {
|
||||
overdueTimer = null;
|
||||
}
|
||||
};
|
||||
// 重新扫码
|
||||
const handleRefreshQrCode = () => {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (isFailLoadQrCode.value) {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
handleRefreshQrCode();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -249,8 +253,7 @@ const handleOk = () => {
|
||||
if (isSuccess.value) {
|
||||
close();
|
||||
} else {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
handleRefreshQrCode();
|
||||
}
|
||||
} else {
|
||||
startLoading();
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="img-box">
|
||||
<template v-if="qrCodeLoading || isFailLoadQrCode">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image v-if="qrCodeLoading" :src="icon1" width="160" height="160" />
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
|
||||
<icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
|
||||
@ -49,7 +49,7 @@
|
||||
</template>
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
|
||||
<div v-if="isOverdue" class="mask cursor-pointer" @click="getAuthorizedQrCode">
|
||||
<div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
<icon-refresh size="24" class="mb-13px" />
|
||||
<p class="s1">二维码失效</p>
|
||||
<p class="s1">请点击刷新</p>
|
||||
@ -277,11 +277,16 @@ const clearStatusPollingTimer = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 重新扫码
|
||||
const handleRefreshQrCode = () => {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
if (taskStep.value === TASK_STEP.default) {
|
||||
if (isFailLoadQrCode.value) {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
handleRefreshQrCode();
|
||||
return;
|
||||
}
|
||||
|
||||
@ -308,8 +313,7 @@ const handleOk = () => {
|
||||
if (isSuccess.value) {
|
||||
close();
|
||||
} else {
|
||||
resetTaskFields();
|
||||
getAuthorizedQrCode();
|
||||
handleRefreshQrCode();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,7 +191,6 @@ const getHealthData = async () => {
|
||||
const { code, data } = await getMediaAccountsHealth();
|
||||
if (code === 200) {
|
||||
healthData.value = data;
|
||||
console.log(healthData.value);
|
||||
}
|
||||
};
|
||||
const getAccountData = async () => {
|
||||
|
||||
@ -57,7 +57,7 @@ const open = (record) => {
|
||||
|
||||
async function onDelete() {
|
||||
const _fn = isBatch.value ? batchDeletePlacementAccounts : deletePlacementAccount;
|
||||
const _params = isBatch.value ? { ids: accountId.value } : { id: accountId.value };
|
||||
const _params = isBatch.value ? { ids: accountId.value } : accountId.value;
|
||||
const { code } = await _fn(_params);
|
||||
if (code === 200) {
|
||||
AMessage.success('删除成功');
|
||||
|
||||
@ -164,10 +164,9 @@ const getData = () => {
|
||||
};
|
||||
|
||||
const getHealthData = async () => {
|
||||
const { code, data } = await getMediaAccountsHealth();
|
||||
const { code, data } = await getPlacementAccountsHealth();
|
||||
if (code === 200) {
|
||||
healthData.value = data;
|
||||
console.log(healthData.value);
|
||||
}
|
||||
};
|
||||
const getAccountData = async () => {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">本月摘要</span>
|
||||
<span class="part-div-header-title">总体摘要</span>
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">本月摘要2。</p>
|
||||
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的总体描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">投放建议优化。</p>
|
||||
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的优化建议。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
@ -15,7 +15,15 @@
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">总体策略</span>
|
||||
<span class="placement-optimization-title"
|
||||
>总体策略
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议的整体调整概述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[0]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
@ -23,13 +31,29 @@
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">预算分配</span>
|
||||
<span class="placement-optimization-title"
|
||||
>预算分配
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在预算分配部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[1]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">时段优化</span>
|
||||
<span class="placement-optimization-title"
|
||||
>时段优化
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在时段优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[2]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
@ -37,13 +61,29 @@
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群包优化</span>
|
||||
<span class="placement-optimization-title"
|
||||
>人群包优化
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在人群包优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props?.optimization?.[3]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">素材优化</span>
|
||||
<span class="placement-optimization-title"
|
||||
>素材优化
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在素材优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props?.optimization?.[4]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<a-button type="outline" @click="downloadDetailAsImage(record.id)" class="operation-btn">下载</a-button>
|
||||
<a-button type="outline" @click="downLoad(record.file_url)" class="operation-btn">下载</a-button>
|
||||
<a-button type="outline" @click="goDetail(record.id)" class="operation-btn">详情</a-button>
|
||||
</a-space>
|
||||
</a-space>
|
||||
@ -82,32 +82,24 @@ const goDetail = async (id) => {
|
||||
router.push(`/put-account/detail/${id}`);
|
||||
};
|
||||
|
||||
const downloadDetailAsImage = (id) => {
|
||||
const url = `/put-account/detail/${id}`;
|
||||
const win = window.open(url, '_blank');
|
||||
|
||||
win.onload = () => {
|
||||
setTimeout(() => {
|
||||
html2canvas(win.document.body, {
|
||||
useCORS: true,
|
||||
scale: 2,
|
||||
}).then((canvas) => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const downLoad = (fileUrl) => {
|
||||
if (isEmpty(fileUrl)) {
|
||||
Message.error('下载失败,文件不存在');
|
||||
return;
|
||||
}
|
||||
const link = document.createElement('a');
|
||||
link.href = imgData;
|
||||
link.download = `详情页面_${Date.now()}.png`;
|
||||
link.href = fileUrl;
|
||||
link.download = '投放指南.pdf';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
win.close(); // 关闭新窗口
|
||||
});
|
||||
}, 2000); // 等待页面加载
|
||||
};
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
const deleteData = async (id) => {
|
||||
const { code, message } = await deleteHistorylog(id);
|
||||
if (code == 200) {
|
||||
Message.success(message);
|
||||
emits('onSearch');
|
||||
console.log('onsearch')
|
||||
console.log('onsearch');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<a-button class="w-84px search-btn mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周总消耗</p>
|
||||
<p>当前周内所有投流账户的累计广告花费，反映整体投放规模。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -24,7 +24,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周总消耗环比</p>
|
||||
<p>本周消耗金额与上周对比的变化百分比，用于衡量预算投放趋势。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -35,7 +35,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>ROI</p>
|
||||
<p>投资回报率（ROI）= 收益 ÷ 投入成本，反映整体投流账户的收益效率。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -46,7 +46,7 @@
|
||||
<a-popover position="tl">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>CTR</p>
|
||||
<p>点击率（CTR）= 点击量 ÷ 展示量，是衡量广告素材吸引力的关键指标。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -54,8 +54,7 @@
|
||||
|
||||
<template #platform="{ record }">
|
||||
<a-space size="medium" v-if="record.platform">
|
||||
<img :src="PLATFORM_LIST[record.platform]?.icon" width="19" class="mr-4px" />
|
||||
<span>{{ PLATFORM_LIST[record.platform].label }}</span>
|
||||
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
import top2 from '@/assets/img/captcha/top2.svg';
|
||||
import top3 from '@/assets/img/captcha/top3.svg';
|
||||
import { fetchUploadFile } from '@/api/all';
|
||||
import { jsPDF } from 'jspdf';
|
||||
import html2canvas from 'html2canvas';
|
||||
import axios from 'axios';
|
||||
|
||||
/**
|
||||
* 根据评分获取对应的星星图标路径
|
||||
@ -27,3 +31,49 @@ export enum AiResultStatus {
|
||||
FAILED = 2, // 失败
|
||||
SUCCESS = 3, // 成功
|
||||
}
|
||||
|
||||
/**
|
||||
* 将指定 DOM 元素导出为 PDF Blob
|
||||
* @param elementSelector - 要导出的 DOM 元素选择器
|
||||
*/
|
||||
export const generatePDF = async (elementSelector: string): Promise<Blob> => {
|
||||
const sections = document.querySelectorAll(elementSelector);
|
||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
||||
let position = 0;
|
||||
for (const section of sections) {
|
||||
if ((section as HTMLElement).children.length === 0) continue;
|
||||
const canvas = await html2canvas(section as HTMLElement, {
|
||||
ignoreElements: (element) => element.classList.contains('ignore-export'),
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
});
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const imgProps = pdf.getImageProperties(imgData);
|
||||
const pdfWidth = pdf.internal.pageSize.getWidth();
|
||||
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
|
||||
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
|
||||
position += pdfHeight + 10;
|
||||
}
|
||||
return pdf.output('blob');
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传 PDF 并返回文件 URL
|
||||
* @param fileName - PDF 文件名
|
||||
* @param elementSelector - 要导出的 DOM 元素选择器
|
||||
*/
|
||||
export const uploadPdf = async (fileName: string, elementSelector: string): Promise<string> => {
|
||||
const response = await fetchUploadFile({ suffix: 'pdf' });
|
||||
const preSignedUrl = response?.data?.upload_url;
|
||||
const fileUrl = response?.data?.file_url;
|
||||
if (!preSignedUrl) {
|
||||
throw new Error('未能获取有效的预签名上传地址');
|
||||
}
|
||||
const pdfBlob = await generatePDF(elementSelector);
|
||||
await axios.put(preSignedUrl, pdfBlob, {
|
||||
headers: {
|
||||
'Content-Type': pdfBlob.type,
|
||||
},
|
||||
});
|
||||
return fileUrl;
|
||||
};
|
||||
|
||||
@ -54,8 +54,16 @@
|
||||
|
||||
<!-- 投放建议-->
|
||||
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
||||
<!-- 投放行动指南-->
|
||||
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
|
||||
</div>
|
||||
<div class="ignore-export">
|
||||
<a-space class="down-btn">
|
||||
<a-button type="outline" :loading="exportLoading" @click="downPage">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
<template #default>下载</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,17 +73,18 @@ import { reactive, ref } from 'vue';
|
||||
|
||||
import MonthData from './components/month-data/index.vue';
|
||||
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
||||
import ActionGuideDistribution from './components/action-guide-distribution';
|
||||
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants.ts';
|
||||
import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const aiResult = reactive({
|
||||
optimization: [], // 投放建议优化
|
||||
action_guide: [], // 新投放建议生成
|
||||
overview: [], // 新投放建议生成
|
||||
});
|
||||
|
||||
const fileUrl = ref('');
|
||||
const detailData = reactive({
|
||||
created_at: '',
|
||||
account: '',
|
||||
@ -92,6 +101,27 @@ const getDetail = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const exportLoading = ref(false);
|
||||
const downPage = async () => {
|
||||
try {
|
||||
let downFileUrl = fileUrl.value;
|
||||
exportLoading.value = true;
|
||||
if (downFileUrl === '') {
|
||||
downFileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap');
|
||||
fileUrl.value = downFileUrl;
|
||||
}
|
||||
const link = document.createElement('a');
|
||||
link.href = downFileUrl;
|
||||
link.download = '投放指南.pdf';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
exportLoading.value = false;
|
||||
} catch (error) {
|
||||
Message.error(error.message);
|
||||
exportLoading.value = false;
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
|
||||
@ -5,17 +5,18 @@
|
||||
<a-tabs
|
||||
v-model:activeKey="tabData"
|
||||
@tab-click="onSearch"
|
||||
class="a-tab-class"
|
||||
class="a-tab-class ignore-export"
|
||||
default-active-key="placement_guide"
|
||||
>
|
||||
<a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
|
||||
<a-tab-pane key="guide_history">
|
||||
<template #title>历史投放指南</template>
|
||||
<template #title>历史指南列表</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<!--表单组件搜索-->
|
||||
<listSearchForm
|
||||
class="ignore-export"
|
||||
@onReset="handleReset"
|
||||
v-model:query="query"
|
||||
@onSearch="onSearch"
|
||||
@ -29,7 +30,7 @@
|
||||
@updateQuery="handleUpdateQuery"
|
||||
/>
|
||||
|
||||
<div v-if="listData.total > 0" class="pagination-box flex justify-end">
|
||||
<div v-if="listData.total > 0" class="pagination-box flex justify-end ignore-export">
|
||||
<a-pagination
|
||||
:total="listData.total"
|
||||
size="mini"
|
||||
@ -43,20 +44,23 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-spin v-if="tabData === 'placement_guide'" :loading="loading" tip="AI分析中...." wrapperClassName="custom-spin-wrapper">
|
||||
<div >
|
||||
|
||||
<a-spin
|
||||
v-show="tabData === 'placement_guide'"
|
||||
:loading="loading"
|
||||
tip="AI分析中...."
|
||||
wrapperClassName="custom-spin-wrapper"
|
||||
>
|
||||
<div>
|
||||
<MonthData :overview="aiResult.overview"></MonthData>
|
||||
<!-- 投放建议-->
|
||||
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
|
||||
<!-- 投放行动指南-->
|
||||
<ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
|
||||
<!-- <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>-->
|
||||
</div>
|
||||
|
||||
</a-spin>
|
||||
<div v-if="tabData == 'placement_guide'">
|
||||
<div v-if="tabData == 'placement_guide'" class="ignore-export">
|
||||
<a-space class="down-btn">
|
||||
<a-button type="outline" @click="downPage">
|
||||
<a-button type="outline" :loading="exportLoading" @click="downPage">
|
||||
<template #icon>
|
||||
<icon-download />
|
||||
</template>
|
||||
@ -80,7 +84,6 @@ import listSearchForm from './components/table-data/listSearchForm.vue';
|
||||
import GuideListHistory from './components/table-data/guideListHistory.vue';
|
||||
import MonthData from './components/month-data/index.vue';
|
||||
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
||||
import ActionGuideDistribution from './components/action-guide-distribution';
|
||||
import {
|
||||
getAiResult,
|
||||
getPlacementGuide,
|
||||
@ -88,8 +91,8 @@ import {
|
||||
savePlacementGuide,
|
||||
} from '@/api/all/propertyMarketing';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { AiResultStatus } from '@/views/property-marketing/put-account/investment-guidelines/constants';
|
||||
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
|
||||
|
||||
const tabData = ref('placement_guide');
|
||||
|
||||
@ -121,11 +124,12 @@ const handleUpdateQuery = (payload) => {
|
||||
query.sort_column = payload.column;
|
||||
query.sort_order = payload.order;
|
||||
isGetAi.value = false;
|
||||
loading.value = false;
|
||||
onSearch();
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const exportLoading = ref(false);
|
||||
const listData = reactive({
|
||||
total: 0,
|
||||
list: [],
|
||||
@ -143,12 +147,11 @@ const onSearch = async () => {
|
||||
guideHistoryList.value = result?.data?.data || [];
|
||||
}
|
||||
listData.total = result.data.total;
|
||||
if (placementGuideList.value.length > 0) {
|
||||
if (placementGuideList.value.length > 0 && isGetAi.value) {
|
||||
loading.value = true;
|
||||
if (isGetAi.value) {
|
||||
syncGetAiResult();
|
||||
startTask();
|
||||
}
|
||||
}
|
||||
isGetAi.value = true;
|
||||
};
|
||||
const aiResult = reactive({
|
||||
@ -159,29 +162,47 @@ const aiResult = reactive({
|
||||
|
||||
// 下载当前页面
|
||||
const downPage = async () => {
|
||||
await nextTick(); // 确保 DOM 更新完成
|
||||
html2canvas(document.querySelector('.guidelines-data-wrap')).then((canvas) => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
try {
|
||||
let fileUrl = saveForm.file_url;
|
||||
exportLoading.value = true;
|
||||
if (saveForm.file_url === '') {
|
||||
fileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap');
|
||||
saveForm.file_url = fileUrl;
|
||||
}
|
||||
console.log(fileUrl, 'fileUrl');
|
||||
const link = document.createElement('a');
|
||||
link.href = imgData;
|
||||
const timestamp = new Date().getTime();
|
||||
link.download = `投放指南-${timestamp}.png`;
|
||||
link.href = fileUrl;
|
||||
link.download = '投放指南.pdf';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
});
|
||||
document.body.removeChild(link);
|
||||
exportLoading.value = false;
|
||||
} catch (error) {
|
||||
Message.error(error.message);
|
||||
exportLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const saveForm = reactive({
|
||||
account: [],
|
||||
plan: [],
|
||||
platform: [],
|
||||
aiResult: [],
|
||||
code: '',
|
||||
file_url: '',
|
||||
});
|
||||
const timerRef = ref<number | null>(null);
|
||||
const startTask = () => {
|
||||
if (timerRef.value !== null) return;
|
||||
timerRef.value = setInterval(async () => {
|
||||
syncGetAiResult();
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const syncGetAiResult = async () => {
|
||||
try {
|
||||
const { code, data } = await getAiResult(query);
|
||||
saveForm.file_url = '';
|
||||
console.log('定时任务执行结果:', data);
|
||||
if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) {
|
||||
stopTask();
|
||||
@ -192,14 +213,22 @@ const startTask = () => {
|
||||
aiResult.optimization = data.result?.optimization?.modules || [];
|
||||
aiResult.action_guide = data.result?.action_guide?.modules || [];
|
||||
aiResult.overview = data.result?.overview?.content_blocks[0] || [];
|
||||
} else if (data.ai_result_status === AiResultStatus.FAILED) {
|
||||
Message.error('AI分析失败');
|
||||
aiError();
|
||||
}
|
||||
saveForm.code = data?.code;
|
||||
console.log(aiResult, 'aiResult');
|
||||
} catch (error) {
|
||||
console.error('定时任务执行出错:', error);
|
||||
stopTask();
|
||||
aiError();
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
// ai 检测失败执行方法
|
||||
const aiError = () => {
|
||||
aiResult.optimization = [];
|
||||
aiResult.action_guide = [];
|
||||
aiResult.overview = [];
|
||||
stopTask();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
@ -226,6 +255,7 @@ onUnmounted(() => {
|
||||
stopTask();
|
||||
});
|
||||
const handleSave = async () => {
|
||||
await uploadPdf();
|
||||
const updatedSaveForm = {
|
||||
...saveForm,
|
||||
ai_result: aiResult,
|
||||
@ -235,6 +265,7 @@ const handleSave = async () => {
|
||||
Message.success(message);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
@ -242,6 +273,7 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
|
||||
.custom-spin-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user