What is the current behavior? 发生了什么？

What is the expected behavior? 期望的结果是什么？

Any additional comments? 相关环境信息？

• ice.js Version：
• build.json Configuration：
• Node Version:
• Platform:

1.Chrome下应用能正常访问 2.IE11下，框架和子应用分别独立访问可正常访问 3.IE11下框架应用始终命中ErrorComponent，提示子应用加载失败，F12查看控制台无任何报错 4.框架appConfig配置如下：

icestark: { type: 'framework', Layout: FrameworkLayout, getApps: async () => { }, appRouter: { basename: '/', ErrorComponent: <div style={{ fontSize: "18px" }}>应用有更新，请<a style={{ color: "#1375d8", cursor: "pointer", }} onClick={() => { window.location.reload(); }}>刷新应用</a></div>, LoadingComponent: <div>&nbsp;</div>, }, },

发生了什么?

复现步骤，错误日志以及相关配置

建议并上传到你的 GitHub 仓库，请使用 yarn init ice <project-name> 选择 Lite 模板，这样您的问题我们会更高优先级的进行解决。

期望的结果是什么

IE11下能正常访问应用

相关环境信息

• ice.js 版本：
• build.json 配置：
• Node 版本：
• 操作系统：

What is the current behavior? 发生了什么？

无法编译版本，

$ npm run build

> [email protected] build E:\试验场\node-demo\Test
> icejs build

ice.js 1.18.1
(node:17616) ExperimentalWarning: The fs.promises API is experimental
info 使用 Fusion 组件主题包： @alifd/theme-design-pro
                                         10% building(node:17616) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:17616) [DEP_WEBPACK_MODULE_ERRORS] DeprecationWarning: Module.errors was removed (use getErrors instead)
                                         92% sealing
<--- Last few GCs --->

[17616:0000016D5837D920]    44194 ms: Mark-sweep 1027.7 (1209.9) -> 1027.7 (1159.4) MB, 166.1 / 0.0 ms  (average mu = 0.682, current mu = 0.000) last resort GC in old space requested      
[17616:0000016D5837D920]    44359 ms: Mark-sweep 1027.7 (1159.4) -> 1027.7 (1145.4) MB, 165.1 / 0.0 ms  (average mu = 0.505, current mu = 0.000) last resort GC in old space requested      


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 000001D7360DC5C1]
    1: StubFrame [pc: 000001D7360CBAB6]
Security context: 0x03755771e6e1 <JSObject>
    2: replace [00000375577105E1](this=0x034a81e036a1 <Very long string[284090880]>,0x03e33eaf1c99 <JSRegExp <String[18]: [<>\/\u2028\u2029]>>,0x03e33eaf1d31 <JSFunction escapeUnsafeChars 
(sfi = 0000031CA2635991)>)
    3: serialize(aka serialize) [0000031CA2637C11] [E:\???\node-demo\Test\node_modules\serialize-javasc...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: 00007FF6F1340EFA v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
 2: 00007FF6F131A296 node::MakeCallback+4518
 3: 00007FF6F131AC80 node_module_register+2160
 4: 00007FF6F15B09BE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF6F15B08EF v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF6F1AEE954 v8::internal::Heap::MaxHeapGrowingFactor+11476
 7: 00007FF6F1AEC6E8 v8::internal::Heap::MaxHeapGrowingFactor+2664
 8: 00007FF6F168F0CB v8::internal::Factory::AllocateRawWithImmortalMap+59
 9: 00007FF6F1691BCD v8::internal::Factory::NewRawTwoByteString+77
10: 00007FF6F18A5C58 v8::internal::Smi::SmiPrint+536
11: 00007FF6F15A3ECB v8::internal::StringHasher::UpdateIndex+219
12: 00007FF6F174CC4B v8::internal::wasm::WasmInterpreter::Thread::Step+38283
13: 000001D7360DC5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] build: `icejs build`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     F:\node-cache\node\_logs\2021-06-30T02_36_18_138Z-debug.log

What is the expected behavior? 期望的结果是什么？

Any additional comments? 相关环境信息？

• ice.js Version：
• build.json Configuration：
• Node Version:
• Platform:

使用APPWORKS创建【JS】Fusion Design Pro即可复现

名词解释

Adapter, iceworks 为了适配不同工程工具以及不同项目结构而抽象出的概念，Adapter 核心会实现两部分能力：

