灵境万象企业官网

项目简介

灵境万象企业官网是基于 Docusaurus 构建的专业AI企业级网站，采用现代化设计语言，展示 AI 驱动的健康产品和技术实力，打造符合国际企业标准的在线品牌形象。

🚀 核心功能

1. 企业级现代化官网

• 专业UI设计：采用企业级设计语言，毛玻璃效果、动态渐变、微交互
• 响应式架构：完美适配桌面、平板、移动设备
• 企业级品牌系统：科技蓝主色调，渐变色彩体系，一致性设计
• 多语言支持：中文/英文双语切换，国际化标准 ✅
• SEO优化：完善的元数据、结构化数据、搜索引擎友好

2. 创新首页设计

• 沉浸式Hero区域：粒子动画背景、动态文字效果、实时数据展示
• 公司摘要展示：打字机效果展示中英文公司介绍，语言切换功能 ✅
• 数据统计展示：AI算法模型、数据处理能力、系统可用性等关键指标
• 企业级解决方案：智能健康管理、数据驱动决策、AI分析引擎
• 技术栈展示：TensorFlow、PyTorch、Kubernetes等前沿技术
• 客户案例证言：华为、阿里巴巴、腾讯等企业合作案例
• 产品宣传视频：嵌入式视频播放器，专业展示效果
• 多重CTA按钮：立即体验、下载方案等转化路径

3. 视觉交互系统

• 动画效果库：淡入淡出、悬浮变换、滚动视差等微动效
• 毛玻璃设计：backdrop-filter实现的现代化视觉效果
• 渐变动画：CSS keyframes实现的品牌色彩流转
• 交互反馈：按钮悬浮、卡片提升、加载状态等即时反馈
• 滚动优化：平滑滚动、自定义滚动条、性能优化

4. 智能博客系统 ✅

• AI翻译摘要：支持自动生成中文摘要和英文翻译 ✅
• 打字机效果：博客文章摘要使用动态打字机展示效果 ✅
• 中英文切换：文章摘要支持中英文实时切换 ✅
• 标签分类：按技术领域和应用场景分类
• 阅读时长：自动计算文章阅读时间
• 作者信息：支持多作者署名 ✅

5. AI内容生成（核心创新）

• 本地大模型集成：调用 ollama deepseek-r1:70b 模型
• 自动摘要生成：为博客文章生成简洁中文摘要
• 智能翻译：将中文内容翻译为专业英文
• CI/CD自动化：构建时自动处理文章内容

🎨 设计系统

色彩体系

