修复用户管理无法显示头像问题

（cherry picked commit from <gitee.com//lxy0722/django-vue3-admin/commit/4a01e55143967f0a01d3509804d3ba146724928a>

web/src/stores/userInfo.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { UserInfosStates } from './interface';
 import { Session } from '/@/utils/storage';
 import { request } from '../utils/service';
+import { getBaseURL } from '../utils/baseUrl';
 /**
  * 用户信息
  * @methods setUserInfos 设置用户信息
@@ -72,7 +73,7 @@ export const useUserInfo = defineStore('userInfo', {
 				method: 'get',
 			}).then((res:any)=>{
 				this.userInfos.username = res.data.name;
-				this.userInfos.avatar = res.data.avatar;
+				this.userInfos.avatar = getBaseURL(res.data.avatar);
 				this.userInfos.name = res.data.name;
 				this.userInfos.email = res.data.email;
 				this.userInfos.mobile = res.data.mobile;

web/src/views/system/personal/index.vue

@@ -32,7 +32,7 @@
 										<el-col :xs="24" :sm="24" class="personal-item mb6">
 											<div class="personal-item-label">角色：</div>
 											<div class="personal-item-value">
-												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index">{{ item.name }}</el-tag>
+												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index" style="margin-right: 5px;">{{ item.name }}</el-tag>
 											</div>
 										</el-col>
 									</el-row>

web/src/views/system/user/crud.tsx

@@ -257,10 +257,10 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
                     }),
                     column: {
                         minWidth: 200, //最小列宽
-                        formatter({value,row,index}){
-                            const values = row.role_info.map((item:any) => item.name);
-                            return values.join(',')
-                        }
+                        // formatter({value,row,index}){
+                        //     const values = row.role_info.map((item:any) => item.name);
+                        //     return values.join(',')
+                        // }
                     },
                     form: {
                         rules: [
@@ -382,12 +382,13 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
                 },
                 avatar: {
                     title: '头像',
-                    type: 'avatar-cropper',
+                    type: 'avatar-uploader',
+                    align: 'center',
                     form: {
                         show: false,
                     },
                     column: {
-                        minWidth: 400, //最小列宽
+                        minWidth: 100, //最小列宽
                     },
                 },
                 ...commonCrudConfig({

web/src/views/system/user/index.vue

@@ -33,6 +33,15 @@
             <template #actionbar-right>
               <importExcel api="api/system/user/" v-auth="'user:Import'">导入</importExcel>
             </template>
+            <template #cell_avatar="scope">
+              <div v-if="scope.row.avatar" style="display: flex; justify-content: center; align-items: center;">
+                <el-image 
+                  style="width: 50px; height: 50px; border-radius: 50%; aspect-ratio: 1 /1 ; " 
+                  :src="getBaseURL(scope.row.avatar)"
+                  :preview-src-list="[getBaseURL(scope.row.avatar)]" 
+                  :preview-teleported="true" />
+              </div>
+            </template>
           </fs-crud>
         </el-card>
       </el-col>
@@ -50,6 +59,8 @@ import {ref, onMounted, watch, toRaw, h} from 'vue';
 import XEUtils from 'xe-utils';
 import {getElementLabelLine} from 'element-tree-line';
 import importExcel from '/@/components/importExcel/index.vue'
+import {getBaseURL} from '/@/utils/baseUrl';
+
 
 const ElementTreeLine = getElementLabelLine(h);