1. 工程工具：即使用的构建调试工具，比如 ice-scripts/vue-cli，决定了项目启动构建以及工程配置等能力
2. Kit: 即项目开发的最佳实践，包含目录结构、路由配置、权限管理等，决定了面板里新建页面、新建路由如何实现，目前有两个版本 [email protected]（routeConfig/menuConfig）[email protected]（配置信息收敛到 config/）

项目约定

通过对项目指定对应的 adapter 即可接入 iceworks 进行开发，配置如下：

// 用户项目的 package.json
{
  "iceworks": {
    "adapter": "ice-adapter",   
  }
}

adapter 加载

加载时机

当用户在 iceworks 「切换项目」、「导入项目」、「新建项目』时，需要根据项目的 package.json 中指定的 adapter 进行动态安装并进行加载。

• adapter 在 iceworks 运行环境中执行，因此会作为 iceworks 的依赖进行安装。
• adapter 的版本策略
• adapter 检查更新机制
• 检查当前 adapter 是否已经安装

加载逻辑

当检测到项目变化时需要发送请求到后端，并检查当前 adapter 是否已经安装过：

• 如果已经安装过的 adapter 则会写入到 用户系统 .iceworks 的配文件中进行缓存，以此保证不必要的安装流程。
• 如果检查当前 adapter 没有安装，则需要动态执行安装 adapter 的操作，当安装完成时，并重新执行 loadAdapter 方法进行初始化。在安装过程中前端 UI 需要给出对应的提示，告知用户「由于当前项目依赖的 Adapter 发生改变，正在重新加载」 之类的提示。

面板开发

• 面板 UI 配置

面板 UI 配置指的是在 iceworks 中 「项目管理」和「工程管理」的面板展示形式可被修改，被定制成根据 Adapter 的实现进行展示的一种机制。其核心实现是面板 UI 部分会提供对应的属性，通过在 Adapter 中配置属性进行面板的配置化展示。

• 隐藏面板

隐藏面板指的是在 iceworks 中「项目管理」和「工程管理」的面板展示可被隐藏，可以根据实际工程的最佳实践只展示某些需要的面板。其核心实现是 Adapter 开发中只实现需要展示的面板接口即可，未实现的接口则不会进行展示。

• 新增面板（暂不实现）

新增面板指的是在 iceworks 中「项目管理」和「工程管理」的面板展示上新增加一个面板，或者当面板 UI 定制提供的属性不能满足定制需求时，需要进行面板开发。

具体实现

Adapter 目录规范

adapter
├─ modules/         ---- 模块实现
│  ├─ menu/
│  ├─ router/ 
│  ├─ task/ 
│  └─ index.ts
|
├─ locales/         ---- 多语言配置
│  ├─ en-US.json
│  └─ zh-CN.json
|
├─ package.json
└─ README.md

Adapter 开发

• 如果你需要实现的 Adapter 功能与 ICE 团队提供的 Adapter 功能大致相似，但是你希望定制面板 UI 或者想隐藏一些面板时，我们希望你基于 ice adapter 进行开发。

面板逻辑实现

// adapter/modules/menu.ts
// Menu 实现
import * as iceAdapter from '../ice-adapter';

class MenuAdapter extends iceAdapter.Menu {
  getAll() {

  }
}

面板 UI 配置

// config.ts
const config = {
 menu: {
    title: '菜单管理',
    description: '展示项目中的所有菜单，支持对菜单的增删改。',
    cover: 'https://img.alicdn.com/tfs/TB1mZ.Xc8GE3KVjSZFhXXckaFXa-300-300.png',
    isAvailable: true,

    // 新增 props 字段，用于控制前端 UI 面板的展示
    props: {
      icon: 'home',
    } 
  },
}

Adapter 面板导出

// index.ts
import Menu from './menu';

export {
  menu: {
      title: '',
      description: '',
      cover: ''
      module: Menu,
      isAvailable: true
  },
  ...
};

• 如果你需要实现的 Adapter 功能与 ICE 团队提供的 Adapter 功能差异较大，你可以根据 接口定义 单独实现 Adapter 功能，以及新增面板功能等。

注释：暂不支持

关于 Adapter 命名规范

命名规范遵循 「简单」、「语义化」、「易理解」原则，Adapter 命名规范如下：

# 命名规范
=> adapter-<工程工具名称>-<工程工具版本>-<最佳实践模板名称>-<最佳实践模板版本>

# 命名示例
=> adapter-ice-scripts-2-kit-2
=> adapter-ice-scripts-2-kit-3

TODO

