peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/ronger-x/nebula

Browse Source
This commit is contained in:
ronger 2024-02-16 20:30:18 +08:00
commit e503e54d80
10 changed files with 217 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/archive/list.vue
View File

@ -12,7 +12,7 @@
d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path d="M12 22c3.859 0 7-3.141 7-7s-3.141-7-7-7c-3.86 0-7 3.141-7 7s3.14 7 7 7zm0-12c2.757 0 5 2.243 5 5s-2.243 5-5 5-5-2.243-5-5 2.243-5 5-5zm-1-8H7v5.518a8.957 8.957 0 0 1 4-1.459V2zm6 0h-4v4.059a8.957 8.957 0 0 1 4 1.459V2z"></path><path
d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg> d="m10.019 15.811-.468 2.726L12 17.25l2.449 1.287-.468-2.726 1.982-1.932-2.738-.398L12 11l-1.225 2.481-2.738.398z"></path></svg>
</span> </span>
<span style="font-size: 20px" v-html="article.articleTitle"> </span> <span class="articleTitle" v-html="article.articleTitle"> </span>
<el-tag size="mini" v-for="tag in article.tags" :key="tag.idTag" style="margin-right: 10px"> {{ tag.tagTitle }}</el-tag> <el-tag size="mini" v-for="tag in article.tags" :key="tag.idTag" style="margin-right: 10px"> {{ tag.tagTitle }}</el-tag>
<div class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div> <div class="text-muted article-summary-md" v-html="article.articlePreviewContent"></div>
@ -81,5 +81,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.articleTitle {
font-size: 20px;
font-weight: 600;
}
</style> </style>

2
components/common/comment/main.vue
View File

