@minilo/ui 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (212) hide show
  1. package/package.json +2 -2
  2. package/minilo/dist/index.css +0 -1
  3. package/minilo/dist/index.full.js +0 -8393
  4. package/minilo/dist/index.full.min.js +0 -2
  5. package/minilo/dist/index.full.min.js.map +0 -1
  6. package/minilo/dist/index.full.min.mjs +0 -2
  7. package/minilo/dist/index.full.min.mjs.map +0 -1
  8. package/minilo/dist/index.full.mjs +0 -8373
  9. package/minilo/es/components/button/index.d.ts +0 -47
  10. package/minilo/es/components/button/index.mjs +0 -6
  11. package/minilo/es/components/button/index.vue.d.ts +0 -29
  12. package/minilo/es/components/button/index.vue.mjs +0 -5
  13. package/minilo/es/components/button/index.vue2.mjs +0 -67
  14. package/minilo/es/components/button/type.d.ts +0 -10
  15. package/minilo/es/components/chart/index.d.ts +0 -49
  16. package/minilo/es/components/chart/index.mjs +0 -6
  17. package/minilo/es/components/chart/index.vue.d.ts +0 -33
  18. package/minilo/es/components/chart/index.vue.mjs +0 -5
  19. package/minilo/es/components/chart/index.vue2.mjs +0 -124
  20. package/minilo/es/components/chart/type.d.ts +0 -7
  21. package/minilo/es/components/detail/index.d.ts +0 -37
  22. package/minilo/es/components/detail/index.mjs +0 -6
  23. package/minilo/es/components/detail/index.vue.d.ts +0 -23
  24. package/minilo/es/components/detail/index.vue.mjs +0 -5
  25. package/minilo/es/components/detail/index.vue2.mjs +0 -194
  26. package/minilo/es/components/detail/renderLabel.vue.d.ts +0 -8
  27. package/minilo/es/components/detail/renderLabel.vue.mjs +0 -5
  28. package/minilo/es/components/detail/renderLabel.vue2.mjs +0 -23
  29. package/minilo/es/components/detail/renderTooltip.vue.d.ts +0 -8
  30. package/minilo/es/components/detail/renderTooltip.vue.mjs +0 -5
  31. package/minilo/es/components/detail/renderTooltip.vue2.mjs +0 -23
  32. package/minilo/es/components/detail/type.d.ts +0 -27
  33. package/minilo/es/components/image-upload-pro/index.d.ts +0 -544
  34. package/minilo/es/components/image-upload-pro/index.mjs +0 -7
  35. package/minilo/es/components/image-upload-pro/index.vue.d.ts +0 -546
  36. package/minilo/es/components/image-upload-pro/index.vue.mjs +0 -5
  37. package/minilo/es/components/image-upload-pro/index.vue2.mjs +0 -657
  38. package/minilo/es/components/image-upload-pro/type.d.ts +0 -147
  39. package/minilo/es/components/image-upload-pro/type.mjs +0 -81
  40. package/minilo/es/components/index.d.ts +0 -11
  41. package/minilo/es/components/index.mjs +0 -14
  42. package/minilo/es/components/number-range-input/index.d.ts +0 -41
  43. package/minilo/es/components/number-range-input/index.mjs +0 -6
  44. package/minilo/es/components/number-range-input/index.vue.d.ts +0 -33
  45. package/minilo/es/components/number-range-input/index.vue.mjs +0 -5
  46. package/minilo/es/components/number-range-input/index.vue2.mjs +0 -150
  47. package/minilo/es/components/number-range-input/props.d.ts +0 -10
  48. package/minilo/es/components/search/index.d.ts +0 -488
  49. package/minilo/es/components/search/index.mjs +0 -6
  50. package/minilo/es/components/search/index.vue.d.ts +0 -554
  51. package/minilo/es/components/search/index.vue.mjs +0 -5
  52. package/minilo/es/components/search/index.vue2.mjs +0 -297
  53. package/minilo/es/components/search/props.d.ts +0 -107
  54. package/minilo/es/components/search/props.mjs +0 -55
  55. package/minilo/es/components/search-table/index.mjs +0 -6
  56. package/minilo/es/components/search-table/index.vue.d.ts +0 -189
  57. package/minilo/es/components/search-table/index.vue.mjs +0 -5
  58. package/minilo/es/components/search-table/index.vue2.mjs +0 -198
  59. package/minilo/es/components/search-table/props.d.ts +0 -69
  60. package/minilo/es/components/search-table/props.mjs +0 -69
  61. package/minilo/es/components/search-table/render.d.ts +0 -11
  62. package/minilo/es/components/search-table/render.mjs +0 -19
  63. package/minilo/es/components/tree-select/index.d.ts +0 -34
  64. package/minilo/es/components/tree-select/index.mjs +0 -6
  65. package/minilo/es/components/tree-select/index.vue.d.ts +0 -23
  66. package/minilo/es/components/tree-select/index.vue.mjs +0 -5
  67. package/minilo/es/components/tree-select/index.vue2.mjs +0 -229
  68. package/minilo/es/components/tree-select/type.d.ts +0 -34
  69. package/minilo/es/components/tree-select-dialog/index.d.ts +0 -64
  70. package/minilo/es/components/tree-select-dialog/index.mjs +0 -7
  71. package/minilo/es/components/tree-select-dialog/index.vue.d.ts +0 -26
  72. package/minilo/es/components/tree-select-dialog/index.vue.mjs +0 -5
  73. package/minilo/es/components/tree-select-dialog/index.vue2.mjs +0 -145
  74. package/minilo/es/components/tree-select-dialog/type.d.ts +0 -9
  75. package/minilo/es/components/tree-select-dialog/type.mjs +0 -24
  76. package/minilo/es/components/tree-select-drawer/index.d.ts +0 -69
  77. package/minilo/es/components/tree-select-drawer/index.mjs +0 -7
  78. package/minilo/es/components/tree-select-drawer/index.vue.d.ts +0 -26
  79. package/minilo/es/components/tree-select-drawer/index.vue.mjs +0 -5
  80. package/minilo/es/components/tree-select-drawer/index.vue2.mjs +0 -151
  81. package/minilo/es/components/tree-select-drawer/type.d.ts +0 -10
  82. package/minilo/es/components/tree-select-drawer/type.mjs +0 -20
  83. package/minilo/es/components/virtual-list/index.d.ts +0 -59
  84. package/minilo/es/components/virtual-list/index.mjs +0 -6
  85. package/minilo/es/components/virtual-list/index.vue.d.ts +0 -39
  86. package/minilo/es/components/virtual-list/index.vue.mjs +0 -5
  87. package/minilo/es/components/virtual-list/index.vue2.mjs +0 -423
  88. package/minilo/es/components/virtual-list/type.d.ts +0 -20
  89. package/minilo/es/node_modules/.pnpm/@element-plus_icons-vue@2.3.1_vue@3.5.26_typescript@5.9.3_/node_modules/@element-plus/icons-vue/dist/index.mjs +0 -41
  90. package/minilo/es/node_modules/.pnpm/@vueuse_core@13.9.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/index.mjs +0 -73
  91. package/minilo/es/node_modules/.pnpm/@vueuse_shared@13.9.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/index.mjs +0 -76
  92. package/minilo/es/packages/utils/dist/func/common.mjs +0 -14
  93. package/minilo/es/packages/utils/dist/request/index.mjs +0 -105
  94. package/minilo/es/resolver/index.d.ts +0 -8
  95. package/minilo/es/resolver/index.mjs +0 -26
  96. package/minilo/es/utils/index.d.ts +0 -28
  97. package/minilo/es/utils/index.mjs +0 -30
  98. package/minilo/lib/components/button/index.d.ts +0 -47
  99. package/minilo/lib/components/button/index.js +0 -11
  100. package/minilo/lib/components/button/index.vue.d.ts +0 -29
  101. package/minilo/lib/components/button/index.vue.js +0 -9
  102. package/minilo/lib/components/button/index.vue2.js +0 -71
  103. package/minilo/lib/components/button/type.d.ts +0 -10
  104. package/minilo/lib/components/chart/index.d.ts +0 -49
  105. package/minilo/lib/components/chart/index.js +0 -11
  106. package/minilo/lib/components/chart/index.vue.d.ts +0 -33
  107. package/minilo/lib/components/chart/index.vue.js +0 -9
  108. package/minilo/lib/components/chart/index.vue2.js +0 -128
  109. package/minilo/lib/components/chart/type.d.ts +0 -7
  110. package/minilo/lib/components/detail/index.d.ts +0 -37
  111. package/minilo/lib/components/detail/index.js +0 -11
  112. package/minilo/lib/components/detail/index.vue.d.ts +0 -23
  113. package/minilo/lib/components/detail/index.vue.js +0 -9
  114. package/minilo/lib/components/detail/index.vue2.js +0 -198
  115. package/minilo/lib/components/detail/renderLabel.vue.d.ts +0 -8
  116. package/minilo/lib/components/detail/renderLabel.vue.js +0 -9
  117. package/minilo/lib/components/detail/renderLabel.vue2.js +0 -27
  118. package/minilo/lib/components/detail/renderTooltip.vue.d.ts +0 -8
  119. package/minilo/lib/components/detail/renderTooltip.vue.js +0 -9
  120. package/minilo/lib/components/detail/renderTooltip.vue2.js +0 -27
  121. package/minilo/lib/components/detail/type.d.ts +0 -27
  122. package/minilo/lib/components/image-upload-pro/index.d.ts +0 -544
  123. package/minilo/lib/components/image-upload-pro/index.js +0 -13
  124. package/minilo/lib/components/image-upload-pro/index.vue.d.ts +0 -546
  125. package/minilo/lib/components/image-upload-pro/index.vue.js +0 -9
  126. package/minilo/lib/components/image-upload-pro/index.vue2.js +0 -661
  127. package/minilo/lib/components/image-upload-pro/type.d.ts +0 -147
  128. package/minilo/lib/components/image-upload-pro/type.js +0 -83
  129. package/minilo/lib/components/index.d.ts +0 -11
  130. package/minilo/lib/components/index.js +0 -33
  131. package/minilo/lib/components/number-range-input/index.d.ts +0 -41
  132. package/minilo/lib/components/number-range-input/index.js +0 -11
  133. package/minilo/lib/components/number-range-input/index.vue.d.ts +0 -33
  134. package/minilo/lib/components/number-range-input/index.vue.js +0 -9
  135. package/minilo/lib/components/number-range-input/index.vue2.js +0 -154
  136. package/minilo/lib/components/number-range-input/props.d.ts +0 -10
  137. package/minilo/lib/components/search/index.d.ts +0 -488
  138. package/minilo/lib/components/search/index.js +0 -11
  139. package/minilo/lib/components/search/index.vue.d.ts +0 -554
  140. package/minilo/lib/components/search/index.vue.js +0 -9
  141. package/minilo/lib/components/search/index.vue2.js +0 -301
  142. package/minilo/lib/components/search/props.d.ts +0 -107
  143. package/minilo/lib/components/search/props.js +0 -58
  144. package/minilo/lib/components/search-table/index.js +0 -11
  145. package/minilo/lib/components/search-table/index.vue.d.ts +0 -189
  146. package/minilo/lib/components/search-table/index.vue.js +0 -9
  147. package/minilo/lib/components/search-table/index.vue2.js +0 -202
  148. package/minilo/lib/components/search-table/props.d.ts +0 -69
  149. package/minilo/lib/components/search-table/props.js +0 -72
  150. package/minilo/lib/components/search-table/render.d.ts +0 -11
  151. package/minilo/lib/components/search-table/render.js +0 -23
  152. package/minilo/lib/components/tree-select/index.d.ts +0 -34
  153. package/minilo/lib/components/tree-select/index.js +0 -11
  154. package/minilo/lib/components/tree-select/index.vue.d.ts +0 -23
  155. package/minilo/lib/components/tree-select/index.vue.js +0 -9
  156. package/minilo/lib/components/tree-select/index.vue2.js +0 -233
  157. package/minilo/lib/components/tree-select/type.d.ts +0 -34
  158. package/minilo/lib/components/tree-select-dialog/index.d.ts +0 -64
  159. package/minilo/lib/components/tree-select-dialog/index.js +0 -13
  160. package/minilo/lib/components/tree-select-dialog/index.vue.d.ts +0 -26
  161. package/minilo/lib/components/tree-select-dialog/index.vue.js +0 -9
  162. package/minilo/lib/components/tree-select-dialog/index.vue2.js +0 -149
  163. package/minilo/lib/components/tree-select-dialog/type.d.ts +0 -9
  164. package/minilo/lib/components/tree-select-dialog/type.js +0 -26
  165. package/minilo/lib/components/tree-select-drawer/index.d.ts +0 -69
  166. package/minilo/lib/components/tree-select-drawer/index.js +0 -13
  167. package/minilo/lib/components/tree-select-drawer/index.vue.d.ts +0 -26
  168. package/minilo/lib/components/tree-select-drawer/index.vue.js +0 -9
  169. package/minilo/lib/components/tree-select-drawer/index.vue2.js +0 -155
  170. package/minilo/lib/components/tree-select-drawer/type.d.ts +0 -10
  171. package/minilo/lib/components/tree-select-drawer/type.js +0 -22
  172. package/minilo/lib/components/virtual-list/index.d.ts +0 -59
  173. package/minilo/lib/components/virtual-list/index.js +0 -11
  174. package/minilo/lib/components/virtual-list/index.vue.d.ts +0 -39
  175. package/minilo/lib/components/virtual-list/index.vue.js +0 -9
  176. package/minilo/lib/components/virtual-list/index.vue2.js +0 -427
  177. package/minilo/lib/components/virtual-list/type.d.ts +0 -20
  178. package/minilo/lib/node_modules/.pnpm/@element-plus_icons-vue@2.3.1_vue@3.5.26_typescript@5.9.3_/node_modules/@element-plus/icons-vue/dist/index.js +0 -44
  179. package/minilo/lib/node_modules/.pnpm/@vueuse_core@13.9.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/index.js +0 -84
  180. package/minilo/lib/node_modules/.pnpm/@vueuse_shared@13.9.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/index.js +0 -83
  181. package/minilo/lib/packages/utils/dist/func/common.js +0 -16
  182. package/minilo/lib/packages/utils/dist/request/index.js +0 -115
  183. package/minilo/lib/resolver/index.d.ts +0 -8
  184. package/minilo/lib/resolver/index.js +0 -28
  185. package/minilo/lib/utils/index.d.ts +0 -28
  186. package/minilo/lib/utils/index.js +0 -34
  187. package/minilo/theme-chalk/index.css +0 -1
  188. package/minilo/theme-chalk/ml-button.css +0 -1
  189. package/minilo/theme-chalk/ml-chart.css +0 -1
  190. package/minilo/theme-chalk/ml-detail.css +0 -1
  191. package/minilo/theme-chalk/ml-image-upload-pro.css +0 -1
  192. package/minilo/theme-chalk/ml-number-range-input.css +0 -1
  193. package/minilo/theme-chalk/ml-search-table.css +0 -1
  194. package/minilo/theme-chalk/ml-search.css +0 -1
  195. package/minilo/theme-chalk/ml-tree-select-dialog.css +0 -0
  196. package/minilo/theme-chalk/ml-tree-select-drawer.css +0 -0
  197. package/minilo/theme-chalk/ml-tree-select.css +0 -1
  198. package/minilo/theme-chalk/ml-virtual-list.css +0 -1
  199. package/minilo/theme-chalk/src/button.scss +0 -22
  200. package/minilo/theme-chalk/src/chart.scss +0 -11
  201. package/minilo/theme-chalk/src/default/variable.scss +0 -1
  202. package/minilo/theme-chalk/src/detail.scss +0 -9
  203. package/minilo/theme-chalk/src/image-upload-pro.scss +0 -70
  204. package/minilo/theme-chalk/src/index.scss +0 -14
  205. package/minilo/theme-chalk/src/mixins/mixin.scss +0 -273
  206. package/minilo/theme-chalk/src/number-range-input.scss +0 -9
  207. package/minilo/theme-chalk/src/search-table.scss +0 -47
  208. package/minilo/theme-chalk/src/search.scss +0 -20
  209. package/minilo/theme-chalk/src/tree-select-dialog.scss +0 -0
  210. package/minilo/theme-chalk/src/tree-select-drawer.scss +0 -0
  211. package/minilo/theme-chalk/src/tree-select.scss +0 -47
  212. package/minilo/theme-chalk/src/virtual-list.scss +0 -49
