feat: 系统设置页面左上角用户头像修改

frontend/src/business/components/settings/CurrentUser.vue

@@ -1,60 +1,73 @@
 <template>
   <el-row type="flex" align="middle" class="current-user">
-    <el-avatar shape="square" size="small" :src="squareUrl"/>
+    <div class="icon-title">
-    <span class="username">{{currentUser.name}}</span>
+      {{ currentUser.name.substring(0, 1) }}
+    </div>
+    <span class="username">{{ currentUser.name }}</span>
   </el-row>
 </template>
 
 <script>
-  import {getCurrentUser} from "../../../common/js/utils";
+import {getCurrentUser} from "@/common/js/utils";
 
-  export default {
+export default {
-    name: "MsCurrentUser",
+  name: "MsCurrentUser",
 
-    data() {
+  data() {
-      return {
+    return {
-        editVisible: false,
+      editVisible: false,
-        id: "123456",
+      id: "123456",
-        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
+      form: {}
-        form: {}
+    }
-      }
+  },
+  methods: {
+    edit() {
+      this.editVisible = true;
+      this.form = Object.assign({}, this.currentUser);
     },
-    methods: {
+    submit() {
-      edit() {
+      this.editVisible = false;
-        this.editVisible = true;
+    }
-        this.form = Object.assign({}, this.currentUser);
+  },
-      },
+  computed: {
-      submit() {
+    currentUser: () => {
-        this.editVisible = false;
+      return getCurrentUser();
-      }
-    },
-    computed: {
-      currentUser: () => {
-        return getCurrentUser();
-      }
     }
   }
+}
 </script>
 
 <style scoped>
-  .current-user .username {
+.current-user .username {
-    display: inline-block;
+  display: inline-block;
-    font-size: 16px;
+  font-size: 16px;
-    font-weight: 500;
+  font-weight: 500;
-    margin: 0 5px;
+  margin: 0 5px;
-    overflow-x: hidden;
+  overflow-x: hidden;
-    padding-bottom: 0;
+  padding-bottom: 0;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
-    vertical-align: middle;
+  vertical-align: middle;
-    white-space: nowrap;
+  white-space: nowrap;
-    width: 180px;
+  width: 180px;
-  }
+}
 
-  .current-user .edit {
+.current-user .edit {
-    opacity: 0;
+  opacity: 0;
-  }
+}
+
+.current-user:hover .edit {
+  opacity: 1;
+}
+
+.icon-title {
+  color: #fff;
+  width: 30px;
+  background-color: #72dc91;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  border-radius: 30px;
+  font-size: 14px;
+}
 
-  .current-user:hover .edit {
-    opacity: 1;
-  }
 </style>