feat(web): 使用模块化js 增加账号改密、注销

.idea/GitCommitMessageStorage.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitCommitMessageStorage">
+    <option name="messageStorage">
+      <MessageStorage />
+    </option>
+  </component>
+</project>

.idea/dataSources.xml

@@ -13,5 +13,17 @@
       </jdbc-additional-properties>
       <working-dir>$ProjectFileDir$</working-dir>
     </data-source>
+    <data-source source="LOCAL" name="homeless" uuid="9af017b2-2a8b-45b4-899c-ef4fb185b77c">
+      <driver-ref>mysql.8</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
+      <jdbc-url>jdbc:mysql://frp-air.top:43458</jdbc-url>
+      <jdbc-additional-properties>
+        <property name="com.intellij.clouds.kubernetes.db.host.port" />
+        <property name="com.intellij.clouds.kubernetes.db.enabled" value="false" />
+        <property name="com.intellij.clouds.kubernetes.db.container.port" />
+      </jdbc-additional-properties>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
   </component>
 </project>

gringotts-web/src/main/java/com/eshore/gringotts/web/WebApplication.java

@@ -1,6 +1,7 @@
 package com.eshore.gringotts.web;
 
 import com.blinkfox.fenix.EnableFenix;
+import com.eshore.gringotts.web.domain.user.service.UserService;
 import com.ulisesbocchio.jasyptspringboot.annotation.EnableEncryptableProperties;
 import org.springframework.boot.ApplicationArguments;
 import org.springframework.boot.ApplicationRunner;
@@ -25,12 +26,19 @@ import org.springframework.scheduling.annotation.EnableAsync;
 @EnableConfigurationProperties
 @EnableEncryptableProperties
 public class WebApplication implements ApplicationRunner {
+    private final UserService userService;
+
+    public WebApplication(UserService userService) {
+        this.userService = userService;
+    }
+
     public static void main(String[] args) {
         SpringApplication.run(WebApplication.class, args);
     }
 
     @Override
     public void run(ApplicationArguments args) throws Exception {
-        // Test Something
+        // 初始化系统管理员
+        userService.initial();
     }
 }

gringotts-web/src/main/java/com/eshore/gringotts/web/configuration/SaTokenConfiguration.java

@@ -2,6 +2,9 @@ package com.eshore.gringotts.web.configuration;
 
 import cn.dev33.satoken.interceptor.SaInterceptor;
 import cn.dev33.satoken.stp.StpUtil;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@@ -11,11 +14,18 @@ import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  * @author lanyuanxiaoyao
  * @date 2024-11-14
  */