@@ -1,657 +0,0 @@
1
- import { defineComponent, ref, reactive, computed, watch, resolveComponent, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createVNode, withCtx, createTextVNode, createElementVNode, toDisplayString, Fragment, renderList, nextTick } from 'vue';
2
- import { ElUpload, ElButton, ElImage, ElDialog, ElForm, ElRow, ElCol, ElFormItem, ElSelect, ElInputNumber, ElMessage, ElMessageBox } from 'element-plus';
3
- import { imageUploadProProps } from './type.mjs';
4
- import { bem } from '../../utils/index.mjs';
5
- import { initRequestInstance } from '../../packages/utils/dist/request/index.mjs';
6
- import { getNestedValue } from '../../packages/utils/dist/func/common.mjs';
7
-
8
- const _hoisted_1 = { key: 0 };
9
- const _hoisted_2 = ["onDragstart", "onDrop"];
10
- var _sfc_main = /* @__PURE__ */ defineComponent({
11
- ...{
12
- name: "MlImageUploadPro"
13
- },
14
- __name: "index",
15
- props: imageUploadProProps,
16
- emits: ["update:modelValue", "change", "upload"],
17
- setup(__props, { expose: __expose, emit: __emit }) {
18
- const ASPECT_RATIO_OPTIONS = [
19
- { label: "\u81EA\u7531\u6BD4\u4F8B", value: "free" },
20
- { label: "1:1", value: "1:1" },
21
- { label: "4:3", value: "4:3" },
22
- { label: "16:9", value: "16:9" }
23
- ];
24
- const props = __props;
25
- const uploadRef = ref();
26
- const cropperRef = ref();
27
- const fileList = ref([]);
28
- const previewList = ref([]);
29
- const cropDialogVisible = ref(false);
30
- const cropImageUrl = ref("");
31
- const cropTargetItem = ref();
32
- const dragIndex = ref(-1);
33
- const cropForm = reactive({
34
- aspectRatio: "free"
35
- // 裁剪比例
36
- });
37
- const cropWidth = ref(props.sizeLimit.width || 400);
38
- const cropHeight = ref(props.sizeLimit.height || 400);
39
- const displayWidth = ref(props.sizeLimit.width || 400);
40
- const displayHeight = ref(props.sizeLimit.height || 400);
41
- const aspectRatio = reactive({
42
- fixed: false,
43
- value: [1, 1]
44
- });
45
- const axios = computed(() => {
46
- if (!props.uploadApi) return null;
47
- return initRequestInstance({
48
- baseURL: "",
49
- headers: props.uploadApi.headers || {}
50
- });
51
- });
52
- const acceptDesc = computed(() => {
53
- return props.acceptType.split(",").map((type) => type.replace("image/", ".")).join("\u3001");
54
- });
55
- watch(
56
- () => props.modelValue,
57
- (val) => {
58
- if (val.length) {
59
- previewList.value = val.map((item) => ({
60
- ...item,
61
- url: item.url || item.response?.url || ""
62
- }));
63
- fileList.value = val;
64
- }
65
- },
66
- { immediate: true, deep: true }
67
- );
68
- const uploadSingleFile = async (file) => {
69
- if (!props.uploadApi || !axios.value) {
70
- throw new Error("\u672A\u914D\u7F6E\u4E0A\u4F20 API");
71
- }
72
- const formData = new FormData();
73
- formData.append(props.uploadApi.fieldName || "file", file);
74
- if (props.uploadApi.data) {
75
- Object.keys(props.uploadApi.data).forEach((key) => {
76
- formData.append(key, props.uploadApi.data[key]);
77
- });
78
- }
79
- const method = props.uploadApi.method || "post";
80
- const response = await axios.value[method](props.uploadApi.url, formData, {
81
- headers: {
82
- "Content-Type": "multipart/form-data"
83
- }
84
- });
85
- const urlField = props.uploadApi.responseUrlField || "data.url";
86
- return getNestedValue(response, urlField);
87
- };
88
- const handleBeforeUpload = (file) => {
89
- const isAccept = props.acceptType.includes(file.type);
90
- if (!isAccept) {
91
- ElMessage.error(`\u4EC5\u652F\u6301\u4E0A\u4F20${acceptDesc.value}\u683C\u5F0F\u7684\u56FE\u7247`);
92
- return false;
93
- }
94
- const isOverSize = file.size / 1024 / 1024 > props.sizeLimit.size;
95
- if (isOverSize) {
96
- ElMessage.error(`\u5355\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7${props.sizeLimit.size}MB`);
97
- return false;
98
- }
99
- if (previewList.value.length >= props.maxCount) {
100
- ElMessage.error(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxCount}\u5F20\u56FE\u7247`);
101
- return false;
102
- }
103
- if (props.sizeLimit.width || props.sizeLimit.height) {
104
- return new Promise((resolve) => {
105
- const img = new Image();
106
- img.onload = () => {
107
- const isOverWidth = props.sizeLimit.width && img.width < props.sizeLimit.width;
108
- const isOverHeight = props.sizeLimit.height && img.height < props.sizeLimit.height;
109
- if (isOverWidth || isOverHeight) {
110
- ElMessage.error(
111
- `\u56FE\u7247\u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265${props.sizeLimit.width}px \u9AD8\u2265${props.sizeLimit.height}px\uFF0C\u5F53\u524D\u56FE\u7247\u5BBD${img.width}px \u9AD8${img.height}px`
112
- );
113
- resolve(false);
114
- } else {
115
- resolve(true);
116
- }
117
- };
118
- img.src = URL.createObjectURL(file);
119
- });
120
- }
121
- return true;
122
- };
123
- const handleFileChange = async (file, files) => {
124
- if (file.status === "ready") {
125
- const blobUrl = URL.createObjectURL(file.raw);
126
- const newItem = {
127
- ...file,
128
- rawFile: file.raw,
129
- blobUrl,
130
- // 保存 blob URL 用于裁剪
131
- url: blobUrl
132
- // 初始显示使用 blob URL
133
- };
134
- if (props.allowCrop) {
135
- ElMessageBox.confirm("\u662F\u5426\u9700\u8981\u88C1\u526A\u8BE5\u56FE\u7247\uFF1F", "\u63D0\u793A", {
136
- type: "info",
137
- confirmButtonText: "\u88C1\u526A",
138
- cancelButtonText: "\u76F4\u63A5\u4E0A\u4F20"
139
- }).then(() => {
140
- handleCropImage(newItem);
141
- }).catch(async () => {
142
- if (props.autoUpload && props.uploadApi) {
143
- try {
144
- const uploadedUrl = await uploadSingleFile(file.raw);
145
- newItem.serverUrl = uploadedUrl;
146
- newItem.url = uploadedUrl;
147
- ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
148
- } catch (error) {
149
- ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
150
- console.error(error);
151
- return;
152
- }
153
- }
154
- previewList.value.push(newItem);
155
- syncModelValue();
156
- });
157
- } else {
158
- if (props.autoUpload && props.uploadApi) {
159
- try {
160
- const uploadedUrl = await uploadSingleFile(file.raw);
161
- newItem.serverUrl = uploadedUrl;
162
- newItem.url = uploadedUrl;
163
- ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
164
- } catch (error) {
165
- ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
166
- console.error(error);
167
- return;
168
- }
169
- }
170
- previewList.value.push(newItem);
171
- syncModelValue();
172
- }
173
- }
174
- fileList.value = files;
175
- };
176
- const handleFileRemove = (file) => {
177
- previewList.value = previewList.value.filter((item) => item.uid !== file.uid);
178
- syncModelValue();
179
- };
180
- const handleCropImage = (item) => {
181
- console.log(item);
182
- if (!props.allowCrop) return;
183
- cropTargetItem.value = item;
184
- cropImageUrl.value = item.blobUrl || item.url || "";
185
- cropDialogVisible.value = true;
186
- nextTick(() => {
187
- cropForm.aspectRatio = "free";
188
- cropWidth.value = props.sizeLimit.width || 400;
189
- cropHeight.value = props.sizeLimit.height || 400;
190
- displayWidth.value = props.sizeLimit.width || 400;
191
- displayHeight.value = props.sizeLimit.height || 400;
192
- aspectRatio.fixed = false;
193
- });
194
- };
195
- const handleAspectRatioChange = (val) => {
196
- if (val === "free") {
197
- aspectRatio.fixed = false;
198
- } else {
199
- aspectRatio.fixed = true;
200
- const parts = val.split(":").map(Number);
201
- const w = parts[0] ?? 1;
202
- const h = parts[1] ?? 1;
203
- aspectRatio.value = [w, h];
204
- }
205
- };
206
- const handleCropRealTime = (data) => {
207
- if (data && data.w && data.h) {
208
- displayWidth.value = Math.round(data.w);
209
- displayHeight.value = Math.round(data.h);
210
- }
211
- };
212
- const handleSizeChange = () => {
213
- cropWidth.value = displayWidth.value;
214
- cropHeight.value = displayHeight.value;
215
- };
216
- const handleCropConfirm = () => {
217
- if (!cropperRef.value || !cropTargetItem.value) return;
218
- cropperRef.value.getCropBlob(async (blob) => {
219
- const croppedFile = new File([blob], cropTargetItem.value.name || "cropped.jpg", {
220
- type: cropTargetItem.value.rawFile?.type || "image/jpeg"
221
- });
222
- const newBlobUrl = URL.createObjectURL(croppedFile);
223
- let displayUrl = newBlobUrl;
224
- if (props.autoUpload && props.uploadApi) {
225
- try {
226
- const serverUrl = await uploadSingleFile(croppedFile);
227
- displayUrl = serverUrl;
228
- ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
229
- const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
230
- const targetItem = previewList.value[index];
231
- if (index > -1 && targetItem) {
232
- targetItem.url = displayUrl;
233
- targetItem.blobUrl = newBlobUrl;
234
- targetItem.serverUrl = serverUrl;
235
- targetItem.rawFile = croppedFile;
236
- } else {
237
- previewList.value.push({
238
- ...cropTargetItem.value,
239
- name: cropTargetItem.value.name ?? "cropped.jpg",
240
- url: displayUrl,
241
- blobUrl: newBlobUrl,
242
- serverUrl,
243
- rawFile: croppedFile
244
- });
245
- }
246
- } catch (error) {
247
- ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
248
- console.error(error);
249
- return;
250
- }
251
- } else {
252
- const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
253
- const targetItem = previewList.value[index];
254
- if (index > -1 && targetItem) {
255
- targetItem.url = newBlobUrl;
256
- targetItem.blobUrl = newBlobUrl;
257
- targetItem.rawFile = croppedFile;
258
- } else {
259
- previewList.value.push({
260
- ...cropTargetItem.value,
261
- name: cropTargetItem.value.name ?? "cropped.jpg",
262
- url: newBlobUrl,
263
- blobUrl: newBlobUrl,
264
- rawFile: croppedFile
265
- });
266
- }
267
- }
268
- syncModelValue();
269
- cropDialogVisible.value = false;
270
- ElMessage.success("\u56FE\u7247\u88C1\u526A\u6210\u529F");
271
- });
272
- };
273
- const resetCropper = () => {
274
- cropTargetItem.value = void 0;
275
- cropImageUrl.value = "";
276
- };
277
- const handleRemovePreview = (item) => {
278
- ElMessageBox.confirm("\u786E\u5B9A\u8981\u5220\u9664\u8BE5\u56FE\u7247\u5417\uFF1F", "\u63D0\u793A", {
279
- type: "warning",
280
- confirmButtonText: "\u786E\u5B9A",
281
- cancelButtonText: "\u53D6\u6D88"
282
- }).then(() => {
283
- previewList.value = previewList.value.filter((i) => i.uid !== item.uid);
284
- fileList.value = fileList.value.filter((i) => i.uid !== item.uid);
285
- syncModelValue();
286
- ElMessage.success("\u56FE\u7247\u5220\u9664\u6210\u529F");
287
- });
288
- };
289
- const handleDragStart = (index) => {
290
- if (!props.allowSort) return;
291
- dragIndex.value = index;
292
- };
293
- const handleDragOver = (e) => {
294
- e.preventDefault();
295
- };
296
- const handleDrop = (index) => {
297
- if (!props.allowSort || dragIndex.value === -1 || dragIndex.value === index) return;
298
- const temp = previewList.value[dragIndex.value];
299
- if (!temp) return;
300
- previewList.value.splice(dragIndex.value, 1);
301
- previewList.value.splice(index, 0, temp);
302
- dragIndex.value = -1;
303
- syncModelValue();
304
- };
305
- const syncModelValue = () => {
306
- emit("update:modelValue", [...previewList.value]);
307
- emit("change", [...previewList.value]);
308
- };
309
- const emit = __emit;
310
- const uploadToServer = async (uploadApi) => {
311
- const uploadPromises = previewList.value.map(async (item) => {
312
- if (item.rawFile) {
313
- const url = await uploadApi(item.rawFile);
314
- item.url = url;
315
- return item;
316
- }
317
- return item;
318
- });
319
- const result = await Promise.all(uploadPromises);
320
- previewList.value = result;
321
- syncModelValue();
322
- return result;
323
- };
324
- __expose({
325
- uploadToServer,
326
- // 暴露上传到服务器的方法
327
- clear: () => {
328
- previewList.value = [];
329
- fileList.value = [];
330
- syncModelValue();
331
- }
332
- });
333
- return (_ctx, _cache) => {
334
- const _component_vue_cropper = resolveComponent("vue-cropper");
335
- const _component_el_option = resolveComponent("el-option");
336
- return openBlock(), createElementBlock(
337
- "div",
338
- {
339
- class: normalizeClass(unref(bem)("image-upload-pro"))
340
- },
341
- [
342
- createCommentVNode(" \u6838\u5FC3\u4E0A\u4F20\u533A\u57DF "),
343
- createVNode(unref(ElUpload), {
344
- ref_key: "uploadRef",
345
- ref: uploadRef,
346
- class: normalizeClass(unref(bem)("image-upload-pro", "upload-container")),
347
- action: "",
348
- "auto-upload": false,
349
- "file-list": fileList.value,
350
- "before-upload": handleBeforeUpload,
351
- "on-change": handleFileChange,
352
- "on-remove": handleFileRemove,
353
- accept: _ctx.acceptType,
354
- "show-file-list": false
355
- }, {
356
- tip: withCtx(() => [
357
- createElementVNode(
358
- "div",
359
- {
360
- class: normalizeClass(unref(bem)("image-upload-pro", "upload-text"))
361
- },
362
- [
363
- createTextVNode(
364
- " \u652F\u6301\u683C\u5F0F\uFF1A" + toDisplayString(acceptDesc.value) + " | \u5355\u6587\u4EF6\u5927\u5C0F\u2264" + toDisplayString(props.sizeLimit.size) + "MB ",
365
- 1
366
- /* TEXT */
367
- ),
368
- props.sizeLimit.width || props.sizeLimit.height ? (openBlock(), createElementBlock(
369
- "span",
370
- _hoisted_1,
371
- " | \u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265" + toDisplayString(props.sizeLimit.width) + "px \u9AD8\u2265" + toDisplayString(props.sizeLimit.height) + "px ",
372
- 1
373
- /* TEXT */
374
- )) : createCommentVNode("v-if", true)
375
- ],
376
- 2
377
- /* CLASS */
378
- )
379
- ]),
380
- default: withCtx(() => [
381
- createVNode(unref(ElButton), {
382
- disabled: fileList.value.length === props.maxCount,
383
- type: "primary"
384
- }, {
385
- default: withCtx(() => [..._cache[6] || (_cache[6] = [
386
- createTextVNode(
387
- "\u9009\u62E9\u56FE\u7247",
388
- -1
389
- /* CACHED */
390
- )
391
- ])]),
392
- _: 1
393
- /* STABLE */
394
- }, 8, ["disabled"])
395
- ]),
396
- _: 1
397
- /* STABLE */
398
- }, 8, ["class", "file-list", "accept"]),
399
- createCommentVNode(" \u5DF2\u4E0A\u4F20\u56FE\u7247\u9884\u89C8\u5217\u8868 "),
400
- previewList.value.length ? (openBlock(), createElementBlock(
401
- "div",
402
- {
403
- key: 0,
404
- class: normalizeClass(unref(bem)("image-upload-pro", "preview-list"))
405
- },
406
- [
407
- (openBlock(true), createElementBlock(
408
- Fragment,
409
- null,
410
- renderList(previewList.value, (item, index) => {
411
- return openBlock(), createElementBlock("div", {
412
- class: normalizeClass([unref(bem)("image-upload-pro", "preview-item"), { active: item.isCover }]),
413
- key: item.uid,
414
- draggable: "true",
415
- onDragstart: ($event) => handleDragStart(index),
416
- onDragover: _cache[0] || (_cache[0] = ($event) => handleDragOver($event)),
417
- onDrop: ($event) => handleDrop(index)
418
- }, [
419
- createCommentVNode(" \u56FE\u7247\u9884\u89C8 "),
420
- createElementVNode(
421
- "div",
422
- {
423
- class: normalizeClass(unref(bem)("image-upload-pro", "preview-img"))
424
- },
425
- [
426
- createVNode(unref(ElImage), {
427
- src: item.url,
428
- "preview-src-list": previewList.value.filter((i) => i.url).map((i) => i.url),
429
- "preview-current-index": index,
430
- fit: "cover"
431
- }, null, 8, ["src", "preview-src-list", "preview-current-index"])
432
- ],
433
- 2
434
- /* CLASS */
435
- ),
436
- createCommentVNode(" \u64CD\u4F5C\u6309\u94AE\u7EC4 "),
437
- createElementVNode(
438
- "div",
439
- {
440
- class: normalizeClass(unref(bem)("image-upload-pro", "preview-actions"))
441
- },
442
- [
443
- createVNode(unref(ElButton), {
444
- type: "primary",
445
- text: "",
446
- size: "small",
447
- onClick: ($event) => handleCropImage(item)
448
- }, {
449
- default: withCtx(() => [..._cache[7] || (_cache[7] = [
450
- createTextVNode(
451
- "\u88C1\u526A",
452
- -1
453
- /* CACHED */
454
- )
455
- ])]),
456
- _: 1
457
- /* STABLE */
458
- }, 8, ["onClick"]),
459
- createVNode(unref(ElButton), {
460
- text: "",
461
- size: "small",
462
- type: "danger",
463
- onClick: ($event) => handleRemovePreview(item)
464
- }, {
465
- default: withCtx(() => [..._cache[8] || (_cache[8] = [
466
- createTextVNode(
467
- "\u5220\u9664",
468
- -1
469
- /* CACHED */
470
- )
471
- ])]),
472
- _: 1
473
- /* STABLE */
474
- }, 8, ["onClick"])
475
- ],
476
- 2
477
- /* CLASS */
478
- )
479
- ], 42, _hoisted_2);
480
- }),
481
- 128
482
- /* KEYED_FRAGMENT */
483
- ))
484
- ],
485
- 2
486
- /* CLASS */
487
- )) : createCommentVNode("v-if", true),
488
- createCommentVNode(" \u88C1\u526A\u5F39\u7A97 "),
489
- createVNode(unref(ElDialog), {
490
- modelValue: cropDialogVisible.value,
491
- "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => cropDialogVisible.value = $event),
492
- title: "\u56FE\u7247\u88C1\u526A",
493
- width: "900px",
494
- "close-on-click-modal": false,
495
- "destroy-on-close": "",
496
- onClose: resetCropper
497
- }, {
498
- footer: withCtx(() => [
499
- createVNode(unref(ElButton), {
500
- onClick: _cache[4] || (_cache[4] = ($event) => cropDialogVisible.value = false)
501
- }, {
502
- default: withCtx(() => [..._cache[10] || (_cache[10] = [
503
- createTextVNode(
504
- "\u53D6\u6D88",
505
- -1
506
- /* CACHED */
507
- )
508
- ])]),
509
- _: 1
510
- /* STABLE */
511
- }),
512
- createVNode(unref(ElButton), {
513
- type: "primary",
514
- onClick: handleCropConfirm
515
- }, {
516
- default: withCtx(() => [..._cache[11] || (_cache[11] = [
517
- createTextVNode(
518
- "\u786E\u8BA4\u88C1\u526A",
519
- -1
520
- /* CACHED */
521
- )
522
- ])]),
523
- _: 1
524
- /* STABLE */
525
- })
526
- ]),
527
- default: withCtx(() => [
528
- createElementVNode(
529
- "div",
530
- {
531
- class: normalizeClass(unref(bem)("image-upload-pro", "cropper-container"))
532
- },
533
- [
534
- createCommentVNode(" \u88C1\u526A\u533A\u57DF "),
535
- createVNode(_component_vue_cropper, {
536
- ref_key: "cropperRef",
537
- ref: cropperRef,
538
- img: cropImageUrl.value,
539
- info: true,
540
- "auto-crop": true,
541
- "auto-crop-width": cropWidth.value,
542
- "auto-crop-height": cropHeight.value,
543
- fixed: aspectRatio.fixed,
544
- "fixed-number": aspectRatio.value,
545
- "can-move": true,
546
- "can-scale": true,
547
- "can-rotate": false,
548
- onRealTime: handleCropRealTime
549
- }, null, 8, ["img", "auto-crop-width", "auto-crop-height", "fixed", "fixed-number"])
550
- ],
551
- 2
552
- /* CLASS */
553
- ),
554
- createElementVNode(
555
- "div",
556
- {
557
- class: normalizeClass(unref(bem)("image-upload-pro", "cropper-config"))
558
- },
559
- [
560
- createVNode(unref(ElForm), { model: cropForm }, {
561
- default: withCtx(() => [
562
- createVNode(unref(ElRow), { gutter: 10 }, {
563
- default: withCtx(() => [
564
- createVNode(unref(ElCol), { span: 8 }, {
565
- default: withCtx(() => [
566
- createVNode(unref(ElFormItem), { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
567
- default: withCtx(() => [
568
- createVNode(unref(ElSelect), {
569
- style: { "width": "100%" },
570
- modelValue: cropForm.aspectRatio,
571
- "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cropForm.aspectRatio = $event),
572
- onChange: handleAspectRatioChange
573
- }, {
574
- default: withCtx(() => [
575
- (openBlock(), createElementBlock(
576
- Fragment,
577
- null,
578
- renderList(ASPECT_RATIO_OPTIONS, (option) => {
579
- return createVNode(_component_el_option, {
580
- key: option.value,
581
- label: option.label,
582
- value: option.value
583
- }, null, 8, ["label", "value"]);
584
- }),
585
- 64
586
- /* STABLE_FRAGMENT */
587
- ))
588
- ]),
589
- _: 1
590
- /* STABLE */
591
- }, 8, ["modelValue"])
592
- ]),
593
- _: 1
594
- /* STABLE */
595
- })
596
- ]),
597
- _: 1
598
- /* STABLE */
599
- }),
600
- createVNode(unref(ElCol), { span: 16 }, {
601
- default: withCtx(() => [
602
- createVNode(unref(ElFormItem), { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
603
- default: withCtx(() => [
604
- createVNode(unref(ElInputNumber), {
605
- modelValue: displayWidth.value,
606
- "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => displayWidth.value = $event),
607
- placeholder: "\u5BBD\u5EA6",
608
- min: props.sizeLimit.width || 100,
609
- onChange: handleSizeChange
610
- }, null, 8, ["modelValue", "min"]),
611
- _cache[9] || (_cache[9] = createElementVNode(
612
- "span",
613
- { style: { "margin": "0 8px" } },
614
- "*",
615
- -1
616
- /* CACHED */
617
- )),
618
- createVNode(unref(ElInputNumber), {
619
- modelValue: displayHeight.value,
620
- "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => displayHeight.value = $event),
621
- placeholder: "\u9AD8\u5EA6",
622
- min: props.sizeLimit.height || 100,
623
- onChange: handleSizeChange
624
- }, null, 8, ["modelValue", "min"])
625
- ]),
626
- _: 1
627
- /* STABLE */
628
- })
629
- ]),
630
- _: 1
631
- /* STABLE */
632
- })
633
- ]),
634
- _: 1
635
- /* STABLE */
636
- })
637
- ]),
638
- _: 1
639
- /* STABLE */
640
- }, 8, ["model"])
641
- ],
642
- 2
643
- /* CLASS */
644
- )
645
- ]),
646
- _: 1
647
- /* STABLE */
648
- }, 8, ["modelValue"])
649
- ],
650
- 2
651
- /* CLASS */
652
- );
653
- };
654
- }
655
- });
656
-
657
- export { _sfc_main as default };