xinyu-pro 0.21.0

package/bin/cli.js

@@ -0,0 +1,262 @@
+#!/usr/bin/env node
+
+const { existsSync, readFileSync, writeFileSync, mkdirSync, copyFileSync } = require('fs');
+const { join, resolve } = require('path');
+const { createInterface } = require('readline');
+const { execSync, spawn } = require('child_process');
+const { homedir } = require('os');
+
+const cwd = process.cwd();
+const APP_DIR = __dirname.includes('node_modules') ? resolve(__dirname, '..') : cwd;
+
+const args = process.argv.slice(2);
+const HELP_FLAG = args.includes('--help') || args.includes('-h');
+const DEV_FLAG = args.includes('--dev');
+const PORT_INDEX = args.indexOf('--port');
+const CUSTOM_PORT = PORT_INDEX !== -1 ? args[PORT_INDEX + 1] : '3000';
+const BUILD_FLAG = args.includes('--build');
+
+function echo(msg, type = 'info') {
+  const colors = {
+    info: '\x1b[36m',
+    success: '\x1b[32m',
+    warn: '\x1b[33m',
+    error: '\x1b[31m',
+    dim: '\x1b[2m',
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+  };
+  const color = colors[type] || colors.info;
+  console.log(`${color}${msg}${colors.reset}`);
+}
+
+function ask(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function showHelp() {
+  echo('');
+  echo('  ╔══════════════════════════════════════╗', 'bold');
+  echo('  ║       星语 Pro (xinyu-pro)           ║', 'bold');
+  echo('  ║   AI 驱动的互动叙事平台               ║', 'bold');
+  echo('  ╚══════════════════════════════════════╝', 'bold');
+  echo('');
+  echo('  用法:', 'bold');
+  echo('    $ xinyu             启动服务器（自动构建）');
+  echo('    $ xinyu --dev       开发模式（热更新）');
+  echo('    $ xinyu --port 4000 指定端口');
+  echo('    $ xinyu --build     仅构建不启动');
+  echo('    $ xinyu --help      显示帮助');
+  echo('');
+  echo('  环境要求:', 'bold');
+  echo('    • Node.js >= 18');
+  echo('    • MySQL 数据库（需提前运行）');
+  echo('');
+  process.exit(0);
+}
+
+function checkNodeVersion() {
+  const [major] = process.versions.node.split('.').map(Number);
+  if (major < 18) {
+    echo(`  ✗ Node.js 版本过低: ${process.versions.node}，需要 >= 18`, 'error');
+    process.exit(1);
+  }
+}
+
+function detectPackageManager() {
+  if (existsSync(join(APP_DIR, 'yarn.lock'))) return 'yarn';
+  if (existsSync(join(APP_DIR, 'pnpm-lock.yaml'))) return 'pnpm';
+  return 'npm';
+}
+
+function getNextCliPath() {
+  const possiblePaths = [
+    join(APP_DIR, 'node_modules', '.bin', 'next'),
+    join(APP_DIR, 'node_modules', 'next', 'dist', 'bin', 'next'),
+    join(cwd, 'node_modules', '.bin', 'next'),
+  ];
+  for (const p of possiblePaths) {
+    if (existsSync(p)) return p;
+  }
+  return 'next';
+}
+
+function checkDependencies() {
+  if (!existsSync(join(APP_DIR, 'node_modules'))) {
+    echo('  ⚠ 未检测到 node_modules，正在安装依赖...', 'warn');
+    const pm = detectPackageManager();
+    const cmd = pm === 'yarn' ? 'yarn install' : pm === 'pnpm' ? 'pnpm install' : 'npm install';
+    echo(`  $ ${cmd}`, 'dim');
+    execSync(cmd, { cwd: APP_DIR, stdio: 'inherit' });
+    return true;
+  }
+  return false;
+}
+
+function setupEnvFile() {
+  const envPath = join(APP_DIR, '.env.local');
+  const examplePath = join(APP_DIR, '.env.example');
+
+  if (existsSync(envPath)) {
+    const content = readFileSync(envPath, 'utf-8');
+    if (content.includes('your-api-key') || content.includes('你的密码')) {
+      echo('  ⚠ .env.local 中存在占位值，建议修改为真实配置', 'warn');
+    }
+    return;
+  }
+
+  echo('  ⚠ 未检测到 .env.local 配置文件', 'warn');
+  echo('');
+
+  if (!existsSync(examplePath)) {
+    echo('  ✗ 未找到 .env.example，请手动创建 .env.local', 'error');
+    process.exit(1);
+  }
+
+  const example = readFileSync(examplePath, 'utf-8');
+  writeFileSync(envPath, example, 'utf-8');
+  echo('  ✓ 已从 .env.example 创建 .env.local', 'success');
+  echo('');
+
+  const setupInteractive = async () => {
+    echo('  ── 请填写以下必要配置（直接回车可跳过） ──', 'bold');
+    echo('');
+
+    const apiKey = await ask('  AI API 密钥 (AI_API_KEY): ');
+    if (apiKey) {
+      let content = readFileSync(envPath, 'utf-8');
+      content = content.replace(/AI_API_KEY=.*/, `AI_API_KEY=${apiKey}`);
+      writeFileSync(envPath, content, 'utf-8');
+    }
+
+    const dbPassword = await ask('  数据库密码 (DB_PASSWORD，默认空): ');
+    if (dbPassword) {
+      let content = readFileSync(envPath, 'utf-8');
+      content = content.replace(/DB_PASSWORD=.*/, `DB_PASSWORD=${dbPassword}`);
+      writeFileSync(envPath, content, 'utf-8');
+    }
+
+    const dbName = await ask('  数据库名称 (DB_NAME，默认 xinyu): ');
+    if (dbName) {
+      let content = readFileSync(envPath, 'utf-8');
+      content = content.replace(/DB_NAME=.*/, `DB_NAME=${dbName}`);
+      writeFileSync(envPath, content, 'utf-8');
+    }
+
+    echo('');
+    echo('  ✓ .env.local 配置完成', 'success');
+    echo('  ✎ 如需修改，请编辑 ' + envPath, 'dim');
+  };
+
+  return setupInteractive();
+}
+
+function checkBuildExists() {
+  return existsSync(join(APP_DIR, '.next', 'BUILD_ID'));
+}
+
+function runBuild() {
+  echo('  ■ 正在构建应用，首次构建可能需要 1-2 分钟...', 'info');
+  const nextCli = getNextCliPath();
+  try {
+    execSync(`"${process.execPath}" "${nextCli}" build`, {
+      cwd: APP_DIR,
+      stdio: 'inherit',
+    });
+    echo('  ✓ 构建完成', 'success');
+  } catch (e) {
+    echo('  ✗ 构建失败，请检查代码错误', 'error');
+    process.exit(1);
+  }
+}
+
+function startServer(port, devMode) {
+  const nextCli = getNextCliPath();
+
+  echo('');
+  echo(`  ╔══════════════════════════════════════╗`, 'success');
+  echo(`  ║  星语 Pro 服务器已启动               ║`, 'success');
+  echo(`  ║  访问地址: http://localhost:${port}      ║`, 'success');
+  echo(`  ║  按 Ctrl+C 停止                      ║`, 'success');
+  echo(`  ╚══════════════════════════════════════╝`, 'success');
+  echo('');
+
+  const cmd = devMode ? 'dev' : 'start';
+  const child = spawn(process.execPath, [nextCli, cmd, '-p', port], {
+    cwd: APP_DIR,
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      PORT: port,
+    },
+  });
+
+  child.on('error', (err) => {
+    echo(`  ✗ 启动失败: ${err.message}`, 'error');
+    process.exit(1);
+  });
+
+  child.on('exit', (code) => {
+    if (code !== 0 && code !== null) {
+      echo(`  ✗ 进程异常退出 (code: ${code})`, 'error');
+    }
+    process.exit(code || 0);
+  });
+
+  process.on('SIGINT', () => {
+    echo('');
+    echo('  ■ 正在关闭服务器...', 'info');
+    child.kill('SIGINT');
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', () => {
+    child.kill('SIGTERM');
+    process.exit(0);
+  });
+}
+
+async function main() {
+  echo('');
+  echo('  ╔══════════════════════════════════════╗', 'bold');
+  echo('  ║       星语 Pro (xinyu-pro)           ║', 'bold');
+  echo('  ║  启动中...                           ║', 'bold');
+  echo('  ╚══════════════════════════════════════╝', 'bold');
+  echo('');
+
+  if (HELP_FLAG) {
+    showHelp();
+    return;
+  }
+
+  checkNodeVersion();
+  checkDependencies();
+
+  await setupEnvFile();
+
+  if (BUILD_FLAG) {
+    runBuild();
+    echo('  ✓ 构建完成，可使用 xinyu 启动服务器', 'success');
+    return;
+  }
+
+  if (!DEV_FLAG && !checkBuildExists()) {
+    echo('  ⚠ 未检测到构建产物，将自动执行构建', 'warn');
+    echo('  （首次构建需要下载依赖并编译 TypeScript，请耐心等待）', 'dim');
+    echo('');
+    runBuild();
+  }
+
+  startServer(CUSTOM_PORT, DEV_FLAG);
+}
+
+main().catch((e) => {
+  echo(`  ✗ 启动失败: ${e.message}`, 'error');
+  process.exit(1);
+});

