feat:confilct

src/services/defaults.ts

@@ -2,7 +2,10 @@ import { Pen, FormItem } from '@meta2d/core';
 import { cdn } from './api';
 import i18n from '../i18n';
 const $t = i18n.global.t;
-const getRootDomain = ()=>{ 
+import { styleMap } from './filter'
+
+// export const isDownload = import.meta.env.BASE_URL === '/v/'; //是否是安装包版本
+export const getRootDomain = ()=>{ 
   const a =location.host.split('.');
   return `.${a[a.length-2]}.${a[a.length-1]}`
 };
@@ -4388,7 +4391,7 @@ context.meta2d.translate(
           } 
         },
       },
-      {
+       {
         name: '日期-日',
         icon: 'l-riqi--ri',
         data: {

src/services/download.ts

@@ -51,7 +51,11 @@ const components = [
   'airSwitch',
   'waterTank',
   'tablePlus',
-  'tank'
+  'tank',
+  'treeFilterDom',
+  'datePickerDom',
+  'dateRangePickerDom',
+  'cascadeFilterDom',
 ];
 
 export const getDownloadList = (meta2dData: any, path: string = 'v') => {

src/services/filter.ts

@@ -0,0 +1,77 @@
+const treeStyleTpl = `
+/* 全局样式-!important请谨慎使用，优先增加选择器的权重 */
+/* 面板尺寸 背景颜色，宽度，高度*/
+        [class^="l-select__dropdown-inner_"]{
+            /* width: 560px !important; */
+            /*  height: 300px !important; */
+          }
+          /* 勾选的样式，颜色 */
+        .l_tree_lable.l-is-checked .l-checkbox__input {
+          /*  border-color: green !important; */
+          /*  background-color: green !important; */
+      }
+
+/* 单个样式-请使用id唯一选择器来限制,应用到当前图元*/
+  /* 
+    #0b8ec2f .[这里请使用具体的class]{
+    background-color: red !important;
+   }
+   */
+`
+const cascadeStyleTpl = `
+/* 全局样式-!important请谨慎使用，优先增加选择器的权重 */
+/* 面板尺寸 背景颜色，宽度，高度*/
+        [class^="l-cascade-dropdown-"]{
+            /* width: 560px !important;*/
+            /* height:300px !important;*/
+          }
+        /* 勾选的样式，颜色 */
+        .l-cascader-checkbox.l-is-checked .l-cascader-checkbox-input {
+            /* border-color: green !important;*/
+            /* background-color: green !important;*/
+        }
+
+        /* 单个样式 请使用id唯一选择器来限制，应用到当前图元*/
+  /* 
+    #0b8ec2f .[这里请使用具体的class]{
+    background-color: red !important;
+   }
+   */
+`
+const dateStyleTpl = `
+/* 面板尺寸 背景颜色，宽度，高度*/
+        [class^="l-date-picker__panel_"]{
+            /* width: 560px !important;*/
+            /* height:300px !important;*/
+          }
+    
+
+  /* 单个样式 请使用id唯一选择器来限制，应用到当前图元*/
+  /* 
+    #0b8ec2f .[这里请使用具体的class]{
+    background-color: red !important;
+   }
+   */
+`
+const dateRangeTpl = `
+/* 面板尺寸 背景颜色，宽度，高度*/
+        [class^="l-date-range-picker__panel_"]{
+            /* width: 560px !important;*/
+            /* height:300px !important;*/
+          }
+        /* 勾选的样式，颜色 */
+
+  /* 单个样式 请使用id唯一选择器来限制，应用到当前图元*/
+  /* 
+    #0b8ec2f .[这里请使用具体的class]{
+    background-color: red !important;
+   }
+   */
+`
+export const styleMap = {
+  treeFilterDom: treeStyleTpl,
+  cascadeFilterDom: cascadeStyleTpl,
+  datePickerDom: dateStyleTpl,
+  dateRangePickerDom: dateRangeTpl,
+}
+export const filterShapes = ['treeFilterDom', 'cascadeFilterDom', 'datePickerDom', 'dateRangePickerDom'];

src/views/components/Custom.vue

@@ -232,8 +232,8 @@
       <CodeEditor
         style="height: 100%"
         :key="drawer.randomkey"
-        :json="true"
-        :language="'json'"
+        :json="drawer.language === 'json'"
+        :language="drawer.language"
         v-model="drawer.value"
       />
     </div>
@@ -244,7 +244,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import { reactive, defineComponent, ref, onMounted, onUnmounted, toRaw } from 'vue';
 import {
   getter,
   setter,
@@ -260,13 +260,16 @@ import { MessagePlugin } from 'tdesign-vue-next';
 import { s8 } from '@/services/random';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { ChevronLeftDoubleIcon, FormatVerticalAlignLeftIcon, FormatVerticalAlignCenterIcon, FormatVerticalAlignRightIcon } from 'tdesign-icons-vue-next';
-
+import { filterShapes } from '../../services/filter'
 const props = defineProps<{
   pen: any;
 }>();
-
 const changeValue = (prop: string) => {
   updatePen(props.pen, prop);
+  // 选择器需要设置option，更新控件
+  if(filterShapes.includes(props.pen.name)){
+    props.pen.onSetOption?.(props.pen,prop);
+  }
   // selections.pen[prop] = getter(props.pen, prop);
   if (prop === 'iframe') {
     getThumbImg();
@@ -329,6 +332,7 @@ const showDrawer = (item: any) => {
   drawer.placeholder = item.placeholder;
   drawer.randomkey = s8(); //props.pen.id;
   drawer.visible = true;
+  drawer.language = item.language || 'json';
 };
 
 const onConfirmDrawer = () => {
@@ -337,7 +341,11 @@ const onConfirmDrawer = () => {
     return;
   }
   props.pen[drawer.key] = drawer.value;
-  updatePen(props.pen, drawer.key);
+  updatePen(toRaw(props.pen), drawer.key);
+  // 选择器需要设置option，更新控件
+  if(filterShapes.includes(props.pen.name)){
+    props.pen.onSetOption?.(props.pen,drawer.key);
+  }
 };
 
 const cell = ref({