feat base

Co-authored-by: Copilot <copilot@github.com>

src/views/systemList/base/base.vue

@@ -8,14 +8,29 @@
         </el-form-item>
         <el-form-item label="系统图标" prop="logo">
           <div class="text-center">
-            <userAvatar />
+            <el-upload
+              v-model:file-list="fileList"
+              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+              list-type="picture-card"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="handleRemove"
+            >
+              <el-icon><Plus /></el-icon>
+            </el-upload>
+
+            <el-dialog v-model="dialogVisible">
+              <img w-full :src="dialogImageUrl" alt="Preview Image" />
+            </el-dialog>
           </div>
-          <br />
+        </el-form-item>
+        <el-form-item class="ml-17">
           <p>只支持.jpg、.png格式,最多上传1张，单张大小不超过500kb</p>
         </el-form-item>
-        <el-form-item>
+        <el-form-item class="button-item">
-          <el-button @click="cancel">取消</el-button>
+          <div class="flex justify-center gap-4">
-          <el-button type="primary" @click="save">保存配置</el-button>
+            <el-button @click="cancel" style="width: 120px">取 消</el-button>
+            <el-button type="primary" @click="save" style="width: 120px">保存配置</el-button>
+          </div>
         </el-form-item>
       </el-form>
     </div>
@@ -31,6 +46,17 @@ const form = reactive({
   remark: '',
   logo: ''
 });
+
+const cancel = () => {
+  console.log('cancel');
+};
+const save = () => {
+  console.log('save');
+};
+
+/* ------------------------------------------ 图片上传逻辑----------------------------------------- */
+import { Plus } from '@element-plus/icons-vue';
+
 const fileList = ref<UploadUserFile[]>([
   {
     name: 'food.jpeg',
@@ -38,11 +64,16 @@ const fileList = ref<UploadUserFile[]>([
   }
 ]);
 
-const cancel = () => {
+const dialogImageUrl = ref('');
-  console.log('cancel');
+const dialogVisible = ref(false);
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles);
 };
-const save = () => {
+
-  console.log('save');
+const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
+  dialogImageUrl.value = uploadFile.url!;
+  dialogVisible.value = true;
 };
 </script>
 
@@ -59,4 +90,12 @@ const save = () => {
     padding: 20px;
   }
 }
+
+// 覆盖 el-form-item 默认样式，确保按钮居中
+:deep(.button-item) {
+  .el-form-item__content {
+    justify-content: center !important;
+    margin-top: 50px;
+  }
+}
 </style>