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: {
+          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',
+                      }
                     }
                   }
                 ]
               }
+            }
           },
-    body: [
           {
-        type: 'page',
+            type: 'action',
-        title: information.title,
+            label: '我的资源',
-        subTitle: '提供合法合规的数据要素可信供给工具',
+            icon: 'fa fa-database',
-        toolbar: [
+            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: {
+          activePage: 'market',
+          tabActiveKey: 'data'
+        },
+        body: [
+          {
+            visibleOn: "${activePage === 'market'}",
+            type: 'wrapper',
+            body: tabMarket(),
+          },
+          {
+            visibleOn: "${activePage === 'tab'}",
             className: 'h-full border-0',
             type: 'tabs',
             tabsMode: 'vertical',
+            activeKey: '${tabActiveKey}',
             tabs: [
               // tabOverview(),
-            tabMarket(),
+              {
-            tabData(),
+                hash: 'data',
-            tabPermissions(),
+                visibleOn: userOnly,
-            tabCheck(),
+                title: '数据资源',
-            tabUser(),
+                icon: 'fa fa-database',
-            tabSettings(),
+                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,12 +12,7 @@ import {authenticationDetailDialog, confirmationDetailDialog} from "../../compon
 import {wareDetailDialog} from "../../components/ware/dialog-ware.js";
 
 export function tabCheck() {
-  return {
+  return [
-    visibleOn: checkerOnly,
-    title: '审核审查',
-    icon: 'fa fa-shield-halved',
-    reload: true,
-    body: [
     {
       name: 'check_order_list',
       type: 'crud',
@@ -141,6 +135,5 @@ export function tabCheck() {
         ]),
       ],
     },
-    ],
+  ]
-  }
 }

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,11 +85,6 @@ export function resourceList(showMode = false) {
 
 export function tabData() {
   return {
-    visibleOn: userOnly,
-    title: '数据资源',
-    icon: 'fa fa-database',
-    reload: true,
-    body: {
     type: 'tabs',
     tabs: [
       {
@@ -183,4 +177,3 @@ export function tabData() {
     ]
   }
 }
-}

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

@@ -3,10 +3,6 @@ import {authenticationAddDialog} from "../../components/permission/dialog-permis
 
 export function tabMarket() {
   return {
-    title: '数据市场',
-    icon: 'fa fa-store',
-    reload: true,
-    body: {
     type: 'crud',
     api: {
       ...apiGet('${base}/ware/list_public'),
@@ -84,7 +80,6 @@ export function tabMarket() {
           ...authenticationAddDialog(),
         }
       ]
-      },
     }
   }
 }

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

@@ -12,7 +12,6 @@ import {
   stringField,
   stringWrapField,
   timeField,
-  userOnly,
 } from "../../components/constants.js";
 import {
   authenticationAddDialog,
@@ -25,11 +24,6 @@ import {
 
 export function tabPermissions() {
   return {
-    visibleOn: userOnly,
-    title: '权属管理',
-    icon: 'fa fa-key',
-    reload: true,
-    body: {
     type: 'tabs',
     tabs: [
       {
@@ -193,4 +187,3 @@ export function tabPermissions() {
     ]
   }
 }
-}

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

@@ -1,5 +1,4 @@
 import {
-  administratorOnly,
   apiGet,
   copyField,
   crudCommonOptions,
@@ -13,12 +12,7 @@ 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: '用户管理',
-    icon: 'fa fa-user',
-    reload: true,
-    body: [
     {
       type: 'crud',
       api: apiGet('${base}/user_management/list'),
@@ -80,4 +74,3 @@ export function tabUser() {
     }
   ]
 }
-}

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>