前端页面整改1

Frontend/src/stores/authStore.js

@@ -0,0 +1,32 @@
+// src/stores/authStore.js
+import { defineStore } from 'pinia';
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    isAuthenticated: false, // 用户是否已登录
+    user: null, // 用户信息
+  }),
+  actions: {
+    async login(phone, password) {
+      try {
+        const response = await loginUser(phone, password);
+        this.isAuthenticated = true;
+        this.user = response.data; // 假设 API 返回的数据包含用户信息
+        ElMessage({
+          message: '登录成功',
+          type: 'success'
+        });
+        return true;
+      } catch (error) {
+        this.isAuthenticated = false;
+        this.user = null;
+        ElMessage.error('登录失败，请检查您的账号和密码');
+        throw error;
+      }
+    },
+    logout() {
+      this.isAuthenticated = false;
+      this.user = null;
+    }
+  }
+});

Frontend/src/stores/user.js

@@ -1,32 +1,25 @@
-// stores/user.js
+// user.js (store)
 import { defineStore } from 'pinia';
-import axios from 'axios';
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    user: null,
+    isAuthenticated: false,
+    currentUser: null,
   }),
   actions: {
-    async login(account, password) {
-      try {
-        const response = await axios.get('http://localhost:3002/users', {
-          params: {
-            account,
-            password,
-          },
-        });
+    loginUser(username, password) {
+      // 假设这里的逻辑是调用后端API进行登录验证
+      // 登录成功后更新状态
+      this.isAuthenticated = true;
+      this.currentUser = { username, password }; // 简化示例，实际应包含更多用户信息
 
-        if (response.data.length > 0) {
-          this.user = response.data[0];
-          // 确保 isAdmin 字段正确设置
-          this.user.isAdmin = response.data[0].isAdmin || false;
-        }
-      } catch (error) {
-        console.error('登录失败:', error);
-      }
+      // 这里可以添加更多的业务逻辑，比如保存到本地存储等
     },
-    getCurrentUser() {
-      return this.user;
-    },
-  },
+    logoutUser() {
+      this.isAuthenticated = false;
+      this.currentUser = null;
+
+      // 清除本地存储等操作
+    }
+  }
 });

Frontend/src/views/ArticleView.vue

@@ -1,66 +1,248 @@
 <template>
   <el-container>
