# cursor-demo-code-01

**Repository Path**: ruanxinyu/cursor-demo-code-01

## Basic Information

- **Project Name**: cursor-demo-code-01
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 代码查看器 (Code Viewer)

基于 Angular 17 和 Monaco Editor 的代码查看器，支持按区域显示代码文件内容，并提供展开功能。

## 功能特性

- ✨ 基于 Angular 17 + TypeScript 开发
- 🎨 集成 Monaco Editor，提供优秀的代码编辑体验
- 📊 支持按指定区域显示代码内容
- 🔍 隐藏的代码区域可通过展开按钮查看
- 🎯 明亮主题，界面清爽
- 📱 响应式设计，支持移动端
- 🚀 使用 Standalone Components (Angular 17 新特性)

## 项目结构

```
src/
├── app/
│   ├── components/
│   │   └── code-viewer/          # 代码查看器组件
│   ├── models/                   # 数据模型定义
│   ├── services/                 # 服务层
│   │   ├── code-data.service.ts  # 代码数据服务
│   │   └── monaco-editor.service.ts # Monaco Editor 服务
│   ├── app.component.ts          # 主应用组件
│   └── app.routes.ts             # 路由配置
├── assets/                       # 静态资源
├── styles.scss                   # 全局样式
├── index.html                    # HTML 入口
└── main.ts                       # 应用入口
```

## 快速开始

### 环境要求

- Node.js 18+ 
- npm 或 yarn

### 安装依赖

\`\`\`bash
npm install
\`\`\`

### 启动开发服务器

\`\`\`bash
npm start
\`\`\`

访问 http://localhost:4200 查看应用。

### 构建生产版本

\`\`\`bash
npm run build
\`\`\`

## 核心概念

### 数据结构

#### CodeRegion (代码区域)
```typescript
interface CodeRegion {
  startLine: number;    // 起始行号
  endLine: number;      // 结束行号
  id?: string;          // 区域标识符
}
```

#### CodeFileContent (代码文件内容)
```typescript
interface CodeFileContent {
  content: string;      // 文件内容
  language: string;     // 编程语言
  filename: string;     // 文件名
  totalLines: number;   // 总行数
}
```

### Mock 数据

项目使用 Mock 数据进行演示，数据定义在 `src/app/services/code-data.service.ts` 中：

- 显示 TypeScript 代码文件
- 包含 4 个显示区域（imports、constructor-init、expand-methods、utilities）
- 支持动态展开隐藏的代码行

## 使用说明

1. **查看代码**：页面加载后会显示预定义的代码区域
2. **展开代码**：使用右侧面板的 ↑ ↓ 按钮展开隐藏的代码行
3. **区域信息**：右侧面板显示当前可见区域的详细信息
4. **语法高亮**：Monaco Editor 自动识别代码语言并提供语法高亮

## 技术栈

- **框架**: Angular 17
- **语言**: TypeScript
- **编辑器**: Monaco Editor
- **样式**: SCSS
- **架构**: Standalone Components

## Monaco Editor 配置

项目配置了 Monaco Editor 的以下特性：

- 明亮主题
- 只读模式
- 语法高亮
- 行号显示
- 自动布局
- 代码折叠提示

## 自定义开发

### 修改 Mock 数据

编辑 `src/app/services/code-data.service.ts` 文件中的 `getCodeData()` 方法：

```typescript
const mockFileContent: CodeFileContent = {
  content: "你的代码内容...",
  language: "typescript", // 支持的语言类型
  filename: "example.ts",
  totalLines: 100
};

const mockVisibleRegions: CodeRegion[] = [
  { startLine: 1, endLine: 10, id: "region1" },
  // 添加更多区域...
];
```

### 接入真实 API

替换 `CodeDataService` 中的 Mock 实现：

```typescript
getCodeData(): Observable<CodeViewerData> {
  return this.http.get<CodeViewerData>('/api/code-data');
}
```

### 自定义主题

修改 `src/app/services/monaco-editor.service.ts` 中的主题配置：

```typescript
const defaultOptions = {
  theme: 'vs-dark', // 或其他主题
  // 其他配置...
};
```

## 浏览器支持

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 开发说明

- 使用 Angular 17 的新特性 Standalone Components
- 采用响应式设计原则
- 遵循 TypeScript 严格模式
- 使用现代 ES2022 语法

## 许可证

MIT License