feat:code编辑器&fix:分组

src/views/components/Actions.vue

@@ -327,7 +327,7 @@
         </template>
         <template v-else-if="a.action == 5">
           <div class="form-item mt-8">
-            <label>函数</label>
+            <!-- <label>函数</label> -->
             <div class="w-full">
               <div>function javascriptFn(pen) {</div>
               <CodeEditor

src/views/components/Graphics.vue

@@ -2090,7 +2090,6 @@ const onManageGraphic = () => {
 };
 
 const manageConfirm = () => {
-  console.log('manageDialog.data',manageDialog.data)
   //TODO 后续存放到后端 目前本地存储
   if (activedGroup.value === '素材') {
     localforage.setItem('le5leV-materials', JSON.stringify(manageDialog.data));

src/views/components/PenDatas.vue

@@ -120,7 +120,7 @@
               @change="changeValue(item.key)"
               :placeholder="item.placeholder"
             />
-            <t-button
+            <!-- <t-button
               class="ml-8"
               v-else-if="item.type === 'code'"
               shape="square"
@@ -129,9 +129,17 @@
               @click="showPropsEdit(item)"
             >
               <ellipsis-icon slot="icon"/>
-              <!-- <t-icon name="ellipsis" slot="icon"
-            /> -->
-             </t-button>
+            </t-button> -->
+            <t-button
+              class="ml-8"
+              v-else-if="item.type === 'code'"
+              shape="square"
+              variant="outline"
+              style="width: 24px"
+              @click="showDrawer(item)"
+            >
+              <ChevronLeftDoubleIcon slot="icon"/>
+            </t-button>
             <t-slider
               v-else-if="item.type === 'slider'"
               v-model="props.pen[item.key]"
@@ -284,7 +292,28 @@
       </t-collapse-panel>
     </t-collapse>
   </div>
-
+  <t-drawer 
+    v-model:visible="drawer.visible" 
+    :header="drawer.header" 
+    cancelBtn="关闭"
+    confirmBtn="运行"
+    @confirm="onConfirmDrawer"
+    :closeOnOverlayClick="false" 
+    :sizeDraggable="true"
+    >
+    <div style="height:100%">
+      <CodeEditor
+        style="height: 100%"
+        :key="drawer.randomkey"
+        :json="true"
+        :language="'json'"
+        v-model="drawer.value"
+      />
+    </div>
+    <div class="gray" style="font-size: 12px">
+      {{ drawer.placeholder }}
+    </div>
+    </t-drawer>
   <t-dialog
     v-if="addDataDialog.show"
     :visible="true"
@@ -684,7 +713,8 @@ import Actions from './Actions.vue';
 import { useSelection } from '@/services/selections';
 import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
 import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
-import { EllipsisIcon, MoreIcon, LinkIcon, RelativityIcon, AddRectangleIcon, SearchIcon ,DeleteIcon, ArrowRightIcon, CloseIcon } from 'tdesign-icons-vue-next';
+import { EllipsisIcon, MoreIcon, LinkIcon, RelativityIcon, AddRectangleIcon, SearchIcon ,DeleteIcon, ArrowRightIcon, CloseIcon, ChevronLeftDoubleIcon } from 'tdesign-icons-vue-next';
+import { s8 } from '@/services/random';
 
 const route = useRoute();
 const router = useRouter();
@@ -1339,6 +1369,28 @@ const valueChange = (e,c:any)=>{
   c.value= changeType(e);
 }
 
+const drawer = reactive<any>({
+  visible: false,
+});
+
+const showDrawer = (item:any)=>{
+  drawer.key = item.key;
+  drawer.header = `${item.label}(${item.key})`;
+  drawer.value = deepClone(props.pen[item.key]);
+  drawer.placeholder = item.placeholder;
+  drawer.randomkey = s8();//props.pen.id;
+  drawer.visible = true;
+}
+
+const onConfirmDrawer = () => {
+  if (!drawer.value) {
+    MessagePlugin.error('数据不满足json格式');
+    return;
+  }
+  props.pen[drawer.key] = drawer.value;
+  updatePen(props.pen, drawer.key);
+};
+
 onUnmounted(() => {
   clearInterval(timer);
 });
@@ -1471,3 +1523,13 @@ onUnmounted(() => {
   }
 }
 </style>
+
+<style lang="postcss">
+.t-drawer__mask{
+  background-color: #fff0;
+}
+
+.t-drawer__body{
+  padding:0px;
+}
+</style>

src/views/components/PenProps.vue

@@ -30,14 +30,13 @@
             <t-select-input
               v-model:inputValue="data.inputTag"
               :value="data.pen.tags"
-              v-model:popupVisible="data.tagPopupVisible"
               allow-input
               placeholder="请输入或选择分组"
               multiple
               @tag-change="onChangeInputTag"
               @focus="data.tagPopupVisible = true"
               @blur="data.tagPopupVisible = false"
-              :tag-input-props="{ excessTagsDisplayType: 'scroll' }"
+              :tag-input-props="{ excessTagsDisplayType: 'break-line' }"
             >
               <template #panel>
                 <ul style="padding: 8px 12px">

src/views/components/common/CodeEditor.vue

@@ -96,6 +96,8 @@ onMounted(() => {
     minimap: { enabled: false },
     language: language || 'javascript',
     theme: 'vs-dark',
+    lineNumbersMinChars:1,
+    lineDecorationsWidth:0,
     ...options,
   });
   editor.onDidChangeModelContent(() => {