feat: 🚀 用户修改信息,用户修改密码,添加部分图片

2024-10-04 16:50:43 +08:00 · 2024-10-04 16:50:43 +08:00 · f1493875ee
parent 26448a7b9f
commit f1493875ee
68 changed files with 1271 additions and 407 deletions
--- a/README.md
+++ b/README.md
@ -1,75 +0,0 @@
-<h1>bunny-admin精简版（国际化版本）</h1>
-
-[![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)
-
-## 介绍
-
-精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin)
-提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org)
-的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
-
-在之前作者基础上添加了适合自己开发的相关内容
-
-## 维护者
-
-[Bunny](https://gitee.com/BunnyBoss/bunny-admin-element-thin)
-
-## 许可证
-
-[MIT © 2020-present, pure-admin](./LICENSE)
-
-## 配置文件
-
-```json
-{
-  "Version": "5.8.0",
-  // 平台版本号
-  "Title": "PureAdmin",
-  // 平台标题
-  "FixedHeader": true,
-  // 是否固定页头和标签页（true 内容区超出出现纵向滚动条 false 页头、标签页、内容区可纵向滚动）
-  "HiddenSideBar": false,
-  // 隐藏菜单和页头，只显示标签页和内容区
-  "MultiTagsCache": false,
-  // 是否开启持久化标签 （会缓存）
-  "KeepAlive": true,
-  // 是否开启组件缓存（此处不同于路由的 keepAlive，如果此处为 true 表示设置路由的 keepAlive 起效，反之设置 false 屏蔽平台整体的 keepAlive，即使路由设置了keepAlive 也不再起作用）
-  "Locale": "zh",
-  // 默认国际化语言 （zh 中文、en 英文）（会缓存）（max版本额外配置：tw 繁體中文、ja 日语、ko 韩语）
-  "Layout": "vertical",
-  // 导航菜单模式 （vertical 左侧菜单模式、horizontal 顶部菜单模式、mix 混合菜单模式）（会缓存）（max版本额外配置：double 左侧双栏菜单模式）
-  "Theme": "light",
-  // 主题模式（会缓存）
-  "DarkMode": false,
-  // 是否开启暗黑模式 （会缓存）
-  "OverallStyle": "light",
-  // 整体风格（浅色：light、深色：dark、自动：system）（会缓存）更多详情看 https://github.com/pure-admin/vue-pure-admin/commit/dd783136229da9e291b518df93227111f4216ad0#commitcomment-137027417
-  "Grey": false,
-  // 灰色模式（会缓存）
-  "Weak": false,
-  // 色弱模式（会缓存）
-  "HideTabs": false,
-  // 是否隐藏标签页（会缓存）
-  "HideFooter": false,
-  // 是否隐藏页脚（会缓存）
-  "SidebarStatus": true,
-  // vertical左侧菜单模式模式下侧边栏状态（true 展开、false 收起）（会缓存）
-  "EpThemeColor": "#409EFF",
-  // 主题色（会缓存）
-  "ShowLogo": true,
-  // 是否显示logo（会缓存）
-  "ShowModel": "smart",
-  // 标签页风格（smart 灵动模式、card 卡片模式）（会缓存）
-  "MenuArrowIconNoTransition": false,
-  // 菜单展开、收起图标是否开启动画，如遇菜单展开、收起卡顿设置成 true 即可（默认 false，开启动画）
-  "CachingAsyncRoutes": false,
-  // 是否开启动态路由缓存本地的全局配置，默认 false
-  "TooltipEffect": "light",
-  // 可配置平台主体所有 el-tooltip 的 effect 属性，默认 light，不会影响业务代码
-  "ResponsiveStorageNameSpace": "responsive-",
-  // 本地响应式存储的命名空间
-  "MenuSearchHistory": 6
-  // 菜单搜索历史的最大条目
-}
-
-```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -1,181 +1,174 @@
-import js from "@eslint/js";
-import pluginVue from "eslint-plugin-vue";
-import * as parserVue from "vue-eslint-parser";
-import configPrettier from "eslint-config-prettier";
-import pluginPrettier from "eslint-plugin-prettier";
-import { defineFlatConfig } from "eslint-define-config";
-import * as parserTypeScript from "@typescript-eslint/parser";
-import pluginTypeScript from "@typescript-eslint/eslint-plugin";
+import js from '@eslint/js';
+import pluginVue from 'eslint-plugin-vue';
+import * as parserVue from 'vue-eslint-parser';
+import configPrettier from 'eslint-config-prettier';
+import pluginPrettier from 'eslint-plugin-prettier';
+import { defineFlatConfig } from 'eslint-define-config';
+import * as parserTypeScript from '@typescript-eslint/parser';
+import pluginTypeScript from '@typescript-eslint/eslint-plugin';

 export default defineFlatConfig([
-  {
-    ...js.configs.recommended,
-    ignores: [
-      "**/.*",
-      "dist/*",
-      "*.d.ts",
-      "public/*",
-      "src/assets/**",
-      "src/**/iconfont/**"
-    ],
-    languageOptions: {
-      globals: {
-        // index.d.ts
-        RefType: "readonly",
-        EmitType: "readonly",
-        TargetContext: "readonly",
-        ComponentRef: "readonly",
-        ElRef: "readonly",
-        ForDataType: "readonly",
-        AnyFunction: "readonly",
-        PropType: "readonly",
-        Writable: "readonly",
-        Nullable: "readonly",
-        NonNullable: "readonly",
-        Recordable: "readonly",
-        ReadonlyRecordable: "readonly",
-        Indexable: "readonly",
-        DeepPartial: "readonly",
-        Without: "readonly",
-        Exclusive: "readonly",
-        TimeoutHandle: "readonly",
-        IntervalHandle: "readonly",
-        Effect: "readonly",
-        ChangeEvent: "readonly",
-        WheelEvent: "readonly",
-        ImportMetaEnv: "readonly",
-        Fn: "readonly",
-        PromiseFn: "readonly",
-        ComponentElRef: "readonly",
-        parseInt: "readonly",
-        parseFloat: "readonly"
-      }
-    },
-    plugins: {
-      prettier: pluginPrettier
-    },
-    rules: {
-      ...configPrettier.rules,
-      ...pluginPrettier.configs.recommended.rules,
-      "no-debugger": "off",
-      "no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_"
-        }
-      ],
-      "prettier/prettier": [
-        "error",
-        {
-          endOfLine: "auto"
-        }
-      ]
-    }
-  },
-  {
-    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
-    languageOptions: {
-      parser: parserTypeScript,
-      parserOptions: {
-        sourceType: "module"
-      }
-    },
-    plugins: {
-      "@typescript-eslint": pluginTypeScript
-    },
-    rules: {
-      ...pluginTypeScript.configs.strict.rules,
-      "@typescript-eslint/ban-types": "off",
-      "@typescript-eslint/no-redeclare": "error",
-      "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/prefer-as-const": "warn",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-import-type-side-effects": "error",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "@typescript-eslint/consistent-type-imports": [
-        "error",
-        { disallowTypeAnnotations: false, fixStyle: "inline-type-imports" }
-      ],
-      "@typescript-eslint/prefer-literal-enum-member": [
-        "error",
-        { allowBitwiseExpressions: true }
-      ],
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_"
-        }
-      ]
-    }
-  },
-  {
-    files: ["**/*.d.ts"],
-    rules: {
-      "eslint-comments/no-unlimited-disable": "off",
-      "import/no-duplicates": "off",
-      "unused-imports/no-unused-vars": "off"
-    }
-  },
-  {
-    files: ["**/*.?([cm])js"],
-    rules: {
-      "@typescript-eslint/no-require-imports": "off",
-      "@typescript-eslint/no-var-requires": "off"
-    }
-  },
-  {
-    files: ["**/*.vue"],
-    languageOptions: {
-      globals: {
-        $: "readonly",
-        $$: "readonly",
-        $computed: "readonly",
-        $customRef: "readonly",
-        $ref: "readonly",
-        $shallowRef: "readonly",
-        $toRef: "readonly"
-      },
-      parser: parserVue,
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true
-        },
-        extraFileExtensions: [".vue"],
-        parser: "@typescript-eslint/parser",
-        sourceType: "module"
-      }
-    },
-    plugins: {
-      vue: pluginVue
-    },
-    processor: pluginVue.processors[".vue"],
-    rules: {
-      ...pluginVue.configs.base.rules,
-      ...pluginVue.configs["vue3-essential"].rules,
-      ...pluginVue.configs["vue3-recommended"].rules,
-      "no-undef": "off",
-      "no-unused-vars": "off",
-      "vue/no-v-html": "off",
-      "vue/require-default-prop": "off",
-      "vue/require-explicit-emits": "off",
-      "vue/multi-word-component-names": "off",
-      "vue/no-setup-props-reactivity-loss": "off",
-      "vue/html-self-closing": [
-        "error",
-        {
-          html: {
-            void: "always",
-            normal: "always",
-            component: "always"
-          },
-          svg: "always",
-          math: "always"
-        }
-      ]
-    }
-  }
+	{
+		...js.configs.recommended,
+		ignores: ['**/.*', 'dist/*', '*.d.ts', 'public/*', 'src/assets/**', 'src/**/iconfont/**'],
+		languageOptions: {
+			globals: {
+				// index.d.ts
+				RefType: 'readonly',
+				EmitType: 'readonly',
+				TargetContext: 'readonly',
+				ComponentRef: 'readonly',
+				ElRef: 'readonly',
+				ForDataType: 'readonly',
+				AnyFunction: 'readonly',
+				PropType: 'readonly',
+				Writable: 'readonly',
+				Nullable: 'readonly',
+				NonNullable: 'readonly',
+				Recordable: 'readonly',
+				ReadonlyRecordable: 'readonly',
+				Indexable: 'readonly',
+				DeepPartial: 'readonly',
+				Without: 'readonly',
+				Exclusive: 'readonly',
+				TimeoutHandle: 'readonly',
+				IntervalHandle: 'readonly',
+				Effect: 'readonly',
+				ChangeEvent: 'readonly',
+				WheelEvent: 'readonly',
+				ImportMetaEnv: 'readonly',
+				Fn: 'readonly',
+				PromiseFn: 'readonly',
+				ComponentElRef: 'readonly',
+				parseInt: 'readonly',
+				parseFloat: 'readonly',
+			},
+		},
+		plugins: {
+			prettier: pluginPrettier,
+		},
+		rules: {
+			...configPrettier.rules,
+			...pluginPrettier.configs.recommended.rules,
+			'no-debugger': 'off',
+			'no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+				},
+			],
+			'prettier/prettier': [
+				'error',
+				{
+					endOfLine: 'auto',
+				},
+			],
+		},
+	},
+	{
+		files: ['**/*.?([cm])ts', '**/*.?([cm])tsx'],
+		languageOptions: {
+			parser: parserTypeScript,
+			parserOptions: {
+				sourceType: 'module',
+			},
+		},
+		plugins: {
+			'@typescript-eslint': pluginTypeScript,
+		},
+		rules: {
+			...pluginTypeScript.configs.strict.rules,
+			'@typescript-eslint/ban-types': 'off',
+			'@typescript-eslint/no-redeclare': 'error',
+			'@typescript-eslint/ban-ts-comment': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/prefer-as-const': 'warn',
+			'@typescript-eslint/no-empty-function': 'off',
+			'@typescript-eslint/no-non-null-assertion': 'off',
+			'@typescript-eslint/no-import-type-side-effects': 'error',
+			'@typescript-eslint/prefer-literal-enum-member': 'off',
+			'@typescript-eslint/explicit-module-boundary-types': 'off',
+			'@typescript-eslint/consistent-type-imports': [
+				'error',
+				{
+					disallowTypeAnnotations: false,
+					fixStyle: 'inline-type-imports',
+				},
+			],
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+				},
+			],
+		},
+	},
+	{
+		files: ['**/*.d.ts'],
+		rules: {
+			'eslint-comments/no-unlimited-disable': 'off',
+			'import/no-duplicates': 'off',
+			'unused-imports/no-unused-vars': 'off',
+		},
+	},
+	{
+		files: ['**/*.?([cm])js'],
+		rules: {
+			'@typescript-eslint/no-require-imports': 'off',
+			'@typescript-eslint/no-var-requires': 'off',
+		},
+	},
+	{
+		files: ['**/*.vue'],
+		languageOptions: {
+			globals: {
+				$: 'readonly',
+				$$: 'readonly',
+				$computed: 'readonly',
+				$customRef: 'readonly',
+				$ref: 'readonly',
+				$shallowRef: 'readonly',
+				$toRef: 'readonly',
+			},
+			parser: parserVue,
+			parserOptions: {
+				ecmaFeatures: {
+					jsx: true,
+				},
+				extraFileExtensions: ['.vue'],
+				parser: '@typescript-eslint/parser',
+				sourceType: 'module',
+			},
+		},
+		plugins: {
+			vue: pluginVue,
+		},
+		processor: pluginVue.processors['.vue'],
+		rules: {
+			...pluginVue.configs.base.rules,
+			...pluginVue.configs['vue3-essential'].rules,
+			...pluginVue.configs['vue3-recommended'].rules,
+			'no-undef': 'off',
+			'no-unused-vars': 'off',
+			'vue/no-v-html': 'off',
+			'vue/require-default-prop': 'off',
+			'vue/require-explicit-emits': 'off',
+			'vue/multi-word-component-names': 'off',
+			'vue/no-setup-props-reactivity-loss': 'off',
+			'vue/html-self-closing': [
+				'error',
+				{
+					html: {
+						void: 'always',
+						normal: 'always',
+						component: 'always',
+					},
+					svg: 'always',
+					math: 'always',
+				},
+			],
+		},
+	},
 ]);
