Merge remote-tracking branch 'origin/ai-hub' into ai-hub
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ElImageViewer, ElMessage } from 'element-plus';
|
||||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
import { ElMessage, ElImageViewer } from 'element-plus';
|
|
||||||
import { contactConfig } from '@/config/constants';
|
import { contactConfig } from '@/config/constants';
|
||||||
|
|
||||||
export interface ContactType {
|
export interface ContactType {
|
||||||
@@ -254,7 +254,7 @@ function closeImageViewer() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 图片查看器 -->
|
<!-- 图片查看器 -->
|
||||||
<el-image-viewer
|
<ElImageViewer
|
||||||
v-if="showImageViewer"
|
v-if="showImageViewer"
|
||||||
:url-list="[currentImageUrl]"
|
:url-list="[currentImageUrl]"
|
||||||
:hide-on-click-modal="true"
|
:hide-on-click-modal="true"
|
||||||
@@ -379,7 +379,7 @@ function closeImageViewer() {
|
|||||||
|
|
||||||
.qr-image {
|
.qr-image {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: auto;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 2px solid #e8ecf0;
|
border: 2px solid #e8ecf0;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@@ -512,7 +512,8 @@ function closeImageViewer() {
|
|||||||
|
|
||||||
.qr-image {
|
.qr-image {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
height: 140px;
|
height: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.qr-label {
|
.qr-label {
|
||||||
@@ -577,7 +578,8 @@ function closeImageViewer() {
|
|||||||
|
|
||||||
.qr-code .qr-image {
|
.qr-code .qr-image {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ export const contactConfig = {
|
|||||||
|
|
||||||
// 二维码图片路径
|
// 二维码图片路径
|
||||||
images: {
|
images: {
|
||||||
customerService: '/src/assets/images/wx.png', // 客服微信二维码
|
customerService: ' https://ccnetcore.com/prod-api/wwwroot/aihub/wx.png ', // 客服微信二维码
|
||||||
communityGroup: '/src/assets/images/wx-group-qr.jpg', // 交流群二维码
|
communityGroup: ' https://ccnetcore.com/prod-api/wwwroot/aihub/jlq.png', // 交流群二维码
|
||||||
afterSalesGroup: '', // 售后群二维码
|
afterSalesGroup: '', // 售后群二维码
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<!-- 侧边栏折叠按钮 -->
|
<!-- 侧边栏折叠按钮 -->
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||||
import { SIDE_BAR_WIDTH } from '@/config/index';
|
|
||||||
import { useCollapseToggle } from '@/hooks/useCollapseToggle';
|
import { useCollapseToggle } from '@/hooks/useCollapseToggle';
|
||||||
import { useDesignStore } from '@/stores';
|
import { useDesignStore } from '@/stores';
|
||||||
|
|
||||||
@@ -9,27 +8,30 @@ const { changeCollapse } = useCollapseToggle();
|
|||||||
const designStore = useDesignStore();
|
const designStore = useDesignStore();
|
||||||
|
|
||||||
function handleChangeCollapse() {
|
function handleChangeCollapse() {
|
||||||
changeCollapse();
|
// changeCollapse();
|
||||||
|
// designStore.isCollapseConversationList = !designStore.isCollapseConversationList;
|
||||||
|
designStore.setIsCollapseConversationList(!designStore.isCollapseConversationList);
|
||||||
|
|
||||||
// 每次切换折叠状态,重置安全区状态
|
// 每次切换折叠状态,重置安全区状态
|
||||||
designStore.isSafeAreaHover = false;
|
// designStore.isSafeAreaHover = false;
|
||||||
// 重置首次激活悬停状态
|
// 重置首次激活悬停状态
|
||||||
designStore.hasActivatedHover = false;
|
// designStore.hasActivatedHover = false;
|
||||||
if (!designStore.isCollapse) {
|
// if (!designStore.isCollapse) {
|
||||||
document.documentElement.style.setProperty(
|
// document.documentElement.style.setProperty(
|
||||||
`--sidebar-left-container-default-width`,
|
// `--sidebar-left-container-default-width`,
|
||||||
`${SIDE_BAR_WIDTH}px`,
|
// `${SIDE_BAR_WIDTH}px`,
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
else {
|
// else {
|
||||||
document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
// document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
|
<div class="collapse-container btn-icon-btn" @click="handleChangeCollapse">
|
||||||
<SvgIcon v-if="!designStore.isCollapse" name="ms-left-panel-close-outline" size="24" />
|
<SvgIcon v-if="!designStore.isCollapseConversationList" name="ms-left-panel-close-outline" size="24" />
|
||||||
<SvgIcon v-if="designStore.isCollapse" name="ms-left-panel-open-outline" size="24" />
|
<SvgIcon v-if="designStore.isCollapseConversationList" name="ms-left-panel-open-outline" size="24" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ window.addEventListener('resize', checkIsMobile);
|
|||||||
</div>
|
</div>
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeNav"
|
:default-active="activeNav"
|
||||||
class="nav-menu"
|
class="nav-menu custom-menu"
|
||||||
:collapse="isCollapsed"
|
:collapse="isCollapsed"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
>
|
>
|
||||||
@@ -69,13 +69,16 @@ window.addEventListener('resize', checkIsMobile);
|
|||||||
v-for="item in navItems"
|
v-for="item in navItems"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
:index="item.name"
|
:index="item.name"
|
||||||
|
class="nav-menu-item"
|
||||||
@click="handleNavSelect(item)"
|
@click="handleNavSelect(item)"
|
||||||
>
|
>
|
||||||
<el-icon>
|
<template #default>
|
||||||
<component :is="item.icon" />
|
<div class="menu-content">
|
||||||
</el-icon>
|
<el-icon class="menu-icon">
|
||||||
<template #title>
|
<component :is="item.icon" />
|
||||||
<span>{{ item.label }}</span>
|
</el-icon>
|
||||||
|
<span class="menu-label">{{ item.label }}</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
@@ -302,4 +305,41 @@ window.addEventListener('resize', checkIsMobile);
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 重要:需要深度选择器覆盖 Element Plus 默认样式 */
|
||||||
|
.custom-menu :deep(.el-menu-item) {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 56px !important; /* 设置最小高度 */
|
||||||
|
padding: 12px 0 !important;
|
||||||
|
line-height: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-menu :deep(.el-menu-item .menu-content) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-menu :deep(.el-menu-item .menu-icon) {
|
||||||
|
margin: 0 !important;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-menu :deep(.el-menu-item .menu-label) {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 处理激活状态 */
|
||||||
|
.custom-menu :deep(.el-menu-item.is-active) {
|
||||||
|
background-color: var(--el-color-primary-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-menu :deep(.el-menu-item:hover) {
|
||||||
|
background-color: var(--el-color-primary-light-8);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user