update

2026-05-06 14:51:24 +08:00
parent 132b2fc310
commit b248d526d2
9 changed files with 2450 additions and 37 deletions
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vitepress'

 export default defineConfig({
-  title: 'Jiscuss',
+  title: 'Jiscuss - 简单,轻量基于 Java 的开源论坛(皆是卡斯)',
  description: 'Jiscuss，一个简单的、基于 Java 的开源论坛。',
  lang: 'zh-CN',
  lastUpdated: true,
@@ -25,7 +25,7 @@ export default defineConfig({
      {
        text: '联系作者',
        items: [
-          { text: 'Yaoyuan.io', link: 'http://www.yaoyuan.io' },
+          { text: 'CYY.IM', link: 'http://www.cyy.im' },
          { text: 'GitHub', link: 'https://github.com/chuyaoyuan' },
          { text: 'WeChat', link: 'http://www.chuyaoyuan.com' }
        ]
@@ -69,7 +69,7 @@ export default defineConfig({
    },
    footer: {
      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2018-present Yaoyuan'
+      copyright: 'Copyright © 2019-present Yaoyuan | <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备15002723号-6</a>'
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/chuyaoyuan' }
@@ -0,0 +1,126 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const wrapper = ref(null)
+const mouseX = ref(0)
+const mouseY = ref(0)
+
+const handleMouseMove = (e) => {
+  if (!wrapper.value) return
+  const rect = wrapper.value.getBoundingClientRect()
+  const x = e.clientX - rect.left - rect.width / 2
+  const y = e.clientY - rect.top - rect.height / 2
+  mouseX.value = x * 0.1
+  mouseY.value = y * 0.1
+}
+
+onMounted(() => {
+  window.addEventListener('mousemove', handleMouseMove)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', handleMouseMove)
+})
+
+const icons = [
+  { char: '💬', top: '10%', left: '20%', size: '3rem', delay: '0s', z: 2 },
+  { char: '👍', top: '70%', left: '10%', size: '2.5rem', delay: '-2s', z: 3 },
+  { char: '📰', top: '15%', left: '75%', size: '2.8rem', delay: '-1s', z: 1 },
+  { char: '💡', top: '65%', left: '80%', size: '3.5rem', delay: '-3s', z: 4 },
+  { char: '📝', top: '40%', left: '85%', size: '2.2rem', delay: '-1.5s', z: 2 },
+  { char: '🧩', top: '80%', left: '50%', size: '2.6rem', delay: '-0.5s', z: 1 },
+  { char: '💎', top: '30%', left: '10%', size: '2.4rem', delay: '-2.5s', z: 3 },
+  { char: '🔥', top: '40%', left: '45%', size: '4.5rem', delay: '-0.8s', z: 5 }, // 中心醒目
+]
+</script>
+
+<template>
+  <div class="hero-anim-wrapper" ref="wrapper" :style="{ transform: `translate(${mouseX}px, ${mouseY}px)` }">
+    <div class="glow-bg"></div>
+    <div v-for="(icon, idx) in icons" :key="idx" class="floating-icon" :style="{
+      top: icon.top,
+      left: icon.left,
+      fontSize: icon.size,
+      animationDelay: icon.delay,
+      zIndex: icon.z
+    }">
+      <div class="icon-inner">
+        {{ icon.char }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hero-anim-wrapper {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  max-width: 400px;
+  margin: 0 auto;
+  transition: transform 0.1s ease-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1000px;
+}
+
+.glow-bg {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(34, 150, 242, 0.4) 0%, rgba(34, 150, 242, 0) 70%);
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: pulse 4s infinite alternate;
+  z-index: 0;
+}
+
+.floating-icon {
+  position: absolute;
+  will-change: transform;
+  animation: float 6s ease-in-out infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: drop-shadow(0 8px 16px rgba(34,150,242,0.3));
+}
+
+.icon-inner {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 10px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+
+.dark .icon-inner {
+  background: rgba(30, 30, 30, 0.7);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.icon-inner:hover {
+  transform: scale(1.2) rotate(10deg);
+}
+
+@keyframes float {
+  0% { transform: translateY(0px) rotate(0deg); }
+  33% { transform: translateY(-15px) rotate(5deg); }
+  66% { transform: translateY(10px) rotate(-5deg); }
+  100% { transform: translateY(0px) rotate(0deg); }
+}
+
+@keyframes pulse {
+  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
+  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+}
+</style>
@@ -1,4 +1,13 @@
 import DefaultTheme from 'vitepress/theme'
 import './styles.css'
+import HeroAnim from './components/HeroAnim.vue'
+import { h } from 'vue'

-export default DefaultTheme
+export default {
+  ...DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'home-hero-image': () => h(HeroAnim)
+    })
+  }
+}
@@ -1,18 +1,57 @@
 :root {
-  --vp-c-brand-1: #424242;
-  --vp-c-brand-2: #5f5f5f;
-  --vp-c-brand-3: #232321;
+  --vp-c-brand-1: #2296F2;
+  --vp-c-brand-2: #4ba8f5;
+  --vp-c-brand-3: #1a7ecf;
+  --vp-nav-bg-color: rgba(255, 255, 255, 0.7);
  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(120deg, #232321 30%, #6b7280);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #424242 50%, #d1d5db 50%);
-  --vp-home-hero-image-filter: blur(56px);
+  --vp-home-hero-name-background: linear-gradient(135deg, #2296F2 0%, #4ba8f5 50%, #87cdff 100%);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #e5e7eb 0%, #9ca3af 50%, #f3f4f6 100%);
+  --vp-home-hero-image-filter: blur(52px);
 }

+.dark {
+  --vp-nav-bg-color: rgba(27, 27, 31, 0.7);
+}
+
+/* 导航栏毛玻璃效果 */
+.VPNav {
+  backdrop-filter: blur(8px);
+}
+
+/* Hero 图片 */
 .VPHomeHero .image-src {
-  max-width: 600px;
-  border-radius: 1rem;
+  max-width: 320px;
+  border-radius: 1.2rem;
 }

+/* Feature 卡片 */
 .VPFeature {
-  border-color: rgba(66, 66, 66, 0.12);
+  border-color: rgba(34, 150, 242, 0.15);
+  transition: box-shadow 0.25s, border-color 0.25s;
+}
+
+.VPFeature:hover {
+  box-shadow: 0 4px 20px rgba(34, 150, 242, 0.12);
+  border-color: rgba(34, 150, 242, 0.35);
+}
+
+/* 首页预览截图 */
+.vp-doc img {
+  display: block;
+  margin: 1.5rem auto;
+  max-width: 100%;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* 暗色模式 */
+.dark .VPFeature:hover {
+  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+.dark .VPHome .vp-doc img {
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
+  border-color: rgba(255, 255, 255, 0.08);
 }
@@ -17,7 +17,7 @@ module.exports = {
      { text: 'Contact', 
        icon: 'reco-message',
        items: [
-          { text: 'Yaoyuan.io(作者)', link: 'http://www.yaoyuan.io', icon: 'reco-npm' },
+          { text: 'CYY.IM(作者)', link: 'http://www.cyy.im', icon: 'reco-npm' },
          { text: 'GitHub(作者)', link: 'https://github.com/chuyaoyuan', icon: 'reco-github' },
          
          { text: 'WeChat(作者)', link: 'http://www.chuyaoyuan.com', icon: 'reco-wechat' },
@@ -49,7 +49,7 @@ module.exports = {
    // 备案号
    record: '备案号',
    // 项目开始时间
-    startYear: '2018'
+    startYear: '2019'
    /**
     * 密钥 (if your blog is private)
     */
@@ -3,11 +3,8 @@ layout: home

 hero:
  name: Jiscuss
-  text: 基于 Java 的开源论坛
-  tagline: 简单、轻量、开源，面向发帖、回帖、用户管理与评论等论坛基础场景。
-  image:
-    src: /hero.png
-    alt: Jiscuss
+  text: 简洁 · 轻量 · 开源
+  tagline: 基于 Java 的开源论坛，提供发帖、回帖、用户管理与评论等核心能力。
  actions:
    - theme: brand
      text: 快速上手
@@ -17,32 +14,30 @@ hero:
      link: http://demo.jiscuss.com

 features:
-  - title: 简洁至上
+  - icon: ✨
+    title: 简洁至上
    details: 开发一款看着开心、写着顺手、使用简单的开源论坛。
-  - title: Java 驱动
+  - icon: ☕
+    title: Java 驱动
    details: 基于 Java，使用 Spring Boot、Spring JPA、H2 Database 与 Semantic UI 构建。
-  - title: 持续完善
+  - icon: 🔄
+    title: 持续完善
    details: 目前功能仍在迭代中，后续会持续补充文档、完善功能与优化体验。
 ---

-::: tip 介绍
-1. 这是一个开源 Java 项目；<br>
-2. 项目追求极简；<br>
-3. 你可以打开 [Jiscuss Demo](http://demo.jiscuss.com) 来查看效果。
-:::
+Jiscuss 是一个开源 Java 论坛项目，追求极简体验，提供发帖、回帖、评论与用户管理等核心能力。欢迎访问 [Jiscuss Demo](http://demo.jiscuss.com) 在线体验。

-## 安装
-
-**Build**
+## 快速体验

 ```bash
-hello world！
+# 克隆项目
+git clone https://github.com/chuyaoyuan/jiscuss.git
+cd jiscuss

-# or
-
-hello JAVA！
+# 启动（需要 JDK 8+）
+./mvnw spring-boot:run
 ```

-## 文档站升级说明
+## 预览

-当前官方页与文档页已升级到 VitePress 2.0 架构，保留原有文章内容与静态资源，并补充了本地搜索、导航、侧边栏、最后更新时间与预览脚本。
+![Jiscuss Demo 预览](/demo.png)