feat: change theme and index style

web/src/views/Index.vue

@@ -1,178 +1,194 @@
 <template>
-  <div class="index-page" :style="{height: winHeight+'px'}">
-    <div :class="theme.imageBg?'color-bg image-bg':'color-bg'" :style="{backgroundImage:'url('+bgStyle.backgroundImage+')', backgroundColor:bgStyle.backgroundColor}"></div>
+  <div class="index-page">
+    <ThemeChange />
     <div class="menu-box">
-      <el-menu
-          mode="horizontal"
-          :ellipsis="false"
-      >
+      <el-menu mode="horizontal" :ellipsis="false">
         <div class="menu-item">
-          <el-image :src="logo" class="logo" alt="Geek-AI"/>
-          <div class="title" :style="{color:theme.textColor}">{{ title }}</div>
+          <el-image :src="logo" class="logo" alt="Geek-AI" />
         </div>
         <div class="menu-item">
           <span v-if="!license.de_copy">
-            <a :href="docsURL" target="_blank">
-            <el-button :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" class="shadow" round>
-              <i class="iconfont icon-book"></i>
-              <span>文档</span>
-            </el-button>
-          </a>
-
-          <a :href="gitURL" target="_blank">
-            <el-button :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" class="shadow" round>
-              <i class="iconfont icon-github"></i>
-              <span>源码</span>
-            </el-button>
-          </a>
+            <el-tooltip
+              v-if="!license.de_copy"
+              class="box-item"
+              effect="light"
+              content="部署文档"
+              placement="bottom"
+            >
+              <a :href="docsURL" class="link-button" target="_blank">
+                <i class="iconfont icon-book"></i>
+              </a>
+            </el-tooltip>
+            <el-tooltip
+              v-if="!license.de_copy"
+              class="box-item"
+              effect="light"
+              content="项目源码"
+              placement="bottom"
+            >
+              <a :href="gitURL" class="link-button" target="_blank">
+                <i class="iconfont icon-github"></i>
+              </a>
+            </el-tooltip>
           </span>
 
           <span v-if="!isLogin">
-            <el-button :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" @click="router.push('/login')" class="shadow" round>登录</el-button>
-            <el-button :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" @click="router.push('/register')" class="shadow" round>注册</el-button>
+            <!-- <el-button @click="router.push('/login')" class="shadow" round
+              >登录</el-button
+            >
+            <el-button @click="router.push('/register')" class="shadow" round
+              >注册</el-button
+            > -->
+            <el-button
+              @click="router.push('/login')"
+              class="btn-go animate__animated animate__pulse animate__infinite"
+              round
+              >登录/注册</el-button
+            >
           </span>
         </div>
       </el-menu>
     </div>
     <div class="content">
-      <h1 :style="{color:theme.textColor}">欢迎使用 {{ title }}</h1>
-      <p :style="{color:theme.textColor}">{{ slogan }}</p>
+      <h1 class="animate__animated animate__backInDown">
+        {{ title }}
+      </h1>
+      <div class="msg-text cursor-ani">
+        <span
+          v-for="(char, index) in displayedChars"
+          :key="index"
+          :style="{ color: rainbowColor(index) }"
+        >
+          {{ char }}
+        </span>
+      </div>
 
-      <div class="navs">
-        <el-space wrap>
-          <div v-for="item in navs" :key="item.url" class="nav-item">
-            <el-button @click="router.push(item.url)" :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" class="shadow" :dark="false">
-              <i :class="'iconfont '+iconMap[item.url]"></i>
-              <span>{{item.name}}</span>
-            </el-button>
+      <div class="navs animate__animated animate__backInDown">
+        <el-space wrap :size="14">
+          <div
+            v-for="item in navs"
+            :key="item.url"
+            class="nav-item-box"
+            @click="router.push(item.url)"
+          >
+            <i :class="'iconfont ' + iconMap[item.url]"></i>
+            <div>{{ item.name }}</div>
           </div>
         </el-space>
       </div>
     </div>
 
-    <footer-bar :text-color="theme.textColor" />
+    <footer-bar />
   </div>
 </template>
 
 <script setup>