• [x] 动态加载的能力 @chenbin92
• [x] 目录改造 @chenbin92
• [ ] props 定制面板能力 @temper357
• [ ] [email protected] + kit@2x => adapter-ice-scripts-1-kit-2 @temper357
• [ ] [email protected] + kit@2x => adapter-ice-scripts-2-kit-2 @temper357
• [ ] [email protected] + kit@3x => adapter-ice-scripts-2-kit-3 @chenbin92
• [ ] [email protected] + kit@2x => adapter-vue-cli-3-kit-2 @Orange-C
• [ ] 老项目迁移到 3.x 给出引导提示 @chenbin92

其他

• 涉及到目录改动，对现有 iceworks-3.x 的变更可能会有冲突

背景

原先方案存在的问题：

• 路由与 Layout 耦合，维护起来不方便
• 路由扁平，不支持任何级别的嵌套

路由方案

最终方案如下：

src/config/routes.js 文件内容

import React from 'react';

import UserLayout from './layouts/UserLayout';
import BasicLayout from './layouts/BasicLayout';

const UserLogin = React.lazy(() => import('./pages/UserLogin'));
const UserRegister = React.lazy(() => import('./pages/UserRegister'));
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Charts = React.lazy(() => import('./pages/Charts'));
const BasicCharts = React.lazy(() => import('./pages/BasicCharts'));
const Terms = React.lazy(() => import('./pages/Terms'));
const Result = React.lazy(() => import('./pages/Result'));
const BasicList = React.lazy(() => import('./pages/BasicList'));
const ProjectList = React.lazy(() => import('./pages/ProjectList'));
const BasicTable = React.lazy(() => import('./pages/BasicTable'));
const GeneralTable = React.lazy(() => import('./pages/GeneralTable'));
const Profile = React.lazy(() => import('./pages/Profile'));
const Setting = React.lazy(() => import('./pages/Setting'));
const Fail = React.lazy(() => import('./pages/Fail'));
const Empty = React.lazy(() => import('./pages/Empty'));
const Forbidden = React.lazy(() => import('./pages/Forbidden'));
const NotFound = React.lazy(() => import('./pages/NotFound'));
const ServerError = React.lazy(() => import('./pages/ServerError'));

const routerConfig = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: '/login',
        component: UserLogin,
      },
      {
        path: '/register',
        component: UserRegister,
      },
      {
        path: '/',
        redirect: '/user/login',
      },
      {
        component: NotFound,
      },
    ],
  },
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: '/dashboard/monitor',
        component: Dashboard,
      },
      {
        path: '/chart/general',
        component: Charts,
      },
      {
        path: '/chart/basic',
        component: BasicCharts,
      },
      {
        path: '/list/basic',
        component: BasicList,
      },
      {
        path: '/list/general',
        component: ProjectList,
      },
      {
        path: '/result/success',
        component: Result,
      },
      {
        path: '/result/fail',
        component: Fail,
      },
      {
        path: '/table/basic',
        component: BasicTable,
      },
      {
        path: '/profile/basic',
        component: Profile,
      },
      {
        path: '/profile/general',
        component: Terms,
      },
      {
        path: '/table/general',
        component: GeneralTable,
      },
      {
        path: '/account/setting',
        component: Setting,
      },
      {
        path: '/exception/500',
        component: ServerError,
      },
      {
        path: '/exception/403',
        component: Forbidden,
      },
      {
        path: '/exception/204',
        component: Empty,
      },
      {
        path: '/exception/404',
        component: NotFound,
      },
      {
        // Redirect 重定向
        path: '/',
        redirect: '/dashboard/monitor',
      },
      {
        // 404 没有匹配到的路由
        component: NotFound,
      },
    ],
  },
];

export default routerConfig;

src/router.jsx

import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import React, { Suspense } from 'react';
import path from 'path';
import routes from '@/routerConfig';
import PageLoading from '@/components/PageLoading';

const RouteItem = (props) => {
  const { redirect, path: routePath, component, key } = props;
  if (redirect) {
    return (
      <Redirect
        exact
        key={key}
        from={routePath}
        to={redirect}
      />
    );
  }
  return (
    <Route
      key={key}
      component={component}
      path={routePath}
    />
  );
};

