diff --git a/index/src/app/api/api.service.ts b/index/src/app/api/api.service.ts
index d37f8a8..83ac859 100644
--- a/index/src/app/api/api.service.ts
+++ b/index/src/app/api/api.service.ts
@@ -527,6 +527,17 @@ export class ApiService extends HttpService {
         });
     }
 
+    webUpdatePage(pageSize: number = 10, pageNumber: number = 1) {
+        return super.Service<PageList<{ id: number, info: string, time: string }>>({
+            path: '/webUpdate/pages',
+            method: 'GET',
+            queryParam: {
+                count: pageSize,
+                page: pageNumber,
+            }
+        });
+    }
+
     lastestUpdate() {
         return super.Service<{
             lastUpdateTime: string;
diff --git a/index/src/app/view/admin/admin-update/admin-update.component.html b/index/src/app/view/admin/admin-update/admin-update.component.html
index 6cd743c..4dbfa90 100644
--- a/index/src/app/view/admin/admin-update/admin-update.component.html
+++ b/index/src/app/view/admin/admin-update/admin-update.component.html
@@ -1 +1,32 @@
-<p>admin-update works!</p>
+<div class="inner-content">
+    <nz-card nzTitle="更新内容管理" nzSize="small">
+        <button nz-button (click)="showModal()" style="margin-bottom: 15px;">新增</button>
+        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
+                  [nzPageSize]="pageSize" [nzLoading]="loading"
+                  (nzPageIndexChange)="getUpdateInfo()" nzFrontPagination="false">
+            <thead>
+            <th>更新内容</th>
+            <th>更新日期</th>
+            <th>操作</th>
+            </thead>
+            <tbody>
+            <tr *ngFor="let data of table.data">
+                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.info" nzTooltipPlacement="top"
+                    nz-tooltip>{{data.info}}</td>
+                <td>{{data.time}}</td>
+                <td>
+                    <a (click)="showModal(data)" class="edit-opr">编辑</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这个更新吗?" nzOkText="删除" nzCancelText="点错了"
+                       (nzOnConfirm)="deleteUpdateInfo(data.id)" class="del-opr">删除</a>
+                </td>
+            </tr>
+            </tbody>
+        </nz-table>
+    </nz-card>
+</div>
+
+<nz-modal [(nzVisible)]="modalData.visible" [nzClosable]="true" (nzOnCancel)="modalData.visible = false"
+          (nzOnOk)="confirm()" [nzTitle]="modalData.title">
+    <textarea nz-input [(ngModel)]="modalData.content" [nzAutosize]="{ minRows: 2, maxRows: 8 }"></textarea>
+</nz-modal>
diff --git a/index/src/app/view/admin/admin-update/admin-update.component.less b/index/src/app/view/admin/admin-update/admin-update.component.less
index e69de29..35aa4ab 100644
--- a/index/src/app/view/admin/admin-update/admin-update.component.less
+++ b/index/src/app/view/admin/admin-update/admin-update.component.less
@@ -0,0 +1,3 @@
+td {
+  max-width: 300px;
+}
diff --git a/index/src/app/view/admin/admin-update/admin-update.component.ts b/index/src/app/view/admin/admin-update/admin-update.component.ts
index 83ce40e..44e7632 100644
--- a/index/src/app/view/admin/admin-update/admin-update.component.ts
+++ b/index/src/app/view/admin/admin-update/admin-update.component.ts
@@ -1,15 +1,95 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {Title} from '@angular/platform-browser';
+import {Observable} from 'rxjs';
+import {ApiService} from '../../../api/api.service';
+import {PageList, Response} from '../../../class/HttpReqAndResp';
+import {UpdateInfo} from '../../../class/UpdateInfo';
 
 @Component({
-  selector: 'app-admin-update',
-  templateUrl: './admin-update.component.html',
-  styleUrls: ['./admin-update.component.less']
+    selector: 'app-admin-update',
+    templateUrl: './admin-update.component.html',
+    styleUrls: ['./admin-update.component.less']
 })
 export class AdminUpdateComponent implements OnInit {
 
-  constructor() { }
 
-  ngOnInit(): void {
-  }
+    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
+    }
 
+    pageIndex: number = 1;
+    pageSize: number = 10;
+
+    pageList: PageList<UpdateInfo> = new PageList();
+
+    loading: boolean = true;
+
+    modalData = {
+        visible: false,
+        content: null,
+        id: null,
+        title: null
+    };
+
+    ngOnInit(): void {
+        this.title.setTitle('小海博客 | 更新信息管理')
+        this.getUpdateInfo();
+    }
+
+    getUpdateInfo = () => this.apiService.webUpdatePage(this.pageSize, this.pageIndex).subscribe({
+        next: data => this.pageList = data.result,
+        complete: () => this.loading = false,
+        error: err => this.loading = false
+    })
+
+
+    deleteUpdateInfo(id) {
+        this.loading = true;
+        this.apiService.deleteWebUpdateInfo(id).subscribe({
+            next: data => {
+                this.nzMessage.success('删除成功')
+                this.loading = false;
+                this.getUpdateInfo();
+            },
+            error: err => {
+                this.nzMessage.error(err.msg)
+                this.loading = false
+            }
+        })
+    }
+
+    confirm() {
+        this.loading = true;
+        this.modalData.visible = false;
+        let observable: Observable<Response<UpdateInfo>>
+        if (this.modalData.id) {
+            observable = this.apiService.updateWebUpdateInfo(this.modalData.id, this.modalData.content)
+        } else {
+            observable = this.apiService.createWebUpdateInfo(this.modalData.content)
+        }
+        observable.subscribe({
+            next: data => {
+                this.nzMessage.success('操作成功')
+                this.loading = false;
+                this.getUpdateInfo();
+            },
+            error: err => {
+                this.nzMessage.error(err.msg)
+                this.loading = false
+            }
+        })
+        console.log(this.modalData);
+    }
+
+    showModal(data?: UpdateInfo) {
+        this.modalData.id = null;
+        this.modalData.title = '新增更新信息';
+        this.modalData.content = null;
+        if (data) {
+            this.modalData.id = data.id;
+            this.modalData.content = data.info;
+            this.modalData.title = '编辑更新信息';
+        }
+        this.modalData.visible = true;
+    }
 }
diff --git a/index/src/app/view/admin/admin-update/admin-update.module.ts b/index/src/app/view/admin/admin-update/admin-update.module.ts
index b5b71d9..a368774 100644
--- a/index/src/app/view/admin/admin-update/admin-update.module.ts
+++ b/index/src/app/view/admin/admin-update/admin-update.module.ts
@@ -2,6 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminUpdateComponent} from './admin-update.component';
+import {
+    NzButtonModule,
+    NzCardModule,
+    NzDividerModule, NzInputModule, NzModalModule,
+    NzPopconfirmModule,
+    NzTableModule,
+    NzToolTipModule,
+    NzTypographyModule
+} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -10,7 +20,17 @@ import {AdminUpdateComponent} from './admin-update.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminUpdateComponent}])
+        RouterModule.forChild([{path: '', component: AdminUpdateComponent}]),
+        NzCardModule,
+        NzTableModule,
+        NzTypographyModule,
+        NzToolTipModule,
+        NzDividerModule,
+        NzPopconfirmModule,
+        NzModalModule,
+        FormsModule,
+        NzButtonModule,
+        NzInputModule
     ]
 })
 export class AdminUpdateModule {