mnt-ltd
/
moredoc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成个人中心页基本设计与开发

Browse Source
dev
truthhun 1 year ago
parent 1c20adc803
commit 71f1151464
13 changed files with 358 additions and 293 deletions
Show Stats Download Patch File Download Diff File

4
web/components/UserCard.vue
Unescape View File

@ -108,9 +108,9 @@ export default {
margin-top: 5px;
}
.el-col {
border-right: 1px solid #ddd;
border-right: 1px solid #eee;
&:first-child {
border-left: 1px solid #ddd;
border-left: 1px solid #eee;
}
}
}

198
web/components/UserDocument.vue
Unescape View File

@ -1,92 +1,88 @@
<template>
<div class="com-user-document">
<el-card shadow="never">
<el-table v-loading="loading" :data="docs" style="width: 100%">
<el-table-column prop="title" label="名称" min-width="300">
<template slot-scope="scope">
<nuxt-link
target="_blank"
:to="{
name: 'document-id',
params: { id: scope.row.id },
}"
class="el-link el-link--default doc-title"
>
<img :src="`/static/images/${scope.row.icon}_24.png`" alt="" />
{{ scope.row.title }}
</nuxt-link>
</template>
</el-table-column>
<el-table-column prop="score" label="评分" width="110">
<template slot-scope="scope">
<el-rate
:value="scope.row.score || 0.0"
disabled
score-template="{value}"
></el-rate>
</template>
</el-table-column>
<el-table-column prop="view_count" label="浏览" width="70">
<template slot-scope="scope">{{
scope.row.view_count || 0
}}</template>
</el-table-column>
<el-table-column prop="download_count" label="下载" width="70">
<template slot-scope="scope">{{
scope.row.download_count || 0
}}</template>
</el-table-column>
<el-table-column prop="favorite_count" label="收藏" width="70">
<template slot-scope="scope">{{
scope.row.favorite_count || 0
}}</template>
</el-table-column>
<el-table-column prop="page" label="页数" width="70">
<template slot-scope="scope">{{ scope.row.pages || '-' }}</template>
</el-table-column>
<el-table-column prop="page" label="价格" width="70">
<template slot-scope="scope">{{ scope.row.price || '0' }}</template>
</el-table-column>
<el-table-column prop="size" label="大小" width="100">
<template slot-scope="scope">{{
formatBytes(scope.row.size)
}}</template>
</el-table-column>
<el-table-column prop="created_at" label="上传" width="100">
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
v-if="userId === user.id"
label="操作"
width="70"
fixed="right"
>
<template slot-scope="scope">
<el-tooltip content="编辑文档" placement="top">
<el-button
type="text"
@click="updateDocument(scope.row)"
icon="el-icon-edit"
></el-button>
</el-tooltip>
<el-tooltip content="删除文档" placement="top">
<el-button
type="text"
icon="el-icon-delete"
@click="deleteDocument(scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
<el-table v-loading="loading" :data="docs" style="width: 100%">
<el-table-column prop="title" label="名称" min-width="300">
<template slot-scope="scope">
<nuxt-link
target="_blank"
:to="{
name: 'document-id',
params: { id: scope.row.id },
}"
class="el-link el-link--default doc-title"
>
<img :src="`/static/images/${scope.row.icon}_24.png`" alt="" />
{{ scope.row.title }}
</nuxt-link>
</template>
</el-table-column>
<el-table-column prop="score" label="评分" width="110">
<template slot-scope="scope">
<el-rate
:value="scope.row.score || 0.0"
disabled
score-template="{value}"
></el-rate>
</template>
</el-table-column>
<el-table-column prop="view_count" label="浏览" width="70">
<template slot-scope="scope">{{ scope.row.view_count || 0 }}</template>
</el-table-column>
<el-table-column prop="download_count" label="下载" width="70">
<template slot-scope="scope">{{
scope.row.download_count || 0
}}</template>
</el-table-column>
<el-table-column prop="favorite_count" label="收藏" width="70">
<template slot-scope="scope">{{
scope.row.favorite_count || 0
}}</template>
</el-table-column>
<el-table-column prop="page" label="页数" width="70">
<template slot-scope="scope">{{ scope.row.pages || '-' }}</template>
</el-table-column>
<el-table-column prop="page" label="价格" width="70">
<template slot-scope="scope">{{ scope.row.price || '0' }}</template>
</el-table-column>
<el-table-column prop="size" label="大小" width="100">
<template slot-scope="scope">{{
formatBytes(scope.row.size)
}}</template>
</el-table-column>
<el-table-column prop="created_at" label="上传" width="100">
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
v-if="userId === user.id"
label="操作"
width="70"
fixed="right"
>
<template slot-scope="scope">
<el-tooltip content="编辑文档" placement="top">
<el-button
type="text"
@click="updateDocument(scope.row)"
icon="el-icon-edit"
></el-button>
</el-tooltip>
<el-tooltip content="删除文档" placement="top">
<el-button
type="text"
icon="el-icon-delete"
@click="deleteDocument(scope.row)"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="total > 0"
:current-page="query.page"
@ -100,6 +96,7 @@
:small="isMobile"
:total="total"
@current-change="pageChange"
class="mgt-20px"
>
</el-pagination>
<el-dialog
@ -233,33 +230,6 @@ export default {
<style lang="scss">
.com-user-document {
.el-card {
.el-card__header {
padding-left: 0;
font-weight: 400;
}
.el-card__body {
padding: 15px 0 20px 0;
a {
line-height: 40px;
display: inline-block;
max-width: 100%;
}
}
}
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.el-tabs__item {
height: 60px;
line-height: 60px;
}
.el-tabs__item.is-active {
border-top: 0 !important;
}
.doc-title {
display: block;
white-space: nowrap;

70
web/components/UserDynamic.vue
Unescape View File

@ -1,29 +1,27 @@
<template>
<div class="com-user-dynamic">
<el-card shadow="never">
<el-table v-loading="loading" :data="dynamics" style="width: 100%">
<el-table-column
prop="created_at"
label="时间"
:width="isMobile ? 90 : 160"
>
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="title" label="内容">
<template slot-scope="scope">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="scope.row.content"></span>
</template>
</el-table-column>
</el-table>
</el-card>
<el-table v-loading="loading" :data="dynamics" style="width: 100%">
<el-table-column
prop="created_at"
label="时间"
:width="isMobile ? 90 : 160"
>
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="title" label="内容">
<template slot-scope="scope">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="scope.row.content"></span>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="total > 0"
:current-page="query.page"
@ -37,6 +35,7 @@
:small="isMobile"
:total="total"
@current-change="pageChange"
class="mgt-20px"
>
</el-pagination>
</div>
@ -111,29 +110,6 @@ export default {
<style lang="scss">
.com-user-dynamic {
.el-card {
.el-card__header {
padding-left: 0;
font-weight: 400;
}
.el-card__body {
padding: 18px 0 20px;
}
}
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.el-tabs__item {
height: 60px;
line-height: 60px;
}
.el-tabs__item.is-active {
border-top: 0 !important;
}
.doc-title {
display: block;
white-space: nowrap;

152
web/components/UserFavorite.vue
Unescape View File

@ -1,68 +1,66 @@
<template>
<div class="com-user-favorite">
<el-card shadow="never">
<el-table v-loading="loading" :data="favorites" style="width: 100%">
<el-table-column prop="title" label="文档" min-width="300" fixed="left">
<template slot-scope="scope">
<nuxt-link
target="_blank"
:to="{
name: 'document-id',
params: { id: scope.row.document_id },
}"
class="el-link el-link--default doc-title"
<el-table v-loading="loading" :data="favorites" style="width: 100%">
<el-table-column prop="title" label="文档" min-width="300" fixed="left">
<template slot-scope="scope">
<nuxt-link
target="_blank"
:to="{
name: 'document-id',
params: { id: scope.row.document_id },
}"
class="el-link el-link--default doc-title"
>
<img :src="`/static/images/${scope.row.icon}_24.png`" alt="" />
{{ scope.row.title }}
</nuxt-link>
</template>
</el-table-column>
<el-table-column prop="score" label="评分" width="110">
<template slot-scope="scope">
<el-rate
:value="scope.row.score || 0.0"
disabled
score-template="{value}"
></el-rate>
</template>
</el-table-column>
<el-table-column prop="page" label="页数" width="70">
<template slot-scope="scope">{{ scope.row.pages || '-' }}</template>
</el-table-column>
<el-table-column prop="size" label="大小" width="100">
<template slot-scope="scope">{{
formatBytes(scope.row.size)
}}</template>
</el-table-column>
<el-table-column prop="created_at" label="收藏时间" width="160">
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
label="操作"
width="70"
fixed="right"
v-if="userId === user.id"
>
<template slot-scope="scope">
<el-tooltip content="移除收藏" placement="top">
<el-button
type="text"
icon="el-icon-delete"
@click="removeFavorite(scope.row)"
>移除</el-button
>
<img :src="`/static/images/${scope.row.icon}_24.png`" alt="" />
{{ scope.row.title }}
</nuxt-link>
</template>
</el-table-column>
<el-table-column prop="score" label="评分" width="110">
<template slot-scope="scope">
<el-rate
:value="scope.row.score || 0.0"
disabled
score-template="{value}"
></el-rate>
</template>
</el-table-column>
<el-table-column prop="page" label="页数" width="70">
<template slot-scope="scope">{{ scope.row.pages || '-' }}</template>
</el-table-column>
<el-table-column prop="size" label="大小" width="100">
<template slot-scope="scope">{{
formatBytes(scope.row.size)
}}</template>
</el-table-column>
<el-table-column prop="created_at" label="收藏时间" width="160">
<template slot-scope="scope">
<el-tooltip
:content="formatDatetime(scope.row.created_at)"
placement="top"
>
<span>{{ formatRelativeTime(scope.row.created_at) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
label="操作"
width="70"
fixed="right"
v-if="userId === user.id"
>
<template slot-scope="scope">
<el-tooltip content="移除收藏" placement="top">
<el-button
type="text"
icon="el-icon-delete"
@click="removeFavorite(scope.row)"
>移除</el-button
>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="total > 0"
:current-page="query.page"
@ -75,6 +73,7 @@
:pager-count="isMobile ? 5 : 7"
:small="isMobile"
:total="total"
class="mgt-20px"
>
</el-pagination>
</div>
@ -167,35 +166,6 @@ export default {
<style lang="scss">
.com-user-favorite {
.el-card {
.el-card__header {
padding-left: 0;
font-weight: 400;
}
.el-card__body {
padding: 15px 0 20px 0;
}
}
.float-right {
position: relative;
top: -20px;
}
.el-table {
margin-top: -1px;
}
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.el-tabs__item {
height: 60px;
line-height: 60px;
}
.el-tabs__item.is-active {
border-top: 0 !important;
}
.doc-title {
display: block;
white-space: nowrap;

35
web/layouts/default.vue
Unescape View File

@ -83,11 +83,12 @@
<el-dropdown-item command="me"
><i class="fa fa-user-o"></i> 个人中心</el-dropdown-item
>
<el-dropdown-item command="profile"
<!-- <el-dropdown-item command="profile"
><i class="fa fa-edit"></i> 个人资料</el-dropdown-item
>
> -->
<el-dropdown-item command="upload"
><i class="fa fa-cloud-upload"></i>上传文档</el-dropdown-item
><i class="el-icon-upload2 dropdown-upload"></i
>上传文档</el-dropdown-item
>
<el-dropdown-item v-if="allowPages.length > 0" command="admin">
<i class="el-icon-box"></i> 管理后台</el-dropdown-item
@ -252,13 +253,6 @@
</div>
</div>
</el-footer>
<el-dialog
title="个人资料"
:visible.sync="userinfoDialogVisible"
:width="isMobile ? '95%' : '640px'"
>
<form-userinfo v-if="userinfoDialogVisible" />
</el-dialog>
<el-drawer
:visible.sync="menuDrawerVisible"
size="60%"
@ -328,17 +322,9 @@
<i class="fa fa-user-o"></i> &nbsp;个人中心
</div>
</li>
<li>
<div
class="el-link el-link--default"
@click="userinfoDialogVisible = !userinfoDialogVisible"
>
<i class="fa fa-edit"></i> &nbsp;个人资料
</div>
</li>
<li>
<div @click="goToLink(`/upload`)" class="el-link el-link--default">
<i class="fa fa-cloud-upload"></i> &nbsp;上传文档
<i class="el-icon-upload2"></i> 上传文档
</div>
</li>
<li>
@ -391,7 +377,6 @@ export default {
search: {
wd: '',
},
userinfoDialogVisible: false,
friendlinks: [],
timeouter: null,
currentYear: new Date().getFullYear(),
@ -520,9 +505,6 @@ export default {
case 'me':
this.$router.push(`/me`)
break
case 'profile':
this.userinfoDialogVisible = true
break
case 'admin':
this.$router.push('/admin')
break
@ -712,6 +694,10 @@ export default {
}
}
}
.dropdown-upload {
font-size: 17px;
margin-left: -2px;
}
.page {
width: $default-width;
min-width: $min-width !important;
@ -785,6 +771,9 @@ export default {
& > li {
margin: 5px 0;
}
.el-icon-upload2 {
font-size: 17px;
}
}
.el-collapse {
.el-icon-menu {

122
web/pages/me.vue
Unescape View File

@ -0,0 +1,122 @@
<template>
<div class="page page-me">
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="never">
<user-card :user="user" />
<nuxt-link to="/upload">
<el-button
type="primary"
icon="el-icon-upload2"
class="btn-block mgt-20px"
>上传文档</el-button
>
</nuxt-link>
<el-menu
class="mgt-20px"
:router="true"
:default-active="defaultActive.value"
>
<el-menu-item
v-for="item in tabs"
:key="item.value"
:index="item.value"
>
<i :class="item.icon"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
</el-menu>
</el-card>
</el-col>
<el-col :span="18">
<el-card shadow="never">
<div slot="header">{{ defaultActive.label }}</div>
<div class="nuxt-child">
<nuxt-child :user="user" />
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'PageMe',
computed: {
...mapGetters('user', ['user']),
...mapGetters('setting', ['settings']),
},
data() {
return {
defaultActive: {
value: '/me',
label: '我的动态',
},
tabs: [
{
label: '我的动态',
value: '/me',
icon: 'el-icon-magic-stick',
},
{
label: '我的文档',
value: '/me/document',
icon: 'el-icon-document',
},
{
label: '我的收藏',
value: '/me/favorite',
icon: 'el-icon-star-off',
},
{
label: '我的下载',
value: '/me/download',
icon: 'el-icon-download',
},
{
label: '安全设置',
value: '/me/profile',
icon: 'fa fa-shield',
},
],
}
},
head() {
return {
title: `${this.defaultActive.label} - ${this.user.username} - ${this.settings.system.sitename}`,
}
},
watch: {
'$route.path': {
handler(val) {
// val 去掉最后的斜杠
val = val.replace(/\/$/, '')
const item = this.tabs.find((item) => item.value === val)
this.defaultActive = {
value: val,
label: item.label || '我的动态',
}
},
immediate: true,
},
},
}
</script>
<style lang="scss">
.page-me {
.el-menu {
border-right: 0;
}
.fa-shield {
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
vertical-align: middle;
}
.nuxt-child {
min-height: calc(100vh - 190px);
}
}
</style>

15
web/pages/me/document.vue
Unescape View File

@ -0,0 +1,15 @@
<template>
<div>
<user-document :user-id="user.id" />
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
default: () => ({}),
},
},
}
</script>

3
web/pages/me/download.vue
Unescape View File

@ -0,0 +1,3 @@
<template>
<div>download</div>
</template>

15
web/pages/me/favorite.vue
Unescape View File

@ -0,0 +1,15 @@
<template>
<div>
<user-favorite :user-id="user.id" />
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
default: () => ({}),
},
},
}
</script>

24
web/pages/me/index.vue
Unescape View File

@ -1,24 +1,18 @@
<template>
<div class="page page-me">
<el-row :gutter="20">
<el-col :span="6">
<el-card shadow="never">
<user-card :user="user" />
</el-card>
</el-col>
<el-col :span="18">
<el-card shadow="never"></el-card>
</el-col>
</el-row>
<div>
<user-dynamic :user-id="user.id" />
</div>
</template>
<script>
export default {
name: 'PageMe',
computed: {
user() {
return this.$store.state.user
props: {
user: {
type: Object,
default: () => ({}),
},
},
data() {
return {}
},
}
</script>

3
web/pages/me/password.vue
Unescape View File

@ -0,0 +1,3 @@
<template>
<div>password</div>
</template>

5
web/pages/me/profile.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div>
<form-userinfo />
</div>
</template>

5
web/pages/user/_id.vue
Unescape View File

@ -67,7 +67,7 @@ export default {
},
head() {
return {
title: `[个人主页]${this.user.username} - ${this.settings.system.sitename}`,
title: `[个人主页] ${this.user.username} - ${this.settings.system.sitename}`,
meta: [
{
hid: 'keywords',
@ -119,6 +119,9 @@ export default {
& > .el-tabs__content {
min-height: calc(100vh - 280px);
}
.el-tabs__header {
margin-bottom: 20px;
}
}
}

Write Preview
Loading…
Cancel
Save