@cmstops/pro-compo 3.9.1-stable.0 → 3.9.1-stable.2

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 (44) hide show
  1. package/dist/index.css +49 -4
  2. package/dist/index.min.css +1 -1
  3. package/es/config.js +1 -1
  4. package/es/contentDetailList/component.js +24 -0
  5. package/es/contentDetailList/components/Content/index.js +2 -1
  6. package/es/contentDetailList/components/Doc/index.js +6 -0
  7. package/es/docHistory/component.js +41 -12
  8. package/es/docHistory/style/index.css +4 -0
  9. package/es/docHistory/style/index.less +5 -0
  10. package/es/hooks/usePopper.d.ts +1 -1
  11. package/es/hooks/usePopper.js +3 -3
  12. package/es/hooks/useUpload.d.ts +50 -2
  13. package/es/hooks/useUpload.js +43 -4
  14. package/es/index.css +49 -4
  15. package/es/selectResourceModal/__demo__/module/DivWrapper.d.ts +268 -0
  16. package/es/selectResourceModal/__demo__/module/basic.d.ts +299 -0
  17. package/es/selectResourceModal/components/List/ListLocal/index.js +8 -3
  18. package/es/selectResourceModal/components/List/ListNormal/Filter.js +198 -90
  19. package/es/selectResourceModal/components/List/ListNormal/index.js +23 -7
  20. package/es/selectResourceModal/hooks/useResponsiveFilter.d.ts +21 -0
  21. package/es/selectResourceModal/hooks/useResponsiveFilter.js +142 -0
  22. package/es/selectResourceModal/style/index.css +45 -4
  23. package/es/selectResourceModal/style/index.less +14 -0
  24. package/es/selectResourceModal/style/list.less +40 -4
  25. package/es/utils/index.js +6 -6
  26. package/lib/config.js +1 -1
  27. package/lib/contentDetailList/component.js +24 -0
  28. package/lib/contentDetailList/components/Content/index.js +2 -1
  29. package/lib/contentDetailList/components/Doc/index.js +6 -0
  30. package/lib/docHistory/component.js +39 -10
  31. package/lib/docHistory/style/index.css +4 -0
  32. package/lib/docHistory/style/index.less +5 -0
  33. package/lib/hooks/usePopper.js +3 -3
  34. package/lib/hooks/useUpload.js +43 -3
  35. package/lib/index.css +49 -4
  36. package/lib/selectResourceModal/components/List/ListLocal/index.js +6 -1
  37. package/lib/selectResourceModal/components/List/ListNormal/Filter.js +195 -87
  38. package/lib/selectResourceModal/components/List/ListNormal/index.js +22 -6
  39. package/lib/selectResourceModal/hooks/useResponsiveFilter.js +144 -0
  40. package/lib/selectResourceModal/style/index.css +45 -4
  41. package/lib/selectResourceModal/style/index.less +14 -0
  42. package/lib/selectResourceModal/style/list.less +40 -4
  43. package/lib/utils/index.js +6 -6
  44. package/package.json +1 -1
