✨ 用户扩展-站点链接功能

components/layouts/pc/header.vue

@@ -64,8 +64,8 @@
                     <el-link rel="nofollow" :underline="false" style="margin-left: 10px;margin-bottom: 1rem;">{{ nickname }}</el-link>
                   </el-dropdown-item>
                   <el-dropdown-item v-if="hasPermissions" command="admin-dashboard">系统管理</el-dropdown-item>
-                  <el-dropdown-item command="user-info">资料与账号</el-dropdown-item>
                   <el-dropdown-item command="drafts">我的草稿</el-dropdown-item>
+                  <el-dropdown-item command="user-info">设置</el-dropdown-item>
                   <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>

components/widget/portfolios.vue

@@ -45,7 +45,7 @@
 export default {
   name: "portfolios",
   props: {
-    portfolios: []
+    portfolios: Array
   },
   data() {
     return {

nuxt.config.js

@@ -46,7 +46,8 @@ export default {
   ** Global CSS
   */
   css: [
-    'element-ui/lib/theme-chalk/index.css'
+    'element-ui/lib/theme-chalk/index.css',
+    '@fortawesome/fontawesome-svg-core/styles.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -57,7 +58,9 @@ export default {
     {src: '~/plugins/extend'},
     {src: '~/plugins/axios'},
     {src: '~/plugins/element-ui'},
-    {src: '~/plugins/vditor', ssr: false}
+    {src: '~/plugins/vditor', ssr: false},
+    {src: '~/plugins/fontawesome'},
+    // {src: '~/plugins/vue-cropper', ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules

pages/user/_nickname.vue

@@ -11,6 +11,13 @@
           <img v-else class="card-profile-img" src="https://static.rymcu.com/article/1578475481946.png">
           <h3 class="mb-3">{{ user.nickname }}</h3>
           <p class="mb-4" v-html="user.signature"></p>
+          <div v-if="userExtend" style="margin-bottom: 1rem;">
+            <el-link v-if="userExtend.blog" class="user-link" title="博客" :underline="false" :href="userExtend.blog" target="_blank"><font-awesome-icon :icon="['fas', 'link']"></font-awesome-icon></el-link>
+            <el-link v-if="userExtend.github" class="user-link" title="github" :underline="false" :href="'https://github.com/' + userExtend.github" target="_blank"><font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon></el-link>
+            <el-link v-if="userExtend.weibo" class="user-link" title="微博" :underline="false" :href="'https://weibo.com/n/' + userExtend.weibo" target="_blank"><font-awesome-icon :icon="['fab', 'weibo']"></font-awesome-icon></el-link>
+            <el-link v-if="userExtend.weixin" class="user-link" title="微信" :underline="false" :href="userExtend.weixin"><font-awesome-icon :icon="['fab', 'weixin']" target="_blank"></font-awesome-icon></el-link>
+            <el-link v-if="userExtend.qq" class="user-link" title="QQ" :underline="false" :href="userExtend.qq"><font-awesome-icon :icon="['fab', 'qq']" target="_blank"></font-awesome-icon></el-link>
+          </div>
           <div v-if="oauth">
             <div v-if="oauth.idUser !== user.idUser">
               <el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)" plain>取消关注</el-button>
@@ -70,6 +77,7 @@ export default {
       store
         .dispatch('user/fetchDetail', params)
         .catch(err => error({statusCode: 404})),
+      store.dispatch('user/fetchUserExtend', params),
       store.dispatch('user/fetchArticleList', params),
       store.dispatch('user/fetchPortfolioList', params),
       store.dispatch('user/fetchFollowerList', params),
@@ -79,6 +87,7 @@ export default {
   computed: {
     ...mapState({
       user: state => state.user.data,
+      userExtend: state => state.user.userExtend,
       articles: state => state.user.articles,
       portfolios: state => state.user.portfolios,
       followers: state => state.user.followers,
@@ -294,4 +303,9 @@ h3, .h3 {
 .tab-content {
   min-height: 50vh;
 }
+
+.user-link {
+  font-size: 24px;
+  margin: 0 0.5rem;
+}
 </style>

pages/user/settings.vue

@@ -8,7 +8,19 @@
           @select="handleSelectMenu">
           <el-menu-item index="account">
             <i class="el-icon-s-data"></i>
-            <span slot="title">资料与账号</span>
+            <span slot="title">基本信息</span>
+          </el-menu-item>
+          <el-menu-item index="avatar">
+            <i class="el-icon-picture-outline-round"></i>
+            <span slot="title">我的头像</span>
+          </el-menu-item>
+          <el-menu-item index="security">
+            <i class="el-icon-unlock"></i>
+            <span slot="title">账户安全</span>
+          </el-menu-item>
+          <el-menu-item index="notification">
+            <i class="el-icon-bell"></i>
+            <span slot="title">通知方式</span>
           </el-menu-item>
         </el-menu>
       </el-col>

pages/user/settings/account.vue

@@ -1,88 +1,71 @@
 <template>
-  <el-row>
+  <client-only>
-    <el-col>
+    <el-row>
-      <el-form :model="user" :rules="rules" ref="user" label-width="100px">
+      <el-col>
-        <el-form-item style="align-items: center;text-align: center;">
+        <el-form :model="user" :rules="rules" ref="user" label-width="100px">
-          <el-upload
+          <el-form-item label="昵称" prop="nickname">
-            class="avatar-uploader"
+            <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
-            :action="tokenURL.URL"
+          </el-form-item>
-            :multiple="true"
+          <el-form-item label="性别">
-            :with-credentials="true"
+            <el-radio-group v-model="user.sex">
-            :headers="uploadHeaders"
+              <el-radio border label="0">保密</el-radio>
-            :show-file-list="false"
+              <el-radio border label="1">男</el-radio>
-            :data="uploadOption"
+              <el-radio border label="2">女</el-radio>
-            :on-success="handleAvatarSuccess"
+            </el-radio-group>
-            :before-upload="beforeAvatarUpload">
+          </el-form-item>
-            <div v-if="svgShow">
+          <el-form-item label="个人介绍" prop="signature">
-              <Avataaars
+            <el-input type="textarea" v-model="user.signature"></el-input>
-                id="avatarSvg"
+          </el-form-item>
-                style="width: 178px; height: 178px;"
+          <el-form-item style="text-align: right;">
-                :avatarStyle='avatar.acatarStyle'
+            <el-button type="primary" round @click="updateUserInfo" plain>保存</el-button>
-                :topType='avatar.topType'
+          </el-form-item>
-                :accessoriesType='avatar.accessoriesType'
+        </el-form>
-                :hairColor='avatar.hairColor'
+        <el-form :model="userExtend" ref="userExtend" label-width="100px">
-                :facialHairType='avatar.facialHairType'
+          <el-form-item label="博客" prop="signature">
-                :clotheType='avatar.clotheType'
+            <el-input placeholder="设置后将会公开你的博客" v-model="userExtend.blog">
-                :clotheColor='avatar.clotheColor'
+            </el-input>
-                :eyeType='avatar.eyeType'
+          </el-form-item>
-                :eyebrowType='avatar.eyebrowType'
+          <el-form-item label="github" prop="signature">
-                :mouthType='avatar.mouthType'
+            <el-input placeholder="yourname" v-model="userExtend.github">
-                :skinColor='avatar.skinColor'>
+              <template slot="prepend">https://github.com/</template>
-              </Avataaars>
+            </el-input>
-            </div>
+          </el-form-item>
-            <div v-else>
+          <el-form-item label="微博" prop="signature">
-              <el-avatar v-if="avatarUrl" class="avatar" :src="avatarUrl"></el-avatar>
+            <el-input placeholder="yourname" v-model="userExtend.weibo">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              <template slot="prepend">https://weibo.com/n/</template>
-            </div>
+            </el-input>
-          </el-upload>
+          </el-form-item>
-          <el-button style="margin-top: 1rem;" type="primary" round @click="genAvatar" plain>随机</el-button>
+          <el-form-item label="微信" prop="signature">
-        </el-form-item>
+            <el-input placeholder="设置后将会公开你的微信" v-model="userExtend.weixin">
-        <el-form-item label="昵称" prop="nickname">
+            </el-input>
-          <el-input v-model="user.nickname" @blur="checkNickname"></el-input>
+          </el-form-item>
-        </el-form-item>
+          <el-form-item label="QQ" prop="signature">
-        <el-form-item label="邮箱" prop="email">
+            <el-input placeholder="设置后将会公开你的 QQ" v-model="userExtend.qq">
-          <el-input type="email" v-model="user.email" :disabled="true"></el-input>
+            </el-input>
-        </el-form-item>
+          </el-form-item>
-        <el-form-item label="性别">
+          <el-form-item style="text-align: right;">
-          <el-radio-group v-model="user.sex">
+            <el-button type="primary" round @click="updateUserExtend" plain>保存</el-button>
-            <el-radio border label="0">保密</el-radio>
+          </el-form-item>
-            <el-radio border label="1">男</el-radio>
+        </el-form>
-            <el-radio border label="2">女</el-radio>
+      </el-col>
-          </el-radio-group>
+    </el-row>
-        </el-form-item>
+  </client-only>
-        <el-form-item label="个人介绍" prop="signature">
-          <el-input type="textarea" v-model="user.signature"></el-input>
-        </el-form-item>
-        <el-form-item style="text-align: right;">
-          <el-button type="primary" round @click="updateUserInfo" plain>保存</el-button>
-        </el-form-item>
-      </el-form>
-    </el-col>
-  </el-row>
 </template>
 
 <script>
   import {mapState} from 'vuex';
-  import Avataaars from 'vuejs-avataaars';
-  import saveSvg from 'save-svg-as-png';
 
-  const {generateRandomAvatar} = require('~/plugins/avataaars/generator/generateAvatar');
   export default {
     name: "account",
-    components: {
-      Avataaars
-    },
     computed: {
       ...mapState({
-        uploadHeaders: state => {
-          return {'X-Upload-Token': state.uploadHeaders}
-        },
         idUser: state => state.oauth.idUser
       })
     },
     data() {
       return {
         user: {},
+        userExtend: {},
         rules: {
           nickname: [
             {required: true, message: '请输入昵称', trigger: 'blur'},
@@ -93,54 +76,10 @@
             {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
           ]
         },
-        loading: false,
+        loading: false
-        svgShow: false,
-        tokenURL: {
-          URL: '',
-          linkToImageURL: '',
-          token: ''
-        },
-        avatarUrl: '',
-        avatar: {},
-        fileList: [],
-        uploadOption: {
-          type: 0
-        }
       }
     },
     methods: {
-      genAvatar() {
-        let _ts = this;
-        _ts.$set(_ts, 'svgShow', true);
-        const avatar = generateRandomAvatar();
-        _ts.$set(_ts, 'avatar', avatar);
-      },
-      handleAvatarSuccess(res) {
-        let _ts = this;
-        if (res && res.data && res.data.url) {
-          let user = _ts.user;
-          user.avatarUrl = res.data.url;
-          user.avatarType = '0';
-          _ts.$set(_ts, 'user', user);
-          _ts.$set(_ts, 'svgShow', false);
-          _ts.$set(_ts, 'avatarUrl', 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 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传图标大小不能超过 2MB!');
-        }
-        return (isJPG || isPNG) && isLt2M;
-      },
       getData() {
         let _ts = this;
         _ts.$axios.$get('/api/user-info/detail/' + _ts.idUser).then(function (res) {
@@ -149,8 +88,7 @@
               _ts.$message.error(res.message);
             } else {
               _ts.$set(_ts, 'user', res.user);
-              _ts.$set(_ts, 'avatarUrl', res.user.avatarUrl);
+              _ts.$set(_ts, 'userExtend', res.userExtend);
-              _ts.$set(_ts, 'svgShow', false);
             }
           }
         })
@@ -170,21 +108,8 @@
       },
       updateUserInfo() {
         let _ts = this;
-        let svgShow = _ts.svgShow;
         let user = _ts.user;
-        if (svgShow) {
+        _ts.updateUser(user);
-          saveSvg.svgAsPngUri(document.getElementById('avatarSvg'), {}).then(uri => {
-            if (uri) {
-              user.avatarType = 1;
-              user.avatarUrl = uri;
-              _ts.updateUser(user);
-            } else {
-              _ts.$message.error('头像上传失败 !');
-            }
-          });
-        } else {
-          _ts.updateUser(user);
-        }
       },
       updateUser(user) {
         let _ts = this;
@@ -196,8 +121,6 @@
                   _ts.$message.error(res.message);
                 } else {
                   _ts.$set(_ts, 'user', res.user);
-                  _ts.$set(_ts, 'avatarUrl', res.user.avatarUrl);
-                  _ts.$set(_ts, 'svgShow', false);
                   _ts.$store.commit('setUserInfo', res.user);
                   _ts.$message.success('更新成功 !');
                 }
@@ -207,50 +130,29 @@
             _ts.$message.error('数据异常 !');
           }
         });
+      },
+      updateUserExtend() {
+        let _ts = this;
+        let userExtend = _ts.userExtend;
+        _ts.$axios.$patch('/api/user-info/update-extend', userExtend).then(function (res) {
+          if (res) {
+            if (res.message) {
+              _ts.$message.error(res.message);
+            } else {
+              _ts.$set(_ts, 'userExtend', res.userExtend);
+              _ts.$message.success('更新成功 !');
+            }
+          }
+        })
       }
     },
     mounted() {
-      let _ts = this;
       this.$store.commit('setActiveMenu', 'account');
-      this.$axios.$get('/api/upload/simple/token').then(function (res) {
-        if (res) {
-          _ts.$store.commit('setUploadHeaders', res.uploadToken);
-          _ts.$set(_ts, 'tokenURL', {
-            token: res.uploadToken || '',
-            URL: res.uploadURL || '',
-          })
-        }
-      });
       this.getData();
     }
   }
 </script>
 
 <style scoped>
-  .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: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
 </style>

plugins/fontawesome.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+
+// This is important, we are going to let Nuxt.js worry about the CSS
+config.autoAddCss = false
+
+// You can add your icons directly in this plugin. See other examples for how you
+// can add other styles or just individual icons.
+library.add(fas)
+library.add(fab)
+
+// Register the component globally
+Vue.component('font-awesome-icon', FontAwesomeIcon)

plugins/vue-cropper.js

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

store/user.js

@@ -10,6 +10,7 @@ export const state = () => {
   return {
     fetching: false,
     data: [],
+    userExtend: {},
     articles: {
       articles: [],
       pagination: {}
@@ -36,6 +37,9 @@ export const mutations = {
   updateDetailData(state, action) {
     state.data = action
   },
+  updateUserExtendData(state, action) {
+    state.userExtend = action
+  },
   updateArticleList(state, action) {
     state.articles = action
   },
@@ -63,6 +67,18 @@ export const actions = {
         commit('updateFetching', false)
       })
   },
+  fetchUserExtend({ commit }, params) {
+    commit('updateFetching', true);
+    return this.$axios
+      .$get(`${USER_API_PATH}/${params.nickname}/user-extend`)
+      .then(response => {
+        commit('updateUserExtendData', response)
+        commit('updateFetching', false)
+      })
+      .catch(error => {
+        commit('updateFetching', false)
+      })
+  },
   fetchArticleList({commit}, params) {
     commit('updateFetching', true);
     return this.$axios