const router = () => {
  return (
    <Router>
      <Switch>
        {routes.map((route, id) => {
          const { component: RouteComponent, children, ...others } = route;
          return (
            <Route
              key={id}
              {...others}
              component={(props) => {
                return (
                  children ? (
                    <RouteComponent key={id} {...props}>
                      <Suspense fallback={<PageLoading />}>
                        <Switch>
                          {children.map((routeChild, idx) => {
                            const { redirect, path: childPath, component } = routeChild;
                            return RouteItem({
                              key: `${id}-${idx}`,
                              redirect,
                              path: childPath && path.join(route.path, childPath),
                              component,
                            });
                          })}
                        </Switch>
                      </Suspense>
                    </RouteComponent>
                  ) : (
                    <Suspense fallback={<PageLoading />}>
                      {
                        RouteItem({
                          key: id,
                          ...props,
                        })
                      }
                    </Suspense>
                  )
                );
              }}
            />
          );
        })}
      </Switch>
    </Router>
  );
};

export default router;

可视化管理路由

功能

• [x] 导航面板
  • [x] 树级拖拽
  • [x] 增删改导航、导航组和外链
• [x] adapter
  • [x] 生成 menuConfig

路由管理

菜单管理

如何使用

声明 Model

// src/models/materials.js
export default {
  namespace: 'materials',
  state: {
    dataSource: [],
  },
  reducers: {
    async refresh() {
      const dataSourde = await fetch(/* api */);
      return { dataSourde };
    },
  },
};

创建 Store 并注册 Model

// src/store.js
import materials from '@models/materials';
import Store from '@store';

const store = new Store();
store.registerModel(materials);

export default store;

在 View 中使用 Model

// src/pages/Materials/index.js
import React, { useEffect } from 'react';
import store from '@src/store';

const Material = () => {
  const [materials] = store.useModel('materials');
  const { state: { dataSource } } = materials;

  useEffect(() => {
    (async () => {
      await materials.refresh();
    })();
  }, []);

  return (
    <div>
      <h2>Material</h2>
      <div>
        {dataSource.map(({ name }) => name)}
      </div>
    </div>
  );
};

export default Material;

增删改

// src/models/projects.js
export default {
  namespace: 'projects',
  state: {
    dataSource: [],
  },
  reducers: {
    async refresh() {
      return { dataSource: await fetch(/* api */) };
    },
    async add(project) {
      return { dataSource: await fetch(/* api */, project) };
    },
    async remove(id) {
      return { dataSource: await fetch(/* api */, id) };
    },
    async setProject(data) {
      return { dataSource: await fetch(/* api */, data) };
    },
  },
};

// src/pages/Project/index.js
import React, { useEffect } from 'react';
import { Input, Button } from '@alifd/next';
import store from '@src/store';

const Project = () => {
  const [projects] = store.useModel('projects');

  const { state: { dataSource } } = projects;

  useEffect(() => {
    (async () => {
      await projects.refresh();
    })();
  }, []);

  return (
    <div>
      <div>
        <div>my projects</div>
        <ul>
          {dataSource.map(({ name, id }, index) => {
            return (
              <li key={index}>
                {name}
                <Button onClick={async () => { await projects.remove(id); }}>
                  删除
                </Button>
              </li>
            );
          })}
        </ul>
      </div>
      <div>
        <Input
          type="text"
          onPressEnter={async (event) => { await projects.add({ name: event.target.value }); }}
        />
      </div>
    </div>
  );
};

export default Project;

环境信息

Window 7 node 10.15

• 操作系统：
• Iceworks 版本： 2.15

问题描述

打开飞冰主界面什么都不显示，感觉是连不上网路，是不是因为上网需要有代理的缘故， 导致的，

打开开发工具 事实上我直接访问网址是可以 ，连接的

node 代理也设置过

错误信息

目标

前端在发出异步请求前后能同步状态到视图中。

背景

当前使用 icestore 进行异步数据请求，但没有在数据请求发起后：

• 显示等待效果
• 数据请求失败后显示错误信息。

示例

以请求依赖列表为例，下面的代码没有上面所描述的两种处理：

store:

export default {
  dataSource: [],

  async refresh() {
    this.dataSource = await (await fetch(/* api */)).json();
  },

  async install(data) {
    await fetch(/* api */, data);
  },
};

view:

import stores from '@src/stores';

const Component = () => {
  const dependenciesStore = stores.useStores('dependencies'); 

  useEffect(() => {
    dependenciesStore.refresh();
  }, []);

  function onInstall() {
    async function install() {
      await dependenciesStore.install();

      dependenciesStore.refresh();
    }

    install();
  }

  return 
    <div>
      <button onClick={onInstall}>
        安装新依赖
      </button>
      <div>
        {dependenciesStore.dataSource.map(({name, id}) => {
          return <div>
            {name}
          </div>;
        })}
      </div>
    </div>;
};