-      <!-- Main Section (Right Content) -->
-      <el-main>
-        <el-table :data="articles" style="width: 100%">
-          <!-- 文章标题 -->
-          <el-table-column prop="title" label="文章标题" width="180"></el-table-column>
-          <!-- 文章作者 -->
-          <el-table-column prop="author" label="作者" width="120"></el-table-column>
-          <!-- 文章状态 -->
-          <el-table-column prop="status" label="状态" width="120">
+    <!-- Main Section (Right Content) -->
+    <el-main>
+      <el-table :data="articles" style="width: 100%">
+        <!-- 文章标题 -->
+        <el-table-column prop="title" label="文章标题" width="180"></el-table-column>
+        <!-- 文章作者 -->
+        <el-table-column prop="author" label="作者" width="120"></el-table-column>
+        <!-- 审核状态 -->
+        <el-table-column label="审核状态" width="120">
+          <template v-slot="scope">
+            <el-tag :type="getAuditStatusType(scope.row.status)" effect="dark">
+              <i :class="getAuditStatusIcon(scope.row.status)"></i>
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <!-- 推荐状态 -->
+        <el-table-column label="推荐状态" width="120">
+          <template v-slot="scope">
+            <el-tag :type="getLikeStatusType(scope.row.like)" effect="dark">
+              <i :class="getLikeStatusIcon(scope.row.like)"></i>
+              {{ scope.row.like ? '已推荐' : '未推荐' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <!-- 操作按钮 -->
+        <el-table-column label="操作">
             <template v-slot="scope">
-              <el-tag :type="scope.row.status === '审核通过' ? 'success' : 'warning'">
-                {{ scope.row.status }}
-              </el-tag>
+              <el-button @click="showAuditView(scope.row)" type="primary">审核</el-button>
+              <el-button @click="confirmDeleteArticle(scope.row)" type="danger">删除</el-button>
+              <el-button @click="handleRecommendClick(scope.row)" class="recommend-button" type="info">推荐</el-button>
             </template>
           </el-table-column>
-          <!-- 操作按钮 -->
-          <el-table-column label="操作" >
-            <template v-slot="scope">
-              <el-button @click="auditArticle(scope.row)"  type="primary">审核</el-button>
-              <el-button @click="deleteArticle(scope.row)" type="danger">删除</el-button>
-              <el-button @click="stickArticle(scope.row)"  type="info">置顶</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-main>
+
+      </el-table>
+    </el-main>
+
+    <!-- 审核视图 -->
+    <div v-if="auditViewVisible" class="audit-view-overlay">
+      <div class="audit-view-content">
+        <h3>文章标题: {{ auditForm.title }}</h3>
+        <p>作者: {{ auditForm.author }}</p>
+        <p>提交时间: {{ auditForm.publishTime || '未提供' }}</p>
+        <p>文章内容:</p>
+        <p>{{ auditForm.content }}</p>
+        <el-form :model="auditForm" label-width="140px">
+          <el-form-item label="请输入审批未通过的理由：">
+            <el-input v-model="auditForm.reason" autocomplete="off" type="textarea"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="audit-actions">
+          <el-button @click="handleAuditSubmit('审核未通过')">审核未通过</el-button>
+          <el-button type="primary" @click="handleAuditSubmit('审核通过')">审核通过</el-button>
+          <el-button @click="closeAuditView">取消</el-button>
+        </div>
+      </div>
+    </div>
   </el-container>
+
+  <!-- 推荐对话框 -->
+  <el-dialog title="推荐文章" v-model:visible="recommendDialogVisible" width="30%" @close="resetRecommendForm">
+    <el-form :model="recommendForm">
+      <el-form-item label="请输入推荐理由：" :label-width="formLabelWidth">
+        <el-input v-model="recommendForm.reason" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="recommendDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleRecommendSubmit">提交</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+
 // 文章数据
 const articles = ref([
-  { id: 1, title: 'Vue 3入门', author: 'John Doe', status: '待审核' },
-  { id: 2, title: 'JavaScript基础', author: 'Jane Doe', status: '审核通过' },
-  { id: 3, title: '前端工程化', author: 'Alice Smith', status: '待审核' },
+  { id: 1, title: 'Vue 3入门', author: 'John Doe', status: '待审核', like: false, publishTime: '2024-11-01', content: '本文将介绍如何使用 Vue 3 构建高效的前端应用...' },
+  { id: 2, title: 'JavaScript基础', author: 'Jane Doe', status: '审核通过', like: true, publishTime: '2024-11-02', content: '本文将介绍JavaScript的基础知识...' },
+  { id: 3, title: '前端工程化', author: 'Alice Smith', status: '待审核', like: false, publishTime: '2024-11-03', content: '本文将介绍前端工程化的概念和技术...' },
 ]);
 
-// 审核文章
-const auditArticle = (article: any) => {
-  // 审核逻辑
-  console.log('审核文章:', article.title);
-  article.status = '审核通过';  // 模拟审核通过
+// 获取审核状态样式类型
+const getAuditStatusType = (status: string) => {
+  if (status === '审核通过') return 'success';
+  if (status === '审核未通过') return 'error';
+  return 'default';
+};
+
+// 获取审核状态对应的图标
+const getAuditStatusIcon = (status: string) => {
+  if (status === '审核通过') return 'el-icon-check';
+  if (status === '审核未通过') return 'el-icon-close';
+  return '';
+};
+
+// 获取推荐状态样式类型
+const getLikeStatusType = (like: boolean) => {
+  return like ? 'warning' : 'deault';
 };
 
-// 删除文章
-const deleteArticle = (article: any) => {
-  // 删除逻辑
-  const index = articles.value.indexOf(article);
-  if (index !== -1) {
-    articles.value.splice(index, 1);  // 删除该文章
+// 获取推荐状态对应的图标
+const getLikeStatusIcon = (like: boolean) => {
+  return like ? 'el-icon-star-on' : '';
+};
+
+// 显示审核视图
+const auditViewVisible = ref(false);
+const auditForm = ref({ id: null, title: '', author: '', publishTime: '', content: '', reason: '' });
+
+const showAuditView = (article: any) => {
+  console.log('审核按钮点击', article); // 调试信息
+  auditViewVisible.value = true;
+  // 设置当前文章的信息，并复制对象以避免直接修改原始数据
+  auditForm.value = { ...article, reason: '' };
+};
+
+const handleAuditSubmit = (status: string) => {
+  const article = articles.value.find((a) => a.id === auditForm.value.id);
+  if (article) {
+    article.status = status;
+    if (status === '审核未通过') {
+      article.reason = auditForm.value.reason;
+       ElMessage({
+           type: 'error',
+           message: `${article.title}  ${status}`
+         });// 如果审核未通过，保存原因
+    }
+  else{  ElMessage({
+      type: 'success',
+      message: `${article.title} 已${status}`
+    });
   }
+  }
+  closeAuditView();
+};
+
+const closeAuditView = () => {
+  auditViewVisible.value = false;
+  resetAuditForm();
+};
+
+const resetAuditForm = () => {
+  auditForm.value = { id: null, title: '', author: '', publishTime: '', content: '', reason: '' };
 };
 
-// 置顶文章
-const stickArticle = (article: any) => {
-  // 置顶逻辑
-  console.log('置顶文章:', article.title);
-  article.status = '置顶';  // 模拟置顶
+// 确认删除文章
+const confirmDeleteArticle = (article: any) => {
+  ElMessageBox.confirm(
+    `确定要删除 "${article.title}" 吗？`,
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  ).then(() => {
+    // 删除逻辑
+    const index = articles.value.indexOf(article);
+    if (index !== -1) {
+      articles.value.splice(index, 1);  // 删除该文章
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      });
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    });
+  });
 };
 
+// 处理推荐点击事件
+const handleRecommendClick = (article: any) => {
+  const action = article.like ? '取消推荐' : '推荐';
+  const message = article.like ? `确定要取消推荐 "${article.title}" 吗？` : `确定要推荐 "${article.title}" 吗？`;
+  const messageType = article.like ? 'warning' : 'info';
+
+  ElMessageBox.confirm(
+    message,
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: messageType
+    }
+  ).then(() => {
+    // 更新推荐状态
+    article.like = !article.like;
+
+    if (article.like) {
+      // 如果是推荐，则显示推荐对话框
+      showRecommendDialog(article);
+      ElMessage({
+        type: 'success',
+        message: '已推荐'
+      });
+    } else {
+      // 如果是取消推荐，则直接给出消息通知
+      ElMessage({
+        type: 'info',
+        message: '已取消推荐'
+      });
+    }
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: `已保留${action}状态`
+    });
+  });
+};
+
+// 显示推荐对话框
+const recommendDialogVisible = ref(false);
+const recommendForm = ref({ id: null, reason: '' });
+const formLabelWidth = ref('120px');
+
+const showRecommendDialog = (article: any) => {
+  recommendDialogVisible.value = true;
+  recommendForm.value = { id: article.id, reason: '' }; // 设置当前文章的id并清空输入框
+};
+
+const handleRecommendSubmit = () => {
+  const article = articles.value.find((a) => a.id === recommendForm.value.id);
+  if (article && article.like) { // 只有当文章被设置为推荐时才进行推荐操作
+    article.reason = recommendForm.value.reason; // 保存推荐理由
+    ElMessage({
+      type: 'success',
+      message: `${article.title} 已成功推荐`
+    });
+  }
+  recommendDialogVisible.value = false;
+};
+
+const resetRecommendForm = () => {
+  recommendForm.value.reason = '';
+};
 </script>
 
 <style scoped>
