样式和复制功能的权限控制调整

postcss.config.js

@@ -1,18 +1,18 @@
 module.exports = {
   plugins: {
-    'postcss-px-to-viewport': {
-      unitToConvert: 'px', // 要转换的单位
-      viewportWidth: 1920, // 设计稿的视口宽度
-      unitPrecision: 5, // 单位转换后保留的精度
-      propList: ['*'], // 能转换的属性列表
-      viewportUnit: 'vw', // 希望使用的视口单位
-      fontViewportUnit: 'vw', // 字体使用的视口单位
-      selectorBlackList: [], // 需要忽略的CSS选择器
-      minPixelValue: 1, // 设置要替换的最小像素值
-      mediaQuery: false, // 允许在媒体查询中转换px
-      replace: true, // 是否直接替换而不添加备用属性
-      exclude: /node_modules/i, // 排除的文件
-      landscape: false // 是否添加横向媒体查询
-    }
+    // 'postcss-px-to-viewport': {
+    //   unitToConvert: 'px', // 要转换的单位
+    //   viewportWidth: 1920, // 设计稿的视口宽度
+    //   unitPrecision: 5, // 单位转换后保留的精度
+    //   propList: ['*'], // 能转换的属性列表
+    //   viewportUnit: 'vw', // 希望使用的视口单位
+    //   fontViewportUnit: 'vw', // 字体使用的视口单位
+    //   selectorBlackList: [], // 需要忽略的CSS选择器
+    //   minPixelValue: 1, // 设置要替换的最小像素值
+    //   mediaQuery: false, // 允许在媒体查询中转换px
+    //   replace: true, // 是否直接替换而不添加备用属性
+    //   exclude: /node_modules/i, // 排除的文件
+    //   landscape: false // 是否添加横向媒体查询
+    // }
   }
 }

public/static/hugerte/hugerte.css

@@ -0,0 +1,48 @@
+.hugerte-variable{
+  border-radius: 6px;
+  cursor: pointer !important;
+  padding: 0 4px;
+  outline: 2px dashed #006ce788;
+  transition-duration: 200ms;
+  display: inline;
+  width: fit-content;
+  &::before{
+    vertical-align: center;
+    pointer-events: none;
+    transition-duration: 200ms;
+    margin-right: -24px;
+    opacity: 0;
+    line-height: 1.6;
+    content: '变量';
+    font-weight: normal;
+    font-size: 10px;
+    height: fit-content;
+    background: #77B1F2;
+    color: white;
+    padding: 0 3px;
+    border-radius: 4px;
+  }
+  &:hover,&[data-mce-selected]{
+    background: #006ce71a;
+    outline: 2px solid #006ce788 !important;
+    &::before{
+      opacity: 1;
+      margin-right: 2px;
+    }
+  }
+  &.e{
+    outline: 2px dashed #E71B0087;
+    &::before{
+      background: #e82309;
+      content: '失效';
+    }
+    &:hover,&[data-mce-selected]{
+      background: #E71B001a;
+      outline: 2px solid #E71B0087 !important;
+      &::before{
+        opacity: 1;
+        margin-right: 2px;
+      }
+    }
+  }
+}

src/views/audienceManage/index.vue

@@ -256,19 +256,20 @@ export default Vue.extend({
       })
     },
     parseCode(code) {
-      const regex = /\{\{([^}]+)\}\}/g
-      code = code.replace(regex, (match, key) => {
-        const trimmedKey = key.trim()
-        if (Object.prototype.hasOwnProperty.call(this.invitation_data.exhibitorSetting, trimmedKey)) {
-          return this.invitation_data.exhibitorSetting[trimmedKey]
+      const tempDiv = document.createElement('div')
+      tempDiv.innerHTML = code
+      const variableSpans = tempDiv.querySelectorAll('span[data-v].hugerte-variable')
+      variableSpans.forEach(span => {
+        const key = span.getAttribute('data-v')
+        if (key in this.invitation_data.exhibitorSetting) {
+          span.textContent = this.invitation_data.exhibitorSetting[key]
         }
-        if (Object.prototype.hasOwnProperty.call(this.invitation_data.userSetting, trimmedKey)) {
-          return this.invitation_data.userSetting[trimmedKey]
+        if (key in this.invitation_data.userSetting) {
+          span.textContent = this.invitation_data.userSetting[key]
         }
-        return match
       })
-      this.invitation_data.code = code
-      hugerte.activeEditor.setContent(code)
+      this.invitation_data.code = tempDiv.innerHTML
+      hugerte.activeEditor.setContent(tempDiv.innerHTML)
     },
     closeDialog() {
       this.invitation_data.show = false