@@ -104,6 +104,12 @@ const _sfc_main = defineComponent({
104
104
  onCellMouseEnter: tableCellMouseEnter,
105
105
  onCellMouseLeave: tableCellMouseLeave
106
106
  }, {
107
+ "after-index": withCtx(() => [
108
+ renderSlot(_ctx.$slots, "after-index", {
109
+ row: element,
110
+ index
111
+ })
112
+ ]),
107
113
  batch: withCtx(() => [
108
114
  renderSlot(_ctx.$slots, "batch", {
109
115
  row: element,
@@ -128,6 +134,12 @@ const _sfc_main = defineComponent({
128
134
  onCellMouseEnter: tableCellMouseEnter,
129
135
  onCellMouseLeave: tableCellMouseLeave
130
136
  }, {
137
+ "after-index": withCtx(() => [
138
+ renderSlot(_ctx.$slots, "after-index", {
139
+ row: element,
140
+ index
141
+ })
142
+ ]),
131
143
  tip: withCtx(() => [
132
144
  renderSlot(_ctx.$slots, "tip", {
133
145
  row: element,
@@ -224,6 +236,12 @@ const _sfc_main = defineComponent({
224
236
  onCellMouseEnter: tableCellMouseEnter,
225
237
  onCellMouseLeave: tableCellMouseLeave
226
238
  }, {
239
+ "after-index": withCtx(() => [
240
+ renderSlot(_ctx.$slots, "after-index", {
241
+ row: item,
242
+ index
243
+ })
244
+ ]),
227
245
  batch: withCtx(() => [
228
246
  renderSlot(_ctx.$slots, "batch", {
229
247
  row: item,
@@ -248,6 +266,12 @@ const _sfc_main = defineComponent({
248
266
  onCellMouseEnter: tableCellMouseEnter,
249
267
  onCellMouseLeave: tableCellMouseLeave
250
268
  }, {
269
+ "after-index": withCtx(() => [
270
+ renderSlot(_ctx.$slots, "after-index", {
271
+ row: item,
272
+ index
273
+ })
274
+ ]),
251
275
  tip: withCtx(() => [
252
276
  renderSlot(_ctx.$slots, "tip", {
253
277
  row: item,
@@ -142,7 +142,8 @@ const _sfc_main = defineComponent({
142
142
  })
143
143
  ]),
144
144
  index: withCtx(() => [
145
- createElementVNode("span", _hoisted_1, toDisplayString(_ctx.index + 1), 1)
145
+ createElementVNode("span", _hoisted_1, toDisplayString(_ctx.index + 1), 1),
146
+ renderSlot(_ctx.$slots, "after-index")
146
147
  ]),
147
148
  tip: withCtx(() => [
148
149
  createCommentVNode(" \u5148\u6DFB\u52A0\u6587\u4EF6\u8D44\u6E90\uFF0C\u672A\u53D1\u5E03 "),
@@ -37,6 +37,12 @@ const _sfc_main = defineComponent({
37
37
  index: _ctx.index
38
38
  })
39
39
  ]),
40
+ "after-index": withCtx(() => [
41
+ renderSlot(_ctx.$slots, "after-index", {
42
+ row: _ctx.element,
43
+ index: _ctx.index
44
+ })
45
+ ]),
40
46
  batch: withCtx(() => [
41
47
  renderSlot(_ctx.$slots, "batch", {
42
48
  row: _ctx.item,
@@ -1,5 +1,5 @@
1
- import { defineComponent, computed, watch, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createTextVNode, createElementVNode, createElementBlock, Fragment, createCommentVNode } from "vue";
2
- import { Drawer, Button, Spin, Scrollbar } from "@arco-design/web-vue";
1
+ import { defineComponent, computed, watch, onMounted, openBlock, createBlock, resolveDynamicComponent, mergeProps, withCtx, createVNode, unref, createTextVNode, createElementVNode, createElementBlock, Fragment, createCommentVNode } from "vue";
2
+ import { Button, Spin, Scrollbar, Drawer, Modal } from "@arco-design/web-vue";
3
3
  import { DEFAULT_BASE_API } from "../config.js";
4
4
  import { useDocHistory } from "./scripts/useDocHistory.js";
5
5
  import _sfc_main$2 from "./components/DocHistoryList/index.js";
@@ -13,9 +13,11 @@ const _sfc_main = defineComponent({
13
13
  __name: "component",
14
14
  props: {
15
15
  BASE_API: {},
16
+ wrap: { default: "drawer" },
16
17
  visible: { type: Boolean },
17
18
  docInfo: {},
18
- pub: { type: Boolean }
19
+ pub: { type: Boolean },
20
+ currentIdx: {}
19
21
  },
20
22
  emits: ["update:visible", "select"],
21
23
  setup(__props, { emit: __emit }) {
@@ -27,6 +29,20 @@ const _sfc_main = defineComponent({
27
29
  emits("update:visible", val);
28
30
  }
29
31
  });
32
+ const wrapProps = computed(() => {
33
+ if (props.wrap === "drawer") {
34
+ return {
35
+ class: "doc-history-drawer-wrap",
36
+ title: "\u7248\u672C\u8BB0\u5F55",
37
+ width: 1e3
38
+ };
39
+ }
40
+ return {
41
+ bodyClass: "doc-history-modal-wrap",
42
+ title: "\u7248\u672C\u8BB0\u5F55",
43
+ width: 1e3
44
+ };
45
+ });
30
46
  const BASE_API = props.BASE_API || DEFAULT_BASE_API;
31
47
  const {
32
48
  initParams,
@@ -37,6 +53,10 @@ const _sfc_main = defineComponent({
37
53
  list,
38
54
  current
39
55
  } = useDocHistory(BASE_API);
56
+ const wrapComponent = {
57
+ drawer: Drawer,
58
+ modal: Modal
59
+ };
40
60
  function handeRevert() {
41
61
  emits("select", list.value[current.value]);
42
62
  }
@@ -49,20 +69,29 @@ const _sfc_main = defineComponent({
49
69
  },
50
70
  { immediate: true }
51
71
  );
52
- onMounted(() => {
72
+ watch(
73
+ () => props.currentIdx,
74
+ (val) => {
75
+ if (val) {
76
+ handleSelect(val);
77
+ }
78
+ },
79
+ { immediate: true }
80
+ );
81
+ onMounted(async () => {
53
82
  if (!props.docInfo)
54
83
  return;
55
84
  initParams(props.docInfo.id, props.pub);
56
- loadData();
85
+ await loadData();
86
+ if (props.currentIdx) {
87
+ handleSelect(props.currentIdx);
88
+ }
57
89
  });
58
90
  return (_ctx, _cache) => {
59
- return openBlock(), createBlock(unref(Drawer), {
91
+ return openBlock(), createBlock(resolveDynamicComponent(wrapComponent[_ctx.wrap]), mergeProps({
60
92
  visible: vis.value,
61
- "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => vis.value = $event),
62
- class: "doc-history-drawer",
63
- title: "\u7248\u672C\u8BB0\u5F55",
64
- width: 1e3
65
- }, {
93
+ "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => vis.value = $event)
94
+ }, wrapProps.value), {
66
95
  footer: withCtx(() => [
67
96
  createVNode(unref(Button), {
68
97
  type: "primary",
@@ -123,7 +152,7 @@ const _sfc_main = defineComponent({
123
152
  ])
124
153
  ]),
125
154
  _: 1
126
- }, 8, ["visible"]);
155
+ }, 16, ["visible"]);
127
156
  };
128
157
  }
129
158
  });
@@ -105,3 +105,7 @@
105
105
  .doc-history-drawer .arco-drawer-footer {
106
106
  text-align: left;
107
107
  }
108
+ .doc-history-modal-wrap {
109
+ height: 70vh;
110
+ padding: 0;
111
+ }
@@ -30,3 +30,8 @@
30
30
  text-align: left;
31
31
  }
32
32
  }
33
+
34
+ .doc-history-modal-wrap {
35
+ height: 70vh;
36
+ padding: 0;
37
+ }
@@ -1,7 +1,7 @@
1
1
  import { Placement } from '@popperjs/core';
2
2
  import { Ref } from 'vue';
3
3
  export default function usePopper(pannel: Ref<HTMLElement | undefined>, triggerEl: Ref<HTMLElement | undefined>): {
4
- initPopper: (placement?: Placement) => void;
4
+ initPopper: (placement?: Placement, of?: number[] | undefined) => void;
5
5
  show: () => void;
6
6
  hide: () => void;
7
7
  visible: Ref<boolean, boolean>;
@@ -8,16 +8,16 @@ function usePopper(pannel, triggerEl) {
8
8
  };
9
9
  const show = () => {
10
10
  visible.value = true;
11
- window.onclick = (e) => {
11
+ window.onclick = () => {
12
12
  hide();
13
13
  visible.value = false;
14
14
  window.onclick = null;
15
15
  };
16
16
  };
17
- const initPopper = (placement = "bottom-start") => {
17
+ const initPopper = (placement = "bottom-start", of) => {
18
18
  if (!pannel.value || !triggerEl.value)
19
19
  return;
20
- const offset = [0, 10];
20
+ const offset = of != null ? of : [0, 10];
21
21
  if (window.__POWERED_BY_WUJIE__) {
22
22
  offset[1] = -54;
23
23
  }
@@ -7,24 +7,72 @@ export declare type TypeAddMediaParam = {
7
7
  directory_id: number;
8
8
  size: number;
9
9
  };
10
+ declare type WaterMark = {
11
+ id: string;
12
+ position: string;
13
+ url: string;
14
+ title: string;
15
+ };
16
+ declare type UploadTemplate = {
17
+ watermark?: {
18
+ default?: WaterMark;
19
+ images: WaterMark[];
20
+ };
21
+ };
10
22
  export declare function getSize(value: number): string;
11
23
  export declare function addMedia(BASE_API: string, params: TypeAddMediaParam): Promise<import("axios").AxiosResponse<any, any>>;
12
24
  export declare function getMediaDetails(BASE_API: string, repoId: number, id: number): Promise<import("axios").AxiosResponse<any, any>>;
13
25
  export declare function reTranscodeMedia(BASE_API: string, media_id: number): Promise<import("axios").AxiosResponse<any, any>>;
14
26
  declare type UploadOptions = {
15
- noAddMedia: boolean;
27
+ noAddMedia?: boolean;
28
+ };
29
+ declare type UploadFileOptions = {
30
+ template?: UploadTemplate;
16
31
  };
17
32
  export default function useUpload(options?: UploadOptions): {
18
33
  list: import("vue").Ref<any[], any[]>;
19
- uploadFile: (BASE_API: string, file: any, dir: number | undefined, repoId: number, callback?: CallbackFunc | undefined) => void;
34
+ uploadFile: (BASE_API: string, file: any, dir: number | undefined, repoId: number, callback?: CallbackFunc | undefined, upOptions?: UploadFileOptions | undefined) => void;
20
35
  reTranscode: (BASE_API: string, file: any) => Promise<boolean>;
21
36
  transcodingFile: (BASE_API: string, file: any, repoId: number) => void;
22
37
  recordTaskStatusChange: (file: any, progress: number, isTrans?: boolean | undefined) => void;
23
38
  removeRecord: (file: any) => void;
24
39
  };
40
+ export declare function getWatermarkTemplate(BASE_API: string): Promise<import("axios").AxiosResponse<any, any>>;
25
41
  export declare function useUploadConfig(): {
26
42
  config: import("vue").Ref<any, any>;
43
+ template: import("vue").Ref<{
44
+ watermark?: {
45
+ default?: {
46
+ id: string;
47
+ position: string;
48
+ url: string;
49
+ title: string;
50
+ } | undefined;
51
+ images: {
52
+ id: string;
53
+ position: string;
54
+ url: string;
55
+ title: string;
56
+ }[];
57
+ } | undefined;
58
+ }, UploadTemplate | {
59
+ watermark?: {
60
+ default?: {
61
+ id: string;
62
+ position: string;
63
+ url: string;
64
+ title: string;
65
+ } | undefined;
66
+ images: {
67
+ id: string;
68
+ position: string;
69
+ url: string;
70
+ title: string;
71
+ }[];
72
+ } | undefined;
73
+ }>;
27
74
  checkFileSizeOutLimit: (file: File, callback: (msg: string) => void) => boolean;
28
75
  initUploadConfig: (BASE_API: string, domainId: number) => Promise<void>;
76
+ initTemplate: (BASE_API: string) => Promise<void>;
29
77
  };
30
78
  export {};
@@ -73,7 +73,7 @@ function useUpload(options) {
73
73
  list.value = originList;
74
74
  }
75
75
  };
76
- const uploadFile = (BASE_API, file, dir = 0, repoId, callback) => {
76
+ const uploadFile = (BASE_API, file, dir = 0, repoId, callback, upOptions) => {
77
77
  const newFile = {
78
78
  id: file.id || generateUUID(),
79
79
  sig_id: file.sig_id || generateUUID(),
@@ -93,18 +93,24 @@ function useUpload(options) {
93
93
  };
94
94
  const uploading = upload.start(progress);
95
95
  uploading.then(async (url) => {
96
+ var _a;
96
97
  if (options == null ? void 0 : options.noAddMedia) {
97
98
  recordTaskStatusChange({ ...newFile, status: 0, url }, 1);
98
99
  callback && callback({ ...newFile, url }, "success");
99
100
  return;
100
101
  }
102
+ const params = {};
103
+ if ((_a = upOptions == null ? void 0 : upOptions.template) == null ? void 0 : _a.watermark) {
104
+ params.watermark = upOptions.template.watermark.default;
105
+ }
101
106
  const { code, message } = await addMedia(BASE_API, {
102
107
  url,
103
108
  size: newFile.size,
104
109
  directory_id: dir,
105
110
  repository_id: repoId,
106
111
  catalog: newFile.type,
107
- alias: newFile.name
112
+ alias: newFile.name,
113
+ ...params
108
114
  });
109
115
  if (code !== 0) {
110
116
  console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", newFile.name, code, message);
@@ -194,9 +200,16 @@ function getConfiguration(BASE_API, params) {
194
200
  params
195
201
  });
196
202
  }
203
+ function getWatermarkTemplate(BASE_API) {
204
+ return request(BASE_API, {
205
+ url: `/poplar/v2/material/image/watermark`,
206
+ method: "get"
207
+ });
208
+ }
197
209
  function useUploadConfig() {
198
210
  const { get, set, remove } = useLocalstorage("LOCAL_UPLOAD_CONFIG");
199
211
  const config = ref(get() || {});
212
+ const template = ref({});
200
213
  async function initUploadConfig(BASE_API, domainId) {
201
214
  if (config.value.size_config_enabled != null)
202
215
  return;
@@ -245,11 +258,37 @@ function useUploadConfig() {
245
258
  );
246
259
  return false;
247
260
  }
261
+ async function initTemplate(BASE_API) {
262
+ try {
263
+ const { code, message } = await getWatermarkTemplate(BASE_API);
264
+ if (code !== 0)
265
+ return;
266
+ if (message) {
267
+ let defaultWaterMark;
268
+ if (Array.isArray(message.images)) {
269
+ message.images.forEach((item) => {
270
+ if (message.default === item.id)
271
+ defaultWaterMark = item;
272
+ });
273
+ }
274
+ template.value = {
275
+ watermark: {
276
+ default: defaultWaterMark,
277
+ images: message.images
278
+ }
279
+ };
280
+ }
281
+ } catch (e) {
282
+ console.error(e);
283
+ }
284
+ }
248
285
  window.addEventListener("beforeunload", remove, false);
249
286
  return {
250
287
  config,
288
+ template,
251
289
  checkFileSizeOutLimit,
252
- initUploadConfig
290
+ initUploadConfig,
291
+ initTemplate
253
292
  };
254
293
  }
255
- export { addMedia, useUpload as default, getMediaDetails, getSize, reTranscodeMedia, useUploadConfig };
294
+ export { addMedia, useUpload as default, getMediaDetails, getSize, getWatermarkTemplate, reTranscodeMedia, useUploadConfig };
package/es/index.css CHANGED
@@ -4529,11 +4529,13 @@
4529
4529
  }
4530
4530
  .resource-list-footer,
4531
4531
  .resource-list-header,
4532
+ .resource-list-content .resource-list-content-empty,
4532
4533
  .resource-list-content .arco-scrollbar-container {
4533
4534
  padding: 0 40px;
4534
4535
  }
4535
4536
  .resource-list-footer {
4536
4537
  display: flex;
4538
+ flex-wrap: wrap;
4537
4539
  justify-content: space-between;
4538
4540
  padding-bottom: 20px;
4539
4541
  }
@@ -4543,6 +4545,10 @@
4543
4545
  gap: 10px;
4544
4546
  align-items: center;
4545
4547
  justify-content: flex-end;
4548
+ margin-top: 10px;
4549
+ }
4550
+ .resource-list-footer .footer-right .list-selected-wrapper {
4551
+ font-size: 12px;
4546
4552
  }
4547
4553
  .resource-list-content-loading {
4548
4554
  display: flex;
@@ -4554,7 +4560,7 @@
4554
4560
  .resource-list .list-item-grid {
4555
4561
  display: grid;
4556
4562
  grid-gap: 20px;
4557
- grid-template-columns: repeat(5, 1fr);
4563
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
4558
4564
  }
4559
4565
  .resource-list .list-content {
4560
4566
  margin-top: 30px;
@@ -4597,7 +4603,8 @@
4597
4603
  }
4598
4604
  .resource-list .list-filter-wrapper .list-filter-tags {
4599
4605
  display: flex;
4600
- justify-content: space-between;
4606
+ flex-wrap: wrap;
4607
+ gap: 10px;
4601
4608
  margin-top: 10px;
4602
4609
  }
4603
4610
  .resource-list .list-filter-wrapper .list-filter-tags .list-filter-tag {
@@ -4618,16 +4625,41 @@
4618
4625
  justify-content: space-between;
4619
4626
  }
4620
4627
  .resource-list .list-filter-wrapper .list-filter .filter-list {
4628
+ position: relative;
4629
+ /** 给 popup 一个参考 */
4621
4630
  display: flex;
4622
- flex-wrap: wrap;
4623
- gap: 10px;
4624
4631
  }
4625
4632
  .resource-list .list-filter-wrapper .list-filter .filter-list .filter-item {
4626
4633
  width: 100px;
4634
+ margin-right: 10px;
4635
+ }
4636
+ .resource-list .list-filter-wrapper .list-filter .filter-list .arco-trigger-popup {
4637
+ z-index: 100000 !important;
4627
4638
  }
4628
4639
  .resource-list .list-filter-wrapper .list-filter .arco-input-prepend {
4629
4640
  padding: 0;
4630
4641
  }
4642
+ .resource-list .list-filter-wrapper .list-filter .more-btn {
4643
+ position: relative;
4644
+ /** 给 poperjs 一个参考 */
4645
+ }
4646
+ .resource-list .list-filter-wrapper .list-filter .more-btn .filter-pannel {
4647
+ inset: 40px auto auto auto !important;
4648
+ }
4649
+ .resource-list .list-filter-wrapper .filter-extra {
4650
+ display: flex;
4651
+ gap: 10px;
4652
+ }
4653
+ .resource-list .list-filter-wrapper .filter-pannel {
4654
+ z-index: 100000;
4655
+ display: flex;
4656
+ flex-direction: column;
4657
+ gap: 10px;
4658
+ padding: 10px;
4659
+ background-color: #fff;
4660
+ border-radius: 4px;
4661
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4662
+ }
4631
4663
  .resource-list .title {
4632
4664
  display: flex;
4633
4665
  gap: 8px;
@@ -4641,6 +4673,10 @@
4641
4673
  height: 16px;
4642
4674
  background-color: #4886ff;
4643
4675
  }
4676
+ .resource-select-wrap {
4677
+ width: 100%;
4678
+ height: 100%;
4679
+ }
4644
4680
  .resource-select-modal-body {
4645
4681
  height: 80vh;
4646
4682
  padding: 0;
@@ -4669,6 +4705,11 @@
4669
4705
  .resource-select-container .resource-select-header .arco-tabs-content {
4670
4706
  display: none !important;
4671
4707
  }
4708
+ .resource-select-container .resource-list-content .resource-list-content-empty {
4709
+ box-sizing: border-box;
4710
+ width: 100%;
4711
+ height: 100%;
4712
+ }
4672
4713
  .iframe-container {
4673
4714
  position: relative;
4674
4715
  height: 95vh;
@@ -4925,6 +4966,10 @@
4925
4966
  .doc-history-drawer .arco-drawer-footer {
4926
4967
  text-align: left;
4927
4968
  }
4969
+ .doc-history-modal-wrap {
4970
+ height: 70vh;
4971
+ padding: 0;
4972
+ }
4928
4973
  .video-thumb {
4929
4974
  display: flex;
4930
4975
  flex-direction: column;