260720

src/App.vue

@@ -6,6 +6,12 @@
   >
     <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>
@@ -13,6 +19,7 @@
 <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,
@@ -23,6 +30,8 @@ import {
 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);
 
@@ -37,7 +46,84 @@ 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>