bug fixes

src/components/base/AppUpload.vue

 <script lang="ts" setup>
 import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Document, ZoomIn, Delete } from '@element-plus/icons-vue'
 import type { UploadProps, UploadUserFile, UploadFile, UploadFiles, UploadInstance } from 'element-plus'
 import md5 from 'blueimp-md5'
 import axios from 'axios'
@@ -112,6 +112,13 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
   window.open(uploadFile.url)
 }
+
+function onPreview() {
+  window.open(props.modelValue as string)
+}
+function onRemove() {
+  emit('update:modelValue', '')
+}
 </script>
 
 <template>
@@ -138,7 +145,19 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
         </template>
       </template>
       <div class="avatar-uploader" v-else>
-        <el-image :src="(modelValue as string)" fit="contain" v-if="modelValue" />
+        <template v-if="modelValue">
+          <el-image :src="(modelValue as string)" fit="contain">
+            <template #error>
+              <div class="image-slot">
+                <el-icon><Document /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <div class="avatar-actions" @click.stop>
+            <el-icon @click="onPreview"><ZoomIn /></el-icon>
+            <el-icon @click="onRemove"><Delete /></el-icon>
+          </div>
+        </template>
         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
       </div>
     </slot>
@@ -166,6 +185,11 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
     width: 100%;
     height: 100%;
   }
+  &:hover {
+    .avatar-actions {
+      opacity: 1;
+    }
+  }
 }
 .avatar-uploader:hover {
   border-color: var(--el-color-primary);
@@ -177,4 +201,36 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
   height: 100%;
   text-align: center;
 }
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.avatar-actions {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  cursor: default;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  opacity: 0;
+  font-size: 20px;
+  background-color: var(--el-overlay-color-lighter);
+  transition: opacity var(--el-transition-duration);
+  .el-icon {
+    cursor: pointer;
+  }
+  .el-icon + .el-icon {
+    margin-left: 1em;
+  }
+}
 </style>

src/modules/system/roles/types.ts

@@ -17,7 +17,8 @@ export interface RoleInfo {
   created_at: string
   updated_at: string
   levels: string[]
-  members: RoleMember[]
+  list: RoleMember[]
+  total: number
 }
 
 // 角色成员

src/modules/system/roles/views/Details.vue

@@ -18,7 +18,7 @@ const listOptions = $computed(() => {
       params: { role_id: route.params.id },
       callback: (res: RoleInfo) => {
         roleInfo = res
-        return { list: res.members }
+        return { list: res.list, total: res.total }
       }
     },
     columns: [

src/modules/system/roles/views/Index.vue

@@ -21,7 +21,7 @@ const listOptions = $computed(() => {
     columns: [
       { label: '名称', prop: 'name' },
       { label: '描述', prop: 'desc' },
-      { label: '包含用户数量', prop: 'user_count' },
+      { label: '包含用户数量', prop: 'total' },
       { label: '角色类型', prop: 'levels' },
       { label: '更新时间', prop: 'updated_at' },
       { label: '操作', slots: 'table-x', width: 100 }