通达科技 - 宜兴电脑维护及IT服务外包服务商

 Exercise

1. 当操作成功完成时，显示 notification 消息，如果操作失败则显示警告。

2. 如果失败了，通知应该是永久的。

 Exercise

1. 创建一个系统托盘组件，连接到我们之前创建的统计服务。

2. 使用它来显示新订单的数量。

3. 点击它应该打开一个包含所有订单的列表视图。

4. 奖励点：通过将信息添加到会话信息中，避免进行初始RPC。服务器在初始响应中向Web客户端提供会话信息。

 Exercise

1. The tshirt 服务应定期重新加载其数据。

 Exercise

2. 修改 tshirt 服务以返回一个 reactive 对象。重新加载数据应该直接更新这个 reactive 对象。

3. 然后，系统托盘项可以对服务返回值执行 useState。

4. 这并不是真的必要，但是你也可以在一个自定义的钩子函数 useStatistics 中 封装 对 useService 和 useState 的调用。

 Exercise

修改 图像预览字段 ，添加一个命令到命令面板，以在新的浏览器标签页（或窗口）中打开图像。

确保只有在屏幕上显示字段预览时，命令才处于活动状态。

 Exercise

1. 继承 ControlPanel 组件 的 web.Breadcrumbs 模板，以在面包屑旁边添加一个图标。您可能想要使用 fa-eye 或 fa-eyes 图标。

2. Patch 组件以使用 对话框服务 在点击时显示消息。您可以使用 ConfirmationDialog。

3. 将CSS类 blink 添加到表示眼睛的元素，并将以下代码粘贴到位于您补丁目录中的新CSS文件中。

   .blink {
     animation: blink-animation 1s steps(5, start) infinite;
     -webkit-animation: blink-animation 1s steps(5, start) infinite;
   }
   @keyframes blink-animation {
     to {
       visibility: hidden;
     }
   }
   @-webkit-keyframes blink-animation {
     to {
         visibility: hidden;
     }
   }
   

 Exercise

1. 更新 tshirt_service.js，添加一个 loadCustomers 方法，该方法返回一个 promise，该 promise 返回所有客户的列表（并且只执行一次调用）。

2. 在仪表板上，将 AutoComplete 组件 添加到控制面板中的按钮旁边。

3. 获取具有tshirt服务的客户列表，并在AutoComplete组件中显示，通过 fuzzyLookup 方法进行过滤。

 Exercise

1. 创建一个 kitten 服务，该服务应该使用 router 服务 来检查活动 URL 哈希的内容。如果 URL 中设置了 kitten，则将 o-kitten-mode 类添加到文档主体。

2. 在 kitten_mode.scss 中添加以下 SCSS 代码：

   .o-kitten-mode {
     background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/58/Mellow_kitten_%28Unsplash%29.jpg);
     background-size: cover;
     background-attachment: fixed;
   }
   
   .o-kitten-mode > * {
     opacity: 0.9;
   }
   

3. 在命令面板中添加一个命令，用于切换小猫模式。切换小猫模式应该切换类 o-kitten-mode 并相应地更新当前 URL。

 Exercise

1. 修改清单以创建一个新的 bundle awesome_tshirt.dashboard.

2. 将这个令牌添加到令牌包中。如有需要，创建文件夹并移动文件。

3. 从 web.assets_backend 捆绑包中删除代码，以便不会加载两次。

 Exercise

4. 创建一个新文件 dashboard_loader.js.

5. 将注册 AwesomeDashboard 到仪表板加载器的代码复制。

6. 将 AwesomeDashboard 注册为 LazyComponent。

7. 修改仪表板加载器中的代码，使用延迟组件 AwesomeDashboard。