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

修复

Browse Source
This commit is contained in:
祝梦园 2023-09-08 18:15:07 +08:00
parent 0bddb6b27a
commit 4d49021f41
8 changed files with 115 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config/api.config.js
View File

@ -3,7 +3,7 @@ import {NODE_ENV} from '../environment'
const apisMap = { const apisMap = {
development: { development: {
FE: 'http://localhost:3000', FE: 'http://localhost:3000',
BASE: 'http://localhost:8099/forest', BASE: 'https://rymcu.com',
CDN: '', CDN: '',
PROXY: '/proxy', PROXY: '/proxy',
SOCKET: 'http://localhost:3000/ws', SOCKET: 'http://localhost:3000/ws',
@ -12,11 +12,11 @@ const apisMap = {
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme' VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
}, },
test: { test: {
FE: 'https://test.rymcu.com', FE: 'https://rymcu.com',
BASE: 'https://test.rymcu.com', BASE: 'https://rymcu.com',
CDN: 'https://static.rymcu.com', CDN: 'https://static.rymcu.com',
PROXY: 'https://static.rymcu.com/proxy', PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://test.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.8.14/',
VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme' VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'

6
nuxt.config.js
View File

@ -58,8 +58,8 @@ export default {
{src: '~/plugins/axios'}, {src: '~/plugins/axios'},
{src: '~/plugins/element-ui'}, {src: '~/plugins/element-ui'},
{src: '~/plugins/vditor', ssr: false}, {src: '~/plugins/vditor', ssr: false},
{src: '~/plugins/vue-sse'} {src: '~/plugins/vue-sse'},
// {src: '~/plugins/vue-cropper', ssr: false} {src: '~/plugins/vue-cropper', ssr: false}
], ],
/* /*
** Nuxt.js dev-modules ** Nuxt.js dev-modules
@ -116,7 +116,7 @@ export default {
proxy: [ //proxy配置 proxy: [ //proxy配置
['/api', { ['/api', {
target: apiConfig.BASE, //api请求路径 target: apiConfig.BASE, //api请求路径
pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'} //重定向请求路径，防止路由、api路径的冲突 pathRewrite: {'^/api': isDevMode ? '/api' : '/api'} //重定向请求路径，防止路由、api路径的冲突
}], }],
['/ws', { ['/ws', {
target: apiConfig.BASE //api请求路径 target: apiConfig.BASE //api请求路径

3
package.json
View File

@ -13,6 +13,7 @@
"prepare": "husky install" "prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"@babel/types": "^7.21.2",
"@chenfengyuan/vue-qrcode": "^1.0.2", "@chenfengyuan/vue-qrcode": "^1.0.2",
"@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54", "@nuxtjs/auth-next": "^5.0.0-1667386184.dfbbb54",
"@nuxtjs/axios": "^5.13.1", "@nuxtjs/axios": "^5.13.1",
@ -27,7 +28,7 @@
"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.8.18",
"vue-cropperjs": "^4.2.0", "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"
}, },

3
pages/admin/tag/post/_tag_id.vue
View File

@ -120,8 +120,7 @@
<script> <script>
import Vue from "vue"; import Vue from "vue";
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import VueCropper from "vue-cropperjs"; import VueCropper from "vue-cropper";
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config'; import apiConfig from '~/config/api.config';
export default { export default {

3
pages/admin/topic/post/_topic_id.vue
View File

@ -118,8 +118,7 @@
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs'; import VueCropper from 'vue-cropper';
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config'; import apiConfig from '~/config/api.config';
export default { export default {

159
pages/portfolio/post/_portfolio_id.vue
View File

@ -31,41 +31,50 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-card> <el-card>
<vue-cropper <div>
:aspect-ratio="1" <div class="cropperBox">
:autoCrop="autoCrop" <vue-cropper
:autoCropArea="1" :aspect-ratio="1"
:fixedNumber="[1,2]" :autoCrop="autoCrop"
:checkCrossOrigin="false" :autoCropArea="1"
:checkOrientation="false" :fixedNumber="[1,2]"
:imgStyle="{'width': '200px'}" :checkCrossOrigin="false"
:img="headImgUrl" :checkOrientation="false"
preview=".preview" :img="headImgUrl"
ref="cropper" preview=".preview"
v-if="headImgUrl" ref="cropper"
/> @realTime="realTime"
/>
<div class="preview preview-large"/>
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
<div class="portfolioDescription">
{{ portfolio.portfolioDescription }}
</div>
<el-upload
:before-upload="beforeAvatarUpload"
:multiple="true"
:show-file-list="false"
action=""
class="avatar-uploader">
<div>
<el-button plain round type="primary">上传</el-button>
</div> </div>
</el-upload> <div class="cropperBox">
<el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置 <div :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
</el-button> style="overflow:hidden;margin: 0 auto">
<el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button> <img :src="cropImg.url" :style="cropImg.img">
<p style="color: red;padding-right: 5px;">* </div>
<span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span> </div>
</p>
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
<div class="portfolioDescription">
{{ portfolio.portfolioDescription }}
</div>
<div class="button_box">
<el-upload
:before-upload="beforeAvatarUpload"
:multiple="true"
:show-file-list="false"
action=""
class="avatar-uploader">
<div>
<el-button plain round type="primary">上传</el-button>
</div>
</el-upload>
<el-button @click="reset" style="margin-left: 10px" plain round type="primary">重置
</el-button>
</div>
</div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -85,8 +94,6 @@
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import {mapState} from 'vuex'; import {mapState} from 'vuex';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import apiConfig from '~/config/api.config'; import apiConfig from '~/config/api.config';
export default { export default {
@ -103,9 +110,7 @@ export default {
.catch(err => error({statusCode: 404})) .catch(err => error({statusCode: 404}))
]) ])
}, },
components: {
VueCropper
},
computed: { computed: {
...mapState({ ...mapState({
portfolioDetail: state => state.portfolio.detail.data, portfolioDetail: state => state.portfolio.detail.data,
@ -160,6 +165,10 @@ export default {
} }
}, },
methods: { methods: {
realTime(data) {
console.log(data)
this.cropImg = data
},
_initEditor(data) { _initEditor(data) {
//初始化 //初始化
let _ts = this; let _ts = this;
@ -256,7 +265,7 @@ export default {
if (res && res.data && res.data.url) { if (res && res.data && res.data.url) {
let portfolio = _ts.portfolio; let portfolio = _ts.portfolio;
portfolio.headImgUrl = res.data.url; portfolio.headImgUrl = res.data.url;
portfolio.headImgType = '0'; // portfolio.headImgType = '0';
_ts.$set(_ts, 'portfolio', portfolio); _ts.$set(_ts, 'portfolio', portfolio);
_ts.$set(_ts, 'headImgUrl', res.data.url); _ts.$set(_ts, 'headImgUrl', res.data.url);
} else { } else {
@ -284,13 +293,13 @@ export default {
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = function () { reader.onload = function () {
_ts.$set(_ts, 'headImgUrl', this.result); _ts.$set(_ts, 'headImgUrl', this.result);
_ts.$refs.cropper?.replace(this.result); // _ts.$refs.cropper?.replace(this.result);
} }
}, },
async updatePortfolio() { async updatePortfolio() {
//headImgUrl //headImgUrl
let _ts = this; let _ts = this;
this.cropImage() // this.cropImage()
_ts.$set(_ts, 'loading', true); _ts.$set(_ts, 'loading', true);
let id = _ts.idPortfolio; let id = _ts.idPortfolio;
let portfolioDescription = _ts.contentEditor.getValue(); let portfolioDescription = _ts.contentEditor.getValue();
@ -298,6 +307,12 @@ export default {
let data = _ts.portfolio; let data = _ts.portfolio;
data.portfolioDescription = portfolioDescription; data.portfolioDescription = portfolioDescription;
data.portfolioDescriptionHtml = portfolioDescriptionHtml; data.portfolioDescriptionHtml = portfolioDescriptionHtml;
data.headImgUrl = _ts.headImgUrl
data.headImgType = '0';
// // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
console.log(data)
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) { if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
this.$message.error('请输入必填信息'); this.$message.error('请输入必填信息');
return false return false
@ -346,24 +361,31 @@ export default {
}); });
}, },
reset() { reset() {
this.$refs.cropper.reset(); this.headImgUrl = ''
// 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 { // try {
_ts.cropImg = _ts.$refs.cropper.getCroppedCanvas().toDataURL(); // _ts.cropImg = _ts.$refs.cropper.startCrop();
let portfolio = _ts.portfolio; // this.$refs.cropper.getCropData(data => {
portfolio.headImgUrl = _ts.cropImg; // console.log(data)
portfolio.headImgType = '0'; // return false
_ts.$set(_ts, 'portfolio', portfolio); // // do something
_ts.$set(_ts, 'headImgUrl', _ts.cropImg); // let portfolio = data;
_ts.$message.success('已裁剪 !'); // // portfolio.headImgUrl = data;
} catch (e) { // // portfolio.headImgType = '0';
_ts.$message.error('图片获取失败 !'); // _ts.$set(_ts, 'portfolio', portfolio);
return; // // _ts.$set(_ts, 'headImgUrl', _ts.cropImg);
} // _ts.$message.success('已裁剪 !');
} // })
//
// } catch (e) {
// _ts.$message.error('图片获取失败 !');
// return;
// }
// }
}, },
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
let _ts = this; let _ts = this;
@ -443,6 +465,10 @@ export default {
<style lang="less"> <style lang="less">
@import "~vditor/src/assets/less/index.less"; @import "~vditor/src/assets/less/index.less";
.button_box {
display: flex;
}
.wrapper_portfolio { .wrapper_portfolio {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -478,10 +504,16 @@ export default {
.preview-large { .preview-large {
width: 100%; width: 100%;
height: 480px; height: 380px;
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;
border: 1px solid red;
> img {
display: block;
margin: 0 auto;
}
} }
.portfolioDescription { .portfolioDescription {
@ -496,4 +528,13 @@ export default {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
word-break: break-all; word-break: break-all;
} }
.cropperBox {
width: 100%;
height: 300px;
margin-bottom: 20px;
border: 1px solid #F2F6FC;
}
</style> </style>

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

@ -75,8 +75,7 @@
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-cropperjs'; import VueCropper from 'vue-cropper';
import 'cropperjs/dist/cropper.css';
const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar'); const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
export default { export default {

6
plugins/vue-cropper.js
View File

@ -1,4 +1,4 @@
import vueCropper from 'vue-cropper';
import Vue from 'vue'; import Vue from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css'; Vue.use(vueCropper);
Vue.component('vue-cropper', VueCropper);