测试

2025-02-16 22:03:53 +08:00 · 2025-02-16 22:03:53 +08:00 · 7d2b387aee
commit 7d2b387aee
parent cd7bcfa1f7
9 changed files with 267 additions and 44 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,7 +1,9 @@
 <template>
  <div id="app">
    <NavBar/>
-    <div style="margin-top: 60px"><router-view /></div>
+    <div style="margin-top: 60px">
+      <router-view />
+    </div>

    <LoadingSpinner v-if="store.state.loading.isLoading"/>
  </div>
--- a/src/components/Examples_box.vue
+++ b/src/components/Examples_box.vue
@ -1,18 +1,18 @@
 <script setup>
 defineProps({
-  example: Object,
+  demo: Object,
 });
 </script>

 <template>
-  <router-link :to="'/examples/' + example.id">
-    <div class="example-box" :class="{ 'no-image': !example.image, 'revise': false }">
-      <img v-if="example.image" :src="example.image" alt="Example image" class="example-image" />
-      <div class="example-details">
-        <h3>{{ example.name }}</h3>
-        <p class="author">{{ example.author.join("、") }}</p>
+  <router-link :to="'/demos/' + demo.id">
+    <div class="demo-box" :class="{ 'no-image': !demo.image, 'revise': false }">
+      <img v-if="demo.image" :src="demo.image" alt="Demo image" class="demo-image" />
+      <div class="demo-details">
+        <h3>{{ demo.name }}</h3>
+        <p class="author">{{ demo.author.join("、") }}</p>
        <div class="tags">
-          <span v-for="tag in example.tags" :key="tag" class="tag">{{ tag }}</span>
+          <span v-for="tag in demo.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
      </div>
    </div>
