feat(cmdb-ui):citype show attr && service tree search (#479)

cmdb-ui/src/directive/highlight/highlight.js

@@ -0,0 +1,14 @@
+import './highlight.less'
+
+const highlight = (el, binding) => {
+    if (binding.value.value) {
+        let testValue = `${binding.value.value}`
+        if (['(', ')', '$'].includes(testValue)) {
+            testValue = `\\${testValue}`
+        }
+        const regex = new RegExp(`(${testValue})`, 'gi')
+        el.innerHTML = el.innerText.replace(regex, `<span class='${binding.value.class ?? 'ops-text-highlight'}'>$1</span>`)
+    }
+}
+
+export default highlight

cmdb-ui/src/directive/highlight/highlight.less

@@ -0,0 +1,5 @@
+@import '~@/style/static.less';
+
+.ops-text-highlight {
+  background-color: @primary-color_3;
+}

cmdb-ui/src/directive/highlight/index.js

@@ -0,0 +1,12 @@
+import hightlight from './highlight'
+
+const install = function (Vue) {
+    Vue.directive('hightlight', hightlight)
+}
+
+if (window.Vue) {
+    window.hightlight = hightlight
+    Vue.use(install); // eslint-disable-line
+}
+hightlight.install = install
+export default hightlight

cmdb-ui/src/directive/waves/index.js

@@ -0,0 +1,13 @@
+import waves from './waves'
+
+const install = function (Vue) {
+    Vue.directive('waves', waves)
+}
+
+if (window.Vue) {
+    window.waves = waves
+    Vue.use(install); // eslint-disable-line
+}
+
+waves.install = install
+export default waves

cmdb-ui/src/directive/waves/waves.css

@@ -0,0 +1,26 @@
+.waves-ripple {
+  position: absolute;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-clip: padding-box;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  opacity: 1;
+}
+
+.waves-ripple.z-active {
+  opacity: 0;
+  -webkit-transform: scale(2);
+  -ms-transform: scale(2);
+  transform: scale(2);
+  -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
+  transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
+}

cmdb-ui/src/directive/waves/waves.js

@@ -0,0 +1,72 @@
+import './waves.css'
+
+const context = '@@wavesContext'
+
+function handleClick(el, binding) {
+    function handle(e) {
+        const customOpts = Object.assign({}, binding.value)
+        const opts = Object.assign({
+            ele: el, // 波纹作用元素
+            type: 'hit', // hit 点击位置扩散 center中心点扩展
+            color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
+        },
+            customOpts
+        )
+        const target = opts.ele
+        if (target) {
+            target.style.position = 'relative'
+            target.style.overflow = 'hidden'
+            const rect = target.getBoundingClientRect()
+            let ripple = target.querySelector('.waves-ripple')
+            if (!ripple) {
+                ripple = document.createElement('span')
+                ripple.className = 'waves-ripple'
+                ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
+                target.appendChild(ripple)
+            } else {
+                ripple.className = 'waves-ripple'
+            }
+            switch (opts.type) {
+                case 'center':
+                    ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
+                    ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
+                    break
+                default:
+                    ripple.style.top =
+                        (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
+                            document.body.scrollTop) + 'px'
+                    ripple.style.left =
+                        (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
+                            document.body.scrollLeft) + 'px'
+            }
+            ripple.style.backgroundColor = opts.color
+            ripple.className = 'waves-ripple z-active'
+            return false
+        }
+    }
+
+    if (!el[context]) {
+        el[context] = {
+            removeHandle: handle
+        }
+    } else {
+        el[context].removeHandle = handle
+    }
+
+    return handle
+}
+
+export default {
+    bind(el, binding) {
+        el.addEventListener('click', handleClick(el, binding), false)
+    },
+    update(el, binding) {
+        el.removeEventListener('click', el[context].removeHandle, false)
+        el.addEventListener('click', handleClick(el, binding), false)
+    },
+    unbind(el) {
+        el.removeEventListener('click', el[context].removeHandle, false)
+        el[context] = null
+        delete el[context]
+    }
+}