amis 1.9.1-beta.1 → 1.9.1-beta.3

package/src/renderers/Log.tsx

@@ -3,11 +3,22 @@
  */
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
-import {BaseSchema, SchemaTpl} from '../Schema';
+import {BaseSchema} from '../Schema';
 import Ansi from 'ansi-to-react';
-import {filter} from '../utils/tpl';
 import {buildApi, isApiOutdated} from '../utils/api';
 import VirtualList from '../components/virtual-list';
+import Button from '../components/Button';
+import {
+  InputClearIcon,
+  LeftArrowIcon,
+  MinusIcon,
+  PauseIcon,
+  PlusIcon,
+  ReloadIcon,
+  RightArrowIcon
+} from '../components/icons';
+
+export type LogOperation = 'stop' | 'restart' | 'showLineNumber' | 'clear';
 
 /**
  * 日志展示组件
@@ -58,6 +69,11 @@ export interface LogSchema extends BaseSchema {
    * 关闭 ANSI 颜色支持
    */
   disableColor?: boolean;
+
+  /**
+   * 一些可操作选项
+   */
+  operation?: Array<LogOperation>;
 }
 
 export interface LogProps
@@ -67,6 +83,9 @@ export interface LogProps
 export interface LogState {
   lastLine: string;
   logs: string[];
+  refresh: boolean;
+  showLineNumber: boolean;
+  showOperation: boolean;
 }
 
 export class Log extends React.Component<LogProps, LogState> {
@@ -85,7 +104,10 @@ export class Log extends React.Component<LogProps, LogState> {
 
   state: LogState = {
     lastLine: '',
-    logs: []
+    logs: [],
+    refresh: true,
+    showLineNumber: false,
+    showOperation: false
   };
 
   constructor(props: LogProps) {
@@ -140,6 +162,36 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
+  refresh = () => {
+    let origin = this.state.refresh;
+    this.setState({
+      refresh: !origin
+    });
+    if (!origin) {
+      this.clear();
+      this.loadLogs();
+    }
+  };
+
+  clear = () => {
+    this.setState({
+      logs: [],
+      lastLine: ''
+    });
+  };
+
+  changeShowLineNumber = () => {
+    this.setState({
+      showLineNumber: !this.state.showLineNumber
+    });
+  };
+
+  changeShowOperation = () => {
+    this.setState({
+      showOperation: !this.state.showOperation
+    });
+  };
+
   async loadLogs() {
     const {source, data, env, translate: __, encoding, maxLength} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
@@ -162,6 +214,12 @@ export class Log extends React.Component<LogProps, LogState> {
       let lastline = '';
       let logs: string[] = [];
       for (;;) {
+        if (!this.state.refresh) {
+          await reader.cancel('click cancel button').then(() => {
+            this.props.env.notify('success', '日志已经停止刷新');
+            return;
+          });
+        }
         let {done, value} = await reader.read();
         if (value) {
           let text = new TextDecoder(encoding).decode(value, {stream: true});
@@ -180,7 +238,7 @@ export class Log extends React.Component<LogProps, LogState> {
             lastline = lines.pop() || '';
             if (maxLength) {
               if (logs.length + lines.length > maxLength) {
-                logs.splice(0, lines.length);
+                logs.splice(0, logs.length + lines.length - maxLength);
               }
             }
             logs = logs.concat(lines);
@@ -204,10 +262,13 @@ export class Log extends React.Component<LogProps, LogState> {
   /**
    * 渲染某一行
    */
-  renderLine(index: number, line: string) {
+  renderLine(index: number, line: string, showLineNumber: boolean) {
     const {classnames: cx, disableColor} = this.props;
     return (
       <div className={cx('Log-line')} key={index}>
+        {showLineNumber && (
+          <span className={cx('Log-line-number')}>{index + 1} </span>
+        )}
         {disableColor ? line : <Ansi useClasses>{line}</Ansi>}
       </div>
     );
@@ -222,9 +283,13 @@ export class Log extends React.Component<LogProps, LogState> {
       height,
       rowHeight,
       disableColor,
-      translate: __
+      translate: __,
+      operation,
+      env
     } = this.props;
 
+    const {refresh, showLineNumber, showOperation} = this.state;
+
     let loading = __(placeholder);
 
     if (!source) {
@@ -251,6 +316,9 @@ export class Log extends React.Component<LogProps, LogState> {
               key={index}
               style={{...style, whiteSpace: 'nowrap'}}
             >
+              {showLineNumber && (
+                <span className={cx('Log-line-number')}>{index + 1} </span>
+              )}
               {disableColor ? (
                 logs[index]
               ) : (
@@ -262,17 +330,84 @@ export class Log extends React.Component<LogProps, LogState> {
       );
     } else {
       lines = logs.map((line, index) => {
-        return this.renderLine(index, line);
+        return this.renderLine(index, line, showLineNumber);
       });
     }
 
     return (
-      <div
-        ref={this.logRef}
-        className={cx('Log', className)}
-        style={{height: useVirtualRender ? 'auto' : height}}
-      >
-        {useVirtualRender ? lines : lines.length ? lines : loading}
+      <div className={cx('Log', className)}>
+        <div
+          ref={this.logRef}
+          className={cx('Log-body')}
+          style={{height: useVirtualRender ? 'auto' : height}}
+        >
+          {useVirtualRender ? lines : lines.length ? lines : loading}
+        </div>
+        <div className={cx('Log-operation')}>
+          {operation &&
+            operation?.length > 0 &&
+            (showOperation ? (
+              <>
+                {operation.includes('stop') && (
+                  <Button
+                    size="sm"
+                    title="__('stop')"
+                    disabled={!refresh}
+                    onClick={this.refresh}
+                  >
+                    <PauseIcon />
+                  </Button>
+                )}
+
+                {operation.includes('restart') && (
+                  <Button
+                    size="sm"
+                    title={__('reload')}
+                    disabled={refresh}
+                    onClick={this.refresh}
+                  >
+                    <ReloadIcon />
+                  </Button>
+                )}
+
+                {operation.includes('showLineNumber') && (
+                  <Button
+                    size="sm"
+                    title={
+                      showLineNumber
+                        ? __('Log.notShowLineNumber')
+                        : __('Log.showLineNumber')
+                    }
+                    onClick={this.changeShowLineNumber}
+                  >
+                    {showLineNumber ? <MinusIcon /> : <PlusIcon />}
+                  </Button>
+                )}
+
+                {operation.includes('clear') && (
+                  <Button size="sm" title={__('clear')} onClick={this.clear}>
+                    <InputClearIcon />
+                  </Button>
+                )}
+
+                <Button
+                  size="sm"
+                  title={__('Log.collapse')}
+                  onClick={this.changeShowOperation}
+                >
+                  <LeftArrowIcon />
+                </Button>
+              </>
+            ) : (
+              <div
+                title={__('Log.expand')}
+                className={cx('Log-operation-hidden')}
+                onClick={this.changeShowOperation}
+              >
+                <RightArrowIcon />
+              </div>
+            ))}
+        </div>
       </div>
     );
   }

package/src/renderers/Page.tsx

@@ -467,6 +467,7 @@ export default class Page extends React.Component<PageProps> {
       store.openDrawer(ctx);
     } else if (action.actionType === 'ajax') {
       store.setCurrentAction(action);
+
       return store
         .saveRemote(action.api as string, ctx, {
           successMessage:
@@ -486,7 +487,11 @@ export default class Page extends React.Component<PageProps> {
           redirect && env.jumpTo(redirect, action);
           action.reload && this.reloadTarget(action.reload, store.data);
         })
-        .catch(() => {});
+        .catch((e) => {
+          if (throwErrors || action.countDown) {
+            throw e;
+          }
+        });
     } else {
       return onAction(e, action, ctx, throwErrors, delegate || this.context);
     }

package/src/renderers/Service.tsx

@@ -523,7 +523,11 @@ export default class Service extends React.Component<ServiceProps> {
           redirect && env.jumpTo(redirect, action);
           action.reload && this.reloadTarget(action.reload, store.data);
         })
-        .catch(() => {});
+        .catch((e) => {
+          if (throwErrors || action.countDown) {
+            throw e;
+          }
+        });
     } else {
       onAction(e, action, data, throwErrors, delegate || this.context);
     }

package/src/renderers/Wizard.tsx

@@ -718,23 +718,41 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
       formStore
         .saveRemote(action.api || step.api || api!, store.data, {
-          onSuccess: () => {
-            this.dispatchEvent('submitSucc', store.data);
+          onSuccess: async (result: any) => {
+            const dispatcher = await this.dispatchEvent(
+              'submitSucc',
+              createObject(this.props.data, {result})
+            );
 
             if (
               !isEffectiveApi(finnalAsyncApi, store.data) ||
               store.data[finishedField || 'finished']
             ) {
-              return;
+              return {
+                cbResult: null,
+                dispatcher
+              };
             }
 
-            return until(
+            const cbResult = until(
               () => store.checkRemote(finnalAsyncApi as Api, store.data),
               (ret: any) => ret && ret[finishedField || 'finished'],
               cancel => (this.asyncCancel = cancel)
             );
+            return {
+              cbResult,
+              dispatcher
+            };
           },
-          onFailed: error => this.dispatchEvent('submitFail', {error})
+          onFailed: async (error: any) => {
+            const dispatcher = await this.dispatchEvent(
+              'submitFail',
+              createObject(this.props.data, {error})
+            );
+            return {
+              dispatcher
+            };
+          }
         })
         .then(async value => {
           const feedback = action.feedback;
@@ -778,11 +796,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
           return value;
         })
-        .catch(error => {
-          this.dispatchEvent('submitFail', {error});
-          store.markSaving(false);
-          console.error(error);
-        });
+        .catch(error => {});
     } else {
       onFinished && onFinished(store.data, action);
       this.setState({completeStep: steps.length});

package/src/store/form.ts

@@ -326,10 +326,7 @@ export const FormStore = ServiceStore.named('FormStore')
         }
 
         if (!json.ok) {
-          // 验证错误
-          if (options && options.onFailed) {
-            options.onFailed(json);
-          }
+
           if (json.status === 422 && json.errors) {
             setFormItemErrors(json.errors);
 
@@ -349,18 +346,19 @@ export const FormStore = ServiceStore.named('FormStore')
           throw new ServerError(self.msg, json);
         } else {
           updateSavedData();
-          if (options && options.onSuccess) {
-            const ret = options.onSuccess(json);
-
-            if (ret && ret.then) {
-              yield ret;
-            }
+          let ret = options && options.onSuccess && options.onSuccess(json);
+          if (ret?.then) {
+            ret = yield ret;
+          }
+          if (ret?.cbResult?.then) {
+            yield ret.cbResult;
           }
           self.markSaving(false);
           self.updateMessage(
             json.msg ?? self.__(options && options.successMessage)
           );
-          self.msg &&
+          if (!ret?.dispatcher?.prevented) {
+            self.msg &&
             getEnv(self).notify(
               'success',
               self.msg,
@@ -371,15 +369,21 @@ export const FormStore = ServiceStore.named('FormStore')
                   }
                 : undefined
             );
+          }
           return json.data;
         }
       } catch (e) {
         self.markSaving(false);
-
+        let ret = options && options.onFailed && options.onFailed(e.response || {});
+        if (ret?.then) {
+          ret = yield ret;
+        }
         if (!isAlive(self) || self.disposed) {
           return;
         }
-
+        if (ret?.dispatcher?.prevented) {
+          return;
+        }
         if (e.type === 'ServerError') {
           const result = (e as ServerError).response;
           getEnv(self).notify(
@@ -395,7 +399,6 @@ export const FormStore = ServiceStore.named('FormStore')
         } else {
           getEnv(self).notify('error', e.message);
         }
-
         throw e;
       }
     });
@@ -479,9 +482,13 @@ export const FormStore = ServiceStore.named('FormStore')
         ) {
           let msg = failedMessage ?? self.__('Form.validateFailed');
           const env = getEnv(self);
-
-          msg && env.notify('error', msg);
-          validateErrCb && validateErrCb();
+          let dispatcher: any = validateErrCb && validateErrCb();
+          if (dispatcher?.then) {
+            dispatcher = yield dispatcher;
+          }
+          if (!dispatcher?.prevented){
+            msg && env.notify('error', msg);
+          }
           throw new Error(msg);
         }
 

package/src/utils/api.ts

@@ -307,7 +307,7 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
   if (data.hasOwnProperty('errorCode')) {
     // 阿里 Java 规范
     data.status = data.errorCode;
-    data.msg = data.errorMessage;
+    data.msg = data.errorMessage || data.errorMsg;
   } else if (data.hasOwnProperty('errno')) {
     data.status = data.errno;
     data.msg = data.errmsg || data.errstr || data.msg;

package/src/utils/renderer-event.ts

@@ -138,7 +138,6 @@ export async function dispatchEvent(
 
     unbindEvent = bindEvent(renderer);
   }
-
   // 没有可处理的监听
   if (!rendererEventListeners.length) {
     return Promise.resolve();
@@ -152,7 +151,6 @@ export async function dispatchEvent(
       data,
       scoped
     });
-
   // 过滤&排序
   const listeners = rendererEventListeners
     .filter(