130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<template>
|
|
<ele-config-provider
|
|
:map-key="MAP_KEY"
|
|
:keep-alive="keepAlive"
|
|
:license="LICENSE_CODE"
|
|
>
|
|
<a-config-provider :locale="antLocale">
|
|
<router-view />
|
|
<button v-if="showAiEntry" class="ai-entry" type="button" @click="goAi">
|
|
<span class="ant-back-top-icon">
|
|
<img src="@/assets/logo-main.png" alt="AI团宝" />
|
|
</span>
|
|
<span class="ai-entry__text">AI团宝</span>
|
|
</button>
|
|
</a-config-provider>
|
|
</ele-config-provider>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { unref, computed } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useThemeStore } from "@/store/modules/theme";
|
|
import {
|
|
MAP_KEY,
|
|
MAP_CODE,
|
|
LICENSE_CODE,
|
|
TAB_KEEP_ALIVE
|
|
} from "@/config/setting";
|
|
import { useSetDocumentTitle } from "@/utils/document-title-util";
|
|
import { useLocale } from "@/i18n/use-locale";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const themeStore = useThemeStore();
|
|
const { showTabs } = storeToRefs(themeStore);
|
|
|
|
// 恢复主题
|
|
themeStore.recoverTheme();
|
|
|
|
// 切换路由自动更新浏览器页签标题
|
|
useSetDocumentTitle();
|
|
|
|
// 国际化配置
|
|
const { antLocale } = useLocale();
|
|
|
|
// 用于内链 iframe 组件获取 KeepAlive
|
|
const keepAlive = computed(() => TAB_KEEP_ALIVE && unref(showTabs));
|
|
const showAiEntry = computed(() => route.path !== "/ai");
|
|
|
|
const goAi = () => {
|
|
router.push("/ai");
|
|
};
|
|
|
|
window._AMapSecurityConfig = {
|
|
securityJsCode: MAP_CODE
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ai-entry {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 10%;
|
|
z-index: 1000;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 10px 12px;
|
|
border: none;
|
|
border-radius: 20px 0 0 20px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 246, 255, 0.96));
|
|
box-shadow: 0 18px 34px rgba(30, 96, 181, 0.2);
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.ai-entry:hover {
|
|
transform: translate(-4px, -50%);
|
|
box-shadow: 0 22px 38px rgba(30, 96, 181, 0.24);
|
|
}
|
|
|
|
.ai-entry :deep(.ant-back-top-icon) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(135deg, #1d85ff, #6fc8ff);
|
|
}
|
|
|
|
.ai-entry :deep(.ant-back-top-icon img) {
|
|
width: 38px;
|
|
height: 38px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.ai-entry__text {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #15539a;
|
|
line-height: 1;
|
|
//writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.ai-entry {
|
|
padding: 12px 8px 10px;
|
|
}
|
|
|
|
.ai-entry :deep(.ant-back-top-icon) {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.ai-entry :deep(.ant-back-top-icon img) {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.ai-entry__text {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|