feat: default avatar

Alan-Liang · Alan-Liang · commit 7e82652732ed · 2020-04-26T14:46:03.000+08:00
diff --git a/pages/index.vue b/pages/index.vue
@@ -9,7 +9,7 @@
           <v-list-item-action>
             <div class="avatar-editable">
               <div class="avatar-wrapper">
-                <img class="avatar-img" :src="avatar" aria-hidden="true">
+                <img class="avatar-img" :src="avatar" aria-hidden="true" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='">
               </div>
               <div class="avatar-mask">
                 <v-icon color="#f5fafd" class="avatar-mask-icon">mdi-pencil</v-icon>
@@ -101,22 +101,22 @@ export default {
   flex-grow: 0;
   -webkit-flex-shrink: 0;
   flex-shrink: 0;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   margin-left: 16px;
   overflow: hidden;
   position: relative;
   width: 60px;
   height: 60px;
 }
 .avatar-wrapper {
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   height: 100%;
   width: auto;
 }
 .avatar-img {
-  border-radius: 50%;
+  border-radius: 4px;
   width: 60px;
   height: 60px;
 }
@@ -129,7 +129,7 @@ export default {
   right: 0;
   text-align: center;
 }
-.avatar-mask-icon {
+.avatar-mask .avatar-mask-icon.v-icon {
   font-size: 16px;
   top: -4px;
 }
diff --git a/pages/set-avatar.vue b/pages/set-avatar.vue
@@ -60,7 +60,7 @@ export default {
 .input-file { display: none; }
 .upload-button { margin-bottom: 16px; }
 .preview-avatar {
-  border-radius: 50%;
+  border-radius: 4px;
   width: 128px;
   height: 128px;
   margin: 16px;
diff --git a/server/index.js b/server/index.js
@@ -68,7 +68,7 @@ config.dev = app.env !== 'production'
   }
   app.context.avatarFromName = name => {
     const { ALI_OSS_REGION, ALI_OSS_BUCKET, ALI_OSS_AVATAR_PREFIX } = process.env
-    return `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com/${ALI_OSS_AVATAR_PREFIX || ''}${name}`
+    return `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com/${ALI_OSS_AVATAR_PREFIX || ''}${name || 'default.svg'}`
   }
   app.context.createOrder = async function () {
     try {
diff --git a/static/avatar/default.inkscape.svg b/static/avatar/default.inkscape.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="default.inkscape.svg"
+   inkscape:version="0.92.4 (33fec40, 2019-01-16)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1547"
+     inkscape:window-height="837"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="11.313709"
+     inkscape:cx="11.866695"
+     inkscape:cy="31.09783"
+     inkscape:window-x="53"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M 5.0902545e-4,47.996647 48.008537,48 c 0,0 7e-5,-38.0234853 7e-5,-47.9999296 C 48.008607,7.04e-5 13.840031,0 0,0 0,0 5.0902545e-4,34.155495 5.0902545e-4,47.996647 Z M 31.997918,16 c 0,4.426667 -3.586376,8 -7.999352,8 -4.412976,0 -7.999352,-3.573333 -7.999352,-8 0,-4.413333 3.586376,-8 7.999352,-8 4.412976,0 7.999352,3.586667 7.999352,8 z M 7.9998613,37.333333 c 0,-5.333333 10.6658027,-8.266666 15.9987047,-8.266666 5.332901,0 15.998705,2.933333 15.998705,8.266666 V 40 H 7.9998613 Z"
+     id="path2"
+     style="fill:#c2c7ca;fill-opacity:1"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccssssssssccs" />
+  <path
+     d="M0 0h48v48H0z"
+     fill="none"
+     id="path4" />
+</svg>
diff --git a/static/avatar/default.svg b/static/avatar/default.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--This file is generated by Inkscape. Please modify `default.inkscape.svg` and export to this file.-->
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="m5.0903e-4 47.997 48.008 0.003353s7e-5 -38.023 7e-5 -48c0 0-34.169-7.04e-5 -48.009-7.04e-5 0 0 5.0903e-4 34.155 5.0903e-4 47.997zm31.997-31.997c0 4.4267-3.5864 8-7.9994 8s-7.9994-3.5733-7.9994-8c0-4.4133 3.5864-8 7.9994-8s7.9994 3.5867 7.9994 8zm-23.998 21.333c0-5.3333 10.666-8.2667 15.999-8.2667 5.3329 0 15.999 2.9333 15.999 8.2667v2.6667h-31.997z" fill="#c2c7ca"/><path d="M0 0h48v48H0z" fill="none"/></svg>

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ config.dev = app.env !== 'production'`
`68`	`68`	`}`
`69`	`69`	`app.context.avatarFromName = name => {`
`70`	`70`	`const { ALI_OSS_REGION, ALI_OSS_BUCKET, ALI_OSS_AVATAR_PREFIX } = process.env`
`71`		- return `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com/${ALI_OSS_AVATAR_PREFIX \|\| ''}${name}`
	`71`	+ return `https://${ALI_OSS_BUCKET}.${ALI_OSS_REGION}.aliyuncs.com/${ALI_OSS_AVATAR_PREFIX \|\| ''}${name \|\| 'default.svg'}`
`72`	`72`	`}`
`73`	`73`	`app.context.createOrder = async function () {`
`74`	`74`	`try {`