feat: 新增类型：带遮罩层的图片，对应的schema为：localImg://imageURL-mask_background_image

BREAKING CHANGE: 当前组件的内部使用的u-image默认的图片默认使用图片为fit为fill
vusion · Feb 28, 2024 · fc08711 · fc08711
1 parent 0c14e7e
commit fc08711
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 60 deletions.
diff --git a/packages/cust/cust_community_icon_image/CHANGELOG.md b/packages/cust/cust_community_icon_image/CHANGELOG.md
@@ -0,0 +1,12 @@
+## 1.0.3
+
+Associated Task: [#281455](https://projectmanage.netease-official.lcap.163yun.com/dashboard/TaskDetail?id=2814552607417856)
+
+### ✨Features
+
+- [36a85cb](https://github.com/vusion/cloud-ui-materials/commit/36a85cb81dcdae782038830ad10d1bfb98e5ded5) Thanks [ncqwer](https://github.com/ncqwer) ! - 新增类型：带遮罩层的图片，对应的schema为：localImg://imageURL-mask_background_image
+
+### 🚨BREAKING CHANGES
+
+- [36a85cb](https://github.com/vusion/cloud-ui-materials/commit/36a85cb81dcdae782038830ad10d1bfb98e5ded5) Thanks [ncqwer](https://github.com/ncqwer) ! - 当前组件的内部使用的u-image默认的图片默认使用图片为fit为fill
+
diff --git a/packages/cust/cust_community_icon_image/components/cust-community-icon-image/api.yaml b/packages/cust/cust_community_icon_image/components/cust-community-icon-image/api.yaml
@@ -12,4 +12,11 @@
         group: 主要属性
         brifeDoc: ''
         tooltipLink: ''
+      - name: targetStyle
+        title: 样式属性
+        type: object
+        description: ''
+        group: 主要属性
+        brifeDoc: ''
+        tooltipLink: ''
   slots: false
diff --git a/...cust_community_icon_image/components/cust-community-icon-image/docs/examples.md b/...cust_community_icon_image/components/cust-community-icon-image/docs/examples.md
@@ -4,9 +4,24 @@
 <template>
     <div>
         <u-button @click="flag = !flag">toggle</u-button>
-        <cust-community-icon-image fit="fill" :src="flag ? '//test-lcpapp-static.nos-eastchina1.126.net/assets/cloud-ui/1.jpg' : ''" style="border-radius: 16px"></cust-community-icon-image>
+        <cust-community-icon-image
+            fit="fill"
+            :src="
+                flag
+                    ? 'https://defaulttenant.lcap.codewave-test.163yun.com/public/img/appTemplateImg2.23e7b648.png'
+                    : ''
+            "
+            style="border-radius: 16px; width: 280px"></cust-community-icon-image>
 
-        <cust-community-icon-image fit="fill" style="border-radius: 16px"></cust-community-icon-image>
+        <cust-community-icon-image
+            fit="fill"
+            style="border-radius: 16px; width: 500px"
+            :targetStyle="targetStyle"></cust-community-icon-image>
+
+        <div>
+            <img src="https://defaulttenant.lcap.codewave-test.163yun.com/public/img/appTemplateImg2.23e7b648.png"></img>
+            <input type="color"/>
+        </div>
     </div>
 </template>
 
@@ -15,6 +30,11 @@ export default {
     data() {
         return {
             flag: true,
+            targetStyle: {
+                imgWithMask: {
+                    width: '256px',
+                },
+            },
         };
     },
 };

diff --git a/...s/cust/cust_community_icon_image/components/cust-community-icon-image/image-with-mask.vue b/...s/cust/cust_community_icon_image/components/cust-community-icon-image/image-with-mask.vue
@@ -0,0 +1,56 @@
+<template>
+    <div :class="$style.root">
+        <u-image :src="img" fit="fill"></u-image>
+        <div v-if="maskStyle" :class="$style.mask" :style="maskStyle"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'custom-community-icon-with-mask',
+    props: {
+        img: {
+            type: String,
+            default: undefined,
+        },
+        mask: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        maskStyle() {
+            console.log(this.$attrs);
+            if (!this.mask) return null;
+            return {
+                'background-image': this.mask,
+            };
+        },
+    },
+};
+</script>
+
+<style module>
+.root {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    width: var(--image-width);
+    height: var(--image-height);
+    color: #fff;
+}
+
+.root [class^='u-image__'] {
+    width: 100%;
+    height: 100%;
+}
+
+.mask {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+</style>
diff --git a/packages/cust/cust_community_icon_image/components/cust-community-icon-image/index.vue b/packages/cust/cust_community_icon_image/components/cust-community-icon-image/index.vue
@@ -1,50 +1,50 @@
 <template>
-	<div :class="$style.root" :style="rootStyle">
-		<svg aria-hidden="true" :class="$style.icon"><use :xlink:href="iconName"></use></svg>
-	</div>
+    <div :class="$style.root" :style="rootStyle">
+        <svg aria-hidden="true" :class="$style.icon">
+            <use :xlink:href="iconName"></use>
+        </svg>
+    </div>
 </template>
 
 <script>
 export default {
-	name: 'custom-community-icon',
-	props: {
-		backgroundImg: {
-			type: String,
-			default: undefined,
-		},
-		icon: {
-			type: String,
-			default: 'youjian',
-		}
-	},
-	computed: {
-		iconName(){
-			return `#others-${this.icon}`;
-		},
-		rootStyle(){
-			return {
-				'background-image': this.backgroundImg,
-			};
-		}
-	}
+    name: 'custom-community-icon',
+    props: {
+        backgroundImg: {
+            type: String,
+            default: undefined,
+        },
+        icon: {
+            type: String,
+            default: 'youjian',
+        },
+    },
+    computed: {
+        iconName() {
+            return `#others-${this.icon}`;
+        },
+        rootStyle() {
+            return {
+                'background-image': this.backgroundImg,
+            };
+        },
+    },
 };
-
 </script>
 
 <style module>
-.root{
-	position: relative;
-	display: inline-block;
-	overflow: hidden;
-	width: var(--image-width);
-	height: var(--image-height);
-	color: #fff;
+.root {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    width: var(--image-width);
+    height: var(--image-height);
+    color: #fff;
 }
 
-.icon{
-	width: 100%;
-	height: 100%;
-	fill: currentColor;
+.icon {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
 }
-
-</style>
+</style>
diff --git a/packages/cust/cust_community_icon_image/components/cust-community-icon-image/wrap.js b/packages/cust/cust_community_icon_image/components/cust-community-icon-image/wrap.js
@@ -1,40 +1,77 @@
 import CustCommunityIconImage from './index.vue';
+import CustCommunityIconImageWithMask from './image-with-mask.vue';
 
-const REG = /^local:\/\/(\S+)~(.+)$/;
+const REG = /^(local(?:Img)?):\/\/(\S+)~(.+)$/;
 export default {
     name: 'cust-community-icon-image',
-    inheritAttrs: false,
 
     props: {
         src: {
             type: String,
-            default: 'local://wenjianjia~linear-gradient(317deg, #89B1FF 3%, #8FD7FF 100%)',
+            default:
+                'localImg:////test-lcpapp-static.nos-eastchina1.126.net/assets/cloud-ui/1.jpg~linear-gradient(90deg, #5B96CC -2%, rgba(91, 150, 204, 0) 120%)',
+        },
+        targetStyle: {
+            type: Object,
+            default: () => ({}),
         },
     },
     render(createElement) {
-        const src = this.src || 'local://wenjianjia~linear-gradient(317deg, #89B1FF 3%, #8FD7FF 100%)';
+        const src =
+            this.src ||
+            'local://wenjianjia~linear-gradient(317deg, #89B1FF 3%, #8FD7FF 100%)';
         const isLocalIconResult = REG.exec(src);
+        // console.log('🚀 ~ file: wrap.js:24 ~ render ~ src:', src);
         if (isLocalIconResult) {
-            return createElement(CustCommunityIconImage, {
-                props: Object.assign({}, this.$attrs, { backgroundImg: isLocalIconResult[2], icon: isLocalIconResult[1] }),
-                attrs: {
-                    'vusion-node-tag': this.$attrs['vusion-node-tag'],
-                    'vusion-node-path': this.$attrs['vusion-node-path'],
-                },
-                on: this.$listeners,
-                slots: this.$slots,
-                scopedSlots: this.$scopedSlots,
-            });
+            const protocol = isLocalIconResult[1];
+            if (protocol === 'local')
+                return createElement(CustCommunityIconImage, {
+                    props: Object.assign({}, this.$attrs, {
+                        icon: isLocalIconResult[2],
+                        backgroundImg: isLocalIconResult[3],
+                    }),
+                    attrs: {
+                        'vusion-node-tag': this.$attrs['vusion-node-tag'],
+                        'vusion-node-path': this.$attrs['vusion-node-path'],
+                    },
+                    on: this.$listeners,
+                    slots: this.$slots,
+                    scopedSlots: this.$scopedSlots,
+                    style: this.targetStyle.icon,
+                });
+            if (protocol === 'localImg') {
+                return createElement(CustCommunityIconImageWithMask, {
+                    props: Object.assign({ fill: 'hsj' }, this.$attrs, {
+                        img: `${isLocalIconResult[2]}`,
+                        mask: isLocalIconResult[3],
+                    }),
+                    attrs: {
+                        'vusion-node-tag': this.$attrs['vusion-node-tag'],
+                        'vusion-node-path': this.$attrs['vusion-node-path'],
+                    },
+                    on: this.$listeners,
+                    slots: this.$slots,
+                    scopedSlots: this.$scopedSlots,
+                    style: this.targetStyle.imgWithMask,
+                });
+            }
         }
         return createElement('u-image', {
-            props: Object.assign({}, this.$attrs, { src: this.src }),
+            props: Object.assign({}, this.$attrs, {
+                src: this.src,
+                fit: 'fill',
+            }),
+            style: {
+                width: '100%',
+            },
             attrs: {
                 'vusion-node-tag': this.$attrs['vusion-node-tag'],
                 'vusion-node-path': this.$attrs['vusion-node-path'],
             },
             on: this.$listeners,
             slots: this.$slots,
             scopedSlots: this.$scopedSlots,
+            style: this.targetStyle.img,
         });
     },
 };
diff --git a/packages/cust/cust_community_icon_image/manifest b/packages/cust/cust_community_icon_image/manifest
@@ -1,6 +1,6 @@
 Plugin-Version: 1.0.0
 Library-Type: Frontend
 Metadata-File: usage.json
-packages/extension/[email protected].0/dist-theme/demo.html: dist-theme/demo.html
-packages/extension/[email protected].0/dist-theme/index.js: dist-theme/index.js
-packages/extension/[email protected].0/dist-theme/index.js.map: dist-theme/index.js.map
+packages/extension/[email protected].3/dist-theme/demo.html: dist-theme/demo.html
+packages/extension/[email protected].3/dist-theme/index.js: dist-theme/index.js
+packages/extension/[email protected].3/dist-theme/index.js.map: dist-theme/index.js.map
diff --git a/packages/cust/cust_community_icon_image/package.json b/packages/cust/cust_community_icon_image/package.json
@@ -2,7 +2,7 @@
   "name": "cust_community_icon_image",
   "title": "社区图标图片",
   "description": "",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "./index.js",
   "author": "",
   "repository": "",
@@ -20,7 +20,6 @@
     "build": "npm run build:theme",
     "usage": "lcap usage",
     "deploy": "lcap deploy dist-theme",
-    "prepublishOnly": "lcap publish",
     "release": "lcap publish"
   },
   "vuePlugins": {},

diff --git a/packages/cw/cw_echarts_library/CHANGELOG.md b/packages/cw/cw_echarts_library/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 1.0.4
+
+Associated Task: [#281100](https://projectmanage.netease-official.lcap.163yun.com/dashboard/TaskDetail?id=2811004089143552)
+
+### ✨Features
+
+- [1c8df31](https://github.com/vusion/cloud-ui-materials/commit/1c8df31965da7537a3a409caad5937f591984d64) Thanks [ncqwer](https://github.com/ncqwer) ! - 变更其它依赖库
+