Merge remote-tracking branch 'origin/master' into feature/v1.3_营销资产中台
# Conflicts: # src/main.ts # src/styles/components/index.scss # src/styles/components/table.scss # src/styles/index.ts # src/views/components/dataEngine/keyWord.vue
This commit is contained in:
rd
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 B |
98
src/components/_base/exit-account-modal/index.vue
Normal file
98
src/components/_base/exit-account-modal/index.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-26 17:23:52
|
||||
-->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
width="400px"
|
||||
modal-class="exit-account-modal"
|
||||
show-close="false"
|
||||
:footer="false"
|
||||
@close="onClose"
|
||||
>
|
||||
<div class="flex items-center mb-16px">
|
||||
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||
<span class="s1">确认退出登录吗？</span>
|
||||
</div>
|
||||
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
|
||||
<div class="flex items-center justify-end">
|
||||
<a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
|
||||
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
|
||||
>退出登录</a-button
|
||||
>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { fetchLogOut } from '@/api/all/login';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
|
||||
import icon1 from './img/icon1.png';
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
function onClose() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
const open = (record) => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
async function onLogout() {
|
||||
const { code } = await fetchLogOut();
|
||||
if (code === 200) {
|
||||
handleUserLogout();
|
||||
AMessage.success('退出登录成功');
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.exit-account-modal {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8) !important;
|
||||
background-color: var(--BG-white, #fff) !important;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
.arco-modal-header {
|
||||
display: none;
|
||||
}
|
||||
.arco-modal-body {
|
||||
padding: 24px;
|
||||
.s1 {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
.s2 {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
.cancel-btn {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
&:hover {
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
}
|
||||
}
|
||||
.danger-btn {
|
||||
border-radius: 4px;
|
||||
background: var(--Functional-Danger-6, #f64b31) !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -121,7 +121,7 @@ export default defineComponent({
|
||||
auto-open={false}
|
||||
selected-keys={selectedKey.value}
|
||||
auto-open-selected={true}
|
||||
level-indent={34}
|
||||
level-indent={24}
|
||||
style="height: 100%;width:100%;"
|
||||
onCollapse={setCollapse}
|
||||
>
|
||||
@ -132,16 +132,59 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.arco-menu-inner) {
|
||||
padding: 20px 24px 0 12px !important;
|
||||
.arco-menu-inline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
.arco-menu-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
.arco-menu-title {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.arco-menu-item {
|
||||
border-radius: 8px;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #f2f3f5) !important;
|
||||
}
|
||||
&.arco-menu-selected {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.arco-menu-item-inner {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
import router from '@/router';
|
||||
import { useRoute } from 'vue-router';
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
@ -20,7 +21,7 @@ interface MenuItem {
|
||||
const lists = ref<MenuItem[]>([]);
|
||||
const sidebarStore = useSidebarStore();
|
||||
const route = useRoute();
|
||||
|
||||
const exitAccountModalRef = ref(null);
|
||||
const selectedKey = computed(() => {
|
||||
// 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
|
||||
if (route.name === 'Home' || route.path === '/') {
|
||||
@ -31,10 +32,7 @@ const selectedKey = computed(() => {
|
||||
});
|
||||
|
||||
const clickExit = async () => {
|
||||
const { code } = await fetchLogOut();
|
||||
if (code === 200) {
|
||||
handleUserLogout();
|
||||
}
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const getMenus = async () => {
|
||||
const res = await fetchMenusTree();
|
||||
@ -80,27 +78,30 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<a-space>
|
||||
<a-space class="cursor-pointer" @click="router.push('/')">
|
||||
<img src="@/assets/logo.svg" alt="" />
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="center-side">
|
||||
<div class="menu-demo">
|
||||
<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)">
|
||||
<view>工作台</view>
|
||||
<span class="menu-item-text">工作台</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
|
||||
<a-dropdown :popup-max-height="false">
|
||||
<a-button>{{ item.name }}<icon-caret-down /></a-button>
|
||||
<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)">{{
|
||||
child.name
|
||||
}}</a-doption>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-menu-item>
|
||||
@ -109,31 +110,37 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
</div>
|
||||
<ul class="right-side">
|
||||
<li>
|
||||
<a-dropdown trigger="click">
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div style="padding: 14px">
|
||||
<div>
|
||||
<a-doption>
|
||||
<a-space @click="setServerMenu">
|
||||
<img src="@/assets/option.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">管理中心</span>
|
||||
<icon-right />
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-doption>
|
||||
<a-space>
|
||||
<img src="@/assets/change.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">切换企业账号</span>
|
||||
<icon-right />
|
||||
<!-- <a-doption>
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</a-doption> -->
|
||||
<a-doption>
|
||||
<a-space @click="clickExit">
|
||||
<img src="@/assets/exit.svg" style="width: 16px; height: 16px" />
|
||||
<span style="width: 140px; font-size: 12px">退出登录</span>
|
||||
<icon-right />
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
</div>
|
||||
@ -141,10 +148,11 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
</a-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
<ExitAccountModal ref="exitAccountModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style scoped lang="scss">
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -163,6 +171,46 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
align-items: center;
|
||||
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.cneter-tip {
|
||||
font-size: 16px;
|
||||
@ -192,3 +240,53 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown,
|
||||
.layout-avatar-dropdown {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 !important;
|
||||
&-content {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,7 @@ const props = defineProps<{
|
||||
border-radius: 8px;
|
||||
}
|
||||
.title {
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
|
||||
@ -7,8 +7,7 @@
|
||||
<slot></slot>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
<style lang="less">
|
||||
:deep(.arco-btn-status-danger) {
|
||||
background-color: red !important;
|
||||
@ -20,7 +19,7 @@
|
||||
}
|
||||
.delete-modal-title {
|
||||
margin-top: 24px;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: var(--Text-1, rgba(33, 31, 36, 1));
|
||||
@ -36,14 +35,14 @@
|
||||
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
|
||||
border-radius: 4px;
|
||||
padding: 7px 20px;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
:last-child {
|
||||
border-radius: 4px;
|
||||
padding: 7px 20px;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin-left: 16px;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-22 22:15:28
|
||||
-->
|
||||
<template>
|
||||
<Modal title="加入企业" @ok="handleJoin">
|
||||
<div v-if="enterprise" class="join-body flex item-center">
|
||||
@ -38,7 +34,7 @@ onMounted(() => {
|
||||
<style lang="less">
|
||||
.join-body {
|
||||
margin: 0;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: var(--Text-1, rgba(33, 31, 36, 1));
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs" >
|
||||
<a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs">
|
||||
<slot></slot>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
<style lang="less">
|
||||
.modal {
|
||||
.arco-modal-header {
|
||||
@ -17,14 +15,14 @@
|
||||
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
|
||||
border-radius: 4px;
|
||||
padding: 7px 20px;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
:last-child {
|
||||
border-radius: 4px;
|
||||
padding: 7px 20px;
|
||||
font-family: Alibaba PuHuiTi, serif;
|
||||
font-family: 'PuHuiTi-Medium';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin-left: 16px;
|
||||
|
||||
BIN
src/components/no-data/img/icon-empty.png
Normal file
BIN
src/components/no-data/img/icon-empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
49
src/components/no-data/index.vue
Normal file
49
src/components/no-data/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-07-01 16:09:21
|
||||
-->
|
||||
<template>
|
||||
<div class="no-data">
|
||||
<slot name="pic">
|
||||
<img :src="emptyIcon" class="img" alt="" width="106" height="72" />
|
||||
</slot>
|
||||
<slot>
|
||||
<div v-if="text" class="text mt-36px">{{ text }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import icon from './img/icon-empty.png';
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: '暂无数据',
|
||||
},
|
||||
emptyIcon: {
|
||||
type: String,
|
||||
default: icon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 10%;
|
||||
padding-bottom: 10%;
|
||||
line-height: 1.5em;
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
0
src/components/no-data/style.scss
Normal file
0
src/components/no-data/style.scss
Normal file
Reference in New Issue
Block a user