Ide-plugin NPM

zxchain-ide

支持主题切换

对于需要支持主题切换的样式，书写在了 src/pages/ide/theme.less 内，主题改变的颜色设计成参数。

功能列表

顶部导航栏

侧面功能栏及目录树对应功能

底部日志控制台、事件列表、世界态开发

编辑器，热键及多标签

方法列表

公用热键

ctrl + q ：关闭当前编译器
shift + left ：向左选中
shift + right ：向左选中
shift + up ：向上方选择一行
shift + down ：向下方选择一行
pageup ：向上翻页
pagedown : 向下翻页
ctrl+e：光标移至最右边
ctrl+k：删除光标右侧本行内容
ctrl+\: 自动补全

mac系统

command + 鼠标左键：跳转到函数方法详情
command + shift + f ：格式化
command + c：复制选中内容
command+ v：粘贴所复制到内容
command + f：查找替换功能
command + s：格式化并保存当前编译器文件
command + i: 选中当前所在词汇
command + shift + k: 删除当前行
command + [: 缩小选中行缩进
command + ]: 放大选中行缩进
command + /: 注释选中行
command + left: 光标聚焦行首
command + right: 光标聚焦行尾
command + up: 光标聚焦文本首
command + down: 光标聚焦文本尾
command + shift + left ：向左选中本行
command + shift + right ：向右选中本行
command + shift + up ：向上方选择文本首
command + shift + down ：向下方选择文本尾
command + shift + f ：代码格式化
command + shift + s ：保存全部
ctrl+d：向右删除
ctrl+h：向左删除
ctrl+t：光标文本后移

windows系统

ctrl + 鼠标左键：跳转到函数方法详情
ctrl + shift + f ：格式化
ctrl + c：复制选中内容
ctrl+ v：粘贴所复制到内容
ctrl + f：查找替换功能
ctrl + s：格式化并保存当前编译器文件
ctrl + i: 选中当前所在词汇
ctrl + shift + k: 删除当前行
ctrl + [: 缩小选中行缩进
ctrl + ]: 放大选中行缩进
ctrl + /: 注释选中行
ctrl + left: 光标分词左移
ctrl + right: 光标分词右移
ctrl + up: 光标聚焦文本首
ctrl + down: 光标聚焦文本尾
(ctrl或alt) + shift + left ：向左分词选中
(ctrl或alt) + shift + right ：向右分词选中
ctrl + shift + up ：向上方选择到文本首
ctrl + shift + down ：向下方选择文本尾
ctrl + shift + f ：代码格式化
ctrl + shift + s ：保存全部
ctrl+d：选中当前分词
ctrl+h：向左删除

CI配置

# 构建包 
$ npm run build

# 运行至信链测试环境
# 至信链测试环境需要配置whistle
# zxchain-ide-test-8fs5zjh23d8ab25-1258344699.tcloudbaseapp.com localhost:5176
#
$ npm run test

# 启动文档开发
$ npm run storybook


# 打包文档
$ npm run build-storybook

引入方式

import {IdeComponent} from 'ide-plugin';

<IdeComponent
  rightContentWidth={400}
  headerContent={<IdeHeader/>} 
  leftContent={<FileNav/>}
  rightContent={<IdeGuide/>}
  bottomContent={<BottomConsole />}
  ideEventListener={ideEventListener}/>

// 参数说明

{
  /**
   * ide顶部模块
   */
  headerContent?: React.ReactNode;
  /**
   * ide组件的事件监听函数
   * @returns
   */
  ideEventListener: IdeEventListener,
  userId?: string | number;
  /**
   * 左导航模块,如果不传则页面不展示这个模块 （可切换的导航）
   */
  leftNavMenuContent?: React.ReactNode;
  /**
   * 左导航功能区模块 （一般为随左导航切换的功能区域）
   */
  leftContent?: React.ReactNode;
  /**
   * 左导航功能区模块默认宽度
   */
  leftNavContentWidth?: number;
  /**
   * 编辑区右侧区域模块
   */
  rightContent?: React.ReactNode;
  /**
   * 编辑区右侧区域模块宽度
   */
  rightContentWidth?: number;
  /**
   *  底部日志区域模块，不传则不展示
   */
  bottomContent?: React.ReactNode;
  /**
   * 底部日志区域模块默认高度
   */
  bottomContentHeight?: number;
  /**
   * 自动保存的时间间隔
   */
  autoSaveSpace?: number;
  /**
   * 文件编辑文件tab右侧操作区内容
   */
  codeOptionContent?:React.ReactNode;
}

