ScriptEcho 框架使用说明

ScriptEcho 是一个支持多种前端框架的 AI 图生代码平台。平台支持多种框架，部分框架可在平台和插件中使用，部分框架仅限插件中使用。以下是详细的使用说明。

一、框架支持列表

1. 平台和插件中均能使用的框架

以下框架既可以在 ScriptEcho 平台中使用，也可以在插件（如 VSCode、Windsurf）中使用：

Ant Design Vue3
Element Plus
HTML
React
Vant
Vuetify

2. 插件中才能使用的框架

以下框架仅支持在插件中使用：

Uniapp
UView
React Native
React Native Elements
Flutter
Flutter Material Design

二、用户使用流程

1. 登录平台

访问 ScriptEcho 平台，使用账号登录。

2. 新建项目

登录后，点击“新建项目”按钮。
输入项目名称及项目编码，选择项目框架。
- 如果选择 平台支持的框架（如 Ant Design Vue3、Element Plus 等），可直接在平台中操作。
- 如果选择 插件支持的框架（如 Uniapp、React Native 等），需在插件中操作。

3. 新建页面

在项目中点击“新建页面”。
输入页面名称及页面编码。

4. 生成代码

上传设计图（支持 PNG、JPG 等格式）、输入文字描述或手绘草图。
平台会根据图片或文字描述自动生成前端页面及代码。
生成代码后，可在线预览页面效果。

5. 导出代码

如果项目在平台中创建，可直接下载代码。
如果项目在插件中创建，需通过插件导出代码。

三、Flutter环境的安装和配置

1、下载flutter

https://docs.flutter.dev/release/archive?tab=macos 大家网页后，选择对应的版本【Tips：查看自己的mac系统版本 ----->终端运行uname -a，看最后是arm还是x86】下载完成后解压；我是新建了一个文件夹flutter_sdk用来存放解压的sdk文件；

2、配置fluuter环境变量

把 Flutter安装目录的bin目录配置到环境变量，然后把Flutter国内镜像也配置到环境变量里面 https://doc.flutterchina.club/setup-macos/

控制台输入vm .bahs_profile编辑文件，按i进入编辑模式；PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin替换成刚解压的目录；【直接把bin文件夹拖到终端就可以看到文件目录】
- vim ~/.bash_profile
- vim ~/.zshrc
- export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
- export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
让配置环境变量生效
- source ~/.bash_profile
- source ~/.zshrc

3、运行flutter doctor 命令检测环境

第一个❌ 是因为没安装Android sdk 暂时先忽略
第二个❌是没安装xcode，安装最新的xcode

参考链接： https://blog.csdn.net/weixin_43957384/article/details/141890767

四、ScriptEcho 插件安装及使用教程（Windsurf、Trae、Cursor）

以下是针对 Windsurf、Trae 和 Cursor 的 ScriptEcho 插件安装及使用教程，适配到各自的开发环境中。

1、Windsurf 插件安装及使用

1. 安装 ScriptEcho 插件

打开 Windsurf 插件市场。
搜索 ScriptEcho Generator 插件。
Windsurf默认使用的是开源插件仓库，可能导致插件版本较旧或插件数量有限。可以通过以下步骤切换到VSCode官方仓库：
- 打开Windsurf，进入“文件 -> 首选项 -> 设置”。
- 搜索“marketplace”，将插件仓库地址替换为VSCode官方仓库。
  - Gallery：https://marketplace.visualstudio.com/_apis/public/gallery
  - Items：https://marketplace.visualstudio.com/items
点击安装，完成后重启 Windsurf。