feat(frontend): 优化页面样式，更现代化

gringotts-frontend/pages/index/main.js

@@ -1,14 +1,14 @@
 import './style.css'
-import {apiGet, useAmis} from '../../components/constants.js'
+import {administratorOnly, apiGet, checkerOnly, useAmis, userOnly} from '../../components/constants.js'
-import {userChangePasswordDialog} from "../../components/user/dialog-user-change-password.js";
+import {userChangePasswordDialog} from '../../components/user/dialog-user-change-password.js'
-import {tabUser} from "./tab-user.js";
+import {tabUser} from './tab-user.js'
-import {tabData} from "./tab-data.js";
+import {tabData} from './tab-data.js'
-import {tabSettings} from "./tab-settings.js";
+import {tabSettings} from './tab-settings.js'
-import {tabCheck} from "./tab-check.js";
+import {tabCheck} from './tab-check.js'
-import {tabPermissions} from "./tab-permissions.js";
+import {tabPermissions} from './tab-permissions.js'
-import {tabMarket} from "./tab-market.js";
+import {tabMarket} from './tab-market.js'
 
-useAmis(information => {
+useAmis((information) => {
   return {
     id: 'header-service',
     className: 'h-full',
@@ -23,22 +23,105 @@ useAmis(information => {
             args: {
               url: '/pages/login/index.html',
               blank: false,
-            }
+            },
-          }
+          },
-        ]
+        ],
-      }
+      },
     },
     body: [
       {
+        id: 'root-page',
         type: 'page',
-        title: information.title,
+        title: {
-        subTitle: '提供合法合规的数据要素可信供给工具',
+          type: 'flex',
+          justify: 'flex-start',
+          items: [
+            {
+              type: 'avatar',
+              className: 'mr-2 bg-transparent',
+              src: '/logo.svg',
+              shape: 'square',
+              fit: 'contain',
+            },
+            {
+              type: 'flex',
+              className: 'w-50',
+              direction: 'column',
+              items: [
+                {
+                  type: 'tpl',
+                  className: 'font-bold text-white',
+                  tpl: information.title,
+                },
+                {
+                  type: 'tpl',
+                  className: 'font-bold text-xs text-gray-200',
+                  tpl: '提供合法合规的数据要素可信供给工具',
+                },
+              ]
+            }
+          ]
+        },
+        // subTitle: '提供合法合规的数据要素可信供给工具',
+        headerClassName: 'bg-gray-800 text-white',
+        toolbarClassName: 'bg-gray-800',
         toolbar: [
+          {
+            type: 'action',
+            label: '数据市场',
+            icon: 'fa fa-store',
+            level: 'link',
+            className: 'text-bold text-white',
+            onEvent: {
+              click: {
+                actions: [
+                  {
+                    actionType: 'setValue',
+                    componentId: 'root-page',
+                    args: {
+                      value: {
+                        activePage: 'market',
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            type: 'action',
+            label: '我的资源',
+            icon: 'fa fa-database',
+            level: 'link',
+            className: 'text-bold text-white',
+            onEvent: {
+              click: {
+                actions: [
+                  {
+                    actionType: 'setValue',
+                    componentId: 'root-page',
+                    args: {
+                      value: {
+                        activePage: 'tab',
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          },
+          {
+            type: 'divider',
+            direction: 'vertical',
+            color: '#4d4d4d',
+          },
           {
             type: 'dropdown-button',
             label: '${username}',
             align: 'right',
             trigger: 'hover',
+            btnClassName: 'text-white',
+            level: 'link',
             buttons: [
               {
                 label: '修改密码',
@@ -49,26 +132,69 @@ useAmis(information => {
                 actionType: 'ajax',
                 api: apiGet('${base}/user/logout'),
                 reload: 'header-service',
-              }
+              },
-            ]
+            ],
-          }
+          },
         ],
         bodyClassName: 'p-0',
-        body: {
+        data: {
-          className: 'h-full border-0',
+          activePage: 'market',
-          type: 'tabs',
+          tabActiveKey: 'data'
-          tabsMode: 'vertical',
-          tabs: [
-            // tabOverview(),
-            tabMarket(),
-            tabData(),
-            tabPermissions(),
-            tabCheck(),
-            tabUser(),
-            tabSettings(),
-          ]
         },
-      }
+        body: [
-    ]
+          {
+            visibleOn: "${activePage === 'market'}",
+            type: 'wrapper',
+            body: tabMarket(),
+          },
+          {
+            visibleOn: "${activePage === 'tab'}",
+            className: 'h-full border-0',
+            type: 'tabs',
+            tabsMode: 'vertical',
+            activeKey: '${tabActiveKey}',
+            tabs: [
+              // tabOverview(),
+              {
+                hash: 'data',
+                visibleOn: userOnly,
+                title: '数据资源',
+                icon: 'fa fa-database',
+                reload: true,
+                body: tabData()
+              },
+              {
+                hash: 'permission',
+                visibleOn: userOnly,
+                title: '权属管理',
+                icon: 'fa fa-key',
+                reload: true,
+                body: tabPermissions(),
+              },
+              {
+                hash: 'check',
+                visibleOn: checkerOnly,
+                title: '审核审查',
+                icon: 'fa fa-shield-halved',
+                reload: true,
+                body: tabCheck(),
+              },
+              {
+                hash: 'user',
+                visibleOn: administratorOnly,
+                title: '用户管理',
+                icon: 'fa fa-user',
+                reload: true,
+                body: tabUser(),
+              },
+              {
+                hash: 'settings',
+                ...tabSettings(),
+              }
+            ],
+          }
+        ],
+      },
+    ],
   }
 })

gringotts-frontend/pages/index/tab-check.js

@@ -1,6 +1,5 @@
 import {
   apiGet,
-  checkerOnly,
   checkOverMapping,
   checkTypeMapping,
   crudCommonOptions,
@@ -13,134 +12,128 @@ import {authenticationDetailDialog, confirmationDetailDialog} from "../../compon
 import {wareDetailDialog} from "../../components/ware/dialog-ware.js";
 
 export function tabCheck() {
-  return {
+  return [
-    visibleOn: checkerOnly,
+    {
-    title: '审核审查',
+      name: 'check_order_list',
-    icon: 'fa fa-shield-halved',
+      type: 'crud',
-    reload: true,
+      api: apiGet('${base}/check_order/list'),
-    body: [
+      ...crudCommonOptions(),
-      {
+      headerToolbar: [
-        name: 'check_order_list',
+        'reload',
-        type: 'crud',
+      ],
-        api: apiGet('${base}/check_order/list'),
+      columns: [
-        ...crudCommonOptions(),
+        stringField('description', '描述'),
-        headerToolbar: [
+        mappingField('type', '类型', checkTypeMapping),
-          'reload',
+        mappingField('state', '状态', checkOverMapping),
-        ],
+        timeField('createdTime', '创建时间'),
-        columns: [
+        stringField('createdUsername', '创建人', 100),
-          stringField('description', '描述'),
+        timeField('modifiedTime', '最后修改时间'),
-          mappingField('type', '类型', checkTypeMapping),
+        stringField('modifiedUsername', '最后操作人', 100),
-          mappingField('state', '状态', checkOverMapping),
+        operationField('操作', undefined, [
-          timeField('createdTime', '创建时间'),
+          {
-          stringField('createdUsername', '创建人', 100),
+            visibleOn: `\${type === 'CONFIRMATION' && state === 'CHECKING'}`,
-          timeField('modifiedTime', '最后修改时间'),
+            type: 'action',
-          stringField('modifiedUsername', '最后操作人', 100),
+            label: '处理',
-          operationField('操作', undefined, [
+            level: 'link',
-            {
+            ...confirmationDetailDialog(
-              visibleOn: `\${type === 'CONFIRMATION' && state === 'CHECKING'}`,
+              'parameters.confirmationId',
-              type: 'action',
+              [
-              label: '处理',
+                {
-              level: 'link',
+                  type: 'action',
-              ...confirmationDetailDialog(
+                  label: '同意',
-                'parameters.confirmationId',
+                  actionType: 'ajax',
-                [
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '同意',
+                },
-                    actionType: 'ajax',
+                {
-                    close: true,
+                  type: 'action',
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
+                  label: '拒绝',
-                    reload: 'check_order_list',
+                  actionType: 'ajax',
-                  },
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '拒绝',
+                },
-                    actionType: 'ajax',
+              ],
-                    close: true,
+            ),
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
+          },
-                    reload: 'check_order_list',
+          {
-                  },
+            visibleOn: `\${type === 'CONFIRMATION' && state !== NORMAL}`,
-                ],
+            type: 'action',
-              ),
+            label: '查看',
-            },
+            level: 'link',
-            {
+            ...confirmationDetailDialog('parameters.confirmationId'),
-              visibleOn: `\${type === 'CONFIRMATION' && state !== NORMAL}`,
+          },
-              type: 'action',
+          {
-              label: '查看',
+            visibleOn: `\${type === 'AUTHENTICATION' && state === 'CHECKING'}`,
-              level: 'link',
+            type: 'action',
-              ...confirmationDetailDialog('parameters.confirmationId'),
+            label: '处理',
-            },
+            level: 'link',
-            {
+            ...authenticationDetailDialog(
-              visibleOn: `\${type === 'AUTHENTICATION' && state === 'CHECKING'}`,
+              'parameters.authenticationId',
-              type: 'action',
+              [
-              label: '处理',
+                {
-              level: 'link',
+                  type: 'action',
-              ...authenticationDetailDialog(
+                  label: '同意',
-                'parameters.authenticationId',
+                  actionType: 'ajax',
-                [
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '同意',
+                },
-                    actionType: 'ajax',
+                {
-                    close: true,
+                  type: 'action',
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
+                  label: '拒绝',
-                    reload: 'check_order_list',
+                  actionType: 'ajax',
-                  },
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '拒绝',
+                },
-                    actionType: 'ajax',
+              ],
-                    close: true,
+            ),
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
+          },
-                    reload: 'check_order_list',
+          {
-                  },
+            visibleOn: `\${type === 'AUTHENTICATION' && state !== NORMAL}`,
-                ],
+            type: 'action',
-              ),
+            label: '查看',
-            },
+            level: 'link',
-            {
+            ...authenticationDetailDialog('parameters.authenticationId'),
-              visibleOn: `\${type === 'AUTHENTICATION' && state !== NORMAL}`,
+          },
-              type: 'action',
+          {
-              label: '查看',
+            visibleOn: `\${type === 'MARKET' && state === 'CHECKING'}`,
-              level: 'link',
+            type: 'action',
-              ...authenticationDetailDialog('parameters.authenticationId'),
+            label: '处理',
-            },
+            level: 'link',
-            {
+            ...wareDetailDialog(
-              visibleOn: `\${type === 'MARKET' && state === 'CHECKING'}`,
+              'parameters.wareId',
-              type: 'action',
+              [
-              label: '处理',
+                {
-              level: 'link',
+                  type: 'action',
-              ...wareDetailDialog(
+                  label: '同意',
-                'parameters.wareId',
+                  actionType: 'ajax',
-                [
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '同意',
+                },
-                    actionType: 'ajax',
+                {
-                    close: true,
+                  type: 'action',
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/APPLY'),
+                  label: '拒绝',
-                    reload: 'check_order_list',
+                  actionType: 'ajax',
-                  },
+                  close: true,
-                  {
+                  api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
-                    type: 'action',
+                  reload: 'check_order_list',
-                    label: '拒绝',
+                },
-                    actionType: 'ajax',
+              ],
-                    close: true,
+            ),
-                    api: apiGet('${base}/check_order/operation/${checkOrderId}/REJECT'),
+          },
-                    reload: 'check_order_list',
+          {
-                  },
+            visibleOn: `\${type === 'MARKET' && state !== NORMAL}`,
-                ],
+            type: 'action',
-              ),
+            label: '查看',
-            },
+            level: 'link',
-            {
+            ...wareDetailDialog('parameters.wareId'),
-              visibleOn: `\${type === 'MARKET' && state !== NORMAL}`,
+          },
-              type: 'action',
+        ]),
-              label: '查看',
+      ],
-              level: 'link',
+    },
-              ...wareDetailDialog('parameters.wareId'),
+  ]
-            },
-          ]),
-        ],
-      },
-    ],
-  }
 }

gringotts-frontend/pages/index/tab-data.js

@@ -11,8 +11,7 @@ import {
   mappingField,
   operationField,
   permissionStateMapping,
-  timeField,
+  timeField
-  userOnly
 } from "../../components/constants.js";
 import {wareAddDialog, wareDetailDialog, wareEditeDialog} from "../../components/ware/dialog-ware.js";
 
@@ -86,101 +85,95 @@ export function resourceList(showMode = false) {
 
 export function tabData() {
   return {
-    visibleOn: userOnly,
+    type: 'tabs',
-    title: '数据资源',
+    tabs: [
-    icon: 'fa fa-database',
+      {
-    reload: true,
+        title: '资源定义',
-    body: {
+        tab: resourceList()
-      type: 'tabs',
+      },
-      tabs: [
+      {
-        {
+        title: '资源上架',
-          title: '资源定义',
+        tab: {
-          tab: resourceList()
+          type: 'crud',
-        },
+          api: apiGet('${base}/ware/list'),
-        {
+          ...crudCommonOptions(),
-          title: '资源上架',
+          headerToolbar: [
-          tab: {
+            'reload',
-            type: 'crud',
+            {
-            api: apiGet('${base}/ware/list'),
+              type: 'action',
-            ...crudCommonOptions(),
+              label: '',
-            headerToolbar: [
+              icon: 'fa fa-plus',
-              'reload',
+              ...wareAddDialog()
+            },
+          ],
+          columns: [
+            {
+              name: 'name',
+              label: '名称',
+              width: 200,
+            },
+            {
+              name: 'description',
+              label: '描述',
+            },
+            mappingField('state', '状态', permissionStateMapping),
+            timeField('createdTime', '创建时间'),
+            operationField('操作', undefined, [
               {
                 type: 'action',
-                label: '',
+                label: '查看',
-                icon: 'fa fa-plus',
+                level: 'link',
-                ...wareAddDialog()
+                ...wareDetailDialog(),
-              },
-            ],
-            columns: [
-              {
-                name: 'name',
-                label: '名称',
-                width: 200,
               },
               {
-                name: 'description',
+                visibleOn: "${state === 'CHECKING'}",
-                label: '描述',
+                type: 'action',
+                label: '撤销',
+                level: 'link',
+                confirmTitle: '确认撤销',
+                confirmText: '确认撤销名称为「${name}」的确权申请吗？',
+                actionType: 'ajax',
+                api: apiGet('${base}/ware/retract/${id}'),
               },
-              mappingField('state', '状态', permissionStateMapping),
+              {
-              timeField('createdTime', '创建时间'),
+                visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
-              operationField('操作', undefined, [
+                type: 'action',
-                {
+                label: '提交',
-                  type: 'action',
+                level: 'link',
-                  label: '查看',
+                confirmTitle: '确认提交',
-                  level: 'link',
+                confirmText: '确认提交名称为「${name}」的确权申请吗？',
-                  ...wareDetailDialog(),
+                actionType: 'ajax',
-                },
+                api: apiGet('${base}/ware/submit/${id}'),
-                {
+              },
-                  visibleOn: "${state === 'CHECKING'}",
+              {
-                  type: 'action',
+                type: 'dropdown-button',
-                  label: '撤销',
+                level: 'link',
-                  level: 'link',
+                icon: 'fa fa-ellipsis-h',
-                  confirmTitle: '确认撤销',
+                hideCaret: true,
-                  confirmText: '确认撤销名称为「${name}」的确权申请吗？',
+                trigger: 'hover',
-                  actionType: 'ajax',
+                buttons: [
-                  api: apiGet('${base}/ware/retract/${id}'),
+                  {
-                },
+                    disabledOn: "${state !== 'DRAFT'}",
-                {
+                    type: 'action',
-                  visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
+                    label: '编辑',
-                  type: 'action',
+                    level: 'link',
-                  label: '提交',
+                    ...wareEditeDialog(),
-                  level: 'link',
+                  },
-                  confirmTitle: '确认提交',
+                  {
-                  confirmText: '确认提交名称为「${name}」的确权申请吗？',
+                    disabledOn: "${state === 'CHECKING'}",
-                  actionType: 'ajax',
+                    type: 'action',
-                  api: apiGet('${base}/ware/submit/${id}'),
+                    label: "删除",
-                },
+                    confirmTitle: '确认删除',
-                {
+                    confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
-                  type: 'dropdown-button',
+                    actionType: 'ajax',
-                  level: 'link',
+                    api: apiGet('${base}/ware/remove/${id}'),
-                  icon: 'fa fa-ellipsis-h',
+                  },
-                  hideCaret: true,
+                ]
-                  trigger: 'hover',
+              },
-                  buttons: [
+            ]),
-                    {
+          ]
-                      disabledOn: "${state !== 'DRAFT'}",
-                      type: 'action',
-                      label: '编辑',
-                      level: 'link',
-                      ...wareEditeDialog(),
-                    },
-                    {
-                      disabledOn: "${state === 'CHECKING'}",
-                      type: 'action',
-                      label: "删除",
-                      confirmTitle: '确认删除',
-                      confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
-                      actionType: 'ajax',
-                      api: apiGet('${base}/ware/remove/${id}'),
-                    },
-                  ]
-                },
-              ]),
-            ]
-          }
         }
-      ]
+      }
-    }
+    ]
   }
 }

gringotts-frontend/pages/index/tab-market.js

@@ -3,88 +3,83 @@ import {authenticationAddDialog} from "../../components/permission/dialog-permis
 
 export function tabMarket() {
   return {
-    title: '数据市场',
+    type: 'crud',
-    icon: 'fa fa-store',
+    api: {
-    reload: true,
+      ...apiGet('${base}/ware/list_public'),
-    body: {
+      adaptor: (payload, response, api, context) => {
-      type: 'crud',
+        payload.data = payload.data.map(i => {
-      api: {
+          return {
-        ...apiGet('${base}/ware/list_public'),
+            ...i,
-        adaptor: (payload, response, api, context) => {
+            targetId: i.resourceId,
-          payload.data = payload.data.map(i => {
-            return {
-              ...i,
-              targetId: i.resourceId,
-            }
-          })
-          return payload
-        }
-      },
-      ...crudCommonOptions(),
-      headerToolbar: [
-        'reload',
-      ],
-      mode: 'cards',
-      columnsCount: 3,
-      card: {
-        header: {
-          title: '${name}',
-          subTitle: '${createdTime}',
-          avatar: '${icon}',
-          avatarClassName: 'pull-left thumb-md avatar b-3x m-r'
-        },
-        body: '${TRUNCATE(description, 50)}',
-        actions: [
-          {
-            type: 'action',
-            label: '查看',
-            actionType: 'dialog',
-            dialog: {
-              title: '数据产品详情',
-              size: 'md',
-              actions: [],
-              body: {
-                type: 'service',
-                api: apiGet(`\${base}/ware/detail/\${id}`),
-                body: [
-                  {
-                    type: 'property',
-                    title: '产品信息',
-                    items: [
-                      {
-                        label: '名称',
-                        content: '${name}',
-                      },
-                      {
-                        label: '归属',
-                        content: '${createdUsername}',
-                      },
-                      {
-                        label: '创建时间',
-                        content: '${createdTime}',
-                      },
-                      {
-                        span: 3,
-                        label: '描述',
-                        content: '${description}',
-                      },
-                    ]
-                  },
-                  {
-                    type: 'tpl',
-                    tpl: '${content|raw}'
-                  }
-                ]
-              }
-            }
-          },
-          {
-            type: 'action',
-            label: '申请授权',
-            ...authenticationAddDialog(),
           }
-        ]
+        })
+        return payload
+      }
+    },
+    ...crudCommonOptions(),
+    headerToolbar: [
+      'reload',
+    ],
+    mode: 'cards',
+    columnsCount: 3,
+    card: {
+      header: {
+        title: '${name}',
+        subTitle: '${createdTime}',
+        avatar: '${icon}',
+        avatarClassName: 'pull-left thumb-md avatar b-3x m-r'
       },
+      body: '${TRUNCATE(description, 50)}',
+      actions: [
+        {
+          type: 'action',
+          label: '查看',
+          actionType: 'dialog',
+          dialog: {
+            title: '数据产品详情',
+            size: 'md',
+            actions: [],
+            body: {
+              type: 'service',
+              api: apiGet(`\${base}/ware/detail/\${id}`),
+              body: [
+                {
+                  type: 'property',
+                  title: '产品信息',
+                  items: [
+                    {
+                      label: '名称',
+                      content: '${name}',
+                    },
+                    {
+                      label: '归属',
+                      content: '${createdUsername}',
+                    },
+                    {
+                      label: '创建时间',
+                      content: '${createdTime}',
+                    },
+                    {
+                      span: 3,
+                      label: '描述',
+                      content: '${description}',
+                    },
+                  ]
+                },
+                {
+                  type: 'tpl',
+                  tpl: '${content|raw}'
+                }
+              ]
+            }
+          }
+        },
+        {
+          type: 'action',
+          label: '申请授权',
+          ...authenticationAddDialog(),
+        }
+      ]
     }
   }
 }

gringotts-frontend/pages/index/tab-permissions.js

@@ -12,7 +12,6 @@ import {
   stringField,
   stringWrapField,
   timeField,
-  userOnly,
 } from "../../components/constants.js";
 import {
   authenticationAddDialog,
@@ -25,172 +24,166 @@ import {
 
 export function tabPermissions() {
   return {
-    visibleOn: userOnly,
+    type: 'tabs',
-    title: '权属管理',
+    tabs: [
-    icon: 'fa fa-key',
+      {
-    reload: true,
+        visibleOn: providerOnly,
-    body: {
+        title: '确权管理',
-      type: 'tabs',
+        body: {
-      tabs: [
+          type: 'crud',
-        {
+          api: {
-          visibleOn: providerOnly,
+            ...apiGet('${base}/confirmation/list')
-          title: '确权管理',
+          },
-          body: {
+          ...crudCommonOptions(),
-            type: 'crud',
+          headerToolbar: [
-            api: {
+            'reload',
-              ...apiGet('${base}/confirmation/list')
+            {
+              type: 'action',
+              label: '',
+              icon: 'fa fa-plus',
+              ...confirmationAddDialog()
             },
-            ...crudCommonOptions(),
+          ],
-            headerToolbar: [
+          columns: [
-              'reload',
+            stringField('name', '名称', 200),
+            stringWrapField('description', '描述'),
+            mappingField('state', '状态', permissionStateMapping),
+            timeField('createdTime', '创建时间'),
+            operationField('操作', undefined, [
               {
                 type: 'action',
-                label: '',
+                label: '查看',
-                icon: 'fa fa-plus',
+                level: 'link',
-                ...confirmationAddDialog()
+                ...confirmationDetailDialog(),
               },
-            ],
+              {
-            columns: [
+                visibleOn: "${state === 'CHECKING'}",
-              stringField('name', '名称', 200),
+                type: 'action',
-              stringWrapField('description', '描述'),
+                label: '撤销',
-              mappingField('state', '状态', permissionStateMapping),
+                level: 'link',
-              timeField('createdTime', '创建时间'),
+                confirmTitle: '确认撤销',
-              operationField('操作', undefined, [
+                confirmText: '确认撤销名称为「${name}」的确权申请吗？',
-                {
+                actionType: 'ajax',
-                  type: 'action',
+                api: apiGet('${base}/confirmation/retract/${id}'),
-                  label: '查看',
+              },
-                  level: 'link',
+              {
-                  ...confirmationDetailDialog(),
+                visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
-                },
+                type: 'action',
-                {
+                label: '提交',
-                  visibleOn: "${state === 'CHECKING'}",
+                level: 'link',
-                  type: 'action',
+                confirmTitle: '确认提交',
-                  label: '撤销',
+                confirmText: '确认提交名称为「${name}」的确权申请吗？',
-                  level: 'link',
+                actionType: 'ajax',
-                  confirmTitle: '确认撤销',
+                api: apiGet('${base}/confirmation/submit/${id}'),
-                  confirmText: '确认撤销名称为「${name}」的确权申请吗？',
+              },
-                  actionType: 'ajax',
+              {
-                  api: apiGet('${base}/confirmation/retract/${id}'),
+                type: 'dropdown-button',
-                },
+                level: 'link',
-                {
+                icon: 'fa fa-ellipsis-h',
-                  visibleOn: "${state === 'DRAFT' || state === 'REJECT'}",
+                hideCaret: true,
-                  type: 'action',
+                trigger: 'hover',
-                  label: '提交',
+                buttons: [
-                  level: 'link',
+                  {
-                  confirmTitle: '确认提交',
+                    disabledOn: "${state !== 'DRAFT'}",
-                  confirmText: '确认提交名称为「${name}」的确权申请吗？',
+                    type: 'action',
-                  actionType: 'ajax',
+                    label: '编辑',
-                  api: apiGet('${base}/confirmation/submit/${id}'),
+                    level: 'link',
-                },
+                    ...confirmationEditeDialog(),
-                {
+                  },
-                  type: 'dropdown-button',
+                  {
-                  level: 'link',
+                    disabledOn: "${state === 'CHECKING'}",
-                  icon: 'fa fa-ellipsis-h',
+                    type: 'action',
-                  hideCaret: true,
+                    label: "删除",
-                  trigger: 'hover',
+                    confirmTitle: '确认删除',
-                  buttons: [
+                    confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
-                    {
+                    actionType: 'ajax',
-                      disabledOn: "${state !== 'DRAFT'}",
+                    api: apiGet('${base}/confirmation/remove/${id}'),
-                      type: 'action',
+                  },
-                      label: '编辑',
+                ]
-                      level: 'link',
+              },
-                      ...confirmationEditeDialog(),
+            ]),
-                    },
+          ]
-                    {
+        }
-                      disabledOn: "${state === 'CHECKING'}",
+      },
-                      type: 'action',
+      {
-                      label: "删除",
+        visibleOn: customerOnly,
-                      confirmTitle: '确认删除',
+        title: '授权管理',
-                      confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
+        body: {
-                      actionType: 'ajax',
+          type: 'crud',
-                      api: apiGet('${base}/confirmation/remove/${id}'),
+          api: {
-                    },
+            ...apiGet('${base}/authentication/list')
-                  ]
+          },
-                },
+          ...crudCommonOptions(),
-              ]),
+          headerToolbar: [
-            ]
+            'reload',
-          }
+            {
-        },
+              type: 'action',
-        {
+              label: '',
-          visibleOn: customerOnly,
+              icon: 'fa fa-plus',
-          title: '授权管理',
+              ...authenticationAddDialog()
-          body: {
-            type: 'crud',
-            api: {
-              ...apiGet('${base}/authentication/list')
             },
-            ...crudCommonOptions(),
+          ],
-            headerToolbar: [
+          columns: [
-              'reload',
+            stringField('name', '名称', 200),
+            stringWrapField('description', '描述'),
+            mappingField('state', '状态', permissionStateMapping),
+            timeField('createdTime', '创建时间'),
+            operationField('操作', undefined, [
               {
                 type: 'action',
-                label: '',
+                label: '查看',
-                icon: 'fa fa-plus',
+                level: 'link',
-                ...authenticationAddDialog()
+                ...authenticationDetailDialog(),
               },
-            ],
+              {
-            columns: [
+                visibleOn: arrayInCheck([checkState.ownerChecking, checkState.checking], 'state'),
-              stringField('name', '名称', 200),
+                type: 'action',
-              stringWrapField('description', '描述'),
+                label: '撤销',
-              mappingField('state', '状态', permissionStateMapping),
+                level: 'link',
-              timeField('createdTime', '创建时间'),
+                confirmTitle: '确认撤销',
-              operationField('操作', undefined, [
+                confirmText: '确认撤销名称为「${name}」的授权申请吗？',
-                {
+                actionType: 'ajax',
-                  type: 'action',
+                api: apiGet('${base}/authentication/retract/${id}'),
-                  label: '查看',
+              },
-                  level: 'link',
+              {
-                  ...authenticationDetailDialog(),
+                visibleOn: arrayInCheck([checkState.draft], 'state'),
-                },
+                type: 'action',
-                {
+                label: '提交',
-                  visibleOn: arrayInCheck([checkState.ownerChecking, checkState.checking], 'state'),
+                level: 'link',
-                  type: 'action',
+                confirmTitle: '确认提交',
-                  label: '撤销',
+                confirmText: '确认提交名称为「${name}」的授权申请吗？',
-                  level: 'link',
+                actionType: 'ajax',
-                  confirmTitle: '确认撤销',
+                api: apiGet('${base}/authentication/submit/${id}'),
-                  confirmText: '确认撤销名称为「${name}」的授权申请吗？',
+              },
-                  actionType: 'ajax',
+              {
-                  api: apiGet('${base}/authentication/retract/${id}'),
+                type: 'dropdown-button',
-                },
+                level: 'link',
-                {
+                icon: 'fa fa-ellipsis-h',
-                  visibleOn: arrayInCheck([checkState.draft], 'state'),
+                hideCaret: true,
-                  type: 'action',
+                trigger: 'hover',
-                  label: '提交',
+                buttons: [
-                  level: 'link',
+                  {
-                  confirmTitle: '确认提交',
+                    disabledOn: arrayOutCheck([checkState.draft], 'state'),
-                  confirmText: '确认提交名称为「${name}」的授权申请吗？',
+                    type: 'action',
-                  actionType: 'ajax',
+                    label: '编辑',
-                  api: apiGet('${base}/authentication/submit/${id}'),
+                    level: 'link',
-                },
+                    ...authenticationEditeDialog(),
-                {
+                  },
-                  type: 'dropdown-button',
+                  {
-                  level: 'link',
+                    disabledOn: arrayInCheck([checkState.ownerChecking, checkState.checking], 'state'),
-                  icon: 'fa fa-ellipsis-h',
+                    type: 'action',
-                  hideCaret: true,
+                    label: "删除",
-                  trigger: 'hover',
+                    confirmTitle: '确认删除',
-                  buttons: [
+                    confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
-                    {
+                    actionType: 'ajax',
-                      disabledOn: arrayOutCheck([checkState.draft], 'state'),
+                    api: apiGet('${base}/authentication/remove/${id}'),
-                      type: 'action',
+                  },
-                      label: '编辑',
+                ]
-                      level: 'link',
+              },
-                      ...authenticationEditeDialog(),
+            ]),
-                    },
+          ]
-                    {
+        }
-                      disabledOn: arrayInCheck([checkState.ownerChecking, checkState.checking], 'state'),
+      },
-                      type: 'action',
+    ]
-                      label: "删除",
-                      confirmTitle: '确认删除',
-                      confirmText: '确认删除名称为「${name}」的确权申请吗？删除后对应的数据资源处于未确权状态。',
-                      actionType: 'ajax',
-                      api: apiGet('${base}/authentication/remove/${id}'),
-                    },
-                  ]
-                },
-              ]),
-            ]
-          }
-        },
-      ]
-    }
   }
 }

gringotts-frontend/pages/index/tab-user.js

@@ -1,5 +1,4 @@
 import {
-  administratorOnly,
   apiGet,
   copyField,
   crudCommonOptions,
@@ -13,71 +12,65 @@ import {userCheckDialog, userDetailDialog} from "../../components/user/dialog-us
 import {userAdministratorRegisterDialog} from "../../components/user/dialog-user-register.js";
 
 export function tabUser() {
-  return {
+  return [
-    visibleOn: administratorOnly,
+    {
-    title: '用户管理',
+      type: 'crud',
-    icon: 'fa fa-user',
+      api: apiGet('${base}/user_management/list'),
-    reload: true,
+      ...crudCommonOptions(),
-    body: [
+      headerToolbar: [
-      {
+        'reload',
-        type: 'crud',
+        {
-        api: apiGet('${base}/user_management/list'),
+          type: 'action',
-        ...crudCommonOptions(),
+          icon: 'fa fa-plus',
-        headerToolbar: [
+          tooltip: '新增账号',
-          'reload',
+          ...userAdministratorRegisterDialog(),
+        },
+      ],
+      columns: [
+        copyField(
+          'username',
+          '邮箱',
+          undefined,
+          undefined,
+          userDetailDialog(),
+        ),
+        mappingField('role', '角色', userRoleMapping, 120),
+        mappingField('state', '账号状态', userStateMapping),
+        timeField('createdTime', '创建时间'),
+        timeField('lastLoginTime', '上次登陆时间'),
+        operationField('操作', undefined, [
           {
-            type: 'action',
+            visibleOn: "${state === 'CHECKING'}",
-            icon: 'fa fa-plus',
+            label: '审核',
-            tooltip: '新增账号',
+            icon: 'fa fa-fingerprint',
-            ...userAdministratorRegisterDialog(),
+            level: 'primary',
+            size: 'xs',
+            ...userCheckDialog(),
           },
-        ],
+          {
-        columns: [
+            visibleOn: "${state === 'NORMAL' && role !== 'ADMINISTRATOR'}",
-          copyField(
+            label: '禁用',
-            'username',
+            icon: 'fa fa-ban',
-            '邮箱',
+            level: 'danger',
-            undefined,
+            size: 'xs',
-            undefined,
+            confirmText: '确认禁用账号${username}？',
-            userDetailDialog(),
+            confirmTitle: '禁用账号',
-          ),
+            actionType: 'ajax',
-          mappingField('role', '角色', userRoleMapping, 120),
+            api: apiGet('${base}/user_management/disable/${username}'),
-          mappingField('state', '账号状态', userStateMapping),
+          },
-          timeField('createdTime', '创建时间'),
+          {
-          timeField('lastLoginTime', '上次登陆时间'),
+            visibleOn: "${state === 'DISABLED' && role !== 'ADMINISTRATOR'}",
-          operationField('操作', undefined, [
+            label: '启用',
-            {
+            icon: 'fa fa-check',
-              visibleOn: "${state === 'CHECKING'}",
+            level: 'success',
-              label: '审核',
+            size: 'xs',
-              icon: 'fa fa-fingerprint',
+            confirmText: '确认启用账号${username}？',
-              level: 'primary',
+            confirmTitle: '启用账号',
-              size: 'xs',
+            actionType: 'ajax',
-              ...userCheckDialog(),
+            api: apiGet('${base}/user_management/enable/${username}'),
-            },
+          }
-            {
+        ]),
-              visibleOn: "${state === 'NORMAL' && role !== 'ADMINISTRATOR'}",
+      ]
-              label: '禁用',
+    }
-              icon: 'fa fa-ban',
+  ]
-              level: 'danger',
-              size: 'xs',
-              confirmText: '确认禁用账号${username}？',
-              confirmTitle: '禁用账号',
-              actionType: 'ajax',
-              api: apiGet('${base}/user_management/disable/${username}'),
-            },
-            {
-              visibleOn: "${state === 'DISABLED' && role !== 'ADMINISTRATOR'}",
-              label: '启用',
-              icon: 'fa fa-check',
-              level: 'success',
-              size: 'xs',
-              confirmText: '确认启用账号${username}？',
-              confirmTitle: '启用账号',
-              actionType: 'ajax',
-              api: apiGet('${base}/user_management/enable/${username}'),
-            }
-          ]),
-        ]
-      }
-    ]
-  }
 }

gringotts-frontend/public/logo.svg

@@ -0,0 +1,8 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1589 1540" width="1589" height="1540">
+    <title>China_Telecom_Logo-svg</title>
+    <style>
+        .s0 { fill: #FFFFFF }
+    </style>
+    <path id="path8564" class="s0"
+          d="m1004.4 258.8c0 0-27.8-30.7-64.4-30.7 0 0-80.2 0-134.7 173.4 0 0-46.5 151.5-46.5 376.4 0 0 0 212 43.6 361.6 0 0 43.5 151.6 106.9 151.6 0 0 44.6 0 82.2-83.2 0 0 37.6-83.2 53.5-219l118.8-29.7c0 0-30.7 252.7-125.8 416.1 0 0-98 164.5-221.8 164.5 0 0-148.5 0-253.4-222.9 0 0-105-222.9-105-539 0 0 0-316 105-540.9 0 0 104.9-223.9 253.4-223.9 0 0 148.6 0 254.5 227.9zm417.8 304.1c0 0-204.9 169.4-531.7 251.6 0 0-327.7 81.3-588.1 27.8 0 0-260.4-55.5-299-215 0 0-32.7-132.8 110.9-279.4 0 0 141.6-145.6 396-242.7l16.9 65.4c0 0-148.5 63.4-230.7 143.6 0 0-84.2 84.2-65.4 156.6 0 0 24.8 92.1 199 119.8 0 0 173.3 26.8 398.1-28.7 0 0 222.7-55.5 365.3-161.5 0 0 140.6-107 116.8-200.1 0 0-19.8-80.2-162.3-114.9l-21.8-85.2c0 0 185.1 6.9 307.9 68.3 0 0 125.7 61.5 151.5 165.5 0 0 40.6 158.5-163.4 328.9z"/>
+</svg>