测试博客上传

2025-03-04 19:02:35 +08:00 · 2025-03-04 19:02:35 +08:00 · 21b92f6ddb
commit 21b92f6ddb
parent 33f5b32f37
15 changed files with 228 additions and 82 deletions
--- a/src/assets/styles/fonts.css
+++ b/src/assets/styles/fonts.css
@ -1,13 +1,13 @@
@font-face {
    font-family: 'Netron';
-    src: url('/public/fonts/Netron.ttf') format('truetype');
+    src: url('/fonts/Netron.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'huangkaihua';
-    src: url('/public/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
+    src: url('/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
--- a/src/components/GeneralRenderer.vue
+++ b/src/components/GeneralRenderer.vue
@ -3,7 +3,7 @@
 </template>

 <script setup>
-import { ref, watch, onMounted, nextTick, defineProps } from 'vue';
+import { ref, watch, onMounted, nextTick } from 'vue';
 import { marked } from "marked";

 // 定义外部传入的 prop `contentInput`
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@ -61,6 +61,7 @@ onMounted(async () => {
  display: flex;
  flex-direction: column;
  align-items: center;
+  justify-content: flex-start;
  width: 100%;
  height: calc(100vh - 60px);
  overflow-y: auto;
--- a/src/pages/Blog_home.vue
+++ b/src/pages/Blog_home.vue
@ -154,6 +154,7 @@ const filterBlogs = () => {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
+  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  //margin-top: 70px;
--- a/src/pages/Demos_home.vue
+++ b/src/pages/Demos_home.vue
@ -95,6 +95,7 @@ const filterDemos = () => {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
+  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@ -5,6 +5,8 @@ import {onMounted, onUnmounted, ref, watch} from "vue";
 import store from "../store/index.js";
 import swal from "../utils/sweetalert.js";
 import getCurrentTime from "../utils/getCurrentTime.js";
+import Swal from "sweetalert2";
+import api from "../utils/axios.js";

 const contentInput = ref(store.state.editStore.blog || '');
 const titleInput = ref(store.state.editStore.blogTitle || '')
@ -73,6 +75,55 @@ const handleKeydown = (event) => {
  }
 };

+const submitDocument = async () => {
+  if (!titleInput.value) {
+    swal.tip('info', '标题为必填项');
+    return;
+  }
+  if (!contentInput.value) {
+    swal.tip('info', '内容为必填项');
+    return;
+  }
+  store.commit('saveEdit', {
+    blog: contentInput.value,
+    blogTitle: titleInput.value,
+    blogSaveTime: getCurrentTime()
+  });
+  const result = await Swal.fire({
+    title: '是否允许评论',
+    html:
+        '<label class="swal2-switch checkbox-label">' +
+        '<input type="checkbox" id="swal-switch" class="swal2-switch-input">' ,
+    showCancelButton: true,
+    confirmButtonText: '提交',
+    cancelButtonText: '取消',
+  })
+  if (result.isConfirmed) {
+    const isChecked = document.getElementById('swal-switch').checked;
+    const formData = new FormData();
+    formData.append('title', titleInput.value);
+    formData.append('content', contentInput.value);
+    formData.append('allowComments', isChecked);
+    store.commit('startLoading');
+    api.post('/blogs', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data', // 确保设置正确的 Content-Type
+      },
+    }).then(result => {
+      if (result.code === 1) {
+        swal.tip('success', `提交成功！id${ ('为'+ result.blogId) || '读取失败...' }`);
+        store.commit('stopLoading');
+        return;
+      }
+      swal.tip('error', `错误（其他状态码 ${result.code}`)
+      store.commit('stopLoading');
+    }).catch(result => {
+      swal.tip('error', `错误 请求失败 ${result.code}`)
+      store.commit('stopLoading');
+    })
+  }
+}
+
 watch(portMode, async () => {
  setTimeout(() => {
    contentInput.value = contentInput.value + ' ';
@ -148,7 +199,7 @@ onUnmounted(() => {
      </div>
      <div class="doc-btn">
        <button @click="saveDocument">保存</button>
-        <button>提交</button>
+        <button @click="submitDocument">提交</button>
      </div>
    </div>
    <div class="middle">
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -3,50 +3,79 @@
 </script>

 <template>
-  <div class="container-pig">
-    <img alt="猪图" src="https://q6.itc.cn/images01/20241006/86f4aab7fded4c2283842e79f7e6eda3.jpeg"/>
-    <h1>6A级金牌养猪基地 2010测试</h1>
+  <div class="container">
+    <div class="container-home">
+      <header class="header">Header</header>
+      <aside class="sidebar">Sidebar</aside>
+      <main class="main-content">Main Content</main>
+    </div>
  </div>
+
 </template>

-<style>
-.container-pig {
+<style scoped>
+.container {
  display: flex;
-  align-items: center;
+  width: 100%;
+  height: 100%;
  flex-direction: column;
-  margin: 0;
-  width: 100%;
-  height: 100%;
+  justify-content: center;
+  justify-items: center;
 }
-.container-pig img {
-  position:absolute ;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.container-pig h1 {
-  z-index: 19;
-  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 80px;
-  //font-weight: bold;
-  animation: flashColors 0.5s infinite;
+/* 设置grid布局 */
+.container-home {
+  display: grid;
+  grid-template-columns: 1fr 3fr; /* 默认2列，侧边栏占1份，内容区占3份 */
+  grid-template-rows: auto 1fr; /* 头部行高度自适应，内容行占满剩余空间 */
+  grid-template-areas:
+    "header header"
+    "sidebar main-content";
+  gap: 20px; /* 设置行列间距 */
+  align-content: center;
+  width: 50rem;
+  height: 65vh; /* 使容器高度为视口高度 */
+  margin-bottom: 80px;
 }

-@keyframes flashColors {
-  0% {
-    color: red;
+/* 设置头部 */
+.header {
+  grid-area: header;
+  background-color: #4CAF50;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}
+
+/* 设置侧边栏 */
+.sidebar {
+  grid-area: sidebar;
+  background-color: #f4f4f4;
+  padding: 20px;
+  border-right: 2px solid #ccc;
+}
+
+/* 设置内容区域 */
+.main-content {
+  grid-area: main-content;
+  background-color: #ffffff;
+  padding: 20px;
+  border-left: 2px solid #ccc;
+}
+
+/* 响应式设计：小屏幕时，侧边栏会变为顶部 */
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr; /* 变成单列布局 */
+    grid-template-areas:
+      "header"
+      "sidebar"
+      "main-content"; /* 侧边栏在头部下面 */
  }
-  49.9% {
-    color: red;
-  }
-  50% {
-    color: yellow;
-  }99.9% {
-     color: yellow;
-   }
-  100% {
-    color: red;
+
+  .sidebar {
+    border-right: none; /* 去掉侧边栏的右边框 */
+    border-bottom: 2px solid #ccc; /* 小屏幕时侧边栏的底部有个边框 */
  }
 }
+
 </style>
--- a/src/pages/Tools_home.vue
+++ b/src/pages/Tools_home.vue
@ -69,6 +69,7 @@ const filterTools = () => {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
+  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
--- a/src/pages/accountPages/Account_draft.vue
+++ b/src/pages/accountPages/Account_draft.vue
@ -1,20 +1,14 @@
 <script setup>
 import { ref } from 'vue'
 import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
+import router from "../../router/index.js";

 // 示例：草稿数据
 const drafts = ref([
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '打破传统界限：家猪饲养与繁殖的创新模式',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  }
 ])

 function createNewDraft() {
-  console.log('新建博客草稿')
-  // 在此处执行新建草稿逻辑
+  router.push('/editor')
 }
 </script>

--- a/src/pages/accountPages/Account_worksmanage.vue
+++ b/src/pages/accountPages/Account_worksmanage.vue
@ -1,24 +1,14 @@
 <script setup>
 import { ref } from 'vue'
 import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
+import router from "../../router/index.js";

 const works = ref([
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '现代化家猪饲养技术：从饲料到环境的全方位提升',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  },
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '家猪繁殖管理的艺术：提高生育率与健康水平',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  }
+
 ])

 function createNewBlog() {
-  console.log('新建博客')
+  router.push('/editor')
 }
 </script>

--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@ -186,10 +186,11 @@ onBeforeUnmount(() => {
  display: flex;
  flex-direction: column;
  gap: 20px;
-  width: calc(80%);
+  width: calc(100% - 60px);
+  max-width: 1000px;
+  margin: 0 auto 120px;
  height: auto;
  padding: 20px;
-  margin: 0 auto 150px;
  border-radius: 15px;
  background: rgba(128, 128, 128, 0.06);
  border: cyan solid 1px;
--- a/src/pages/demoPages/podExercise/Quiz.vue
+++ b/src/pages/demoPages/podExercise/Quiz.vue
@ -1,15 +1,16 @@
 <template>
-  <div class="quiz-container">
+  <div class="quiz-container" ref="containerRef">
    <!-- 加载中提示 -->
    <div v-if="isLoading" class="loading">加载中...</div>

    <!-- 当前题目 -->
    <div v-else-if="currentQuestion" class="question-container">
      <h2>题目 {{ questionCount }}</h2>
-      <QuestionText :text="currentQuestion.text" :medias="data.medias" />
+      <QuestionText :text="currentQuestion.text" :medias="data.medias"/>
      <div class="options">
        <div v-for="(answer, idx) in currentQuestion.answers.slice(1)" :key="idx" class="option">
-          <label :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
+          <label
+              :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
            <input
                type="radio"
                :value="idx"
@ -30,7 +31,9 @@
      <div v-if="submitted" class="result">
        <p v-if="isCorrect" class="correct-text">答对了！</p>
        <p v-else class="incorrect-text">答错了。</p>
-        <p>正确答案是：<general-renderer :content-input="processMedia(correctAnswerText, data.medias)"></general-renderer></p>
+        <p>正确答案是：
+          <general-renderer :content-input="processMedia(correctAnswerText, data.medias)"></general-renderer>
+        </p>
        <div v-if="currentQuestion.explanation" class="explanation">
          <h3>解题思路</h3>
          <general-renderer :content-input="processMedia(currentQuestion.explanation, data.medias)"></general-renderer>
@ -41,8 +44,10 @@
          <h3>对比其他类似题目</h3>
          <div v-for="(similar, index) in similarQuestions" :key="index" class="similar-question">
            <h4>题目 {{ index + 1 }}</h4>
-            <QuestionText :text="similar.text" :medias="data.medias" />
-            <p>正确答案：<general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer></p>
+            <QuestionText :text="similar.text" :medias="data.medias"/>
+            <p>正确答案：
+              <general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer>
+            </p>
          </div>
        </div>
      </div>
@ -51,8 +56,8 @@
    <!-- 进度条 -->
    <div v-if="!isLoading" class="progress-bar">
      <div v-if="progressPercentage"
-          class="progress"
-          :style="{
+           class="progress"
+           :style="{
          width: `${progressPercentage}%`,
          background: getColor(progressPercentage)
        }"
@ -68,8 +73,9 @@ import {reactive, ref, onMounted, computed, onUpdated} from 'vue';
 import axios from 'axios';
 import QuestionText from './QuestionText.vue';
 import GeneralRenderer from "../../../components/GeneralRenderer.vue";
-import { useRoute } from 'vue-router'
+import {useRoute} from 'vue-router'
 import swal from "../../../utils/sweetalert.js";
+import router from "../../../router/index.js";

 const route = useRoute()

@ -85,6 +91,7 @@ const data = reactive({
 });

 // 当前题目、用户答案、状态变量
+const containerRef = ref(null);
 const currentQuestion = ref(null);
 const userAnswer = ref(null);
 const submitted = ref(false);
@ -107,7 +114,7 @@ const progressPercentage = computed(() => {
  return (correctCount / Math.min(recentResults.value.length, totalQuestions.value)) * 100;
 });

-const initial = async  () => {
+const initial = async () => {
  const file = route.query.id || 'phy250226';
  try {
    const response = await axios.get(`https://mva-cyber.club/data/file/${file}.json`);
@ -117,6 +124,7 @@ const initial = async  () => {
  } catch (error) {
    console.error('加载数据失败:', error);
    swal.tip('error', '数据加载失败，请稍后重试。')
+    await router.push('/demos/pod');
  } finally {
    isLoading.value = false;
  }
@ -136,6 +144,7 @@ function getColor(progressPercentage) {
  // 返回rgb颜色格式
  return `rgb(${r}, ${g}, ${b})`;
 }
+
 // 随机选择一道题
 function selectRandomQuestion() {
  if (data.texts.length <= 1) return;
@ -167,6 +176,7 @@ function processMedia(text, medias) {
    return '';
  });
 }
+
 function calculateStringSimilarity(str1, str2) {
  // 处理空字符串或非字符串输入
  if (typeof str1 !== 'string' || typeof str2 !== 'string') {
@ -220,12 +230,13 @@ function calculateStringSimilarity(str1, str2) {
  // 返回保留两位小数的百分比
  return Number(similarity.toFixed(2));
 }
+
 // 生成新试卷
 function generateNewExam() {
  if (data.texts.length <= 1) return;

  // 创建所有题目的索引数组并打乱顺序
-  const indices = Array.from({ length: data.texts.length - 1 }, (_, i) => i + 1);
+  const indices = Array.from({length: data.texts.length - 1}, (_, i) => i + 1);
  for (let i = indices.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [indices[i], indices[j]] = [indices[j], indices[i]];
@ -245,6 +256,7 @@ function generateNewExam() {
  recentResults.value = [];
  selectCurrentQuestion();
 }
+
 // 查找类似题目
 function findSimilarQuestions() {
  const currentText = currentQuestion.value.text;
@ -264,6 +276,7 @@ function findSimilarQuestions() {
  }
  similarQuestions.value = similar;
 }
+
 function selectCurrentQuestion() {
  if (questionCount.value <= totalQuestions.value) {
    currentQuestion.value = examQuestions.value[questionCount.value - 1];
@ -272,6 +285,7 @@ function selectCurrentQuestion() {
    similarQuestions.value = [];
  }
 }
+
 // 提交答案
 function submitAnswer() {
  if (userAnswer.value === null) {
@ -280,6 +294,11 @@ function submitAnswer() {
  }
  correctIndex.value = currentQuestion.value.answerkeys.findIndex((key, idx) => idx > 0 && key === 1) - 1;
  isCorrect.value = userAnswer.value === correctIndex.value;
+  containerRef.value.style.border = `
+    ${isCorrect.value ? '#00c800' : '#c80000'} solid 5px`;
+  setTimeout(() => {
+    containerRef.value.style.border = 'rgba(126, 126, 126, 0) solid 5px';
+  }, 1000)
  correctAnswerText.value = currentQuestion.value.answers[correctIndex.value + 1];
  submitted.value = true;

@ -311,10 +330,10 @@ function nextQuestion() {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
-  width: calc(100% - 40px);
+  width: calc(100% - 49px);
  //max-width: 800px;
  margin: auto;
-  height: calc(100vh - 120px);
+  height: calc(100vh - 109px);
  overflow-y: auto;
  padding: 20px;
  font-family: Arial, sans-serif;
--- a/src/pages/errorPages/notFound.vue
+++ b/src/pages/errorPages/notFound.vue
@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>404 Not Found</h1>
+  <h4>你来到了未知领域</h4>
+</template>
+
+<style scoped>
+h1,h2 {
+  text-align: center;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -21,33 +21,48 @@ import Tools_home from "../pages/Tools_home.vue";
 import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
 import About from "../pages/About.vue";
 import Editor from "../pages/Editor.vue";
+import NotFound from "../pages/errorPages/notFound.vue";

 const routes = [
-    {
+    {path: '/404',
+        name: '404',
+        component: NotFound,
+        meta: {title: '404'}
+    }, {
        path: '/',
        name: 'Home',
        component: Home,
+        meta: {title: '首页'}
    }, {
        path: '/login',
        name: 'Login',
-        component: Login
+        component: Login,
+        meta: {title: '登录'}
    }, {
        path: '/blog',
        name: 'Blog',
-        component: Blog_home
+        component: Blog_home,
+        meta: {title: '博客'}
    }, {
        path: '/projects',
        name: 'Projects',
-        component: Projects
+        component: Projects,
+        meta: {title: '项目'}
    }, {
        path: '/demos',
        name: 'Demos',
        component: Demos_home,
+        meta: {title: '实例'},
        children: [
-            {path: "board", component: Board_page},
+            {
+                path: "board",
+                component: Board_page,
+                meta: {title: '留言板'},
+            },
            {
                path: "pod",
                component: Pod_page,
+                meta: {title: '做题'},
                children: [
                    {path: "quiz", component: Pod_quiz}
                ]
@ -57,6 +72,7 @@ const routes = [
        path: '/tools',
        name: 'Tools',
        component: Tools_home,
+        meta: {title: '小工具'},
        children: [
            {path: "1", component: GpaCalculator_page},
            {path: "gpa", component: GpaCalculator_page},
@ -64,10 +80,12 @@ const routes = [
    }, {
        path: '/about',
        name: 'About',
-        component: About
+        component: About,
+        meta: {title: '关于'},
    }, {
        path: '/account',
        component: Account,
+        meta: {title: '账户'},
        children: [
            {path: 'self-page', component: Account_selfpage},
            {path: 'works-manage', component: Account_worksmanage},
@ -80,7 +98,8 @@ const routes = [
    }, {
        path: '/editor',
        name: 'Editor',
-        component: Editor
+        component: Editor,
+        meta: {title: '编辑器'},
    },
 ];

@ -105,6 +124,16 @@ router.beforeEach((to, from, next) => {
    if (to.path === '/account/user-management' && !store.getters.isAdmin) {
        next('/account');
    }
+
+    if (to.matched.length === 0) {
+        next('/404');
+    }
+
+    const title = to.meta?.title;
+    if (title) {
+        document.title = title + ' CYBER'; // 设置页面标题
+    }
+
    next();
 });

--- a/src/style.css
+++ b/src/style.css
@ -74,6 +74,21 @@ code {
  }
 }

+.checkbox-label input {
+  width: 20px;
+  height: 20px;
+  accent-color: #007bff;
+  transition: transform 0.2s ease;
+}
+
+.checkbox-label input:checked {
+  transform: scale(1.2);
+}
+.theme-light .checkbox-label input {
+  accent-color: #ffb74d;
+  border: 2px solid #ddd;
+}
+
 /*::-webkit-scrollbar {*/
 /*  display: none;*/
 /*}*/