基于 icestore 业务层如果要处理

store:

export default {
  dataSource: [],

  refreshError: undefined,

  refreshLoading: false,

  installError: undefined,

  installLoading: false,

  setRefreshLoading(value) {
    this.refreshLoading = value;
  }

  setInstallLoading(value) {
    this.installLoading = value;
  }

  async refresh() {
    try {
      this.dataSource = await (await fetch(/* api */)).json();
      this.refreshError = '';
    } catch (error) {
      this.refreshError = error;
    }
  },

  async install(data) {
    try {
      await fetch(/* api */, data);
      this.installError = '';
    } catch (error) {
      this.installError = error;
    }
  }
};

view:

import stores from '@src/stores';

const Component = () => {
  const dependenciesStore = stores.useStores('dependencies'); 

  async function fetch() {
    await dependenciesStore.setRefreshLoading(true);
    await dependenciesStore.refresh();
    await dependenciesStore.setRefreshLoading(false);
  }
  useEffect(() => {
    fetch();
  }, []);

  function onInstall() {
    async function install() {
      await dependenciesStore.setInstallLoading(true);
      await dependenciesStore.install();
      await dependenciesStore.setInstallLoading(false);

      fetch();
    }

    install();
  }

  return 
    <div>
      {dependenciesStore.installError}
      <button onClick={onInstall} disable={dependenciesStore.installLoading}>
        安装新依赖
      </button>
      {
        dependenciesStore.refreshLoading ? 
          '加载中' :  
          !dependenciesStore.refreshError ? 
            <div>
              {dependenciesStore.dataSource.map(({name, id}) => {
                return <div>
                  {name}
                </div>;
              })}
            </div> : 
            null
      }
    </div>
};

问题

• 该逻辑的处理如果在业务层，则比较恶心；是否可以在 icestore 层面做，如果在业务层面做怎么做更好？
• 如果在 icestore 层面做，怎么做？

思路

通常一个异步方法有以下状态：

• 该方法未调用；
• 该方法在调用中；
• 该方法调用完成。

在我们的实际场景中，我们关心的是该方法是否在调用中，该方法调用是否成功，如果有错误，错误是什么。

方案

在每个异步方法后面挂载字段用于标识方法的执行状态，然后前端通过这些字段去进行状态判断及进行视图处理。

• 该方法在调用中: pending；
• 该方法调用完成后是否有错误：error。

示例代码

// store
export default {
  dataSource: [],

  async refresh() {
    this.dataSource = await (await fetch(/* api */)).json();

    // 如果是根据接口的返回值确定成功与否状态：
    /*
    const result = await (await fetch()).json();

    if (result.error) {
      throw new Error(data.error);
    } else {
      this.dataSource = result.dataSource;
    }
    */
  },

  async install(data) {
    await fetch(/* api */, data);
  },
};

// view
import stores from '@src/stores';

const Component = () => {
  const dependenciesStore = stores.useStores('dependencies'); 

  useEffect(() => {
    dependenciesStore.refresh();
  }, []);

  function onInstall() {
    async function install() {
      await dependenciesStore.install();
      await dependenciesStore.refresh();
    }

    install();
  }

  return 
    <div>
      {dependenciesStore.install.error}
      <button onClick={onInstall} disable={dependenciesStore.install.pending}>
        安装新依赖
      </button>
      {
        dependenciesStore.refresh.pending ? 
          '加载中' :  
          !dependenciesStore.refresh.error ? 
            <div>
              {dependenciesStore.dataSource.map(({name, id}) => {
                return <div>
                  {name}
                </div>;
              })}
            </div> : 
            null
      }
    </div>
};

默认每个异步方法都会有该状态且触发两次视图的刷新：

• 第一次：异步方法执行前，将方法的 pending 属性赋值为 true；
• 第二次：异步方法执行后，将方法的 pending 属性赋值为 false，如果失败则将方法的 error 属性赋值为 Error。

可以在全局设置禁止异步状态的刷新：

import Icestore from '@ice/store';

const icestore = new Icestore();
icestore.disableAsyncStatus = true;

也可以在方法调用前禁止该次调用的异步状态的刷新：

import stores from '@src/stores';

const Component = () => {
  const dependenciesStore = stores.useStores('dependencies'); 

  useEffect(() => {
    dependenciesStore.refresh.disableAsyncStatus = true;
    dependenciesStore.refresh();
  }, []);

  return null;
};

