完全体，不改了

package.json

@@ -9,18 +9,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-vue": "^6.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.2",
-    "ckeditor5": "^42.0.0",
     "element-plus": "^2.7.6",
-    "vue": "^3.4.29",
+    "file-saver": "^2.0.5",
+    "vue": "^3.4.31",
     "vue-router": "^4.4.0",
     "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
-    "vite": "^5.3.1"
+    "vite": "^5.3.3"
   }
 }

src/components/HelloWorld.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
-const count = ref(0)
+const count = ref(0);
 </script>
 
 <template>
@@ -13,7 +13,7 @@ const count = ref(0)
       <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <h1>{{ this.$route.meta.msg }}</h1>
+  <h1>{{ $route.meta.msg }}</h1>
 
   <div class="card">
     <el-button type="success" @click="count++">count is {{ count }}</el-button>
@@ -25,19 +25,24 @@ const count = ref(0)
 
   <p>
     Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
-      >create-vue</a
-    >, the official Vue + Vite starter
   </p>
   <p>
     Learn more about IDE Support for Vue in the
-    <a
+    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
   </p>
   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+
+  <!-- 添加导航链接 -->
+  <ul>
+    <li><router-link to="/login">Login</router-link></li>
+    <li><router-link to="/register">Register</router-link></li>
+    <li><router-link to="/courseList">Courses</router-link></li>
+    <li><router-link to="/meetings">Meetings</router-link></li>
+    <li><router-link to="/news">News</router-link></li>
+    <li><router-link to="/organizations">Organizations</router-link></li>
+    <li><router-link to="/users">Users</router-link></li>
+  </ul>
 </template>
 
 <style scoped>
@@ -56,4 +61,4 @@ const count = ref(0)
 .read-the-docs {
   color: #888;
 }
-</style>
+</style>

src/main.js

@@ -3,7 +3,6 @@ import './style.css'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import CKEditor from '@ckeditor/ckeditor5-vue';
 
 import router from './router'
 import store from './store'
@@ -12,5 +11,4 @@ const app = createApp(App)
 app.use(ElementPlus)
 app.use(router)
 app.use(store)
-app.use(CKEditor)
 app.mount('#app')

src/router/authentication.js

@@ -1,36 +1,23 @@
+// authentication.js
 import Login from '../views/authentication/Login.vue';
 import Register from '../views/authentication/Register.vue';
-import ManageProfile from '../views/authentication/ManageProfile.vue';
 import Profile from '../views/authentication/Profile.vue';
-import store from '../store';
-import {createRouter, createWebHistory} from "vue-router";
 
-const routes = [
+export default [
-  { path: '/login', component: Login },
+    {
-  { path: '/register', component: Register },
+        path: '/login',
-  { path: '/manageProfile', component: ManageProfile },
+        name: 'Login',
-  {
+        component: Login
-    path: '/profile',
+    },
-    component: Profile,
+    {
-    meta: { requiresAuth: true },
+        path: '/register',
-  },
+        name: 'Register',
-];
+        component: Register
-
+    },
-const router = createRouter({
+    {
-  history: createWebHistory(),
+        path: '/profile',
-  routes,
+        // path: '/profile/:userId',
-});
+        name: 'Profile',
-
+        component: Profile
-router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth)) {
-    if (!store.getters['authentication/isAuthenticated']) {
-      next('/login');
-    } else {
-      next();
     }
-  } else {
+];
-    next();
-  }
-});
-
-export default routes;

src/router/courseManagement.js

@@ -1,9 +1,23 @@
-// import CourseList from '../views/course-management/CourseList.vue'
+import Course from '../views/course-management/Course.vue';
-// import CourseDetail from '../views/course-management/CourseDetail.vue'
+import CourseList from '../views/course-management/CourseList.vue';
-// import CourseEdit from '../views/course-management/CourseEdit.vue'
+import BackgroundWrapper from "@views/course-management/BackgroundWrapper.vue";
 
 export default [
-    // { path: '/courses', component: CourseList },
+    {
-    // { path: '/courses/:id', component: CourseDetail },
+        path: '/course',
-    // { path: '/courses/:id/edit', component: CourseEdit }
+        name: 'Course',
-]
+        component: Course
+    },
+
+    {
+        path: '/courseList',
+        name: 'CourseList',
+        component: CourseList
+    },
+
+    {
+        path: '/backgroundWrapper',
+        name: 'BackgroundWrapper',
+        component: BackgroundWrapper
+    }
+];

src/router/newsManagement.js

@@ -1,11 +1,9 @@
-import NewsList from '../views/news-management/NewsList.vue'
+// import NewsList from '../views/news-management/NewsList.vue'
-import EditNews from "@views/news-management/EditNews.vue";
 // import NewsDetail from '../views/news-management/NewsDetail.vue'
 // import NewsEdit from '../views/news-management/NewsEdit.vue'
 
 export default [
-    { path: '/news', component: NewsList },
+    // { path: '/news', component: NewsList },
-    { path: '/news/edit', component: EditNews, name: 'editNews' },
     // { path: '/news/:id', component: NewsDetail },
     // { path: '/news/:id/edit', component: NewsEdit }
 ]

src/services/authenticationService.js

@@ -0,0 +1,34 @@
+// authenticationService.js
+import axios from 'axios';
+
+const API_URL = '/api';
+
+class AuthenticationService {
+    login(credentials) {
+        return axios.post(`${API_URL}/login`, credentials);
+    }
+
+    register(user) {
+        return axios.post(`${API_URL}/register`, user);
+    }
+
+    updateUserInfo(user) {
+        return axios.post(`${API_URL}/update`, user);
+    }
+
+    changePassword(data) {
+        return axios.post(`${API_URL}/changePassword`, null, {
+            params: {
+                username: data.username,
+                oldPassword: data.oldPassword,
+                newPassword: data.newPassword
+            }
+        });
+    }
+
+    getUserInfo(token) {
+        return axios.get(`${API_URL}/profile?token=${token}`);
+    }
+}
+
+export default new AuthenticationService();

src/store/authentication.js

@@ -1,43 +1,31 @@
-import axios from 'axios';
-
 const state = {
-    isAuthenticated: false,
+    token: null
-    token: null,
+}
-};
 
 const mutations = {
     setUser(state, {token}) {
-        state.isAuthenticated = true;
+        state.token = token
-        state.token = token;
+    }
-    },
+}
-    clearUser(state) {
-        state.isAuthenticated = false;
-        state.token = null;
-    },
-};
 
 const actions = {
-    async login({commit}, credentials) {
+    login({commit}, token) {
-        const response = await axios.post('/api/login', credentials);
+        commit('setUser', token)
-        if (response.status === 200) {
-            commit('setUser', {token: response.data.token});
-        }
-        return response;
     },
     logout({commit}) {
-        commit('clearUser');
+        commit('setUser', null)
-    },
+    }
-};
+}
 
 const getters = {
-    isAuthenticated: (state) => state.isAuthenticated,
+    isAuthenticated: state => !!state.token,
-    token: (state) => state.token,
+    token: state => state.token
-};
+}
 
 export default {
     namespaced: true,
     state,
     mutations,
     actions,
-    getters,
+    getters
-};
+}

src/style.css

@@ -1,158 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
 body, html {
     margin: 0;
     padding: 0;
-}
+}
-
-@media print {
-    body {
-        margin: 0 !important;
-    }
-}
-
-.main-container {
-    font-family: 'Lato';
-    width: fit-content;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.ck-content {
-    font-family: 'Lato';
-    line-height: 1.6;
-    word-break: break-word;
-}
-
-.editor-container_classic-editor .editor-container__editor {
-    min-width: 750px;
-    max-width: 1000px;
-    width: 100%;
-}
-
-.ck-content h3.category {
-    font-family: 'Oswald';
-    font-size: 20px;
-    font-weight: bold;
-    color: #555;
-    letter-spacing: 10px;
-    margin: 0;
-    padding: 0;
-}
-
-.ck-content h2.document-title {
-    font-family: 'Oswald';
-    font-size: 50px;
-    font-weight: bold;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-.ck-content h3.document-subtitle {
-    font-family: 'Oswald';
-    font-size: 20px;
-    color: #555;
-    margin: 0 0 1em;
-    font-weight: bold;
-    padding: 0;
-}
-
-.ck-content p.info-box {
-    --background-size: 30px;
-    --background-color: #e91e63;
-    padding: 1.2em 2em;
-    border: 1px solid var(--background-color);
-    background: linear-gradient(
-            135deg,
-            var(--background-color) 0%,
-            var(--background-color) var(--background-size),
-            transparent var(--background-size)
-    ),
-    linear-gradient(
-            135deg,
-            transparent calc(100% - var(--background-size)),
-            var(--background-color) calc(100% - var(--background-size)),
-            var(--background-color)
-    );
-    border-radius: 10px;
-    margin: 1.5em 2em;
-    box-shadow: 5px 5px 0 #ffe6ef;
-}
-
-.ck-content blockquote.side-quote {
-    font-family: 'Oswald';
-    font-style: normal;
-    float: right;
-    width: 35%;
-    position: relative;
-    border: 0;
-    overflow: visible;
-    z-index: 1;
-    margin-left: 1em;
-}
-
-.ck-content blockquote.side-quote::before {
-    content: '“';
-    position: absolute;
-    top: -37px;
-    left: -10px;
-    display: block;
-    font-size: 200px;
-    color: #e7e7e7;
-    z-index: -1;
-    line-height: 1;
-}
-
-.ck-content blockquote.side-quote p {
-    font-size: 2em;
-    line-height: 1;
-}
-
-.ck-content blockquote.side-quote p:last-child:not(:first-child) {
-    font-size: 1.3em;
-    text-align: right;
-    color: #555;
-}
-
-.ck-content span.marker {
-    background: yellow;
-}
-
-.ck-content span.spoiler {
-    background: #000;
-    color: #000;
-}
-
-.ck-content span.spoiler:hover {
-    background: #000;
-    color: #fff;
-}
-
-.ck-content pre.fancy-code {
-    border: 0;
-    margin-left: 2em;
-    margin-right: 2em;
-    border-radius: 10px;
-}
-
-.ck-content pre.fancy-code::before {
-    content: '';
-    display: block;
-    height: 13px;
-    margin-bottom: 8px;
-    background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==) no-repeat;
-}
-
-.ck-content pre.fancy-code-dark {
-    background: #272822;
-    color: #fff;
-    box-shadow: 5px 5px 0 #0000001f;
-}
-
-.ck-content pre.fancy-code-bright {
-    background: #dddfe0;
-    color: #000;
-    box-shadow: 5px 5px 0 #b3b3b3;
-}

src/views/authentication/Login.vue

@@ -1,121 +1,93 @@
 <script setup>
-import { ref } from 'vue';
+import { reactive } from 'vue';
-import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage } from 'element-plus';
-import 'element-plus/dist/index.css';
-import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+import AuthenticationService from '../../services/authenticationService';
 
