<template>
  <div class="p-8 max-w-5xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Markdown 渲染器语法高亮测试</h1>
    
    <div class="grid grid-cols-1 gap-8">
      <!-- 测试控制面板 -->
      <div class="bg-base-200 p-4 rounded-lg">
        <div class="flex gap-4 mb-4">
          <button @click="currentTheme = 'light'" class="btn btn-primary" :class="{'btn-outline': currentTheme !== 'light'}">
            亮色主题
          </button>
          <button @click="currentTheme = 'dark'" class="btn btn-primary" :class="{'btn-outline': currentTheme !== 'dark'}">
            暗色主题
          </button>
        </div>
      </div>
      
      <!-- 示例展示 -->
      <div class="bg-base-100 rounded-lg shadow-lg overflow-hidden" :data-theme="currentTheme">
        <div class="p-4 bg-base-200 font-semibold">Markdown 渲染结果</div>
        <div class="px-1">
          <MarkdownRenderer :content="sampleContent" :remove-first-h1="false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MarkdownRenderer from '@/components/MarkdownRenderer.vue';

const currentTheme = ref('light');

// 包含各种代码示例的 Markdown 示例内容
const sampleContent = ref(`
# Markdown 语法高亮测试

这是一个用于测试 Markdown 渲染器语法高亮功能的页面。下面是一些代码示例。

## JavaScript 代码示例

\`\`\`javascript
// 一个简单的 JavaScript 函数
function calculateSum(a, b) {
  // 这是一个注释
  const sum = a + b;
  console.log(\`计算结果: \${sum}\`);
  return sum;
}

// 类示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return \`你好，我是 \${this.name}，我 \${this.age} 岁了。\`;
  }
}

// 使用 async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取数据出错:', error);
  }
}
\`\`\`

## TypeScript 代码示例

\`\`\`typescript
// TypeScript 接口
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;
}

// 泛型函数
function getFirst<T>(array: T[]): T | undefined {
  return array.length > 0 ? array[0] : undefined;
}

// 类型别名和联合类型
type Result<T> = 
  | { success: true; value: T }
  | { success: false; error: Error };

// 装饰器
function log(target: any, key: string) {
  const originalMethod = target[key];
  
  target[key] = function(...args: any[]) {
    console.log(\`调用方法 \${key} 参数:, args);
    return originalMethod.apply(this, args);
  };
  
  return target;
}

class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}
\`\`\`

## HTML & CSS 示例

\`\`\`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例页面</title>
  <style>
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    
    .card {
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .card-header {
      background-color: #4a6cf7;
      color: white;
      padding: 15px;
    }
    
    .card-body {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h2>欢迎使用我们的应用</h2>
      </div>
      <div class="card-body">
        <p>这是卡片内容区域。</p>
        <button onclick="alert('你点击了按钮!')">点击我</button>
      </div>
    </div>
  </div>
</body>
</html>
\`\`\`

## C# 代码示例

\`\`\`csharp
using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Demo
{
    // 简单的用户类
    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        
        public override string ToString()
        {
            return $"User(Id={Id}, Name={Name}, Email={Email})";
        }
    }
    
    public class Program
    {
        public static async Task<List<User>> GetUsersAsync()
        {
            // 模拟异步操作
            await Task.Delay(1000);
            
            return new List<User>
            {
                new User { Id = 1, Name = "张三", Email = "zhangsan@example.com" },
                new User { Id = 2, Name = "李四", Email = "lisi@example.com" },
                new User { Id = 3, Name = "王五", Email = "wangwu@example.com" }
            };
        }
        
        public static void Main(string[] args)
        {
            Console.WriteLine("获取用户列表中...");
            
            var users = GetUsersAsync().GetAwaiter().GetResult();
            
            foreach (var user in users)
            {
                Console.WriteLine(user);
            }
            
            Console.WriteLine("完成！");
        }
    }
}
\`\`\`

## Python 代码示例

\`\`\`python
import os
import json
from typing import List, Dict, Any, Optional
from dataclasses import dataclass

@dataclass
class Person:
    name: str
    age: int
    email: Optional[str] = None
    
    def greet(self) -> str:
        return f"你好，我是 {self.name}，我 {self.age} 岁了。"
    
    def to_dict(self) -> Dict[str, Any]:
        return {
            "name": self.name,
            "age": self.age,
            "email": self.email
        }

# 一些常用的 Python 函数
def read_json_file(file_path: str) -> Dict[str, Any]:
    """从JSON文件读取数据
    
    Args:
        file_path: JSON文件路径
        
    Returns:
        解析后的JSON数据
        
    Raises:
        FileNotFoundError: 如果文件不存在
        json.JSONDecodeError: 如果JSON格式不正确
    """
    if not os.path.exists(file_path):
        raise FileNotFoundError(f"文件不存在: {file_path}")
    
    with open(file_path, 'r', encoding='utf-8') as f:
        return json.load(f)

# 列表推导式与生成器
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
even_numbers = [n for n in numbers if n % 2 == 0]
squared = (n**2 for n in even_numbers)  # 生成器表达式

# 使用装饰器
def log_function_call(func):
    def wrapper(*args, **kwargs):
        print(f"调用函数: {func.__name__}")
        result = func(*args, **kwargs)
        print(f"函数返回: {result}")
        return result
    return wrapper

@log_function_call
def add(a: int, b: int) -> int:
    return a + b

if __name__ == "__main__":
    person = Person("张三", 30, "zhangsan@example.com")
    print(person.greet())
    print(add(5, 3))
\`\`\`

## VHDL 代码示例

\`\`\`vhdl
library IEEE;
use IEEE.STD_LOGIC_1164.ALL;
use IEEE.NUMERIC_STD.ALL;

entity Counter is
    Port ( 
        clk     : in  STD_LOGIC;
        reset   : in  STD_LOGIC;
        enable  : in  STD_LOGIC;
        count   : out STD_LOGIC_VECTOR(7 downto 0)
    );
end Counter;

architecture Behavioral of Counter is
    signal count_reg : unsigned(7 downto 0) := (others => '0');
begin
    process(clk, reset)
    begin
        if reset = '1' then
            count_reg <= (others => '0');
        elsif rising_edge(clk) then
            if enable = '1' then
                count_reg <= count_reg + 1;
            end if;
        end if;
    end process;
    
    count <= STD_LOGIC_VECTOR(count_reg);
end Behavioral;
\`\`\`

## Verilog 代码示例

\`\`\`verilog
module counter(
    input wire clk,
    input wire reset,
    input wire enable,
    output reg [7:0] count
);

    // 初始化计数器
    initial begin
        count = 8'b0;
    end
    
    // 在时钟上升沿处理
    always @(posedge clk or posedge reset) begin
        if (reset) begin
            count <= 8'b0;
        end else if (enable) begin
            count <= count + 1'b1;
        end
    end
    
    // 显示当前计数值
    always @(count) begin
        $display("当前计数值: %d", count);
    end
endmodule
\`\`\`

## JSON 示例

\`\`\`json
{
  "name": "fpga-weblab",
  "version": "1.0.0",
  "description": "FPGA WebLab 项目配置",
  "settings": {
    "theme": {
      "light": {
        "primary": "#4a6cf7",
        "secondary": "#f79e1b",
        "background": "#ffffff"
      },
      "dark": {
        "primary": "#6d8aff",
        "secondary": "#ffb74d",
        "background": "#121212"
      }
    },
    "features": [
      "代码高亮",
      "实时预览",
      "项目管理",
      "远程硬件访问"
    ]
  },
  "dependencies": {
    "vue": "^3.5.0",
    "marked": "^12.0.0",
    "highlight.js": "^11.9.0"
  }
}
\`\`\`

## Shell 脚本示例

\`\`\`bash
#!/bin/bash

# 定义变量
PROJECT_DIR=$(pwd)
OUTPUT_DIR="$PROJECT_DIR/build"
LOG_FILE="$PROJECT_DIR/build.log"

# 创建输出目录
mkdir -p "$OUTPUT_DIR"

# 定义函数
function log_message() {
  local timestamp=$(date +"%Y-%m-%d %H:%M:%S")
  echo "[$timestamp] $1" | tee -a "$LOG_FILE"
}

# 清理旧构建
log_message "清理旧构建文件..."
rm -rf "$OUTPUT_DIR/*"

# 执行构建
log_message "开始构建项目..."
npm run build

# 检查构建结果
if [ $? -eq 0 ]; then
  log_message "构建成功！输出文件位于: $OUTPUT_DIR"
else
  log_message "构建失败，请检查错误信息"
  exit 1
fi

# 统计文件数量
file_count=$(find "$OUTPUT_DIR" -type f | wc -l)
log_message "共构建了 $file_count 个文件"

# 显示环境信息
echo "系统信息:"
echo "----------------------"
echo "操作系统: $(uname -s)"
echo "Node 版本: $(node -v)"
echo "NPM 版本: $(npm -v)"
echo "磁盘空间: $(df -h | grep -E '^/dev')"
\`\`\`

## 其他示例

这里是一个内联代码示例：\`const value = calculate(x, y);\`

`);
</script>

<style scoped>
</style>
