简洁编辑器 - 快速开发指南

🚀 快速开始

已完成的简洁编辑器界面，所有按钮功能已对接，部分功能可直接使用，部分功能提供接口供扩展。

✅ 立即可用的功能

1. 📎 附件上传

// 点击按钮 → 触发文件上传
openAttachmentDialog() // 已完成

测试: 点击📎按钮 → 选择文件 → 文件上传

2. ✂️ 剪切文本

// 选中文本 → 点击按钮 → 剪切成功
cutText() // 已完成

测试: 选中部分文字 → 点击✂️按钮 → 文本被剪切

3. 🎤 语音输入

// 点击按钮 → 授权麦克风 → 开始说话
startVoiceInput() // 已完成，需Chrome/Edge

测试: 点击🎤按钮 → 授权 → 说话 → 文字出现

4. ➤ 发送消息

// Enter键或点击按钮发送
sendMessage() // 已完成

测试: 输入文字 → 按Enter或点击➤ → 消息发送

⚠️ 需要扩展的功能

1. 💡 深度思考模式

当前状态: 接口已对接，显示提示

如何扩展:

// 在 stage-requirements.component.ts 中修改

// 1. 添加状态变量
deepThinkingEnabled: boolean = false;

// 2. 修改方法
toggleDeepThinking(): void {
  this.deepThinkingEnabled = !this.deepThinkingEnabled;
  
  if (this.deepThinkingEnabled) {
    window?.fmode?.alert('深度思考模式已开启');
    // 在UI上显示指示器
  } else {
    window?.fmode?.alert('深度思考模式已关闭');
  }
  
  this.cdr.markForCheck();
}

// 3. 在AI分析时使用
async startAIDesignAnalysis(): Promise<void> {
  // ... 现有代码 ...
  
  const prompt = this.deepThinkingEnabled 
    ? this.buildDeepThinkingPrompt() 
    : this.buildNormalPrompt();
    
  // 使用增强的提示词进行分析
}

// 4. 构建深度思考提示词
private buildDeepThinkingPrompt(): string {
  return `
请进行深度分析，考虑以下维度：
1. 设计哲学和文化背景
2. 材质的触感和视觉质感
3. 光线在不同时间的变化
4. 空间的情感表达
5. 可持续性和环保考虑
...
  `;
}

建议UI反馈:

<!-- 在 HTML 中添加状态指示 -->
<button 
  class="toolbar-icon-btn"
  [class.active]="deepThinkingEnabled"
  (click)="toggleDeepThinking()">
  <ion-icon name="bulb-outline"></ion-icon>
  <span class="btn-label">深度思考</span>
</button>

// 在 SCSS 中添加激活状态
.toolbar-icon-btn.active {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  
  ion-icon {
    color: #f59e0b;
  }
}

2. 🧩 技能选择

当前状态: 接口已对接，显示提示

如何扩展:

// 1. 定义技能接口
interface DesignSkill {
  id: string;
  name: string;
  icon: string;
  prompt: string;
  category: string;
}

// 2. 创建技能库
designSkills: DesignSkill[] = [
  {
    id: 'color-analysis',
    name: '色彩分析',
    icon: '🎨',
    prompt: '请重点分析空间的色彩搭配方案，包括主色调、辅助色和点缀色',
    category: '分析'
  },
  {
    id: 'lighting-design',
    name: '灯光设计',
    icon: '💡',
    prompt: '请详细分析灯光系统，包括自然光、主照明、辅助照明和氛围照明',
    category: '分析'
  },
  {
    id: 'material-analysis',
    name: '材质分析',
    icon: '🧱',
    prompt: '请重点分析空间中使用的材质及其搭配方式',
    category: '分析'
  },
  {
    id: 'layout-optimization',
    name: '布局优化',
    icon: '📐',
    prompt: '请提供空间布局的优化建议',
    category: '建议'
  }
];

// 3. 修改方法显示技能对话框
openSkillsDialog(): void {
  // 创建一个简单的对话框
  const skillOptions = this.designSkills.map(skill => 
    `${skill.icon} ${skill.name}`
  ).join('\n');
  
  const selectedSkill = prompt(
    '请选择一个技能：\n\n' + skillOptions + '\n\n输入序号(1-' + this.designSkills.length + '):'
  );
  
  if (selectedSkill) {
    const index = parseInt(selectedSkill) - 1;
    if (index >= 0 && index < this.designSkills.length) {
      this.applySkill(this.designSkills[index]);
    }
  }
}

// 4. 应用技能
private applySkill(skill: DesignSkill): void {
  // 在文本描述中添加技能提示
  if (this.aiDesignTextDescription) {
    this.aiDesignTextDescription += '\n\n' + skill.prompt;
  } else {
    this.aiDesignTextDescription = skill.prompt;
  }
  
  window?.fmode?.alert(`已应用技能：${skill.name}`);
  this.cdr.markForCheck();
}

使用Angular Material对话框（更专业）:

// 1. 创建技能对话框组件
@Component({
  selector: 'app-skills-dialog',
  template: `
    <h2 mat-dialog-title>选择设计技能</h2>
    <mat-dialog-content>
      <div class="skills-grid">
        <button 
          *ngFor="let skill of skills"
          class="skill-card"
          (click)="selectSkill(skill)">
          <div class="skill-icon">{{skill.icon}}</div>
          <div class="skill-name">{{skill.name}}</div>
          <div class="skill-category">{{skill.category}}</div>
        </button>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="dialogRef.close()">取消</button>
    </mat-dialog-actions>
  `
})
export class SkillsDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<SkillsDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public skills: DesignSkill[]
  ) {}
  
  selectSkill(skill: DesignSkill): void {
    this.dialogRef.close(skill);
  }
}

