[v0.1.1] 新增功能
- 新增管理员日志上传
This commit is contained in:
parent
dc4332b43d
commit
b49f42e1bb
@ -1,10 +1,10 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>test999</title>
|
<title>CYBER</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
### 2025/2/17 22:30 - [v0.0.3] 测试效果
|
### 2025/2/17 22:30 - [v0.0.3] 测试效果
|
||||||
- 新增留言板 - 基本完成
|
- 新增留言板 - 基本完成
|
||||||
|
~~啊啊~~
|
||||||
### 2025/2/13 16:30 - [v0.0.2] 测试效果
|
### 2025/2/13 16:30 - [v0.0.2] 测试效果
|
||||||
- 优化布局
|
- 优化布局
|
||||||
- 优化双端切换逻辑
|
- 优化双端切换逻辑
|
||||||
|
|||||||
@ -57,7 +57,7 @@ const navItems = [
|
|||||||
{name: '小工具', link: '/tools'},
|
{name: '小工具', link: '/tools'},
|
||||||
{name: '留言板', link: '/demos/board'},
|
{name: '留言板', link: '/demos/board'},
|
||||||
'divider',
|
'divider',
|
||||||
{name: '关于', link: '/about'}
|
{name: '日志', link: '/about'}
|
||||||
]
|
]
|
||||||
|
|
||||||
// 移动端菜单
|
// 移动端菜单
|
||||||
|
|||||||
@ -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>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="site-log">
|
<div class="log-container">
|
||||||
<MarkdownViewer :markdownContent="markdownText" />
|
<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>
|
||||||
|
<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>
|
</div>
|
||||||
</template>
|
</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>
|
<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;
|
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>
|
</style>
|
||||||
@ -1,11 +1,153 @@
|
|||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -14,21 +156,141 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
height: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
color: #f5f6f7;
|
color: #f5f6f7;
|
||||||
padding: 20px 0;
|
padding: 0;
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
animation: fadeIn 0.3s ease-in-out;
|
animation: fadeIn 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-light .container {
|
.theme-light .container {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,p {
|
.top {
|
||||||
margin: 0 25px;
|
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 {
|
@keyframes fadeIn {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
import Message from "./Message.vue";
|
import Message from "./Message.vue";
|
||||||
import {onMounted, ref, watch} from "vue";
|
import {onMounted, onUnmounted, ref, watch} from "vue";
|
||||||
import api from "../../../utils/axios.js";
|
import api from "../../../utils/axios.js";
|
||||||
import store from "../../../store/index.js";
|
import store from "../../../store/index.js";
|
||||||
import swal from "../../../utils/sweetalert.js";
|
import swal from "../../../utils/sweetalert.js";
|
||||||
@ -115,6 +115,12 @@ watch(sendCD, (newValue) => {
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
sendCD.value = store.state.demos.board?.sendCD || 0;
|
sendCD.value = store.state.demos.board?.sendCD || 0;
|
||||||
await refreshBoard();
|
await refreshBoard();
|
||||||
|
timer = setInterval(refreshBoard, 7000)
|
||||||
|
});
|
||||||
|
let timer
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer);
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -127,14 +133,14 @@ onMounted(async () => {
|
|||||||
<div v-if="messages?.length === 0">正在加载...</div>
|
<div v-if="messages?.length === 0">正在加载...</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="paging-container">
|
<div class="paging-container">
|
||||||
<div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)">1</div>
|
<div class="page-btn" :class="{active: currentPage === 1}" @click="goPage(1)" v-if="amount">1</div>
|
||||||
<span v-if="currentPage > 5">...</span>
|
<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))
|
<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)"
|
(currentPage>4?(currentPage - 3):2, currentPage<amount-4?(currentPage + 4):amount-1)"
|
||||||
@click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
|
@click="goPage(index)" :class="{active: currentPage === index}">{{ index }}
|
||||||
</div>
|
</div>
|
||||||
<span v-if="currentPage < amount - 5">...</span>
|
<span v-if="currentPage < amount - 5">...</span>
|
||||||
<div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}">{{ amount }}</div>
|
<div class="page-btn" @click="goPage(amount)" :class="{active: currentPage === amount}" v-if="amount > 1">{{ amount }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sender-container">
|
<div class="sender-container">
|
||||||
|
|||||||
@ -9,7 +9,8 @@ const store = createStore({
|
|||||||
loading: {},
|
loading: {},
|
||||||
token: null,
|
token: null,
|
||||||
userInfo: {},
|
userInfo: {},
|
||||||
demos: {}
|
editStore: {},
|
||||||
|
demos: {},
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
toggleTheme(state) {
|
toggleTheme(state) {
|
||||||
@ -35,6 +36,12 @@ const store = createStore({
|
|||||||
},
|
},
|
||||||
setDemoValue(state, obj) {
|
setDemoValue(state, obj) {
|
||||||
state.demos[obj.demo] = {...state.demos[obj.demo], ...obj.value}
|
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: {
|
getters: {
|
||||||
@ -50,7 +57,7 @@ const store = createStore({
|
|||||||
},
|
},
|
||||||
plugins: [createPersistedStatePlugin({
|
plugins: [createPersistedStatePlugin({
|
||||||
key: 'cyberStorage',
|
key: 'cyberStorage',
|
||||||
whitelist: ['theme', 'userInfo', 'demos'],
|
whitelist: ['theme', 'userInfo', 'demos', 'editStore'],
|
||||||
})]
|
})]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -52,6 +52,19 @@ button {
|
|||||||
animation: spin 2s linear infinite;
|
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 {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
@ -70,6 +83,7 @@ button {
|
|||||||
|
|
||||||
/* 深色模式：默认 */
|
/* 深色模式：默认 */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user