--- a/src/api/v1/system.ts
+++ b/src/api/v1/system.ts
@ -31,6 +31,11 @@ export const deletedMenuByIds = (data?: any) => {
 	return http.request<BaseResult<any>>('delete', `router/deletedMenuByIds`, { data });
 };

+/** 上传文件 */
+export const fetchUploadFIle = (data: any) => {
+	return http.post<BaseResult<any>>('/files/upload', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
+};
+
 // ------------未确认------------
 /** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
--- a/src/api/v1/user.ts
+++ b/src/api/v1/user.ts
@ -63,3 +63,11 @@ export const fetchLogout = (data?: object) => {
 export const fetchGetUserinfoById = (data?: object) => {
 	return http.request<BaseResult<UserResult>>('get', 'user/getUserinfoById', { params: data });
 };
+
+/**
+ * 管理员修改管理员用户密码
+ * @param data
+ */
+export const fetchUpdateUserPasswordByAdmin = (data: any) => {
+	return http.request<BaseResult<UserResult>>('put', 'user/updateUserPasswordByAdmin', { data });
+};
--- a/src/assets/images/tip/403.png
+++ b/src/assets/images/tip/403.png
--- a/src/assets/images/tip/404.png
+++ b/src/assets/images/tip/404.png
--- a/src/assets/images/tip/500.png
+++ b/src/assets/images/tip/500.png
--- a/src/assets/images/tip/503.png
+++ b/src/assets/images/tip/503.png
--- a/src/assets/images/tip/image-loading-error1.png
+++ b/src/assets/images/tip/image-loading-error1.png
--- a/src/assets/images/tip/image-loading-error2.png
+++ b/src/assets/images/tip/image-loading-error2.png
--- a/src/assets/images/tip/image-loading.png
+++ b/src/assets/images/tip/image-loading.png
--- a/src/assets/images/tip/loading.gif
+++ b/src/assets/images/tip/loading.gif
--- a/src/assets/images/tip/login-first.png
+++ b/src/assets/images/tip/login-first.png
--- a/src/assets/images/tip/推送失败.png
+++ b/src/assets/images/tip/推送失败.png
--- a/src/assets/images/tip/推送成功.png
+++ b/src/assets/images/tip/推送成功.png
--- a/src/assets/images/tip/搜索不到信息.png
+++ b/src/assets/images/tip/搜索不到信息.png
--- a/src/assets/images/tip/暂无任务.png
+++ b/src/assets/images/tip/暂无任务.png
--- a/src/assets/images/tip/暂无信号.png
+++ b/src/assets/images/tip/暂无信号.png
--- a/src/assets/images/tip/暂无充值记录.png
+++ b/src/assets/images/tip/暂无充值记录.png
--- a/src/assets/images/tip/暂无内容.png
+++ b/src/assets/images/tip/暂无内容.png
--- a/src/assets/images/tip/暂无搜索结果.png
+++ b/src/assets/images/tip/暂无搜索结果.png
--- a/src/assets/images/tip/暂无消息.png
+++ b/src/assets/images/tip/暂无消息.png
--- a/src/assets/images/tip/暂无详情页.png
+++ b/src/assets/images/tip/暂无详情页.png
--- a/src/assets/images/tip/暂无邀请.png
+++ b/src/assets/images/tip/暂无邀请.png
--- a/src/assets/images/tip/暂无阅读.png
+++ b/src/assets/images/tip/暂无阅读.png
--- a/src/assets/images/tip/正在建设中.png
+++ b/src/assets/images/tip/正在建设中.png
--- a/src/assets/user.jpg
+++ b/src/assets/user.jpg
--- a/src/components/ReCropperPreview/index.ts
+++ b/src/components/ReCropperPreview/index.ts
@ -1,5 +1,5 @@
-import reCropperPreview from "./src/index.vue";
-import { withInstall } from "@pureadmin/utils";
+import reCropperPreview from './src/index.vue';
+import { withInstall } from '@pureadmin/utils';

 /** 图片裁剪预览组件 */
 export const ReCropperPreview = withInstall(reCropperPreview);
--- a/src/components/CropperPreview/src/index.vue
+++ b/src/components/CropperPreview/src/index.vue
@ -0,0 +1,53 @@
+<script lang="tsx" setup>
+import { ref } from 'vue';
+import ReCropper from '@/components/ReCropper';
+import { formatBytes } from '@pureadmin/utils';
+
+defineOptions({
+	name: 'ReCropperPreview',
+});
+
+defineProps({
+	imgSrc: String,
+});
+
+const emit = defineEmits(['cropper']);
+
+const infos = ref();
+const popoverRef = ref();
+const refCropper = ref();
+const showPopover = ref(false);
+const cropperImg = ref<string>('');
+
+function onCropper({ base64, blob, info }) {
+	infos.value = info;
+	cropperImg.value = base64;
+	emit('cropper', { base64, blob, info });
+}
+
+function hidePopover() {
+	popoverRef.value.hide();
+}
+
+defineExpose({ hidePopover });
+</script>
+
+<template>
+	<div v-loading="!showPopover" element-loading-background="transparent">
+		<el-popover ref="popoverRef" :visible="showPopover" placement="right" width="18vw">
+			<template #reference>
+				<div class="w-[18vw]">
+					<ReCropper ref="refCropper" :src="imgSrc" circled @cropper="onCropper" @readied="showPopover = true" />
+					<p v-show="showPopover" class="mt-1 text-center">温馨提示：右键上方裁剪区可开启功能菜单</p>
+				</div>
+			</template>
+			<div class="flex flex-wrap justify-center items-center text-center">
+				<el-image v-if="cropperImg" :preview-src-list="Array.of(cropperImg)" :src="cropperImg" fit="cover" />
+				<div v-if="infos" class="mt-1">
+					<p>图像大小：{{ parseInt(infos.width) }} × {{ parseInt(infos.height) }}像素</p>
+					<p>文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）</p>
+				</div>
+			</div>
+		</el-popover>
+	</div>
+</template>
--- a/src/components/ReCropper/index.ts
+++ b/src/components/ReCropper/index.ts
@ -0,0 +1,7 @@
+import reCropper from './src';
+import { withInstall } from '@pureadmin/utils';
+
+/** 图片裁剪组件 */
+export const ReCropper = withInstall(reCropper);
+
+export default ReCropper;
--- a/src/components/ReCropper/src/circled.css
+++ b/src/components/ReCropper/src/circled.css
@ -0,0 +1,8 @@
+@import 'cropperjs/dist/cropper.css';
+
+.re-circled {
+	.cropper-view-box,
+	.cropper-face {
+		border-radius: 50%;
+	}
+}
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@ -0,0 +1,386 @@
+import './circled.css';
+import Cropper from 'cropperjs';
+import { ElUpload } from 'element-plus';
+import type { CSSProperties } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { longpress } from '@/directives/longpress';
+import { useTippy, directive as tippy } from 'vue-tippy';
+import { type PropType, ref, unref, computed, onMounted, onUnmounted, defineComponent } from 'vue';
+import { delay, debounce, isArray, downloadByBase64, useResizeObserver } from '@pureadmin/utils';
+import { Reload, Upload, ArrowH, ArrowV, ArrowUp, ArrowDown, ArrowLeft, ChangeIcon, ArrowRight, RotateLeft, SearchPlus, RotateRight, SearchMinus, DownloadIcon } from './svg';
+
+type Options = Cropper.Options;
+
+const defaultOptions: Options = {
+	aspectRatio: 1,
+	zoomable: true,
+	zoomOnTouch: true,
+	zoomOnWheel: true,
+	cropBoxMovable: true,
+	cropBoxResizable: true,
+	toggleDragModeOnDblclick: true,
+	autoCrop: true,
+	background: true,
+	highlight: true,
+	center: true,
+	responsive: true,
+	restore: true,
+	checkCrossOrigin: true,
+	checkOrientation: true,
+	scalable: true,
+	modal: true,
+	guides: true,
+	movable: true,
+	rotatable: true,
+};
+
+const props = {
+	src: { type: String, required: true },
+	alt: { type: String },
+	circled: { type: Boolean, default: false },
+	/** 是否可以通过点击裁剪区域关闭右键弹出的功能菜单，默认 `true` */
+	isClose: { type: Boolean, default: true },
+	realTimePreview: { type: Boolean, default: true },
+	height: { type: [String, Number], default: '360px' },
+	crossorigin: {
+		type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+		default: undefined,
+	},
+	imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
+	options: { type: Object as PropType<Options>, default: () => ({}) },
+};
+
+export default defineComponent({
+	name: 'ReCropper',
+	props,
+	setup(props, { attrs, emit }) {
+		const tippyElRef = ref<ElRef<HTMLImageElement>>();
+		const imgElRef = ref<ElRef<HTMLImageElement>>();
+		const cropper = ref<Nullable<Cropper>>();
+		const inCircled = ref(props.circled);
+		const isInClose = ref(props.isClose);
+		const inSrc = ref(props.src);
+		const isReady = ref(false);
+		const imgBase64 = ref();
+
+		let scaleX = 1;
+		let scaleY = 1;
+
+		const debounceRealTimeCroppered = debounce(realTimeCroppered, 80);
+
+		const getImageStyle = computed((): CSSProperties => {
+			return {
+				height: props.height,
+				maxWidth: '100%',
+				...props.imageStyle,
+			};
+		});
+
+		const getClass = computed(() => {
+			return [
+				attrs.class,
+				{
+					['re-circled']: inCircled.value,
+				},
+			];
+		});
+
+		const iconClass = computed(() => {
+			return ['p-[6px]', 'h-[30px]', 'w-[30px]', 'outline-none', 'rounded-[4px]', 'cursor-pointer', 'hover:bg-[rgba(0,0,0,0.06)]'];
+		});
+
+		const getWrapperStyle = computed((): CSSProperties => {
+			return { height: `${props.height}`.replace(/px/, '') + 'px' };
+		});
+
+		onMounted(init);
+
+		onUnmounted(() => {
+			cropper.value?.destroy();
+			isReady.value = false;
+			cropper.value = null;
+			imgBase64.value = '';
+			scaleX = 1;
+			scaleY = 1;
+		});
+
+		useResizeObserver(tippyElRef, () => handCropper('reset'));
+
+		async function init() {
+			const imgEl = unref(imgElRef);
+			if (!imgEl) return;
+			cropper.value = new Cropper(imgEl, {
+				...defaultOptions,
+				ready: () => {
+					isReady.value = true;
+					realTimeCroppered();
+					delay(400).then(() => emit('readied', cropper.value));
+				},
+				crop() {
+					debounceRealTimeCroppered();
+				},
+				zoom() {
+					debounceRealTimeCroppered();
+				},
+				cropmove() {
+					debounceRealTimeCroppered();
+				},
+				...props.options,
+			});
+		}
+
+		function realTimeCroppered() {
+			props.realTimePreview && croppered();
+		}
+
+		function croppered() {
+			if (!cropper.value) return;
+			const canvas = inCircled.value ? getRoundedCanvas() : cropper.value.getCroppedCanvas();
+			// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
+			canvas.toBlob(blob => {
+				if (!blob) return;
+				const fileReader: FileReader = new FileReader();
+				fileReader.readAsDataURL(blob);
+				fileReader.onloadend = e => {
+					if (!e.target?.result || !blob) return;
+					imgBase64.value = e.target.result;
+					emit('cropper', {
+						base64: e.target.result,
+						blob,
+						info: { size: blob.size, ...cropper.value.getData() },
+					});
+				};
+				fileReader.onerror = () => {
+					emit('error');
+				};
+			});
+		}
+
+		function getRoundedCanvas() {
+			const sourceCanvas = cropper.value!.getCroppedCanvas();
+			const canvas = document.createElement('canvas');
+			const context = canvas.getContext('2d')!;
+			const width = sourceCanvas.width;
+			const height = sourceCanvas.height;
+			canvas.width = width;
+			canvas.height = height;
+			context.imageSmoothingEnabled = true;
+			context.drawImage(sourceCanvas, 0, 0, width, height);
+			context.globalCompositeOperation = 'destination-in';
+			context.beginPath();
+			context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+			context.fill();
+			return canvas;
+		}
+
+		function handCropper(event: string, arg?: number | Array<number>) {
+			if (event === 'scaleX') {
+				scaleX = arg = scaleX === -1 ? 1 : -1;
+			}
+
+			if (event === 'scaleY') {
+				scaleY = arg = scaleY === -1 ? 1 : -1;
+			}
+			arg && isArray(arg) ? cropper.value?.[event]?.(...arg) : cropper.value?.[event]?.(arg);
+		}
+
+		function beforeUpload(file) {
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			inSrc.value = '';
+			reader.onload = e => {
+				inSrc.value = e.target?.result as string;
+			};
+			reader.onloadend = () => {
+				init();
+			};
+			return false;
+		}
+
+		const menuContent = defineComponent({
+			directives: {
+				tippy,
+				longpress,
+			},
+			setup() {
+				return () => (
+					<div class='flex flex-wrap w-[60px] justify-between'>
+						<ElUpload accept='image/*' show-file-list={false} before-upload={beforeUpload}>
+							<Upload
+								class={iconClass.value}
+								v-tippy={{
+									content: '上传',
+									placement: 'left-start',
+								}}
+							/>
+						</ElUpload>
+						<DownloadIcon
+							class={iconClass.value}
+							v-tippy={{
+								content: '下载',
+								placement: 'right-start',
+							}}
+							onClick={() => downloadByBase64(imgBase64.value, 'cropping.png')}
+						/>
+						<ChangeIcon
+							class={iconClass.value}
+							v-tippy={{
+								content: '圆形、矩形裁剪',
+								placement: 'left-start',
+							}}
+							onClick={() => {
+								inCircled.value = !inCircled.value;
+								realTimeCroppered();
+							}}
+						/>
+						<Reload
+							class={iconClass.value}
+							v-tippy={{
+								content: '重置',
+								placement: 'right-start',
+							}}
+							onClick={() => handCropper('reset')}
+						/>
+						<ArrowUp
+							class={iconClass.value}
+							v-tippy={{
+								content: '上移（可长按）',
+								placement: 'left-start',
+							}}
+							v-longpress={[() => handCropper('move', [0, -10]), '0:100']}
+						/>
+						<ArrowDown
+							class={iconClass.value}
+							v-tippy={{
+								content: '下移（可长按）',
+								placement: 'right-start',
+							}}
+							v-longpress={[() => handCropper('move', [0, 10]), '0:100']}
+						/>
+						<ArrowLeft
+							class={iconClass.value}
+							v-tippy={{
+								content: '左移（可长按）',
+								placement: 'left-start',
+							}}
+							v-longpress={[() => handCropper('move', [-10, 0]), '0:100']}
+						/>
+						<ArrowRight
+							class={iconClass.value}
+							v-tippy={{
+								content: '右移（可长按）',
+								placement: 'right-start',
+							}}
+							v-longpress={[() => handCropper('move', [10, 0]), '0:100']}
+						/>
+						<ArrowH
+							class={iconClass.value}
+							v-tippy={{
+								content: '水平翻转',
+								placement: 'left-start',
+							}}
+							onClick={() => handCropper('scaleX', -1)}
+						/>
+						<ArrowV
+							class={iconClass.value}
+							v-tippy={{
+								content: '垂直翻转',
+								placement: 'right-start',
+							}}
+							onClick={() => handCropper('scaleY', -1)}
+						/>
+						<RotateLeft
+							class={iconClass.value}
+							v-tippy={{
+								content: '逆时针旋转',
+								placement: 'left-start',
+							}}
+							onClick={() => handCropper('rotate', -45)}
+						/>
+						<RotateRight
+							class={iconClass.value}
+							v-tippy={{
+								content: '顺时针旋转',
+								placement: 'right-start',
+							}}
+							onClick={() => handCropper('rotate', 45)}
+						/>
+						<SearchPlus
+							class={iconClass.value}
+							v-tippy={{
+								content: '放大（可长按）',
+								placement: 'left-start',
+							}}
+							v-longpress={[() => handCropper('zoom', 0.1), '0:100']}
+						/>
+						<SearchMinus
+							class={iconClass.value}
+							v-tippy={{
+								content: '缩小（可长按）',
+								placement: 'right-start',
+							}}
+							v-longpress={[() => handCropper('zoom', -0.1), '0:100']}
+						/>
+					</div>
+				);
+			},
+		});
+
+		function onContextmenu(event) {
+			event.preventDefault();
+
+			const { show, setProps, destroy, state } = useTippy(tippyElRef, {
+				content: menuContent,
+				arrow: false,
+				theme: 'light',
+				trigger: 'manual',
+				interactive: true,
+				appendTo: 'parent',
+				// hideOnClick: false,
+				placement: 'bottom-end',
+			});
+
+			setProps({
+				getReferenceClientRect: () => ({
+					width: 0,
+					height: 0,
+					top: event.clientY,
+					bottom: event.clientY,
+					left: event.clientX,
+					right: event.clientX,
+				}),
+			});
+
+			show();
+
+			if (isInClose.value) {
+				if (!state.value.isShown && !state.value.isVisible) return;
+				useEventListener(tippyElRef, 'click', destroy);
+			}
+		}
+
+		return {
+			inSrc,
+			props,
+			imgElRef,
+			tippyElRef,
+			getClass,
+			getWrapperStyle,
+			getImageStyle,
+			isReady,
+			croppered,
+			onContextmenu,
+		};
+	},
+
+	render() {
+		const { inSrc, isReady, getClass, getImageStyle, onContextmenu, getWrapperStyle } = this;
+		const { alt, crossorigin } = this.props;
+
+		return inSrc ? (
+			<div ref='tippyElRef' class={getClass} style={getWrapperStyle} onContextmenu={event => onContextmenu(event)}>
+				<img v-show={isReady} ref='imgElRef' style={getImageStyle} src={inSrc} alt={alt} crossorigin={crossorigin} />
+			</div>
+		) : null;
+	},
+});
--- a/src/components/ReCropper/src/svg/arrow-down.svg
+++ b/src/components/ReCropper/src/svg/arrow-down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-h.svg
+++ b/src/components/ReCropper/src/svg/arrow-h.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m296.992 216.992-272 272L3.008 512l21.984 23.008 272 272 46.016-46.016L126.016 544h772L680.992 760.992l46.016 46.016 272-272L1020.992 512l-21.984-23.008-272-272-46.048 46.048L898.016 480h-772l216.96-216.992z"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-left.svg
+++ b/src/components/ReCropper/src/svg/arrow-left.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-right.svg
+++ b/src/components/ReCropper/src/svg/arrow-right.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M869 487.8 491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-up.svg
+++ b/src/components/ReCropper/src/svg/arrow-up.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M868 545.5 536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2"/></svg>
--- a/src/components/ReCropper/src/svg/arrow-v.svg
+++ b/src/components/ReCropper/src/svg/arrow-v.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m512 67.008-23.008 21.984-256 256 46.048 46.048L480 190.016v644L279.008 632.96l-46.048 46.08 256 256 23.008 21.984 23.008-21.984 256-256-46.016-46.016L544 834.016v-644l200.992 200.96 46.016-45.984-256-256z"/></svg>
--- a/src/components/ReCropper/src/svg/change.svg
+++ b/src/components/ReCropper/src/svg/change.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8M608 937.6h326.4V598.4H608zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4m790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4M288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8m-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8"/></svg>
--- a/src/components/ReCropper/src/svg/download.svg
+++ b/src/components/ReCropper/src/svg/download.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
--- a/src/components/ReCropper/src/svg/index.ts
+++ b/src/components/ReCropper/src/svg/index.ts
@ -0,0 +1,16 @@
+import Reload from './reload.svg?component';
+import Upload from './upload.svg?component';
+import ArrowH from './arrow-h.svg?component';
+import ArrowV from './arrow-v.svg?component';
+import ArrowUp from './arrow-up.svg?component';
+import ChangeIcon from './change.svg?component';
+import ArrowDown from './arrow-down.svg?component';
+import ArrowLeft from './arrow-left.svg?component';
+import DownloadIcon from './download.svg?component';
+import ArrowRight from './arrow-right.svg?component';
+import RotateLeft from './rotate-left.svg?component';
+import SearchPlus from './search-plus.svg?component';
+import RotateRight from './rotate-right.svg?component';
+import SearchMinus from './search-minus.svg?component';
+
+export { Reload, Upload, ArrowH, ArrowV, ArrowUp, ArrowDown, ArrowLeft, ChangeIcon, ArrowRight, RotateLeft, SearchPlus, RotateRight, SearchMinus, DownloadIcon };
--- a/src/components/ReCropper/src/svg/reload.svg
+++ b/src/components/ReCropper/src/svg/reload.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 0 1 755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8m756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 0 1 512.1 856a342.24 342.24 0 0 1-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 0 0-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 0 0-8-8.2"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-left.svg
+++ b/src/components/ReCropper/src/svg/rotate-left.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"/><path fill="currentColor" d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"/></svg>
--- a/src/components/ReCropper/src/svg/rotate-right.svg
+++ b/src/components/ReCropper/src/svg/rotate-right.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8"/><path fill="currentColor" d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H396V494h440z"/></svg>
--- a/src/components/ReCropper/src/svg/search-minus.svg
+++ b/src/components/ReCropper/src/svg/search-minus.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
--- a/src/components/ReCropper/src/svg/search-plus.svg
+++ b/src/components/ReCropper/src/svg/search-plus.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8m284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11M696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430"/></svg>
--- a/src/components/ReCropper/src/svg/upload.svg
+++ b/src/components/ReCropper/src/svg/upload.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13M878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8"/></svg>
--- a/src/components/ReCropperPreview/src/index.vue
+++ b/src/components/ReCropperPreview/src/index.vue
@ -1,76 +0,0 @@
-<script setup lang="tsx">
-import { ref } from "vue";
-import ReCropper from "@/components/ReCropper";
-import { formatBytes } from "@pureadmin/utils";
-
-defineOptions({
-  name: "ReCropperPreview"
-});
-
-defineProps({
-  imgSrc: String
-});
-
-const emit = defineEmits(["cropper"]);
-
-const infos = ref();
-const popoverRef = ref();
-const refCropper = ref();
-const showPopover = ref(false);
-const cropperImg = ref<string>("");
-
-function onCropper({ base64, blob, info }) {
-  infos.value = info;
-  cropperImg.value = base64;
-  emit("cropper", { base64, blob, info });
-}
-
-function hidePopover() {
-  popoverRef.value.hide();
-}
-
-defineExpose({ hidePopover });
-</script>
-
-<template>
-  <div v-loading="!showPopover" element-loading-background="transparent">
-    <el-popover
-      ref="popoverRef"
-      :visible="showPopover"
-      placement="right"
-      width="18vw"
-    >
-      <template #reference>
-        <div class="w-[18vw]">
-          <ReCropper
-            ref="refCropper"
-            :src="imgSrc"
-            circled
-            @cropper="onCropper"
-            @readied="showPopover = true"
-          />
-          <p v-show="showPopover" class="mt-1 text-center">
-            温馨提示：右键上方裁剪区可开启功能菜单
-          </p>
-        </div>
-      </template>
-      <div class="flex flex-wrap justify-center items-center text-center">
-        <el-image
-          v-if="cropperImg"
-          :src="cropperImg"
-          :preview-src-list="Array.of(cropperImg)"
-          fit="cover"
-        />
-        <div v-if="infos" class="mt-1">
-          <p>
-            图像大小：{{ parseInt(infos.width) }} ×
-            {{ parseInt(infos.height) }}像素
-          </p>
-          <p>
-            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
-          </p>
-        </div>
-      </div>
-    </el-popover>
-  </div>
-</template>
--- a/src/components/Table/ResetPasswords.vue
+++ b/src/components/Table/ResetPasswords.vue
@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import { $t } from '@/plugins/i18n';
+import { zxcvbn } from '@zxcvbn-ts/core';
+import { isAllEmpty } from '@pureadmin/utils';
+
+const props = defineProps({
+	form: {
+		type: Object as PropType<any>,
+	},
+});
+
+const rules = {
+	password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+};
+const pwdProgress = [
+	{ color: '#e74242', text: '非常弱' },
+	{ color: '#EFBD47', text: '弱' },
+	{ color: '#ffa500', text: '一般' },
+	{ color: '#1bbf1b', text: '强' },
+	{ color: '#008000', text: '非常强' },
+];
+
+const ruleFormRef = ref();
+// 当前密码强度（0-4）
+const curScore = ref(-1);
+
+/**
+ * * 监听密码强度
+ */
+onMounted(() => {
+	watch(
+		() => props.form,
+		({ password }) => {
+			curScore.value = isAllEmpty(password) ? -1 : zxcvbn(password).score;
+		},
+		{ deep: true },
+	);
+});
+defineExpose({ ruleFormRef });
+</script>
+
+<template>
+	<div>
+		<el-form ref="ruleFormRef" :model="form" :rules="rules">
+			<el-form-item :label="$t('adminUser_password')" prop="password">
+				<el-input v-model="form.password!" :placeholder="$t('adminUser_password')" clearable show-password type="password" />
+			</el-form-item>
+		</el-form>
+
+		<div class="mt-4 flex">
+			<div v-for="(item, index) in pwdProgress" :key="index" class="w-[19vw]">
+				<div :style="{ marginLeft: index !== 0 ? '4px' : 0 }">
+					<el-progress :color="item.color" :duration="curScore === index ? 6 : 0" :percentage="curScore >= index ? 100 : 0" :show-text="false" :stroke-width="10" striped striped-flow />
+					<p :style="{ color: curScore === index ? item.color : '' }" class="text-center">{{ item.text }}</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
--- a/src/components/Upload/UploadDialogImage.vue
+++ b/src/components/Upload/UploadDialogImage.vue
@ -0,0 +1,100 @@
+<template>
+	<el-upload :auto-upload="true" :before-upload="beforeUpload" :http-request="onUpload" :show-file-list="false" accept="image/*" drag>
+		<el-image v-if="imageSrc" :src="imageSrc" fit="cover" lazy>
+			<template #placeholder>
+				<img alt="" src="@/assets/images/tip/loading.gif" />
+			</template>
+		</el-image>
+		<el-icon v-else size="36">
+			<Plus />
+		</el-icon>
+	</el-upload>
+	<el-button v-show="imageSrc" link type="primary" @click="onRemoveImage"> 删除图片</el-button>
+</template>
+
+<script lang="ts" setup>
+import { Plus } from '@element-plus/icons-vue';
+import { ElMessage, UploadRawFile, UploadRequestOptions } from 'element-plus';
+import { onMounted, ref } from 'vue';
+import { SystemEnum } from '@/enum/upload';
+import { fetchUploadFIle } from '@/api/v1/system';
+
+const props = defineProps({
+	imageUrl: String,
+	type: String,
+});
+const emits = defineEmits(['uploadCallback']);
+
+const imageSrc = ref('');
+
+/**
+ * * 上传时
+ * @param options
+ */
+const onUpload = async (options: UploadRequestOptions) => {
+	// 整理参数
+	const file = options.file;
+	const type = props.type;
+	const data = { file, type };
+
+	// 上传文件并返回文件地址
+	const result: any = await fetchUploadFIle(data);
+	imageSrc.value = result.data.url;
+	emits('uploadCallback', result);
+};
+
+/**
+ * * 删除图片
+ */
+const onRemoveImage = () => {
+	// 清除图片地址和文件信息
+	imageSrc.value = '';
+
+	// 重新赋值
+	const data: any = {
+		url: '',
+		filename: '',
+		filepath: '',
+		fileSize: 0,
+		size: '',
+		fileType: '',
+	};
+	emits('uploadCallback', data);
+};
+
+/**
+ * * 上传之前
+ */
+const beforeUpload = (file: UploadRawFile) => {
+	if (file.size > SystemEnum.IMAGE_SIZE) {
+		ElMessage.error(SystemEnum.IMAGE_MESSAGE);
+		return false;
+	}
+};
+
+/**
+ * * 初始化图片地址
+ */
+const handleInitiateImageSrc = () => {
+	const value = props.imageUrl;
+	if (value) imageSrc.value = value;
+};
+
+onMounted(() => {
+	handleInitiateImageSrc();
+});
+</script>
+
+<style>
+.el-upload {
+	width: 128px;
+	height: 128px;
+}
+
+.el-upload-dragger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+</style>
--- a/src/enum/baseConstant.ts
+++ b/src/enum/baseConstant.ts
@ -0,0 +1,30 @@
+import type { Option } from '@/types/enum/options';
+
+/**
+ * * 是否默认
+ */
+export const isDefaultOptions: Option[] = [
+	{ value: true, label: '是' },
+	{ value: false, label: '否' },
+];
+
+/**
+ * * 是否显示
+ */
+export const isDefaultVisibleOptions: Option[] = [
+	{ value: true, label: '显示' },
+	{ value: false, label: '不显示' },
+];
+
+/**
+ * * 性别
+ */
+export const sexConstant: Option[] = [
+	{ value: 1, label: '男' },
+	{ value: 0, label: '女' },
+];
+
+/**
+ * * 分页默认数组个数
+ */
+export const pageSizes: number[] = [15, 30, 50, 100, 150, 200, 300];
--- a/src/enum/statusConstant.ts
+++ b/src/enum/statusConstant.ts
@ -0,0 +1,29 @@
+// ? 表单选项
+import type { Option } from '../../types/enum/options';
+
+/**
+ * * 默认状态
+ */
+export const defaultStatus: Option[] = [
+	{ value: '', label: '' },
+	{ value: 1, label: '启用' },
+	{ value: 0, label: '禁用' },
+];
+
+/**
+ * * 是否错误
+ */
+export const isErrorStatus: Option[] = [
+	{ value: '', label: '' },
+	{ value: false, label: '未出错' },
+	{ value: true, label: '错误' },
+];
+
+/**
+ * * 默认状态
+ */
+export const statusConstant: Option[] = [
+	{ value: '', label: '' },
+	{ value: 1, label: '是' },
+	{ value: 0, label: '否' },
+];
--- a/src/enum/upload.ts
+++ b/src/enum/upload.ts
@ -0,0 +1,22 @@
+// 系统枚举变量
+export enum SystemEnum {
+	IMAGE_SIZE = 5 * 1024 * 1024,
+	FILE_SIZE = 10 * 1024 * 1024,
+	IMAGE_MESSAGE = '文件不能大于5M',
+	FILE_MESSAGE = '文件不能大于10M',
+	// Base64
+	Base64 = 'data:text/plain;base64,',
+}
+
+/**
+ *
+ */
+export enum UploadFileEnum {
+	Favicon = 'favicon',
+	Avatar = 'avatar',
+	Article = 'article',
+	Carousel = 'carousel',
+	Feedback = 'feedback',
+	ArticleCovers = 'articleCovers',
+	ArticleAttachment = 'articleAttachment',
+}
--- a/src/enum/views/faviconConstant.ts
+++ b/src/enum/views/faviconConstant.ts
@ -0,0 +1,10 @@
+import type { Option } from '@/types/enum/options';
+
+/**
+ * 图标选项
+ */
+export const faviconCategory: Option[] = [
+	{ value: '', label: '' },
+	{ value: 'web', label: 'web 前台' },
+	{ value: 'admin', label: 'admin 后台' },
+];
--- a/src/enum/views/feedbackConstant.ts
+++ b/src/enum/views/feedbackConstant.ts
@ -0,0 +1,21 @@
+import type { Option } from '@/types/enum/options';
+
+/**
+ * * 用户反馈
+ */
+export const feedback: Option[] = [
+	{ value: '', label: '' },
+	{ value: 1, label: '已处理' },
+	{ value: 0, label: '未处理' },
+	{ value: -1, label: '其它问题' },
+];
+
+/**
+ * * 反馈类型选择
+ */
+export const feedbackTypeOptions: Option[] = [
+	{ label: '优化建议', value: '优化建议' },
+	{ label: 'bug反馈', value: 'bug反馈' },
+	{ label: '新增功能建议', value: '新增功能建议' },
+	{ label: '其它', value: '其它' },
+];
--- a/src/enum/views/userConstant.ts
+++ b/src/enum/views/userConstant.ts
@ -0,0 +1,25 @@
+import type { Option } from '@/types/enum/options';
+
+/**
+ * * 布局方式
+ */
+export const layoutConstant: Option[] = [
+	{ value: 'ltr', label: '从左到右' },
+	{ value: 'rtl', label: '从右到左' },
+];
+
+/**
+ * * 文章显示模式
+ */
+export const articleModeConstant: Option[] = [
+	{ value: 'album', label: '相册模式' },
+	{ value: 'list', label: '列表模式' },
+];
+
+/**
+ * * 默认状态
+ */
+export const userStatus: Option[] = [
+	{ value: 0, label: '启用' },
+	{ value: 1, label: '禁用' },
+];
--- a/src/store/system/adminUser.ts
+++ b/src/store/system/adminUser.ts
@ -3,6 +3,7 @@ import { fetchAddAdminUser, fetchDeleteAdminUser, fetchGetAdminUserList, fetchUp
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
+import { fetchUpdateUserPasswordByAdmin } from '@/api/v1/user';

 /**
 * 用户信息 Store
@ -83,5 +84,14 @@ export const useAdminUserStore = defineStore('adminUserStore', {
 			const result = await fetchDeleteAdminUser(data);
 			return storeMessage(result);
 		},
+
+		/**
+		 * * 更新用户密码
+		 * @param data
+		 */
+		async updateAdminUserPasswordByManager(data: any) {
+			const result: any = await fetchUpdateUserPasswordByAdmin(data);
+			return storeMessage(result);
+		},
 	},
 });
