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

.gitignore

@@ -88,3 +88,6 @@ sw.*
 
 # Vim swap files
 *.swp
+# deps
+package-lock.json
+yarn.lock

.onedev-buildspec.yml

@@ -18,7 +18,7 @@ jobs:
     image: node:16.17.0-alpine
     interpreter: !DefaultInterpreter
       commands:
-      - yarn --registry=https://registry.npm.taobao.org
+      - yarn --registry=https://registry.npmmirror.com
       - npx nuxt build
     useTTY: false
     condition: ALL_PREVIOUS_STEPS_WERE_SUCCESSFUL

Dockerfile

@@ -13,8 +13,8 @@ RUN cd /opt/app
 RUN chmod -R 777 *
 # 添加执行shell文件权限
 RUN chmod u+x pm2.sh
-RUN yarn --registry=https://registry.npm.taobao.org
+RUN yarn --registry=https://registry.npmmirror.com
-RUN npm i pm2 -g --registry=https://registry.npm.taobao.org
+RUN npm i pm2 -g --registry=https://registry.npmmirror.com
 RUN npm run build
 
 RUN ls -l -a

components/ImgCropper.vue

@@ -0,0 +1,258 @@
+<template>
+  <el-dialog title="请裁剪图片" v-bind='$attrs' v-on='$listeners' @open='onOpen' @close='onClose' :title='dialogTitle'
+             :close-on-click-modal="false">
+    <el-row>
+      <el-col :span="12">
+        <client-only>
+          <div class="cropperBox">
+            <vue-cropper
+              :autoCrop="autoCrop"
+              :img="newAvatarUrl"
+              ref="cropper"
+              :fixed="true"
+              @realTime="realTime"
+            />
+          </div>
+        </client-only>
+      </el-col>
+      <el-col :span="24" style="margin-top: 2rem;">
+        <el-col :span="8" style="max-width: 20rem;max-height: 20rem;">
+          <div class="preview preview-large" :style="{height:cropImg.h+'px',width:cropImg.w+'px'}"
+               style="overflow:hidden;margin: 0 auto">
+            <img :src="cropImg.url" :style="cropImg.img">
+          </div>
+        </el-col>
+      </el-col>
+      <el-col :span="24" style="margin-top: 2rem;">
+        <el-upload
+          style="float: left"
+          class="avatar-uploader"
+          action=""
+          :multiple="true"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload">
+          <div>
+            <el-button type="primary" round plain>上传</el-button>
+          </div>
+        </el-upload>
+        <!--        <el-button style="margin-top: 1rem;" type="primary" round plain @click="genAvatar">随机</el-button>-->
+        <el-button style="margin-left: 20px;float: left" type="primary" round plain @click.prevent="reset">重置
+        </el-button>
+        <!--        <el-button type="primary" round plain @click.prevent="updateUser">提交</el-button>-->
+      </el-col>
+    </el-row>
+
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="close">取 消</el-button>
+          <el-button type="primary" @click="onSubmit">确 定</el-button>
+  </span>
+  </el-dialog>
+</template>
+
+<script>
+// import VueCropper from "vue-cropper";
+
+export default {
+  name: "ImgCropper",
+  data() {
+    return {
+      dialogTitle: '裁剪图片',
+      autoCrop: true,
+      cropImg: '',
+      oldAvatarUrl: '',
+      newAvatarUrl: ''
+    }
+  },
+  // components: {
+  //   VueCropper
+  // },
+  props: {
+    avatarUrl: {
+      type: [String, Object]
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.cropper.getCropData(data => {
+        // console.log(data)
+        this.$emit('onSubmit',data)
+      });
+
+      /*
+            this.$emit('onSubmit',this.cropImg)
+      */
+    },
+    onOpen() {
+      this.oldAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
+      this.newAvatarUrl = JSON.parse(JSON.stringify(this.avatarUrl))
+    },
+    onClose() {
+    },
+    close() {
+      this.$emit('update:visible', false)
+    },
+    realTime(data) {
+      this.cropImg = data;
+      // this.$emit('cropImg', data)
+    },
+    handleAvatarSuccess(res) {
+      let _ts = this;
+      if (res && res.data && res.data.url) {
+        _ts.$set(_ts, 'newAvatarUrl', res.data.url);
+      } else {
+        _ts.$message.error('上传失败!');
+      }
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!(isJPG || isPNG)) {
+        this.$message.error('上传头像只能是 JPG 或者 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像大小不能超过 2MB!');
+        return false;
+      }
+      this.fileToBase64(file);
+      return false;
+    },
+    reset() {
+      this.newAvatarUrl = JSON.parse(JSON.stringify(this.oldAvatarUrl))
+      // this.$refs.cropper.clearCrop();
+    },
+    fileToBase64(file) {
+      let _ts = this;
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        _ts.$set(_ts, 'newAvatarUrl', this.result);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.cropperBox {
+  width: 100%;
+  height: 256px;
+  margin-bottom: 20px;
+  border: 1px solid #F2F6FC;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 16rem;
+  height: 16rem;
+  line-height: 16rem;
+  text-align: center;
+}
+
+.avatar {
+  width: 16rem;
+  height: 16rem;
+  display: block;
+}
+
+.preview-area {
+  width: 16rem;
+}
+
+.preview-area p {
+  font-size: 1.25rem;
+}
+
+.preview-area p:last-of-type {
+  margin-top: 1rem;
+}
+
+.crop-placeholder {
+  width: 36px;
+  height: 36px;
+  background: #ccc;
+}
+
+.cropped-image img {
+  max-width: 100%;
+}
+
+.img-cropper {
+  width: 740px;
+  min-height: 360px;
+  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 {
+  width: 16rem;
+  height: 16rem;
+  margin-bottom: 1rem;
+  margin-top: 3rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.preview-medium img {
+  object-fit: contain;
+  width: 8rem;
+  height: 8rem;
+}
+
+
+.preview-medium {
+  width: 8rem;
+  height: 8rem;
+  margin-bottom: 1rem;
+  margin-top: 11rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+
+}
+
+
+.preview-small {
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: 1rem;
+  margin-top: 17rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.preview-small img {
+  object-fit: contain;
+  width: 2rem;
+  height: 2rem;
+}
+
+</style>

components/common/product/list.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="wrapper">
     <el-row class="row-cards row-deck" :gutter="20">
-      <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-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-col :span="24">
+          <div style="width: 96%;">
-            <el-image :src="product.productImgUrl"
+            <img style="max-height: 300px;display: block;margin: 0 auto" :src="product.productImgUrl"
-                      style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
+                 object-fit="contain"/>
-          </el-col>
+          </div>
           <el-col :span="24">
             <el-tag
               style="margin-right: 0.5rem;"
@@ -17,11 +18,14 @@
               # {{ tag }}
             </el-tag>
           </el-col>
-          <el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
+          <el-col :span="24"
+                  style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
             <span style="font-weight: bolder;" v-html="product.productTitle"></span>
           </el-col>
-          <el-col span="24">
+          <el-col :span="24">
-            <small v-html="product.productDescription"></small>
+            <small class="text-container">
+              {{ 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>
@@ -167,4 +171,13 @@ h3, .h3 {
   padding-left: 0.75rem;
 }
 
+.text-container {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
 </style>

components/common/topic/main.vue

@@ -1,14 +1,17 @@
 <template>
-  <el-row class="wrapper">
+  <div class="wrapper">
-    <el-col style="margin-bottom: 1rem;">
+
-      <el-menu type="border-card" :default-active="currentTopic" style="margin-top: -2px;border: 0;" mode="horizontal"
+    <div style="background: white">
+      <el-menu type="border-card" :default-active="currentTopic"
+               style="width: 96%;margin: 0 auto" mode="horizontal"
                @select="handleSelectTopic">
         <el-menu-item index="news">最新</el-menu-item>
         <el-menu-item v-for="topic in topicNavs" :key="topic.idTopic" :index="topic.topicUri">{{ topic.topicTitle }}
         </el-menu-item>
       </el-menu>
-    </el-col>
+    </div>
-  </el-row>
+
+  </div>
 </template>
 
 <script>
@@ -28,6 +31,7 @@
       isFetching: state => state.topic.fetching
     })
   },
+  watch: {},
   methods: {
     handleSelectTopic(item) {
       this.$router.push({

package.json

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

pages/admin.vue

@@ -15,18 +15,26 @@
         </el-menu>
       </el-col>
       <el-col :span="20">
+        <el-card>
+
+          <el-row>
             <el-tabs :value="editableTabsValue" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClick">
               <el-tab-pane
                 :key="item.name"
                 v-for="(item, index) in editableTabs"
                 :label="item.title"
                 :name="item.name"
-            :closable="item.closable"
+                :closable="item.closable">
-          >
-            <nuxt-child keep-alive
-                        :keep-alive-props="{include: editableTabs}"/>
               </el-tab-pane>
             </el-tabs>
+
+          </el-row>
+          <el-row>
+            <nuxt-child keep-alive
+                        :keep-alive-props="{include: editableTabs}"/>
+          </el-row>
+
+        </el-card>
       </el-col>
     </el-col>
     <el-col v-else class="text-center">

pages/admin/topic/_topic_uri.vue

@@ -12,7 +12,7 @@
         <img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
       </el-col>
       <el-col :span="20">
-        <el-col>
+        <el-row :gutter="20">
           <el-col :span="20">
             <span class="topic-title">{{ topic.topicTitle }}</span>
             <span class="text-muted" v-if="topic.topicTagCount">{{ topic.topicTagCount }} 引用</span>
@@ -28,9 +28,9 @@
             </el-dropdown>
           </el-col>
           <el-col>
-            <p>{{ topic.topicDescription }}</p>
+            <span v-html="topic.topicDescriptionHtml"></span>
-          </el-col>
           </el-col>
+        </el-row>
       </el-col>
       <el-col v-for="tag in tags.list" :key="tag.idTag">
         <el-card style="margin: .5rem;">
@@ -107,6 +107,7 @@ export default {
       })
     },
     handleCommand(command) {
+      console.log(command)
       let _ts = this;
       if ("admin-post-topic" === command) {
         _ts.$router.push({
@@ -142,7 +143,9 @@ export default {
       }).catch(() => {
       });
     }
-  }
+  },
+
+
 }
 </script>
 

pages/admin/topic/post/_topic_id.vue

@@ -23,63 +23,38 @@
         <el-form-item label="图标">
           <el-row>
             <el-col :span="24">
-              <vue-cropper
+              <img @click="cropperVisible=true" :src="topicIconPath" style="width: 80px;height: 80px"/>
-                ref="cropper"
-                :aspect-ratio="1 / 1"
-                :src="topicIconPath"
-                :checkCrossOrigin="false"
-                :checkOrientation="false"
-                :imgStyle="{width: '480px', height: '480px'}"
-                :autoCropArea="1"
-                :autoCrop="autoCrop"
-                preview=".preview"
-              />
-            </el-col>
-            <el-col :span="24" style="margin-top: 2rem;">
-              <el-col :span="8">
-                <el-card>
-                  <div class="card-body d-flex flex-column">
-                    <el-col :span="4" style="text-align: right;">
-                      <div v-if="topicIconPath" class="preview preview-large topic-brand-img"/>
-                      <el-image v-else class="topic-brand-img" />
-                    </el-col>
-                    <el-col :span="20">
-                      <el-col>
-                        <el-col>
-                          <el-link rel="nofollow" :underline="false">
-                            <h4>{{ topic.topicTitle }}</h4>
-                          </el-link>
-                        </el-col>
-                        <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-col :span="24" style="margin-top: 2rem;">
-              <el-upload
-                class="avatar-uploader"
-                action=""
-                :multiple="true"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :before-upload="beforeAvatarUpload">
-                <div>
-                  <el-button type="primary" round plain>上传</el-button>
-                </div>
-              </el-upload>
-              <el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button>
-              <el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button>
-              <el-col>
-                <span style="color: red;padding-right: 5px;">*</span>
-                <span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
-              </el-col>
             </el-col>
           </el-row>
         </el-form-item>
+        <el-form-item label="描述">
+          <div id="contentEditor" @blur="blurData"></div>
+        </el-form-item>
+<!--        <el-form-item>-->
+<!--          <el-row >-->
+<!--            <el-col :span="8">-->
+<!--              <el-card>-->
+<!--                <div class="card-body d-flex flex-column">-->
+<!--                  <el-card shadow="never">-->
+<!--                    <div class="card-body d-flex flex-column">-->
+<!--                      <el-row :gutter="20">-->
+<!--                        <el-col :span="5" style="text-align: right;">-->
+<!--                          <img :src="topicIconPath" :alt="topic.topicTitle"-->
+<!--                               style="display: block;width:60px;height: 60px" class="topic-brand-img">-->
+<!--                        </el-col>-->
+<!--                        <el-col :span="18">-->
+<!--                          <span style="font-size: 18px;font-weight: bold"> {{ topic.topicTitle }}</span>-->
+<!--                          <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>-->
+<!--                        </el-col>-->
+<!--                      </el-row>-->
+<!--                    </div>-->
+<!--                  </el-card>-->
+<!--                </div>-->
+<!--              </el-card>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+
+<!--        </el-form-item>-->
         <el-form-item label="导航主题">
           <el-switch
             v-model="topic.topicNva"
@@ -104,14 +79,14 @@
         <el-form-item label="标签数">
           <el-input v-model="topic.topicTagCount" :disabled="true"></el-input>
         </el-form-item>
-        <el-form-item label="描述">
+
-          <div id="contentEditor"></div>
-        </el-form-item>
         <el-form-item class="text-right">
           <el-button @click="updateTopic" :loading="loading" plain>提交</el-button>
         </el-form-item>
       </el-form>
     </el-col>
+    <ImgCropper @onSubmit="updateUser" :visible.sync='cropperVisible' :avatarUrl="topicIconPath||''"></ImgCropper>
+
   </el-row>
 </template>
 
@@ -120,12 +95,13 @@ import Vue from 'vue';
 import {mapState} from 'vuex';
 import VueCropper from 'vue-cropper';
 import apiConfig from '~/config/api.config';
+import ImgCropper from "~/components/ImgCropper.vue";
 
 export default {
   name: "adminTopicPost",
   middleware: 'auth',
   components: {
-    VueCropper
+    VueCropper, ImgCropper
   },
   computed: {
     ...mapState({
@@ -162,13 +138,31 @@ export default {
       topicIconPath: '',
       isEdit: false,
       autoCrop: true,
-      notificationFlag: true
+      notificationFlag: true,
+      cropperVisible: false,
+      contentEditor:{}
+
     }
   },
   methods: {
+    blurData(){
+
+      console.log(this.contentEditor)
+      if(this.contentEditor!={}){
+        console.log(this.contentEditor.getValue())
+
+        this.topic.topicDescription=this.contentEditor.getValue();
+      }
+
+    },
+    updateUser(data) {
+      this.topic.topicIconPath = data
+      this.topicIconPath = data
+      this.cropperVisible = false
+
+    },
     _initEditor(data) {
       let _ts = this;
-
       let toolbar = [
         'emoji',
         'headings',
@@ -257,43 +251,6 @@ export default {
         placeholder: data.placeholder,
       })
     },
-    handleAvatarSuccess(res) {
-      let _ts = this;
-      if (res && res.data && res.data.url) {
-        let topic = _ts.topic;
-        topic.topicIconPath = res.data.url;
-        _ts.$set(_ts, 'topic', topic);
-        _ts.$set(_ts, 'topicIconPath', res.data.url);
-      } else {
-        _ts.$message.error('上传失败!');
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isPNG = file.type === 'image/png';
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      if (!(isJPG || isPNG)) {
-        this.$message.error('上传图标只能是 JPG 或者 PNG 格式!');
-        return false;
-      }
-      if (!isLt2M) {
-        this.$message.error('上传图标大小不能超过 2MB!');
-        return false;
-      }
-
-      this.fileToBase64(file);
-      return false;
-    },
-    fileToBase64(file) {
-      let _ts = this;
-      let reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = function () {
-        _ts.$set(_ts, 'topicIconPath', this.result);
-        _ts.$refs.cropper.replace(this.result);
-      }
-    },
     async updateTopic() {
       let _ts = this;
       _ts.$set(_ts, 'loading', true);
@@ -401,12 +358,16 @@ export default {
     _ts.contentEditor = _ts._initEditor({
       id: 'contentEditor',
       mode: 'both',
-      height: 480,
+      height: 300,
       placeholder: '', //this.$t('inputContent', this.$store.state.locale)
       resize: false,
-      value: articleContent
+      value: articleContent,
     });
-  }
+    setTimeout(()=>{
+      _ts.contentEditor.blur()
+    })
+  },
+
 }
 </script>
 

pages/admin/topics.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-
-
     <el-row style="margin-top: 20px;">
       <el-col style="margin-bottom: 1rem;">
         <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -12,32 +10,29 @@
       <el-col style="margin: .5rem;">
         <el-button size="small" @click="createTopic" plain>创建专题</el-button>
       </el-col>
-
+    </el-row>
-
+    <el-row :gutter="20">
-
-  </el-row>  <el-row :gutter="20">
       <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics.list" :key="topic.idTopic">
         <el-card shadow="never">
           <div class="card-body d-flex flex-column">
             <el-row :gutter="20">
-          <el-col :span="4" style="text-align: right;">
+              <el-col :span="5" style="text-align: right;">
-            <img style="margin-right: 10px;" :src="topic.topicIconPath" :alt="topic.topicTitle"
+                <img :src="topic.topicIconPath" :alt="topic.topicTitle"
-                 class="topic-brand-img">
+                   style="display: block;width:60px;height: 60px"  class="topic-brand-img">
               </el-col>
-          <el-col :span="20" >
+              <el-col :span="18">
                 <el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false">
-              <span style="font-size: 20px;font-weight: bold"> {{ topic.topicTitle }}</span>
+              <span style="font-size: 18px;font-weight: bold"> {{ topic.topicTitle }}</span>
             </el-link>
             <div class="text-muted article-summary-md text-content">{{ topic.topicDescription }}</div>
           </el-col>
         </el-row>
-
-
       </div>
     </el-card>
 
   </el-col>
-</el-row> </div>
+</el-row>
+  </div>
 </template>
 
 <script>
@@ -77,7 +72,7 @@ export default {
 
 <style scoped>
 .topic-brand-img {
-  margin-top: 40%;
+  /*margin-top: 40%;*/
 }
 
 .text-content {

pages/user/settings.vue

@@ -10,10 +10,10 @@
             <i class="el-icon-s-data"></i>
             <span slot="title">基本信息</span>
           </el-menu-item>
-          <el-menu-item index="avatar">
+<!--          <el-menu-item index="avatar">-->
-            <i class="el-icon-picture-outline-round"></i>
+<!--            <i class="el-icon-picture-outline-round"></i>-->
-            <span slot="title">我的头像</span>
+<!--            <span slot="title">我的头像</span>-->
-          </el-menu-item>
+<!--          </el-menu-item>-->
           <el-menu-item index="security">
             <i class="el-icon-unlock"></i>
             <span slot="title">账户安全</span>

pages/user/settings/account.vue

@@ -1,4 +1,5 @@
 <template>
+  <el-card>
     <client-only>
       <el-row>
         <el-col>
@@ -6,6 +7,31 @@
         </el-col>
         <el-col>
           <el-form :model="user" :rules="rules" ref="user" label-width="100px">
+            <el-form-item style="text-align: center;">
+              <el-col>
+                <Avataaars
+                  v-show="cropperVisible"
+                  id="avatarSvg"
+                  style="width: 256px; height: 256px;"
+                  :avatarStyle='avatar.avatarStyle'
+                  :topType='avatar.topType'
+                  :accessoriesType='avatar.accessoriesType'
+                  :hairColor='avatar.hairColor'
+                  :facialHairType='avatar.facialHairType'
+                  :clotheType='avatar.clotheType'
+                  :clotheColor='avatar.clotheColor'
+                  :eyeType='avatar.eyeType'
+                  :eyebrowType='avatar.eyebrowType'
+                  :mouthType='avatar.mouthType'
+                  :skinColor='avatar.skinColor'>
+                </Avataaars>
+                <img @click="cropperVisible=true" alt="用户头像" :src="user.avatarUrl" class="card-profile-img-avatar"/>
+              </el-col>
+              <el-col>
+                <el-button @click="cropperVisible=true">上传</el-button>
+                <el-button @click="genAvatar" class="random">{{ randomTitle }}</el-button>
+              </el-col>
+            </el-form-item>
             <el-form-item label="昵称" prop="nickname">
               <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
             </el-form-item>
@@ -58,18 +84,31 @@
         </el-col>
       </el-row>
     </client-only>
+    <ImgCropper @onSubmit="updateUser" :visible.sync='cropperVisible' :avatarUrl="user.avatarUrl||''"></ImgCropper>
+
+  </el-card>
+
 </template>
 
 <script>
 import {mapState} from 'vuex';
+import ImgCropper from "~/components/ImgCropper.vue";
+import VueCropper from "vue-cropper";
+import saveSvg from "save-svg-as-png";
+import Avataaars from 'vuejs-avataaars';
+
+const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
 
 export default {
   name: "account",
   middleware: 'auth',
+  components: {
+    ImgCropper, VueCropper, Avataaars
+  },
   computed: {
     ...mapState({
       idUser: state => state.auth.user.idUser
-      })
+    }),
   },
   data() {
     return {
@@ -85,15 +124,44 @@
           {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
         ]
       },
-        loading: false
+      loading: false,
+      cropperVisible: false,
+      randomTitle: '随机施法',
+      avatar: {},
     }
   },
+  watch: {},
   methods: {
+    updateUser(data) {
+      let _ts = this;
+
+      if (data) {
+        let user = _ts.user;
+        user.avatarUrl = data
+        user.avatarType = 1
+        _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message.error(res.message);
+            } else {
+              _ts.$set(_ts, 'user', res);
+              // _ts.$set(_ts, 'avatarUrl', res.avatarUrl);
+              // _ts.$store.commit('setUserInfo', res);
+              _ts.$message.success('更新成功 !');
+              _ts.cropperVisible = false
+            }
+          }
+        })
+      } else _ts.$message.error('失败，请重试');
+
+
+    },
     getData() {
       let _ts = this;
       _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
         if (res) {
-            _ts.$set(_ts, 'user', res);
+          // _ts.$set(_ts, 'user', res);
+          _ts.user = res
         }
       })
       _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser + '/extend-info').then(function (res) {
@@ -120,22 +188,7 @@
       let user = _ts.user;
       _ts.updateUser(user);
     },
-      updateUser(user) {
+
-        let _ts = this;
-        _ts.$refs['user'].validate((valid) => {
-          if (valid) {
-            _ts.$axios.$patch('/api/user-info/update', user).then(function (res) {
-              if (res) {
-                _ts.$set(_ts, 'user', res);
-                _ts.$store.commit('setUserInfo', res);
-                _ts.$message.success('更新成功 !');
-              }
-            })
-          } else {
-            _ts.$message.error('数据异常 !');
-          }
-        });
-      },
     updateUserExtend() {
       let _ts = this;
       let userExtend = _ts.userExtend;
@@ -145,7 +198,23 @@
           _ts.$message.success('更新成功 !');
         }
       })
+    },
+    genAvatar() {
+      let _ts = this;
+      const avatar = generateRandomAvatar();
+      _ts.$set(_ts, 'avatar', avatar);
+
+      setTimeout(function () {
+        saveSvg.svgAsPngUri(document.getElementById('avatarSvg'), {}).then(uri => {
+          if (uri) {
+            _ts.updateUser(uri)
+            _ts.randomTitle = '‧★,:*:‧\\(￣▽￣)/‧:*‧°★* 再来一次'
+          } else {
+            _ts.$message.error('头像上传失败 !');
           }
+        });
+      }, 300);
+    },
   },
   mounted() {
     this.$store.commit('setActiveMenu', 'account');
@@ -155,5 +224,19 @@
 </script>
 
 <style scoped>
+.random {
+  display: inline-block;
+  cursor: pointer;
+  color: #409EFF;
+}
 
+.card-profile-img-avatar {
+  max-width: 16rem;
+  height: auto;
+  margin-bottom: 1rem;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+}
 </style>

pages/user/settings/security.vue

@@ -107,13 +107,7 @@ export default {
     getData() {
       let _ts = this;
       _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
-        if (res) {
+        _ts.$set(_ts, 'user', res);
-          if (res.message) {
-            _ts.$message.error(res.message);
-          } else {
-            _ts.$set(_ts, 'user', res.user);
-          }
-        }
       })
     },
     hideChangeEmailDialog() {