特性介绍

Iceland 是一个搭建产品，帮助搭建者基于丰富的物料快速拖拽出想要的区块，重新定义前端区块搭建流程，使区块搭建更加智能化。

产品集成了海量高质量物料，全程可视化搭建，代码一键生成，区块一键导入页面等特性，提供了区块搭建的全新解决方案。

产品目前还处于测试阶段，我们将持续倾听用户诉求，朝着搭建智能化的目标不断更新，如果使用过程中存在问题，请钉钉扫描最下方二维码加入飞冰交流群，随时向我们反馈。

快速开始

这部分将引导你通过 Iceland 快速搭建一个简单的区块，并通过 Iceworks 用它生成你的页面，使你快速体验到可视化搭建的魅力。

本文档只对搭建自定义区块到生成页面整个操作流程做一个简单的介绍，Iceland 的更多特性和用法，用户可以在实际使用中继续发掘。

新建区块

首先启动 Iceworks ，打开【区块】页面，选择【自定义区块】选项卡；

点击【新建自定义区块】，为区块命名，点击【创建区块】；

下载必要的物料数据后，弹出 Iceland 搭建页面。

添加选项卡

接下来让我们用 Iceland 搭建一个带搜索的选项卡区块，首先点击物料面板上的【组件】按钮，选择【选项卡】分类或在【搜索栏】搜索选项卡，将选项卡添加到画布；

通过拖拽或者调整属性面板的属性的方式，调整选项卡的宽度，接着点击图层面板中的【选项卡面板】图层，调整选项卡的高度，在【选项卡】图层的属性面板的【属性配置】中可以修改选项卡的标题。

进阶技巧：

1. 觉得图层面板好多图层的名字都一样，分辨不清怎么办？

   答：双击图层面板里的图层可以对图层进行重命名

2. 觉得调整属性好麻烦，只想靠拖拽解决一切怎么办？

   答：点击标尺可以设置参考线，用参考线辅助组件固定位置

添加输入框

接下来让我们添加输入框，首先在物料面板点击【组件】按钮，通过搜索或选择分类的方式找到【主要搜索框】组件，添加组件到画布中，在属性面板的【属性配置】中可以修改搜索框的内容；

可选步骤：

1. 鼠标框选画布中的多个图层，或者 Cmd/Ctrl + 鼠标点击多选图层，通过右上角菜单面板的【群组】按钮将图层整合为一组；

进阶技巧：

1. 有时添加组件到画布上，却点不到组件是为什么？

   答：可能是图层被覆盖住了，可以通过右上角菜单面板的【排序】按钮重排顺序；

接下来我们可以在物料面板的【图标】项添加 iconfont ，在【元件】面板添加富文本或其他内容，或调整组件颜色等方式美化完善我们的区块，这部分可根据自己需要进行，就不再演示了；

区块生成页面

点击【预览】按钮，可以查看我们的区块在前端展示的效果，点击【截图并保存】保存我们的区块；

关闭搭建页面，回到 Iceworks ，在生成页面界面选择我们的自定义区块，就可以将你自己搭建的区块转换成代码；

新特性-Table搭建

功能

• 画布Editor可以进行删除与加减行列的操作
• 可以选中单元格进入单元格搭建模式，单元格中可以添加任意复杂组件
• 支持对每行的单元格中的组件进行差异化的属性配置，满足多样化的设计需求

画布Editor

• 选中Table后会在Table显示一个操作层Editor，按区域划分分成四个区域
  • 表格选择区
    • 选中该区域时属性面板上显示Table的属性面板，在对Table自身的属性进行配置之外，还可以对整体的行列进行加减操作。

• 列选择区
  • 选中该区域时点击右边的箭头展示配置menu，可以进行加减列操作，同时属性面板显示列对应的属性面板

• 行选择区
  • 选中该区域时点击下边的箭头展示配置menu，可以进行加减行操作，同时属性面板显示行对应的属性面板，可以调整行高

• 单元格选择区
  • 点击单元格选择区，进入单元格编辑模式，弹出一个黑色透明蒙层，可以从组件面板中添加组件到单元格中，点击蒙层时退出单元格编辑模式

注：单元格编辑模式中的一些联动说明

• 在单元格中对组件进行删除操作时，会将同一行其他所有其他单元格中相应组件删除
• 进行移动操作时，会改变同行中其他单元格的位置
• 只有改变组件属性时不会影响到其他单元格