@@ -71,4 +253,44 @@ const stickArticle = (article: any) => {
 .el-button {
   margin-left: 10px;
 }
+
+/* 审核视图样式 */
+.audit-view-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.audit-view-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 60%; /* 增加宽度 */
+  max-width: 800px; /* 增加最大宽度 */
+  height: auto; /* 自适应高度 */
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.audit-actions {
+  margin-top: 20px;
+  text-align: right;
+}
+
+/* 新增：定义推荐按钮的样式 */
+.el-button.recommend-button {
+  background-color: #e6a23c; /* 黄色背景 */
+  border-color: #e6a23c;     /* 黄色边框 */
+}
+
+.el-button.recommend-button:hover {
+  background-color: darken(#e6a23c, 10%); /* 悬停时加深颜色 */
+  border-color: darken(#e6a23c, 10%);
+}
 </style>

Frontend/src/views/accounts.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script>
-import { ElMessageBox } from 'element-plus';
 import { useRouter } from 'vue-router'; // 如果是Vue 3
 
 export default {
@@ -39,7 +38,6 @@ export default {
           cancelButtonText: '我已阅读并同意注销', // 位置互换
           type: 'warning',
           center: true,
-          customClass: 'custom-message-box', // 自定义类名
           showClose: false, // 隐藏右上角的关闭按钮
           beforeClose: (action, instance, done) => {
             if (action === 'cancel') { // 注意这里 action 是 'cancel' 表示确认
@@ -157,10 +155,4 @@ export default {
   border-color: #66b1ff;
 }
 
-/* 增加按钮之间的间距 */
-.custom-message-box .el-message-box__btns {
-  display: flex;
-  justify-content: space-between; /* 将按钮分布到两端 */
-  gap: 754px; /* 设置按钮之间的间距 */
-}
 </style>