diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 60325ff4..a2c4b872 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -1,12 +1,16 @@
 <template>
   <div id="app">
     <router-view />
+    <theme-picker />
   </div>
 </template>
 
 <script>
-export default  {
-  name:  'App',
+import ThemePicker from "@/components/ThemePicker";
+
+export default {
+  name: "App",
+  components: { ThemePicker },
     metaInfo() {
         return {
             title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
@@ -15,5 +19,10 @@ export default  {
             }
         }
     }
-}
+};
 </script>
+<style scoped>
+#app .theme-picker {
+  display: none;
+}
+</style>
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index e3912cec..4d3cf312 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -250,9 +250,10 @@
 }
 
 .avatar-upload-preview {
-	position: absolute;
+	position: relative;
 	top: 50%;
-	transform: translate(50%, -50%);
+	left: 50%;
+	transform: translate(-50%, -50%);
 	width: 200px;
 	height: 200px;
 	border-radius: 50%;
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index e9d60c92..3edf44ac 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -576,8 +576,8 @@ export default {
         this.form = response.data.user;
         this.postOptions = response.data.posts;
         this.roleOptions = response.data.roles;
-        this.form.postIds = response.data.postIds;
-        this.form.roleIds = response.data.roleIds;
+        this.$set(this.form, "postIds", response.data.postIds);
+        this.$set(this.form, "roleIds", response.data.roleIds);
         this.open = true;
         this.title = "修改用户";
         this.form.password = "";
@@ -667,4 +667,3 @@ export default {
   }
 };
 </script>
-
diff --git a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
index d094602a..66922b38 100644
--- a/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
+++ b/ruoyi-ui/src/views/system/user/profile/userAvatar.vue
@@ -24,7 +24,7 @@
       </el-row>
       <br />
       <el-row>
-        <el-col :lg="2" :md="2">
+        <el-col :lg="2" :sm="3" :xs="3">
           <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
             <el-button size="small">
               选择
@@ -32,19 +32,19 @@
             </el-button>
           </el-upload>
         </el-col>
-        <el-col :lg="{span: 1, offset: 2}" :md="2">
+        <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2">
           <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
         </el-col>
-        <el-col :lg="{span: 1, offset: 1}" :md="2">
+        <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2">
           <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
         </el-col>
-        <el-col :lg="{span: 2, offset: 6}" :md="2">
+        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
           <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
         </el-col>
       </el-row>
@@ -56,6 +56,7 @@
 import store from "@/store";
 import { VueCropper } from "vue-cropper";
 import { uploadAvatar } from "@/api/system/user";
+import { debounce } from '@/utils'
 
 export default {
   components: { VueCropper },
@@ -80,7 +81,8 @@ export default {
         fixedBox: true, // 固定截图框大小 不允许改变
         filename: ''
       },
-      previews: {}
+      previews: {},
+      resizeHandler: null
     };
   },
   methods: {
@@ -91,6 +93,16 @@ export default {
     // 打开弹出层结束时的回调
     modalOpened() {
       this.visible = true;
+      if (!this.resizeHandler) {
+        this.resizeHandler = debounce(() => {
+          this.refresh()
+        }, 100)
+      }
+      window.addEventListener("resize", this.resizeHandler)
+    },
+    // 刷新组件
+    refresh() {
+      this.$refs.cropper.refresh();
     },
     // 覆盖默认的上传行为
     requestUpload() {
@@ -144,6 +156,7 @@ export default {
     closeDialog() {
       this.options.img = store.getters.avatar
       this.visible = false;
+      window.removeEventListener("resize", this.resizeHandler)
     }
   }
 };
@@ -173,3 +186,4 @@ export default {
   border-radius: 50%;
 }
 </style>
+