diff --git a/continew-admin-ui/pnpm-lock.yaml b/continew-admin-ui/pnpm-lock.yaml
index 531aa8ed..82da0809 100644
--- a/continew-admin-ui/pnpm-lock.yaml
+++ b/continew-admin-ui/pnpm-lock.yaml
@@ -60,7 +60,7 @@ dependencies:
version: 3.3.4
vue-cropper:
specifier: ^1.0.9
- version: 1.0.9
+ version: 1.1.1
vue-echarts:
specifier: ^6.6.1
version: 6.6.1(echarts@5.4.3)(vue@3.3.4)
@@ -9872,6 +9872,10 @@ packages:
fsevents: 2.3.2
dev: true
+ /vue-cropper@1.1.1:
+ resolution: {integrity: sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==}
+ dev: false
+
/vue-demi@0.13.11(vue@3.3.4):
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
diff --git a/continew-admin-ui/src/components/tab-bar/index.vue b/continew-admin-ui/src/components/tab-bar/index.vue
index 609ba2a4..1f592c3b 100644
--- a/continew-admin-ui/src/components/tab-bar/index.vue
+++ b/continew-admin-ui/src/components/tab-bar/index.vue
@@ -74,7 +74,7 @@
overflow: hidden;
.tags-wrap {
padding: 4px 0;
- height: 48px;
+ height: 42px;
white-space: nowrap;
overflow-x: auto;
diff --git a/continew-admin-ui/src/views/system/user/center/components/user-panel.vue b/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
index d49c257e..e8bb09ab 100644
--- a/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
+++ b/continew-admin-ui/src/views/system/user/center/components/user-panel.vue
@@ -20,56 +20,49 @@
</a-avatar>
</template>
</a-upload>
-
- <div class="main">
- <a-modal
- :visible="cropperVisible"
- width="40%"
- :footer="false"
- unmount-on-close
- render-to-body
- @cancel="handleCropperCancel"
- >
- <a-row>
- <a-col :span="14">
- <div style="width: 370px; height: 370px">
- <!-- 头像裁剪框 -->
- <vue-cropper
- ref="cropper"
- :info="true"
- :img="options.img"
- :full="options.full"
- :fixed="options.fixed"
- :fixed-box="options.fixedBox"
- :can-move="options.canMove"
- :center-box="options.centerBox"
- :auto-crop="options.autoCrop"
- :auto-crop-width="options.autoCropWidth"
- :auto-crop-height="options.autoCropHeight"
- :output-type="options.outputType"
- :output-size="options.outputSize"
- @realTime="realTime"
- />
+ <a-modal
+ :title="$t('userCenter.panel.avatar.upload')"
+ :visible="visible"
+ :width="400"
+ :footer="false"
+ unmount-on-close
+ render-to-body
+ @cancel="handleCancel"
+ >
+ <a-row>
+ <a-col :span="14" style="width: 200px; height: 200px">
+ <vue-cropper
+ ref="cropperRef"
+ :img="options.img"
+ :info="true"
+ :auto-crop="options.autoCrop"
+ :auto-crop-width="options.autoCropWidth"
+ :auto-crop-height="options.autoCropHeight"
+ :fixed-box="options.fixedBox"
+ :fixed="options.fixed"
+ :full="options.full"
+ :center-box="options.centerBox"
+ :can-move="options.canMove"
+ :output-type="options.outputType"
+ :output-size="options.outputSize"
+ @real-time="handleRealTime"
+ />
+ </a-col>
+ <a-col :span="10" style="display: flex; justify-content: center">
+ <div :style="previewStyle">
+ <div :style="previews.div">
+ <img :src="previews.url" :style="previews.img" alt="" />
</div>
- </a-col>
- <a-col :span="6">
- <!-- 实时预览 -->
- <div :style="previewStyle">
- <div :style="previews.div">
- <img :src="previews.url" :style="previews.img" alt="" />
- </div>
- </div>
- </a-col>
- </a-row>
- <br />
+ </div>
+ </a-col>
+ </a-row>
+ <div style="text-align: center; padding-top: 30px">
<a-space>
- <a-button type="primary" @click="handleUpload">提交</a-button>
- <a-button type="outline" @click="handleCropperCancel"
- >取消</a-button
- >
+ <a-button type="primary" @click="handleUpload">确定</a-button>
+ <a-button @click="handleCancel">取消</a-button>
</a-space>
- </a-modal>
- </div>
+ </div>
+ </a-modal>
<a-descriptions
:column="2"
@@ -122,19 +115,18 @@
import { reactive, ref, getCurrentInstance } from 'vue';
import { FileItem } from '@arco-design/web-vue';
import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
- import getAvatar from '@/utils/avatar';
import { useUserStore } from '@/store';
+ import getAvatar from '@/utils/avatar';
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/dist/index.css';
- const fileRef = ref(reactive({ name: 'avatar.png' }));
- const previews: any = ref({});
- const previewStyle: any = ref({});
- const cropperVisible = ref(false);
- const cropper = ref();
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
-
+ const cropperRef = ref();
+ const visible = ref(false);
+ const previews: any = ref({});
+ const previewStyle: any = ref({});
+ const fileRef = ref(reactive({ name: 'avatar.png' }));
const avatar = {
uid: '-2',
name: 'avatar.png',
@@ -143,15 +135,15 @@
const avatarList = ref<FileItem[]>([avatar]);
const options: cropperOptions = reactive({
- autoCrop: true,
- autoCropWidth: 200,
- autoCropHeight: 200,
- canMove: true,
- centerBox: true,
- full: false,
- fixed: false,
- fixedBox: false,
img: '',
+ autoCrop: true,
+ autoCropWidth: 160,
+ autoCropHeight: 160,
+ fixedBox: true,
+ fixed: true,
+ full: false,
+ centerBox: true,
+ canMove: true,
outputSize: 1,
outputType: 'png',
});
@@ -168,46 +160,47 @@
reader.onload = () => {
options.img = reader.result;
};
- cropperVisible.value = true;
+ visible.value = true;
return false;
};
/**
* 关闭裁剪框
*/
- const handleCropperCancel = () => {
+ const handleCancel = () => {
fileRef.value = { name: '' };
options.img = '';
- cropperVisible.value = false;
+ visible.value = false;
};
/**
* 上传头像
*/
const handleUpload = () => {
- cropper.value.getCropBlob((data: string | Blob) => {
+ cropperRef.value.getCropBlob((data: string | Blob) => {
const formData = new FormData();
formData.append('avatarFile', data, fileRef.value?.name);
uploadAvatar(formData).then((res) => {
userStore.avatar = res.data.avatar;
avatarList.value[0].url = getAvatar(res.data.avatar, undefined);
proxy.$message.success(res.msg);
- handleCropperCancel();
+ handleCancel();
});
});
};
/**
* 实时预览
- * @param data data
+ *
+ * @param data data 预览图像
*/
- const realTime = (data: any) => {
+ const handleRealTime = (data: any) => {
previewStyle.value = {
width: `${data.w}px`,
height: `${data.h}px`,
overflow: 'hidden',
margin: '0',
- zoom: 0.8,
+ zoom: 100 / data.h,
borderRadius: '50%',
};
previews.value = data;
@@ -231,8 +224,4 @@
font-size: 14px;
}
}
-
- .main {
- position: relative;
- }
</style>
diff --git a/continew-admin-ui/src/views/system/user/center/locale/en-US.ts b/continew-admin-ui/src/views/system/user/center/locale/en-US.ts
index bf766c0d..b342ff35 100644
--- a/continew-admin-ui/src/views/system/user/center/locale/en-US.ts
+++ b/continew-admin-ui/src/views/system/user/center/locale/en-US.ts
@@ -6,6 +6,7 @@ export default {
// user-panel
'userCenter.panel.avatar': 'Avatar',
+ 'userCenter.panel.avatar.upload': 'Upload Avatar',
'userCenter.panel.label.nickname': 'Nick Name :',
'userCenter.panel.label.gender': 'Gender :',
'userCenter.panel.label.phone': 'Phone :',
diff --git a/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts b/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts
index f367805c..7fb3807a 100644
--- a/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts
+++ b/continew-admin-ui/src/views/system/user/center/locale/zh-CN.ts
@@ -6,6 +6,7 @@ export default {
// user-panel
'userCenter.panel.avatar': '头像',
+ 'userCenter.panel.avatar.upload': '上传头像',
'userCenter.panel.label.nickname': '昵称 :',
'userCenter.panel.label.gender': '性别 :',
'userCenter.panel.label.phone': '手机号码 :',