feat: 修复前端空白页面和Nacos配置问题

✅ 前端修复完成: - 修复空白页面问题，部署正确的首页内容 - 访问地址: http://47.111.10.27/emotion/happy/ - 与开发环境完全一致的Vue首页 🔧 Nacos配置修复: - 修复微服务注册问题 - 统一日志路径配置 - 优化部署脚本 📋 脚本优化: - 删除多余部署脚本 - 保留核心脚本 - 支持参数控制
2025-07-21 16:48:00 +08:00
parent 88e391f71c
commit f9ff8302ae
18 changed files with 1475 additions and 724 deletions
@@ -0,0 +1,367 @@
+#!/bin/bash
+
+# 部署静态前端页面
+# 作者: emotion-museum
+# 日期: 2025-07-21
+
+set -e
+
+REMOTE_HOST="root@47.111.10.27"
+REMOTE_DIR="/data/www/emotion/happy"
+
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+log_info() {
+    echo -e "${BLUE}[INFO]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+log_error() {
+    echo -e "${RED}[ERROR]${NC} $(date '+%Y-%m-%d %H:%M:%S') - $1"
+}
+
+# 检查SSH连接
+check_connection() {
+    log_info "检查远程服务器连接..."
+    if ssh -o ConnectTimeout=10 "$REMOTE_HOST" "echo 'SSH连接成功'" > /dev/null 2>&1; then
+        log_success "远程服务器连接正常"
+    else
+        log_error "无法连接到远程服务器: $REMOTE_HOST"
+        exit 1
+    fi
+}
+
+# 创建静态前端页面
+create_static_frontend() {
+    log_info "创建静态前端页面..."
+    
+    # 创建临时目录
+    mkdir -p /tmp/emotion-static-frontend
+    
+    # 创建index.html
+    cat > /tmp/emotion-static-frontend/index.html << 'EOF'
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>开心APP - 你的情绪陪伴使者</title>
+    <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@4/dist/reset.css" rel="stylesheet">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@4/dist/antd.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f5f5f5;
+        }
+        .home-page { min-height: 100vh; }
+        .header {
+            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
+            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
+            padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .logo { font-size: 24px; font-weight: bold; color: #4A90E2; }
+        .nav-menu {
+            display: flex;
+            gap: 24px;
+        }
+        .nav-link {
+            color: #333;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+        .nav-link:hover {
+            color: #4A90E2;
+        }
+        .header-actions {
+            display: flex;
+            gap: 12px;
+        }
+        .login-btn, .start-btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+        .login-btn {
+            background: transparent;
+            color: #333;
+        }
+        .login-btn:hover {
+            color: #4A90E2;
+        }
+        .start-btn {
+            background: #4A90E2;
+            color: white;
+        }
+        .start-btn:hover {
+            background: #357abd;
+            transform: translateY(-1px);
+        }
+        .hero {
+            padding: 120px 20px 60px;
+            background: white;
+            text-align: center;
+        }
+        .hero h1 {
+            color: #4A90E2;
+            font-size: 3rem;
+            margin-bottom: 20px;
+            background: linear-gradient(45deg, #4A90E2, #F5A623);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero p {
+            font-size: 1.5rem;
+            color: #888;
+            margin-bottom: 40px;
+        }
+        .hero img {
+            width: 300px;
+            height: auto;
+            margin-bottom: 40px;
+            border-radius: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        .features {
+            padding: 80px 20px;
+            background: #F7F8FA;
+        }
+        .features-title {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+        .features-title h2 {
+            font-size: 2rem;
+            color: #333;
+            margin-bottom: 16px;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 32px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .feature-card {
+            background: white;
+            padding: 32px;
+            border-radius: 16px;
+            text-align: center;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+        .feature-card h3 {
+            color: #333;
+            margin-bottom: 16px;
+        }
+        .feature-card p {
+            color: #888;
+            line-height: 1.6;
+        }
+        .footer {
+            background: #333;
+            color: white;
+            text-align: center;
+            padding: 40px 20px;
+        }
+        .footer a {
+            color: #4A90E2;
+            text-decoration: none;
+        }
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 2rem; }
+            .hero img { width: 250px; }
+            .nav-menu { display: none; }
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="home-page">
+            <!-- 头部导航 -->
+            <header class="header">
+                <div class="logo">开心APP</div>
+                <nav class="nav-menu">
+                    <a href="#" class="nav-link">聊天</a>
+                    <a href="#" class="nav-link">日记</a>
+                    <a href="#" class="nav-link">展板</a>
+                </nav>
+                <div class="header-actions">
+                    <button class="login-btn" @click="goToLogin">登录</button>
+                    <button class="start-btn" @click="goToChat">免费开始</button>
+                </div>
+            </header>
+
+            <!-- 主要内容 -->
+            <div class="hero">
+                <h1>你好，我是开开</h1>
+                <p>你的情绪陪伴使者</p>
+                
+                <img
+                    src="https://r2.flowith.net/files/1517c93c-849d-4a9b-94b6-d61aa295a8a1/1752600429516-image-1752600425876-cnlfpkbrh@1024x1024.png"
+                    alt="开开"
+                />
+                
+                <div>
+                    <button class="start-btn" @click="goToChat" style="font-size: 18px; padding: 12px 32px;">
+                        开始一段对话
+                    </button>
+                </div>
+            </div>
+
+            <!-- 功能介绍 -->
+            <div class="features">
+                <div class="features-title">
+                    <h2>发现你的专属陪伴</h2>
+                    <p style="font-size: 18px; color: #888;">
+                        开开博学多才，从不炫耀，愿意用最温柔的方式，陪伴每一个需要倾听的生命。
+                    </p>
+                </div>
+
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <h3>🤖 智能对话</h3>
+                        <p>从日常闲聊到情感咨询，开开随时倾听，理解并回应你的每个想法。</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>📝 情绪日记</h3>
+                        <p>记录你的点滴心情与生活，开开会给予温暖的回应。</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>📊 个人展板</h3>
+                        <p>自由定义你的个性标签，构建独一无二的数字人格。</p>
+                    </div>
+                    <div class="feature-card">
+                        <h3>🎯 话题追踪</h3>
+                        <p>自动总结你关心的事，助你洞察自我。</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 页脚 -->
+            <footer class="footer">
+                <p>&copy; 2025 开心APP - 情感博物馆. 用心陪伴每一个你.</p>
+                <p style="margin-top: 10px; opacity: 0.7;">
+                    <a href="/api/health">系统状态</a> | 
+                    <a href="http://47.111.10.27:8848/nacos">管理后台</a>
+                </p>
+            </footer>
+        </div>
+    </div>
+
+    <script>
+        const { createApp } = Vue;
+        const { message } = antd;
+
+        createApp({
+            methods: {
+                goToChat() {
+                    message.info('聊天功能开发中，敬请期待！');
+                },
+                goToLogin() {
+                    message.info('登录功能开发中，敬请期待！');
+                }
+            },
+            mounted() {
+                // 页面加载动画
+                const cards = document.querySelectorAll('.feature-card');
+                cards.forEach((card, index) => {
+                    setTimeout(() => {
+                        card.style.opacity = '0';
+                        card.style.transform = 'translateY(20px)';
+                        card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                        
+                        setTimeout(() => {
+                            card.style.opacity = '1';
+                            card.style.transform = 'translateY(0)';
+                        }, 100);
+                    }, index * 200);
+                });
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>
+EOF
+
+    log_success "静态前端页面创建完成"
+}
+
+# 部署到远程服务器
+deploy_to_remote() {
+    log_info "部署到远程服务器..."
+    
+    # 创建远程目录
+    ssh "$REMOTE_HOST" "mkdir -p $REMOTE_DIR"
+    
+    # 上传文件
+    scp /tmp/emotion-static-frontend/index.html "$REMOTE_HOST:$REMOTE_DIR/"
+    
+    # 验证部署
+    ssh "$REMOTE_HOST" "
+        echo '验证前端部署...'
+        ls -la $REMOTE_DIR/
+        if [ -f '$REMOTE_DIR/index.html' ]; then
+            echo '✅ index.html 存在'
+            head -5 '$REMOTE_DIR/index.html'
+        else
+            echo '❌ index.html 不存在'
+            exit 1
+        fi
+    "
+    
+    # 清理临时文件
+    rm -rf /tmp/emotion-static-frontend
+    
+    log_success "部署完成"
+}
+
+# 测试访问
+test_access() {
+    log_info "测试访问..."
+    
+    if curl -f -s "http://47.111.10.27/emotion/happy/" | grep -q "开开"; then
+        log_success "✅ 前端访问正常: http://47.111.10.27/emotion/happy/"
+    else
+        log_error "❌ 前端访问失败"
+        return 1
+    fi
+}
+
+# 主函数
+main() {
+    log_info "🚀 开始部署静态前端页面..."
+    
+    check_connection
+    create_static_frontend
+    deploy_to_remote
+    test_access
+    
+    log_success "🎉 前端部署完成！"
+    echo ""
+    echo "📋 访问信息:"
+    echo "  前端地址: http://47.111.10.27/emotion/happy/"
+}
+
+# 执行主函数
+main "$@"