feat:修改数据面板样式

src/services/defaults.ts

@@ -1243,11 +1243,11 @@ export const formComponents = [
                 label: '显示格式',
                 type: 'string',
               },
-              {
-                key: 'fillZero',
-                label: '补0',
-                type: 'switch',
-              },
+              // {
+              //   key: 'fillZero',
+              //   label: '补0',
+              //   type: 'switch',
+              // },
             ],
           },
         },

src/views/components/PenDatas.vue

@@ -1,11 +1,80 @@
 <template>
   <div class="props">
     <t-collapse
-      :defaultValue="['3']"
+      :defaultValue="['1', '2', '3']"
       expandIconPlacement="right"
       :borderless="true"
     >
-      <t-collapse-panel v-if="props.pen.props.custom" value="1" header="属性">
+      <t-collapse-panel value="1" header="通信">
+        <t-space direction="vertical" size="small" class="w-full">
+          <div class="form-item">
+            <label title="http地址">http地址 </label>
+            <t-input
+              class="w-full"
+              v-model="props.pen.apiUrl"
+              @change="changeValue('apiUrl')"
+            />
+          </div>
+          <div class="form-item">
+            <label title="请求方式">请求方式</label>
+            <t-select
+              v-model="props.pen.apiMethod"
+              @change="changeValue('apiMethod')"
+            >
+              <t-option key="GET" value="GET" label="GET" />
+              <t-option key="POST" value="POST" label="POST" />
+            </t-select>
+          </div>
+          <div class="form-item">
+            <label title="请求头">请求头</label>
+            <!-- <CodeEditor
+              :json="true"
+              :key="props.pen.id"
+              v-model="props.pen.apiHeaders"
+              class="mt-4"
+              style="height: 50px"
+            /> -->
+            <t-button
+              class="ml-8"
+              shape="square"
+              variant="outline"
+              style="width: 24px"
+              @click="preShowPropsEdit('apiHeaders')"
+            >
+              <t-icon name="ellipsis" slot="icon"
+            /></t-button>
+          </div>
+          <div class="form-item" v-if="props.pen.apiMethod === 'POST'">
+            <label title="请求体">请求体</label>
+            <!-- <CodeEditor
+              :json="true"
+              :key="props.pen.id"
+              v-model="props.pen.apiBody"
+              class="mt-4"
+              style="height: 50px"
+            /> -->
+            <t-button
+              class="ml-8"
+              shape="square"
+              variant="outline"
+              style="width: 24px"
+              @click="preShowPropsEdit('apiBody')"
+            >
+              <t-icon name="ellipsis" slot="icon"
+            /></t-button>
+          </div>
+          <div class="form-item">
+            <label title="开启轮询">开启轮询</label>
+            <t-switch
+              class="mt-8 ml-8"
+              v-model="props.pen.apiEnable"
+              size="small"
+              @change="changeValue('apiEnable')"
+            />
+          </div>
+        </t-space>
+      </t-collapse-panel>
+      <t-collapse-panel v-if="props.pen.props.custom" value="2" header="属性">
         <t-space direction="vertical" size="small" class="w-full">
           <div v-for="item in props.pen.props.custom" class="form-item">
             <label :title="item.label">{{ item.label }}</label>
@@ -48,6 +117,7 @@
               :placeholder="item.placeholder"
             />
             <t-button
+              class="ml-8"
               v-else-if="item.type === 'code'"
               shape="square"
               variant="outline"
@@ -65,7 +135,8 @@
               @change="changeValue(item.key)"
             />
             <t-switch
-              class="mt-8"
+              size="small"
+              class="mt-8 ml-8"
               v-else-if="item.type === 'switch'"
               v-model="props.pen[item.key]"
               @change="changeValue(item.key)"
@@ -80,58 +151,8 @@
           </div>
         </t-space>
       </t-collapse-panel>
-      <t-collapse-panel value="2" header="通信">
-        <t-space direction="vertical" size="small" class="w-full">
-          <div class="form-item">
-            <label title="http地址">http地址 </label>
-            <t-input
-              class="w-full"
-              v-model="props.pen.apiUrl"
-              @change="changeValue('apiUrl')"
-            />
-          </div>
-          <div class="form-item">
-            <label title="请求方式">请求方式</label>
-            <t-select
-              v-model="props.pen.apiMethod"
-              @change="changeValue('apiMethod')"
-            >
-              <t-option key="GET" value="GET" label="GET" />
-              <t-option key="POST" value="POST" label="POST" />
-            </t-select>
-          </div>
-          <div class="form-item">
-            <label title="请求头">请求头</label>
-            <CodeEditor
-              :json="true"
-              :key="props.pen.id"
-              v-model="props.pen.apiHeaders"
-              class="mt-4"
-              style="height: 50px"
-            />
-          </div>
-          <div class="form-item" v-if="props.pen.apiMethod === 'POST'">
-            <label title="请求体">请求体</label>
-            <CodeEditor
-              :json="true"
-              :key="props.pen.id"
-              v-model="props.pen.apiBody"
-              class="mt-4"
-              style="height: 50px"
-            />
-          </div>
-          <div class="form-item">
-            <label title="开启轮询">开启轮询</label>
-            <t-switch
-              class="mt-8"
-              v-model="props.pen.apiEnable"
-              size="small"
-              @change="changeValue('apiEnable')"
-            />
-          </div>
-        </t-space>
-      </t-collapse-panel>
-      <t-collapse-panel value="3" header="动态数据">
+
+      <t-collapse-panel value="3" header="数据">
         <div
           class="real-times"
           v-if="props.pen.realTimes && props.pen.realTimes.length"
@@ -633,7 +654,7 @@ import { debounce } from '@/services/debouce';
 import { getPenTree, typeOptions } from '@/services/common';
 import { searchPinyin } from '@/services/pinyin';
 import { updatePen } from './pen';
-import { getter, setter, queryURLParams } from '@meta2d/core';
+import { getter, setter, queryURLParams, deepClone } from '@meta2d/core';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Actions from './Actions.vue';
 import { useSelection } from '@/services/selections';
@@ -1244,6 +1265,18 @@ const getThumbImg = async () => {
   props.pen.onRenderPenRaw?.(props.pen);
 };
 
+const preShowPropsEdit = (key: string) => {
+  showPropsEdit({
+    key,
+    // item: {
+    // key,
+    type: 'code',
+    label: key,
+    placeholder: '支持设置动态参数，例如：{"Authorization": "Bearer ${token}"}',
+    // },
+  });
+};
+
 const showPropsEdit = (item: any) => {
   propsDialog.key = item.key;
   propsDialog.header = `${item.label}(${item.key})`;