数据面板添加属性、通信

src/views/components/Conditions.vue

@@ -161,12 +161,10 @@ const { data } = defineProps<{
 }>();
 
 onBeforeMount(() => {
-  console.log('before');
   if (!data.conditions) {
     data.conditions = [];
   }
   penTree.value = getPenTree();
-  console.log('penTree', penTree.value);
 });
 
 const onChangeTriggerTarget = (c: any) => {

src/views/components/PenDatas.vue

@@ -1,115 +1,251 @@
 <template>
   <div class="props">
-    <div
-      class="real-times"
-      v-if="props.pen.realTimes && props.pen.realTimes.length"
+    <t-collapse
+      :defaultValue="['3']"
+      expandIconPlacement="right"
+      :borderless="true"
     >
-      <div class="grid head">
-        <div class="title">数据名</div>
-        <div class="title">值</div>
-        <div class="title">触发器</div>
-        <div class="actions">
-          <t-icon name="more" />
-        </div>
-      </div>
-      <div class="grid" v-for="(item, i) in props.pen.realTimes">
-        <t-tooltip :content="item.key" placement="top">
-          <label class="label">{{ item.label }}</label>
-        </t-tooltip>
-        <div class="value">
-          <t-input
-            v-if="item.type === 'integer'"
-            v-model.number="props.pen[item.key]"
-            placeholder="整数"
-            @change="changeValue(item.key)"
-          />
-          <t-input-number
-            v-else-if="item.type === 'float'"
-            v-model="props.pen[item.key]"
-            placeholder="浮点数"
-            theme="normal"
-            @change="changeValue(item.key)"
-          />
-          <t-switch
-            v-else-if="item.type === 'bool'"
-            v-model="props.pen[item.key]"
-            class="ml-8"
-            size="small"
-            @change="changeValue(item.key)"
-          />
-          <t-button
-            v-else-if="item.type === 'array' || item.type === 'object'"
-            variant="outline"
-            style="padding: 0px 2px 0 4px; margin: 0 4px"
-            @click="editObject(item)"
-          >
-            <t-icon name="ellipsis" />
-          </t-button>
-          <t-input
-            v-else
-            v-model="props.pen[item.key]"
-            placeholder="字符串"
-            @change="changeValue(item.key)"
-          />
-
-          <t-tooltip :content="getBindsDesc(item)" placement="top">
-            <t-icon
-              name="link"
-              class="hover ml-4"
-              :class="{ primary: item.enableMock || item.bind?.id }"
-              @click="onBind(item)"
+      <t-collapse-panel v-if="props.pen.props.custom" value="1" 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>
+            <t-checkbox
+              class="ml-8"
+              v-if="item.type === 'bool'"
+              v-model="props.pen[item.key]"
+              @change="changeValue(item.key)"
             />
-          </t-tooltip>
-        </div>
-        <div>
-          <t-tooltip :content="item.triggers?.length || '触发器'">
-            <t-badge
-              :count="item.triggers?.length"
+            <t-input-number
+              class="w-full"
+              v-else-if="item.type === 'number'"
+              v-model.number="props.pen[item.key]"
+              theme="column"
+              :max="item.max"
+              :min="item.min"
+              @change="changeValue(item.key)"
+              :placeholder="item.placeholder"
+            />
+            <t-color-picker
+              class="w-full"
+              v-else-if="item.type === 'color'"
+              :enable-alpha="true"
+              :recent-colors="null"
+              format="CSS"
+              :swatch-colors="defaultPureColor"
+              :color-modes="['monochrome']"
+              :show-primary-color-preview="false"
+              v-model="props.pen[item.key]"
+              @change="changeValue(item.key)"
+              :placeholder="item.placeholder"
+            />
+            <t-select
+              class="w-full"
+              v-else-if="item.type === 'select'"
               size="small"
-              dot
-              :offset="[0, 5]"
+              :options="item.options"
+              v-model="props.pen[item.key]"
+              @change="changeValue(item.key)"
+              :placeholder="item.placeholder"
+            />
+            <t-button
+              v-else-if="item.type === 'code'"
+              shape="square"
+              variant="outline"
+              style="width: 24px"
+              @click="showPropsEdit(item)"
             >
-              <t-icon
-                name="relativity"
-                class="hover"
-                @click="onTrigger(item)"
+              <t-icon name="ellipsis" slot="icon"
+            /></t-button>
+            <t-slider
+              v-else-if="item.type === 'slider'"
+              v-model="props.pen[item.key]"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              @change="changeValue(item.key)"
+            />
+            <t-switch
+              class="mt-8"
+              v-else-if="item.type === 'switch'"
+              v-model="props.pen[item.key]"
+              @change="changeValue(item.key)"
+            />
+            <t-input
+              class="w-full"
+              v-else
+              v-model="props.pen[item.key]"
+              @change="changeValue(item.key)"
+              :placeholder="item.placeholder"
+            />
+          </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="动态数据">
+        <div
+          class="real-times"
+          v-if="props.pen.realTimes && props.pen.realTimes.length"
+        >
+          <div class="grid head">
+            <div class="title">数据名</div>
+            <div class="title">值</div>
+            <div class="title">触发器</div>
+            <div class="actions">
+              <t-icon name="more" />
+            </div>
+          </div>
+          <div class="grid" v-for="(item, i) in props.pen.realTimes">
+            <t-tooltip :content="item.key" placement="top">
+              <label class="label">{{ item.label }}</label>
+            </t-tooltip>
+            <div class="value">
+              <t-input
+                v-if="item.type === 'integer'"
+                v-model.number="props.pen[item.key]"
+                placeholder="整数"
+                @change="changeValue(item.key)"
+              />
+              <t-input-number
+                v-else-if="item.type === 'float'"
+                v-model="props.pen[item.key]"
+                placeholder="浮点数"
+                theme="normal"
+                @change="changeValue(item.key)"
+              />
+              <t-switch
+                v-else-if="item.type === 'bool'"
+                v-model="props.pen[item.key]"
+                class="ml-8"
+                size="small"
+                @change="changeValue(item.key)"
+              />
+              <t-button
+                v-else-if="item.type === 'array' || item.type === 'object'"
+                variant="outline"
+                style="padding: 0px 2px 0 4px; margin: 0 4px"
+                @click="editObject(item)"
+              >
+                <t-icon name="ellipsis" />
+              </t-button>
+              <t-input
+                v-else
+                v-model="props.pen[item.key]"
+                placeholder="字符串"
+                @change="changeValue(item.key)"
               />
-            </t-badge>
-          </t-tooltip>
+
+              <t-tooltip :content="getBindsDesc(item)" placement="top">
+                <t-icon
+                  name="link"
+                  class="hover ml-4"
+                  :class="{ primary: item.enableMock || item.bind?.id }"
+                  @click="onBind(item)"
+                />
+              </t-tooltip>
+            </div>
+            <div>
+              <t-tooltip :content="item.triggers?.length || '触发器'">
+                <t-badge
+                  :count="item.triggers?.length"
+                  size="small"
+                  dot
+                  :offset="[0, 5]"
+                >
+                  <t-icon
+                    name="relativity"
+                    class="hover"
+                    @click="onTrigger(item)"
+                  />
+                </t-badge>
+              </t-tooltip>
+            </div>
+            <div class="actions">
+              <t-dropdown
+                :options="moreOptions"
+                @click="onMenuMore($event, item, i)"
+                :minColumnWidth="80"
+              >
+                <t-icon name="more" class="more hover" />
+              </t-dropdown>
+            </div>
+          </div>
+          <div class="mt-8 pb-16">
+            <t-dropdown
+              :options="options"
+              @click="addRealTime"
+              :minColumnWidth="150"
+            >
+              <a class="ml-12">
+                <t-icon name="add-rectangle" /> 添加动态数据
+              </a>
+            </t-dropdown>
+          </div>
         </div>
-        <div class="actions">
-          <t-dropdown
-            :options="moreOptions"
-            @click="onMenuMore($event, item, i)"
-            :minColumnWidth="80"
-          >
-            <t-icon name="more" class="more hover" />
-          </t-dropdown>
+        <div class="flex column center blank" v-else>
+          <img src="/img/blank.png" />
+          <div class="gray center">还没有动态数据</div>
+          <div class="mt-8">
+            <t-dropdown
+              :options="options"
+              @click="addRealTime"
+              :minColumnWidth="150"
+            >
+              <t-button style="height: 30px"> 添加动态数据 </t-button>
+            </t-dropdown>
+          </div>
         </div>
-      </div>
-      <div class="mt-8 pb-16">
-        <t-dropdown
-          :options="options"
-          @click="addRealTime"
-          :minColumnWidth="150"
-        >
-          <a class="ml-12"> <t-icon name="add-rectangle" /> 添加动态数据 </a>
-        </t-dropdown>
-      </div>
-    </div>
-    <div class="flex column center blank" v-else>
-      <img src="/img/blank.png" />
-      <div class="gray center">还没有动态数据</div>
-      <div class="mt-8">
-        <t-dropdown
-          :options="options"
-          @click="addRealTime"
-          :minColumnWidth="150"
-        >
-          <t-button style="height: 30px"> 添加动态数据 </t-button>
-        </t-dropdown>
-      </div>
-    </div>
+      </t-collapse-panel>
+    </t-collapse>
   </div>
 
   <t-dialog
@@ -459,6 +595,26 @@
       />
     </div>
   </t-dialog>
+  <t-dialog
+    v-if="propsDialog.show"
+    :visible="true"
+    :header="propsDialog.header"
+    @confirm="onOkPropsEdit"
+    @close="propsDialog.show = false"
+    :width="700"
+  >
+    <div class="py-8">
+      <CodeEditor
+        :json="true"
+        :language="'json'"
+        v-model="propsDialog.value"
+        style="height: 300px"
+      />
+    </div>
+    <div class="gray" style="font-size: 12px">
+      {{ propsDialog.placeholder }}
+    </div>
+  </t-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -482,6 +638,7 @@ import { updatePen } from './pen';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Actions from './Actions.vue';
 import { useSelection } from '@/services/selections';
+import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
 
 const route = useRoute();
 const router = useRouter();
@@ -928,6 +1085,9 @@ const { selections } = useSelection();
 const changeValue = (prop: string) => {
   updatePen(props.pen, prop);
   selections.pen[prop] = getter(props.pen, prop);
+  if (prop === 'iframe') {
+    getThumbImg();
+  }
 };
 
 const onTrigger = (item: any) => {
@@ -1046,6 +1206,62 @@ const onOkEditOjbect = () => {
   }
 };
 
+const propsDialog = reactive<any>({
+  show: false,
+});
+
+// const changeValue = (prop: string) => {
+//   updatePen(props.pen, prop);
+//   selections.pen[prop] = getter(props.pen, prop);
+//   if (prop === 'iframe') {
+//     getThumbImg();
+//   }
+// };
+
+const getThumbImg = async () => {
+  //改iframe地址后
+  let arr = props.pen.iframe.split('?');
+  let id = queryURLParams(arr[1]).id;
+  if (!id) {
+    return;
+  }
+  let projection = {
+    image: 1,
+    _id: 1,
+    name: 1,
+  };
+  let res: any;
+  if (arr[0].indexOf('2d.le5le') !== -1) {
+    res = await getLe5le2d(id, projection);
+  } else if (arr[0].indexOf('v.le5le') !== -1) {
+    res = await getLe5leV(id, projection);
+  } else if (arr[0].indexOf('3d.le5le') !== -1) {
+    res = await getLe5le3d(id, projection);
+  }
+  if (res) {
+    props.pen.thumbImg = res.image;
+  }
+  props.pen.onRenderPenRaw?.(props.pen);
+};
+
+const showPropsEdit = (item: any) => {
+  propsDialog.key = item.key;
+  propsDialog.header = `${item.label}(${item.key})`;
+  propsDialog.value = props.pen[item.key];
+  propsDialog.placeholder = item.placeholder;
+  propsDialog.show = true;
+};
+
+const onOkPropsEdit = () => {
+  if (!propsDialog.value) {
+    MessagePlugin.error('数据不满足json格式');
+    return;
+  }
+  props.pen[propsDialog.key] = propsDialog.value;
+  updatePen(props.pen, propsDialog.key);
+  propsDialog.show = false;
+};
+
 onUnmounted(() => {
   clearInterval(timer);
 });

src/views/components/PenProps.vue

@@ -942,7 +942,7 @@
                 </div>
               </t-space>
             </t-collapse-panel>
-            <t-collapse-panel
+            <!-- <t-collapse-panel
               v-if="data.pen.props.custom"
               value="5"
               header="属性"
@@ -1019,7 +1019,7 @@
                   />
                 </div>
               </t-space>
-            </t-collapse-panel>
+            </t-collapse-panel> -->
           </t-collapse>
 
           <t-divider style="margin: -8px 0" />