docs: rewrite README; feat: dark login bg, svg logo, avatar fallback

src/assets/images/logo-min.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
+  <defs>
+    <linearGradient id="fdLogoMinGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#2d8cf0"/>
+      <stop offset="100%" stop-color="#1a5bb8"/>
+    </linearGradient>
+  </defs>
+  <rect x="0" y="0" width="44" height="44" rx="11" fill="url(#fdLogoMinGrad)"/>
+  <path d="M11 18 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
+</svg>

src/assets/images/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="184" height="44" viewBox="0 0 184 44">
+  <defs>
+    <linearGradient id="fdLogoGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#2d8cf0"/>
+      <stop offset="100%" stop-color="#1a5bb8"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="40" height="40" rx="10" fill="url(#fdLogoGrad)"/>
+  <path d="M12 17 L33 12 L28 32 L21 24 L16 28 Z" fill="#ffffff"/>
+  <text x="54" y="28" font-family="'Helvetica Neue', Arial, 'PingFang SC', sans-serif" font-size="20" font-weight="600" letter-spacing="1" fill="#ffffff">Freedom</text>
+</svg>

src/components/main/components/user/user.vue

@@ -2,7 +2,7 @@
   <div class="user-avator-dropdown">
     <Dropdown @on-click="handleClick">
       <span style="font-size: 15px;font-weight: bold"> {{ nickname }} </span>
-      <Avatar :src="userAvator"/>
+      <Avatar :key="userAvator" :src="userAvator" style="background-color: #2d8cf0; vertical-align: middle">{{ avatarText }}</Avatar>
       <Icon :size="18" type="md-arrow-dropdown"></Icon>
       <DropdownMenu slot="list">
         <DropdownItem name="personal-center">个人中心</DropdownItem>
@@ -27,6 +27,12 @@ export default {
       default: ''
     }
   },
+  computed: {
+    avatarText () {
+      const name = (this.nickname || '').trim()
+      return name ? name.charAt(0) : 'U'
+    }
+  },
   methods: {
     ...mapActions([
       'handleLogOut'

src/components/main/main.less

@@ -2,6 +2,7 @@
   .logo-con{
     height: 64px;
     padding: 10px;
+    text-align: center;
     img{
       height: 44px;
       width: auto;

src/components/main/main.vue

@@ -41,8 +41,8 @@ import Fullscreen from './components/fullscreen'
 import ErrorStore from './components/error-store'
 import { mapMutations, mapActions, mapGetters } from 'vuex'
 import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
-import minLogo from '@/assets/images/logo-min.jpg'
-import maxLogo from '@/assets/images/logo.jpg'
+import minLogo from '@/assets/images/logo-min.svg'
+import maxLogo from '@/assets/images/logo.svg'
 import './main.less'
 export default {
   name: 'Main',

src/view/login/login.less

@@ -1,9 +1,8 @@
 .login{
     width: 100%;
     height: 100%;
-    background-image: url('../../assets/images/login-bg.jpg');
-    background-size: cover;
-    background-position: center;
+    background-color: #0d0d0d;
+    background-image: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
     position: relative;
     &-con{
         position: absolute;

src/view/login/login.vue

@@ -5,17 +5,17 @@
 <template>
     <div class="login">
       <vue-particles
-        color="#dedede"
-        :particleOpacity="0.7"
-        :particlesNumber="80"
+        color="#ffffff"
+        :particleOpacity="0.6"
+        :particlesNumber="60"
         shapeType="circle"
-        :particleSize="4"
-        linesColor="#dedede"
+        :particleSize="3"
+        linesColor="#ffffff"
         :linesWidth="1"
         :lineLinked="true"
-        :lineOpacity="0.4"
+        :lineOpacity="0.3"
         :linesDistance="150"
-        :moveSpeed="3"
+        :moveSpeed="2"
         :hoverEffect="true"
         hoverMode="grab"
         :clickEffect="true"

src/view/sys/sys-user.vue

@@ -152,17 +152,25 @@
             key: 'nickname',
             minWidth: 200,
             render: (h, params) => {
+              const row = params.row
+              const text = (row.nickname || row.username || 'U').trim().charAt(0)
               return h('div',
                 [
                   h('Avatar',
                     {
                       props: {
                         shape: 'square',
-                        src: params.row.avatar
+                        src: row.avatar || ''
+                      },
+                      style: {
+                        marginRight: '8px',
+                        verticalAlign: 'middle',
+                        backgroundColor: '#2d8cf0'
                       }
-                    }
+                    },
+                    text
                   ),
-                  h('span', params.row.nickname)
+                  h('span', row.nickname)
                 ]
               )
             }