Compare commits
10 Commits
f41354c21d
...
b49f42e1bb
| Author | SHA1 | Date | |
|---|---|---|---|
| b49f42e1bb | |||
| dc4332b43d | |||
| 0c139cb395 | |||
| 8a4a705254 | |||
| 380740b1f2 | |||
| 4590b3b787 | |||
| 7d2b387aee | |||
| cd7bcfa1f7 | |||
| 86919685d9 | |||
| cc1fe5606f |
@ -1,10 +1,10 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>test777</title>
|
||||
<title>CYBER</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
BIN
public/fonts/huangkaihuaLawyerfont-2.ttf
Normal file
BIN
public/fonts/huangkaihuaLawyerfont-2.ttf
Normal file
Binary file not shown.
11
public/images/delete.svg
Normal file
11
public/images/delete.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="white" fill-rule="nonzero">
|
||||
<rect opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M12.5146059,5.54590692 L12.5146059,12.5459069 C12.5146059,13.6504764 11.6191754,14.5459069 10.5146059,14.5459069 L5.51460589,14.5459069 C4.41003639,14.5459069 3.51460589,13.6504764 3.51460589,12.5459069 L3.51460589,5.54590692" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<line x1="6" y1="1.85714286" x2="9.5" y2="1.85714286" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="1.88309006" y1="3.6900534" x2="14.0338156" y2="3.6900534" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="5.71428571" y1="7.63739248" x2="5.71428571" y2="11.230495" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="8.01783774" y1="7.62825381" x2="8.01783774" y2="11.2213564" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
<line x1="10.3396003" y1="7.63344062" x2="10.3396003" y2="11.2265432" stroke="black" stroke-linecap="round" stroke-linejoin="round"></line>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -2,6 +2,13 @@
|
||||
## 网站更新日志
|
||||
|
||||
---
|
||||
### 2025/2/18 22:00 - [v0.1.0] 新增功能
|
||||
- 完成留言板
|
||||
- 新增小工具GPA计算器
|
||||
|
||||
### 2025/2/17 22:30 - [v0.0.3] 测试效果
|
||||
- 新增留言板 - 基本完成
|
||||
~~啊啊~~
|
||||
### 2025/2/13 16:30 - [v0.0.2] 测试效果
|
||||
- 优化布局
|
||||
- 优化双端切换逻辑
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
@font-face {
|
||||
font-family: 'Netron';
|
||||
src: url('/fonts/Netron.ttf') format('truetype');
|
||||
src: url('../../../public/fonts/Netron.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'huangkaihua';
|
||||
src: url('../../../public/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@ -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 }">
|
||||
<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,8 @@ defineProps({
|
||||
|
||||
<style scoped>
|
||||
/* 基础布局 */
|
||||
.example-box {
|
||||
.demo-box {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
border-radius: 12px;
|
||||
@ -30,12 +31,15 @@ defineProps({
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 180px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.demo-box.revise {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* 有图片时的布局 */
|
||||
.example-image {
|
||||
.demo-image {
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
transform-origin: center;
|
||||
@ -44,46 +48,46 @@ 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;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 鼠标悬停动画 */
|
||||
.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);
|
||||
}
|
||||
|
||||
.example-box:hover h3 {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
/* 文字动画 */
|
||||
h3 {
|
||||
width: 200px;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.author {
|
||||
margin: 5px 0;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.example-box:hover .author {
|
||||
.demo-box:hover .author {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -102,7 +106,7 @@ h3 {
|
||||
}
|
||||
|
||||
/* 暗色主题 (默认) */
|
||||
.example-box {
|
||||
.demo-box {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2d2d2d;
|
||||
}
|
||||
@ -121,7 +125,7 @@ h3 {
|
||||
}
|
||||
|
||||
/* 亮色主题 */
|
||||
.theme-light .example-box {
|
||||
.theme-light .demo-box {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
@ -139,27 +143,20 @@ h3 {
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* 无图片时的特殊样式 */
|
||||
.example-box.no-image {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.example-box.no-image .example-details {
|
||||
.demo-box.no-image .demo-details {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.example-box.no-image:hover h3 {
|
||||
transform: scale(1.3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/* 响应式处理 */
|
||||
@media (max-width: 768px) {
|
||||
.example-box {
|
||||
.demo-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.example-image {
|
||||
.demo-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
@ -53,10 +53,11 @@ 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'}
|
||||
{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 // 桌面端时关闭移动菜单
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import {setRandomBGCL} from "../utils/randomBGCL.js";
|
||||
|
||||
defineProps({
|
||||
project: Object,
|
||||
});
|
||||
@ -19,8 +21,9 @@ const getStatusColor = (status) => {
|
||||
|
||||
<template>
|
||||
<router-link :to="'/projects/' + project.id">
|
||||
<div class="project-box" :style="{ borderColor: getStatusColor(project.status) }">
|
||||
<img :src="project.image" alt="Project image" class="project-image" />
|
||||
<div class="project-box" :style="{ borderColor: getStatusColor(project.status),
|
||||
background: setRandomBGCL(project.name), flexDirection: project.image ? 'column' : 'column-reverse' }">
|
||||
<img v-if="project.image" :src="project.image" alt="Project image" class="project-image" />
|
||||
<div class="project-details">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<p class="author">{{ project.author.join("、") }}</p>
|
||||
@ -36,6 +39,7 @@ const getStatusColor = (status) => {
|
||||
<style scoped>
|
||||
.project-box {
|
||||
width: 350px; /* 增大盒子宽度 */
|
||||
height: 315px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@ -1,32 +1,32 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {ref} from 'vue';
|
||||
import {setRandomBGCL} from "../utils/randomBGCL.js";
|
||||
|
||||
const props = defineProps({
|
||||
tool: Object
|
||||
});
|
||||
|
||||
const imageURL = (r1, r2) => {
|
||||
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
|
||||
};
|
||||
|
||||
const hover = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="tool-box"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<div class="image-container">
|
||||
<img :src="tool.image" :alt="tool.title" />
|
||||
</div>
|
||||
<div class="text"><h3>{{ tool.title }}</h3>
|
||||
<p>{{ tool.description }}</p></div>
|
||||
<div class="text-background">
|
||||
<router-link :to="'/tools/'+tool.id">
|
||||
<div
|
||||
class="tool-box"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
|
||||
<div class="cover-character">{{ tool.title[0] }}</div>
|
||||
<img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
|
||||
</div>
|
||||
<div class="text"><h3>{{ tool.title }}</h3>
|
||||
<p>{{ tool.description }}</p></div>
|
||||
<div class="text-background">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -50,10 +50,21 @@ const hover = ref(false);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-container .cover-character {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 200px;;
|
||||
font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: gray;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,49 +1,143 @@
|
||||
<script setup>
|
||||
import {onMounted, onUnmounted, ref} from 'vue';
|
||||
import MarkdownViewer from '../components/mdRenderer.vue';
|
||||
import api from "../utils/axios.js";
|
||||
import swal from "../utils/sweetalert.js";
|
||||
|
||||
|
||||
const messages = ref([]);
|
||||
|
||||
const pageLoading = ref(false);
|
||||
const amount = ref(null);
|
||||
const currentPage = ref(1);
|
||||
|
||||
async function refreshLog(page, size) {
|
||||
page = page || 1;
|
||||
size = size || 5;
|
||||
const res = await api.get(`/getweblog?PAGE=${page}&PAGESIZE=${size}`);
|
||||
if (! res.data) {
|
||||
swal.tip('error', '加载失败, 刷新重试')
|
||||
return;
|
||||
}
|
||||
amount.value = Math.ceil(res.amount / size);
|
||||
messages.value = res.data;
|
||||
return 0;
|
||||
}
|
||||
|
||||
async function goPage(page) {
|
||||
const messageTemp = messages.value
|
||||
pageLoading.value = true;
|
||||
currentPage.value = page;
|
||||
if (await refreshLog(page) === 0) {
|
||||
pageLoading.value = false;
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '加载失败...')
|
||||
messages.value = messageTemp;
|
||||
pageLoading.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshLog();
|
||||
});
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="site-log">
|
||||
<MarkdownViewer :markdownContent="markdownText" />
|
||||
<div class="log-container">
|
||||
<div v-if="!amount">正在加载...</div>
|
||||
<div class="log-bar" v-for="log in messages" :class="{loading: pageLoading}">
|
||||
<MarkdownViewer :markdownContent="`### ${log.date} - [${log.version}] - 由${log.poster}提交\n` + log.content" />
|
||||
</div>
|
||||
<div class="paging-container">
|
||||
<div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)" v-if="amount">1</div>
|
||||
<span v-if="currentPage > 5">...</span>
|
||||
<div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
|
||||
(currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
|
||||
@click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
|
||||
</div>
|
||||
<span v-if="currentPage < amount - 5">...</span>
|
||||
<div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}" v-if="amount > 1">{{ amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import MarkdownViewer from '../components/mdRenderer.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MarkdownViewer
|
||||
},
|
||||
setup() {
|
||||
const markdownText = ref('');
|
||||
|
||||
// 加载 Markdown 文件
|
||||
const loadMarkdown = async () => {
|
||||
try {
|
||||
const response = await fetch('log.md'); // 确保路径正确
|
||||
if (response.ok) {
|
||||
markdownText.value = await response.text();
|
||||
} else {
|
||||
console.error('Failed to load markdown file');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading markdown file', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadMarkdown(); // 页面加载时调用
|
||||
});
|
||||
|
||||
return {
|
||||
markdownText
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.site-log {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
}
|
||||
.theme-light .container {
|
||||
color: black;
|
||||
}
|
||||
.log-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
background: #212121;
|
||||
width: calc(100% - 40px);
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
gap: 15px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.theme-light .log-container {
|
||||
background: #efefef;
|
||||
}
|
||||
.log-bar {
|
||||
background: black;
|
||||
width: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.theme-light .log-bar {
|
||||
background: white;
|
||||
}
|
||||
.paging-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: black;
|
||||
//width: 25px;
|
||||
height: 25px;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
border: cyan solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .page-btn {
|
||||
background-color: white;
|
||||
border: #b2b2b2 solid 1px;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: cyan;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-light .page-btn.active {
|
||||
background: #2a2a2a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.log-bar.loading {
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import BlogBox from "../components/Blog_box.vue";
|
||||
import {getRandomIMG} from "../utils/randomIMG.js";
|
||||
|
||||
const tags = ref([
|
||||
{ name: '家猪饲养', active: false },
|
||||
@ -58,62 +59,59 @@ const tags = ref([
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const imageURL = (r1, r2) => {
|
||||
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
|
||||
}
|
||||
const blogs = ref([
|
||||
{ title: '如何提升家猪的生长速度', author: '张强', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
|
||||
{ title: '猪舍管理的最佳实践', author: '李梅', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
|
||||
{ title: '选择优质猪种的重要性', author: '王涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪饲料配方调整技巧', author: '刘刚', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '现代猪场建设的关键要素', author: '陈峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
|
||||
{ title: '如何有效控制养猪环境', author: '赵立', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
|
||||
{ title: '猪免疫接种的最佳时机', author: '孙华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何提高猪肉的品质', author: '周凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
|
||||
{ title: '智能化养猪设备的应用', author: '杨峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪粪处理与资源回收的创新', author: '吴敏', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '生猪疫苗的选用标准', author: '高雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
|
||||
{ title: '如何建立高效的猪场管理体系', author: '张涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
|
||||
{ title: '从猪场到市场的供应链管理', author: '李丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
|
||||
{ title: '抗生素替代技术的研究与应用', author: '周鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
|
||||
{ title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
|
||||
{ title: '家猪繁殖管理的最佳方法', author: '陈光', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场智能化的未来趋势', author: '王慧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
|
||||
{ title: '优化猪肉品质的生产流程', author: '周华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '高效养猪的创新技术', author: '刘磊', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场管理的数字化转型', author: '张丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
|
||||
{ title: '猪肉产品追溯系统的建设', author: '李平', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
|
||||
{ title: '如何减少猪场的疫病传播', author: '赵新', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
|
||||
{ title: '科学管理猪场劳动成本', author: '王萌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
|
||||
{ title: '猪种改良与遗传优化的前景', author: '孙凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
|
||||
{ title: '生猪运输过程中风险的防控', author: '杨华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '猪场的环保与粪污利用技术', author: '王波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
|
||||
{ title: '智能化管理提升养猪效益', author: '赵雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
|
||||
{ title: '家猪养殖中的生长调控策略', author: '陈婷', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
|
||||
{ title: '如何高效利用猪饲料', author: '李伟', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '猪场废水处理与资源再利用', author: '周丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '猪场防疫技术与管理措施', author: '王鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
|
||||
{ title: '现代养猪业的科技创新', author: '刘辉', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
|
||||
{ title: '新型猪肉加工技术解析', author: '高林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
|
||||
{ title: '猪场的健康管理体系建设', author: '陈杰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
|
||||
{ title: '自动化养猪技术的优势分析', author: '李斌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪场食品安全与监管体系', author: '张文', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
|
||||
{ title: '精准农业与家猪养殖的结合', author: '李龙', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
|
||||
{ title: '如何提高家猪的繁殖效率', author: '王丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪舍设计与环境调控技术', author: '孙瑶', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
|
||||
{ title: '如何选择最合适的猪种进行养殖', author: '赵林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪场环境污染控制与治理技术', author: '周波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
|
||||
{ title: '猪肉市场分析与趋势预测', author: '王海', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
|
||||
{ title: '家猪养殖中的健康风险控制', author: '杨东', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
|
||||
{ title: '家猪繁育管理的难点与对策', author: '李彬', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场生产效率的提升路径', author: '陈明', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场废物利用与绿色养殖', author: '周宇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
|
||||
{ title: '生猪运输中的安全问题与防控', author: '王飞', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '家猪免疫管理的关键措施', author: '刘薇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何使用智能设备提高养猪效率', author: '赵婷', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
|
||||
{ title: '猪肉品质的影响因素分析', author: '张莉', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '猪场管理中数据分析的应用', author: '李帅', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
|
||||
{ title: '猪种选择对养殖效益的影响', author: '王月', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
|
||||
{ title: '如何提升家猪的生长速度', author: '张强', image: getRandomIMG(Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
|
||||
{ title: '猪舍管理的最佳实践', author: '李梅', image: getRandomIMG(Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
|
||||
{ title: '选择优质猪种的重要性', author: '王涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪饲料配方调整技巧', author: '刘刚', image: getRandomIMG(Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '现代猪场建设的关键要素', author: '陈峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
|
||||
{ title: '如何有效控制养猪环境', author: '赵立', image: getRandomIMG(Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
|
||||
{ title: '猪免疫接种的最佳时机', author: '孙华', image: getRandomIMG(Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何提高猪肉的品质', author: '周凯', image: getRandomIMG(Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
|
||||
{ title: '智能化养猪设备的应用', author: '杨峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪粪处理与资源回收的创新', author: '吴敏', image: getRandomIMG(Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '生猪疫苗的选用标准', author: '高雪', image: getRandomIMG(Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
|
||||
{ title: '如何建立高效的猪场管理体系', author: '张涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
|
||||
{ title: '从猪场到市场的供应链管理', author: '李丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
|
||||
{ title: '抗生素替代技术的研究与应用', author: '周鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
|
||||
{ title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: getRandomIMG(Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
|
||||
{ title: '家猪繁殖管理的最佳方法', author: '陈光', image: getRandomIMG(Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场智能化的未来趋势', author: '王慧', image: getRandomIMG(Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
|
||||
{ title: '优化猪肉品质的生产流程', author: '周华', image: getRandomIMG(Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '高效养猪的创新技术', author: '刘磊', image: getRandomIMG(Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场管理的数字化转型', author: '张丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
|
||||
{ title: '猪肉产品追溯系统的建设', author: '李平', image: getRandomIMG(Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
|
||||
{ title: '如何减少猪场的疫病传播', author: '赵新', image: getRandomIMG(Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
|
||||
{ title: '科学管理猪场劳动成本', author: '王萌', image: getRandomIMG(Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
|
||||
{ title: '猪种改良与遗传优化的前景', author: '孙凯', image: getRandomIMG(Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
|
||||
{ title: '生猪运输过程中风险的防控', author: '杨华', image: getRandomIMG(Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '猪场的环保与粪污利用技术', author: '王波', image: getRandomIMG(Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
|
||||
{ title: '智能化管理提升养猪效益', author: '赵雪', image: getRandomIMG(Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
|
||||
{ title: '家猪养殖中的生长调控策略', author: '陈婷', image: getRandomIMG(Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
|
||||
{ title: '如何高效利用猪饲料', author: '李伟', image: getRandomIMG(Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
|
||||
{ title: '猪场废水处理与资源再利用', author: '周丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
|
||||
{ title: '猪场防疫技术与管理措施', author: '王鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
|
||||
{ title: '现代养猪业的科技创新', author: '刘辉', image: getRandomIMG(Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
|
||||
{ title: '新型猪肉加工技术解析', author: '高林', image: getRandomIMG(Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
|
||||
{ title: '猪场的健康管理体系建设', author: '陈杰', image: getRandomIMG(Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
|
||||
{ title: '自动化养猪技术的优势分析', author: '李斌', image: getRandomIMG(Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
|
||||
{ title: '猪场食品安全与监管体系', author: '张文', image: getRandomIMG(Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
|
||||
{ title: '精准农业与家猪养殖的结合', author: '李龙', image: getRandomIMG(Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
|
||||
{ title: '如何提高家猪的繁殖效率', author: '王丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪舍设计与环境调控技术', author: '孙瑶', image: getRandomIMG(Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
|
||||
{ title: '如何选择最合适的猪种进行养殖', author: '赵林', image: getRandomIMG(Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
|
||||
{ title: '猪场环境污染控制与治理技术', author: '周波', image: getRandomIMG(Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
|
||||
{ title: '猪肉市场分析与趋势预测', author: '王海', image: getRandomIMG(Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
|
||||
{ title: '家猪养殖中的健康风险控制', author: '杨东', image: getRandomIMG(Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
|
||||
{ title: '家猪繁育管理的难点与对策', author: '李彬', image: getRandomIMG(Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
|
||||
{ title: '猪场生产效率的提升路径', author: '陈明', image: getRandomIMG(Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
|
||||
{ title: '猪场废物利用与绿色养殖', author: '周宇', image: getRandomIMG(Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
|
||||
{ title: '生猪运输中的安全问题与防控', author: '王飞', image: getRandomIMG(Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
|
||||
{ title: '家猪免疫管理的关键措施', author: '刘薇', image: getRandomIMG(Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
|
||||
{ title: '如何使用智能设备提高养猪效率', author: '赵婷', image: getRandomIMG(Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
|
||||
{ title: '猪肉品质的影响因素分析', author: '张莉', image: getRandomIMG(Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
|
||||
{ title: '猪场管理中数据分析的应用', author: '李帅', image: getRandomIMG(Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
|
||||
{ title: '猪种选择对养殖效益的影响', author: '王月', image: getRandomIMG(Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
|
||||
])
|
||||
|
||||
|
||||
|
||||
@ -1,25 +1,15 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Examples_box from '../components/Examples_box.vue'
|
||||
|
||||
// 搜索输入
|
||||
import Demos_box from '../components/Demos_box.vue'
|
||||
const searchQuery = ref('')
|
||||
|
||||
// 用于生成随机图片尺寸
|
||||
const imageURL = (r1, r2) => {
|
||||
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
|
||||
}
|
||||
|
||||
// 示例项目数据
|
||||
const examples = ref([
|
||||
const demos = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '智能养殖系统',
|
||||
author: ["张三", "李四"],
|
||||
image: imageURL(Math.random(), Math.random()),
|
||||
status: '进行中',
|
||||
tags: ['智能养殖', '数据分析', '物联网']
|
||||
}
|
||||
name: '留言板',
|
||||
author: ["麦克荣", "路易斯周"],
|
||||
tags: ['功能']
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
@ -39,19 +29,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) => {
|
||||
@ -66,7 +56,7 @@ const filterExamples = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container" v-if="$route.path === '/demos'">
|
||||
<div class="filters">
|
||||
<!-- 将标签的功能合并到搜索栏内 -->
|
||||
<input
|
||||
@ -78,14 +68,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>
|
||||
@ -119,7 +110,7 @@ const filterExamples = () => {
|
||||
}
|
||||
|
||||
/* 项目区域 */
|
||||
.examples {
|
||||
.demos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@ -27,8 +27,9 @@
|
||||
}
|
||||
.container-pig h1 {
|
||||
z-index: 19;
|
||||
font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
//font-weight: bold;
|
||||
animation: flashColors 0.5s infinite;
|
||||
}
|
||||
|
||||
|
||||
@ -95,7 +95,9 @@ const handleLogin = async () => {
|
||||
swal.tip('success', '登录成功! 即将跳转');
|
||||
loginInfo.value.isFinish = true;
|
||||
setTimeout(() => {
|
||||
router.push('/');
|
||||
if (router.currentRoute.value.path === '/login') {
|
||||
router.push('/');
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Projects_projectBox from '../components/Projects_projectBox.vue'
|
||||
import Projects_projectBox from '../components/Projects_box.vue'
|
||||
|
||||
// 搜索输入
|
||||
const searchQuery = ref('')
|
||||
@ -16,7 +16,7 @@ const projects = ref([
|
||||
id: 1,
|
||||
name: '智能养殖系统',
|
||||
author: ["张三", "李四"],
|
||||
image: imageURL(Math.random(), Math.random()),
|
||||
image: null,
|
||||
status: '进行中',
|
||||
tags: ['智能养殖', '自动喂养', '数据分析', '物联网']
|
||||
},
|
||||
@ -24,7 +24,7 @@ const projects = ref([
|
||||
id: 2,
|
||||
name: '绿色生态猪场',
|
||||
author: ["王五", "赵六"],
|
||||
image: imageURL(Math.random(), Math.random()),
|
||||
image: null,
|
||||
status: '已完成',
|
||||
tags: ['环保', '生态养殖', '有机饲料', '循环利用']
|
||||
},
|
||||
@ -32,7 +32,7 @@ const projects = ref([
|
||||
id: 3,
|
||||
name: '基因优化猪种',
|
||||
author: ["刘七", "杨八"],
|
||||
image: imageURL(Math.random(), Math.random()),
|
||||
image: null,
|
||||
status: '待定',
|
||||
tags: ['基因研究', '猪种改良', '优质肉类', '育种技术']
|
||||
},
|
||||
@ -40,7 +40,7 @@ const projects = ref([
|
||||
id: 4,
|
||||
name: '猪肉生产透明化',
|
||||
author: ["孙九", "钱十"],
|
||||
image: imageURL(Math.random(), Math.random()),
|
||||
image: null,
|
||||
status: '暂停',
|
||||
tags: ['透明供应链', '动物福利', '溯源技术', '肉品安全']
|
||||
},
|
||||
|
||||
@ -3,45 +3,15 @@ import { ref } from 'vue';
|
||||
import ToolsBox from "../components/Tools_box.vue";
|
||||
|
||||
const categories = ref([
|
||||
{ name: '家猪饲养', active: false },
|
||||
{ name: '猪舍管理', active: false },
|
||||
{ name: '猪种选择', active: false },
|
||||
{ name: '健康管理', active: false },
|
||||
{ name: '市场分析', active: false },
|
||||
{ name: '饲料管理', active: false },
|
||||
{ name: '生产管理', active: false },
|
||||
{ name: '智能农业', active: false },
|
||||
{ name: '繁殖管理', active: false }
|
||||
{ name: '计算', active: false },
|
||||
]);
|
||||
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const imageURL = (r1, r2) => {
|
||||
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
|
||||
};
|
||||
|
||||
const tools = ref([
|
||||
{ title: '猪饲料配方推荐', description: '根据不同阶段推荐饲料配方', image: imageURL(Math.random(), Math.random()), category: '家猪饲养' },
|
||||
{ title: '猪舍监测工具', description: '帮助管理猪舍环境参数的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ title: '优质猪种推荐', description: '提供猪种选择与建议', image: imageURL(Math.random(), Math.random()), category: '猪种选择' },
|
||||
{ title: '猪群健康监测', description: '实时监控猪群健康状态', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
|
||||
{ title: '猪肉价格分析', description: '提供最新猪肉市场价格数据', image: imageURL(Math.random(), Math.random()), category: '市场分析' },
|
||||
{ title: '饲料成本优化', description: '根据不同饲料成本进行优化建议', image: imageURL(Math.random(), Math.random()), category: '饲料管理' },
|
||||
{ title: '猪舍通风系统', description: '推荐最佳猪舍通风方案', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ title: '疾病预防与疫苗', description: '帮助制定猪群疫苗接种计划', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
|
||||
{ title: '生猪生长监控', description: '追踪生猪的生长情况与速度', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
|
||||
{ title: '猪只体重跟踪', description: '监控猪只体重的变化情况', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
|
||||
{ title: '清洁与消毒工具', description: '提供猪舍清洁和消毒方法建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ title: '温湿度调控系统', description: '帮助调控猪舍内温湿度的系统', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ title: '猪只运动量跟踪', description: '监控猪只的运动量与活动情况', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
|
||||
{ title: '猪舍智能喂养', description: '智能化猪舍喂养系统，减少人工干预', image: imageURL(Math.random(), Math.random()), category: '智能农业' },
|
||||
{ title: '生猪屠宰信息', description: '实时追踪生猪屠宰信息和数据', image: imageURL(Math.random(), Math.random()), category: '生产管理' },
|
||||
{ title: '饲料成分分析', description: '分析饲料中的各种营养成分', image: imageURL(Math.random(), Math.random()), category: '饲料管理' },
|
||||
{ title: '猪只健康评估', description: '帮助评估猪只健康状况的工具', image: imageURL(Math.random(), Math.random()), category: '健康管理' },
|
||||
{ title: '猪舍自动清理', description: '自动清理猪舍的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ title: '猪群繁殖优化', description: '优化猪群繁殖效率的工具', image: imageURL(Math.random(), Math.random()), category: '繁殖管理' },
|
||||
{ title: '空气质量监测', description: '监测猪舍空气质量，提供改善建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' },
|
||||
{ id: 1, title: 'GPA在线计算器', description: '手动输入在线算', image: null, category: ['计算'] },
|
||||
]);
|
||||
|
||||
|
||||
@ -57,7 +27,7 @@ const toggleCategory = (category) => {
|
||||
|
||||
const filterTools = () => {
|
||||
return tools.value.filter(tool => {
|
||||
const matchesCategory = categories.value.some(cat => cat.active && cat.name === tool.category);
|
||||
const matchesCategory = categories.value.some(cat => cat.active && tool.category.includes(cat.name));
|
||||
const matchesSearch = tool.title.toLowerCase().includes(searchQuery.value.toLowerCase());
|
||||
return (!categories.value.some(cat => cat.active) || matchesCategory) && matchesSearch;
|
||||
});
|
||||
@ -65,7 +35,7 @@ const filterTools = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container" v-if="$route.path === '/tools'">
|
||||
<div class="filters">
|
||||
<div class="categories">
|
||||
<span
|
||||
@ -85,9 +55,11 @@ const filterTools = () => {
|
||||
v-for="tool in filterTools()"
|
||||
:key="tool.title"
|
||||
:tool="tool"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<router-view v-else />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,11 +1,153 @@
|
||||
<script setup>
|
||||
|
||||
import {onMounted, onUnmounted, ref} from "vue";
|
||||
import MarkdownViewer from "../../components/mdRenderer.vue";
|
||||
import swal from "../../utils/sweetalert.js";
|
||||
import store from "../../store/index.js";
|
||||
import api from "../../utils/axios.js";
|
||||
|
||||
const mdInput = ref(store.state.editStore.log || '');
|
||||
const version = ref(store.state.editStore.logVersion || '');
|
||||
const isViewing = ref(false);
|
||||
const isNailed = ref(false);
|
||||
|
||||
const funcButtons = ref([
|
||||
{name: 'h1', func: '# [cur]'},
|
||||
{name: 'h2', func: '## [cur]'},
|
||||
{name: 'h3', func: '### [cur]'},
|
||||
{name: '<s>abc</s>', func: '~~[cur]~~'},
|
||||
{name: '<b>abc</b>', func: '**[cur]**'},
|
||||
{name: '<i>abc</i>', func: '*[cur]*'},
|
||||
{name: '<code>abc</code>', func: '\`[cur]\`'},
|
||||
{name: '●', func: '- '},
|
||||
{name: 'url', func: '[[cur]](https://example.com)'},
|
||||
{name: 'img', func: ''},
|
||||
])
|
||||
function getFormattedTime() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
}
|
||||
function clickFuncBtn(func) {
|
||||
const textarea = document.querySelector('textarea'); // 获取 textarea 元素
|
||||
const startPos = textarea.selectionStart; // 获取焦点的起始位置
|
||||
const endPos = textarea.selectionEnd; // 获取焦点的结束位置
|
||||
const selectedText = textarea.value.slice(startPos, endPos); // 获取选中的文本
|
||||
|
||||
let newText = '';
|
||||
|
||||
if (selectedText) {
|
||||
// 如果选中了文本，就应用格式化
|
||||
newText = func.replace('[cur]', selectedText);
|
||||
} else {
|
||||
// 如果没有选中文本，就插入占位符文本
|
||||
newText = func.replace('[cur]', '请在此填写内容');
|
||||
}
|
||||
|
||||
// 插入格式化后的文本到 textarea
|
||||
textarea.setRangeText(newText, startPos, endPos, 'select'); // 替换选中的文本
|
||||
|
||||
// 更新 mdInput 以反映最新的文本内容
|
||||
mdInput.value = textarea.value;
|
||||
|
||||
// 找到 `[cur]` 的位置
|
||||
const curPos = textarea.value.indexOf('[cur]');
|
||||
|
||||
// 重新设置光标位置到 `[cur]` 处
|
||||
textarea.selectionStart = curPos;
|
||||
textarea.selectionEnd = curPos;
|
||||
|
||||
// 重新设置焦点
|
||||
textarea.focus();
|
||||
}
|
||||
|
||||
const postLog = async () => {
|
||||
if (version.value.trim().length === 0) {
|
||||
swal.tip('info', '版本号为必填项');
|
||||
return;
|
||||
}
|
||||
if (mdInput.value.trim().length === 0) {
|
||||
swal.tip('info', '内容为必填项');
|
||||
return;
|
||||
}
|
||||
swal.window('info', '提交吗? ', '提交前请检查内容, 确保格式正确', '确定', '取消').then(async (result) => {
|
||||
if (result.isConfirmed) {
|
||||
const response = await api.post('/postweblog', {
|
||||
version: version.value,
|
||||
date: getFormattedTime(),
|
||||
content: mdInput.value
|
||||
});
|
||||
if (response.code === 0) {
|
||||
swal.tip('success', '提交成功');
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '提交失败...')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const shiftNailed = () => {
|
||||
isNailed.value = isNailed.value !== true;
|
||||
}
|
||||
const saveDocument = () => {
|
||||
store.commit('saveEdit', {log: mdInput.value, logVersion: version.value})
|
||||
swal.tip('success', '保存成功')
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
// 检查是否按下了 Ctrl + S
|
||||
if (event.ctrlKey && event.key === 's') {
|
||||
event.preventDefault(); // 阻止浏览器默认的保存行为
|
||||
saveDocument(); // 调用保存函数
|
||||
}
|
||||
};
|
||||
|
||||
// 监听全局键盘事件
|
||||
onMounted(() => {
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
});
|
||||
|
||||
// 在组件卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>上传日志</h1>
|
||||
<div class="top">
|
||||
<button class="view-btn" :class="{viewing: isViewing, nailed: isNailed===true}"
|
||||
@mouseenter="isViewing = true"
|
||||
@mouseleave="isViewing = isNailed === true"
|
||||
@click="shiftNailed"
|
||||
>{{ isViewing ? isNailed ? '解除' : '固定' : '预览' }}
|
||||
|
||||
</button>
|
||||
<div class="function-btn">
|
||||
<button v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<button class="view-btn" @click="saveDocument">保存</button>
|
||||
<button class="view-btn" @click="postLog">上传</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="input-area" v-if="!isViewing">
|
||||
<input v-model="version" placeholder="版本号" style="height: 20px; flex: none"></input>
|
||||
<textarea v-model="mdInput" placeholder="ctrl+s 保存;
|
||||
选中文本按功能按钮"></textarea>
|
||||
</div>
|
||||
<div class="output-area" v-else>
|
||||
<MarkdownViewer :markdownContent="mdInput"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -14,21 +156,141 @@
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
color: #f5f6f7;
|
||||
padding: 20px 0;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
padding: 0;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.theme-light .container {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
h1,p {
|
||||
margin: 0 25px;
|
||||
.top {
|
||||
width: calc(100% - 35px);
|
||||
height: 28px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background: #2d2d2d;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.theme-light .top {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.function-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1vw;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
button {
|
||||
color: white;
|
||||
background: #363636;
|
||||
border: #007bff solid 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-light button {
|
||||
color: black;
|
||||
background: white;
|
||||
border: #ffb74d solid 2px;
|
||||
}
|
||||
.top-right {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
color: white;
|
||||
background: #363636;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.viewing {
|
||||
background: #004286;
|
||||
}
|
||||
|
||||
.viewing.nailed {
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
.theme-light .viewing {
|
||||
background: #ffdfad;
|
||||
}
|
||||
|
||||
.theme-light .viewing.nailed {
|
||||
background: #ffb74d;
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
width: calc(100% - 35px);
|
||||
background: #c09d15;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//align-items: center;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.middle .input-area textarea, .middle .input-area input {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
border: gray solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .input-area textarea,.theme-light .middle .input-area input {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.output-area {
|
||||
border: gray solid 1px;
|
||||
background: #212121;
|
||||
height: calc(100vh - 165px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.theme-light .output-area {
|
||||
background: white;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
|
||||
@ -55,6 +55,7 @@ const handleFileChange = async (event) => {
|
||||
swal.tip('error', '网络连接错误');
|
||||
}
|
||||
store.commit('stopLoading');
|
||||
fileInput.value = null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
367
src/pages/demoPages/messageBoard/Board_page.vue
Normal file
367
src/pages/demoPages/messageBoard/Board_page.vue
Normal file
@ -0,0 +1,367 @@
|
||||
<script setup>
|
||||
|
||||
import Message from "./Message.vue";
|
||||
import {onMounted, onUnmounted, ref, watch} from "vue";
|
||||
import api from "../../../utils/axios.js";
|
||||
import store from "../../../store/index.js";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import AuthService from "../../../../services/auth.js";
|
||||
|
||||
const messages = ref(store.state.demos.board?.messages || []);
|
||||
const amount = ref(store.state.demos.board?.amount || 0);
|
||||
const currentPage = ref(store.state.demos.board?.currentPage || 1);
|
||||
|
||||
const pageLoading = ref(false);
|
||||
const sendCD = ref(0);
|
||||
|
||||
const userInput = ref('');
|
||||
|
||||
async function refreshBoard(page, pageSize) {
|
||||
if (!page) {
|
||||
page = currentPage.value;
|
||||
}
|
||||
if (!pageSize) {
|
||||
pageSize = 10;
|
||||
}
|
||||
try {
|
||||
await api.post(`/viewboard`, {
|
||||
PAGE: page,
|
||||
PAGE_SIZE: pageSize
|
||||
}).then(res => {
|
||||
messages.value = res.data;
|
||||
amount.value = Math.ceil(res.amount / pageSize);
|
||||
store.commit('setDemoValue', {demo: 'board', value: {messages: messages.value}});
|
||||
store.commit('setDemoValue', {demo: 'board', value: {amount: amount.value}});
|
||||
})
|
||||
} catch {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
async function goPage(page) {
|
||||
const messageTemp = messages.value
|
||||
pageLoading.value = true;
|
||||
currentPage.value = page;
|
||||
if (await refreshBoard(page) === 0) {
|
||||
store.commit('setDemoValue', {demo: 'board', value: {currentPage: page}});
|
||||
pageLoading.value = false;
|
||||
return;
|
||||
}
|
||||
swal.tip('error', '加载留言板失败...')
|
||||
messages.value = messageTemp;
|
||||
pageLoading.value = false;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (sendCD.value !== 0) {
|
||||
return;
|
||||
}
|
||||
if (userInput.value.trim().length === 0) {
|
||||
swal.tip('info', '不得为空')
|
||||
return;
|
||||
}
|
||||
sendCD.value = 'wait';
|
||||
try {
|
||||
const response = await api.post('/postmessage', {
|
||||
TOKEN: AuthService.getToken(),
|
||||
CONTENT: userInput.value
|
||||
});
|
||||
if (response.code !== 0) {
|
||||
swal.tip('error', '发送失败');
|
||||
return;
|
||||
}
|
||||
userInput.value = '';
|
||||
sendCD.value = 5;
|
||||
store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
await refreshBoard();
|
||||
return;
|
||||
} catch {
|
||||
swal.tip('error', '网络连接错误...');
|
||||
}
|
||||
sendCD.value = 0;
|
||||
}
|
||||
|
||||
async function clickRefresh() {
|
||||
pageLoading.value = true;
|
||||
if (await refreshBoard() !== 0) {
|
||||
swal.tip('error', '刷新失败');
|
||||
}
|
||||
pageLoading.value = false;
|
||||
}
|
||||
|
||||
let interval = null; // 定时器引用
|
||||
function startCountdown() {
|
||||
if (interval) clearInterval(interval); // 避免重复创建定时器
|
||||
|
||||
interval = setInterval(() => {
|
||||
if (sendCD.value > 0) {
|
||||
sendCD.value--;
|
||||
store.commit('setDemoValue', {demo: 'board', value: { sendCD: sendCD.value }});
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 监听 sendCD 变量
|
||||
watch(sendCD, (newValue) => {
|
||||
if (newValue > 0 && !interval) {
|
||||
startCountdown();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
sendCD.value = store.state.demos.board?.sendCD || 0;
|
||||
await refreshBoard();
|
||||
timer = setInterval(refreshBoard, 7000)
|
||||
});
|
||||
let timer
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="board-body">
|
||||
<div class="message-container" :class="{loading: pageLoading}">
|
||||
<Message v-for="msg in messages" :message="msg" @refresh-board="refreshBoard"/>
|
||||
<div v-if="messages?.length === 0">正在加载...</div>
|
||||
</div>
|
||||
<div class="paging-container">
|
||||
<div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)" v-if="amount">1</div>
|
||||
<span v-if="currentPage > 5">...</span>
|
||||
<div class="page-btn" v-for="index in ((a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i))
|
||||
(currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
|
||||
@click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
|
||||
</div>
|
||||
<span v-if="currentPage < amount - 5">...</span>
|
||||
<div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}" v-if="amount > 1">{{ amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sender-container">
|
||||
<div class="sender-tips">
|
||||
<img :src="store.getters.profileImage" alt="Avatar">
|
||||
<div class="text">
|
||||
<div>{{ store.state.userInfo.username }}</div>
|
||||
<div><{{ (function (){
|
||||
if (store.state.userInfo.role_id === 1) {
|
||||
return '管理员';
|
||||
}
|
||||
if (store.state.userInfo.role_id === 0) {
|
||||
return '普通用户';
|
||||
}
|
||||
return '游客'
|
||||
})() }}></div>
|
||||
</div>
|
||||
<div class="refresh-btn">
|
||||
<button @click="clickRefresh">刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sender-input">
|
||||
<input class="message-input" v-model="userInput" @keydown.enter="sendMessage">
|
||||
<button class="send-button" @click="sendMessage" :disabled="sendCD !== 0">
|
||||
{{ sendCD === 0 ? '发送' : sendCD === 'wait' ? '稍等' : `${sendCD} 秒` }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: flex-start;
|
||||
width: 100%;
|
||||
height: calc(100vh - 130px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.board-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 90%;
|
||||
height: auto;
|
||||
padding: 20px;
|
||||
margin-bottom: 150px;
|
||||
border-radius: 15px;
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: cyan solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .board-body {
|
||||
border: #b2b2b2 solid 1px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.message-container.loading {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.paging-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: black;
|
||||
//width: 25px;
|
||||
height: 25px;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
border: cyan solid 1px;
|
||||
}
|
||||
|
||||
.theme-light .page-btn {
|
||||
background-color: white;
|
||||
border: #b2b2b2 solid 1px;
|
||||
}
|
||||
|
||||
.page-btn.active {
|
||||
background: cyan;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.theme-light .page-btn.active {
|
||||
background: #2a2a2a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sender-container {
|
||||
margin: 20px;
|
||||
background-color: #212121;
|
||||
border: cyan solid 1px;
|
||||
border-radius: 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-light .sender-container {
|
||||
background-color: white;
|
||||
border: #b2b2b2 solid 1px;
|
||||
}
|
||||
|
||||
.sender-tips {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sender-tips img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 15px 15px 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sender-tips .text {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.refresh-btn button {
|
||||
background-color: #4f4f4f;
|
||||
color: cyan;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 15px 0 0 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.theme-light .refresh-btn button {
|
||||
background-color: white;
|
||||
color: #1a1a1a;
|
||||
border: #1a1a1a solid 1px;
|
||||
}
|
||||
|
||||
.sender-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 97%;
|
||||
gap: 10px;
|
||||
margin: 15px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.message-input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 发送按钮样式 */
|
||||
.send-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-light .send-button {
|
||||
color: #1a1a1a;
|
||||
background-color: #ffb74d;
|
||||
}
|
||||
|
||||
/* 鼠标悬停时的按钮样式 */
|
||||
.send-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.theme-light .send-button:hover {
|
||||
background-color: #ffb74d;
|
||||
}
|
||||
|
||||
.send-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.send-button:disabled {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
</style>
|
||||
201
src/pages/demoPages/messageBoard/Message.vue
Normal file
201
src/pages/demoPages/messageBoard/Message.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
|
||||
import {setRandomBGCL} from "../../../utils/randomBGCL.js";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import store from "../../../store/index.js";
|
||||
import api from "../../../utils/axios.js";
|
||||
import AuthService from "../../../../services/auth.js";
|
||||
import {getDomain} from "../../../utils/getDomain.js";
|
||||
|
||||
defineProps({
|
||||
message: Object,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['refresh-board']);
|
||||
async function deleteMessage(id, message) {
|
||||
swal.window('info', '确定要删除词条评论吗？', `《${message}》`, '确定', '取消').then(async (res) => {
|
||||
if (res.isConfirmed) {
|
||||
const response = await api.post(`/board/${id}/delete`, {
|
||||
TOKEN: AuthService.getToken()
|
||||
});
|
||||
if (response.code !== 0) {
|
||||
swal.tip('error', '删除失败...');
|
||||
return;
|
||||
}
|
||||
swal.tip('success', '删除成功');
|
||||
await emit('refresh-board');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message">
|
||||
<div class="avatar" :style="{ background: setRandomBGCL }">
|
||||
<img :src=" `https://${getDomain()}/data/user/profile/` + message.profile" alt="Profile">
|
||||
</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 class="right">
|
||||
<div v-if="String(message.uid) === store.state.userInfo.uid ||
|
||||
store.state.userInfo.role_id >= 1" class="delete-message" @click="deleteMessage(message.id, message.content)">
|
||||
<div class="delete-ico"/>
|
||||
<span>删除留言</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message {
|
||||
display: flex;
|
||||
background: #333333;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.theme-light .message {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #dadada;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.userinfo .name {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.theme-light .userinfo {
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
.details .content {
|
||||
word-break: break-word;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.theme-light .content {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.bottom .time {
|
||||
|
||||
}
|
||||
|
||||
.like {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
gap: 3px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.like button {
|
||||
color: gray;
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
}
|
||||
|
||||
.delete-message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: small;
|
||||
width: 75px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.message:hover .delete-message {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.message:hover .delete-message:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.theme-light .delete-message {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.delete-message .delete-ico {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ffffff;
|
||||
-webkit-mask-image: url('/public/images/delete.svg');
|
||||
mask-image: url('/public/images/delete.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.theme-light .delete-ico {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
|
||||
.theme-light .delete-message span {
|
||||
|
||||
}
|
||||
</style>
|
||||
179
src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue
Normal file
179
src/pages/toolPages/gpaCalculator/gpaCalculator_page.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import swal from "../../../utils/sweetalert.js";
|
||||
import store from "../../../store/index.js";
|
||||
|
||||
const grade = ["A+", "A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
|
||||
const c = [
|
||||
[4, 4, 3.7, 3.3, 3, 2.7, 2.3, 2, 1.7, 1.3, 1, 0.7, 0],
|
||||
[4.5, 4.5, 4.2, 3.8, 3.5, 3.2, 2.8, 2.5, 2.2, 1.8, 1.5, 1.2, 0],
|
||||
[4.8, 4.8, 4.5, 4.1, 3.8, 3.5, 3.1, 2.8, 2.5, 1.8, 1.8, 1.8, 0]
|
||||
];
|
||||
|
||||
const lessons = ref([]);
|
||||
|
||||
const addGroup = () => {
|
||||
lessons.value.push({selectIndex:0, choiceValue:0});
|
||||
console.log(lessons.value)
|
||||
};
|
||||
|
||||
const removeGroup = (index) => {
|
||||
lessons.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const generateResult = () => {
|
||||
return lessons.value.map(group => [group.selectIndex, group.choiceValue]);
|
||||
};
|
||||
|
||||
const saveResultToLocalStorage = () => {
|
||||
const result = generateResult();
|
||||
store.commit('setDemoValue', {demo: 'gpa', value: {groups: result}})
|
||||
start(result);
|
||||
};
|
||||
|
||||
const start = (l) => {
|
||||
let gpa = 0;
|
||||
for (let i = 0; i < l.length; i++) {
|
||||
gpa += c[l[i][1]][l[i][0]];
|
||||
}
|
||||
gpa /= l.length;
|
||||
gpa = gpa.toString().length > 4 ? gpa.toFixed(2) : gpa;
|
||||
swal.window('info', '计算结果', `GPA: ${gpa}`, 'ok', '好的')
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const groupsData = store.state.demos.gpa?.groups;
|
||||
if (groupsData?.length > 0) {
|
||||
lessons.value = groupsData.map(data => ({selectIndex: data[0], choiceValue: data[1]}));
|
||||
} else {
|
||||
addGroup();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="title">GPA计算器</div>
|
||||
<div class="calculator-container">
|
||||
<button class="btn" @click="addGroup">+</button>
|
||||
<div v-for="(lesson, index) in lessons" :key="index" class="group">
|
||||
<select v-model="lesson.selectIndex">
|
||||
<option v-for="(item, idx) in grade" :key="idx" :value="idx">{{ item }}</option>
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type="radio" v-model="lesson.choiceValue" value="0"/> Regular
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="lesson.choiceValue" value="1"/> Honor
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" v-model="lesson.choiceValue" value="2"/> AP
|
||||
</label>
|
||||
|
||||
|
||||
<button class="btn" @click="removeGroup(index)">-</button>
|
||||
</div>
|
||||
|
||||
<button class="generate" @click="saveResultToLocalStorage">计算</button>
|
||||
</div>
|
||||
<div class="bottom-text">
|
||||
计算结果仅供参考, 请以实际分数为准
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.calculator-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
margin-top: 20px;
|
||||
gap: 10px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.group {
|
||||
background: rgba(128, 128, 128, 0.26);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
gap:10px
|
||||
}
|
||||
|
||||
.group select {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
||||
font-size: 75px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.theme-light .title {
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.generate {
|
||||
background-color: forestgreen;
|
||||
color: aliceblue;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.generate:hover {
|
||||
background-color: rgb(27, 169, 27);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: whitesmoke;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.theme-light .bottom-text {
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: cyan solid 1px;
|
||||
color: cyan;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-light .btn {
|
||||
background-color: #ffffff;
|
||||
border: black solid 1px;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
@ -12,8 +12,10 @@ 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 GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
|
||||
import About from "../pages/About.vue";
|
||||
|
||||
const routes = [
|
||||
@ -34,13 +36,21 @@ 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',
|
||||
component: Tools_home
|
||||
component: Tools_home,
|
||||
children: [
|
||||
{path: "1", component: GpaCalculator_page},
|
||||
{path: "gpa", component: GpaCalculator_page},
|
||||
]
|
||||
}, {
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
|
||||
@ -8,7 +8,9 @@ const store = createStore({
|
||||
theme: localStorage.getItem('theme') || 'dark',
|
||||
loading: {},
|
||||
token: null,
|
||||
userInfo: {}
|
||||
userInfo: {},
|
||||
editStore: {},
|
||||
demos: {},
|
||||
},
|
||||
mutations: {
|
||||
toggleTheme(state) {
|
||||
@ -31,6 +33,15 @@ const store = createStore({
|
||||
},
|
||||
stopLoading(state) {
|
||||
state.loading.isLoading = false;
|
||||
},
|
||||
setDemoValue(state, obj) {
|
||||
state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
|
||||
},
|
||||
saveEdit(state, obj) {
|
||||
state.editStore = {...state.editStore, ...obj};
|
||||
},
|
||||
setLogTemp(state, arr) {
|
||||
state.log = arr;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@ -46,7 +57,7 @@ const store = createStore({
|
||||
},
|
||||
plugins: [createPersistedStatePlugin({
|
||||
key: 'cyberStorage',
|
||||
whitelist: ['theme', 'userInfo'],
|
||||
whitelist: ['theme', 'userInfo', 'demos', 'editStore'],
|
||||
})]
|
||||
})
|
||||
|
||||
|
||||
@ -52,6 +52,19 @@ button {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: .875em;
|
||||
font-weight: 500;
|
||||
padding: .15rem .3rem;
|
||||
color: white;
|
||||
background: #424242;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.theme-light code {
|
||||
color: black;
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes spin {
|
||||
0% {
|
||||
@ -70,6 +83,7 @@ button {
|
||||
|
||||
/* 深色模式：默认 */
|
||||
::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
|
||||
22
src/utils/randomBGCL.js
Normal file
22
src/utils/randomBGCL.js
Normal file
@ -0,0 +1,22 @@
|
||||
import store from "../store/index.js";
|
||||
|
||||
export function setRandomBGCL(str) {
|
||||
let r = Math.floor(Math.random() * 55);
|
||||
let g = Math.floor(Math.random() * 55);
|
||||
let b = Math.floor(Math.random() * 55);
|
||||
if (str) {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash); // 计算哈希值
|
||||
}
|
||||
|
||||
// 通过哈希值生成 RGB，保证颜色在浅色范围
|
||||
r = ((hash >> 16) & 0xFF) * 0.2;
|
||||
g = ((hash >> 8) & 0xFF) * 0.2;
|
||||
b = (hash & 0xFF) * 0.2;
|
||||
}
|
||||
if (store.getters.currentTheme === 'dark') {
|
||||
return `rgb(${r}, ${g}, ${b})`
|
||||
}
|
||||
return `rgb(${r + 200}, ${g + 200}, ${b + 200})`
|
||||
}
|
||||
20
src/utils/randomIMG.js
Normal file
20
src/utils/randomIMG.js
Normal file
@ -0,0 +1,20 @@
|
||||
export function getRandomIMG(seed, category) {
|
||||
let url;
|
||||
const urls = [
|
||||
// `https://www.loliapi.com/acg`,
|
||||
`https://picsum.photos/300/300`,
|
||||
`https://loremflickr.com/300/300`,
|
||||
`https://imgapi.xl0408.top/index.php`,
|
||||
// `https://t.alcy.cc/ysz`,
|
||||
// `https://t.alcy.cc/moe`,
|
||||
// `https://t.alcy.cc/pc`,
|
||||
// `https://t.alcy.cc/ycy`
|
||||
]
|
||||
|
||||
if (category !== undefined) {
|
||||
url = urls[category];
|
||||
} else {
|
||||
url = urls[Math.round(Math.random() * (urls.length - 1))];
|
||||
}
|
||||
return url + `?p=${Math.floor(seed * 10000)}`
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user