lanyuanxiaoyao/gringotts
1
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
兰缘小妖
2024-12-20 16:48:59 +08:00
parent 74b0638a07
commit 615edb57b8
7 changed files with 663 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
gringotts-frontend/pages/index/main.js
View File

@@ -1,14 +1,14 @@
import './style.css'
import {apiGet, useAmis} from '../../components/constants.js'
import {userChangePasswordDialog} from "../../components/user/dialog-user-change-password.js";
import {tabUser} from "./tab-user.js";
import {tabData} from "./tab-data.js";
import {tabSettings} from "./tab-settings.js";
import {tabCheck} from "./tab-check.js";
import {tabPermissions} from "./tab-permissions.js";
import {tabMarket} from "./tab-market.js";
import {administratorOnly, apiGet, checkerOnly, useAmis, userOnly} from '../../components/constants.js'
import {userChangePasswordDialog} from '../../components/user/dialog-user-change-password.js'
import {tabUser} from './tab-user.js'
import {tabData} from './tab-data.js'
import {tabSettings} from './tab-settings.js'
import {tabCheck} from './tab-check.js'
import {tabPermissions} from './tab-permissions.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',
title: information.title,
subTitle: '提供合法合规的数据要素可信供给工具',
toolbar: [
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: {
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(),
tabPermissions(),
tabCheck(),
tabUser(),
tabSettings(),
]
{
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(),
}
]
],
}
],
},
],
}
})

11
gringotts-frontend/pages/index/tab-check.js
View File

@@ -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 {
visibleOn: checkerOnly,
title: '审核审查',
icon: 'fa fa-shield-halved',
reload: true,
body: [
return [
{
name: 'check_order_list',
type: 'crud',
@@ -141,6 +135,5 @@ export function tabCheck() {
]),
],
},
],
}
]
}

9
gringotts-frontend/pages/index/tab-data.js
View File

@@ -11,8 +11,7 @@ import {
mappingField,
operationField,
permissionStateMapping,
timeField,
userOnly
timeField
} 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: [
{
@@ -182,5 +176,4 @@ export function tabData() {
}
]
}
}
}

5
gringotts-frontend/pages/index/tab-market.js
View File

@@ -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(),
}
]
},
}
}
}

7
gringotts-frontend/pages/index/tab-permissions.js
View File

@@ -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: [
{
@@ -192,5 +186,4 @@ export function tabPermissions() {
},
]
}
}
}

9
gringotts-frontend/pages/index/tab-user.js
View File

@@ -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 {
visibleOn: administratorOnly,
title: '用户管理',
icon: 'fa fa-user',
reload: true,
body: [
return [
{
type: 'crud',
api: apiGet('${base}/user_management/list'),
@@ -79,5 +73,4 @@ export function tabUser() {
]
}
]
}
}

8
gringotts-frontend/public/logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB