🎉: init project

2024-07-11 16:37:26 +08:00
commit c46458c6f2
159 changed files with 19246 additions and 0 deletions
--- a/front/.editorconfig
+++ b/front/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/front/.gitignore
+++ b/front/.gitignore
@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/front/README.md
+++ b/front/README.md
@ -0,0 +1,27 @@
+# Front
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/front/angular.json
+++ b/front/angular.json
@ -0,0 +1,113 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "pnpm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "front": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/front",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "front:build:production"
+            },
+            "development": {
+              "buildTarget": "front:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "front:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/manifest.webmanifest"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
--- a/front/ngsw-config.json
+++ b/front/ngsw-config.json
@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/media/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
--- a/front/package.json
+++ b/front/package.json
@ -0,0 +1,44 @@
+{
+  "name": "front",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.0.2",
+    "@angular/cdk": "18.0.2",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/material": "18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
+    "@angular/service-worker": "^18.0.2",
+    "base-64": "^1.0.0",
+    "js-base64": "^3.7.6",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular/cli": "^18.0.3",
+    "@angular/compiler-cli": "^18.0.2",
+    "@types/jasmine": "~5.1.0",
+    "html5-qrcode": "^2.3.8",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.5"
+  }
+}
--- a/front/pnpm-lock.yaml
+++ b/front/pnpm-lock.yaml
--- a/front/src/app/app.component.html
+++ b/front/src/app/app.component.html
@ -0,0 +1,27 @@
+<div class="title">
+  <mat-toolbar color="primary">
+    <span class="home-button" (click)="router.navigate([''])">Ult App</span>
+    <span class="example-spacer"></span>
+    @if (user_srv.user().username != "") {
+      <button mat-button class="title-menu" aria-label="title menu button" [matMenuTriggerFor]="menu">
+        {{ 'welcome, '+user_srv.user().username?user_srv.user().username:'Plz Login'}}
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="router.navigate(['user'])">用户管理</button>
+        <button mat-menu-item (click)="router.navigate(['log'])">操作日志</button>
+        <button mat-menu-item (click)="user_srv.auth_logout()">退出</button>
+      </mat-menu>
+    }
+  </mat-toolbar>
+</div>
+<div class="content">
+  @if (url != 'login') {
+    <div class="side-container">
+      <ul>
+        <li [class]="url === 'user' ? 'active':''" (click)="router.navigate(['user'])">用户管理</li>
+        <li [class]="url === 'log' ? 'active':''" (click)="router.navigate(['log'])">操作日志</li>
+      </ul>
+    </div>
+  }
+  <router-outlet></router-outlet>
+</div>
--- a/front/src/app/app.component.scss
+++ b/front/src/app/app.component.scss
@ -0,0 +1,78 @@
+
+:host {
+  display: flex;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  flex-direction: column;
+
+  div.title {
+    width: 100%;
+    max-width: 100%;
+    height: 64px;
+
+    span.home-button {
+      cursor: pointer;
+    }
+
+    button.title-menu {
+      margin-left: auto;
+    }
+  }
+
+  div.content {
+    width: 100%;
+    height: calc(100% - 64px);
+    max-height: calc(100% - 64px);
+    display: flex;
+    flex-direction: row;
+
+    .side-container {
+      display: flex;
+      width: 235px;
+      max-width: 235px;
+      min-width: 235px;
+      flex-direction: column;
+      border-right: 1px solid #ddd;
+      max-height: 100%;
+      overflow-y: auto;
+
+
+      ul {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style: none;
+          display: flex;
+          align-items: center;
+          text-indent: 1rem;
+          width: 100%;
+          height: 48px;
+          font-size: 16px;
+
+          &:hover {
+            background: rgba(239,239,239);
+            cursor: pointer;
+          }
+
+          &.active {
+            background: rgb(221,221,237);
+            color: rgb(60,63,169);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 40rem) {
+  :host {
+    div.content {
+      .side-container {
+        display: none;
+      }
+    }
+  }
+}
--- a/front/src/app/app.component.spec.ts
+++ b/front/src/app/app.component.spec.ts
@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'front' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('front');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, front');
+  });
+});
--- a/front/src/app/app.component.ts
+++ b/front/src/app/app.component.ts
@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ActivatedRoute, NavigationEnd, Router, RouterOutlet} from '@angular/router';
+import {MatSidenav, MatSidenavContainer, MatSidenavContent} from "@angular/material/sidenav";
+import {MatIcon} from "@angular/material/icon";
+import {MatToolbar} from "@angular/material/toolbar";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {UserService} from "./service/user.service";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, MatSidenavContent, MatSidenav, MatSidenavContainer, MatIcon, MatToolbar, MatIconButton, MatButton, MatMenuTrigger, MatMenu, MatMenuItem],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  title = 'front';
+  url = '';
+
+  constructor(
+    public router: Router,
+    public user_srv: UserService,
+  ) {
+    this.router.events.subscribe(val => {
+      if (val instanceof  NavigationEnd) {
+        let _url = val.url
+        if (_url.startsWith("/")) {
+          _url = _url.slice(1)
+        }
+        _url = _url.split("/")[0]
+        console.log('[D] router val=', _url)
+        this.url = _url
+      }
+    })
+  }
+}
--- a/front/src/app/app.config.ts
+++ b/front/src/app/app.config.ts
@ -0,0 +1,22 @@
+import {ApplicationConfig, isDevMode} from '@angular/core';
+import {provideRouter} from '@angular/router';
+
+import {routes} from './app.routes';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import {alerterInterceptor} from "./interceptor/alerter.interceptor";
+import {provideAnimations} from '@angular/platform-browser/animations';
+import { provideServiceWorker } from '@angular/service-worker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(withInterceptorsFromDi()), {
+        provide: HTTP_INTERCEPTORS, useClass: alerterInterceptor, multi: true
+    },
+    provideAnimations(),
+    provideServiceWorker('ngsw-worker.js', {
+        enabled: !isDevMode(),
+        registrationStrategy: 'registerWhenStable:30000'
+    })
+]
+};
--- a/front/src/app/app.routes.ts
+++ b/front/src/app/app.routes.ts
@ -0,0 +1,12 @@
+import {Routes} from '@angular/router';
+import {HomeComponent} from "./page/home/home.component";
+import {LoginComponent} from "./page/login/login.component";
+import {LogComponent} from "./page/log/log.component";
+import {UserComponent} from "./page/user/user.component";
+
+export const routes: Routes = [
+  {path: "", component: HomeComponent},
+  {path: "login", component: LoginComponent},
+  {path: "log", component: LogComponent},
+  {path: "user", component: UserComponent},
+];
--- a/front/src/app/component/confirm/confirm.component.html
+++ b/front/src/app/component/confirm/confirm.component.html
@ -0,0 +1,5 @@
+<h2 mat-dialog-title>{{data.title}}</h2>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial (click)="confirm()">确认</button>
+</mat-dialog-actions>
--- a/front/src/app/component/confirm/confirm.component.scss
+++ b/front/src/app/component/confirm/confirm.component.scss
--- a/front/src/app/component/confirm/confirm.component.spec.ts
+++ b/front/src/app/component/confirm/confirm.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmComponent } from './confirm.component';
+
+describe('ConfirmComponent', () => {
+  let component: ConfirmComponent;
+  let fixture: ComponentFixture<ConfirmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConfirmComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/component/confirm/confirm.component.ts
+++ b/front/src/app/component/confirm/confirm.component.ts
@ -0,0 +1,20 @@
+import {Component, Inject, signal} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ConfirmData} from "../../interface/confirm_data";
+import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogTitle} from "@angular/material/dialog";
+import {MatButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-confirm',
+  standalone: true,
+  imports: [CommonModule, MatDialogTitle, MatDialogActions, MatButton, MatDialogClose],
+  templateUrl: './confirm.component.html',
+  styleUrl: './confirm.component.scss'
+})
+export class ConfirmComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: ConfirmData) {}
+
+  confirm() {
+    this.data.confirmed = true
+  }
+}
--- a/front/src/app/component/create-user-dialog/create-user-dialog.component.html
+++ b/front/src/app/component/create-user-dialog/create-user-dialog.component.html
@ -0,0 +1,40 @@
+<h2 mat-dialog-title>新建用户</h2>
+<mat-dialog-content class="create-user-content">
+  <mat-form-field>
+    <mat-label>username</mat-label>
+    <input matInput placeholder="username" name="username" [(ngModel)]="new_user.username">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>password</mat-label>
+    <input matInput placeholder="password" type="password" name="password" [(ngModel)]="new_user.password">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>confirm password</mat-label>
+    <input matInput placeholder="confirm password" type="password" name="confirm_password"
+           [(ngModel)]="new_user.confirm_password">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>privilege</mat-label>
+    <mat-select multiple [(ngModel)]="new_user.privileges">
+      @for (privilege of user_srv.user().privileges; track privilege) {
+        <mat-option [value]="privilege.value">{{privilege.label}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>status</mat-label>
+    <mat-select [(ngModel)]="new_user.status">
+      <mat-option [value]="0">正常</mat-option>
+      <mat-option [value]="1">冻结</mat-option>
+    </mat-select>
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-raised-button mat-dialog-close>取消</button>
+  <button mat-raised-button color="primary" (click)="create()">新建</button>
+</mat-dialog-actions>
--- a/front/src/app/component/create-user-dialog/create-user-dialog.component.scss
+++ b/front/src/app/component/create-user-dialog/create-user-dialog.component.scss
@ -0,0 +1,14 @@
+:host {
+  mat-dialog-content.create-user-content{
+    display: flex;
+    flex-direction: column;
+    width: 450px;
+  }
+}
+@media screen and (max-width: 40rem) {
+  :host {
+    mat-dialog-content.create-user-content{
+      width: 100%;
+    }
+  }
+}
--- a/front/src/app/component/create-user-dialog/create-user-dialog.component.spec.ts
+++ b/front/src/app/component/create-user-dialog/create-user-dialog.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateUserDialogComponent } from './create-user-dialog.component';
+
+describe('CreateUserDialogComponent', () => {
+  let component: CreateUserDialogComponent;
+  let fixture: ComponentFixture<CreateUserDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateUserDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CreateUserDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/component/create-user-dialog/create-user-dialog.component.ts
+++ b/front/src/app/component/create-user-dialog/create-user-dialog.component.ts
@ -0,0 +1,102 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
+import {MatOption, MatSelect} from "@angular/material/select";
+import {MatInput} from "@angular/material/input";
+import {MatButton} from "@angular/material/button";
+import {FormsModule} from "@angular/forms";
+import {NewUser} from "../../interface/user";
+import {MsgService} from "../../service/msg.service";
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {UserService} from "../../service/user.service";
+
+interface user_form {
+  username: string,
+  nickname: string,
+  password: string,
+  confirm_password: string,
+  status: 0 | 1,
+  privileges: number[],
+}
+
+@Component({
+  selector: 'app-create-user-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatFormField,
+    MatSelect,
+    MatOption,
+    MatInput,
+    MatLabel,
+    MatHint,
+    MatButton,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+  ],
+  templateUrl: './create-user-dialog.component.html',
+  styleUrl: './create-user-dialog.component.scss'
+})
+export class CreateUserDialogComponent {
+  new_user = {
+    username: "",
+    nickname: "",
+    password: "",
+    confirm_password: "",
+    status: 0,
+    privileges: [],
+  } as user_form
+
+  constructor(
+    public msg_srv: MsgService,
+    public user_srv: UserService,
+    public dialogRef: MatDialogRef<CreateUserDialogComponent>,
+  ) {
+  }
+
+  create() {
+    if (this.new_user.username.length < 3) {
+      this.msg_srv.warning("用户名长度不能小于3")
+      return
+    }
+    if (this.new_user.password.length < 8) {
+      this.msg_srv.warning("密码至少8位")
+      return
+    }
+    if (!this.new_user.password.match(/[a-z]+/)) {
+      this.msg_srv.warning("密码必须包含小写字母")
+      return
+    }
+    if (!this.new_user.password.match(/[A-Z]+/)) {
+      this.msg_srv.warning("密码必须包含大写字母")
+      return
+    }
+    if (this.new_user.password != this.new_user.confirm_password) {
+      this.msg_srv.warning("输入的两次密码不同")
+      return
+    }
+    console.log('[D] before create new user, new_user=', this.new_user)
+
+    this.user_srv.manage_user_create({
+      username: this.new_user.username,
+      password: this.new_user.password,
+      status: this.new_user.status,
+      privileges: this.new_user.privileges,
+      role: 100,
+    } as NewUser).subscribe(val => {
+      if (val.status === 200) {
+        this.msg_srv.success("创建用户成功")
+        this.dialogRef.close()
+      }
+    })
+  }
+}
--- a/front/src/app/component/update-user-dialog/update-user-dialog.component.html
+++ b/front/src/app/component/update-user-dialog/update-user-dialog.component.html
@ -0,0 +1,35 @@
+<h2 mat-dialog-title>修改用户</h2>
+<mat-dialog-content class="update-user-content">
+  <mat-form-field>
+    <mat-label>password</mat-label>
+    <input matInput placeholder="password" type="password" name="password" [formControl]="password">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>confirm password</mat-label>
+    <input matInput placeholder="confirm password" type="password" name="confirm_password"
+           [formControl]="confirm_password">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>privilege</mat-label>
+    <mat-select multiple [formControl]="privileges">
+      @for (privilege of user_srv.user().privileges; track privilege) {
+        <mat-option [value]="privilege.value">{{privilege.label}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>status</mat-label>
+    <mat-select [formControl]="status">
+      <mat-option [value]="0">正常</mat-option>
+      <mat-option [value]="1">冻结</mat-option>
+    </mat-select>
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button mat-raised-button mat-dialog-close>取消</button>
+  <button mat-raised-button color="primary" (click)="update()">修改</button>
+</mat-dialog-actions>
--- a/front/src/app/component/update-user-dialog/update-user-dialog.component.scss
+++ b/front/src/app/component/update-user-dialog/update-user-dialog.component.scss
@ -0,0 +1,14 @@
+:host {
+  mat-dialog-content.update-user-content{
+    display: flex;
+    flex-direction: column;
+    width: 450px;
+  }
+}
+@media screen and (max-width: 40rem) {
+  :host {
+    mat-dialog-content.update-user-content{
+      width: 100%;
+    }
+  }
+}
--- a/front/src/app/component/update-user-dialog/update-user-dialog.component.spec.ts
+++ b/front/src/app/component/update-user-dialog/update-user-dialog.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateUserDialogComponent } from './update-user-dialog.component';
+
+describe('UpdateUserDialogComponent', () => {
+  let component: UpdateUserDialogComponent;
+  let fixture: ComponentFixture<UpdateUserDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UpdateUserDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UpdateUserDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/component/update-user-dialog/update-user-dialog.component.ts
+++ b/front/src/app/component/update-user-dialog/update-user-dialog.component.ts
@ -0,0 +1,93 @@
+import {Component, Inject} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatButton} from "@angular/material/button";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent, MatDialogRef,
+  MatDialogTitle
+} from "@angular/material/dialog";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatOption} from "@angular/material/autocomplete";
+import {MatSelect} from "@angular/material/select";
+import {FormControl, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {User} from "../../interface/user";
+import {Enum} from "../../interface/enum";
+import {MsgService} from "../../service/msg.service";
+import {ArrayEquals} from "../../../tool";
+import {UserService} from "../../service/user.service";
+
+interface updateUser extends User {
+  password: string
+  confirm_password: string
+}
+
+type Updates = { [key: string]: any }
+
+@Component({
+  selector: 'app-update-user-dialog',
+  standalone: true,
+  imports: [CommonModule, MatButton, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MatFormField, MatInput, MatLabel, MatOption, MatSelect, ReactiveFormsModule, FormsModule],
+  templateUrl: './update-user-dialog.component.html',
+  styleUrl: './update-user-dialog.component.scss'
+})
+export class UpdateUserDialogComponent {
+
+  user: updateUser = {} as updateUser
+
+  privileges = new FormControl([] as number[])
+  status = new FormControl()
+  password = new FormControl('')
+  confirm_password = new FormControl('')
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: User,
+    private msg_srv: MsgService,
+    public user_srv: UserService,
+    public dialogRef: MatDialogRef<UpdateUserDialogComponent>,
+  ) {
+    this.user = {...data, password: '', confirm_password: ''}
+    this.privileges.setValue(this.user.privileges.map(v => v.value))
+    this.status.setValue(this.user.status.value)
+  }
+
+  update() {
+    let updated = false
+    let updates: Updates = {"id": this.user.id}
+    if (this.password.value || this.confirm_password.value) {
+      updated = true
+      updates["password"] = this.password.value
+      if (this.password.value != this.confirm_password.value) {
+        this.msg_srv.warning('两次密码不相同')
+        return
+      }
+    }
+
+    if (this.status.value != this.user.status.value) {
+      updated = true
+      updates["status"] = this.status.value
+    }
+
+    if (!ArrayEquals(this.privileges.value!, this.user.privileges.map(p => p.value))) {
+      updates["privileges"] = this.privileges.value
+      updated = true
+    }
+
+    if (!updated) {
+      this.msg_srv.warning('没有变更')
+      return
+    }
+
+    this.user_srv.manage_user_update(updates).subscribe(rs => {
+      if (rs.status === 200 || rs.status === 401) {
+        this.dialogRef.close()
+      }
+    })
+  }
+
+  initedPrivileges(privileges: Enum<number>[]) {
+    return privileges.map(p => p.value)
+  }
+}
--- a/front/src/app/interceptor/alerter.interceptor.ts
+++ b/front/src/app/interceptor/alerter.interceptor.ts
@ -0,0 +1,48 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import {map, Observable} from "rxjs";
+import {Response} from "../interface/response";
+import {MsgService} from "../service/msg.service";
+import {Router} from "@angular/router";
+import {Injectable} from "@angular/core";
+import {UserService} from "../service/user.service";
+
+// import {MsgService} from "../service/msg.service";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class alerterInterceptor implements HttpInterceptor {
+  constructor(
+    private msg_srv: MsgService,
+    private router: Router,
+  ) {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // const nr = req.clone().headers.set("Authorization", localStorage.getItem("ult-token"))
+    req = req.clone({headers: req.headers.append("Authorization", localStorage.getItem("ult-token") ?? "")})
+    return next.handle(req).pipe(
+      map((event) => {
+        if (event instanceof HttpResponse) {
+          try {
+            const rs = (event.body) as Response<any>
+            console.log(`[D] ${req.method} - ${req.url} =>`, rs)
+            if (rs.status > 200) {
+              this.msg_srv.error(rs.msg)
+              // alert(rs.msg)
+            }
+
+            if (rs.status === 401) {
+              this.router.navigate(['login'])
+            }
+          } catch (e) {
+           console.warn('[E] http err=',e)
+            this.msg_srv.error('无法连接服务器')
+          }
+        }
+        return event
+      })
+    );
+  }
+}
--- a/front/src/app/interface/confirm_data.ts
+++ b/front/src/app/interface/confirm_data.ts
@ -0,0 +1,4 @@
+export interface ConfirmData {
+  title: string;
+  confirmed: boolean;
+}
--- a/front/src/app/interface/enum.ts
+++ b/front/src/app/interface/enum.ts
@ -0,0 +1,5 @@
+export interface Enum<T> {
+  value: T,
+  code: string,
+  label: string,
+}
--- a/front/src/app/interface/log.ts
+++ b/front/src/app/interface/log.ts
@ -0,0 +1,13 @@
+import {Enum} from "./enum";
+
+export interface Log {
+  id: number,
+  created_at: number,
+  updated_at: number,
+  deleted_at: number,
+  user_id: number,
+  username: string,
+  type: Enum<number>,
+  content: { [key: string]: any },
+  html: string,
+}
--- a/front/src/app/interface/response.ts
+++ b/front/src/app/interface/response.ts
@ -0,0 +1,5 @@
+export interface Response<T> {
+  status: number;
+  msg: string;
+  data: T;
+}
--- a/front/src/app/interface/user.ts
+++ b/front/src/app/interface/user.ts
@ -0,0 +1,30 @@
+import {Enum} from "./enum";
+
+export interface User {
+  id: number,
+  created_at: number,
+  updated_at: number,
+  deleted_at: number,
+  username: string,
+  status: Enum<0 | 1>,
+  nickname: string,
+  comment: string,
+  role: Enum<100 | 254 | 256>,
+  privileges: Enum<number>[],
+  created_by_id: number,
+  created_by_name: string,
+  active_at: number,
+  deadline: number,
+  login_at: number,
+}
+
+export interface NewUser {
+  username: string,
+  nickname: string,
+  status: 0 | 1,
+  password: string,
+  privileges: number[],
+  deadline: number,
+  role: 100,
+  comment: string,
+}
--- a/front/src/app/page/home/home.component.html
+++ b/front/src/app/page/home/home.component.html
@ -0,0 +1 @@
+<h1>Welcome</h1>
--- a/front/src/app/page/home/home.component.scss
+++ b/front/src/app/page/home/home.component.scss
@ -0,0 +1,76 @@
+
+:host {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  margin: 0;
+
+  @keyframes fillup {
+    from {
+      background-position-x: 200%;
+    }
+    to {
+      background-position-x: 0;
+    }
+  }
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  h1 {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--my-primary-color);
+    font-size: 12rem;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 800;
+    letter-spacing: -0.5rem;
+    position: relative;
+    background-image: linear-gradient(to right, var(--my-primary-color), var(--my-primary-color), transparent);
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-position-x: 200%;
+    animation: 3s fillup ease-in-out 2s forwards;
+
+    &::after {
+      content: "Welcome";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      -webkit-text-stroke-color: white;
+      -webkit-text-fill-color: transparent;
+      opacity: 0;
+      animation: 2s fadein ease-in-out forwards;
+    }
+  }
+}
+
+@media screen and (max-width: 40rem) {
+  :host {
+    h1 {
+      font-size: 8rem;
+    }
+  }
+}
--- a/front/src/app/page/home/home.component.spec.ts
+++ b/front/src/app/page/home/home.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/page/home/home.component.ts
+++ b/front/src/app/page/home/home.component.ts
@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {UserService} from "../../service/user.service";
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss'
+})
+export class HomeComponent {
+  constructor(
+    public user_srv: UserService
+  ) {
+  }
+}
--- a/front/src/app/page/log/log.component.html
+++ b/front/src/app/page/log/log.component.html
@ -0,0 +1,28 @@
+<div class="logs">
+  <div class="table">
+    <table mat-table [dataSource]="log_srv.logs().list" class="mat-elevation-z8">
+      <ng-container matColumnDef="username">
+        <th mat-header-cell *matHeaderCellDef>用户</th>
+        <td mat-cell *matCellDef="let element"> {{ element.username }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="created_at">
+        <th mat-header-cell *matHeaderCellDef>时间</th>
+        <td mat-cell *matCellDef="let element"> {{ element.created_at | date: "yyyy-MM-dd HH:mm:SS" }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="type">
+        <th mat-header-cell *matHeaderCellDef>日志类型</th>
+        <td mat-cell *matCellDef="let element"> {{ element.type.label }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="html">
+        <th mat-header-cell *matHeaderCellDef>操作</th>
+        <td mat-cell *matCellDef="let element" [innerHTML]="decodeLog(element.html)"></td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+</div>
--- a/front/src/app/page/log/log.component.scss
+++ b/front/src/app/page/log/log.component.scss
@ -0,0 +1,11 @@
+:host {
+  width: 100%;
+  overflow-x: auto;
+
+  ::ng-deep td>div.nf-op-log>span.nf-op-log-keyword {
+    color: var(--my-primary-color);
+    text-decoration: underline;
+    font-weight: bold;
+    margin: 0 1rem;
+  }
+}
--- a/front/src/app/page/log/log.component.spec.ts
+++ b/front/src/app/page/log/log.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogComponent } from './log.component';
+
+describe('LogComponent', () => {
+  let component: LogComponent;
+  let fixture: ComponentFixture<LogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/page/log/log.component.ts
+++ b/front/src/app/page/log/log.component.ts
@ -0,0 +1,40 @@
+import {Component, OnInit} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LogService} from "../../service/log.service";
+import {decode} from "js-base64"
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable
+} from "@angular/material/table";
+import {MatIcon} from "@angular/material/icon";
+import {MatIconButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-log',
+  standalone: true,
+  imports: [CommonModule, MatTable, MatColumnDef, MatHeaderCell, MatCell, MatCellDef, MatHeaderCellDef, MatIcon, MatIconButton, MatHeaderRow, MatHeaderRowDef, MatRowDef, MatRow],
+  templateUrl: './log.component.html',
+  styleUrl: './log.component.scss'
+})
+export class LogComponent implements OnInit {
+  displayedColumns = ["username", "created_at", "type", "html"]
+
+  constructor(
+    public log_srv: LogService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.log_srv.get_logs()
+  }
+
+  decodeLog(org: string): string {
+    return decode(org)
+    //.from(org, "base64").toString()
+  }
+}
--- a/front/src/app/page/login/login.component.html
+++ b/front/src/app/page/login/login.component.html
@ -0,0 +1,15 @@
+<p>
+  <mat-form-field appearance="outline">
+    <mat-label>username</mat-label>
+    <input matInput placeholder="username" [(ngModel)]="username" name="username">
+  </mat-form-field>
+</p>
+<p>
+  <mat-form-field appearance="outline">
+    <mat-label>password</mat-label>
+    <input matInput placeholder="password" type="password" [(ngModel)]="password" name="password" (keyup)="enter($event)">
+  </mat-form-field>
+</p>
+<p>
+  <button mat-raised-button color="primary" (click)="login()">登录</button>
+</p>
--- a/front/src/app/page/login/login.component.scss
+++ b/front/src/app/page/login/login.component.scss
@ -0,0 +1,24 @@
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    min-width: 20rem;
+    max-width: 30rem;
+    width: 100%;
+
+    mat-form-field {
+      width: 100%;
+      input {
+        width: 100%;
+      }
+    }
+    button {
+      width: 100%;
+    }
+  }
+}
--- a/front/src/app/page/login/login.component.spec.ts
+++ b/front/src/app/page/login/login.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/page/login/login.component.ts
+++ b/front/src/app/page/login/login.component.ts
@ -0,0 +1,46 @@
+import {Component, signal} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from "@angular/forms";
+import {UserService} from "../../service/user.service";
+import {MatButton} from "@angular/material/button";
+import {MatFormField, MatInput, MatInputModule} from "@angular/material/input";
+import {MatIcon, MatIconModule} from "@angular/material/icon";
+import {MatFormFieldModule} from "@angular/material/form-field";
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButton,
+    MatInput,
+    MatFormField,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatIcon,
+  ],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss'
+})
+export class LoginComponent {
+
+  username: string = ''
+  password: string = ''
+
+  constructor(
+    public user_srv: UserService
+  ) {
+  }
+
+  login() {
+    this.user_srv.auth_login(this.username, this.password)
+  }
+
+  enter(event: KeyboardEvent) {
+    if (event.key === 'Enter' && this.password && this.username) {
+      this.login()
+    }
+  }
+}
--- a/front/src/app/page/user/user.component.html
+++ b/front/src/app/page/user/user.component.html
@ -0,0 +1,52 @@
+<div class="toolbar">
+  <div>
+    用户管理
+  </div>
+  <button mat-raised-button color="primary" (click)="open_dialog()">新建用户</button>
+</div>
+<div class="table">
+  <table mat-table [dataSource]="user_srv.user_list().list" class="mat-elevation-z8">
+    <ng-container matColumnDef="username">
+      <th mat-header-cell *matHeaderCellDef>username</th>
+      <td mat-cell *matCellDef="let element"> {{ element.username }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef>status</th>
+      <td mat-cell *matCellDef="let element"> {{ element.status.label }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="role">
+      <th mat-header-cell *matHeaderCellDef>role</th>
+      <td mat-cell *matCellDef="let element"> {{ element.role.label }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="privileges">
+      <th mat-header-cell *matHeaderCellDef>privileges</th>
+      <td mat-cell *matCellDef="let element"> {{ _parsePrivileges(element.privileges) }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="operation">
+      <th mat-header-cell *matHeaderCellDef>operation</th>
+      <td mat-cell *matCellDef="let element" style="padding-left: 4px !important;">
+        <button mat-icon-button (click)="update_user(element)">
+          <mat-icon color="primary">tune</mat-icon>
+        </button>
+        <button mat-icon-button (click)="delete_user(element)" color="warn">
+          <mat-icon color="secondary">delete</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
+<div class="pager">
+  <mat-paginator [length]="user_srv.user_list().total"
+                 [pageSize]="user_srv.user_list().size"
+                 [pageSizeOptions]="[5, 10, 25, 100]"
+                 (page)="handlePager($event)"
+                 aria-label="Select page">
+  </mat-paginator>
+</div>
--- a/front/src/app/page/user/user.component.scss
+++ b/front/src/app/page/user/user.component.scss
@ -0,0 +1,37 @@
+:host {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > div {
+    width: 100%;
+  }
+
+  div.toolbar {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    align-items: center;
+    flex-direction: row;
+    margin-top: 1rem;
+
+    > div {
+      margin-left: 1rem;
+    }
+
+    button {
+      margin-left: auto;
+      margin-right: 1rem;
+    }
+  }
+
+  div.table {
+    flex: 1 0 0;
+    margin-top: 1rem;
+  }
+
+  div.pager {
+    margin-top: auto;
+  }
+}
--- a/front/src/app/page/user/user.component.spec.ts
+++ b/front/src/app/page/user/user.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+  let component: UserComponent;
+  let fixture: ComponentFixture<UserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/front/src/app/page/user/user.component.ts
+++ b/front/src/app/page/user/user.component.ts
@ -0,0 +1,92 @@
+import {Component, OnInit} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {UserService} from "../../service/user.service";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatDialog} from "@angular/material/dialog";
+import {CreateUserDialogComponent} from "../../component/create-user-dialog/create-user-dialog.component";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable
+} from "@angular/material/table";
+import {MatIcon} from "@angular/material/icon";
+import {Enum} from "../../interface/enum";
+import {User} from "../../interface/user";
+import {ConfirmComponent} from "../../component/confirm/confirm.component";
+import {UpdateUserDialogComponent} from "../../component/update-user-dialog/update-user-dialog.component";
+import {MatPaginator, PageEvent} from "@angular/material/paginator";
+
+@Component({
+  selector: 'app-user',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButton,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatCell,
+    MatCellDef,
+    MatHeaderCellDef,
+    MatHeaderRow,
+    MatRow,
+    MatRowDef,
+    MatHeaderRowDef,
+    MatIconButton,
+    MatIcon,
+    MatPaginator,
+  ],
+  templateUrl: './user.component.html',
+  styleUrl: './user.component.scss'
+})
+export class UserComponent implements OnInit {
+  readonly displayedColumns: string[] = ["username", "status", "role", "privileges", "operation",];
+
+  constructor(
+    public user_srv: UserService,
+    public dialog: MatDialog,
+  ) {
+  }
+
+  ngOnInit() {
+    this.user_srv.manage_user_list()
+  }
+
+  open_dialog() {
+    this.dialog.open(CreateUserDialogComponent, {data: {}})
+  }
+
+  _parsePrivileges(privileges: any): string {
+    try {
+      let ps = privileges as Enum<number>[]
+      return ps.map(v => v.label).join("; ")
+    } catch (e) {
+      console.log("[D] parse privileges err=", e)
+      return ""
+    }
+  }
+
+  delete_user(target: User) {
+    let data = {title: `确认删除用户 ${target.username} 吗?`, confirmed: false }
+    this.dialog.open(ConfirmComponent, {data: data}).afterClosed().subscribe(() => {
+      if (data.confirmed) {
+        this.user_srv.manage_user_delete(target)
+      }
+    })
+  }
+
+  update_user(target: User) {
+    this.dialog.open(UpdateUserDialogComponent, {data: target})
+  }
+
+  handlePager(event: PageEvent) {
+    console.log('[D] handle pager change event=', event)
+    this.user_srv.user_list.set({...this.user_srv.user_list(), size: event.pageSize, page: event.pageIndex})
+    this.user_srv.manage_user_list()
+  }
+}
+
--- a/front/src/app/service/log.service.spec.ts
+++ b/front/src/app/service/log.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LogService } from './log.service';
+
+describe('LogService', () => {
+  let service: LogService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/front/src/app/service/log.service.ts
+++ b/front/src/app/service/log.service.ts
@ -0,0 +1,35 @@
+import {Injectable, signal} from '@angular/core';
+import {Log} from "../interface/log";
+import { HttpClient } from "@angular/common/http";
+import {tap} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LogService {
+
+  readonly log_list_url = "/api/log/content/list"
+
+  readonly logs = signal({
+    list: [] as Log[],
+    total: 0,
+    page: 0,
+    size: 0,
+  })
+
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  get_logs() {
+    return this.http.get<{status:number, msg:string, data: {list:Log[], total: number}}>(this.log_list_url).pipe(
+
+    ).subscribe(rs => {
+      if (rs.status === 200) {
+        this.logs.set({...this.logs(), total: rs.data.total, list: rs.data.list})
+      } else {
+        this.logs.set({...this.logs(), list: []})
+      }
+    })}
+}
--- a/front/src/app/service/msg.service.ts
+++ b/front/src/app/service/msg.service.ts
@ -0,0 +1,214 @@
+import { Injectable, Inject } from '@angular/core';
+import { Component } from '@angular/core';
+import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import {
+  MatSnackBar,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+} from '@angular/material/snack-bar';
+import {MatIconModule} from "@angular/material/icon";
+
+interface SnackMessage {
+  type: "success" | "error" | "warning" | "info"
+  duration: number
+  data: string
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MsgService {
+  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
+  verticalPosition: MatSnackBarVerticalPosition = 'top';
+
+  constructor(
+    private _snackBar: MatSnackBar
+  ) { }
+
+
+  success(data: string) {
+    this.open({ type: "success", duration: 1500, data: data })
+  }
+
+  info(data: string) {
+    this.open({ type: "info", duration: 2000, data: data })
+  }
+
+  warning(data: string) {
+    this.open({ type: "warning", duration: 3000, data: data })
+  }
+
+  error(data: string) {
+    this.open({ type: "error", duration: 3500, data: data })
+  }
+
+  open(msg: SnackMessage) {
+    switch (msg.type) {
+      case "success":
+        this._snackBar.openFromComponent(SnackMessageSuccess, {
+          data: msg.data,
+          duration: msg.duration,
+          horizontalPosition: this.horizontalPosition,
+          verticalPosition: this.verticalPosition,
+          panelClass: ['success-snackbar'],
+        })
+        break;
+      case "info":
+        this._snackBar.openFromComponent(SnackMessageInfo, {
+          data: msg.data,
+          duration: msg.duration,
+          horizontalPosition: this.horizontalPosition,
+          verticalPosition: this.verticalPosition,
+          panelClass: ['info-snackbar'],
+        })
+        break
+      case "warning":
+        this._snackBar.openFromComponent(SnackMessageWarning, {
+          data: msg.data,
+          duration: msg.duration,
+          horizontalPosition: this.horizontalPosition,
+          verticalPosition: this.verticalPosition,
+          panelClass: ['warning-snackbar'],
+        })
+        break
+      case "error":
+        this._snackBar.openFromComponent(SnackMessageError, {
+          data: msg.data,
+          duration: msg.duration,
+          horizontalPosition: this.horizontalPosition,
+          verticalPosition: this.verticalPosition,
+          panelClass: ['error-snackbar'],
+        })
+        break
+      default:
+        this._snackBar.openFromComponent(SnackMessageInfo, {
+          data: msg.data,
+          duration: msg.duration,
+          horizontalPosition: this.horizontalPosition,
+          verticalPosition: this.verticalPosition,
+          panelClass: ['info-snackbar'],
+        })
+        break;
+    }
+  }
+}
+
+
+@Component({
+  selector: 'snack-message-success',
+  template: `
+      <div class="snack-message-success snack-message">
+          <div>
+              <mat-icon>cancel</mat-icon>
+          </div>
+          <div class="snack-message-content">
+              {{ data }}
+          </div>
+      </div>
+  `,
+  standalone: true,
+  imports: [
+    MatIconModule
+  ],
+  styles: [`
+    .snack-message-success {
+    }
+  `]
+})
+export class SnackMessageSuccess {
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: string,
+    @Inject(MAT_SNACK_BAR_DATA) public duration: number,
+    @Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
+    @Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
+  ) { }
+}
+
+
+@Component({
+  selector: 'snack-message-info',
+  template: `
+      <div class="snack-message-info snack-message">
+          <div>
+              <mat-icon>cancel</mat-icon>
+          </div>
+          <div class="snack-message-content">
+              {{ data }}
+          </div>
+      </div>
+  `,
+  standalone: true,
+  imports: [
+    MatIconModule
+  ],
+  styles: [`
+    .snack-message-info {
+    }
+  `]
+})
+export class SnackMessageInfo {
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: string,
+    @Inject(MAT_SNACK_BAR_DATA) public duration: number,
+    @Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
+    @Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
+  ) { }
+}
+
+@Component({
+  selector: 'snack-message-warning',
+  template: `
+      <div class="snack-message-warning snack-message">
+          <div>
+              <mat-icon>cancel</mat-icon>
+          </div>
+          <div class="snack-message-content">
+              {{ data }}
+          </div>
+      </div>
+  `,
+  standalone: true,
+  imports: [
+    MatIconModule
+  ],
+  styles: [`
+    .snack-message-warning {
+    }
+  `]
+})
+export class SnackMessageWarning {
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: string,
+    @Inject(MAT_SNACK_BAR_DATA) public duration: number,
+    @Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
+    @Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
+  ) { }
+}
+
+@Component({
+  selector: 'snack-message-error',
+  template: `
+      <div class="snack-message-error snack-message">
+          <div>
+              <mat-icon>cancel</mat-icon>
+          </div>
+          <div class="snack-message-content">
+              {{ data }}
+          </div>
+    </div>
+  `,
+  standalone: true,
+  imports: [
+    MatIconModule
+  ],
+  styles: [`
+  `]
+})
+export class SnackMessageError {
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: string,
+    @Inject(MAT_SNACK_BAR_DATA) public duration: number,
+    @Inject(MAT_SNACK_BAR_DATA) public horizontalPosition: MatSnackBarHorizontalPosition,
+    @Inject(MAT_SNACK_BAR_DATA) public verticalPosition: MatSnackBarVerticalPosition,
+  ) { }
+}
--- a/front/src/app/service/user.service.spec.ts
+++ b/front/src/app/service/user.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/front/src/app/service/user.service.ts
+++ b/front/src/app/service/user.service.ts
@ -0,0 +1,119 @@
+import {Injectable, signal, WritableSignal} from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import {Router} from "@angular/router";
+import {User, NewUser} from "../interface/user";
+import {Response} from "../interface/response";
+import {tap} from "rxjs";
+import {MsgService} from "./msg.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+
+  readonly auth_login_url = '/api/user/auth/login'
+  readonly auth_logout_url = '/api/user/auth/logout'
+  readonly manage_user_create_url = '/api/user/manage/user/create'
+  readonly manage_user_update_url= '/api/user/manage/user/update'
+  readonly manage_user_delete_url = '/api/user/manage/user/delete'
+  readonly manage_user_list_url = '/api/user/manage/user/list'
+  readonly init_user: User = {id: 0, username: ""} as User
+
+  readonly user = signal(this.init_user)
+  readonly user_list: WritableSignal<{ total: number, page: number, size: number, list: User[] }> = signal({
+    total: 0,
+    page: 0,
+    size: 20,
+    list: [] as User[],
+  })
+
+  constructor(
+    private msg_srv: MsgService,
+    private http: HttpClient,
+    private router: Router,
+  ) {
+    this.auth_verify()
+  }
+
+  auth_login(username: string, password: string) {
+    this.http.post<Response<{ token: string, user: User }>>(this.auth_login_url, {
+      username: username,
+      password: password
+    }).subscribe(val => {
+      if (val.status === 200) {
+        localStorage.setItem("ult-token", val.data.token)
+        this.user.set(val.data.user)
+        this.router.navigate([''])
+      }
+    })
+  }
+
+  auth_verify() {
+    this.http.get<Response<{ token: string, user: User }>>(this.auth_login_url).subscribe(rs => {
+      if (rs.status === 200) {
+        this.user.set(rs.data.user)
+        console.log("[D] auth verify user=", this.user())
+      }
+    })
+  }
+
+  auth_logout() {
+    this.http.post<Response<null>>(this.auth_logout_url, {}).subscribe(rs => {
+      this.router.navigate(['login']).finally(() => {
+        localStorage.removeItem("ult-token")
+        this.user.set(this.init_user)
+      })
+    })
+  }
+
+  manage_user_create(new_user: NewUser) {
+    return this.http.post<Response<User>>(this.manage_user_create_url, {...new_user}).pipe(
+      tap({
+        next: (rs) => {
+          if (rs.status === 200) {
+            this.manage_user_list()
+          }
+        }
+      })
+    )
+  }
+
+  manage_user_delete(target: User) {
+    return this.http.post<Response<User>>(this.manage_user_delete_url, {id: target.id}).pipe(
+      tap({
+        next: (rs) => {
+          if (rs.status === 200) {
+            this.msg_srv.success('删除用户成功')
+            this.manage_user_list()
+          } else {
+            this.msg_srv.error(rs.msg)
+          }
+        }
+      })
+    ).subscribe()
+  }
+
+  manage_user_update(body: Object) {
+   return this.http.post<Response<any>>(this.manage_user_update_url, body).pipe(
+     tap({next: (rs) => {
+       if (rs.status === 200) {
+         this.msg_srv.success("更新用户成功")
+         this.manage_user_list()
+       } else {
+         this.msg_srv.error(rs.msg)
+       }
+       }})
+   )
+  }
+
+  manage_user_list() {
+    this.http.get<Response<{ total: number, list: User[] }>>(this.manage_user_list_url, {params: {}}).subscribe(rs => {
+      if (rs.status === 200) {
+        this.user_list.set({...this.user_list(), total: rs.data.total, list: rs.data.list})
+        // this.user_list = {...this.user_list, total: rs.data.total, list: rs.data.list}
+      } else {
+        this.user_list.set({...this.user_list(), list: []})
+      }
+    })
+  }
+}
--- a/front/src/assets/.gitkeep
+++ b/front/src/assets/.gitkeep
--- a/front/src/assets/icons/icon-128x128.png
+++ b/front/src/assets/icons/icon-128x128.png
--- a/front/src/assets/icons/icon-144x144.png
+++ b/front/src/assets/icons/icon-144x144.png
--- a/front/src/assets/icons/icon-152x152.png
+++ b/front/src/assets/icons/icon-152x152.png
--- a/front/src/assets/icons/icon-192x192.png
+++ b/front/src/assets/icons/icon-192x192.png
--- a/front/src/assets/icons/icon-384x384.png
+++ b/front/src/assets/icons/icon-384x384.png
--- a/front/src/assets/icons/icon-512x512.png
+++ b/front/src/assets/icons/icon-512x512.png
--- a/front/src/assets/icons/icon-72x72.png
+++ b/front/src/assets/icons/icon-72x72.png
--- a/front/src/assets/icons/icon-96x96.png
+++ b/front/src/assets/icons/icon-96x96.png
--- a/front/src/favicon.ico
+++ b/front/src/favicon.ico
--- a/front/src/index.html
+++ b/front/src/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Front</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#1976d2">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
+</html>
--- a/front/src/main.ts
+++ b/front/src/main.ts
@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
--- a/front/src/manifest.webmanifest
+++ b/front/src/manifest.webmanifest
@ -0,0 +1,59 @@
+{
+  "name": "front",
+  "short_name": "front",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
--- a/front/src/proxy.conf.json
+++ b/front/src/proxy.conf.json
@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://127.0.0.1:8080",
+    "secure": false
+  }
+}
--- a/front/src/styles.scss
+++ b/front/src/styles.scss
@ -0,0 +1,70 @@
+/* You can add global styles to this file, and also import other style files */
+:root {
+  --primary-color: rgb(63, 81, 181);
+  --my-primary-color: rgb(67, 80, 175);
+  --my-success-text-color: rgb(94, 140, 117);
+  --my-success-backgroud-color: rgb(203, 228, 216);
+  --my-warning-text-color: rgb(132, 113, 56);
+  --my-warning-backgroud-color: rgb(254, 243, 200);
+  --my-error-text-color: rgb(136, 52, 61);
+  --my-error-backgroud-color: rgb(246, 209, 213);
+  --my-info-text-color: rgb(60, 64, 69);
+  --my-info-backgroud-color: rgb(222, 223, 225);
+
+  font-size: 8px;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+.mat-mdc-snack-bar-container {
+
+  &.info-snackbar {
+    --mdc-snackbar-container-color: var(--my-info-backgroud-color);
+    --mdc-snackbar-supporting-text-color: var(--my-info-text-color);
+  }
+
+  &.success-snackbar {
+    --mdc-snackbar-container-color: var(--my-success-backgroud-color);
+    --mdc-snackbar-supporting-text-color: var(--my-success-text-color);
+  }
+
+  &.warning-snackbar {
+    --mdc-snackbar-container-color: var(--my-warning-backgroud-color);
+    --mdc-snackbar-supporting-text-color: var(--my-warning-text-color);
+  }
+
+  &.error-snackbar {
+    --mdc-snackbar-container-color: var(--my-error-backgroud-color);
+    --mdc-snackbar-supporting-text-color: var(--my-error-text-color);
+  }
+}
+
+.snack-message {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  div {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &.snack-message-content {
+      margin-left: 1rem;
+    }
+  }
+}
--- a/front/src/tool.ts
+++ b/front/src/tool.ts
@ -0,0 +1,6 @@
+export function ArrayEquals(a: any[], b: any[]): boolean {
+  return Array.isArray(a) &&
+    Array.isArray(b) &&
+    a.length === b.length &&
+    a.every((val, index) => val === b[index]);
+}
--- a/front/tsconfig.app.json
+++ b/front/tsconfig.app.json
@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/front/tsconfig.spec.json
+++ b/front/tsconfig.spec.json
@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}