From 725cd07a456b94e4bd25add5b3f28d6b605f82c7 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 19 Nov 2025 18:26:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=A3=81=E5=89=AA=E4=B8=8D?= =?UTF-8?q?=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontent/ops_vue_js/package-lock.json | 138 ++++++++++++++++++ frontent/ops_vue_js/package.json | 2 + .../ops_vue_js/src/components/datePicker.vue | 2 +- .../src/components/imageCropper.vue | 131 +++++++++++++++++ frontent/ops_vue_js/src/i18n/en.json | 3 +- frontent/ops_vue_js/src/i18n/zh-CN.json | 3 +- frontent/ops_vue_js/src/views/HomeView.vue | 2 + .../ops_vue_js/src/views/settings/account.vue | 9 ++ 8 files changed, 287 insertions(+), 3 deletions(-) create mode 100644 frontent/ops_vue_js/src/components/imageCropper.vue diff --git a/frontent/ops_vue_js/package-lock.json b/frontent/ops_vue_js/package-lock.json index e746c32..60bce58 100644 --- a/frontent/ops_vue_js/package-lock.json +++ b/frontent/ops_vue_js/package-lock.json @@ -12,9 +12,11 @@ "@tabler/icons-vue": "^3.35.0", "axios": "^1.13.2", "bootstrap": "^5.3.8", + "cropperjs": "^2.1.0", "litepicker": "^2.0.12", "pinia": "^3.0.4", "vue": "^3.5.22", + "vue-cropper": "^0.6.5", "vue-i18n": "^11.1.12", "vue-router": "^4.6.3" }, @@ -483,6 +485,126 @@ "node": ">=6.9.0" } }, + "node_modules/@cropper/element": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.1.0.tgz", + "integrity": "sha512-2zELddqHQNmlvkPoiYzE5nxEjPE+C8nXoTPuvV3FvLp3YjBinc7qb73Icg9UXP0o9qC4+h9q96JgGo0AyMO/Ng==", + "license": "MIT", + "dependencies": { + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-canvas": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.1.0.tgz", + "integrity": "sha512-el+rfJpZxsD2q5XxDBA4fRczcrOqB65Lb7roqXOq8LKufwf4bPWA9C6DjNJJahh/TP94dsLIEy3tSkgRMDv3Aw==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-crosshair": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-crosshair/-/element-crosshair-2.1.0.tgz", + "integrity": "sha512-0V589dAx8uZAfvJwdINLn76gfPQEafPH94ukjJ76uX0FCUovLaAVX+VRD/MDSYn0Mza/xejzmL9Dhd1DfemvmA==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-grid": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-grid/-/element-grid-2.1.0.tgz", + "integrity": "sha512-dEnk0rO+vp553LMvsPYgfrqVFcYXeVFrgFeavBYYEhAXtO40p7kN4rmLYLMMjaN+T/Mx2BATv6kUQpALKy2HLw==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-handle": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-handle/-/element-handle-2.1.0.tgz", + "integrity": "sha512-8BklWA4C/2GGAULupIWleSnGutECvYt3vx9flodqDfZpDEozws4LgLqmmzVuQmVkRVUdLnXdtx28kjgWLtzkHg==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-image": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-image/-/element-image-2.1.0.tgz", + "integrity": "sha512-mXOV8ixJvG0XtTxLebYAKDjEkFbFOQnsF02hXPZk1yQSV0J+LLhN7a2NePrtKnoTsEV19fhhX3UorMoyGGxvzg==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/element-canvas": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-selection": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-selection/-/element-selection-2.1.0.tgz", + "integrity": "sha512-mtFtBl6HIa/s9TWohXw+Z5eJoeYTqylrIcHvS7oVv0uM7IyeRwBW65Q7z+KtLfq/LW+2Sw/XDyvR+VN/DawBPw==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/element-canvas": "^2.1.0", + "@cropper/element-image": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-shade": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-shade/-/element-shade-2.1.0.tgz", + "integrity": "sha512-zMdyqbb0lc0Vd1oj2Z1miIZvhyZG41OXMHvrNt0hNwblh0dVdrvtw48lnFDgRv+672vt2CNx7Q04GuvCQfPlgg==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/element-canvas": "^2.1.0", + "@cropper/element-selection": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/element-viewer": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/element-viewer/-/element-viewer-2.1.0.tgz", + "integrity": "sha512-XnxlQuqHitd1FOFZ6E0yXAF5NYd/LyIvONLLHI9p1rJw747WYKUPxQaSYtFKF7IOizJu/8mMj++Zc1dZ5ZP3YQ==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/element-canvas": "^2.1.0", + "@cropper/element-image": "^2.1.0", + "@cropper/element-selection": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, + "node_modules/@cropper/elements": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/elements/-/elements-2.1.0.tgz", + "integrity": "sha512-qvzlYDn3VQgPPpsCu6Gi1XUO0v3vpXQFSjjxcVijbXeNsl/eiKrN7H9/CEiRgi5vr8kXfd7ZvgYxBjUBbH+y+w==", + "license": "MIT", + "dependencies": { + "@cropper/element": "^2.1.0", + "@cropper/element-canvas": "^2.1.0", + "@cropper/element-crosshair": "^2.1.0", + "@cropper/element-grid": "^2.1.0", + "@cropper/element-handle": "^2.1.0", + "@cropper/element-image": "^2.1.0", + "@cropper/element-selection": "^2.1.0", + "@cropper/element-shade": "^2.1.0", + "@cropper/element-viewer": "^2.1.0" + } + }, + "node_modules/@cropper/utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cropper/utils/-/utils-2.1.0.tgz", + "integrity": "sha512-wLtpZ4/UWgo+fGmG8NBWge8x5ehjfDe9ovleDfLy8kpwFaw43XXOEXQtRL1UNr0u4JZxaeO8FcXcolRWUUrlRQ==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", @@ -1843,6 +1965,16 @@ "url": "https://github.com/sponsors/mesqueeb" } }, + "node_modules/cropperjs": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.1.0.tgz", + "integrity": "sha512-SsSDqdVRl+mjbIBkGWlk1gCGcc+HzBqCbH5EQ+1tkAFUdxq2KUGukXF1RqhmvXrrdrX7PDwSUkWgXS7E36KvGQ==", + "license": "MIT", + "dependencies": { + "@cropper/elements": "^2.1.0", + "@cropper/utils": "^2.1.0" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -2999,6 +3131,12 @@ } } }, + "node_modules/vue-cropper": { + "version": "0.6.5", + "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.6.5.tgz", + "integrity": "sha512-lSvY6IpeA/Tv/iPZ/FOkMHVRBPSlm7t57nuHEZFBMRNOH8ElvfqVlnHGDOAMlvPhh9gHiddiQoASS+fY0MFX0g==", + "license": "ISC" + }, "node_modules/vue-i18n": { "version": "11.1.12", "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz", diff --git a/frontent/ops_vue_js/package.json b/frontent/ops_vue_js/package.json index 1d3b721..fbb6f5f 100644 --- a/frontent/ops_vue_js/package.json +++ b/frontent/ops_vue_js/package.json @@ -16,9 +16,11 @@ "@tabler/icons-vue": "^3.35.0", "axios": "^1.13.2", "bootstrap": "^5.3.8", + "cropperjs": "^2.1.0", "litepicker": "^2.0.12", "pinia": "^3.0.4", "vue": "^3.5.22", + "vue-cropper": "^0.6.5", "vue-i18n": "^11.1.12", "vue-router": "^4.6.3" }, diff --git a/frontent/ops_vue_js/src/components/datePicker.vue b/frontent/ops_vue_js/src/components/datePicker.vue index f3fdf31..55cee8e 100644 --- a/frontent/ops_vue_js/src/components/datePicker.vue +++ b/frontent/ops_vue_js/src/components/datePicker.vue @@ -65,7 +65,7 @@ defineExpose({ diff --git a/frontent/ops_vue_js/src/components/imageCropper.vue b/frontent/ops_vue_js/src/components/imageCropper.vue new file mode 100644 index 0000000..1d1e82a --- /dev/null +++ b/frontent/ops_vue_js/src/components/imageCropper.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json index af05767..fb07a20 100644 --- a/frontent/ops_vue_js/src/i18n/en.json +++ b/frontent/ops_vue_js/src/i18n/en.json @@ -45,7 +45,8 @@ "user_home": "Profile", "user_settings": "Settings", "preferences": "Preferences", - "administrator": "Administrator" + "administrator": "Administrator", + "select_date":"Select a date" }, "settings": { "account_settings": "Account Settings", diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json index 66bcda7..639738d 100644 --- a/frontent/ops_vue_js/src/i18n/zh-CN.json +++ b/frontent/ops_vue_js/src/i18n/zh-CN.json @@ -45,7 +45,8 @@ "user_home": "个人主页", "user_settings": "个人资料", "preferences": "偏好设置", - "administrator": "管理员" + "administrator": "管理员", + "select_date":"选择日期" }, "settings": { "account_settings": "个人设置", diff --git a/frontent/ops_vue_js/src/views/HomeView.vue b/frontent/ops_vue_js/src/views/HomeView.vue index 0f0884c..c31f2a8 100644 --- a/frontent/ops_vue_js/src/views/HomeView.vue +++ b/frontent/ops_vue_js/src/views/HomeView.vue @@ -3,6 +3,7 @@ import { ref } from "vue"; import { my_network_func } from "@/my_network_func"; import { useUserStore } from "@/stores/user"; import MyOffcanvas from "@/components/MyOffcanvas.vue"; +import imageCropper from "@/components/imageCropper.vue"; const user = useUserStore(); const mos = ref(); @@ -32,5 +33,6 @@ function tt(){ {{ user.userInfo }} + diff --git a/frontent/ops_vue_js/src/views/settings/account.vue b/frontent/ops_vue_js/src/views/settings/account.vue index f23f6d0..3ea6943 100644 --- a/frontent/ops_vue_js/src/views/settings/account.vue +++ b/frontent/ops_vue_js/src/views/settings/account.vue @@ -3,6 +3,7 @@ import { onMounted, watch, ref } from "vue"; import settingNavigation from "@/components/settingNavigation.vue"; import { useI18n } from "vue-i18n"; import datePicker from "@/components/datePicker.vue"; +import imageCropper from "@/components/imageCropper.vue"; const { t } = useI18n(); const birthday = ref(); @@ -46,6 +47,13 @@ function updataInfo() { console.log("备注:", userremarkValue); console.log("生日:", birthdayValue); } + +onMounted(()=>{ + //console.log("account mounted"); + //username.value.value="Kevin"; + +}) +