• 主色调：科技蓝 (#00b4d8) - 专业、可信、科技感
• 辅助色：深蓝渐变 (#667eea → #764ba2) - 品牌深度
• 强调色：亮蓝 (#48cae4) - 交互提示
• 中性色：灰度系统 (#f8fafc → #1e293b) - 内容层次

视觉效果

• 毛玻璃效果：backdrop-filter blur(20px) 实现现代感
• 渐变系统：linear-gradient 创建视觉深度
• 阴影层次：三级阴影系统营造空间感
• 动画缓动：cubic-bezier(0.4, 0, 0.2, 1) 自然过渡

字体系统

• 中文字体：PingFang SC / Microsoft YaHei - 清晰易读
• 英文字体：Helvetica Neue / Arial - 国际标准
• 字重层次：300-800 权重体系
• 字间距优化：letter-spacing -0.02em 提升阅读体验

🛠 技术架构

前端技术栈

• Docusaurus 3.5.2：现代化静态网站生成器
• React 18：组件化开发，函数式编程
• CSS3高级特性：Grid、Flexbox、backdrop-filter、CSS变量
• 响应式设计：Mobile-first设计理念
• TypeScript支持：类型安全开发

性能优化

• 代码分割：按需加载，减少首屏时间
• 图片优化：WebP格式，懒加载，响应式图片
• CSS优化：关键路径CSS内联，非关键CSS异步加载
• 字体优化：font-display: swap，字体预加载
• 缓存策略：浏览器缓存，CDN缓存优化

后端服务

• FastAPI：高性能API服务框架
• Ollama集成：本地大模型推理服务
• deepseek-r1:70b：70B参数的智能语言模型
• Python脚本：内容处理和自动化工具

DevOps工具链

• Docker多阶段构建：优化容器镜像大小
• Nginx部署：高性能静态文件服务
• GitLab CI/CD：4阶段自动化流水线
• 健康检查：服务可用性监控

📁 项目结构

lingjing-website/
├── blog/                           # 博客文章目录
│   ├── 2024-01-01-ai-driven-health-future.md
│   └── 2024-01-15-smart-health-monitoring.md
├── src/                            # 源码目录
│   ├── pages/                      # 页面组件
│   │   ├── index.js               # 首页组件（企业级升级版）
│   │   └── index.module.css       # 首页样式（现代化设计）
│   └── css/custom.css             # 全局样式定制（企业级主题）
├── static/                         # 静态资源
│   ├── videos/lingjing.mp4        # 宣传视频
│   ├── ppt/lingjing.pdf          # 产品介绍PPT
│   └── img/lingjing-logo.png     # 企业Logo
├── scripts/                        # 自动化脚本
│   ├── generate_summary_translation.py  # 翻译摘要生成
│   ├── fastapi_llm_server.py      # LLM服务接口
│   └── requirements.txt           # Python依赖
├── docusaurus.config.js           # Docusaurus配置
├── package.json                   # Node.js依赖
├── Dockerfile                     # Docker构建文件
├── nginx.conf                     # Nginx配置
└── .gitlab-ci.yml                # CI/CD流水线

🎯 企业级功能特性

首页区域功能

1. 沉浸式Hero区域

   • 粒子动画背景效果
   • 动态文字发光效果
   • 实时数据统计展示
   • 双重CTA按钮

2. 数据统计展示

   • 20+ AI算法模型
   • TB级数据处理能力
   • 毫秒级响应时间
   • 99.9%系统可用性

3. 企业级解决方案

   • AI智能分析：多维度健康监测
   • 智能健康管理：企业级平台
   • 数据驱动决策：ROI评估报告

4. 前沿技术栈

   • AI框架：TensorFlow、PyTorch
   • 云原生：Kubernetes、Docker
   • 数据库：Redis、PostgreSQL
   • 云计算：AWS Cloud

5. 客户案例证言

   • 华为：员工满意度提高30%
   • 阿里巴巴：2万名员工服务
   • 腾讯：实时健康监测

6. 合作伙伴展示

   • 华为、阿里巴巴、腾讯
   • 字节跳动、百度、小米

🔧 本地开发

1. 环境准备

# 安装Node.js依赖
npm install

# 安装Python依赖
pip install -r scripts/requirements.txt

# 确保ollama已安装并运行deepseek-r1:70b模型
ollama pull deepseek-r1:70b
ollama serve

2. 启动开发服务器

# 启动Docusaurus开发服务器
PORT=3001 npm start

# 启动LLM API服务（端口18888）
cd scripts && python fastapi_llm_server.py

3. 开发模式功能

• 热重载：代码修改实时预览
• 错误边界：友好的错误提示
• 开发工具：React DevTools支持
• 样式调试：CSS源映射

🔧 故障排除

常见问题解决

1. Docusaurus版本冲突错误

# 错误信息：Invalid name=docusaurus-plugin-sitemap version number=3.8.1
# 解决方案：统一所有Docusaurus包版本
npm install @docusaurus/[email protected] @docusaurus/[email protected] @docusaurus/[email protected] @docusaurus/[email protected] @docusaurus/[email protected] @docusaurus/[email protected]
rm -f package-lock.json && npm install

2. swc-loader模块缺失

# 错误信息：Cannot find module 'swc-loader'
# 解决方案：安装缺失的依赖
npm install --save-dev swc-loader

3. Google Fonts URL解析错误

# 错误信息：Can't resolve 'https:/fonts.googleapis.com/css2?family=Inter...'
# 解决方案：将Google Fonts从customCss移到stylesheets配置
# 在docusaurus.config.js中：
stylesheets: [
  {
    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
    type: 'text/css',
  },
  {
    href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap',
    type: 'text/css',
  },
],

4. BlogPost组件导入错误

# 错误信息：export 'useBlogPost' was not found in '@docusaurus/theme-common'
# 解决方案：删除过时的自定义BlogPostPage组件
# Docusaurus 3.5.2中useBlogPost和BlogPostProvider已不可用
# 删除：src/theme/BlogPostPage/index.js
# 使用：Docusaurus默认的BlogPostPage组件

5. React样式属性错误

# 错误信息：The `style` prop expects a mapping from style properties to values, not a string
# 解决方案1：移除footer配置中的复杂HTML样式，使用简单的copyright文本
# 从：复杂的HTML字符串样式
# 改为：copyright: `Copyright © ${new Date().getFullYear()} 灵境万象科技有限公司`

# 解决方案2：修复Markdown文件中的style属性
# 从：style="border-radius: 12px; box-shadow: var(--ifm-global-shadow-md); margin: 2rem 0;"
# 改为：style={{borderRadius: '12px', boxShadow: 'var(--ifm-global-shadow-md)', margin: '2rem 0'}}

6. React组件未定义错误

# 错误信息：Element type is invalid: expected a string but got: undefined
# 解决方案：删除使用过时API的自定义组件
# Docusaurus 3.5.2中很多内部API已更改或移除
# 删除：src/theme/BlogPostPage/index.js（使用过时的useBlogPost和BlogPostProvider）
# 使用：Docusaurus默认组件，避免使用内部API

7. 博客作者未定义警告

# 警告信息：Some blog authors used in "xxx.md" are not defined in "authors.yml"
# 解决方案：在blog/authors.yml中添加作者定义或设置忽略
# 在docusaurus.config.js中添加：onInlineAuthors: 'ignore'

8. 博客截断标记警告

# 警告信息：Docusaurus found blog posts without truncation markers
# 解决方案：在博客文章中添加 <!-- truncate --> 标记
# 或在docusaurus.config.js中添加：onUntruncatedBlogPosts: 'ignore'

9. 代码块配色问题

# 问题：代码块颜色对比度不够，部分代码看不清楚
# 解决方案：更换高对比度代码主题并自定义CSS样式
# 1. 在docusaurus.config.js中更改prism主题：
#    theme: prismThemes.github (浅色模式)
#    darkTheme: prismThemes.dracula (深色模式)
# 2. 在custom.css中添加代码块样式优化
# 3. 针对不同编程语言设置专门的颜色配置

10. 主页路由问题

# 问题：主页显示博客而不是index.js页面
# 解决方案：修改博客路由配置
# 1. 在docusaurus.config.js中修改blog配置：
#    从：routeBasePath: '/' (博客为主页)
#    改为：routeBasePath: '/blog' (博客在/blog路径)
# 2. 更新navbar导航链接：
#    添加：{label: '首页', to: '/'}
#    修改：{label: '博客', to: '/blog'}
# 3. 更新标签链接路径为/blog/tags/xxx

🌐 域名隧道配置

Cloudflare Tunnel 配置

项目支持通过Cloudflare Tunnel实现域名访问，目前已配置两个域名：

1. omniverseai.net (现有配置)

• 主站: https://omniverseai.net → http://localhost:3001
• www: https://www.omniverseai.net → http://localhost:3001
• Jenkins: https://jenkins.omniverseai.net → http://localhost:8081
• Registry: https://registry.omniverseai.net → http://localhost:5003

2. lingjingwanxiang.cn (新增配置)

• 主站: https://lingjingwanxiang.cn → http://localhost:3001
• www: https://www.lingjingwanxiang.cn → http://localhost:3001
• API: https://api.lingjingwanxiang.cn → http://localhost:30888
• 博客: https://blog.lingjingwanxiang.cn → http://localhost:3001/blog

快速配置

# 安装灵境万象tunnel自动启动
./scripts/install-lingjing-tunnel-autostart.sh

# 检查tunnel状态
./scripts/lingjing-tunnel-status.sh

# 手动启动tunnel
./scripts/lingjing-tunnel-autostart.sh

管理命令

# 查看服务状态
sudo launchctl list | grep lingjing.tunnel

# 重启服务
sudo launchctl unload /Library/LaunchDaemons/com.lingjing.tunnel.autostart.plist
sudo launchctl load /Library/LaunchDaemons/com.lingjing.tunnel.autostart.plist

# 查看日志
tail -f /var/log/lingjing-tunnel-autostart.log

📦 部署方案

# 一键构建和部署到K8s
./scripts/build-and-deploy.sh

# 或指定版本标签
./scripts/build-and-deploy.sh v1.0.0

Docker独立部署

# 构建LLM服务镜像
cd scripts && docker build -f Dockerfile.llm -t lingjing-llm .

# 运行LLM服务 (端口18888)
docker run -d -p 18888:18888 --name llm-service lingjing-llm

# 构建网站镜像
docker build -t lingjing-website .

# 运行网站 (端口80)
docker run -d -p 80:80 --name website lingjing-website

性能优化部署

• Nginx配置：Gzip压缩、浏览器缓存
• CDN集成：静态资源加速
• 负载均衡：多实例部署
• 监控告警：Prometheus + Grafana

🤖 AI功能说明

LLM服务接口 (端口18888)

• GET /：服务状态信息
• GET /health：服务健康检查
• POST /v1/chat/completions：兼容OpenAI格式的聊天接口
• POST /generate_summary：生成中文摘要
• POST /generate_translation：生成英文翻译
• POST /process_blog：同时生成摘要和翻译
• GET /docs：API文档 (Swagger UI)

📊 升级改进记录

🆕 最新改进 (v2.3 多语言与交互优化)

• 多语言网站支持：完整的中英文双语网站架构
• 英文主页：英文版主页内容和组件，包含公司摘要打字机效果
• 博客翻译：两篇核心博客文章的完整英文翻译
• 摘要组件：支持中英文切换的博客摘要组件
• 打字机效果：公司简介和博客摘要的动态打字机展示
• 语言切换：导航栏语言切换功能，支持路由跳转
• 作者系统：中英文作者信息配置

🆕 前期改进 (v2.2 UI优化)

• 代码块配色彻底优化：强制覆盖默认主题样式
• 语法高亮完全重写：浅色/深色模式独立配色方案
• Token样式强化：关键字、字符串、函数等清晰区分
• 缓存清理：删除.docusaurus缓存确保样式生效
• 路由结构修复：主页显示index.js，博客移至/blog路径

🆕 稳定性修复 (v2.1)

• Docusaurus版本统一：修复3.5.2与3.8.1版本冲突问题
• 依赖包修复：安装缺失的swc-loader模块
• Google Fonts配置：修复外部字体加载问题
• BlogPost组件修复：删除过时的自定义BlogPostPage组件
• React样式修复：修复footer和Markdown文件中的字符串样式属性
• 组件兼容性修复：删除使用过时API的自定义组件
• 故障排除文档：添加常见问题解决方案
• 服务器稳定性：确保开发服务器正常运行

🆕 企业级升级 (v2.0)

• 沉浸式Hero区域：粒子背景、动态效果、数据展示
• 企业级数据统计：核心指标可视化展示
• 解决方案展示：详细功能特性描述
• 技术栈展示：前沿技术能力证明
• 客户案例证言：知名企业合作背书
• 毛玻璃视觉效果：现代化backdrop-filter设计
• 渐变动画系统：品牌色彩动态效果
• 交互微动效：悬浮、点击、滚动反馈
• 响应式优化：移动端体验提升
• 性能优化：加载速度和渲染性能

✅ 已实现功能

• Docusaurus项目初始化
• 企业级主题定制（科技蓝）
• 响应式首页设计
• 视频和PPT下载功能
• 博客系统配置
• FastAPI LLM服务
• AI翻译和摘要生成
• Docker多阶段构建
• GitLab CI/CD流水线
• 示例博客文章

🚧 待扩展功能

• 用户认证系统
• 评论和互动功能
• 高级SEO优化
• A/B测试框架
• 实时聊天支持
• 内容管理后台
• 多模型支持
• 数据分析面板

💡 使用说明

页面导航

• 首页：企业介绍、产品展示、技术实力
• 博客：AI健康、技术分享、行业洞察
• 产品介绍：详细产品功能和方案
• 语言切换：中英文双语支持

交互功能

• CTA按钮：立即体验、下载方案
• 视频播放：产品宣传视频
• 悬浮效果：卡片、按钮动态反馈
• 滚动动画：页面滚动视觉效果

🤝 贡献指南

1. Fork项目到您的GitHub账户
2. 创建特性分支：git checkout -b feature/new-feature
3. 提交更改：git commit -am 'Add new feature'
4. 推送分支：git push origin feature/new-feature
5. 提交Pull Request

📄 许可证

本项目采用MIT许可证，详见LICENSE文件。

🚀 快速开始

开发环境 (推荐)

# 1. 克隆项目
git clone <repository-url>
cd lingjing-website

# 2. 一键设置开发环境
./scripts/setup-dev.sh

# 或者分步设置:
# ./scripts/start-dev.sh    # 启动开发服务器
# ./scripts/dev-status.sh   # 检查状态
# ./scripts/stop-dev.sh     # 停止服务器

# 3. 访问服务
# 本地开发: http://localhost:3001
# 外网访问: http://42.193.226.141:8080 (通过FRP)
# 域名访问: http://lingjingwanxiang.cn (通过FRP)

生产环境

# 1. 克隆项目
git clone <repository-url>
cd lingjing-website

# 2. 一键部署到K8s
./scripts/build-and-deploy.sh

# 3. 访问服务
# 网站: http://localhost:30001 (企业级首页)
# LLM API: http://localhost:18888
# API文档: http://localhost:18888/docs

🛠️ 开发环境管理

开发服务器管理

# 启动开发服务器
./scripts/start-dev.sh

# 停止开发服务器
./scripts/stop-dev.sh

# 检查开发环境状态
./scripts/dev-status.sh

开发环境访问

• 本地开发: http://localhost:3001
• 英文版: http://localhost:3001/en/
• 外网访问: http://42.193.226.141:8080 (通过FRP)
• 域名访问: http://lingjingwanxiang.cn (通过FRP)

多语言支持

• 中文版: 默认语言，访问根路径
• 英文版: 访问 /en/ 路径
• 博客: 支持中英文双语
• 修复多语言问题: ./scripts/fix-i18n.sh

🌐 FRP内网穿透配置

配置说明

项目支持通过FRP将本地服务透传到公网服务器，实现外网访问：

服务器信息

• 服务器地址: 42.193.226.141
• 服务器端口: 7000
• 本地服务: localhost:3001 (灵境万象网站)

穿透端口

• HTTP访问: 42.193.226.141:8080
• HTTPS访问: 42.193.226.141:8443
• 管理界面: http://127.0.0.1:7400

使用方法

1. 启动FRP客户端

# 使用toml配置文件启动
./scripts/start-frpc-toml.sh

# 或手动启动
cd /Users/brunogao/work/tools/frp
./frpc -c frpc.toml

2. 检查状态

# 检查frpc运行状态
./scripts/frpc-toml-status.sh

3. 停止服务

# 停止frpc客户端
./scripts/stop-frpc-toml.sh

4. 访问网站

• 本地访问: http://localhost:3001
• 外网HTTP: http://42.193.226.141:8080
• 外网HTTPS: https://42.193.226.141:8443

配置文件

• 主配置: /Users/brunogao/work/tools/frp/frpc.toml
• 日志文件: /Users/brunogao/work/tools/frp/frpc.log
• 管理界面: http://127.0.0.1:7400 (用户名: admin, 密码: admin123)

📞 联系我们

• 企业官网：https://lingjing.com
• 技术支持：[email protected]
• 商务合作：[email protected]

---

灵境万象 - AI驱动健康新未来 | 企业级AI解决方案提供商

🔄 自动化CI/CD流程

GitLab CI (传统)

项目包含完整的 GitLab CI/CD 配置 (.gitlab-ci.yml)，支持：

• 📝 博客翻译摘要自动生成
• 🏗️ 项目自动构建
• 🐳 Docker镜像构建和推送
• ☸️ Kubernetes自动部署

Gitea Actions (推荐)

项目现已支持 Gitea Actions 工作流 (.gitea/workflows/ci-cd.yml)，提供：

• 🚀 自动触发：推送到 main/develop 分支时自动执行
• 📝 智能内容处理：连接现有LLM服务(lingjing-llm-service)生成博客翻译和摘要
• 🏗️ 前端构建：Node.js 18 环境下的现代化构建
• 🐳 容器化部署：构建和推送网站Docker镜像
• ☸️ K8s部署：零宕机滚动更新部署到现有集群
• 🔍 健康检查：自动验证网站和LLM服务可用性

LLM服务配置

项目使用现有的独立部署LLM服务：

• 集群内地址：lingjing-llm-service.lingjing-llm:18888
• 外部访问地址：localhost:30888
• 模型：deepseek-r1:70b (真实ollama服务)
• Ollama后端：192.168.1.83:11434

触发CI/CD流程

# 提交更改到main分支触发完整流水线
git add .
git commit -m "feat: 更新企业级UI设计和CI/CD配置"
git push origin main

工作流阶段

1. 预处理阶段 - 连接现有LLM服务生成博客翻译摘要
2. 构建阶段 - 前端项目构建
3. Docker化阶段 - 网站镜像构建和推送
4. 部署阶段 - 网站K8s滚动更新部署
5. 验证阶段 - 网站和LLM服务健康检查