添加用户管理模块

admin/src/assets/scss/element.scss

@@ -16,3 +16,7 @@
 .el-main {
   margin-top: 15px;
 }
+
+.el-card {
+  height: calc(100vh - 200px);
+}

admin/src/assets/scss/mine.scss

@@ -1,3 +1,7 @@
 .m-content {
   padding: 10px;
 }
+
+.m-form-item {
+  width: 400px;
+}

admin/src/layout/components/Menu.vue

@@ -41,7 +41,8 @@
         <el-icon><UserFilled /></el-icon>
         <span>用户管理</span>
       </template>
-      <el-menu-item index="/users">用户列表</el-menu-item>
+      <el-menu-item index="/user/list">用户列表</el-menu-item>
+      <el-menu-item index="/user/account">账号设置</el-menu-item>
     </el-sub-menu>
   </el-menu>
 </template>

admin/src/router/index.js

@@ -43,9 +43,14 @@ const routes = [
         component: () => import('@/views/about/About.vue')
       },
       {
-        path: '/users',
+        path: '/user/list',
         name: '用户列表',
-        component: () => import('@/views/user/User.vue')
+        component: () => import('@/views/user/UserList.vue')
+      },
+      {
+        path: '/user/account',
+        name: '账号设置',
+        component: () => import('@/views/user/Account.vue')
       },
       {
         path: '/website',

admin/src/views/article/Article.vue

@@ -16,7 +16,7 @@
       <el-form-item>
         <v-md-editor
           v-model="blog.article"
-          height="calc(100vh - 270px)"
+          height="calc(100vh - 290px)"
           placeholder="在vuepress主题中, 您可以使用tip功能噢~"
         />
       </el-form-item>

admin/src/views/category/Category.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: liuyx 1517482303@qq.com
+ * @Date: 2022-11-15 10:36:14
+ * @LastEditors: liuyx 1517482303@qq.com
+ * @LastEditTime: 2022-11-19 20:01:27
+ * @FilePath: \admin\src\views\category\Category.vue
+ * @Description: 分类管理
+ *
+ * Copyright (c) 2022 by liuyx 1517482303@qq.com, All Rights Reserved.
+-->
+<template>
+  <el-card>
+    <div class="operation-container">
+      <el-button type="primary"
+        ><el-icon><Plus /></el-icon>新增</el-button
+      >
+    </div>
+    <el-table :data="articleList" style="width: 100%">
+      <!-- 多选 -->
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="cover" label="分类名称" />
+      <el-table-column prop="title" label="文章量" />
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
+          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.operation-container {
+  margin: 10px 0 20px 0;
+}
+</style>

admin/src/views/tag/Tag.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Author: liuyx 1517482303@qq.com
+ * @Date: 2022-11-15 10:35:54
+ * @LastEditors: liuyx 1517482303@qq.com
+ * @LastEditTime: 2022-11-21 17:46:38
+ * @FilePath: \admin\src\views\tag\Tag.vue
+ * @Description: 标签管理
+ *
+ * Copyright (c) 2022 by liuyx 1517482303@qq.com, All Rights Reserved.
+-->
+<template>
+  <el-card>
+    <div class="operation-container">
+      <el-button type="primary"
+        ><el-icon><Plus /></el-icon>新增</el-button
+      >
+    </div>
+    <el-table :data="articleList" style="width: 100%">
+      <!-- 多选 -->
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="cover" label="标签名称" />
+      <el-table-column prop="title" label="文章量" />
+      <el-table-column prop="createTime" label="创建时间" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button type="primary" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
+          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.operation-container {
+  margin: 10px 0 20px 0;
+}
+</style>

admin/src/views/user/Account.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-card>
+    <!-- 选择对应的账号 -->
+    <el-select v-model="account.value" placeholder="请选择类型" size="large" @change="selectChange">
+      <el-option v-for="op in options" :key="op.id" :value="op.id" :label="op.value" />
+    </el-select>
+    <el-tabs type="border-card">
+      <!-- 基本信息修改 -->
+      <el-tab-pane label="修改基本信息">
+        <el-form label-width="120px" label-position="left">
+          <el-form-item label="选择头像">
+            <el-upload
+              :show-file-list="false"
+              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+              list-type="picture"
+              class="avatar-uploader"
+            >
+              <img v-if="accountInfo.avatar" :src="accountInfo.avatar" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
+          </el-form-item>
+          <el-form-item label="名称">
+            <el-input v-model="accountInfo.name" class="m-form-item" />
+          </el-form-item>
+          <el-form-item>
+            <el-button color="#626aef" @click="updateBasicInfo">修 改</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <!-- 密码修改 -->
+      <el-tab-pane label="修改密码">
+        <el-form label-width="120px" label-position="left">
+          <el-form-item label="旧密码">
+            <el-input v-model="passwordInfo.oldPwd" type="password" class="m-form-item" />
+          </el-form-item>
+          <el-form-item label="新密码">
+            <el-input v-model="passwordInfo.newPwd" type="password" class="m-form-item" />
+          </el-form-item>
+          <el-form-item label="确认密码">
+            <el-input v-model="passwordInfo.againPwd" type="password" class="m-form-item" />
+          </el-form-item>
+          <el-form-item>
+            <el-button color="#626aef" @click="updatePassword">修 改</el-button>
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const account = ref({
+  id: 0,
+  value: '管理员'
+})
+const options = [
+  {
+    id: 0,
+    value: '管理员'
+  },
+  {
+    id: 1,
+    value: '测试'
+  }
+]
+const accountInfo = ref({
+  avatar: '',
+  name: ''
+})
+const passwordInfo = ref({
+  oldPwd: '',
+  newPwd: '',
+  againPwd: ''
+})
+
+const selectChange = (val) => {
+  account.value.id = val
+  account.value.value = val === 0 ? '管理员' : '测试'
+}
+
+const updateBasicInfo = () => {
+  console.log({
+    id: account.value.id,
+    avatar: accountInfo.value.avatar,
+    name: accountInfo.value.name
+  })
+}
+
+const updatePassword = () => {
+  console.log({
+    id: account.value.id,
+    oldPwd: passwordInfo.value.oldPwd,
+    newPwd: passwordInfo.value.newPwd,
+    againPwd: passwordInfo.value.againPwd
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  margin-bottom: 20px;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+  margin-right: 20px;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 128px;
+  height: 128px;
+  text-align: center;
+}
+</style>

admin/src/views/user/User.vue

@@ -1,7 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

admin/src/views/user/UserList.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-card>
+    <el-table :data="userList" border style="width: 100%">
+      <el-table-column prop="avatar" label="头像" align="center">
+        <template #default="scope">
+          <el-image
+            class="user-avatar"
+            :src="
+              scope.row.avatar
+                ? scope.row.avatar
+                : 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
+            "
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="昵称" align="center" />
+      <el-table-column prop="loginMethod" label="登录方式" align="center" />
+      <el-table-column prop="role" label="用户角色" align="center" />
+      <el-table-column prop="lastDate" label="上次登录时间" align="center" />
+    </el-table>
+  </el-card>
+</template>
+
+<script setup>
+const userList = [
+  {
+    avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
+    name: 'Liuyx',
+    loginMethod: '邮箱',
+    role: '用户',
+    lastDate: '2022-11-22'
+  },
+  {
+    avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
+    name: 'Liuyx',
+    loginMethod: '邮箱',
+    role: '用户',
+    lastDate: '2022-11-22'
+  },
+  {
+    avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
+    name: 'Liuyx',
+    loginMethod: '邮箱',
+    role: '用户',
+    lastDate: '2022-11-22'
+  },
+  {
+    avatar: 'https://typora-lyx.oss-cn-guangzhou.aliyuncs.com/typora/avatar.jpg',
+    name: 'Liuyx',
+    loginMethod: '邮箱',
+    role: '用户',
+    lastDate: '2022-11-22'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.user-avatar {
+  width: 50px;
+  height: 50px;
+}
+</style>