--- a/src/store/system/dept.ts
+++ b/src/store/system/dept.ts
@ -14,10 +14,6 @@ export const useDeptStore = defineStore('deptStore', {
 			datalist: [],
 			// 查询表单
 			form: {
-				// 父级id
-				parentId: undefined,
-				// 管理者id
-				managerId: undefined,
 				// 部门名称
 				deptName: undefined,
 				// 部门简介
--- a/src/store/system/role.ts
+++ b/src/store/system/role.ts
@ -12,6 +12,8 @@ export const useRoleStore = defineStore('roleStore', {
 		return {
 			// 角色列表
 			datalist: [],
+			// 所有角色列表
+			allRoleList: [],
 			// 查询表单
 			form: {
 				// 角色代码
@ -73,5 +75,21 @@ export const useRoleStore = defineStore('roleStore', {
 			const result = await fetchDeleteRole(data);
 			return storeMessage(result);
 		},
+
+		/**
+		 * * 根据用户id获取角色列表
+		 * @param data
+		 */
+		async getRoleListByUserId(data: any) {
+			console.log(data);
+		},
+
+		/**
+		 * * 为用户分配角色
+		 * @param data
+		 */
+		async assignRolesToUsers(data: any) {
+			console.log(data);
+		},
 	},
 });
--- a/src/utils/message.ts
+++ b/src/utils/message.ts
@ -123,11 +123,11 @@ export const messageBox = async (option: MessageBox = defaultBoxOption, type: an
 		overflow: true,
 	})
 		.then(() => {
-			option.showMessage && ElMessage({ type: 'success', message: option.confirmMessage });
+			option.showMessage && message(option.cancelMessage, { type: 'success' });
 			return true;
 		})
 		.catch(() => {
-			ElMessage({ type: 'warning', message: option.cancelMessage });
+			message(option.cancelMessage, { type: 'warning' });
 			return false;
 		});
 };
--- a/src/views/system/adminUser/admin-user-dialog.vue
+++ b/src/views/system/adminUser/admin-user-dialog.vue
@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/system/adminUser/utils/columns';
+import { isAddUserinfo, rules } from '@/views/system/adminUser/utils/columns';
 import { FormProps } from '@/views/system/adminUser/utils/types';
 import { $t } from '@/plugins/i18n';
+import ReCol from '@/components/MyCol';
+import { sexConstant } from '@/enums/baseConstant';
+import UploadDialogImage from '@/components/Upload/UploadDialogImage.vue';

 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@ -31,37 +34,87 @@ const props = withDefaults(defineProps<FormProps>(), {
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);

+/**
+ * * 上传头像回调
+ * @param data
+ */
+const onUploadCallback = ({ data }) => {
+	console.log('value=>', data);
+	form.value.avatar = data.filepath;
+};
+
 defineExpose({ formRef });
 </script>

 <template>
-	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
-		<el-form-item :label="$t('adminUser_username')" prop="username">
-			<el-input v-model="form.username" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_nickName')" prop="nickName">
-			<el-input v-model="form.nickName" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_email')" prop="email">
-			<el-input v-model="form.email" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_phone')" prop="phone">
-			<el-input v-model="form.phone" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_password')" prop="password">
-			<el-input v-model="form.password" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_avatar')" prop="avatar">
-			<el-input v-model="form.avatar" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_sex')" prop="sex">
-			<el-input v-model="form.sex" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_summary')" prop="summary">
-			<el-input v-model="form.summary" autocomplete="off" type="text" />
-		</el-form-item>
-		<el-form-item :label="$t('adminUser_status')" prop="status">
-			<el-input v-model="form.status" autocomplete="off" type="text" />
-		</el-form-item>
+	<el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="auto">
+		<el-row :gutter="30">
+			<!-- 用户名 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_username')" prop="username">
+					<el-input v-model="form.username" :placeholder="$t('adminUser_username')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 昵称 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_nickName')" prop="nickName">
+					<el-input v-model="form.nickName" :placeholder="$t('adminUser_nickName')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 邮箱 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_email')" prop="email">
+					<el-input v-model="form.email" :placeholder="$t('adminUser_email')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 密码 -->
+			<re-col v-show="isAddUserinfo" :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_password')" prop="password">
+					<el-input v-model="form.password" :placeholder="$t('adminUser_password')" autocomplete="off" show-password type="password" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 手机号 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_phone')" prop="phone">
+					<el-input v-model="form.phone" :placeholder="$t('adminUser_phone')" autocomplete="off" type="text" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 性别 -->
+			<re-col :sm="24" :value="isAddUserinfo ? 12 : 24" :xs="24">
+				<el-form-item :label="$t('adminUser_sex')" prop="sex">
+					<el-select v-model="form.sex" :placeholder="$t('adminUser_sex')" clearable filterable>
+						<el-option v-for="(item, index) in sexConstant" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
+					</el-select>
+				</el-form-item>
+			</re-col>
+
+			<!-- 头像 -->
+			<re-col :sm="24" :value="24" :xs="24">
+				<el-form-item :label="$t('adminUser_avatar')" prop="avatar">
+					<UploadDialogImage :image-url="form.avatar" type="avatar" @uploadCallback="onUploadCallback" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 用户简介 -->
+			<re-col :sm="24" :value="24" :xs="24">
+				<el-form-item :label="$t('adminUser_summary')" prop="summary">
+					<el-input v-model="form.summary" :placeholder="$t('adminUser_summary')" autocomplete="off" maxlength="600" show-word-limit type="textarea" />
+				</el-form-item>
+			</re-col>
+
+			<!-- 用户状态 -->
+			<re-col :sm="24" :value="12" :xs="24">
+				<el-form-item :label="$t('adminUser_status')" prop="status">
+					<el-switch v-model="form.status" active-text="禁用" class="ml-2" inactive-text="正常" inline-prompt style="
+
+--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
+				</el-form-item>
+			</re-col>
+		</el-row>
 	</el-form>
 </template>
--- a/src/views/system/adminUser/assign-user-to-role.vue
+++ b/src/views/system/adminUser/assign-user-to-role.vue
@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useRoleStore } from '@/store/system/role';
+
+const props = defineProps({
+	userId: { type: String as PropType<String> },
+});
+
+const roleStore = useRoleStore();
+// 分配的角色
+const assignRoles = ref([]);
+
+/**
+ * * 根据用户id获取当前用户角色
+ */
+const getRoleListByUserId = async () => {
+	// 初始化值为空数组
+	assignRoles.value = [];
+
+	// 根据用户id查询角色信息
+	const userId = props.userId;
+	assignRoles.value = await roleStore.getRoleListByUserId({ userId });
+};
+
+onMounted(() => {
+	roleStore.getRoleList();
+	getRoleListByUserId();
+});
+
+defineExpose({ assignRoles });
+</script>
+
+<template>
+	<div class="flex justify-center">
+		<el-transfer
+			v-model="assignRoles"
+			:button-texts="['收回', '添加']"
+			:data="roleStore.allRoleList"
+			:format="{ noChecked: '总数 ${total}', hasChecked: '${checked}/${total}' }"
+			:titles="['未添加', '已添加']"
+			class="m-3"
+			filter-placeholder="搜索角色"
+			filterable
+		/>
+	</div>
+</template>
--- a/src/views/system/adminUser/index.vue
+++ b/src/views/system/adminUser/index.vue
@ -1,47 +1,120 @@
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+<script lang="tsx" setup>
+import { computed, onMounted, reactive, ref } from 'vue';
 import { columns } from '@/views/system/adminUser/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/adminUser/utils/hooks';
+import { onAdd, onDelete, onSearch, onUpdate, updateUserStatus } from '@/views/system/adminUser/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
 import { useAdminUserStore } from '@/store/system/adminUser.ts';
+import ResetPasswordDialog from '@/components/Table/ResetPasswords.vue';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import userAvatar from '@/assets/user.jpg';
 import Upload from '@iconify-icons/ri/upload-line';
 import Role from '@iconify-icons/ri/admin-line';
 import Password from '@iconify-icons/ri/lock-password-line';
 import More from '@iconify-icons/ep/more-filled';
+import { addDialog } from '@/components/BaseDialog/index';
+import { deviceDetection } from '@pureadmin/utils';
+import CropperPreview from '@/components/CropperPreview';
+import AssignUserToRole from '@/views/system/adminUser/assign-user-to-role.vue';
+import { useRoleStore } from '@/store/system/role';

 const tableRef = ref();
 const formRef = ref();
+const cropRef = ref();
+const assignRolesRef = ref();
+const roleStore = useRoleStore();
+// 上传头像信息
+const avatarInfo = ref();
 const adminUserStore = useAdminUserStore();
+// 重置密码表单校验Ref
+const ruleFormByRestPasswordRef = ref();
+// 重置密码表单
+const restPasswordForm = reactive({
+	userId: void 0,
+	password: '',
+});

-const handleUpdate = row => {
-	console.log(row);
+/** 上传头像 */
+const onUploadAvatar = (row: any) => {
+	addDialog({
+		title: '裁剪、上传头像',
+		width: '40%',
+		closeOnClickModal: false,
+		fullscreen: deviceDetection(),
+		contentRenderer: () =>
+			h(CropperPreview, {
+				ref: cropRef,
+				imgSrc: row.avatar || userAvatar,
+				onCropper: info => (avatarInfo.value = info),
+			}),
+		beforeSure: async done => {
+			console.log('裁剪后的图片信息：', avatarInfo.value);
+			// 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
+			done();
+			await onSearch();
+		},
+		closeCallBack: () => cropRef.value.hidePopover(),
+	});
 };

-/**
- * * 上传头像
- */
-const onUploadAvatar = (row: any) => {};
-
 /**
 * * 重置密码
 * @param row
 */
-const onResetPassword = (row: any) => {};
+const onResetPassword = (row: any) => {
+	addDialog({
+		title: `重置 ${row.username} 用户的密码`,
+		width: '30%',
+		draggable: true,
+		closeOnClickModal: false,
+		fullscreenIcon: true,
+		destroyOnClose: true,
+		contentRenderer: () => <ResetPasswordDialog ref={ruleFormByRestPasswordRef} form={restPasswordForm} />,
+		beforeSure: (done: any) => {
+			ruleFormByRestPasswordRef.value.ruleFormRef.validate(async (valid: any) => {
+				if (valid) {
+					// 更新用户密码
+					const data = { userId: row.id, password: restPasswordForm.password };
+					const result = await adminUserStore.updateAdminUserPasswordByManager(data);
+
+					// 更新成功关闭弹窗
+					if (!result) return;
+					done();
+				}
+			});
+		},
+	});
+};

 /**
 * 为用户分配角色
 * @param row
 */
-const onAssignRolesToUser = (row: any) => {};
+const onAssignRolesToUser = (row: any) => {
+	addDialog({
+		title: `为 ${row.username} 分配角色`,
+		width: '30%',
+		draggable: true,
+		closeOnClickModal: false,
+		fullscreenIcon: true,
+		contentRenderer: () => <AssignUserToRole ref={assignRolesRef} userId={row.id} />,
+		beforeSure: async (done: any) => {
+			// 分配用户角色
+			const data = { userId: row.id, roleIds: assignRolesRef.value.assignRoles };
+			const result = await roleStore.assignRolesToUsers(data);
+
+			// 更新成功关闭弹窗
+			if (!result) return;
+			done();
+		},
+	});
+};

 /**
 * 重置表单
@ -115,24 +188,37 @@ onMounted(() => {
 					showOverflowTooltip
 					table-layout="auto"
 				>
+					<!-- 显示头像 -->
 					<template #avatar="{ row }">
 						<el-image :preview-src-list="Array.of(row.avatar || userAvatar)" :src="row.avatar || userAvatar" class="w-[24px] h-[24px] rounded-full align-middle" fit="cover" preview-teleported />
 					</template>

+					<!-- 显示用户状态 -->
 					<template #status="{ row }">
-						<el-switch v-model="row.status" active-text="禁用" class="ml-2" inactive-text="启用" inline-prompt style="
+						<el-switch
+							v-model="row.status"
+							active-text="禁用"
+							class="ml-2"
+							inactive-text="正常"
+							inline-prompt
+							style="

--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" />
+--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
+							@change="updateUserStatus(row)"
+						/>
 					</template>

+					<!-- 用户性别 -->
 					<template #sex="{ row }">
 						<el-tag :type="row.sex === 0 ? 'danger' : null" effect="plain"> {{ row.sex === 1 ? '男' : '女' }}</el-tag>
 					</template>

+					<!-- 创建用户 -->
 					<template #createUser="{ row }">
 						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
 					</template>

+					<!-- 更新用户 -->
 					<template #updateUser="{ row }">
 						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
 					</template>
@ -152,7 +238,7 @@ onMounted(() => {

 						<!-- 更多操作 -->
 						<el-dropdown>
-							<el-button :icon="useRenderIcon(More)" :size="size" class="ml-3 mt-[2px]" link type="primary" @click="handleUpdate(row)" />
+							<el-button :icon="useRenderIcon(More)" :size="size" class="ml-3 mt-[2px]" link type="primary" />
 							<template #dropdown>
 								<el-dropdown-menu>
 									<el-dropdown-item>
--- a/src/views/system/adminUser/utils/columns.tsx
+++ b/src/views/system/adminUser/utils/columns.tsx
@ -1,6 +1,9 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 import { $t } from '@/plugins/i18n';

+// 是否是更新用户信息
+export const isAddUserinfo = ref(false);
+
 // 表格列
 export const columns: TableColumnList = [
 	{ type: 'index', index: (index: number) => index + 1 },
@ -33,18 +36,19 @@ export const columns: TableColumnList = [
 export const rules = reactive({
 	// 用户名
 	username: [{ required: true, message: `${$t('input')}${$t('adminUser_username')}`, trigger: 'blur' }],
-	// 昵称
-	nickName: [{ required: true, message: `${$t('input')}${$t('adminUser_nickName')}`, trigger: 'blur' }],
-	// 邮箱
-	email: [{ required: true, message: `${$t('input')}${$t('adminUser_email')}`, trigger: 'blur' }],
-	// 手机号
-	phone: [{ required: true, message: `${$t('input')}${$t('adminUser_phone')}`, trigger: 'blur' }],
 	// 密码
-	password: [{ required: true, message: `${$t('input')}${$t('adminUser_password')}`, trigger: 'blur' }],
-	// 头像
-	avatar: [{ required: true, message: `${$t('input')}${$t('adminUser_avatar')}`, trigger: 'blur' }],
-	// 性别
-	sex: [{ required: true, message: `${$t('input')}${$t('adminUser_sex')}`, trigger: 'blur' }],
+	password: [
+		{
+			required: isAddUserinfo,
+			message: `${$t('input')}${$t('adminUser_password')}`,
+			trigger: 'blur',
+		},
+	],
+	// 邮箱
+	email: [
+		{ required: true, message: `${$t('input')}${$t('adminUser_email')}`, trigger: 'blur' },
+		{ type: 'email', message: `${$t('input')}${$t('adminUser_email')}${$t('format_error')}` },
+	],
 	// 个人描述
 	summary: [{ required: true, message: `${$t('input')}${$t('adminUser_summary')}`, trigger: 'blur' }],
 	// 状态
--- a/src/views/system/adminUser/utils/hooks.ts
+++ b/src/views/system/adminUser/utils/hooks.ts
@ -5,8 +5,10 @@ import { h, ref } from 'vue';
 import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/adminUser/utils/types';
 import { $t } from '@/plugins/i18n';
+import { isAddUserinfo } from '@/views/system/adminUser/utils/columns';

 export const formRef = ref();
+
 const adminUserStore = useAdminUserStore();

 /**
@ -22,6 +24,7 @@ export async function onSearch() {
 * * 添加用户信息
 */
 export function onAdd() {
+	isAddUserinfo.value = true;
 	addDialog({
 		title: `${$t('add_new')}${$t('adminUser')}`,
 		width: '30%',
@ -35,7 +38,7 @@ export function onAdd() {
 				avatar: undefined,
 				sex: undefined,
 				summary: undefined,
-				status: undefined,
+				status: false,
 			},
 		},
 		draggable: true,
@ -61,6 +64,7 @@ export function onAdd() {
 * @param row
 */
 export function onUpdate(row: any) {
+	isAddUserinfo.value = false;
 	addDialog({
 		title: `${$t('modify')}${$t('adminUser')}`,
 		width: '30%',
@ -85,9 +89,9 @@ export function onUpdate(row: any) {
 			const form = options.props.formInline as FormItemProps;
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
-
 				const result = await adminUserStore.updateAdminUser({ ...form, id: row.id });
 				if (!result) return;
+
 				done();
 				await onSearch();
 			});
@ -114,3 +118,24 @@ export const onDelete = async (row: any) => {
 	await adminUserStore.deleteAdminUser([id]);
 	await onSearch();
 };
+
+/**
+ * * 更新用户状态
+ * @param row
+ */
+export const updateUserStatus = async (row: any) => {
+	const confirm = await messageBox({
+		title: $t('confirm_update_status'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel'),
+	});
+	if (!confirm) {
+		row.status = !row.status;
+		return;
+	}
+	const data = { id: row.id, username: row.username, nickName: row.nickName, email: row.email, status: row.status };
+	const result = await adminUserStore.updateAdminUser(data);
+	if (!result) return;
+	await onSearch();
+};
--- a/src/views/system/dept/dept-dialog.vue
+++ b/src/views/system/dept/dept-dialog.vue
@ -41,7 +41,7 @@ defineExpose({ formRef });
 			<el-input v-model="form.summary" autocomplete="off" type="text" />
 		</el-form-item>
 		<el-form-item :label="$t('dept_remarks')" prop="remarks">
-			<el-input v-model="form.remarks" autocomplete="off" type="text" />
+			<el-input v-model="form.remarks" autocomplete="off" maxlength="600" show-word-limit type="textarea" />
 		</el-form-item>
 	</el-form>
 </template>
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@ -31,9 +31,6 @@ onMounted(() => {
 <template>
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="deptStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<el-form-item :label="$t('dept_parentId')" prop="parentId">
-				<el-input v-model="deptStore.form.parentId" :placeholder="`${$t('input')}${$t('dept_parentId')}`" class="!w-[180px]" clearable />
-			</el-form-item>
 			<el-form-item :label="$t('dept_managerId')" prop="managerId">
 				<el-input v-model="deptStore.form.managerId" :placeholder="`${$t('input')}${$t('dept_managerId')}`" class="!w-[180px]" clearable />
 			</el-form-item>
@ -85,8 +82,7 @@ onMounted(() => {
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
 						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
-						<!-- TODO 待完成 -->
-						<el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @confirm="onDelete(row)">
+						<el-popconfirm :title="`是否确认删除 ${row.deptName}数据`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
 									{{ $t('delete') }}
--- a/src/views/system/dept/utils/columns.ts
+++ b/src/views/system/dept/utils/columns.ts
@ -25,14 +25,8 @@ export const columns: TableColumnList = [

 // 添加规则
 export const rules = reactive({
-	// 父级id
-	parentId: [{ required: true, message: `${$t('input')}${$t('dept_parentId')}`, trigger: 'blur' }],
-	// 管理者id
-	managerId: [{ required: true, message: `${$t('input')}${$t('dept_managerId')}`, trigger: 'blur' }],
 	// 部门名称
 	deptName: [{ required: true, message: `${$t('input')}${$t('dept_deptName')}`, trigger: 'blur' }],
 	// 部门简介
 	summary: [{ required: true, message: `${$t('input')}${$t('dept_summary')}`, trigger: 'blur' }],
-	// 备注信息
-	remarks: [{ required: true, message: `${$t('input')}${$t('dept_remarks')}`, trigger: 'blur' }],
 });
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2"/></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M956.8 988.8H585.6c-16 0-25.6-9.6-25.6-28.8V576c0-16 9.6-28.8 25.6-28.8h371.2c16 0 25.6 9.6 25.6 28.8v384c0 16-9.6 28.8-25.6 28.8M608 937.6h326.4V598.4H608zm-121.6 44.8C262.4 982.4 144 848 144 595.2c0-19.2 9.6-28.8 25.6-28.8s25.6 12.8 25.6 28.8c0 220.8 96 326.4 288 326.4 16 0 25.6 12.8 25.6 28.8s-6.4 32-22.4 32"/><path d="M262.4 694.4c-6.4 0-9.6-3.2-16-6.4L160 601.6c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8-3.2 3.2-6.4 6.4-12.8 6.4"/><path d="M86.4 694.4c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0 9.6 9.6 9.6 22.4 0 28.8L99.2 688c-3.2 3.2-6.4 6.4-12.8 6.4m790.4-249.6c-16 0-28.8-12.8-28.8-32 0-224-99.2-336-300.8-336-16 0-28.8-12.8-28.8-32s9.6-32 28.8-32c233.6 0 355.2 137.6 355.2 396.8 0 22.4-9.6 35.2-25.6 35.2"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4l-86.4-86.4c-9.6-9.6-9.6-22.4 0-28.8s22.4-9.6 28.8 0l86.4 86.4c9.6 9.6 9.6 22.4 0 28.8 0 3.2-6.4 6.4-12.8 6.4"/><path d="M876.8 448c-6.4 0-9.6-3.2-16-6.4-9.6-9.6-9.6-22.4 0-28.8l86.4-86.4c9.6-9.6 22.4-9.6 28.8 0s9.6 22.4 0 28.8l-86.4 86.4c-3.2 3.2-6.4 6.4-12.8 6.4M288 524.8C156.8 524.8 48 416 48 278.4S156.8 35.2 288 35.2 528 144 528 281.6 419.2 524.8 288 524.8m-3.2-432c-99.2 0-179.2 83.2-179.2 185.6S185.6 464 284.8 464 464 380.8 464 278.4 384 92.8 284.8 92.8"/></svg>