fix(tree): fix tree theme for content-right, add tree docs (#2035)

examples/sites/demos/pc/app/tree/edit-composition-api.vue

@@ -8,7 +8,14 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
+    <tiny-tree
+      ref="treeRef"
+      show-checkbox
+      node-key="id"
+      :data="data"
+      current-node-key="1"
+      default-expand-all
+    ></tiny-tree>
   </div>
 </template>
 
@@ -20,6 +27,7 @@ const data = ref([
   {
     id: '1',
     label: '数据 1',
+    disabled: true,
     children: [
       { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
       { id: '1-2', label: '数据 1-2' }

examples/sites/demos/pc/app/tree/edit.vue

@@ -8,7 +8,14 @@
     <tiny-button @click="editNode">编辑节点</tiny-button>
     <tiny-button @click="saveNode">5s后保存节点</tiny-button> <br />
     <br />
-    <tiny-tree ref="treeRef" node-key="id" :data="data" current-node-key="1" default-expand-all></tiny-tree>
+    <tiny-tree
+      ref="treeRef"
+      show-checkbox
+      node-key="id"
+      :data="data"
+      current-node-key="1"
+      default-expand-all
+    ></tiny-tree>
   </div>
 </template>
 
@@ -26,6 +33,7 @@ export default {
         {
           id: '1',
           label: '数据 1',
+          disabled: true,
           children: [
             { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
             { id: '1-2', label: '数据 1-2' }

examples/sites/demos/pc/app/tree/webdoc/tree.js

@@ -410,7 +410,8 @@ export default {
           通过调用实例的<code> editNode(node) </code>方法，立即编辑 node 节点。<br>
           通过调用实例的<code> saveNode() </code>方法，保存正在编辑的节点。<br>
           <div class="tip custom-block">
-            在使用编辑功能时，不要使用 <code> props </code> 去定义数据列的映射关系，要使用默认的数据格式。
+            在使用编辑功能时，不要使用 <code> props </code> 去定义数据列的映射关系，要使用默认的数据格式。<br>
+            数据项的禁用并不影响数据的编辑功能，编辑功能的控制，请参考 <code> 编辑权限 </code> 的示例。
           </div>
           通过<code> edit-config </code> 属性，设置编辑模式下参数配置。<br>
         `,
@@ -419,7 +420,8 @@ export default {
           Edit the node node immediately by calling the instance's <code> editNode(node) </code> method. <br>
           Save the node being edited by calling the instance's <code> saveNode() </code> method. <br>
           <div class="tip custom-block">
-            When using the editing functions, do not use <code> props </code> to define the mapping of data columns. Instead, use the default data format.
+            When using the editing functions, do not use <code> props </code> to define the mapping of data columns. Instead, use the default data format.<br>
+            Disabling the data item does not affect the data editing function. For details about how to control the editing function, see the example of <code> editing permission </code>.
           </div>
           Set parameters in editing mode through the <code>edit-config </code> attribute.<br>
         `

packages/theme/src/tree/index.less

@@ -365,6 +365,10 @@
       align-items: center;
       padding-left: calc(var(--ti-tree-node-label-margin-left) / 2);
       padding-right: var(--ti-tree-node-content-padding-right);
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
   }
 
@@ -386,6 +390,7 @@
     display: flex;
     align-items: center;
     height: 100%;
+    cursor: pointer;
 
     svg {
       fill: var(--ti-tree-node-operate-icon-color);