package/components/ChatInput.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react';
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  /** 可选的外部 ref，允许外部获取 textarea 元素引用 */
+  inputRef?: React.Ref<HTMLTextAreaElement>;
+}
+
+export const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(function ChatInput({
+  onSend,
+  disabled = false,
+  placeholder = '描述你想做的事、说的话...',
+  inputRef,
+}, ref) {
+  const [input, setInput] = useState('');
+  const internalRef = useRef<HTMLTextAreaElement>(null);
+
+  // 合并内部 ref 和外部 ref，同时支持 forwardRef 和 inputRef
+  useImperativeHandle(ref, () => internalRef.current!, []);
+
+  // 同步 inputRef
+  const setTextareaRef = (el: HTMLTextAreaElement | null) => {
+    (internalRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el;
+    if (typeof inputRef === 'function') {
+      inputRef(el);
+    } else if (inputRef) {
+      (inputRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = el;
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = input.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setInput('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex items-center gap-2 px-4 py-3 border-t"
+      style={{
+        borderColor: 'var(--color-border)',
+        backgroundColor: 'var(--color-bg-secondary)',
+      }}
+    >
+      <textarea
+        ref={setTextareaRef}
+        id="xinyu-chat-input"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className="flex-1 resize-none px-4 py-2.5 rounded-xl border text-sm outline-none transition-colors"
+        style={{
+          backgroundColor: 'var(--color-bg-tertiary)',
+          borderColor: 'var(--color-border)',
+          color: 'var(--color-text-primary)',
+          maxHeight: '120px',
+          minHeight: '42px',
+        }}
+        onFocus={(e) => {
+          e.target.style.borderColor = 'var(--color-accent)';
+        }}
+        onBlur={(e) => {
+          e.target.style.borderColor = 'var(--color-border)';
+        }}
+      />
+      <button
+        type="submit"
+        disabled={disabled || !input.trim()}
+        className="flex items-center justify-center w-10 h-10 rounded-xl transition-all shrink-0"
+        style={{
+          backgroundColor:
+            disabled || !input.trim()
+              ? 'var(--color-bg-tertiary)'
+              : 'var(--color-accent)',
+          color:
+            disabled || !input.trim()
+              ? 'var(--color-text-muted)'
+              : '#fff',
+          cursor: disabled || !input.trim() ? 'not-allowed' : 'pointer',
+        }}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="22" y1="2" x2="11" y2="13" />
+          <polygon points="22 2 15 22 11 13 2 9 22 2" />
+        </svg>
+      </button>
+    </form>
+  );
+});

package/components/ChatWindow.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { ChatMessage } from '@/lib/types';
+import { MessageBubble } from './MessageBubble';
+import { LoadingDots } from './LoadingDots';
+
+interface ChatWindowProps {
+  messages: ChatMessage[];
+  isLoading?: boolean;
+}
+
+export function ChatWindow({ messages, isLoading = false }: ChatWindowProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // 自动滚动到最新消息
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isLoading]);
+
+  return (
+    <div
+      id="xinyu-chat-window"
+      className="flex-1 overflow-y-auto"
+      style={{ backgroundColor: 'var(--color-bg-primary)' }}
+    >
+      {messages.length === 0 && !isLoading && (
+        <div className="flex flex-col items-center justify-center h-full gap-3 px-4">
+          <div
+            className="text-4xl"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            🌟
+          </div>
+          <p className="text-sm text-center" style={{ color: 'var(--color-text-muted)' }}>
+            你的冒险即将开始...
+            <br />
+            描述你想做的第一件事吧
+          </p>
+        </div>
+      )}
+
+      {messages.map((msg, idx) => (
+        <MessageBubble key={idx} message={msg} />
+      ))}
+
+      {isLoading && <LoadingDots />}
+
+      <div ref={bottomRef} />
+    </div>
+  );
+}

package/components/FullPageLoader.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import MathCurveLoader from './MathCurveLoader';
+
+interface FullPageLoaderProps {
+  /** 提示文字，默认 "加载中..." */
+  text?: string;
+  /** 自定义 className */
+  className?: string;
+  /** 最小显示时间（ms），默认 500。挂载后低于此时间被卸载则不显示内容 */
+  minShowMs?: number;
+}
+
+export default function FullPageLoader({ text = '加载中...', className, minShowMs = 500 }: FullPageLoaderProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(true), minShowMs);
+    return () => clearTimeout(timer);
+  }, [minShowMs]);
+
+  return (
+    <div
+      className={`flex flex-col items-center justify-center gap-6 ${className || ''}`}
+      style={{
+        minHeight: '100vh',
+        backgroundColor: 'var(--color-bg-primary)',
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 0.3s ease',
+      }}
+    >
+      {/* Logo 符号 - 非线性旋转 */}
+      <div className="xinyu-logo-spin" style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '56px',
+        height: '56px',
+        filter: 'drop-shadow(0 0 20px var(--color-accent))',
+      }}>
+        <span
+          className="select-none"
+          style={{
+            fontSize: '48px',
+            lineHeight: 1,
+            color: 'var(--color-accent)',
+          }}
+        >
+          ✦
+        </span>
+      </div>
+
+      {/* 艺术字体标题 - 覆盖光效滑动 */}
+      <h1
+        className="select-none xinyu-shimmer"
+        style={{
+          fontFamily: "'Georgia', 'Times New Roman', serif",
+          fontSize: '28px',
+          fontWeight: 300,
+          letterSpacing: '0.3em',
+          color: 'var(--color-text-primary)',
+          margin: 0,
+          background: 'linear-gradient(90deg, var(--color-text-primary) 0%, var(--color-text-primary) 30%, var(--color-accent) 50%, var(--color-text-primary) 70%, var(--color-text-primary) 100%)',
+          backgroundSize: '300% 100%',
+          WebkitBackgroundClip: 'text',
+          backgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        XIN · YU
+      </h1>
+
+      {/* 数学曲线动画 */}
+      <MathCurveLoader size={160} strokeWidthScale={1.2} />
+
+      {/* 提示文字 */}
+      <p
+        className="text-sm select-none"
+        style={{ color: 'var(--color-text-muted)', marginTop: '-8px' }}
+      >
+        {text}
+      </p>
+
+      {/* 动画样式 */}
+      <style>{`
+        @keyframes xinyu-logo-spin {
+          0%   { transform: rotate(0deg) scale(1); }
+          25%  { transform: rotate(180deg) scale(1.1); }
+          50%  { transform: rotate(360deg) scale(1); }
+          75%  { transform: rotate(540deg) scale(1.1); }
+          100% { transform: rotate(720deg) scale(1); }
+        }
+        .xinyu-logo-spin {
+          animation: xinyu-logo-spin 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+        }
+        @keyframes xinyu-shimmer {
+          0%   { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        .xinyu-shimmer {
+          animation: xinyu-shimmer 5s ease-in-out infinite;
+        }
+      `}</style>
+    </div>
+  );
+}

package/components/LoadingDots.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+import MathCurveLoader from './MathCurveLoader';
+
+interface LoadingDotsProps {
+  /** 提示文字，默认"思考中..." */
+  text?: string;
+}
+
+export function LoadingDots({ text = '思考中...' }: LoadingDotsProps) {
+  return (
+    <div className="flex items-center gap-2.5 px-4 py-3">
+      <MathCurveLoader size={28} strokeWidthScale={0.6} />
+      <span className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
+        {text}
+      </span>
+    </div>
+  );
+}