-// @Configuration
+@Configuration
 public class SaTokenConfiguration implements WebMvcConfigurer {
+    private static final Logger logger = LoggerFactory.getLogger(SaTokenConfiguration.class);
+
     @Override
     public void addInterceptors(InterceptorRegistry registry) {
-        registry.addInterceptor(new SaInterceptor(handler -> StpUtil.checkLogin()))
+        registry.addInterceptor(
+                        new SaInterceptor(handler -> {
+                            logger.info("Handler {}", handler);
+                            StpUtil.checkLogin();
+                        })
+                )
                 .addPathPatterns("/**")
                 .excludePathPatterns("/*.html")
                 .excludePathPatterns("/assets/**")

gringotts-web/src/main/java/com/eshore/gringotts/web/domain/user/controller/UserController.java

@@ -41,19 +41,18 @@ public class UserController {
     @PostMapping("/register")
     public void register(@RequestBody RegisterRequest request) {
         logger.info("Register request: {}", request);
-        userService.register(request);
+        userService.register(request.username, request.password, request.role);
     }
 
     @PostMapping("/login")
     public AmisResponse<UserService.UserInformation> login(@RequestBody LoginRequest request) {
         logger.info("Login request: {}", request);
-        return AmisResponse.responseSuccess(userService.login(request));
+        return AmisResponse.responseSuccess(userService.login(request.username, request.password));
     }
 
-    @GetMapping("/logout/{username}")
-    public void logout(@PathVariable("username") String username) {
-        logger.info("Logout request: {}", username);
-        userService.logout(username);
+    @GetMapping("/logout")
+    public void logout() {
+        userService.logout();
     }
 
     @GetMapping("/exists_username/{username}")
@@ -64,14 +63,14 @@ public class UserController {
     }
 
     @Data
-    public static class LoginRequest {
+    public static final class LoginRequest {
         private String username;
         private String password;
         private String checkCode;
     }
 
     @Data
-    public static class RegisterRequest {
+    public static final class RegisterRequest {
         private String username;
         private String password;
         private User.Role role;

gringotts-web/src/main/java/com/eshore/gringotts/web/domain/user/controller/UserManagementController.java

@@ -0,0 +1,66 @@
+package com.eshore.gringotts.web.domain.user.controller;
+
+import com.eshore.gringotts.web.configuration.amis.AmisListResponse;
+import com.eshore.gringotts.web.configuration.amis.AmisResponse;
+import com.eshore.gringotts.web.domain.user.service.UserService;
+import lombok.Data;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * 用户管理
+ *
+ * @author lanyuanxiaoyao
+ * @date 2024-11-15
+ */
+@RestController
+@RequestMapping("/user_management")
+public class UserManagementController {
+    private static final Logger logger = LoggerFactory.getLogger(UserManagementController.class);
+
+    private final UserService userService;
+
+    public UserManagementController(UserService userService) {
+        this.userService = userService;
+    }
+
+    @GetMapping("/list")
+    public AmisListResponse list() {
+        return AmisListResponse.responseListData(userService.list());
+    }
+
+    @GetMapping("/detail/{username}")
+    public AmisResponse<UserService.UserDetail> detail(@PathVariable String username) {
+        return AmisResponse.responseSuccess(userService.detail(username));
+    }
+
+    @PostMapping("/change_password")
+    public AmisResponse<Object> changePassword(@RequestBody ChangePasswordRequest request) {
+        userService.changePassword(request.oldPassword, request.newPassword);
+        return AmisResponse.responseSuccess();
+    }
+
+    @GetMapping("/disable/{username}")
+    public AmisResponse<Object> disable(@PathVariable String username) {
+        userService.disable(username);
+        return AmisResponse.responseSuccess();
+    }
+
+    @GetMapping("/enable/{username}")
+    public AmisResponse<Object> enable(@PathVariable String username) {
+        userService.enable(username);
+        return AmisResponse.responseSuccess();
+    }
+
+    @Data
+    public static final class ChangePasswordRequest {
+        private String oldPassword;
+        private String newPassword;
+    }
+}

gringotts-web/src/main/java/com/eshore/gringotts/web/domain/user/entity/User.java

@@ -79,5 +79,9 @@ public class User {
          * 数据监管方
          */
         CHECKER,
+        /**
+         * 系统管理员
+         */
+        ADMINISTRATOR,
     }
 }

gringotts-web/src/main/java/com/eshore/gringotts/web/domain/user/repository/UserRepository.java

@@ -4,7 +4,10 @@ import com.blinkfox.fenix.jpa.FenixJpaRepository;
 import com.blinkfox.fenix.specification.FenixJpaSpecificationExecutor;
 import com.eshore.gringotts.web.domain.user.entity.User;
 import java.util.Optional;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
+import org.springframework.transaction.annotation.Transactional;
 
 /**
  * User操作
@@ -16,4 +19,9 @@ import org.springframework.stereotype.Repository;
 public interface UserRepository extends FenixJpaRepository<User, Long>, FenixJpaSpecificationExecutor<User> {
     Boolean existsByUsername(String username);
     Optional<User> findByUsername(String username);
+
+    @Transactional
+    @Modifying
+    @Query("update User u set u.state = ?2 where u.username = ?1")
+    void updateStateByUsername(String username, User.State state);
 }

gringotts-web/src/main/java/com/eshore/gringotts/web/domain/user/service/UserService.java

@@ -5,10 +5,13 @@ import cn.dev33.satoken.stp.SaTokenInfo;
 import cn.dev33.satoken.stp.StpUtil;
 import cn.hutool.core.util.StrUtil;
 import cn.hutool.crypto.SecureUtil;
-import com.eshore.gringotts.web.domain.user.controller.UserController;
 import com.eshore.gringotts.web.domain.user.entity.User;
 import com.eshore.gringotts.web.domain.user.repository.UserRepository;
+import java.time.LocalDateTime;
+import java.util.List;
 import lombok.Data;
+import org.eclipse.collections.api.factory.Lists;
+import org.eclipse.collections.api.list.ImmutableList;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.stereotype.Service;
@@ -29,11 +32,33 @@ public class UserService {
         this.userRepository = userRepository;
     }
 
+    private static String encryptPassword(String password) {
+        String salt = "tY2gNdkt7x%%HcCAFc";
+        return SecureUtil.sha256(StrUtil.format("{}{}", salt, password));
+    }
+
+    /**
+     * 当数据库里没有用户的时候，增加一个默认的系统管理员
+     */
+    public void initial() {
+        if (userRepository.count() == 0) {
+            User user = new User();
+            user.setUsername("administrator@eshore.com");
+            user.setPassword(encryptPassword("administrator"));
+            user.setRole(User.Role.ADMINISTRATOR);
+            user.setState(User.State.NORMAL);
+            userRepository.save(user);
+        }
+    }
+
+    /**
+     * 获取当前登陆账号状态
+     */
     public UserInformation state() {
         try {
-            // long id = StpUtil.getLoginIdAsLong();
-            // User user = userRepository.findById(id).orElseThrow(LoginNotFoundException::new);
-            User user = userRepository.findByUsername("lanyuanxiaoyao@qq.com").orElseThrow(LoginNotFoundException::new);
+            long id = StpUtil.getLoginIdAsLong();
+            User user = userRepository.findById(id).orElseThrow(LoginNotFoundException::new);
+            // User user = userRepository.findByUsername("administrator@eshore.com").orElseThrow(LoginNotFoundException::new);
             StpUtil.login(user.getId());
             return new UserInformation(user, StpUtil.getTokenInfo());
         } catch (NotLoginException e) {
@@ -41,13 +66,16 @@ public class UserService {
         }
     }
 
-    public UserInformation login(UserController.LoginRequest request) {
-        User user = userRepository.findByUsername(request.getUsername()).orElseThrow(LoginFailureException::new);
+    /**
+     * 登陆操作
+     */
+    public UserInformation login(String username, String password) {
+        User user = userRepository.findByUsername(username).orElseThrow(LoginFailureException::new);
         if (user.getState() == User.State.CHECKING) {
             throw new LoginFailureByCheckingException();
         } else if (user.getState() == User.State.DISABLED) {
             throw new LoginFailureByDisabledException();
-        } else if (!StrUtil.equals(encryptPassword(request.getPassword()), user.getPassword())) {
+        } else if (!StrUtil.equals(encryptPassword(password), user.getPassword())) {
             throw new LoginFailureException();
         } else {
             StpUtil.login(user.getId());
@@ -55,30 +83,71 @@ public class UserService {
         }
     }
 
-    public void logout(String username) {
-        User user = userRepository.findByUsername(username).orElseThrow(LogoutFailureException::new);
-        StpUtil.login(user.getId());
+    /**
+     * 登出操作
+     */
+    public void logout() {
+        StpUtil.logout();
     }
 
-    public void register(UserController.RegisterRequest request) {
-        userRepository.save(toUser(request));
+    /**
+     * 注册操作
+     */
+    public void register(String username, String password, User.Role role) {
+        User user = new User();
+        user.setUsername(username);
+        user.setPassword(encryptPassword(password));
+        user.setRole(role);
+        userRepository.save(user);
     }
 
+    /**
+     * 是否存在用户名
+     */
     public boolean exitsUsername(String username) {
         return userRepository.existsByUsername(username);
     }
 
-    private String encryptPassword(String password) {
-        String salt = "tY2gNdkt7x%%HcCAFc";
-        return SecureUtil.sha256(StrUtil.format("{}{}", salt, password));
+    /**
+     * 禁用账号
+     */
+    public void disable(String username) {
+        userRepository.updateStateByUsername(username, User.State.DISABLED);
     }
 
-    private User toUser(UserController.RegisterRequest request) {
-        User user = new User();
-        user.setUsername(request.getUsername());
-        user.setPassword(encryptPassword(request.getPassword()));
-        user.setRole(request.getRole());
-        return user;
+    /**
+     * 启用账号
+     */
+    public void enable(String username) {
+        userRepository.updateStateByUsername(username, User.State.NORMAL);
+    }
+
+    public ImmutableList<UserListItem> list() {
+        List<User> users = userRepository.findAll();
+        return Lists.immutable.ofAll(users)
+                .collect(UserListItem::new);
+    }
+
+    public void changePassword(String oldPassword, String newPassword) {
+        long id = StpUtil.getLoginIdAsLong();
+        User user = userRepository.findById(id).orElseThrow(LoginNotFoundException::new);
+        if (StrUtil.equals(encryptPassword(oldPassword), user.getPassword())) {
+            user.setPassword(encryptPassword(newPassword));
+            userRepository.save(user);
+        } else {
+            throw new ChangePasswordFailureException();
+        }
+    }
+
+    public UserDetail detail(String username) {
+        User user = userRepository.findByUsername(username).orElseThrow(UserNotFoundException::new);
+        return new UserDetail(user);
+    }
+
+    public static class UserNotFoundException extends RuntimeException {
+        public UserNotFoundException() {
+            super("账号不存在");
+        }
     }
 
     public static class LoginFailureException extends RuntimeException {
@@ -115,6 +184,12 @@ public class UserService {
         }
     }
 
+    public static class ChangePasswordFailureException extends RuntimeException {
+        public ChangePasswordFailureException() {
+            super("原密码不正确");
+        }
+    }
+
     @Data
     public static class UserInformation {
         private String username;
@@ -127,4 +202,42 @@ public class UserService {
             this.token = token.getTokenValue();
         }
     }
+
+    @Data
+    public static class UserListItem {
+        private Long id;
+        private String username;
+        private User.Role role;
+        private User.State state;
+        private LocalDateTime createTime;
+        private LocalDateTime updateTime;
+
+        public UserListItem(User user) {
+            this.id = user.getId();
+            this.username = user.getUsername();
+            this.role = user.getRole();
+            this.state = user.getState();
+            this.createTime = user.getCreateTime();
+            this.updateTime = user.getUpdateTime();
+        }
+    }
+
+    @Data
+    public static class UserDetail {
+        private Long id;
+        private String username;
+        private User.Role role;
+        private User.State state;
+        private LocalDateTime createTime;
+        private LocalDateTime updateTime;
+
+        public UserDetail(User user) {
+            this.id = user.getId();
+            this.username = user.getUsername();
+            this.role = user.getRole();
+            this.state = user.getState();
+            this.createTime = user.getCreateTime();
+            this.updateTime = user.getUpdateTime();
+        }
+    }
 }

gringotts-web/src/main/resources/static/assets/component/common.js

@@ -1,4 +1,4 @@
-function crudCommonOptions() {
+export function crudCommonOptions() {
     return {
         affixHeader: false,
         stopAutoRefreshWhenModalIsOpen: true,
@@ -8,7 +8,7 @@ function crudCommonOptions() {
     }
 }
 
-function readOnlyDialogOptions() {
+export function readOnlyDialogOptions() {
     return {
         actions: [],
         showCloseButton: false,
@@ -18,7 +18,17 @@ function readOnlyDialogOptions() {
     }
 }
 
-function paginationCommonOptions(perPage = true, maxButtons = 5) {
+export function horizontalFormOptions() {
+    return {
+        mode: 'horizontal',
+        canAccessSuperData: false,
+        horizontal: {
+            left: 2,
+        },
+    }
+}
+
+export function paginationCommonOptions(perPage = true, maxButtons = 5) {
     let option = {
         type: 'pagination',
         layout: [
@@ -34,7 +44,7 @@ function paginationCommonOptions(perPage = true, maxButtons = 5) {
     return option
 }
 
-function paginationTemplate(perPage = 20, maxButtons = 5) {
+export function paginationTemplate(perPage = 20, maxButtons = 5) {
     return {
         perPage: perPage,
         headerToolbar: [
@@ -47,3 +57,56 @@ function paginationTemplate(perPage = 20, maxButtons = 5) {
         ],
     }
 }
+
+export function mappingField(field, mapping) {
+    let mapData = {
+        '*': `<span class='label bg-gray-300'>\${${field}}</span>`,
+    }
+    mapping.forEach(item => {
+        mapData[item['value']] = `<span class='label ${item['color']}'>${item['label']}</span>`
+    })
+    return {
+        type: 'mapping',
+        value: `\${${field}}`,
+        map: mapData,
+    }
+}
+
+function mappingItem(label, value, color = 'bg-info') {
+    return {
+        label: label,
+        value: value,
+        color: color,
+    }
+}
+
+export const userRoleMapping = [
+    mappingItem('数据提供方', 'PROVIDER', 'bg-blue-500'),
+    mappingItem('数据使用方', 'CUSTOMER', 'bg-purple-500'),
+    mappingItem('审核监管方', 'CHECKER', 'bg-cyan-500'),
+    mappingItem('系统管理员', 'ADMINISTRATOR', 'bg-green-500'),
+]
+
+export const userStateMapping = [
+    mappingItem('审查中', 'CHECKING', 'bg-warning'),
+    mappingItem('正常', 'NORMAL', 'bg-success'),
+    mappingItem('禁用', 'DISABLED', 'bg-danger'),
+]
+
+function api(method, url) {
+    return {
+        method: method,
+        url: url,
+        headers: {
+            token: '${token|default:undefined}',
+        }
+    }
+}
+
+export function apiGet(url) {
+    return api('get', url)
+}
+
+export function apiPost(url) {
+    return api('post', url)
+}

gringotts-web/src/main/resources/static/assets/component/constants.js

@@ -1,5 +1,6 @@
-const information = {
-    debug: false,
-    baseUrl: 'http://127.0.0.1:20080',
+export const information = {
+    debug: true,
+    baseUrl: '',
+    // baseUrl: 'http://127.0.0.1:20080',
     title: '可信供给中心',
 }

gringotts-web/src/main/resources/static/assets/component/pages/tab-overview.js

@@ -0,0 +1,9 @@
+export function tabOverview() {
+    return {
+        title: '概览',
+        icon: 'fa fa-house',
+        body: [
+            'hello world'
+        ]
+    }
+}

gringotts-web/src/main/resources/static/assets/component/pages/tab-user.js

@@ -0,0 +1,92 @@
+import {userRegisterDialog} from './user/dialog-user-register.js'
+import {apiGet, crudCommonOptions, mappingField, userRoleMapping, userStateMapping} from '../common.js'
+
+export function tabUser() {
+    return {
+        title: '用户管理',
+        icon: 'fa fa-user',
+        body: [
+            {
+                type: 'crud',
+                api: apiGet('${base}/user_management/list'),
+                ...crudCommonOptions(),
+                headerToolbar: [
+                    'reload',
+                    {
+                        type: 'action',
+                        icon: 'fa fa-plus',
+                        tooltip: '新增账号',
+                        ...userRegisterDialog(),
+                    },
+                ],
+                columns: [
+                    {
+                        name: 'username',
+                        label: '邮箱',
+                    },
+                    {
+                        label: '角色',
+                        width: 120,
+                        ...mappingField('role', userRoleMapping)
+                    },
+                    {
+                        label: '账号状态',
+                        width: 80,
+                        ...mappingField('state', userStateMapping)
+                    },
+                    {
+                        label: '创建时间',
+                        width: 150,
+                        type: 'tpl',
+                        tpl: '${DATETOSTR(createTime)}'
+                    },
+                    {
+                        label: '更新时间',
+                        width: 150,
+                        type: 'tpl',
+                        tpl: '${DATETOSTR(updateTime)}'
+                    },
+                    {
+                        label: '操作',
+                        width: 100,
+                        type: 'operation',
+                        fixed: 'right',
+                        className: 'nowrap',
+                        buttons: [
+                            {
+                                visibleOn: "${state === 'CHECKING'}",
+                                label: '审核',
+                                icon: 'fa fa-fingerprint',
+                                level: 'primary',
+                                size: 'xs',
+                            },
+                            {
+                                visibleOn: "${state === 'NORMAL' && role !== 'ADMINISTRATOR'}",
+                                label: '禁用',
+                                icon: 'fa fa-ban',
+                                level: 'danger',
+                                size: 'xs',
+                                confirmText: '确认禁用账号${username}？',
+                                confirmTitle: '禁用账号',
+                                actionType: 'ajax',
+                                api: 'get:${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: 'get:${base}/user_management/enable/${username}',
+                            }
+                        ]
+                    },
+                ]
+            }
+        ]
+    }
+}

gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-change-password.js

@@ -0,0 +1,64 @@
+import {horizontalFormOptions, apiPost} from '../../common.js'
+
+export function userChangePasswordDialog() {
+    return {
+        actionType: 'dialog',
+        dialog: {
+            title: '修改密码',
+            actions: [
+                {
+                    type: 'reset',
+                    label: '清空',
+                },
+                {
+                    type: 'submit',
+                    label: '修改',
+                    level: 'primary',
+                }
+            ],
+            body: {
+                type: 'form',
+                api: apiPost('${base}/user_management/change_password'),
+                ...horizontalFormOptions(),
+                body: [
+                    {
+                        type: 'input-password',
+                        name: 'oldPassword',
+                        label: '旧密码',
+                        placeholder: '请输入旧密码',
+                        required: true,
+                    },
+                    {
+                        type: 'input-password',
+                        name: 'newPassword',
+                        label: '新密码',
+                        placeholder: '请输入新密码',
+                        required: true,
+                        clearable: true,
+                        clearValueOnEmpty: true,
+                        validations: {
+                            matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
+                        },
+                        validationErrors: {
+                            matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
+                        }
+                    },
+                    {
+                        type: 'input-password',
+                        name: 'confirmNewPassword',
+                        label: '确认新密码',
+                        placeholder: '请再次输入新密码',
+                        required: true,
+                        clearable: true,
+                        validations: {
+                            equalsField: 'newPassword'
+                        },
+                        validationErrors: {
+                            equalsField: '两次输入密码不一致',
+                        }
+                    },
+                ]
+            }
+        }
+    }
+}

gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-detail.js

@@ -0,0 +1,34 @@
+import {horizontalFormOptions} from "../../common.js";
+
+export function userDetailDialog() {
+    return {
+        actionType: 'dialog',
+        dialog: {
+            title: '用户注册',
+            actions: [],
+            body: {
+                type: 'form',
+                api: '${base}/user_management/detail/${username}',
+                ...horizontalFormOptions(),
+                static: true,
+                body: [
+                    {
+                        type: 'input-email',
+                        name: 'username',
+                        label: '邮箱',
+                    },
+                    {
+                        type: 'input-password',
+                        name: 'password',
+                        label: '密码',
+                    },
+                    {
+                        type: 'radios',
+                        name: 'role',
+                        label: '角色',
+                    },
+                ]
+            }
+        }
+    }
+}

gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-register.js

@@ -0,0 +1,79 @@
+import {horizontalFormOptions} from "../../common.js";
+
+export function userRegisterDialog() {
+    return {
+        actionType: 'dialog',
+        dialog: {
+            title: '用户注册',
+            actions: [
+                {
+                    type: 'reset',
+                    label: '清空',
+                },
+                {
+                    type: 'submit',
+                    label: '注册',
+                    level: 'primary',
+                }
+            ],
+            body: {
+                type: 'form',
+                api: '${base}/user/register',
+                ...horizontalFormOptions(),
+                body: [
+                    {
+                        type: 'input-email',
+                        name: 'username',
+                        label: '邮箱',
+                        placeholder: '请输入邮箱',
+                        required: true,
+                        clearable: true,
+                        clearValueOnEmpty: true,
+                        validateApi: '${base}/user/exists_username/${username}'
+                    },
+                    {
+                        type: 'input-password',
+                        name: 'password',
+                        label: '密码',
+                        placeholder: '请输入密码',
+                        required: true,
+                        clearable: true,
+                        clearValueOnEmpty: true,
+                        validations: {
+                            matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
+                        },
+                        validationErrors: {
+                            matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
+                        }
+                    },
+                    {
+                        type: 'input-password',
+                        name: 'confirm-password',
+                        label: '确认密码',
+                        placeholder: '请再次输入密码',
+                        required: true,
+                        clearable: true,
+                        validations: {
+                            equalsField: 'password'
+                        },
+                        validationErrors: {
+                            equalsField: '两次输入密码不一致',
+                        }
+                    },
+                    {
+                        type: 'radios',
+                        name: 'role',
+                        label: '角色',
+                        required: true,
+                        selectFirst: true,
+                        options: [
+                            {label: '数据提供方', value: 'PROVIDER'},
+                            {label: '数据使用方', value: 'CUSTOMER'},
+                            {label: '审查监管方', value: 'CHECKER'},
+                        ]
+                    },
+                ]
+            }
+        }
+    }
+}

gringotts-web/src/main/resources/static/index.html

@@ -23,47 +23,72 @@
 <div id="root"></div>
 </body>
 <script src="assets/sdk/sdk.js"></script>
-<script src="assets/component/constants.js"></script>
-<script src="assets/component/common.js"></script>
-<script>
+<script type="module">
+    import {information} from './assets/component/constants.js'
+    import {userChangePasswordDialog} from './assets/component/pages/user/dialog-user-change-password'
+    import {tabUser} from './assets/component/pages/tab-user.js'
+    import {tabOverview} from './assets/component/pages/tab-overview.js'
+    import {apiGet} from "./assets/component/common.js";
+
     (function () {
         let amis = amisRequire('amis/embed')
         let amisJSON = {
-            type: 'page',
-            title: information.title,
-            subTitle: '提供合法合规的数据要素可信供给工具',
-            body: {
-                debug: true,
-                type: 'service',
-                api: {
-                    method: 'get',
-                    url: '${base}/user/state',
-                    headers: {
-                        token: '${token}'
-                    },
-                },
-                onEvent: {
-                    fetchInited: {
-                        actions: [
-                            {
-                                expression: '${!event.data.responseData.token}',
-                                actionType: 'url',
-                                args: {
-                                    url: '/login.html',
-                                }
+            id: 'header-service',
+            className: 'h-full',
+            type: 'service',
+            api: apiGet('${base}/user/state'),
+            onEvent: {
+                fetchInited: {
+                    actions: [
+                        {
+                            expression: '${!event.data.responseData.token}',
+                            actionType: 'url',
+                            args: {
+                                url: '/login.html',
+                                blank: false,
                             }
+                        }
+                    ]
+                }
+            },
+            body: [
+                {
+                    type: 'page',
+                    title: information.title,
+                    subTitle: '提供合法合规的数据要素可信供给工具',
+                    toolbar: [
+                        {
+                            type: 'dropdown-button',
+                            label: '${username}',
+                            align: 'right',
+                            trigger: 'hover',
+                            buttons: [
+                                {
+                                    label: '修改密码',
+                                    ...userChangePasswordDialog(),
+                                },
+                                {
+                                    label: '退出登陆',
+                                    actionType: 'ajax',
+                                    api: apiGet('${base}/user/logout'),
+                                    reload: 'header-service',
+                                }
+                            ]
+                        }
+                    ],
+                    bodyClassName: 'p-0',
+                    body: {
+                        className: 'h-full border-0',
+                        type: 'tabs',
+                        tabsMode: 'vertical',
+                        tabs: [
+                            tabOverview(),
+                            tabUser(),
                         ]
-                    }
-                },
-                body: [
-                    {
-                        type: 'tpl',
-                        tpl: '${username}'
-                    }
-                ]
-            }
+                    },
+                }
+            ]
         }
-        let debug = false
         amis.embed(
             '#root',
             amisJSON,
@@ -74,10 +99,10 @@
             },
             {
                 theme: 'antd',
-                enableAMISDebug: debug,
+                enableAMISDebug: information.debug,
             },
         );
-        if (debug) {
+        if (information.debug) {
             console.log('Source', amisJSON)
         }
     })()

gringotts-web/src/main/resources/static/login.html

@@ -23,9 +23,11 @@
 <div id="root"></div>
 </body>
 <script src="assets/sdk/sdk.js"></script>
-<script src="assets/component/constants.js"></script>
 <script src="assets/component/common.js"></script>
-<script>
+<script type="module">
+    import {information} from './assets/component/constants.js'
+    import {userRegisterDialog} from './assets/component/pages/user/dialog-user-register'
+
     (function () {
         let amis = amisRequire('amis/embed')
         let amisJSON = {
@@ -53,87 +55,14 @@
                                     api: '${base}/user/login',
                                     redirect: '/index.html?token=${token}',
                                     mode: 'horizontal',
+                                    horizontal: {
+                                        left: 2,
+                                    },
                                     actions: [
                                         {
                                             type: 'action',
-                                            actionType: 'dialog',
                                             label: '注册',
-                                            dialog: {
-                                                title: '新用户注册',
-                                                actions: [
-                                                    {
-                                                        type: 'reset',
-                                                        label: '清空',
-                                                    },
-                                                    {
-                                                        type: 'submit',
-                                                        label: '注册',
-                                                        level: 'primary',
-                                                    }
-                                                ],
-                                                body: {
-                                                    type: 'form',
-                                                    api: '${base}/user/register',
-                                                    mode: 'horizontal',
-                                                    canAccessSuperData: false,
-                                                    horizontal: {
-                                                        left: 2,
-                                                    },
-                                                    body: [
-                                                        {
-                                                            type: 'input-email',
-                                                            name: 'username',
-                                                            label: '邮箱',
-                                                            placeholder: '请输入邮箱',
-                                                            required: true,
-                                                            clearable: true,
-                                                            clearValueOnEmpty: true,
-                                                            validateApi: '${base}/user/exists_username/${username}'
-                                                        },
-                                                        {
-                                                            type: 'input-password',
-                                                            name: 'password',
-                                                            label: '密码',
-                                                            placeholder: '请输入密码',
-                                                            required: true,
-                                                            clearable: true,
-                                                            clearValueOnEmpty: true,
-                                                            validations: {
-                                                                matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
-                                                            },
-                                                            validationErrors: {
-                                                                matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
-                                                            }
-                                                        },
-                                                        {
-                                                            type: 'input-password',
-                                                            name: 'confirm-password',
-                                                            label: '确认密码',
-                                                            placeholder: '请再次输入密码',
-                                                            required: true,
-                                                            clearable: true,
-                                                            validations: {
-                                                                equalsField: 'password'
-                                                            },
-                                                            validationErrors: {
-                                                                equalsField: '两次输入密码不一致',
-                                                            }
-                                                        },
-                                                        {
-                                                            type: 'radios',
-                                                            name: 'role',
-                                                            label: '角色',
-                                                            required: true,
-                                                            selectFirst: true,
-                                                            options: [
-                                                                {label: '数据提供方', value: 'PROVIDER'},
-                                                                {label: '数据使用方', value: 'CUSTOMER'},
-                                                                {label: '审查监管方', value: 'CHECKER'},
-                                                            ]
-                                                        },
-                                                    ]
-                                                }
-                                            }
+                                            ...userRegisterDialog(),
                                         },
                                         {
                                             type: 'action',