-const store = useStore();
 const router = useRouter();
+const store = useStore();
 
-const username = ref('');
+const credentials = reactive({
-const password = ref('');
+  username: '',
-const rememberMe = ref(false);
+  password: ''
-
+});
-const handleLogin = async () => {
-  console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
 
+const login = async () => {
   try {
-    const response = await store.dispatch('authentication/login', {
+    const response = await AuthenticationService.login(credentials);
-      username: username.value,
-      password: password.value,
-    });
-
     if (response.status === 200) {
+      store.commit('authentication/setUser', { token: response.data.token });
+      router.push("/profile");
       ElMessage.success('登录成功');
-      router.push('/profile');
-    } else {
-      ElMessage.error('登录失败，请稍后再试');
     }
   } catch (error) {
-    if (error.response && error.response.status === 401) {
+    ElMessage.error('用户名或密码错误');
-      ElMessage.error('用户名或密码错误');
+    console.error("登录错误:", error);
-    } else {
-      ElMessage.error('登录失败，请稍后再试');
-    }
   }
 };
+
+const goToRegister = () => {
+  router.push('/register');
+};
 </script>
 
 <template>
-  <div class="login-container">
+  <div class="login-wrapper">
-    <div class="login-box">
+    <div class="login-container">
-      <h2>测盟汇管理系统</h2>
+      <h1>用户登录</h1>
-      <ElForm @submit.prevent="handleLogin">
+      <el-form @submit.prevent="login" label-width="100px">
-        <ElFormItem>
+        <el-form-item label="用户名：">
-          <label for="username">
+          <el-input v-model="credentials.username" id="username" class="short-input"/>
-            <i class="fas fa-user"></i> 账号
+        </el-form-item>
-          </label>
+        <el-form-item label="密码：">
-          <ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+          <el-input v-model="credentials.password" id="password" type="password" class="short-input"/>
-        </ElFormItem>
+        </el-form-item>
-        <ElFormItem>
+        <el-form-item>
-          <label for="password">
+          <el-button type="primary" native-type="submit">登录</el-button>
-            <i class="fas fa-lock"></i> 密码
+          <el-button type="default" @click="goToRegister">注册</el-button>
-          </label>
+        </el-form-item>
-          <ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+      </el-form>
-        </ElFormItem>
-        <ElFormItem>
-          <ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
-        </ElFormItem>
-      </ElForm>
     </div>
   </div>
 </template>
 
 <style scoped>
-.login-container {
+.login-wrapper {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: 100vh;
-  background: url('background.jpg') no-repeat center center;
+  background: url('@public/background1.jpg') no-repeat center center;
   background-size: cover;
 }
 
-.login-box {
+.login-container {
-  background: white;
+  max-width: 400px;
-  padding: 2rem;
+  width: 100%;
-  border-radius: 8px;
+  padding: 30px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ebeef5;
-  text-align: center;
+  border-radius: 10px;
-  width: 20%;
+  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
-h2 {
+h1 {
-  margin-bottom: 1rem;
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 24px;
+  color: #333;
 }
 
 .el-form-item {
-  margin-bottom: 1rem;
+  margin-bottom: 20px;
-  text-align: left;
 }
 
-.el-form-item label {
+.short-input {
-  display: block;
+  width: 80%;
-  margin-bottom: 0.5rem;
-}
-
-.el-input {
-  width: 100%;
 }
 
 .el-button {
-  width: 100%;
+  margin-right: 10px;
-  padding: 0.75rem;
 }
-
+</style>
-.el-button--primary {
-  background-color: #007bff;
-  color: white;
-}
-
-.el-button--primary:hover {
-  background-color: #0056b3;
-}
-</style>

src/views/authentication/ManageProfile.vue

@@ -1,219 +0,0 @@
-<script setup>
-import {onMounted, ref} from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
-import 'element-plus/dist/index.css';
-import axios from "axios";
-import {useStore} from 'vuex';
-import {useRouter} from 'vue-router';
-
-const store = useStore();
-const router = useRouter();
-
-const token = store.getters['authentication/token'];
-const nickname = ref('');
-const phoneNumber = ref('');
-const email = ref('');
-const gender = ref('');
-const department = ref('');
-const role = ref('');
-const currentPassword = ref('');
-const newPassword = ref('');
-const confirmPassword = ref('');
-
-onMounted(
-    async () => {
-      try {
-        // 从Vuex中获取JWT token
-        if (!token) {
-          store.commit('authentication/logout');
-          router.push('/login');
-        }
-
-        // 发送请求并附带token参数
-        const response = await axios.get(`/api/userProfile?token=${token}`);
-
-        if (response.status === 200) {
-          const user = response.data;
-          nickname.value = user.nickname;
-          phoneNumber.value = user.phoneNumber;
-          email.value = user.email;
-          gender.value = user.gender;
-          department.value = user.department;
-          role.value = user.role;
-        } else {
-          ElMessage.error('获取用户信息失败，请重试');
-        }
-      } catch (error) {
-        console.error('Error fetching user profile:', error);
-        ElMessage.error('获取用户信息失败，请重试');
-      }
-    }
-)
-
-const handleSaveProfile = async () => {
-  console.log('Saving profile with', {
-    nickname: nickname.value,
-    phoneNumber: phoneNumber.value,
-    email: email.value,
-    gender: gender.value,
-    department: department.value,
-    role: role.value
-  });
-  // 处理保存资料逻辑
-  try {
-    const response = await axios.post('/api/manageUserProfile', {
-      token: token,
-      nickname: nickname.value,
-      phoneNumber: phoneNumber.value,
-      email: email.value,
-      gender: gender.value,
-      department: department.value,
-      role: role.value
-    });
-    if (response.status === 200) {
-      ElMessage.success('资料保存成功');
-    } else {
-      ElMessage.error('保存用户信息失败，请重试');
-    }
-  } catch (error) {
-    console.info('Error saving user profile:', error);
-    ElMessage.error('保存用户信息失败，请重试');
-  }
-
-};
-
-const handleChangePassword = async () => {
-  if (newPassword.value !== confirmPassword.value) {
-    ElMessage.error('新密码和确认密码不一致');
-    return;
-  }
-  // console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
-  // 处理修改密码逻辑
-  try {
-    const response = await axios.post('/api/changePassword', {
-      token: token,
-      currentPassword: currentPassword.value,
-      newPassword: newPassword.value
-    });
-    if (response.status === 200) {
-      ElMessage.success('密码修改成功，请重新登录');
-      store.commit('authentication/logout');
-      router.push('/login');
-    } else {
-      ElMessage.error('修改密码失败，请重试');
-    }
-  } catch (error) {
-    console.info('Error changing password:', error);
-    ElMessage.error('修改密码失败，请重试');
-  }
-};
-</script>
-
-<template>
-  <div class="profile-container">
-    <div class="profile-box">
-      <h2>基本资料</h2>
-      <ElTabs>
-        <ElTabPane label="基本资料">
-          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
-            <ElFormItem label="用户昵称">
-              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
-            </ElFormItem>
-            <ElFormItem label="手机号码">
-              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
-            </ElFormItem>
-            <ElFormItem label="邮箱">
-              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
-            </ElFormItem>
-            <ElFormItem label="性别">
-              <ElRadioGroup v-model="gender">
-                <ElRadio label="男">男</ElRadio>
-                <ElRadio label="女">女</ElRadio>
-              </ElRadioGroup>
-            </ElFormItem>
-            <ElFormItem label="部门">
-              <ElInput v-model="department" type="text" placeholder="请输入部门" required/>
-            </ElFormItem>
-            <ElFormItem label="角色">
-              <ElInput v-model="role" type="text" placeholder="请输入角色" required/>
-            </ElFormItem>
-            <!--            <ElFormItem label="角色">-->
-            <!--              <ElSelect v-model="role" placeholder="请选择角色" required>-->
-            <!--                <ElOption label="管理员" value="admin"/>-->
-            <!--                <ElOption label="用户" value="user"/>-->
-            <!--              </ElSelect>-->
-            <!--            </ElFormItem>-->
-            <ElFormItem>
-              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
-              <ElButton type="danger">取消</ElButton>
-            </ElFormItem>
-          </ElForm>
-        </ElTabPane>
-        <ElTabPane label="修改密码">
-          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
-            <ElFormItem label="旧密码">
-              <ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
-            </ElFormItem>
-            <ElFormItem label="新密码">
-              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
-            </ElFormItem>
-            <ElFormItem label="确认密码">
-              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
-            </ElFormItem>
-            <ElFormItem>
-              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
-            </ElFormItem>
-          </ElForm>
-        </ElTabPane>
-      </ElTabs>
-      <ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
-    </div>
-  </div>
-</template>
-
-
-<style scoped>
-.profile-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background: white;
-}
-
-.profile-box {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 90%;
-  max-width: 600px;
-}
-
-h2 {
-  margin-bottom: 1rem;
-}
-
-.el-form-item {
-  margin-bottom: 1rem;
-  text-align: left;
-}
-
-.el-form-item label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.el-input {
-  width: 100%;
-}
-
-.el-button--primary {
-  background-color: #007bff;
-  color: white;
-}
-
-.el-button--primary:hover {
-  background-color: #0056b3;
-}
-</style>

src/views/authentication/Profile.vue

@@ -1,144 +1,251 @@
-<script setup>
-import {onMounted, ref} from 'vue';
-import 'element-plus/dist/index.css';
-import {useStore} from 'vuex';
-import axios from "axios";
-import {ElButton, ElMessage} from "element-plus";
-import {useRouter} from 'vue-router';
-
-const store = useStore();
-const router = useRouter();
-
-const nickname = ref('');
-const phoneNumber = ref('');
-const email = ref('');
-const department = ref('');
-const role = ref('');
-const createdAt = ref('');
-
-onMounted(async () => {
-  try {
-    // 从Vuex中获取JWT token
-    const token = store.getters['authentication/token'];
-    if (!token) {
-      store.commit('authentication/logout');
-      router.push('/login');
-    }
-
-    // 发送请求并附带token参数
-    const response = await axios.get(`/api/userProfile?token=${token}`);
-
-    if (response.status === 200) {
-      const user = response.data;
-      nickname.value = user.nickname;
-      phoneNumber.value = user.phoneNumber;
-      email.value = user.email;
-      department.value = user.department;
-      role.value = user.role;
-      createdAt.value = user.createdAt;
-    } else {
-      ElMessage.error("获取用户信息失败，请重试");
-    }
-  } catch (error) {
-    console.error('Error fetching user profile:', error);
-    ElMessage.error("获取用户信息失败，请重试");
-  }
-});
-</script>
-
-
 <template>
-  <div class="profile-container">
+  <div class="profile-wrapper">
-    <div class="profile-box">
+    <div class="profile-container">
-      <h2>个人信息</h2>
+      <el-button type="danger" @click="confirmLogout" class="logout-button">注销</el-button>
-      <div class="profile-image">
+      <el-tabs v-model="activeTab">
-        <img src="@assets/avatar.jpg" alt="Profile Image"/>
+        <el-tab-pane label="用户信息" name="userInformation"></el-tab-pane>
+        <el-tab-pane label="信息修改" name="profile"></el-tab-pane>
+        <el-tab-pane label="更改密码" name="changePassword"></el-tab-pane>
+      </el-tabs>
+
+      <div v-if="activeTab === 'userInformation'" class="user-information">
+        <h2>用户信息</h2>
+        <div class="user-info">
+          <div class="user-details">
+            <p>用户名: {{ user.username }}</p>
+            <p>电子邮箱: {{ user.email }}</p>
+            <p>电话号码: {{ user.phoneNumber }}</p>
+            <p>所属企业: {{ user.company }}</p>
+            <p>创建日期: {{ user.createdDate }}</p>
+          </div>
+          <div class="user-avatar">
+            <img src='@assets/avatar.jpg' alt="用户头像" />
+          </div>
+        </div>
       </div>
-      <div class="profile-info">
+
-        <div class="divider"></div>
+      <div v-if="activeTab === 'profile'" class="centered-content">
-        <div class="info-item">
+        <h2>信息修改</h2>
-          <span class="info-label">用户昵称：</span>
+        <el-form @submit.prevent="updateProfile" label-width="120px" class="centered-form profile-form">
-          <span class="info-value">{{ nickname }}</span>
+          <el-form-item label="用户名：">
-        </div>
+            <el-input v-model="user.username" id="username" class="short-input" disabled />
-        <div class="divider"></div>
+          </el-form-item>
-        <div class="info-item">
+          <el-form-item label="电子邮箱：">
-          <span class="info-label">手机号码：</span>
+            <el-input v-model="user.email" id="email" class="short-input" />
-          <span class="info-value">{{ phoneNumber }}</span>
+          </el-form-item>
-        </div>
+          <el-form-item label="电话号码：">
-        <div class="divider"></div>
+            <el-input v-model="user.phoneNumber" id="phoneNumber" class="short-input" />
-        <div class="info-item">
+          </el-form-item>
-          <span class="info-label">用户邮箱：</span>
+          <el-form-item label="所属企业：">
-          <span class="info-value">{{ email }}</span>
+            <el-input v-model="user.company" id="company" class="short-input" />
-        </div>
+          </el-form-item>
-        <div class="divider"></div>
+          <el-form-item>
-        <div class="info-item">
+            <el-button type="primary" native-type="submit">更新</el-button>
-          <span class="info-label">所属部门：</span>
+          </el-form-item>
-          <span class="info-value">{{ department }}</span>
+        </el-form>
-        </div>
+      </div>
-        <div class="divider"></div>
+
-        <div class="info-item">
+      <div v-if="activeTab === 'changePassword'" class="centered-content">
-          <span class="info-label">所属角色：</span>
+        <h2>更改密码</h2>
-          <span class="info-value">{{ role }}</span>
+        <el-form @submit.prevent="changePassword" label-width="120px" class="centered-form password-form">
-        </div>
+          <el-form-item label="旧密码：">
-        <div class="divider"></div>
+            <el-input v-model="passwords.oldPassword" :type="showOldPassword ? 'text' : 'password'" class="short-password-input" />
-        <div class="info-item">
+            <el-button @click="togglePasswordVisibility('oldPassword')">{{ showOldPassword ? '隐藏' : '显示' }}</el-button>
-          <span class="info-label">创建日期：</span>
+          </el-form-item>
-          <span class="info-value">{{ createdAt }}</span>
+          <el-form-item label="新密码：">
-        </div>
+            <el-input v-model="passwords.newPassword" :type="showNewPassword ? 'text' : 'password'" class="short-password-input" />
-        <div class="divider"></div>
+            <el-button @click="togglePasswordVisibility('newPassword')">{{ showNewPassword ? '隐藏' : '显示' }}</el-button>
+          </el-form-item>
+          <el-form-item label="再次确认：">
+            <el-input v-model="passwords.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'" class="short-password-input" />
+            <el-button @click="togglePasswordVisibility('confirmPassword')">{{ showConfirmPassword ? '隐藏' : '显示' }}</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" native-type="submit">更改</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <ElButton type="text" @click="() => $router.push('/manageProfile')">修改信息</ElButton>
     </div>
   </div>
 </template>
 
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';  // 导入 ElMessageBox
+import AuthenticationService from '../../services/authenticationService';
+
+const store = useStore();
+const router = useRouter();
+const activeTab = ref('userInformation');
+
+const user = ref({
+  id: null,
+  username: '',
+  email: '',
+  phoneNumber: '',
+  company: '',
+  createdDate: ''
+});
+
+const passwords = ref({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+});
+
+const showOldPassword = ref(false);
+const showNewPassword = ref(false);
+const showConfirmPassword = ref(false);
+
+const token = store.getters['authentication/token'];
+
+const fetchUserInfo = async () => {
+  try {
+    const response = await AuthenticationService.getUserInfo(token);
+    user.value = response.data;
+  } catch (error) {
+    console.error("获取用户信息错误:", error);
+  }
+};
+
+const updateProfile = async () => {
+  try {
+    await AuthenticationService.updateUserInfo(user.value);
+    ElMessage.success('个人信息更新成功');
+    await fetchUserInfo();
+  } catch (error) {
+    console.error("更新个人信息错误:", error);
+    ElMessage.error('更新个人信息失败');
+  }
+};
+
+const changePassword = async () => {
+  if (passwords.value.newPassword !== passwords.value.confirmPassword) {
+    ElMessage.error('新密码和确认密码不一致');
+    return;
+  }
+  try {
+    await AuthenticationService.changePassword({
+      username: user.value.username,
+      oldPassword: passwords.value.oldPassword,
+      newPassword: passwords.value.newPassword
+    });
+    ElMessage.success('密码更改成功');
+  } catch (error) {
+    console.error("更改密码错误:", error);
+    ElMessage.error('旧密码错误');
+  }
+};
+
+const togglePasswordVisibility = (field) => {
+  if (field === 'oldPassword') {
+    showOldPassword.value = !showOldPassword.value;
+  } else if (field === 'newPassword') {
+    showNewPassword.value = !showNewPassword.value;
+  } else if (field === 'confirmPassword') {
+    showConfirmPassword.value = !showConfirmPassword.value;
+  }
+};
+
+const confirmLogout = () => {
+  ElMessageBox.confirm('是否确认注销?', '注销确认', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(logout).catch(() => {});
+};
+
+const logout = () => {
+  store.commit('authentication/logout');
+  router.push('/login');
+};
+
+onMounted(() => {
+  fetchUserInfo();
+});
+</script>
+
 <style scoped>
+.profile-wrapper {
+display: flex;
+align-items: center;
+justify-content: center;
+height: 100vh;
+background-image: url('@public/background2.jpg');
+background-size: cover;
+background-position: center;
+}
+
 .profile-container {
-  display: flex;
+max-width: 600px;
-  justify-content: center;
+width: 100%;
-  align-items: center;
+padding: 20px;
-  height: 100vh;
+background-color: #fff;
-  background: white;
+border-radius: 8px;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+position: relative;
 }
 
-.profile-box {
+h1, h2 {
-  background: white;
+text-align: center;
-  padding: 2rem;
+margin-bottom: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 30%;
-  max-width: 300px;
-  text-align: center;
 }
 
-.profile-image img {
+.profile-form, .password-form {
-  width: 100px;
+margin-bottom: 30px;
-  height: 100px;
-  border-radius: 50%;
-  margin-bottom: 1rem;
 }
 
-.profile-info {
+.centered-content {
-  text-align: left;
+display: flex;
+flex-direction: column;
+align-items: center;
 }
 
-.info-item {
+.centered-form {
-  display: flex;
+width: 100%;
-  justify-content: space-between;
+max-width: 400px;
-  margin-bottom: 0.5rem;
 }
 
-.info-label {
+.user-info {
-  font-weight: bold;
+display: flex;
+justify-content: space-between;
+align-items: center;
+padding: 20px 20px 20px 80px;
+border-top: 1px solid #ebeef5;
+margin-top: 20px;
 }
 
-.info-value {
+.user-details {
-  color: #555;
+flex: 1;
+padding-right: 20px;
 }
 
-.divider {
+.user-avatar {
-  height: 1px;
+padding-right: 50px;
-  background: #e0e0e0;
-  margin: 0.5rem 0;
 }
-</style>
+
+.user-avatar img {
+width: 150px;
+height: 150px;
+border-radius: 50%;
+object-fit: cover;
+}
+
+.short-input {
+width: 90%;
+}
+
+.short-password-input {
+width: 80%;
+}
+
+.logout-button {
+position: absolute;
+top: 10px;
+right: 10px;
+z-index: 1000;
+padding: 10px 20px;
+}
+</style>

src/views/authentication/Register.vue

@@ -1,161 +1,189 @@
+<template>
+  <el-container class="register-container">
+    <el-main class="register-main">
+      <el-card class="register-card">
+        <el-header>
+          <h2>注册</h2>
+        </el-header>
+        <el-form @submit.prevent="register" label-position="top" class="register-form">
+          <el-form-item label="用户名" required>
+            <el-input class="form-input" type="text" v-model="username"></el-input>
+          </el-form-item>
+          <el-form-item label="密码" required>
+            <el-input class="form-input" type="password" v-model="password"></el-input>
+          </el-form-item>
+          <el-form-item label="电子邮箱" required>
+            <el-input class="form-input" type="email" v-model="email"></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码" required>
+            <el-input class="form-input" type="text" v-model="phoneNumber"></el-input>
+          </el-form-item>
+          <el-form-item label="所属企业" required>
+            <el-input class="form-input" type="text" v-model="company"></el-input>
+          </el-form-item>
+          <el-form-item label="选择身份">
+            <el-select class="form-input" v-model="role" placeholder="选择身份">
+              <el-option label="租户" value="USER"></el-option>
+              <el-option label="管理员" value="ADMIN"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="请输入验证码" required>
+            <el-input class="form-input" type="text" v-model="verificationCode"></el-input>
+            <el-button class="verification-button" type="primary" @click="getVerificationCode">获取验证码</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" native-type="submit">注册</el-button>
+            <el-button type="default" @click="goToLogin">返回</el-button>
+          </el-form-item>
+        </el-form>
+        <el-alert v-if="message" type="info" :closable="false">{{ message }}</el-alert>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
+
 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
-import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox} from 'element-plus';
+import { useRouter } from 'vue-router';
-import 'element-plus/dist/index.css';
+import { ElMessage } from 'element-plus';
-import axios from 'axios';
+import authenticationService from '../../services/authenticationService';
-import {useRouter} from 'vue-router';
 
 const username = ref('');
-const phoneNumber = ref('');
 const password = ref('');
+const email = ref('');
+const phoneNumber = ref('');
+const company = ref('');
+const role = ref('USER');
 const verificationCode = ref('');
-const correctCode = ref('');
+const message = ref('');
 const router = useRouter();
-const verificationCodeImage = ref('');
-
-const handleRegister = async () => {
-  console.log('Registering with', {
-    username: username.value,
-    phoneNumber: phoneNumber.value,
-    password: password.value,
-    verificationCode: verificationCode.value
-  });
-  if (verificationCode.value!==correctCode.value){
-    await ElMessageBox.alert("验证码错误");
-    return
-  }
-
-  try {
-    const response = await axios.post('/api/register', {
-      username: username.value,
-      phoneNumber: phoneNumber.value,
-      password: password.value,
-      verificationCode: verificationCode.value,
-    });
-
-    if (response.status === 200) {
-      ElMessage.success(response.data.message);
-      router.push('/login');
-    } else {
-      await ElMessageBox.alert(response.data.message);
-    }
-  } catch (error) {
-    await ElMessageBox.alert(error.response.data.message || '注册失败，请稍后再试');
-  }
-};
 
 const getVerificationCode = async () => {
-  try {
+  // 模拟获取验证码
-    const response = await axios.get('/api/getVerificationCode');
+  message.value = '验证码已发送。请检查您的邮箱/短信。';
+};
 
-    if (response.status === 200) {
+const register = async () => {
-      verificationCodeImage.value = '/api/'+response.data.path; // 更新验证码图片路径
+  if (!username.value) {
-      correctCode.value = response.data.code;
+    ElMessage.error('用户名不能为空！');
-      ElMessage.success('验证码已获取');
+    return;
-    } else {
+  }
-      ElMessage.error('获取验证码失败，请稍后再试');
+  if (!password.value) {
-    }
+    ElMessage.error('密码不能为空！');
+    return;
+  }
+  if (!email.value) {
+    ElMessage.error('电子邮箱不能为空！');
+    return;
+  }
+  if (!phoneNumber.value) {
+    ElMessage.error('电话号码不能为空！');
+    return;
+  }
+  if (!company.value) {
+    ElMessage.error('所属企业不能为空！');
+    return;
+  }
+  if (!verificationCode.value) {
+    ElMessage.error('验证码不能为空！');
+    return;
+  }
+  try {
+    const response = await authenticationService.register({
+      username: username.value,
+      password: password.value,
+      email: email.value,
+      phoneNumber: phoneNumber.value,
+      company: company.value,
+      role: role.value
+    });
+    message.value = response.data.message;
+    router.push('/login');
   } catch (error) {
-    ElMessage.error('获取验证码失败，请稍后再试');
+    console.error("注册失败:", error.response.data.message);
+    message.value = error.response.data.message;
   }
 };
-</script>
 
-<template>
+const goToLogin = () => {
-  <div class="register-container">
+  router.push('/login');
-    <div class="register-box">
+};
-      <h2>企业租户注册</h2>
+</script>
-      <ElForm @submit.prevent="handleRegister">
-        <ElFormItem>
-          <label for="userName">用户名称</label>
-          <ElInput v-model="username" type="text" id="userName" placeholder="请输入企业名称" required/>
-        </ElFormItem>
-        <ElFormItem>
-          <label for="phoneNumber">手机号码</label>
-          <ElInput v-model="phoneNumber" type="text" id="phoneNumber" placeholder="请输入企业联系方式" required/>
-        </ElFormItem>
-        <ElFormItem>
-          <label for="password">密码</label>
-          <ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required/>
-        </ElFormItem>
-        <ElFormItem>
-          <label for="verificationCode">验证码</label>
-          <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
-            <template #append>
-              <ElButton type="primary" @click="getVerificationCode" class="verification-button">获取验证码</ElButton>
-            </template>
-          </ElInput>
-        </ElFormItem>
-        <ElFormItem v-if="verificationCodeImage">
-          <img :src="verificationCodeImage" alt="验证码" />
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
-        </ElFormItem>
-        <ElFormItem>
-          <ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
-        </ElFormItem>
-      </ElForm>
-    </div>
-  </div>
-</template>
 
 <style scoped>
 .register-container {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: 100vh;
-  background: url('background.jpg') no-repeat center center;
+  background-image: url('@public/background1.jpg');
   background-size: cover;
+  background-position: center;
+  padding: 20px;
 }
 
-.register-box {
+.register-main {
-  background: white;
+  display: flex;
-  padding: 2rem;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.register-card {
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: white;
-  text-align: center;
+  width: 100%;
-  width: 20%;
+  max-width: 350px; /* 调整卡片的宽度 */
+  overflow: hidden;
 }
 
-h2 {
+.register-form {
-  margin-bottom: 1rem;
+  width: 100%;
+  max-height: 400px;
+  overflow-y: auto; /* 使表单内容可滚动 */
 }
 
 .el-form-item {
-  margin-bottom: 1rem;
+  margin-bottom: 15px; /* 调整表单项之间的间距 */
-  text-align: left;
 }
 
-.el-form-item label {
+.el-header h2 {
-  display: block;
+  text-align: center;
-  margin-bottom: 0.5rem;
+  margin: 0 0 20px;
 }
 
-.el-input {
+.form-input {
-  width: 100%;
+  width: calc(100% - 12px); /* 调整输入框的宽度，与滚动条保持距离 */
+  padding-right: 12px; /* 增加右侧内边距 */
+  box-sizing: border-box; /* 确保宽度包含内边距 */
 }
 
 .verification-button {
-  width: 120px; /* 确保按钮宽度合适 */
+  margin-top: 10px; /* 调整验证码按钮上方的间距 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0; /* 去除默认内边距 */
 }
 
-.el-button {
+.el-alert {
-  width: 100%;
+  margin-top: 20px;
-  padding: 0.75rem;
 }
 
-.el-button--primary {
+/* 自定义滚动条样式 */
-  background-color: #007bff;
+.register-form::-webkit-scrollbar {
-  color: white;
+  width: 8px; /* 滚动条宽度 */
 }
 
-.el-button--primary:hover {
+.register-form::-webkit-scrollbar-track {
-  background-color: #0056b3;
+  background: #f1f1f1; /* 滚动条轨道颜色 */
+  border-radius: 10px;
 }
-</style>
+
+.register-form::-webkit-scrollbar-thumb {
+  background: #888; /* 滚动条滑块颜色 */
+  border-radius: 10px;
+}
+
+.register-form::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条滑块在悬停时的颜色 */
+}
+</style>

src/views/course-management/BackgroundWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="background-wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.background-wrapper {
+  background: url('@public/background2.jpg') no-repeat center center fixed;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/course-management/Course.vue

@@ -0,0 +1,425 @@
+<script setup>
+import {onMounted, ref, computed} from 'vue';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElUpload
+} from 'element-plus';
+
+import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
+import {useRoute, useRouter} from "vue-router";
+import {useStore} from "vuex";
+import axios from "axios";
+import BackgroundWrapper from './BackgroundWrapper.vue';  // 导入 BackgroundWrapper
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const token = ref('')
+const form = ref({
+  token: '',
+  title: '',
+  description: '',
+  orderNo: '',
+  author: '',
+  videoPath: '',
+  imagePath: ''
+});
+const createMode = ref(false);
+const modeTitle = ref('');
+
+const videoFileList = ref([]); // 用于存储上传视频文件的列表
+const imageFileList = ref([]); // 用于存储上传图片文件的列表
+const basePath = '/api/courses'
+const videoUploadUrl = basePath + '/upload'; // 上传视频的后端地址
+const imageUploadUrl = videoUploadUrl; // 上传图片的后端地址
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);  // 用于图片放大预览
+
+//下面是编辑模式需要的一些变量
+const id = ref('');
+
+const beforeVideoUpload = (file) => {
+  const isMp4 = file.type === 'video/mp4';
+  if (!isMp4) {
+    ElMessage.error('只能上传 mp4 格式的视频文件！');
+    return false;
+  }
+
+  const isLt500M = file.size / 1024 / 1024 < 500;
+  if (!isLt500M) {
+    ElMessage.error('上传视频大小不能超过 500MB！');
+    return false;
+  }
+
+  return true;
+};
+
+const beforeImageUpload = (file) => {
+  const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
+  if (!isImage) {
+    ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件！');
+    return false;
+  }
+
+  const isLt5M = file.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('上传文件大小不能超过 5MB！');
+    return false;
+  }
+
+  return true;
+};
+
+const handleVideoSuccess = (response, file, fileList) => {
+  file.url = response.url;
+  form.value.videoPath = response.url; // 确保设置到表单中
+};
+
+const handleImageSuccess = (response, file, fileList) => {
+  file.url = response.url;
+  form.value.imagePath = response.url; // 确保设置到表单中
+};
+
+const handleVideoError = (error, file, fileList) => {
+  ElMessage.error('视频上传失败，请重试！');
+};
+
+const handleImageError = (error, file, fileList) => {
+  ElMessage.error('图片上传失败，请重试！');
+};
+
+const handleVideoChange = (file, fileList) => {
+  if (fileList.length > 1) {
+    fileList.splice(0, fileList.length - 1)
+  }
+};
+
+const handleImageChange = (file, fileList) => {
+  if (fileList.length > 1) {
+    fileList.splice(0, fileList.length - 1)
+  }
+};
+
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+const handleRemoveImage = (file) => {
+  imageFileList.value = imageFileList.value.filter((item) => item.uid !== file.uid);
+}
+
+const handleRemoveVideo = (file) => {
+  videoFileList.value = videoFileList.value.filter((item) => item.uid !== file.uid);
+}
+
+const handleCommit = async () => {
+  if (form.value.title === '' || form.value.description === '' || form.value.orderNo === '' || form.value.author === '') {
+    await ElMessageBox.alert('请填写完整信息！');
+    return;
+  }
+  if (isNaN(form.value.orderNo)) {
+    await ElMessageBox.alert('排序必须是一个数字！');
+    return;
+  }
+  if (imageFileList.value.length === 0 || videoFileList.value.length === 0) {
+    await ElMessageBox.alert('请选择封面图片和课程视频！');
+    return;
+  }
+  form.value.imagePath = imageFileList.value[0].url;
+  form.value.videoPath = videoFileList.value[0].url;
+  if (createMode.value) {
+    try {
+      const response = await axios.post(basePath, form.value);
+      ElMessage.success('添加成功！');
+      router.push('/courseList');
+    } catch (e) {
+      await ElMessageBox.alert(e.response.data.message);
+    }
+  } else {
+    try {
+      const response = await axios.put(`${basePath}/${id.value}`, form.value);
+      ElMessage.success('修改成功！');
+      router.push('/courseList');
+    } catch (e) {
+      await ElMessageBox.alert(e.response.data.message);
+    }
+
+  }
+};
+
+const isLayoutReady = ref(false);
+
+const fetchCourseDetail = async () => {
+  let params = {
+    token: token.value,
+  }
+  const res = await axios.get(basePath + '/' + id.value, {params});
+  form.value.title = res.data.title;
+  form.value.description = res.data.description;
+  form.value.orderNo = res.data.orderNo;
+  form.value.author = res.data.author;
+  form.value.videoPath = res.data.videoPath;
+  form.value.imagePath = res.data.imagePath;
+  imageFileList.value.push({url: res.data.imagePath});
+  videoFileList.value.push({url: res.data.videoPath});
+}
+
+const orderNo = computed({
+  get() {
+    return form.value.orderNo;
+  },
+  set(value) {
+    form.value.orderNo = value.replace(/\D/g, ''); // 只保留数字
+  }
+});
+
+onMounted(() => {
+  token.value = store.getters['authentication/token'];
+  form.value.token = token.value;
+  if (route.query.mode === 'create' || route.params.mode === 'create') {
+    createMode.value = true;
+    modeTitle.value = '添加课程';
+  }
+  if (route.query.mode === 'edit' || route.params.mode === 'edit') {
+    id.value = route.params.id === undefined ? route.query.id : route.params.id;
+    createMode.value = false;
+    modeTitle.value = '修改课程';
+    fetchCourseDetail();
+  }
+
+});
+</script>
+
+<template>
+  <BackgroundWrapper class="background-wrapper">
+    <div class="form-container">
+      <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
+        <h2>{{ modeTitle }}</h2>
+        <ElFormItem label="课程名称" required>
+          <ElInput v-model="form.title" placeholder="请输入课程名称" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="课程封面" required>
+          <el-upload
+              :action="imageUploadUrl"
+              :limit="2"
+              :before-upload="beforeImageUpload"
+              :on-success="handleImageSuccess"
+              :on-error="handleImageError"
+              :on-change="handleImageChange"
+              :file-list="imageFileList"
+              list-type="picture-card"
+              auto-upload
+              v-model:file-list="imageFileList"
+          >
+            <template #file="{ file }">
+              <div>
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+                <span class="el-upload-list__item-actions">
+          <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+          >
+            <el-icon><zoom-in/></el-icon>
+          </span>
+          <span
+              class="el-upload-list__item-delete"
+              @click="handleRemoveImage(file)"
+          >
+            <el-icon><Delete/></el-icon>
+          </span>
+        </span>
+              </div>
+            </template>
+            <el-icon v-if="imageFileList.length === 0">
+              <Plus/>
+            </el-icon>
+            <el-icon v-else>
+              <Refresh/>
+            </el-icon>
+          </el-upload>
+          <div class="tip">
+            请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
+          </div>
+        </ElFormItem>
+        <ElFormItem label="课程视频" required>
+          <el-upload
+              :action="videoUploadUrl"
+              :limit="2"
+              :before-upload="beforeVideoUpload"
+              :on-success="handleVideoSuccess"
+              :on-error="handleVideoError"
+              :on-change="handleVideoChange"
+              :file-list="videoFileList"
+              list-type="picture-card"
+              auto-upload
+              v-model:file-list="videoFileList"
+          >
+            <template #file="{ file }">
+              <div>
+                <video class="el-upload-list__item-thumbnail" :src="file.url" controls></video>
+                <span class="el-upload-list__item-actions">
+          <span
+              class="el-upload-list__item-delete"
+              @click="handleRemoveVideo(file)"
+          >
+            <el-icon><Delete/></el-icon>
+          </span>
+        </span>
+              </div>
+            </template>
+            <el-icon v-if="videoFileList.length === 0">
+              <Plus/>
+            </el-icon>
+            <el-icon v-else>
+              <Refresh/>
+            </el-icon>
+          </el-upload>
+          <div class="tip">
+            请上传大小不超过 <span style="color: red;">500MB</span> 格式为 <span style="color: red;">mp4</span> 的文件
+          </div>
+        </ElFormItem>
+        <ElFormItem label="课程简介" required>
+          <ElInput v-model="form.description" placeholder="请输入课程简介" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="课程排序" required>
+          <ElInput v-model="orderNo" placeholder="请输入课程排序（数字）" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="作者" required>
+          <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit">确定</ElButton>
+          <ElButton @click="router.push('/courseList')">取消</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+
+    <el-dialog v-model="dialogVisible" class="image-preview">
+      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
+    </el-dialog>
+  </BackgroundWrapper>
+</template>
+
+<style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.background-wrapper {
+  position: fixed;  /* 确保背景覆盖整个视口 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* 只在内容溢出时允许滚动 */
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #007bff #f0f0f0;
+}
+
+/* 针对 Webkit 浏览器的自定义滚动条 */
+.background-wrapper::-webkit-scrollbar {
+  width: 8px;
+}
+
+.background-wrapper::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 10px;
+}
+
+.background-wrapper::-webkit-scrollbar-thumb {
+  background-color: #007bff;
+  border-radius: 10px;
+  border: 3px solid #f0f0f0;
+}
+
+.form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
+}
+
+.image-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-preview img {
+  max-width: 100%;
+  height: auto;
+}
+
+.tip {
+  margin-top: 8px;
+  color: #727272;
+  font-size: 12px;
+}
+
+.el-form {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 65%;  /* 增加宽度 */
+  max-height: 90vh; /* 确保表单不会超过视口高度 */
+  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #007bff #f0f0f0;
+}
+
+/* 针对 Webkit 浏览器的自定义滚动条 */
+.el-form::-webkit-scrollbar {
+  width: 8px;
+}
+
+.el-form::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 10px;
+}
+
+.el-form::-webkit-scrollbar-thumb {
+  background-color: #007bff;
+  border-radius: 10px;
+  border: 3px solid #f0f0f0;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input,
+.el-select {
+  width: calc(100% - 12px);  /* 设置文本框宽度，使其与滚动条保持一定距离 */
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+
+.dynamic-width-select {
+  min-width: 30%;
+  max-width: 100%;
+  width: auto; /* 使宽度根据内容调整 */
+}
+</style>

src/views/course-management/CourseList.vue

@@ -0,0 +1,333 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElPagination, ElTable, ElTableColumn } from 'element-plus';
+import axios from "axios";
+import { useStore } from "vuex";
+import { useRouter } from "vue-router";
+import Course from "@views/course-management/Course.vue";
+import BackgroundWrapper from './BackgroundWrapper.vue';
+import _ from 'lodash';
+import { write, utils } from 'xlsx';
+import { saveAs } from 'file-saver';
+
+const router = useRouter();
+const store = useStore();
+const token = store.getters['authentication/token'];
+
+const searchTitle = ref('');
+const searchAuthor = ref('');
+const searchDescription = ref('');
+const sortOrder = ref('');
+
+const allCoursesData = ref([]);
+const coursesData = ref([]);
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const coursesCount = ref(0);
+const firstTimeLoad = ref(true);
+
+const selections = ref([]);
+
+const loadCourses = async (forceReload = false) => {
+  if (forceReload) {
+    firstTimeLoad.value = true;
+    allCoursesData.value = [];
+  }
+
+  if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize.value) && (currentPage.value * pageSize.value) <= coursesCount.value) {
+    let params = {
+      token: token,
+      start: allCoursesData.value.length,
+      end: allCoursesData.value.length + pageSize.value * 2
+    };
+    try {
+      const response = await axios.get('/api/courses', { params });
+      const data = response.data;
+      coursesCount.value = data.courseCount;
+      allCoursesData.value.push(...data.courseList);
+    } catch (e) {
+      console.log(e);
+    }
+    firstTimeLoad.value = false;
+  }
+  coursesData.value = allCoursesData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+};
+
+onMounted(() => {
+  loadCourses();
+});
+
+const handleSearch = async () => {
+  try {
+    const response = await axios.get('/api/courses/search', {
+      params: {
+        token: token,
+        title: searchTitle.value || '',
+        author: searchAuthor.value || '',
+        description: searchDescription.value || '',
+        sortOrder: sortOrder.value || '',
+        start: 0,
+        end: pageSize.value
+      }
+    });
+    const data = response.data;
+    coursesCount.value = data.courseCount;
+    allCoursesData.value = data.courseList;
+    coursesData.value = allCoursesData.value.slice(0, pageSize.value);
+    currentPage.value = 1;
+    firstTimeLoad.value = false;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleReset = async () => {
+  searchTitle.value = '';
+  searchAuthor.value = '';
+  searchDescription.value = '';
+  sortOrder.value = '';
+  await loadCourses(true);  // 强制重新加载课程数据
+};
+
+const handleSort = async () => {
+  // 将所有课程的排序字段转换成数值
+  const sortedCourses = _.cloneDeep(allCoursesData.value).map(course => ({
+    ...course,
+    orderNo: Number(course.orderNo)
+  })).sort((a, b) => a.orderNo - b.orderNo);
+
+  // 更新所有课程的数据
+  allCoursesData.value = sortedCourses;
+
+  // 计算当前分页的数据
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  coursesData.value = allCoursesData.value.slice(start, end);
+};
+
+const handleExport = () => {
+  // 创建一个新的工作簿
+  const workbook = utils.book_new();
+
+  // 创建工作表数据，提取 allCoursesData
+  const sheetData = allCoursesData.value.map(course => ({
+    '课程名称': course.title,
+    '作者': course.author,
+    '课程简介': course.description,
+    '排序': course.orderNo
+  }));
+
+  // 将数据放入工作表
+  const worksheet = utils.json_to_sheet(sheetData);
+
+  // 将工作表添加到工作簿中
+  utils.book_append_sheet(workbook, worksheet, 'Courses');
+
+  // 生成 Excel 文件
+  const wbout = write(workbook, { bookType: 'xlsx', type: 'array' });
+
+  // 使用 file-saver 保存文件
+  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '课程信息.xlsx');
+};
+
+const handleEditButton = () => {
+  if (selections.value.length === 1) {
+    // 只有一个课程被选中，导航到编辑页面
+    const selectedCourse = selections.value[0];
+    router.push({ name: 'Course', query: { mode: 'edit', id: selectedCourse.id } });
+  } else if (selections.value.length > 1) {
+    // 选中了多个课程，弹出提示
+    ElMessage.warning('无法同时修改多个目标');
+  } else {
+    // 没有选中任何课程，弹出提示
+    ElMessage.warning('请先选择要修改的课程');
+  }
+};
+
+const handleDeleteButton = async () => {
+  if (selections.value.length === 0) {
+    ElMessage.warning('请先选择要删除的课程');
+    return;
+  }
+
+  ElMessageBox.confirm(
+      '是否确认删除选中的课程？此操作不可撤销。',
+      '确认删除',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      const deletePromises = selections.value.map(selection =>
+          axios.delete(`/api/courses/${selection.id}`, { params: { token: token } })
+      );
+      await Promise.all(deletePromises);
+      ElMessage.success('删除成功');
+      selections.value = []; // 清空选中项
+      await loadCourses(true); // 强制重新加载课程数据
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除操作');
+  });
+};
+
+const handleSelectionChange = (newSelections) => {
+  selections.value = newSelections;
+};
+
+const handleEditInTable = (index) => {
+  router.push({ name: 'Course', query: { mode: 'edit', id: coursesData.value[index].id } });
+};
+
+const handleDeleteInTable = async (index) => {
+  ElMessageBox.confirm(
+      '是否确认删除该课程？此操作不可撤销。',
+      '确认删除',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      await axios.delete(`/api/courses/${coursesData.value[index].id}`, { params: { token: token } });
+      coursesData.value.splice(index, 1);
+      allCoursesData.value.splice(index, 1);
+      coursesCount.value--;
+      await loadCourses(true); // 强制重新加载课程数据
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除操作');
+  });
+};
+</script>
+
+<template>
+  <BackgroundWrapper class="background-wrapper">
+    <div class="center-wrapper">
+      <div class="container">
+        <div class="search-container">
+          <el-form inline>
+            <el-form-item label="课程名称">
+              <el-input v-model="searchTitle" placeholder="请输入课程名称" />
+            </el-form-item>
+            <el-form-item label="排序">
+              <el-input v-model="sortOrder" placeholder="请输入排序" />
+            </el-form-item>
+            <el-form-item label="作者">
+              <el-input v-model="searchAuthor" placeholder="请输入作者" />
+            </el-form-item>
+            <el-form-item label="课程简介">
+              <el-input v-model="searchDescription" placeholder="请输入简介" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="button-container">
+          <el-button type="success" @click="router.push('/course?mode=create')">新增</el-button>
+          <el-button type="warning" @click="handleEditButton">修改</el-button>
+          <el-button type="danger" @click="handleDeleteButton">删除</el-button>
+          <el-button type="info" @click="handleSort">排序</el-button>
+          <el-button type="primary" @click="handleExport">导出</el-button>
+        </div>
+
+        <el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column prop="orderNo" label="排序" align="center"></el-table-column>
+          <el-table-column prop="title" label="课程名称" align="center"></el-table-column>
+          <el-table-column prop="author" label="作者" align="center"></el-table-column>
+          <el-table-column prop="description" label="课程简介" align="center"></el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
+              <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-container">
+          <el-pagination
+              @size-change="pageSize = $event; loadCourses(true)"
+              @current-change="currentPage = $event; loadCourses(true)"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="coursesCount"
+              :page-sizes="[10, 20, 50, 100]"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </BackgroundWrapper>
+</template>
+
+<style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.background-wrapper {
+  position: fixed;  /* 确保背景覆盖整个视口 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* 只在内容溢出时允许滚动 */
+}
+
+.center-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  padding: 20px;
+  background: rgba(255, 255, 255, 0.8); /* 为了让内容清晰，可加上一层半透明白色背景 */
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 800px; /* 控制页面内容宽度 */
+  width: 100%;
+}
+
+.search-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.button-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.el-table {
+  margin-bottom: 10px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -10px;
+}
+</style>

src/views/news-management/EditNews.vue

@@ -1,594 +0,0 @@
-<script setup>
-import {onMounted, ref} from 'vue';
-import {
-  ElButton,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-  ElMessageBox,
-  ElOption,
-  ElSelect,
-  ElUpload
-} from 'element-plus';
-import {
-  AccessibilityHelp,
-  Alignment,
-  Autoformat,
-  AutoLink,
-  Autosave,
-  BalloonToolbar,
-  BlockQuote,
-  Bold,
-  ClassicEditor,
-  CodeBlock,
-  Essentials,
-  FindAndReplace,
-  GeneralHtmlSupport,
-  Heading,
-  HorizontalLine,
-  Indent,
-  IndentBlock,
-  Italic,
-  Link,
-  Paragraph,
-  SelectAll,
-  Style,
-  Table,
-  TableCaption,
-  TableCellProperties,
-  TableColumnResize,
-  TableProperties,
-  TableToolbar,
-  TextTransformation,
-  Undo
-} from 'ckeditor5';
-
-import translations from 'ckeditor5/translations/zh-cn.js';
-
-import 'ckeditor5/ckeditor5.css';
-import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
-import {useRoute, useRouter} from "vue-router";
-import {useStore} from "vuex";
-import axios from "axios";
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const token = ref('')
-const form = ref({
-  token: '',
-  title: '',
-  author: '',
-  content: '',
-  summary: '',
-  tenant: '',
-  imagePath: ''
-});
-const createMode = ref(false);
-const componentMode = ref(false);
-const modeTitle = ref('');
-
-const fileList = ref([]); // 用于存储上传文件的列表
-const basePath = '/api/news'
-const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
-const dialogImageUrl = ref('');
-const dialogVisible = ref(false);  // 用于图片放大预览
-const props = defineProps({
-  mode: {
-    type: String,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  }
-});
-const containerStyle = ref('form-container')
-
-const emit = defineEmits(['setNewsDialogInvisible']);
-const setNewsDialogInvisible = (changed) => {
-  emit('setNewsDialogInvisible', changed);
-};
-
-//下面是编辑模式需要的一些变量
-const id = ref('');
-
-const beforeUpload = (file) => {
-  // 检查文件类型是否为图片（png, jpg, jpeg）
-  const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
-  if (!isImage) {
-    ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件！');
-    return false;
-  }
-
-  // 检查文件大小是否超过 5MB
-  const isLt5M = file.size / 1024 / 1024 < 5;
-  if (!isLt5M) {
-    ElMessage.error('上传文件大小不能超过 5MB！');
-    return false;
-  }
-
-  return true;
-};
-
-const handleSuccess = (response, file, fileList) => {
-  file.url = response.url;
-};
-
-const handleError = (error, file, fileList) => {
-  ElMessage.error('图片上传失败，请重试！');
-};
-
-const handleChange = (file, fileList) => {
-  // 处理文件选择变化时的逻辑，确保只选择最新上传的文件
-  if (fileList.length > 1) {
-    fileList.splice(0, fileList.length - 1)
-  }
-};
-
-const handlePictureCardPreview = (file) => {
-  dialogImageUrl.value = file.url
-  dialogVisible.value = true
-}
-const handleRemove = (file) => {
-  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
-  console.log(file)
-}
-
-const handleCommit = async () => {
-  // 判断form中的每一个字段都不为空字符串且不为null
-  if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '') {
-    await ElMessageBox.alert('请填写完整信息！');
-    return;
-  }
-  if (fileList.value.length === 0) {
-    await ElMessageBox.alert('请选择图片！');
-    return;
-  }
-  form.value.imagePath = fileList.value[0].url;
-  if (createMode.value) {
-    try {
-      const response = await axios.post(basePath, form.value);
-      ElMessage.success('添加成功！');
-      if (componentMode){
-        setNewsDialogInvisible(true);
-      }
-      else{
-        router.push('/news');
-      }
-    } catch (e) {
-      await ElMessageBox.alert(e.response.data.message);
-    }
-  } else {
-    try {
-      const response = await axios.put(`${basePath}/${id.value}`, form.value);
-      ElMessage.success('修改成功！');
-      if (componentMode){
-        setNewsDialogInvisible(true);
-      }
-      else{
-        router.push('/news');
-      }
-    } catch (e) {
-      await ElMessageBox.alert(e.response.data.message);
-    }
-
-  }
-};
-
-const handleCancel = () => {
-  if (componentMode){
-    setNewsDialogInvisible(false);
-  }
-  else{
-    router.push('/news');
-  }
-};
-
-const isLayoutReady = ref(false);
-const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
-const editor = ClassicEditor;
-
-const fetchNewsDetail = async () => {
-  let params = {
-    token: token.value,
-  }
-  const res = await axios.get(basePath + '/' + id.value, {params});
-  form.value.title = res.data.title;
-  form.value.author = res.data.author;
-  form.value.content = res.data.content;
-  form.value.summary = res.data.summary;
-  form.value.tenant = res.data.tenant;
-  form.value.imagePath = res.data.imagePath;
-  fileList.value.push({url: res.data.imagePath});
-}
-
-onMounted(() => {
-  token.value = store.getters['authentication/token'];
-  form.value.token = token.value;
-  if (props.mode !== undefined){
-    componentMode.value = true;
-    containerStyle.value = 'form-container-component'
-    if (props.mode === 'create'){
-      createMode.value = true;
-      modeTitle.value = '添加资讯';
-    }
-    else if (props.mode === 'edit'){
-      createMode.value = false;
-      id.value = props.id;
-      modeTitle.value = '修改资讯';
-      fetchNewsDetail();
-    }
-  }
-  else if (route.query.mode === 'create' || route.params.mode === 'create') {
-    createMode.value = true;
-    modeTitle.value = '添加资讯';
-  } else if (route.query.mode === 'edit' || route.params.mode === 'edit') {
-    id.value = route.params.id === undefined ? route.query.id : route.params.id;
-    createMode.value = false;
-    modeTitle.value = '修改资讯';
-    fetchNewsDetail();
-  }
-
-  config.value = {
-    toolbar: {
-      items: [
-        'undo',
-        'redo',
-        '|',
-        'heading',
-        'style',
-        '|',
-        'bold',
-        'italic',
-        '|',
-        'link',
-        'insertTable',
-        'blockQuote',
-        'codeBlock',
-        '|',
-        'alignment',
-        '|',
-        'indent',
-        'outdent'
-      ],
-      shouldNotGroupWhenFull: false
-    },
-    plugins: [
-      AccessibilityHelp,
-      Alignment,
-      Autoformat,
-      AutoLink,
-      Autosave,
-      BalloonToolbar,
-      BlockQuote,
-      Bold,
-      CodeBlock,
-      Essentials,
-      FindAndReplace,
-      GeneralHtmlSupport,
-      Heading,
-      HorizontalLine,
-      Indent,
-      IndentBlock,
-      Italic,
-      Link,
-      Paragraph,
-      SelectAll,
-      Style,
-      Table,
-      TableCaption,
-      TableCellProperties,
-      TableColumnResize,
-      TableProperties,
-      TableToolbar,
-      TextTransformation,
-      Undo
-    ],
-    balloonToolbar: ['bold', 'italic', '|', 'link'],
-    heading: {
-      options: [
-        {
-          model: 'paragraph',
-          title: 'Paragraph',
-          class: 'ck-heading_paragraph'
-        },
-        {
-          model: 'heading1',
-          view: 'h1',
-          title: 'Heading 1',
-          class: 'ck-heading_heading1'
-        },
-        {
-          model: 'heading2',
-          view: 'h2',
-          title: 'Heading 2',
-          class: 'ck-heading_heading2'
-        },
-        {
-          model: 'heading3',
-          view: 'h3',
-          title: 'Heading 3',
-          class: 'ck-heading_heading3'
-        },
-        {
-          model: 'heading4',
-          view: 'h4',
-          title: 'Heading 4',
-          class: 'ck-heading_heading4'
-        },
-        {
-          model: 'heading5',
-          view: 'h5',
-          title: 'Heading 5',
-          class: 'ck-heading_heading5'
-        },
-        {
-          model: 'heading6',
-          view: 'h6',
-          title: 'Heading 6',
-          class: 'ck-heading_heading6'
-        }
-      ]
-    },
-    htmlSupport: {
-      allow: [
-        {
-          name: /^.*$/,
-          styles: true,
-          attributes: true,
-          classes: true
-        }
-      ]
-    },
-    initialData: '',
-    language: 'zh-cn',
-    link: {
-      addTargetToExternalLinks: true,
-      defaultProtocol: 'https://',
-      decorators: {
-        toggleDownloadable: {
-          mode: 'manual',
-          label: 'Downloadable',
-          attributes: {
-            download: 'file'
-          }
-        }
-      }
-    },
-    menuBar: {
-      isVisible: true
-    },
-    placeholder: '请在此处输入你的文章',
-    style: {
-      definitions: [
-        {
-          name: 'Article category',
-          element: 'h3',
-          classes: ['category']
-        },
-        {
-          name: 'Title',
-          element: 'h2',
-          classes: ['document-title']
-        },
-        {
-          name: 'Subtitle',
-          element: 'h3',
-          classes: ['document-subtitle']
-        },
-        {
-          name: 'Info box',
-          element: 'p',
-          classes: ['info-box']
-        },
-        {
-          name: 'Side quote',
-          element: 'blockquote',
-          classes: ['side-quote']
-        },
-        {
-          name: 'Marker',
-          element: 'span',
-          classes: ['marker']
-        },
-        {
-          name: 'Spoiler',
-          element: 'span',
-          classes: ['spoiler']
-        },
-        {
-          name: 'Code (dark)',
-          element: 'pre',
-          classes: ['fancy-code', 'fancy-code-dark']
-        },
-        {
-          name: 'Code (bright)',
-          element: 'pre',
-          classes: ['fancy-code', 'fancy-code-bright']
-        }
-      ]
-    },
-    table: {
-      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
-    },
-    translations: [translations]
-  };
-
-  isLayoutReady.value = true;
-});
-</script>
-
-<template>
-  <div :class="containerStyle">
-    <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
-      <h2>{{ modeTitle }}</h2>
-      <ElFormItem label="新闻标题" required>
-        <ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="新闻图片路径" required>
-        <el-upload
-            :action="uploadUrl"
-            :limit="2"
-            :before-upload="beforeUpload"
-            :on-success="handleSuccess"
-            :on-error="handleError"
-            :on-change="handleChange"
-            :file-list="fileList"
-            list-type="picture-card"
-            auto-upload
-            v-model:file-list="fileList"
-            required
-        >
-          <template #file="{ file }">
-            <div>
-              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
-              <span class="el-upload-list__item-actions">
-          <span
-              class="el-upload-list__item-preview"
-              @click="handlePictureCardPreview(file)"
-          >
-            <el-icon><zoom-in/></el-icon>
-          </span>
-          <span
-              class="el-upload-list__item-delete"
-              @click="handleRemove(file)"
-          >
-            <el-icon><Delete/></el-icon>
-          </span>
-        </span>
-            </div>
-          </template>
-          <el-icon v-if="fileList.length === 0">
-            <Plus/>
-          </el-icon>
-          <el-icon v-else>
-            <Refresh/>
-          </el-icon>
-        </el-upload>
-        <div class="tip">
-          请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
-        </div>
-      </ElFormItem>
-      <ElFormItem label="新闻内容" required>
-        <div class="editor-container editor-container_classic-editor editor-container_include-style"
-             ref="editorContainerElement">
-          <div class="editor-container__editor">
-            <div ref="editorElement">
-              <ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config"/>
-            </div>
-          </div>
-        </div>
-      </ElFormItem>
-      <ElFormItem label="作者" required>
-        <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="新闻简介" required>
-        <ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="选择租户" required>
-        <ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
-          <ElOption label="Option 1" value="option1"></ElOption>
-          <ElOption label="Option 2" value="option2"></ElOption>
-          <ElOption label="Option 3" value="option3"></ElOption>
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem>
-        <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="handleCancel">取消</ElButton>
-      </ElFormItem>
-    </ElForm>
-  </div>
-
-  <el-dialog v-model="dialogVisible" class="image-preview">
-    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
-  </el-dialog>
-</template>
-
-<style scoped>
-.form-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background: white;
-  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
-}
-
-.image-preview {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.image-preview img {
-  max-width: 100%;
-  height: auto;
-}
-
-.tip {
-  margin-top: 8px;
-  color: #727272;
-  font-size: 12px;
-}
-
-.el-form {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 55%;
-  max-height: 90vh; /* 确保表单不会超过视口高度 */
-  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
-}
-
-.el-form-item {
-  margin-bottom: 1rem;
-  text-align: left;
-}
-
-.el-form-item label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.el-input,
-.el-select {
-  width: 100%;
-}
-
-.el-button--primary {
-  background-color: #007bff;
-  color: white;
-}
-
-.el-button--primary:hover {
-  background-color: #0056b3;
-}
-
-.dynamic-width-select {
-  min-width: 30%;
-  max-width: 100%;
-  width: auto; /* 使宽度根据内容调整 */
-}
-
-.form-container-component {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: auto;
-  background: white;
-  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
-}
-
-.form-container-component .el-form {
-  background: white;
-  padding: 2rem;
-
-  width: 100%;
-  height: 100%;
-  max-height: 90vh; /* 确保表单不会超过视口高度 */
-  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
-}
-</style>

src/views/news-management/NewsList.vue

@@ -1,306 +0,0 @@
-<script setup>
-import {onMounted, ref} from 'vue';
-import {
-  ElButton,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElMessage,
-  ElMessageBox,
-  ElPagination,
-  ElTable,
-  ElTableColumn
-} from 'element-plus';
-import axios from "axios";
-import {useStore} from "vuex";
-import {useRouter} from "vue-router";
-import EditNews from "@views/news-management/EditNews.vue";
-
-const router = useRouter();
-
-const store = useStore();
-const token = store.getters['authentication/token']
-
-const searchTitle = ref('');
-const searchPath = ref('');
-const searchAuthor = ref('');
-const searchSummary = ref('');
-const sortOrder = ref('');
-
-const allNewsData = ref([]);
-const newsData = ref([]);
-
-const currentPage = ref(1);
-const pageSize = ref(10);
-const newsCount = ref(0);
-const firstTimeLoad = ref(true);
-
-const selections = ref([]);
-
-const editNewsDialogVisible = ref(false);
-const editNewsDialogMode = ref('create');
-const editId = ref("");
-
-const searchMode = ref(false);
-const loadNews = async () => {
-  if (searchMode.value) {
-    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
-    return;
-  }
-  if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
-    // console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
-    let params = {
-      token: token,
-      start: allNewsData.value.length,
-      end: allNewsData.value.length + pageSize.value * 2
-    }
-    try {
-      const response = await axios.get('/api/news', {params})
-      const data = response.data
-      newsCount.value = data.newsCount;
-      allNewsData.value.push(...data.newsList);
-      ElMessage.success('列表已刷新');
-    } catch (e) {
-      console.log(e)
-    }
-    firstTimeLoad.value = false;
-  }
-  newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
-  // console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
-};
-
-onMounted(() => {
-  loadNews();
-
-})
-
-
-const handleSearch = async () => {
-  const params = {
-    token: token,
-    title: searchTitle.value,
-    author: searchAuthor.value,
-    summary: searchSummary.value,
-    imagePath: searchPath.value
-  }
-
-  try {
-    const response = await axios.post('/api/news/search', params);
-    const data = response.data;
-    allNewsData.value = data.newsList;
-    newsCount.value = data.newsCount;
-    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
-    searchMode.value = true;
-    ElMessage.success('搜索成功');
-  } catch (e) {
-    ElMessage.error('搜索失败');
-    console.error(e);
-  }
-};
-
-
-const handleReset = async () => {
-  searchTitle.value = '';
-  searchPath.value = '';
-  searchAuthor.value = '';
-  searchSummary.value = '';
-  sortOrder.value = '';
-
-  searchMode.value = false;
-  await refreshNewsList();
-};
-
-const handleCreateButton = () => {
-  editNewsDialogMode.value = 'create'
-  openEditNewsDialog()
-};
-
-const handleEditButton = () => {
-  if (selections.value.length === 1) {
-    editNewsDialogMode.value = 'edit'
-    editId.value = selections.value[0].id
-    openEditNewsDialog()
-    return
-  }
-  //读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
-  selections.value.forEach(selection => {
-    const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
-    window.open(url, '_blank');
-  });
-};
-
-// 删除按钮的处理方法
-const handleDeleteButton = () => {
-  if (selections.value.length === 0) {
-    ElMessage.warning('请选择要删除的资讯');
-    return;
-  }
-
-  ElMessageBox.confirm(
-      `你是否确认要删除<span style="color: red; ">${selections.value.length}</span>条资讯`,
-      '警告',
-      {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-        dangerouslyUseHTMLString: true
-      }
-  ).then(async () => {
-    try {
-      for (const selection of selections.value) {
-        await axios.delete(`/api/news/${selection.id}`, {params: {token: token}});
-      }
-      ElMessage.success('删除成功');
-      // 刷新列表
-      await refreshNewsList()
-    } catch (e) {
-      ElMessage.error('删除失败');
-      console.error(e);
-    }
-  }).catch(() => {
-    ElMessage.info('已取消删除');
-  });
-};
-
-const handleSelectionChange = (newSelections) => {
-  selections.value = newSelections
-}
-
-const handleEditInTable = async (index) => {
-  // router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
-    editNewsDialogMode.value = 'edit'
-    editId.value = newsData.value[index].id
-    openEditNewsDialog()
-};
-
-const handleDeleteInTable = async (index) => {
-  try {
-    await axios.delete(`/api/news/${newsData.value[index].id}`, {params: {token: token,}})
-    newsData.value.splice(index, 1);
-    allNewsData.value.splice(index, 1);
-    newsCount.value--;
-  } catch (e) {
-    ElMessage.error('删除失败')
-    console.error(e)
-  }
-};
-const refreshNewsList = async () => {
-  newsData.value = [];
-  allNewsData.value = [];
-  newsCount.value = 0;
-  currentPage.value = 1;
-  firstTimeLoad.value = true;
-  await loadNews();
-};
-
-const openEditNewsDialog = () => {
-  editNewsDialogVisible.value = true;
-};
-
-const setNewsDialogInvisible = (changed) => {
-  editNewsDialogVisible.value = false;
-  if (changed){
-    refreshNewsList();
-  }
-}
-</script>
-
-<template>
-  <div class="container">
-    <div class="search-container">
-      <el-form inline>
-        <el-form-item label="新闻标题">
-          <el-input v-model="searchTitle" placeholder="请输入标题"/>
-        </el-form-item>
-        <el-form-item label="新闻图片路径">
-          <el-input v-model="searchPath" placeholder="请输入路径"/>
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-input v-model="sortOrder" placeholder="请输入排序"/>
-        </el-form-item>
-        <el-form-item label="作者">
-          <el-input v-model="searchAuthor" placeholder="请输入作者"/>
-        </el-form-item>
-        <el-form-item label="新闻简介">
-          <el-input v-model="searchSummary" placeholder="请输入简介"/>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <div class="button-container">
-      <el-button type="success" @click="handleCreateButton">新增</el-button>
-      <el-button type="warning" @click="handleEditButton">修改</el-button>
-      <el-button type="danger" @click="handleDeleteButton">删除</el-button>
-    </div>
-
-    <el-table :data="newsData" style="width: 100%;"
-              @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
-      <el-table-column prop="author" label="作者" align="center"></el-table-column>
-      <el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
-          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <div class="pagination-container">
-      <el-pagination
-          @size-change="pageSize = $event;loadNews()"
-          @current-change="currentPage = $event;loadNews()"
-          :current-page="currentPage"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="newsCount"
-          :page-sizes="[10, 20, 50, 100]"
-      >
-      </el-pagination>
-    </div>
-  </div>
-  <el-dialog
-      v-model="editNewsDialogVisible"
-      width="60%"
-      top="8vh"
-      destroy-on-close
-  >
-    <EditNews :mode="editNewsDialogMode" :id="editId" @setNewsDialogInvisible="setNewsDialogInvisible"/>
-  </el-dialog>
-</template>
-
-<style scoped>
-.container {
-  padding: 20px;
-}
-
-.search-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 20px;
-}
-
-.button-container {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.el-table {
-  margin-bottom: 20px;
-}
-
-.pagination-container {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-</style>

src/views/user-management/Profile.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2>Profile</h2>
+    <form @submit.prevent="updateProfile">
+      <div>
+        <label for="nickname">Nickname:</label>
+        <input type="text" v-model="user.nickname">
+      </div>
+      <div>
+        <label for="phoneNumber">Phone Number:</label>
+        <input type="text" v-model="user.phoneNumber">
+      </div>
+      <div>
+        <label for="gender">Gender:</label>
+        <input type="text" v-model="user.gender">
+      </div>
+      <button type="submit">Update Profile</button>
+    </form>
+    <form @submit.prevent="changePassword">
+      <div>
+        <label for="oldPassword">Old Password:</label>
+        <input type="password" v-model="oldPassword" required>
+      </div>
+      <div>
+        <label for="newPassword">New Password:</label>
+        <input type="password" v-model="newPassword" required>
+      </div>
+      <button type="submit">Change Password</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  data() {
+    return {
+      oldPassword: '',
+      newPassword: ''
+    };
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  methods: {
+    ...mapActions(['updateProfile', 'changePassword']),
+    async updateProfile() {
+      await this.updateProfile(this.user);
+    },
+    async changePassword() {
+      await this.changePassword({ oldPassword: this.oldPassword, newPassword: this.newPassword });
+    }
+  }
+};
+</script>