属性面板

src/editor/widgets/property/PropertyView.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="title">
-    属性面板
-    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
-      <template #prefix>
-        <component :is="renderIcon('element Search')"></component>
-      </template>
-    </el-input>
-    <span class="close" @click="closeMe()">
+    <template v-if="!!t">
+      属性 <el-tag type="primary">{{ t }}</el-tag>
+      <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
+        <template #prefix>
+          <component :is="renderIcon('element Search')"></component>
+        </template>
+      </el-input>
+      <span class="close" @click="closeMe()">
       <component :is="renderIcon('element Close')" />
     </span>
+    </template>
   </div>
   <div class="calc-right-panel">
-    <el-form
-      label-position="right"
-      label-width="60"
-      class="property-panel-form"
-      size="default"
-      @submit.native.prevent
-    >
+    <el-empty v-if="!t" description="未选中">
+    </el-empty>
+    <el-form v-else
+             label-position="right"
+             label-width="60"
+             class="property-panel-form"
+             size="default"
+             @submit.native.prevent>
       <template v-for="(itemMeta, idx) in selectedObjectMeta">
         <el-divider v-if="itemMeta.editor === '-'" />
 
@@ -49,7 +52,7 @@
           :viewport="viewport"
         />
 
-        <template v-else> 未知编辑器: {{ itemMeta.editor }} </template>
+        <template v-else> 未知编辑器: {{ itemMeta.editor }}</template>
       </template>
     </el-form>
   </div>
@@ -75,13 +78,18 @@ export default {
   },
   mixins: [IWidgets],
   data() {
-
     return {
       itemTypeMeta: null,
       searchKeyword: ''
     }
   },
   computed: {
+    t() {
+      return this.selectedItem ? ('(' + this.selectedItem.t + ')') : ''
+    },
+    selectedItem() {
+      return this.state?.selectedItem
+    },
     selectedObject() {
       return this.state?.selectedObject
     },
@@ -91,24 +99,24 @@ export default {
   },
   methods: {
     selectedObjectChanged(state) {
-      const data = state.selectedItem;
-      console.log("selectedObjectChanged data", data)
-      if(data) {
+      const data = state.selectedItem
+      console.log('selectedObjectChanged data', data)
+      if (data) {
         this.viewport.stateManager.beginStateUpdate()
         const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id)
         // item.tf[0][0] = item.tf[0][0] / 2;
-        console.log("selectedObjectChanged item", item)
+        console.log('selectedObjectChanged item', item)
         // _.extend(item, data)
         this.viewport.stateManager.endStateUpdate()
       }
-    },
+    }
   },
   mounted() {
-    EventBus.on("selectedObjectChanged", this.selectedObjectChanged);
+    EventBus.on('selectedObjectChanged', this.selectedObjectChanged)
   },
   unmounted() {
-    EventBus.off("selectedObjectChanged", this.selectedObjectChanged);
-  },
+    EventBus.off('selectedObjectChanged', this.selectedObjectChanged)
+  }
 }
 </script>
 <style lang="less">
@@ -116,13 +124,16 @@ export default {
   margin: 0;
   font-size: 14px;
   color: #606266;
+
   .el-form-item--default {
     margin: 5px 3px 0 0;
+
     .el-form-item__label {
       height: 20px;
       line-height: 22px;
     }
   }
+
   .gui-toolbar {
     color: #333;
     background: #ffffff;
@@ -168,6 +179,7 @@ export default {
       }
     }
   }
+
   .el-divider {
     margin: 5px 0;
   }