@ -266,7 +266,7 @@ export default {
tab: '\t', tab: '\t',
cdn: apiConfig.VDITOR, cdn: apiConfig.VDITOR,
cache: { cache: {
enable: this.postId ? false : true, enable: !this.postId,
id: this.postId ? this.postId : '', id: this.postId ? this.postId : '',
}, },
after() { after() {

24
components/common/product/list.vue
View File

@ -1,18 +1,30 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<el-row class="row-cards row-deck" :gutter="20"> <el-row class="row-cards row-deck" :gutter="20">
<el-col :span="8" v-for="product in products.list" :key="product.idProduct" style="margin-right: 20px;"> <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" v-for="product in products.list" :key="product.idProduct" style="margin-bottom: 10px;">
<el-card :body-style="{ padding: '20px' }"> <el-card :body-style="{ padding: '20px' }">
<el-col :span="24"> <el-col :span="24">
<el-image :src="product.productImgUrl" <el-image :src="product.productImgUrl"
style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image> style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
</el-col> </el-col>
<el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;"> <el-col :span="24">
<span v-html="product.productTitle"></span> <el-tag
style="margin-right: 0.5rem;"
v-for="tag in product.tags?.split(',') || []"
:key="tag"
size="small"
effect="plain">
# {{ tag }}
</el-tag>
</el-col> </el-col>
<el-col style="padding-top: 30px;text-align: right;"> <el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
<!-- <el-button type="text" class="button">立即购买</el-button>--> <span style="font-weight: bolder;" v-html="product.productTitle"></span>
<el-button type="text" class="button" @click="handleClick(product.idProduct)">查看详情</el-button> </el-col>
<el-col span="24">
<small v-html="product.productDescription"></small>
</el-col>
<el-col :span="24" style="text-align: center;">
<el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
</el-col> </el-col>
</el-card> </el-card>
</el-col> </el-col>

12
config/api.config.js
View File

@ -8,8 +8,8 @@ const apisMap = {
PROXY: '/proxy', PROXY: '/proxy',
SOCKET: 'http://localhost:3000/ws', SOCKET: 'http://localhost:3000/ws',
GRAVATAR: '/proxy/static.rymcu.com/avatar', GRAVATAR: '/proxy/static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/', VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme' VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
}, },
test: { test: {
FE: 'https://rymcu.com', FE: 'https://rymcu.com',
@ -18,8 +18,8 @@ const apisMap = {
PROXY: 'https://static.rymcu.com/proxy', PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://rymcu.com/wss', SOCKET: 'https://rymcu.com/wss',
GRAVATAR: 'https://static.rymcu.com/avatar', GRAVATAR: 'https://static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/', VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme' VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
}, },
production: { production: {
FE: 'https://rymcu.com', FE: 'https://rymcu.com',
@ -28,8 +28,8 @@ const apisMap = {
PROXY: 'https://static.rymcu.com/proxy', PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://rymcu.com/wss', SOCKET: 'https://rymcu.com/wss',
GRAVATAR: 'https://static.rymcu.com/avatar', GRAVATAR: 'https://static.rymcu.com/avatar',
VDITOR: 'https://static.rymcu.com/vditor@3.8.14/', VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme' VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
} }
} }

4
nuxt.config.js
View File

@ -46,7 +46,7 @@ export default {
** Global CSS ** Global CSS
*/ */
css: [ css: [
'element-ui/lib/theme-chalk/index.css', 'element-ui/lib/theme-chalk/index.css'
], ],
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
@ -72,7 +72,7 @@ export default {
'@nuxtjs/axios', '@nuxtjs/axios',
'@nuxtjs/proxy', '@nuxtjs/proxy',
'@nuxtjs/auth-next', '@nuxtjs/auth-next',
'@nuxtjs/device', '@nuxtjs/device'
], ],
auth: { auth: {
redirect: { redirect: {

2
package.json
View File

@ -27,7 +27,7 @@
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"save-svg-as-png": "^1.4.17", "save-svg-as-png": "^1.4.17",
"simple-icons": "^6.23.0", "simple-icons": "^6.23.0",
"vditor": "^3.8.18", "vditor": "^3.9.8",
"vue-cropper": "^0.6.2", "vue-cropper": "^0.6.2",
"vue-sse": "^2.5.2", "vue-sse": "^2.5.2",
"vuejs-avataaars": "^4.0.1" "vuejs-avataaars": "^4.0.1"

49
pages/admin/topics.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<el-row :gutter="8" style="margin-top: 20px;"> <div>
<el-row style="margin-top: 20px;">
<el-col style="margin-bottom: 1rem;"> <el-col style="margin-bottom: 1rem;">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
@ -9,29 +12,32 @@
<el-col style="margin: .5rem;"> <el-col style="margin: .5rem;">
<el-button size="small" @click="createTopic" plain>创建专题</el-button> <el-button size="small" @click="createTopic" plain>创建专题</el-button>
</el-col> </el-col>
</el-row> <el-row :gutter="20">
<el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic"> <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
<el-card> <el-card shadow="never">
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<el-row :gutter="20">
<el-col :span="4" style="text-align: right;"> <el-col :span="4" style="text-align: right;">
<img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img"> <img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
class="topic-brand-img">
</el-col> </el-col>
<el-col :span="20" > <el-col :span="20" >
<el-col> <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
<el-col> <span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
<el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false"><h4>{{
topic.topicTitle
}}</h4>
</el-link> </el-link>
</el-col> <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
<el-col>
<div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
</el-col>
</el-col>
</el-col>
</div>
</el-card>
</el-col> </el-col>
</el-row> </el-row>
</div>
</el-card>
</el-col>
</el-row> </div>
</template> </template>
<script> <script>
@ -70,5 +76,16 @@
</script> </script>
<style scoped> <style scoped>
.topic-brand-img {
margin-top: 40%;
}
.text-content {
height: 70px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style> </style>

2
pages/article/post/_article_id.vue
View File

@ -197,7 +197,7 @@
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor); // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
}, },
theme: { theme: {
cdn: apiConfig.VDITOR_CSS path: apiConfig.VDITOR_CSS
} }
}, },
upload: { upload: {

10
pages/product/_product_id.vue
View File

@ -8,6 +8,16 @@
{{ product.productTitle }} {{ product.productTitle }}
</h1> </h1>
</div> </div>
<div style="margin: 1rem 0;">
<el-tag
style="margin-right: 0.5rem;"
v-for="tag in product.tags?.split(',') || []"
:key="tag"
size="small"
effect="plain">
# {{ tag }}
</el-tag>
</div>
<div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="product.productContent" <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="product.productContent"
style="overflow: hidden;"></div> style="overflow: hidden;"></div>
</div> </div>

128
pages/user/settings/avatar.vue
View File

@ -1,35 +1,60 @@
<template> <template>
<el-row> <el-row>
<el-col> <el-col :spn="12">
<h1>我的头像</h1> <h1>我的头像</h1>
</el-col> </el-col>
<el-col> <el-col>
<el-form :model="user" ref="user" label-width="100px"> <el-form :model="user" ref="user" label-width="100px">
<el-form-item> <el-form-item>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="12">
<client-only>
<div class="cropperBox">
<!-- <vue-cropper-->
<!-- :autoCrop="autoCrop"-->
<!-- :img="avatarUrl"-->
<!-- ref="cropper"-->
<!-- :fixed="true"-->
<!-- @realTime="realTime"-->
<!-- @imgMoving="cropImage"-->
<!-- @cropMoving="cropImage"-->
<!-- />-->
<vue-cropper <vue-cropper
ref="cropper"
:aspect-ratio="1 / 1"
:src="avatarUrl"
:checkCrossOrigin="false"
:checkOrientation="false"
:imgStyle="{width: '360px'}"
:autoCropArea="1"
:autoCrop="autoCrop" :autoCrop="autoCrop"
preview=".preview" :img="avatarUrl"
ref="cropper"
:fixed="true"
@realTime="realTime"
/> />
</div>
</client-only>
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
<el-col :span="8" style="max-width: 20rem;max-height: 20rem;"> <el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
<div class="preview preview-large"/> <div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
</el-col> style="overflow:hidden;margin: 0 auto">
<el-col :span="6" style="height: 20rem;"> <img :src="cropImg.url" :style="cropImg.img">
<div class="preview preview-medium"/> </div>
</el-col>
<el-col :span="4" style="height: 20rem;">
<div class="preview preview-small"/>
</el-col> </el-col>
<!-- <el-col :span="6" style="height: 20rem;">-->
<!-- <div class="preview preview-medium" style="overflow:hidden;">-->
<!-- <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"-->
<!-- style="overflow:hidden;margin: 0 auto">-->
<!-- <img :src="cropImg.url" :style="cropImg.img">-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="4" style="height: 20rem;">-->
<!-- <div class="preview preview-small" style="overflow:hidden;">-->
<!-- <div :style="{height:(cropImg.h*0.2)+'px',width:cropImg.w+'px'}"-->
<!-- style="overflow:hidden;margin: 0 auto">-->
<!-- <img :src="cropImg.url" :style="cropImg.img">-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; <div class="preview preview-small">&ndash;&gt;-->
<!-- &lt;!&ndash; <img :src="cropImg.url"/>&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- </el-col>-->
</el-col> </el-col>
<el-col :span="24" style="margin-top: 2rem;"> <el-col :span="24" style="margin-top: 2rem;">
<el-upload <el-upload
@ -62,7 +87,7 @@
</el-upload> </el-upload>
<el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button> <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>
<el-button type="primary" round plain @click.prevent="reset">重置</el-button> <el-button type="primary" round plain @click.prevent="reset">重置</el-button>
<el-button type="primary" round plain @click.prevent="cropImage">提交</el-button> <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
@ -75,15 +100,13 @@
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import Avataaars from 'vuejs-avataaars'; import Avataaars from 'vuejs-avataaars';
import saveSvg from 'save-svg-as-png'; import saveSvg from 'save-svg-as-png';
import VueCropper from 'vue-cropper';
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar'); const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
export default { export default {
name: "avatar", name: "avatar",
middleware: 'auth', middleware: 'auth',
components: { components: {
Avataaars, Avataaars
VueCropper
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -97,14 +120,19 @@ export default {
return { return {
user: {}, user: {},
loading: false, loading: false,
oldAvatarUrl: '',
avatarUrl: '', avatarUrl: '',
avatar: {}, avatar: {},
cropImg: '', cropImg: '',
data: null, data: null,
autoCrop: true autoCrop: true,
} }
}, },
methods: { methods: {
realTime(data) {
console.log(data.img)
this.cropImg = data;
},
genAvatar() { genAvatar() {
let _ts = this; let _ts = this;
let user = _ts.user let user = _ts.user
@ -116,7 +144,6 @@ export default {
user.avatarType = 1; user.avatarType = 1;
user.avatarUrl = uri; user.avatarUrl = uri;
_ts.$set(_ts, 'avatarUrl', uri); _ts.$set(_ts, 'avatarUrl', uri);
_ts.$refs.cropper.replace(uri);
} else { } else {
_ts.$message.error('头像上传失败 !'); _ts.$message.error('头像上传失败 !');
} }
@ -159,33 +186,34 @@ export default {
} else { } else {
_ts.$set(_ts, 'user', res); _ts.$set(_ts, 'user', res);
_ts.$set(_ts, 'avatarUrl', res.avatarUrl); _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
_ts.$refs.cropper.replace(res.avatarUrl); _ts.$set(_ts, 'oldAvatarUrl', res.avatarUrl);
// _ts.webImageToBase64(res.user.avatarUrl); // _ts.webImageToBase64(res.user.avatarUrl);
} }
} }
}) })
}, },
reset() { reset() {
this.$refs.cropper.reset(); this.avatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
// this.$refs.cropper.clearCrop();
}, },
// get image data for post processing, e.g. upload or setting image src // get image data for post processing, e.g. upload or setting image src
cropImage() { cropImage() {
let _ts = this; let _ts = this;
try { this.$refs.cropper.getCropData(data => {
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
} catch (e) {
_ts.$message.error('图片获取失败 !');
return;
}
let user = _ts.user; let user = _ts.user;
user.avatarType = 1; user.avatarUrl = data;
user.avatarUrl = _ts.cropImg; user.avatarType = '1';
_ts.updateUser(user); _ts.$set(_ts, 'user', user);
_ts.$set(_ts, 'avatarUrl', data);
})
}, },
updateUser(user) { updateUser() {
let _ts = this; let _ts = this;
let user = _ts.user;
_ts.$refs['user'].validate((valid) => { _ts.$refs['user'].validate((valid) => {
if (valid) { if (valid) {
this.$refs.cropper.getCropData(data => {
user.avatarUrl = data
_ts.$axios.$patch('/api/user-info/update', user).then(function (res) { _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
if (res) { if (res) {
if (res.message) { if (res.message) {
@ -198,6 +226,7 @@ export default {
} }
} }
}) })
});
} else { } else {
_ts.$message.error('数据异常 !'); _ts.$message.error('数据异常 !');
} }
@ -209,7 +238,6 @@ export default {
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function () {
_ts.$set(_ts, 'avatarUrl', this.result); _ts.$set(_ts, 'avatarUrl', this.result);
_ts.$refs.cropper.replace(this.result);
} }
}, },
compress(img, width, height, ratio) { compress(img, width, height, ratio) {
@ -312,6 +340,12 @@ export default {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
} }
.preview-large img {
object-fit: contain;
width: 16rem;
height: 16rem;
}
.preview-large { .preview-large {
width: 16rem; width: 16rem;
height: 16rem; height: 16rem;
@ -324,6 +358,13 @@ export default {
overflow: hidden; overflow: hidden;
} }
.preview-medium img {
object-fit: contain;
width: 8rem;
height: 8rem;
}
.preview-medium { .preview-medium {
width: 8rem; width: 8rem;
height: 8rem; height: 8rem;
@ -334,8 +375,10 @@ export default {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #ffffff; background-color: #ffffff;
overflow: hidden; overflow: hidden;
} }
.preview-small { .preview-small {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -347,4 +390,17 @@ export default {
background-color: #ffffff; background-color: #ffffff;
overflow: hidden; overflow: hidden;
} }
.preview-small img {
object-fit: contain;
width: 2rem;
height: 2rem;
}
.cropperBox {
width: 100%;
height: 256px;
margin-bottom: 20px;
border: 1px solid #F2F6FC;
}
</style> </style>