如果使用过程中遇到任何问题或者有对产品的建议，欢迎扫码加入答疑钉钉群向我们反馈：

locale

支持在 icejs 应用中快速开启国际化功能。

快速开始

安装插件

$ npm i build-plugin-ice-i18n -D

使用

在 build.json 中使用插件：

{
  "plugins": [
    [
      "build-plugin-ice-i18n", {
        "locales": ["en-US", "zh-CN"],
        "defaultLocale": "zh-CN"
      }
    ]
  ]
}

上面的 en-US 和 zh-CN 是国际化语言的缩写，它们均遵循标准的UTS 语言标识符。比如：

• zh-CN：中文（中国）
• zh-HK：中文（香港）
• en-US：英文（美国）
• de: 德文

插件选项

• locales: 必填，该应用支持的国际化语言；
• defaultLocale: 必填，该应用默认的国际化语言；
• i18nRouting: 选填，默认值是 true。设置为 false 后，则将关闭国际化路由；
• redirect: 选填，默认值是 false。设置为 true 后，则将重定向到偏好语言对应的页面。

国际化路由

国际化路由是指在页面路由中包含当前页面的国际化语言。开启该插件后，ice.js 会自动处理路由。

举个例子，假如在 src/routes.ts 有以下的路由配置：

const routerConfig = [
  {
    path: '/home',
    exact: true,
    component: Home,
  },
]

同时在 build.json 中有以下配置：

{
  "plugins": [
    [
      "build-plugin-ice-i18n", {
        "locales": ["en-US", "zh-CN", "nl-NL"],
        "defaultLocale": "zh-CN"
      }
    ]
  ]
}

则以下路由是可访问的：

• /home：显示 zh-CN 语言，默认语言没有前缀路由；
• /en-US/home：显示 en-US 语言；
• /nl-NL/home：显示 nl-NL 语言。

关闭国际化路由

插件默认开启国际化路由。如需关闭，则需要在 build.json 中增加以下配置：

{
  "plugins": [
    [
      "build-plugin-ice-i18n", {
        "locales": ["en-US", "zh-CN"],
        "defaultLocale": "zh-CN",
+       "i18nRouting": false 
      }
    ]
  ]
}

获取语言信息

useLocale

useLocale hook 用于在组件中获取和修改语言信息。

import { useLocale } from 'ice';

function Home() {
  const [locale, setLocale] = useLocale();
  
  console.log('locale: ', locale);  // 'en-US'
  return (
    {/* 切换语言为 zh-CN */}
    <div onClick={() => setLocale('zh-CN')}>Set zh-CN</div>
  )
}

调用 setLocale 方法时，将更新 cookie 中的 ice_locale 的值。

getLocale

getLocale 用于获取当前页面的语言。

import { getLocale } from 'ice';

console.log(getLocale()); // 'zh-CN'

getAllLocales

getAllLocales 用于获取当前配置的所有语言。

import { getAllLocales } from 'ice';

console.log(getAllLocales()); // ['zh-CN', 'en-US']

getDefaultLocale

getDefaultLocale 用于获取默认配置的语言。

import { getDefaultLocale } from 'ice';

console.log(getDefaultLocale()); // 'zh-CN'

使用 i18n 库

插件不耦合任何 i18n 库，用户可以自行选择。目前社区比较流行的 i18n 库有 react-intl, react-i18next 等等。

在 icejs 中使用 i18n 库很简单，以 react-intl 为例：

// src/app.ts
import { IntlProvider } from 'react-intl';
import { useLocale } from 'ice';
import { messages } from './locales';

function LocaleProvider({ children }) {
  const [locale] = useLocale();
  const defaultLocale = getDefaultLocale();

  return (
    <IntlProvider 
      messages={messages[locale]} 
      locale={locale}
      defaultLocale={defaultLocale}
    >
      {children}
    </IntlProvider>
  );
}

const appConfig = {
  app: {
    addProvider: ({ children }) => {
      return (
        {/* 添加 Provider */}
      	<LocaleProvider>{children}</LocaleProvider>
      )
    }
  }
}

// src/locales/index.ts
import { LOCALES } from './locales';

const LOCALES = {
  ENGLISH: 'en-US',
  ZH_CN: 'zh-CN'
};

const messages = {
  [LOCALES.ENGLISH]: {
    homeTitle: 'Home',
    aboutTitle: 'About',
  },
  [LOCALES.ZH_CN]: {
    homeTitle: '首页',
    aboutTitle: '关于',
  },
};

切换路由