// IdeEventListener 结构

{
  /**
   * 保存文件
   * @param editorTab  当前编辑tab信息
   * @param doc 保存文件内容
   * @returns 空或者保存的文件内容（中间可能发生了代码各式化,返回空则编辑区域保持原来保存内容，如果返回字符串将覆盖编辑区内容）
   */
  onFileSave?: (editorTab:EditorItem, doc: string, cursorLine?: number, cursorCh?: number) => Promise<string|undefined>;
  /**
   * 自动保存文件，不设置则不自动保存
   * @param editorTab  当前编辑tab信息
   * @param doc 保存文件内容
   * @returns 空或者保存的文件内容（中间可能发生了代码各式化,返回空则编辑区域保持原来保存内容，如果返回字符串将覆盖编辑区内容）
   */
  onFileAutoSave?: (editorTab:EditorItem, doc: string, cursorLine?: number, cursorCh?: number) => Promise<string|undefined>;
  /**
   * 接入自动补全
   * @param editorTab  当前编辑tab信息
   * @param cursorLine 光标所在的行
   * @param cursorCh 光标所在行的具体位置
   * @param doc 保存文件内容
   */
  autocomplete?: (editorTab:EditorItem, doc: string, cursorLine: number, cursorCh: number) => Promise<AutocompleteData[]>;
  /**
   * 美化代码
   * @param param
   * @returns
   */
  fmt?: (param: FmtParam) => Promise<any>;
  /**
   * 接入切换到引用文件位置快捷键， tab+鼠标左键点击调用位置触发
   * @param editorTab  当前编辑tab信息
   * @param cursorLine 光标所在的行
   * @param cursorCh 光标所在行的具体位置
   * @returns
   */
  decl?: (editorTab:EditorItem, doc: string, cursorLine: number, cursorCh: number) => Promise<any>;
  /**
   * 获取当前编辑页面的代码内容
   * @param editorTab  当前编辑tab信息
   * @returns  当前编辑文件内容
   */
  onGetFileContent:(editorTab: EditorItem) => Promise<string>;
  /**
   * 当文件内容加载完毕或更新时触发
   * @param editorTab  当前编辑tab信息
   * @param doc 文件内容
   * @returns
   */
  onFileContentUpdate?: (editorTab:EditorItem, doc: string) => void;
  /**
   * 点击字体扩大按钮
   * @returns
   */
  onAddFontSize?: ()=>void;
  /**
   * 点击字体缩小按钮
   * @returns
   */
  onReduceFontSize?: ()=>void;
  /**
  * 获取tab标签鼠标聚焦弹出信息内容，默认展示path
  * @returns
  */
  onGetFileTipInfo?: (editorTab:EditorItem) => string;
}

// ide数据通过 引入useIdeStore 的方法操作

// 例如

import {useIdeStore} from 'ide-plugin';
const ideStore = useIdeStore();
ideStore.clearEditor();

// 结构说明

。。。。

v1.1.*

IDE组件去除 leftNavMenuContent，leftNavContentWidth， bottomContentHeight属性，改为ideStore 里的leftContentSize,rightContentSize,bottomContentSize控制大小。 ideStore 添加 currentFileTab 当前编辑的文件信息。添加codeOptionContent 支持自定义编辑文件tab右侧操作区内容 IdeFileTabItemProp 标签的action 添加保存文件 saveFile 类型添加setEditorTheme 修改ide编辑区主题样式添加openEditorByPull 为向后最加tab， openEditor改为向前最加添加saveAll 保存所有文件添加 onGetFileTipInfo 支持自定义tab标签鼠标聚焦弹出信息内容