// 2. 在主组件中打开对话框
openSkillsDialog(): void {
  const dialogRef = this.dialog.open(SkillsDialogComponent, {
    width: '600px',
    data: this.designSkills
  });
  
  dialogRef.afterClosed().subscribe((skill: DesignSkill) => {
    if (skill) {
      this.applySkill(skill);
    }
  });
}

3. 📞 语音通话

当前状态: 接口已对接，显示提示

如何扩展（使用WebRTC）:

// 1. 添加WebRTC配置
private peerConnection: RTCPeerConnection | null = null;
private localStream: MediaStream | null = null;

// 2. 初始化WebRTC
private async initWebRTC(): Promise<void> {
  const configuration = {
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' }
    ]
  };
  
  this.peerConnection = new RTCPeerConnection(configuration);
  
  // 获取本地音频流
  this.localStream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: false
  });
  
  // 添加音频轨道
  this.localStream.getTracks().forEach(track => {
    this.peerConnection?.addTrack(track, this.localStream!);
  });
}

// 3. 修改通话方法
async startVoiceCall(): Promise<void> {
  try {
    await this.initWebRTC();
    window?.fmode?.alert('语音通话已连接');
    
    // 显示通话界面
    this.showCallInterface();
  } catch (error) {
    console.error('启动通话失败:', error);
    window?.fmode?.alert('无法启动语音通话');
  }
}

// 4. 通话界面
private showCallInterface(): void {
  // 可以创建一个浮动的通话界面
  // 包含: 静音、挂断等按钮
}

// 5. 结束通话
endVoiceCall(): void {
  if (this.localStream) {
    this.localStream.getTracks().forEach(track => track.stop());
    this.localStream = null;
  }
  
  if (this.peerConnection) {
    this.peerConnection.close();
    this.peerConnection = null;
  }
  
  window?.fmode?.alert('通话已结束');
}

使用第三方服务（推荐）:

// 使用 Agora、Twilio 或 腾讯云等服务

// 示例：使用Agora
import AgoraRTC from 'agora-rtc-sdk-ng';

async startVoiceCall(): Promise<void> {
  const client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
  
  // 加入频道
  await client.join(
    'YOUR_APP_ID',
    'channelName',
    'token',
    userId
  );
  
  // 创建麦克风音频轨道
  const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  
  // 发布音频
  await client.publish([audioTrack]);
  
  window?.fmode?.alert('语音通话已连接');
}

💡 开发技巧

1. 调试功能

在每个方法中添加日志：

console.log('🔍 [功能名] 参数:', params);
console.log('✅ [功能名] 成功');
console.error('❌ [功能名] 失败:', error);

2. 用户反馈

使用统一的提示方式：

// 成功
window?.fmode?.alert('✅ 操作成功');

// 失败
window?.fmode?.alert('❌ 操作失败，请重试');

// 提示
window?.fmode?.alert('💡 提示信息');

3. 状态管理

使用响应式变量：

// 定义状态
deepThinkingEnabled: boolean = false;
selectedSkills: string[] = [];
isVoiceCallActive: boolean = false;

// 更新状态后触发变更检测
this.cdr.markForCheck();

📦 依赖安装

如果需要使用某些高级功能，可能需要安装以下依赖：

# Angular Material（对话框）
npm install @angular/material @angular/cdk

# WebRTC（视频/音频通话）
npm install simple-peer

# Agora（推荐的通话方案）
npm install agora-rtc-sdk-ng

# 语音识别增强
npm install @microsoft/speech-sdk

🎯 快速测试清单

点击📎按钮，能否触发文件上传？
输入文字后按Enter，消息是否发送？
点击🎤按钮，语音识别是否工作？（Chrome/Edge）
选中文字后点击✂️，是否剪切成功？
点击💡按钮，是否显示提示？
点击🧩按钮，是否显示提示？
点击📞按钮，是否显示提示？
文本框输入时，高度是否自动调整？

🐛 常见问题

Q1: 语音识别不工作？

确保使用Chrome或Edge浏览器
确保网站使用HTTPS
检查麦克风权限是否授予

Q2: 按钮点击无反应？

打开浏览器控制台查看错误
检查aiDesignAnalyzing状态
确认方法绑定正确

Q3: 样式显示异常？

清除浏览器缓存
检查CSS文件是否正确编译
确认ion-icon库已加载

📚 相关文档

完整功能文档
数据持久化文档
Web Speech API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
WebRTC: https://webrtc.org/

最后更新: 2025-11-22 版本: v2.0

COMPACT_EDITOR_QUICK_GUIDE.md 10 KB Geçmiş Ham

简洁编辑器 - 快速开发指南

🚀 快速开始

✅ 立即可用的功能

1. 📎 附件上传

2. ✂️ 剪切文本

3. 🎤 语音输入

4. ➤ 发送消息

⚠️ 需要扩展的功能

1. 💡 深度思考模式

2. 🧩 技能选择

3. 📞 语音通话

💡 开发技巧

1. 调试功能

2. 用户反馈

3. 状态管理

📦 依赖安装

🎯 快速测试清单

🐛 常见问题

Q1: 语音识别不工作？

Q2: 按钮点击无反应？

Q3: 样式显示异常？

📚 相关文档

COMPACT_EDITOR_QUICK_GUIDE.md 10 KB

Geçmiş Ham