539943419/miaoBlog
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 继续完成...

Browse Source
This commit is contained in:
539943419 committed 2025-01-15 07:39:03 +08:00
1 parent 31e253eaef
commit d7f1bf7d49
8 files changed
+270 -122
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

pages/user/main/post/edit-[id].vue
+112 -34
View File
@@ -1,11 +1,17 @@
<!-- 若route.params.id为new则为新建而非修改 -->
<template>
<div>
edit: id-{{ route.params.id }}
<editor v-model:id="id" v-model:title="title" v-model:summary="summary" v-model:tags="tags"
v-model:content="content"></editor>
<el-button @click = handleUpdate>
upload
</el-button>
<div class="post-editor-wrapper">
<editor v-model:title="title" v-model:summary="summary" v-model:tags="tags" v-model:content="content" />
<el-row>
<el-col :span="24">
<div class="flex-end">
<el-text v-if="message" :type="message.type">{{ message.message }}</el-text>
<el-button @click="handleSubmit" style="margin-left: 10px;">
upload
</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
@@ -20,42 +26,114 @@ type resType = {
} & postItem
const { post: { getPost, updatePost } } = useFetch()
const { post: { getPost, updatePost, uploadPost } } = useFetch()
const route = useRoute()
const id = ref<number>(-1)
const title = ref<string>('title')
const summary = ref<string>('summary')
const title = ref<string>('')
const summary = ref<string>('')
const tags = ref<string[]>([])
const content = ref<string>('content')
const content = ref<string>('')
const handleUpdate = () => {
updatePost({
id: id.value,
title: title.value,
summary: summary.value,
tags: tags.value,
url: '',
content: content.value,
type: 'markdown',
date: Date.now()
})
const store = useDefaultStore()
store.deleteCache('posts')
const message = ref<{ type: "" | "success" | "warning" | "info" | "primary" | "danger", message: string }>()
const handleSubmit = () => {
if (id.value === -1) {
handleUpload()
} else {
handleUpdate()
}
}
onBeforeMount(async () => {
const handleUpload = async () => {
try {
const response = await uploadPost({
title: title.value,
summary: summary.value,
tags: tags.value,
url: '',
content: content.value,
type: 'markdown',
date: Date.now()
})
if (response.code !== 200) {
throw ('response')
}
// @ts-ignore
id.value = response.id
console.log(id.value)
message.value = {
type: 'success',
message: '上传成功'
}
const store = useDefaultStore()
store.deleteCache('posts')
} catch (error) {
console.error(error)
message.value = {
type: 'danger',
message: '上传出错'
}
}
}
id.value = parseInt(route.params.id as string)
const res = await getPost(id.value) as any as resType
console.log(res)
id.value = res.id
title.value = res.title
summary.value = res.summary
tags.value = []
content.value = res.data
const handleUpdate = async () => {
try {
const response = await updatePost({
id: id.value,
title: title.value,
summary: summary.value,
tags: tags.value,
url: '',
content: content.value,
type: 'markdown',
date: Date.now()
})
if (response.code !== 200) {
throw ('response')
}
message.value = {
type: 'success',
message: '上传成功'
}
const store = useDefaultStore()
store.deleteCache('posts')
} catch (error) {
console.error(error)
message.value = {
type: 'danger',
message: '上传出错'
}
}
}
onMounted(async () => {
console.log('route', route.params.id, route.params.id === 'new')
if (route.params.id !== 'new') {
id.value = parseInt(route.params.id as string)
const res = await getPost(id.value) as any as resType
console.log(res)
id.value = res.id
title.value = res.title
summary.value = res.summary
tags.value = []
content.value = res.data
}
})
</script>
<style scoped></style>
<style scoped>
.post-editor-wrapper {
/* box-sizing: border-box; */
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.flex-end {
display: flex;
justify-content: flex-end;
}
</style>
pages/user/main/post/index.vue
+122 -75
View File
@@ -4,55 +4,68 @@
文章列表
</div>
<div class="post-index-list">
<div class="post-index-list-item">
上传文章
</div>
<div v-for="post in postList" :key="post.id" class="post-item post-index-list-item">
<div class="post-item-header">
<div class="post-item-header-title">
{{ post.title }}
<el-card class="post-index-list-create" @click="handleNewPost">
<create class="post-index-list-create-icon"></create>
<div class="post-index-list-create-text">新建文章</div>
</el-card>
<el-card class="post-index-list-card" v-for="post in postList" :key="post.id">
<template #header>
<div class="post-index-list-card-header">
<el-text line-clamp="2">{{ post.title }}</el-text>
<el-button @click="handleClickEditBtn(post.id)">
编辑
</el-button>
</div>
<!-- <div class="post-item-header-date">
{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
</div> -->
</div>
<div class="post-item-content">
<span>
{{ post.summary }}
</span>
</div>
<div class="post-item-footer">
<div class="post-item-footer-info">
<div class="post-item-footer-info-date">
{{ formatDate(post.date, 'yy-MM-dd HH:mm:ss') }}
</div>
<div class="post-item-footer-info-tags">
<span v-for="tag in post.tags" :key="tag">{{ tag }}</span>
</div>
</template>
<div class="post-index-list-card-content">
<div class="post-index-list-card-content-summary">
<el-text line-clamp="2">
{{ post.summary }}
</el-text>
</div>
<el-button class="post-item-footer-btn" @click="handleClickEditBtn(post.id)">
编辑
</el-button>
<el-text line-clamp="1">
<el-tag size="small" class="post-index-list-card-content-tag" v-for="tag in post.tags"
:key="tag" style="user-select: none;">
{{ tag }}
</el-tag>
</el-text>
</div>
</div>
<template #footer>
<div class="post-index-list-card-footer">
{{ formatDate(post.date, 'yyyy-MM-dd HH:mm:ss') }}
</div>
</template>
</el-card>
<el-card v-if="isLoading" v-for="_ in 6">
<el-skeleton :rows="5" />
</el-card>
</div>
</div>
</template>
<script setup lang="ts">
import type { postItem } from '~/types/post';
import create from '~/components/icons/create.vue';
import getPostList from '~/utils/getPost';
const router = useRouter()
const isLoading = ref(true);
const postList = ref<postItem[]>([]);
const handleClickEditBtn = (id: number) => {
router.push(`/user/main/post/edit-${id}`)
}
const handleNewPost = () => {
router.push('/user/main/post/edit-new')
}
onMounted(async () => {
postList.value = await getPostList();
isLoading.value = false;
})
</script>
@@ -85,65 +98,99 @@ onMounted(async () => {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
&-item {
// height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
&-create {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
&-text {
letter-spacing: 2px;
transform: translateX(-2px);
user-select: none;
}
}
.post-item {
box-sizing: border-box;
overflow: hidden;
padding-bottom: 5px;
// padding: 10px;
&-card {
&-header {
display: flex;
flex-direction: column;
justify-content: space-between;
&-title {
width: 100%;
box-sizing: border-box;
text-align: center;
letter-spacing: 4px;
text-decoration: none;
font-size: large;
background-color: #15aa87;
color: #fff;
padding: 3px 0 5px;
// font-family: PT Serif, Serif;
}
}
&-content {
max-height: 45px;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 2em;
color: #363636;
}
&-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
&-info {
padding: 0 5px;
&>div {
font-size: 10px;
}
&-content {
&-tags {
display: flex;
height: 25px;
max-width: calc(100% - 0px);
user-select: none;
}
&-btn {
height: 25px;
margin-right: 10px;
&-tag:not(:first-child) {
margin: 0 5px;
}
}
&-footer {
font-size: smaller;
color: #686868;
}
}
// .post-item {
// box-sizing: border-box;
// overflow: hidden;
// padding-bottom: 5px;
// // padding: 10px;
// &-header {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// &-title {
// width: 100%;
// box-sizing: border-box;
// text-align: center;
// letter-spacing: 4px;
// text-decoration: none;
// font-size: large;
// background-color: #15aa87;
// color: #fff;
// padding: 3px 0 5px;
// // font-family: PT Serif, Serif;
// }
// }
// &-content {
// max-height: 45px;
// overflow: hidden;
// text-overflow: ellipsis;
// text-indent: 2em;
// color: #363636;
// }
// &-footer {
// display: flex;
// justify-content: space-between;
// align-items: center;
// margin-top: 5px;
// &-info {
// padding: 0 5px;
// &>div {
// font-size: 10px;
// }
// }
// &-btn {
// height: 25px;
// margin-right: 10px;
// }
// }
// }
}
}
</style>