添加头部

src/layouts/index.vue

@@ -1,7 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import service from '../plugins/axios';
+const data = ref((await service.get('/auth/concat')).data)
+const title = ref(`最新注册用户 ${data.value.data.newuser} 目前论坛以及注册了 ${data.value.data.count} 人`)
+</script>
 
 <template>
-  home
+  <el-alert title="左侧选择合适管理模块" type="success" />
+  <br/>
+  <el-alert :title="title" type="success" />
 </template>
 
 <style scoped lang="scss">

src/layouts/plate.vue

@@ -1,8 +1,63 @@
 <script setup lang="ts">
+import service from '../plugins/axios';
+import { ElMessageBox,ElMessage } from 'element-plus';
+const plate=ref((await service.get('/plate/getplate')).data)
+function addplate(){
+  ElMessageBox.prompt('请输入板块名称', '新增板块', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
+    inputErrorMessage: '请输入板块名称',
+  }).then(({ value })=>{
+    service.post('/plate/addolate',{plate:value}).then((res)=>{
+      plate.value.push(res.data)
+      ElMessage.success('添加成功')
+    })
+  })
+}
+function editplate(id:number){
+  ElMessageBox.prompt('请编辑板块名称', '编辑板块', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
+    inputErrorMessage: '请输入板块名称',
+    inputValue:plate.value.find((item:any)=>item.id==id).name
+  }).then(({ value })=>{
+    service.put('/plate/updateplate',{
+      plateid:id,
+      plate:value
+    }).then((res)=>{
+      plate.value.find((item:any)=>item.id==id).name=value
+      ElMessage.success('修改成功')
+    })
+  })
+}
+function deleteplate(id:number){
+  ElMessageBox.confirm('此操作将永久删除该板块, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(()=>
+    service.delete('/plate/deleteplate',{data:{plateid:id}}).then((res)=>{
+      plate.value = plate.value.filter((item:any)=>item.id!=id)
+      ElMessage.success('删除成功')
+    })
+  )
+}
 </script>
 
 <template>
-  plate
+  <el-button @click="addplate">新增</el-button>
+  <el-table :data="plate">
+    <el-table-column prop="id" label="id" />
+    <el-table-column prop="name" label="板块名称" />
+    <el-table-column >
+      <template #default="{ row }">
+        <el-button type="text" size="small" @click="editplate(row.id)">编辑</el-button>
+        <el-button type="text" size="small" @click="deleteplate(row.id)">删除</el-button>
+      </template>
+    </el-table-column>     
+  </el-table>
 </template>
 
 <style scoped>

src/views/home/header.vue

@@ -9,7 +9,7 @@ function logout() {
 
 <template>
   <!-- 退出登陆 -->
-  <span>状况</span>
+  <span>欢迎来使用本后台管理系统</span>
   <el-button type="danger"
              link
              @click="logout"