-
-import {onMounted, ref} from "vue";
-import {useRouter} from "vue-router";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
-import {httpGet} from "@/utils/http";
-import {ElMessage} from "element-plus";
-import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
-import {isMobile} from "@/utils/libs";
+import ThemeChange from "@/components/ThemeChange.vue";
+import { httpGet } from "@/utils/http";
+import { ElMessage } from "element-plus";
+import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
+import { isMobile } from "@/utils/libs";
 
-const router = useRouter()
+const router = useRouter();
 
 if (isMobile()) {
-  router.push("/mobile/index")
+  router.push("/mobile/index");
 }
 
-const title = ref("")
-const logo = ref("")
-const slogan = ref("")
-const license = ref({de_copy: true})
-const winHeight = window.innerHeight - 150
-const isLogin = ref(false)
-const docsURL = ref(process.env.VUE_APP_DOCS_URL)
-const gitURL = ref(process.env.VUE_APP_GIT_URL)
-const navs  = ref([])
-const btnColors = ref([
-  {bgColor: "#fff143", textColor: "#50616D"},
-  {bgColor: "#eaff56", textColor: "#50616D"},
-  {bgColor: "#bddd22", textColor: "#50616D"},
-  {bgColor: "#1bd1a5", textColor: "#50616D"},
-  {bgColor: "#e0eee8", textColor: "#50616D"},
-  {bgColor: "#7bcfa6", textColor: "#50616D"},
-  {bgColor: "#bce672", textColor: "#50616D"},
-  {bgColor: "#44cef6", textColor: "#ffffff"},
-  {bgColor: "#70f3ff", textColor: "#50616D"},
-  {bgColor: "#fffbf0", textColor: "#50616D"},
-  {bgColor: "#d6ecf0", textColor: "#50616D"},
-  {bgColor: "#88ada6", textColor: "#50616D"},
-  {bgColor: "#30dff3", textColor: "#50616D"},
-  {bgColor: "#d3e0f3", textColor: "#50616D"},
-  {bgColor: "#e9e7ef", textColor: "#50616D"},
-  {bgColor: "#eacd76", textColor: "#50616D"},
-  {bgColor: "#f2be45", textColor: "#50616D"},
-  {bgColor: "#549688", textColor: "#ffffff"},
-  {bgColor: "#758a99", textColor: "#ffffff"},
-  {bgColor: "#41555d", textColor: "#ffffff"},
-  {bgColor: "#21aa93", textColor: "#ffffff"},
-  {bgColor: "#0aa344", textColor: "#ffffff"},
-  {bgColor: "#f05654", textColor: "#ffffff"},
-  {bgColor: "#db5a6b", textColor: "#ffffff"},
-  {bgColor: "#db5a6b", textColor: "#ffffff"},
-  {bgColor: "#8d4bbb", textColor: "#ffffff"},
-  {bgColor: "#426666", textColor: "#ffffff"},
-  {bgColor: "#177cb0", textColor: "#ffffff"},
-  {bgColor: "#395260", textColor: "#ffffff"},
-  {bgColor: "#519a73", textColor: "#ffffff"},
-  {bgColor: "#75878a", textColor: "#ffffff"},
-])
-const iconMap =ref(
-    {
-      "/chat": "icon-chat",
-      "/mj": "icon-mj",
-      "/sd": "icon-sd",
-      "/dalle": "icon-dalle",
-      "/images-wall": "icon-image",
-      "/suno": "icon-suno",
-      "/xmind": "icon-xmind",
-      "/apps": "icon-app",
-      "/member": "icon-vip-user",
-      "/invite": "icon-share",
-      "/luma": "icon-luma",
-    }
-)
-const bgStyle = {}
-const color = btnColors.value[Math.floor(Math.random() * btnColors.value.length)]
-const theme = ref({bgColor: "#ffffff", btnBgColor: color.bgColor, btnTextColor: color.textColor, textColor: "#ffffff", imageBg:true})
+const title = ref("");
+const logo = ref("");
+const slogan = ref("");
+const license = ref({ de_copy: true });
+
+const isLogin = ref(false);
+const docsURL = ref(process.env.VUE_APP_DOCS_URL);
+const gitURL = ref(process.env.VUE_APP_GIT_URL);
+const navs = ref([]);
+
+const iconMap = ref({
+  "/chat": "icon-chat",
+  "/mj": "icon-mj",
+  "/sd": "icon-sd",
+  "/dalle": "icon-dalle",
+  "/images-wall": "icon-image",
+  "/suno": "icon-suno",
+  "/xmind": "icon-xmind",
+  "/apps": "icon-app",
+  "/member": "icon-vip-user",
+  "/invite": "icon-share",
+  "/luma": "icon-luma"
+});
+
+const displayedChars = ref([]);
+const initAnimation = ref("");
+let timer = null; // 定时器句柄
+
+// 初始化间隔时间和随机时间数组
+const interTime = ref(50);
+const interArr = [90, 100, 70, 88, 80, 110, 85, 400, 90, 99];
 
 onMounted(() => {
-  getSystemInfo().then(res => {
-    title.value = res.data.title
-    logo.value = res.data.logo
-    if (res.data.index_bg_url === 'color') {
-      // 随机选取一种颜色
-      theme.value.bgColor = color.bgColor
-      theme.value.btnBgColor = color.bgColor
-      theme.value.textColor = color.textColor
-      theme.value.btnTextColor = color.textColor
-      // 设置背景颜色
-      bgStyle.backgroundColor = theme.value.bgColor
-      bgStyle.backgroundImage = "/images/transparent-bg.png"
-      theme.value.imageBg = false
-    } else if (res.data.index_bg_url) {
-      bgStyle.backgroundImage = res.data.index_bg_url
-    } else {
-      bgStyle.backgroundImage = "/images/index-bg.jpg"
-    }
+  getSystemInfo()
+    .then((res) => {
+      title.value = res.data.title;
+      logo.value = res.data.logo;
+      slogan.value = res.data.slogan;
+      if (timer) clearInterval(timer); // 清除定时器
+      timer = setInterval(setContent, interTime.value);
+    })
+    .catch((e) => {
+      ElMessage.error("获取系统配置失败：" + e.message);
+    });
 
-    slogan.value = res.data.slogan
-  }).catch(e => {
-    ElMessage.error("获取系统配置失败：" + e.message)
-  })
+  getLicenseInfo()
+    .then((res) => {
+      license.value = res.data;
+    })
+    .catch((e) => {
+      license.value = { de_copy: false };
+      ElMessage.error("获取 License 配置失败：" + e.message);
+    });
 
-  getLicenseInfo().then(res => {
-    license.value = res.data
-  }).catch(e => {
-    license.value = {de_copy: false}
-    ElMessage.error("获取 License 配置失败：" + e.message)
-  })
+  httpGet("/api/menu/list?index=1")
+    .then((res) => {
+      navs.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取导航菜单失败：" + e.message);
+    });
 
-  httpGet("/api/menu/list?index=1").then(res => {
-    navs.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取导航菜单失败：" + e.message)
-  })
-
-  checkSession().then(() => {
-    isLogin.value = true
-  }).catch(()=>{})
-})
+  checkSession()
+    .then(() => {
+      isLogin.value = true;
+    })
+    .catch(() => {});
+});
+// 打字机内容逐字符显示
+const setContent = () => {
+  if (initAnimation.value.length >= slogan.value.length) {
+    // 文本已全部输出
+    initAnimation.value = "";
+    displayedChars.value = [];
+    if (timer) clearInterval(timer);
+    timer = setInterval(setContent, interTime.value);
+    return;
+  } else {
+    const nextChar = slogan.value.charAt(initAnimation.value.length);
+    initAnimation.value += slogan.value.charAt(initAnimation.value.length); // 逐字符追加
+    displayedChars.value.push(nextChar);
+    interTime.value = interArr[Math.floor(Math.random() * interArr.length)]; // 设置随机间隔
+    if (timer) clearInterval(timer);
+    timer = setInterval(setContent, interTime.value);
+  }
+};
+// 计算彩虹色
+const rainbowColor = (index) => {
+  const hue = (index * 40) % 360; // 每个字符间隔40度，形成彩虹色
+  return `hsl(${hue}, 90%, 50%)`; // 色调(hue)，饱和度(70%)，亮度(50%)
+};
 </script>
 
 <style lang="stylus" scoped>