@ -21,7 +21,7 @@ defineProps({

 <style scoped>
 /* 基础布局 */
-.example-box {
+.demo-box {
  height: 200px;
  display: flex;
  gap: 20px;
@ -33,12 +33,12 @@ defineProps({
  min-height: 180px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
 }
-.example-box.revise {
+.demo-box.revise {
  flex-direction: row-reverse;
 }

 /* 有图片时的布局 */
-.example-image {
+.demo-image {
  width: 240px;
  border-radius: 8px;
  object-fit: cover;
@ -48,14 +48,14 @@ defineProps({
 }

 /* 无图片时的布局 */
-.example-box.no-image {
+.demo-box.no-image {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
 }

-.example-details {
+.demo-details {
  flex: 1;
  display: flex;
  flex-direction: column;
@ -65,12 +65,12 @@ defineProps({


 /* 鼠标悬停动画 */
-.example-box:hover {
+.demo-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.3);
 }

-.example-box:hover .example-image {
+.demo-box:hover .demo-image {
  transform: scale(1.08);
 }

@ -87,7 +87,7 @@ h3 {
  transition: opacity 0.3s ease;
 }

-.example-box:hover .author {
+.demo-box:hover .author {
  opacity: 1;
 }

@ -106,7 +106,7 @@ h3 {
 }

 /* 暗色主题 (默认) */
-.example-box {
+.demo-box {
  background: #1a1a1a;
  border: 1px solid #2d2d2d;
 }
@ -125,7 +125,7 @@ h3 {
 }

 /* 亮色主题 */
-.theme-light .example-box {
+.theme-light .demo-box {
  background: #ffffff;
  border: 1px solid #e0e0e0;
 }
@ -144,7 +144,7 @@ h3 {
 }


-.example-box.no-image .example-details {
+.demo-box.no-image .demo-details {
  gap: 15px;
  align-items: center;
 }
@ -152,11 +152,11 @@ h3 {

 /* 响应式处理 */
@media (max-width: 768px) {
-  .example-box {
+  .demo-box {
    flex-direction: column;
  }

-  .example-image {
+  .demo-image {
    width: 100%;
    height: 200px;
  }
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@ -53,8 +53,9 @@ const navItems = [
  'divider',
  {name: '博客', link: '/blog'},
  {name: '项目', link: '/projects'},
-  {name: '实例', link: '/examples'},
+  // {name: '实例', link: '/demos'},
  {name: '小工具', link: '/tools'},
+  {name: '留言板', link: '/demos/board'},
  'divider',
  {name: '关于', link: '/about'}
 ]
@ -66,9 +67,9 @@ const toggleMobileMenu = () => {
 }

 // 判定
-const isMobile = ref(window.innerWidth < 768)
+const isMobile = ref(window.innerWidth < 910)
 const handleResize = () => {
-  isMobile.value = window.innerWidth < 888
+  isMobile.value = window.innerWidth < 910
  if (!isMobile.value) {
    showMobileMenu.value = false  // 桌面端时关闭移动菜单
  }
--- a/src/pages/Examples_home.vue
+++ b/src/pages/Examples_home.vue
@ -1,11 +1,12 @@
 <script setup>
 import { ref } from 'vue'
-import Examples_box from '../components/Examples_box.vue'
+import Demos_box from '../components/Demos_box.vue'
 import {getRandomIMG} from "../utils/randomIMG.js";
+import router from "../router/index.js";

 const searchQuery = ref('')

-const examples = ref([
+const demos = ref([
  {
    id: 1,
    name: '留言板',
@ -32,19 +33,19 @@ const parseSearchInput = (input) => {
 * 需求：搜索关键字既可以匹配项目名称，也可以匹配项目的 tags
 * 并且多个关键字之间使用 "AND" 逻辑
 */
-const filterExamples = () => {
+const filterDemos = () => {
  // 如果没有输入任何搜索，直接返回全部
  if (!searchQuery.value.trim()) {
-    return examples.value
+    return demos.value
  }

  // 获取用户输入的关键词数组
  const tokens = parseSearchInput(searchQuery.value.toLowerCase())

-  return examples.value.filter((example) => {
+  return demos.value.filter((demo) => {
    // 将项目名称和标签都转换为小写，用于匹配
-    const nameLower = example.name.toLowerCase()
-    const tagsLower = example.tags.map((tag) => tag.toLowerCase())
+    const nameLower = demo.name.toLowerCase()
+    const tagsLower = demo.tags.map((tag) => tag.toLowerCase())

    // 对于每个 token，都要求能在名称或标签中找到
    return tokens.every((token) => {
@ -59,7 +60,7 @@ const filterExamples = () => {
 </script>

 <template>
-  <div class="container">
+  <div class="container" v-if="$route.path === '/demos'">
    <div class="filters">
      <!-- 将标签的功能合并到搜索栏内 -->
      <input
@ -71,14 +72,15 @@ const filterExamples = () => {
    </div>

    <!-- 按照搜索结果展示项目 -->
-    <div class="examples">
-      <Examples_box
-          v-for="example in filterExamples()"
-          :key="example.name"
-          :example="example"
+    <div class="demos">
+      <Demos_box
+          v-for="demo in filterDemos()"
+          :key="demo.name"
+          :demo="demo"
      />
    </div>
  </div>
+  <router-view v-else />
 </template>

 <style scoped>
@ -112,7 +114,7 @@ const filterExamples = () => {
 }

 /* 项目区域 */
-.examples {
+.demos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@ -95,7 +95,9 @@ const handleLogin = async () => {
        swal.tip('success', '登录成功! 即将跳转');
        loginInfo.value.isFinish = true;
        setTimeout(() => {
+          if (router.currentRoute.value.path === '/login') {
            router.push('/');
+          }
        }, 2000);
      }
  )
--- a/src/pages/accountPages/Account_setting.vue
+++ b/src/pages/accountPages/Account_setting.vue
@ -55,6 +55,7 @@ const handleFileChange = async (event) => {
      swal.tip('error', '网络连接错误');
    }
    store.commit('stopLoading');
+    fileInput.value = null;
  }


--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@ -0,0 +1,94 @@
+<script setup>
+
+import Message from "./Message.vue";
+import {ref} from "vue";
+
+const messages = ref([{
+  "content": "1",
+  "date": "2025-02-09 15:06:03",
+  "id": 50,
+  "is_deleted": 0,
+  "name": "username",
+  "uid": 22
+},
+  {
+    "content": "<#ffff00>aaaaaaaaaaaa",
+    "date": "2024-10-24 15:02:43",
+    "id": 49,
+    "is_deleted": 0,
+    "name": "guarp001",
+    "uid": 23
+  },
+  {
+    "content": "99",
+    "date": "2024-10-14 15:15:10",
+    "id": 48,
+    "is_deleted": 1,
+    "name": "guarp001",
+    "uid": 23
+  },
+  {
+    "content": "9",
+    "date": "2024-10-14 15:15:00",
+    "id": 47,
+    "is_deleted": 1,
+    "name": "guarp001",
+    "uid": 23
+  },
+  {
+    "content": "88",
+    "date": "2024-10-14 15:14:36",
+    "id": 46,
+    "is_deleted": 0,
+    "name": "guarp001",
+    "uid": 23
+  },
+  {
+    "content": "88",
+    "date": "2024-10-14 15:14:36",
+    "id": 45,
+    "is_deleted": 0,
+    "name": "guarp001",
+    "uid": 23
+  },]);
+</script>
+
+<template>
+  <div class="container">
+    <div class="board-body">
+      <div class="message-container">
+        <Message v-for="msg in messages" :message="msg"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-items: flex-start;
+  width: 100%;
+  height: calc(100vh - 100px);
+  overflow: auto;
+}
+
+.board-body {
+  width: 90%;
+  height: auto;
+  padding: 20px;
+  margin-bottom: 150px;
+  border-radius: 15px;
+  background: rgba(128, 128, 128, 0.06);
+  border: cyan solid 1px;
+}
+
+.message-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 15px;
+}
+
+
+</style>
--- a/src/pages/demoPages/messageBoard/Message.vue
+++ b/src/pages/demoPages/messageBoard/Message.vue
@ -0,0 +1,116 @@
+<script setup>
+
+import {setRandomBGCL} from "../../../utils/randomBGCL.js";
+import {getRandomIMG} from "../../../utils/randomIMG.js";
+
+defineProps({
+  message: Object,
+});
+</script>
+
+<template>
+  <div class="message">
+    <div class="avatar" :style="{ background: setRandomBGCL }">
+      <img :src="getRandomIMG(Math.random())" alt="Avatar">
+    </div>
+    <div class="details">
+      <div class="userinfo">
+        <div class="name">{{ message.name }}</div>
+        <div class="role" v-if="message.role_id === 1">[管理员]</div>
+      </div>
+      <div class="content">{{ message.content }}</div>
+      <div class="bottom">
+        <div class="time">{{ message.date }}</div>
+<!--        <label class="like">-->
+<!--          <button>-->
+<!--            <svg v-if="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16">-->
+<!--              <path d="M9.283433333333333 2.0303066666666663C9.095466666666667 2.0083933333333333 8.921333333333333 2.09014 8.828166666666666 2.1991199999999997C8.424633333333333 2.6711333333333336 8.332133333333333 3.3649466666666665 8.029333333333334 3.9012466666666663C7.630633333333333 4.607453333333333 7.258833333333333 5.034486666666666 6.800866666666666 5.436006666666666C6.42382 5.7665733333333336 6.042199999999999 5.987959999999999 5.666666666666666 6.09112L5.666666666666666 13.1497C6.19062 13.1611 6.751966666666666 13.168333333333333 7.333333333333333 13.168333333333333C8.831233333333333 13.168333333333333 10.1019 13.120766666666665 10.958166666666665 13.076699999999999C11.565133333333332 13.045433333333332 12.091966666666666 12.7451 12.366466666666668 12.256733333333333C12.7516 11.571599999999998 13.2264 10.5669 13.514166666666664 9.3835C13.7823 8.2808 13.904599999999999 7.374333333333333 13.959466666666666 6.734999999999999C13.984933333333332 6.438646666666667 13.750433333333334 6.166686666666667 13.386666666666665 6.166686666666667L10.065133333333332 6.166686666666667C9.898433333333333 6.166686666666667 9.742666666666667 6.08362 9.649833333333333 5.945166666666666C9.536066666666667 5.775493333333333 9.560033333333333 5.5828533333333334 9.6312 5.403346666666666C9.783966666666666 5.013846666666666 9.983933333333333 4.432846666666666 10.062766666666667 3.90454C10.1406 3.3830066666666667 10.121599999999999 2.9639466666666667 9.917133333333332 2.57626C9.697399999999998 2.1596933333333332 9.448266666666665 2.0495266666666665 9.283433333333333 2.0303066666666663zM10.773433333333333 5.166686666666666L13.386666666666665 5.166686666666666C14.269133333333333 5.166686666666666 15.036999999999999 5.875273333333333 14.9558 6.8206C14.897 7.505533333333333 14.767199999999999 8.462733333333333 14.485833333333334 9.6198C14.170333333333334 10.917200000000001 13.6532 12.008466666666665 13.238166666666666 12.746766666666666C12.7729 13.574433333333333 11.910266666666667 14.029 11.009566666666666 14.075366666666667C10.14 14.120166666666666 8.851766666666666 14.168333333333333 7.333333333333333 14.168333333333333C5.862206666666666 14.168333333333333 4.51776 14.1231 3.565173333333333 14.079633333333334C2.4932333333333334 14.030733333333332 1.5939999999999999 13.234466666666666 1.4786599999999999 12.143466666666665C1.4028 11.426066666666665 1.3333333333333333 10.4978 1.3333333333333333 9.501666666666665C1.3333333333333333 8.588966666666666 1.3916466666666667 7.761233333333333 1.4598999999999998 7.104466666666667C1.5791666666666666 5.95696 2.5641 5.166686666666666 3.671693333333333 5.166686666666666L5.166666666666666 5.166686666666666C5.3793066666666665 5.166686666666666 5.709213333333333 5.063186666666667 6.141613333333333 4.68408C6.516733333333333 4.355193333333333 6.816366666666667 4.015666666666666 7.158533333333333 3.409613333333333C7.5023 2.8007333333333335 7.6041 2.0920066666666663 8.068066666666667 1.54932C8.372133333333332 1.1936466666666665 8.8718 0.9755333333333334 9.399233333333333 1.03704C9.949866666666665 1.10124 10.457733333333334 1.4577866666666666 10.801633333333331 2.109713333333333C11.148866666666665 2.767993333333333 11.143799999999999 3.4356599999999995 11.051833333333335 4.0520933333333335C10.993899999999998 4.44022 10.875366666666666 4.852359999999999 10.773433333333333 5.166686666666666zM4.666666666666666 13.122166666666667L4.666666666666666 6.166686666666667L3.671693333333333 6.166686666666667C3.029613333333333 6.166686666666667 2.5161533333333335 6.615046666666666 2.4545466666666664 7.207833333333333C2.3890599999999997 7.837933333333333 2.333333333333333 8.630433333333333 2.333333333333333 9.501666666666665C2.333333333333333 10.453433333333333 2.399833333333333 11.345266666666667 2.473113333333333 12.038333333333334C2.533993333333333 12.614133333333331 3.0083466666666667 13.053199999999999 3.6107466666666665 13.0807C3.9228066666666668 13.094899999999999 4.278173333333333 13.109333333333334 4.666666666666666 13.122166666666667z" fill="currentColor"></path>-->
+<!--            </svg>-->
+<!--            <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">-->
+<!--              <path d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z" fill="currentColor"></path>-->
+<!--            </svg>-->
+<!--          </button>-->
+<!--          <span>{{ message.like }}</span>-->
+<!--        </label>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.message {
+  display: flex;
+  background: #333333;
+  border-radius: 15px;
+  padding: 15px;
+  gap: 15px;
+}
+
+.message .avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+}
+
+.message .details {
+  max-width: calc(100% - 90px);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+}
+
+.details .userinfo {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.userinfo .name {
+  color: #dadada;
+  font-size: large;
+}
+
+.userinfo .role {
+  color: #dadada;
+}
+
+.details .content {
+  word-break: break-word;
+  color: white;
+}
+.details .bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  font-size: 13px;
+  color: gray;
+}
+
+.bottom .time {
+
+}
+
+.bottom .like {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  gap: 3px;
+  color: gray;
+}
+
+.like button {
+  color: gray;
+  padding: 2px 0 0;
+}
+
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -12,7 +12,8 @@ import Account_draft from "../pages/accountPages/Account_draft.vue";
 import Account_userInfo from "../pages/accountPages/Account_userInfo.vue";
 import Account_admin_uploadLog from "../pages/accountPages/Account_admin_uploadLog.vue";
 import Projects from "../pages/Projects_home.vue";
-import Examples_home from "../pages/Examples_home.vue";
+import Demos_home from "../pages/Demos_home.vue";
+import Board_page from "../pages/demoPages/messageBoard/Board_page.vue";
 import Tools_home from "../pages/Tools_home.vue";
 import About from "../pages/About.vue";

@ -34,9 +35,13 @@ const routes = [
        name: 'Projects',
        component: Projects
    }, {
-        path: '/examples',
-        name: 'Examples',
-        component: Examples_home
+        path: '/demos',
+        name: 'Demos',
+        component: Demos_home,
+        children: [
+            {path: "1", component: Board_page},
+            {path: "board", component: Board_page},
+        ]
    }, {
        path: '/tools',
        name: 'Tools',