我们可以使用 <Link> 组件或者 history.push/replace 进行路由切换：

import { useLocale, getAllLocales, Link, useLocation } from 'ice';

export default function LocaleSwitcher() {
  const location = useLocation();
  const [activeLocale, setLocale] = useLocale();
  const allLocales = getAllLocales();
  const otherLocales = allLocales.filter((locale) => activeLocale !== locale);

  function switchAboutZHCNPage () {
    history.push('/about');
    setLocale('zh-CN');
  }
  return (
    <div>
      <div onClick={() => switchAboutZHCNPage()}>
        切换到中文
     </div>
     <ul>
        {
          otherLocales.map((locale: string) => {
            return (
              <li key={locale}>
                <Link 
                  to={location.pathname}
                  onClick={() => setLocale(locale)}>
                  {locale}
                </Link>
              </li>
            );
          })
        }
      </ul>
    </div>
  );
}

自动重定向

根据当前语言环境自动跳转到对应的国际化路由。其中，语言环境的识别顺序的规则如下：

• CSR：cookie 中 ice_locale 的值 > window.navigator.language > defaultLocale
• SSR：cookie 中 ice_locale 的值 > res 的 Header 中的 Accept-Language > defaultLocale

在 build.json 开启方式如下：

{
  "plugins": [
    [
      "build-plugin-ice-i18n", {
        "locales": ["en-US", "zh-CN"],
        "defaultLocale": "zh-CN",
+       "redirect": true 
      }
    ]
  ]
}

SSG

在 SSG 场景下，将根据在 build.json 中配置的 locales 字段，在 build 阶段会生成不同国际化语言对应的 html：

├── build
|  ├── 404.html
|  ├── about
|  |  └── index.html
|  ├── en-US
|  |  ├── about
|  |  |  └── index.html
|  |  └── index.html
|  ├── index.html

参考链接

• nextjs i18n-routing：https://nextjs.org/docs/advanced-features/i18n-routing
• umi locale 文档：https://umijs.org/zh-CN/plugins/plugin-locale
• umi locale RFC：https://github.com/umijs/umi-next/issues/7
• nextjs-i18n-example：https://github.com/luhc228/nextjs-i18n-app

Do you want to request a feature or report a bug? feature What is the current behavior? 基于iceworks创建的项目，按照ice的方式创建了services+models+components，现在想要测试services等文件夹下的内容

jest示例 `import listService from '../../services/list'

test('SearchInput tag selector', () => { const data = listService.fetchList() expect(data).not.toBeNull }) `

• icejs version：6.14.6
• Node verson：12.18.2

What is the expected behavior?

"test": "icejs test --jest-coverage", 运行测试：npm run test

`
Test suite failed to run

Cannot find module '$ice/history' from 'history.ts'

However, Jest was able to find:
    '../xxxxxxx/.ice/history.ts'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

However, Jest was able to find:
    '../xxxxxx/.ice/runtimeModule.tsx'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

However, Jest was able to find:
    '..xxx/.ice/createApp.tsx'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

However, Jest was able to find:
    '../xxxx/services/list.jsx'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

> 1 | import {
    | ^
  2 |   createBrowserHistory,
  3 |   createHashHistory,
  4 |   createMemoryHistory,

  at Resolver.resolveModule (node_modules/@alib/build-scripts/node_modules/jest-resolve/build/index.js:259:17)
  at Object.<anonymous> (.ice/history.ts:1:1)

`

怎么才能测试services下面的方法以及components下的组件

通过npm create ice选择Web Lite Scaffold初始化ice3项目，浏览器访问构建产物build/index.html 会发现默认模板代码的按钮点击事件无响应 如果关闭ssr和ssg，页面会白屏 猜测js并未执行，导致了第一种情况的点击无反应和第二种情况的的白屏问题

期望表现：正常渲染

需求背景

icestark 推荐用build-scripts框架来启动微模块，然后被icestark微模块使用。

微模块加载器通过加载 http://${url}/index.js 来加载微模块资源

大部分情况下，在线上或者预发环境 想直接调试和开发本地代码。 由于当前build-plugin-component 打包出来umd是 dist 文件目录，但不会启动服务，服务被占用了demo.

建议另外启动一个dist文件的server,譬如：http://127.0.0.1:3334

• feat: support env of target and renderer
• fix: error occur when disable SSR and SSG
• feat(miniapp): support app and page native events
• fix: pageConfig do not work when added to a new route
• feat: support split page chunk when compile server bundle