feat:penProps-add-id&tree-add-groupsVisible

src/views/components/ElementTree.vue

@@ -120,6 +120,12 @@
             @blur="setGroup"
             @enter="setGroup"
           />
+          <t-icon
+            v-if="!data.hiddenGroups.includes(item)"
+            name="browse"
+            @click="visibleGroup(item, false)"
+          />
+          <t-icon v-else name="browse-off" @click="visibleGroup(item, true)" />
           <t-popconfirm
             content="确认删除该分组吗？"
             @confirm="delGroup"
@@ -150,6 +156,7 @@ const data = reactive<any>({
   tree: [],
   actived: [],
   groups: [],
+  hiddenGroups: [],
 });
 
 onBeforeMount(() => {
@@ -176,12 +183,26 @@ onBeforeMount(() => {
     d.groups = [];
   }
   data.groups = d.groups;
+  getHiddenGroups();
 });
 
 const getTree = () => {
   data.tree = getPenTree();
 };
 
+const getHiddenGroups = () => {
+  data.groups.forEach((item) => {
+    if (
+      meta2d.store.data.pens.some(
+        (pen) =>
+          !pen.parentId && pen.tags.includes(item) && pen.visible === false
+      )
+    ) {
+      data.hiddenGroups.push(item);
+    }
+  });
+};
+
 const getActived = () => {
   data.actived = [];
   if (meta2d.store.active) {
@@ -263,6 +284,27 @@ const visible = (node: any, v: boolean) => {
   pen && meta2d.setVisible(pen, v);
 };
 
+const visibleGroup = (item, v: boolean) => {
+  if (v) {
+    let index = data.hiddenGroups.indexOf(item);
+    if (index !== -1) {
+      data.hiddenGroups.splice(index, 1);
+    }
+  } else {
+    data.hiddenGroups.push(item);
+  }
+  let pens = meta2d.store.data.pens.filter(
+    (pen) => !pen.parentId && pen.tags.includes(item)
+  );
+  pens.forEach((pen) => {
+    meta2d.setValue(
+      { id: pen.id, visible: v },
+      { render: false, doEvent: false }
+    );
+  });
+  meta2d.render();
+};
+
 const onDescription = (node: any) => {
   node.data.edited = false;
   node.setData({ label: node.data.label });

src/views/components/PenProps.vue

@@ -4,6 +4,15 @@
       <t-tab-panel :value="1" label="外观">
         <t-space direction="vertical" class="py-16 w-full">
           <div class="form-item px-12">
+            <label style="width: 50px">ID</label>
+            <t-input
+              class="w-full"
+              placeholder="ID"
+              :value="data.pen.id"
+              @change="changeID($event)"
+            />
+          </div>
+          <div class="form-item px-12" style="margin-top: -12px">
             <label style="width: 50px">名称</label>
             <t-input
               class="w-full"
@@ -1174,6 +1183,23 @@ const changeValue = (prop: string) => {
   updatePen(data.pen, prop);
 };
 
+const changeID = (value: any) => {
+  if (!value) {
+    initPenData();
+    MessagePlugin.error('id 不能为空');
+    return;
+  }
+  const oldID: string = data.pen.id;
+  try {
+    meta2d.changePenId(oldID, value);
+    initPenData();
+  } catch (error) {
+    console.warn(error.message);
+    MessagePlugin.error('id 修改失败，请检查 id 是否重复');
+    return;
+  }
+};
+
 const changeRectValue = (prop: string) => {
   data.rect.id = data.pen.id;
   data.rect.ratio = data.pen.ratio;