geekai/web/src/App.vue

<template>
  <el-config-provider>
    <router-view />
  </el-config-provider>
</template>

<script setup>
import { checkSession, getSystemInfo } from '@/store/cache'
import { useSharedStore } from '@/store/sharedata'
import { showMessageInfo } from '@/utils/dialog'
import { initThumbTemplate, isChrome, isMobile } from '@/utils/libs'
import { ElConfigProvider } from 'element-plus'
import { onMounted } from 'vue'

const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200)
    super(callback)
  }
}

const store = useSharedStore()
onMounted(() => {
  // 初始化缩略图模板（从后端加载并缓存到localStorage）
  initThumbTemplate()

  // 获取系统参数
  getSystemInfo().then((res) => {
    const link = document.createElement('link')
    link.rel = 'shortcut icon'
    link.href = res.data.logo
    document.head.appendChild(link)
  })
  if (!isChrome() && !isMobile()) {
    showMessageInfo('建议使用 Chrome 浏览器以获得最佳体验。')
  }

  checkSession()
    .then(() => {
      store.setIsLogin(true)
    })
    .catch(() => {})

  // 设置主题
  document.documentElement.setAttribute('data-theme', store.theme)

  const banner = `
  .oooooo.                        oooo              .o.       ooooo 
 d8P'  'Y8b                        888             .888.       888
888            .ooooo.   .ooooo.   888  oooo      .8"888.      888  
888           d88'  88b d88'  88b  888 .8P'      .8'  888.     888  
888     ooooo 888ooo888 888ooo888  888888.      .88ooo8888.    888  
'88.    .88'  888    .o 888    .o  888  88b.   .8'      888.   888  
  Y8bood8P'    Y8bod8P'  Y8bod8P' o888o o888o o88o     o8888o o888o
  `
  console.log('%c' + banner + '', 'color: purple;font-size: 18px;')

  console.log(
    '%c感谢大家为 GeekAI 做出的卓越贡献！',
    "color: green;font-size: 40px;font-family: '微软雅黑';"
  )
  console.log(
    '%c项目源码：https://github.com/yangjian102621/geekai %c 您的 star 对我们非常重要！',
    "color: green;font-size: 20px;font-family: '微软雅黑';",
    "color: red;font-size: 20px;font-family: '微软雅黑';"
  )
})
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}

#app {
  margin: 0 !important;
  padding: 0 !important;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  // --primary-color: #21aa93

  h1 {
    font-size: 2em;
  } /* 通常是 2em */
  h2 {
    font-size: 1.5em;
  } /* 通常是 1.5em */
  h3 {
    font-size: 1.17em;
  } /* 通常是 1.17em */
  h4 {
    font-size: 1em;
  } /* 通常是 1em */
  h5 {
    font-size: 0.83em;
  } /* 通常是 0.83em */
  h6 {
    font-size: 0.67em;
  } /* 通常是 0.67em */
}

.el-overlay-dialog {
  display: flex;
  justify-content: center;
  align-items: center;

  .el-dialog {
    margin: 0;

    .el-dialog__body {
      overflow-y: auto;
      max-height: calc(100vh - 100px);
    }
  }
}

.el-popper.is-customized {
  /* 设置内边距以保证高度为32px */
  padding: 6px 12px;
  background: linear-gradient(180deg, #e1bee7, #7e57c2);
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(180deg, #b39ddb, #7e57c2);
  right: 0;
}

/* 省略显示 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.van-toast--fail {
  background: #fef0f0;
  color: #f56c6c;
}

.van-toast--success {
  background: #d6fbcc;
  color: #07c160;
}
</style>