One post tagged with "思维导图"

import React, { useState, useCallback } from 'react';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Loader2, Download, Eye } from 'lucide-react';

const MarkdownToMindmap = () => {
  const [markdown, setMarkdown] = useState(`# 我的项目
## 前端开发
### React 组件
### 状态管理
### 路由配置
## 后端开发
### API 设计
### 数据库
### 部署运维`);
  
  const [title, setTitle] = useState('思维导图');
  const [theme, setTheme] = useState('light');
  const [loading, setLoading] = useState(false);
  const [htmlContent, setHtmlContent] = useState('');
  const [error, setError] = useState('');

  const generateMindmap = useCallback(async () => {
    if (!markdown.trim()) {
      setError('请输入 Markdown 内容');
      return;
    }

    setLoading(true);
    setError('');

    try {
      const response = await fetch('https://markmap-api.jinpeng-ti.workers.dev/api/render', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          markdown: markdown.trim(),
          title,
          theme
        })
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || `请求失败: ${response.status}`);
      }

      const html = await response.text();
      setHtmlContent(html);
    } catch (err) {
      setError(err.message || '生成思维导图失败');
      console.error('Generation error:', err);
    } finally {
      setLoading(false);
    }
  }, [markdown, title, theme]);

  const downloadHtml = useCallback(() => {
    if (!htmlContent) return;

    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${title || 'mindmap'}.html`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }, [htmlContent, title]);

  return (
    <div className="max-w-7xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold text-gray-900">
          Markdown 转思维导图工具
        </h1>
        <p className="text-gray-600">
          基于 Markmap API，将你的 Markdown 文档转换为交互式思维导图
        </p>
      </div>

      <div className="grid lg:grid-cols-2 gap-6">
        {/* 输入区域 */}
        <Card>
          <CardHeader>
            <h2 className="text-xl font-semibold">输入 Markdown</h2>
          </CardHeader>
          <CardContent className="space-y-4">
            <Textarea
              value={markdown}
              onChange={(e) => setMarkdown(e.target.value)}
              placeholder="# 标题&#10;## 子标题&#10;### 内容"
              className="min-h-[400px] font-mono text-sm"
            />
            
            <div className="flex gap-4">
              <div className="flex-1">
                <label className="block text-sm font-medium mb-2">标题</label>
                <input
                  type="text"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
                  placeholder="思维导图标题"
                />
              </div>
              
              <div className="flex-1">
                <label className="block text-sm font-medium mb-2">主题</label>
                <Select value={theme} onValueChange={setTheme}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">浅色主题</SelectItem>
                    <SelectItem value="dark">深色主题</SelectItem>
                    <SelectItem value="auto">自动</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <Button 
              onClick={generateMindmap} 
              disabled={loading || !markdown.trim()}
              className="w-full"
              size="lg"
            >
              {loading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  生成中...
                </>
              ) : (
                <>
                  <Eye className="mr-2 h-4 w-4" />
                  生成思维导图
                </>
              )}
            </Button>

            {error && (
              <div className="p-3 bg-red-50 border border-red-200 rounded-md">
                <p className="text-red-600 text-sm">{error}</p>
              </div>
            )}
          </CardContent>
        </Card>

        {/* 预览区域 */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <h2 className="text-xl font-semibold">思维导图预览</h2>
            {htmlContent && (
              <Button 
                onClick={downloadHtml}
                variant="outline"
                size="sm"
              >
                <Download className="mr-2 h-4 w-4" />
                下载 HTML
              </Button>
            )}
          </CardHeader>
          <CardContent>
            {htmlContent ? (
              <iframe
                srcDoc={htmlContent}
                className="w-full h-[500px] border rounded-md"
                title="思维导图预览"
              />
            ) : (
              <div className="h-[500px] border-2 border-dashed border-gray-300 rounded-md flex items-center justify-center">
                <div className="text-center text-gray-500">
                  <Eye className="mx-auto h-12 w-12 mb-4 text-gray-400" />
                  <p>点击"生成思维导图"查看效果</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 使用说明 */}
      <Card>
        <CardHeader>
          <h3 className="text-lg font-semibold">使用说明</h3>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6 text-sm">
            <div>
              <h4 className="font-medium mb-2">支持的 Markdown 语法：</h4>
              <ul className="space-y-1 text-gray-600">
                <li>• 标题：# ## ### #### ##### ######</li>
                <li>• 嵌套结构自动识别</li>
                <li>• 中英文混合内容</li>
                <li>• 特殊字符和符号</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium mb-2">功能特性：</h4>
              <ul className="space-y-1 text-gray-600">
                <li>• 交互式缩放和拖拽</li>
                <li>• 响应式设计，支持移动端</li>
                <li>• 多种主题选择</li>
                <li>• 一键下载 HTML 文件</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default MarkdownToMindmap;