feat: 继续完成后台前端实现
This commit is contained in:
539943419 committed
1 parent
83f5788dee
commit
caadd5a484
15 files changed
+781
-17
No files matched your search
@@ -3,6 +3,16 @@
|
||||
p-id="26076">
|
||||
<path
|
||||
d="M512 0C229.240755 0 0 229.240755 0 512s229.240755 512 512 512 512-229.240755 512-512S794.759245 0 512 0z m328.597736 872.573585c-2.125283-3.526038-4.250566-7.052075-6.424151-10.529811-0.676226-1.062642-1.01434-2.366792-2.270189-5.264906 4.926792 1.932075 8.404528 3.284528 12.655095 4.975094-10.771321-47.770566-30.961509-90.855849-59.314717-130.221887-28.449811-39.462642-62.744151-73.032453-103.510944-101.047547 8.501132-5.409811 16.615849-3.091321 25.068679-1.78717-7.148679-19.320755-19.900377-34.487547-32.26566-50.378867 16.953962-9.080755 24.295849-24.923774 31.396226-39.945661-7.824906-0.966038-15.408302-1.883774-25.020377-3.043019 4.975094-4.685283 8.549434-7.438491 11.350944-10.819622 11.882264-14.297358 17.436981-31.541132 20.335094-49.267925 4.34717-26.517736 6.858868-53.373585 10.384906-80.036226 0.434717-3.381132 1.835472-7.052075 3.815849-9.756981 8.404528-11.350943 11.978868-24.58566 13.524528-38.013585 3.187925-27.193962 5.409811-54.53283 7.390189-81.823397 1.062642-14.490566 0.724528-29.077736 1.159245-43.616603 0.289811-8.646038 1.207547-17.243774 1.352453-25.889812 0.096604-5.89283-3.429434-8.259623-9.322264-8.45283-11.833962-0.338113-22.073962 4.298868-31.97585 9.805283-30.478491 17.002264-56.754717 39.607547-81.823396 63.516981-9.515472 9.080755-19.803774 15.504906-32.845283 17.243774-2.753208 0.386415-6.037736 0.338113-8.404528-0.821132-39.94566-19.272453-82.258113-26.759245-126.261132-23.909434-23.281509 1.497358-45.983396 6.617358-67.767547 15.36-13.57283 5.458113-27.628679 5.168302-41.443019 1.78717-4.540377-1.110943-8.259623-5.554717-12.220378-8.69434-28.594717-22.653585-57.09283-45.355472-85.687547-67.960755-5.699623-4.492075-8.259623-4.34717-10.481509 2.753208-3.284528 10.433208-6.279245 21.349434-6.665661 32.169057-1.352453 37.289057 5.651321 73.805283 12.848302 110.176603 1.738868 8.935849 4.298868 17.243774 1.110944 26.904151-4.298868 12.993208-1.255849 26.710943 1.738868 39.607547 7.196981 30.864906 15.456604 61.44 23.57132 93.270944-4.250566 0.531321-9.756981 1.255849-15.843018 1.980377 2.270189 15.649811 8.984151 29.802264 18.354717 42.698868 9.322264 12.848302 19.272453 25.213585 27.91849 36.419623-4.636981 6.424151-9.273962 12.896604-13.910943 19.369056 0.434717 0.579623 0.869434 1.159245 1.352453 1.78717 10.529811-4.685283 20.818113-6.810566 29.415849 1.159245-5.651321 5.941132-11.206038 11.78566-16.760755 17.678491l1.738868 1.883774c3.815849-2.318491 7.583396-4.636981 12.365283-7.486793l-18.258113 30.768302c6.375849-2.221887 10.626415-3.670943 14.925283-5.168302-13.476226 11.544151-19.369057 26.904151-23.426415 43.858113 2.56-0.966038 4.878491-1.835472 8.935849-3.33283-13.186415 33.569811-10.723019 66.415094-3.236227 100.033208-4.34717-1.01434-7.535094-1.78717-10.771321-2.56-3.381132 11.689057-1.110943 19.030943 13.572831 43.036981-5.603019-0.821132-9.708679-1.449057-14.393963-2.173585-0.724528 6.424151 2.076981 12.606792 5.892831 18.161509 2.704906 3.912453 2.753208 6.955472 0.869433 11.350944-4.10566 9.515472-7.293585 19.369057-11.254339 30.188679 2.173585-1.01434 3.526038-1.642264 5.216604-2.463396-6.472453 20.673208-10.191698 41.491321-12.26868 62.454339C125.391698 855.184906 24.150943 695.402264 24.150943 512 24.150943 242.572075 242.572075 24.150943 512 24.150943s487.849057 218.421132 487.849057 487.849057c0 142.828679-61.391698 271.36-159.251321 360.573585z"
|
||||
fill="#15aa87" p-id="26077"></path>
|
||||
:fill="props.fill" p-id="26077"></path>
|
||||
</svg>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
fill: {
|
||||
type: String,
|
||||
default: '#15aa87'
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M336 264.13V436c0 24.3-19.05 44-42.95 44H107c-23.95 0-43-19.7-43-44V172a44.26 44.26 0 0 1 44-44h94.12a24.55 24.55 0 0 1 17.49 7.36l109.15 111a25.4 25.4 0 0 1 7.24 17.77z"
|
||||
fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<path d="M200 128v108a28.34 28.34 0 0 0 28 28h108" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32"></path>
|
||||
<path
|
||||
d="M176 128V76a44.26 44.26 0 0 1 44-44h94a24.83 24.83 0 0 1 17.61 7.36l109.15 111A25.09 25.09 0 0 1 448 168v172c0 24.3-19.05 44-42.95 44H344"
|
||||
fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<path d="M312 32v108a28.34 28.34 0 0 0 28 28h108" fill="none" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="32"></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M80 212v236a16 16 0 0 0 16 16h96V328a24 24 0 0 1 24-24h80a24 24 0 0 1 24 24v136h96a16 16 0 0 0 16-16V212"
|
||||
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<path d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
|
||||
d="M400 179V64h-48v69"></path>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -26,8 +26,9 @@ const title = ref('')
|
||||
|
||||
const renderedData = ref('')
|
||||
|
||||
const id = route.params.id as string
|
||||
|
||||
onMounted(async () => {
|
||||
const id = route.params.id as string
|
||||
|
||||
const _p = new Promise<postContent>(async (resolve, reject) => {
|
||||
try {
|
||||
|
||||
+171
-11
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleLogout">
|
||||
logout
|
||||
</el-button>
|
||||
<nuxt-link to="user/test"> test</nuxt-link>
|
||||
<div class="loading-wrapper">
|
||||
<div class="loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,16 +15,174 @@ import useUserStore from '~/hooks/pinia/useUserStore';
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const handleLogout = () => {
|
||||
userStore.logout()
|
||||
router.push('user/login')
|
||||
}
|
||||
// definePageMeta({
|
||||
// middleware: [
|
||||
// function (to, from) {
|
||||
// // if (userStore.isLogin === false) {
|
||||
// // return navigateTo('user/login')
|
||||
// // }
|
||||
// console.log(to, from)
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (userStore.isLogin === false) {
|
||||
return router.push('user/login')
|
||||
return router.replace('/user/login')
|
||||
} else {
|
||||
return router.replace('/user/main')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.loading-wrapper {
|
||||
height: calc(100vh - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.loading>div {
|
||||
/* scale: 1.5; */
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
color: #15aa87;
|
||||
}
|
||||
|
||||
.loading>div {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
background-color: currentColor;
|
||||
border: 0 solid currentColor;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.loading>div {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: ball-fussion-ball1 1s 0s ease infinite;
|
||||
}
|
||||
|
||||
.loading>div:nth-child(1) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.loading>div:nth-child(2) {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
z-index: 2;
|
||||
animation-name: ball-fussion-ball2;
|
||||
}
|
||||
|
||||
.loading>div:nth-child(3) {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
animation-name: ball-fussion-ball3;
|
||||
}
|
||||
|
||||
.loading>div:nth-child(4) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
animation-name: ball-fussion-ball4;
|
||||
}
|
||||
|
||||
@keyframes ball-fussion-ball2 {
|
||||
0% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 200%;
|
||||
left: 200%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball-fussion-ball1 {
|
||||
0% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -100%;
|
||||
left: 200%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
z-index: 2;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball-fussion-ball3 {
|
||||
0% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 200%;
|
||||
left: -100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ball-fussion-ball4 {
|
||||
0% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
/* 作者：德育处主任
|
||||
链接：https://juejin.cn/post/7037036742985121800
|
||||
来源：稀土掘金
|
||||
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 */
|
||||
</style>
|
||||
@@ -33,6 +33,9 @@ const userStore = useUserStore()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
username.value = '539943419'
|
||||
password.value = 'zjh030628'
|
||||
onMounted(() => handleLogin())
|
||||
|
||||
let isLogining = false
|
||||
|
||||
|
||||
+321
-2
@@ -1,13 +1,332 @@
|
||||
<template>
|
||||
<div>
|
||||
用户主界面
|
||||
<div :class="['user-main', showSidebar ? '' : 'hide-sidebar']">
|
||||
<div class="user-sidebar">
|
||||
<!-- <el-button @click="handleHideSidebar">hide</el-button> -->
|
||||
<div class="sidebar-item" @click="handleHideSidebar">
|
||||
<div class="sidebar-item-icon">
|
||||
<component class="sidebar-item-icon-noFill" :is="chevronDown"
|
||||
:style="{ transform: showSidebar ? '' : 'rotate(-90deg)' }"></component>
|
||||
</div>
|
||||
<div class="sidebar-item-title">
|
||||
<!-- {{ '隐藏' }} -->
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink v-for="item in menuItem" class="sidebar-item" :to="item.to">
|
||||
<div class="sidebar-item-icon">
|
||||
<component :class="item.iconFill ? 'sidebar-item-icon-noFill' : ''" :is="item.icon"></component>
|
||||
</div>
|
||||
<div class="sidebar-item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="user-content">
|
||||
<el-scrollbar>
|
||||
<router-view></router-view>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="user-bottom-bar">
|
||||
<NuxtLink v-for="item in menuItem" class="bottom-item" :to="item.to">
|
||||
<div class="bottom-item-icon">
|
||||
<component :class="item.iconFill ? 'bottom-item-icon-noFill' : ''" :is="item.icon"></component>
|
||||
</div>
|
||||
<div class="bottom-item-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useUserStore from '~/hooks/pinia/useUserStore';
|
||||
import Cat from '~/components/icons/cat.vue'
|
||||
import chevronDown from '~/components/icons/chevronDown.vue';
|
||||
import Documents from '~/components/icons/documents.vue';
|
||||
import Home from '~/components/icons/home.vue';
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const menuItem = shallowReactive([
|
||||
{
|
||||
title: '主页',
|
||||
icon: Home,
|
||||
iconFill: true,
|
||||
to: '/user/main'
|
||||
}, {
|
||||
title: '文章',
|
||||
icon: Documents,
|
||||
iconFill: true,
|
||||
to: '/user/main/post'
|
||||
}, {
|
||||
title: '账户',
|
||||
icon: Cat,
|
||||
to: '/user/main/account'
|
||||
}, {
|
||||
title: '测试',
|
||||
icon: Cat,
|
||||
to: '/user/main/test'
|
||||
}
|
||||
])
|
||||
|
||||
const showSidebar = ref(true)
|
||||
|
||||
const handleHideSidebar = () => {
|
||||
showSidebar.value = !showSidebar.value
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
userStore.logout()
|
||||
router.push('user/login')
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (userStore.isLogin === false) {
|
||||
return router.replace('/user/login')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-main {
|
||||
width: 100%;
|
||||
height: calc(100vh - 60px);
|
||||
max-height: calc(100vh - 60px);
|
||||
display: grid;
|
||||
grid-template: 1fr 40px / 100px 1fr;
|
||||
transition: grid-template .2s ease;
|
||||
|
||||
.user-content {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
max-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.user-sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / -1;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// gap: 10px;
|
||||
// align-items: start;
|
||||
|
||||
.sidebar-item {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
// justify-content: center;
|
||||
text-decoration: none;
|
||||
padding: 5px 0px;
|
||||
transition: all .2s ease;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e054;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
min-width: 40px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: black;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-left: 6px;
|
||||
text-wrap: nowrap;
|
||||
letter-spacing: 2px;
|
||||
color: black;
|
||||
font-family: PT Serif, Serif;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-bottom-bar {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.bottom-item {
|
||||
height: 30px;
|
||||
aspect-ratio: 1;
|
||||
color: #000;
|
||||
transition: all .2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
&-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-wrap: nowrap;
|
||||
letter-spacing: 2px;
|
||||
color: #000;
|
||||
font-family: PT Serif, Serif;
|
||||
transition: all .2s ease;
|
||||
font-size: 7px;
|
||||
margin-top: 3px;
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
// &:hover {
|
||||
// scale: 1.05;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hide-sidebar {
|
||||
grid-template: 1fr 40px / 40px 1fr;
|
||||
|
||||
// .sidebar-item-title {
|
||||
// // display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.user-main {
|
||||
.user-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
grid-row: 1;
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.user-main {
|
||||
.user-bottom-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.user-main {
|
||||
.user-sidebar {
|
||||
.sidebar-item {
|
||||
.sidebar-item-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: black;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item-icon-noFill {
|
||||
path {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.router-link-exact-active {
|
||||
.sidebar-item-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: #15aa87;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item-icon-noFill {
|
||||
path {
|
||||
fill: none;
|
||||
stroke: #15aa87;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item-title {
|
||||
color: #15aa87 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-bottom-bar {
|
||||
.bottom-item {
|
||||
.bottom-item-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: black;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-item-icon-noFill {
|
||||
path {
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.router-link-exact-active {
|
||||
.bottom-item-icon {
|
||||
svg {
|
||||
path {
|
||||
fill: #15aa87;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-item-icon-noFill {
|
||||
path {
|
||||
fill: none;
|
||||
stroke: #15aa87;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-item-title {
|
||||
color: #15aa87 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleLogout">登出</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useUserStore from '~/hooks/pinia/useUserStore';
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
|
||||
const handleLogout = () => {
|
||||
userStore.logout()
|
||||
router.push('/user/login')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
index
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<nuxt-page></nuxt-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
edit: id-{{ route.params.id }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="post-index">
|
||||
<div class="post-index-title">
|
||||
文章列表
|
||||
</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 }}
|
||||
</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>
|
||||
</div>
|
||||
<el-button class="post-item-footer-btn" @click="handleClickEditBtn(post.id)">
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { postItem } from '~/types/post';
|
||||
import getPostList from '~/utils/getPost';
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const postList = ref<postItem[]>([]);
|
||||
|
||||
const handleClickEditBtn = (id: number) => {
|
||||
router.push(`/user/main/post/edit-${id}`)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
postList.value = await getPostList();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.post-index {
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0 0 10px 0;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
letter-spacing: 4px;
|
||||
text-decoration: none;
|
||||
font-family: PT Serif, Serif;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
&-list {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
|
||||
&-item {
|
||||
// height: 100px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.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>
|
||||
File renamed without changes.
+6
-1
@@ -1,6 +1,7 @@
|
||||
body,html {
|
||||
padding: 0;
|
||||
margin: 0
|
||||
margin: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -10,4 +11,8 @@ body {
|
||||
font-size: 16px;
|
||||
color: #2c3e50;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: #15aa8761 auto 1px;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import useDefaultStore from "~/hooks/pinia/useDefaultStore"
|
||||
import usePostStore from "~/hooks/pinia/usePostStore"
|
||||
import useMiaoFetch from "~/hooks/useMiaoFetch"
|
||||
// import usePostStore from "~/hooks/pinia/usePostStore"
|
||||
import type { postContent, postItem } from "~/types/post"
|
||||
|
||||
export default async function getPostList() {
|
||||
const store = useDefaultStore()
|
||||
const cache = store.getCache('posts')
|
||||
if (cache) {
|
||||
return cache as postItem[]
|
||||
}
|
||||
const response = await $fetch('/api/posts/getPostList')
|
||||
const res = response.data
|
||||
store.setCache('posts', res)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function getPostData(id: number | string) {
|
||||
const postStore = usePostStore()
|
||||
const cache = postStore.getPostCache(`${id}`)
|
||||
if (cache) {
|
||||
return cache
|
||||
}
|
||||
const res = await $fetch('/api/posts/getPostContent', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
id
|
||||
}
|
||||
}) as postContent
|
||||
postStore.setPostCache(`${id}`, res)
|
||||
return res
|
||||
}
|
||||
Reference in new issue
Block a user