139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<script setup>
|
|
import {onMounted, ref} from 'vue'
|
|
import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
|
|
import router from "../../router/index.js";
|
|
import {getInfoWithPages} from "../../utils/getInfoWithPages.js";
|
|
import swal from "../../utils/sweetalert.js";
|
|
import store from "../../store/index.js";
|
|
import PagingController from "../../components/PagingController.vue";
|
|
|
|
// 示例：草稿数据
|
|
const drafts = ref(store.state.sessionStore.account?.Drafts || null)
|
|
const amount = ref(store.state.sessionStore.account?.DraftsAmount || 1);
|
|
const currentPage = ref(store.state.sessionStore.account?.DraftsCurrentPage || 1);
|
|
|
|
function createNewDraft() {
|
|
store.state.editStore.currentBlogId = null;
|
|
router.push('/editor');
|
|
}
|
|
|
|
async function refreshDraft(page, size, sort) {
|
|
page = page || currentPage.value;
|
|
size = size || 15;
|
|
sort = sort || 'post';
|
|
const result = await getInfoWithPages('/self/blogs/draft', page, size, {sort: sort});
|
|
if (result.code === 0) {
|
|
drafts.value = result.blogs;
|
|
amount.value = Math.ceil(amount.value / size);
|
|
store.state.sessionStore.account.Drafts = drafts.value;
|
|
store.state.sessionStore.account.DraftsAmount = amount.value;
|
|
store.state.sessionStore.account.DraftsCurrentPage = page;
|
|
} else {
|
|
swal.tip('error', '加载失败...');
|
|
drafts.value = [];
|
|
}
|
|
}
|
|
|
|
async function goPage(page) {
|
|
refreshDraft(page, 15);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (store.getters.isCertified) {
|
|
refreshDraft(1, 15);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<!-- 顶部按钮居中 -->
|
|
<div v-if="! store.getters.isCertified" style="padding: 20px 0;">请联系管理员进行认证, 认证后可编写博客</div>
|
|
<div v-else class="top-bar">
|
|
<button class="create-btn" @click="createNewDraft">新建博客</button>
|
|
<div v-if="drafts === null">正在加载...</div>
|
|
</div>
|
|
<!-- 下面循环渲染草稿展示条 -->
|
|
<div class="draft-list">
|
|
<AccountWorkPiece
|
|
v-for="(item, index) in drafts"
|
|
:key="index"
|
|
:cover="item.cover"
|
|
:title="item.title"
|
|
:createdTime="item.post_date"
|
|
:lastModifiedTime="item.edit_date"
|
|
:isDraft="true"
|
|
:id="item.id"
|
|
@refresh="refreshDraft"/>
|
|
</div>
|
|
<PagingController v-if="amount > 1" :current-page="currentPage" :amount="amount" :go-page-func="goPage"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #f5f6f7;
|
|
margin-bottom: 40px;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.theme-light .container {
|
|
background-color: #ffffff;
|
|
color: #333333;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.create-btn {
|
|
padding: 8px 16px;
|
|
background-color: #3b6ea8;
|
|
color: #f5f6f7;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.create-btn:hover {
|
|
background-color: #2f5687;
|
|
}
|
|
|
|
.theme-light .create-btn {
|
|
background-color: #ffc107;
|
|
color: #333333;
|
|
}
|
|
|
|
.theme-light .create-btn:hover {
|
|
background-color: #e0a806;
|
|
}
|
|
|
|
.draft-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 80%;
|
|
max-width: 800px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|