ソースを参照

修改目录及模板样式显示

yangg 6 ヶ月 前
コミット
5fa6e5c33f

+ 1 - 0
ui/src/views/system/document/create.scss

@@ -307,6 +307,7 @@
       /* overflow-y: auto; */
       position:relative;
       margin:0 auto;
+      margin-right: 20px;
       .editor-tabs {
         height: 100%;
         

+ 141 - 58
ui/src/views/system/document/create.vue

@@ -2378,85 +2378,78 @@ export default {
       }
 
       let com = _this.coms[_this.comIndex];
-      let uniqueId = `Directory_${_this.comIndex}_${com.attrs.length + 1}`;
-
-      // 获取当前层级
-      let currentLevel = e.content.level || 1;
-
-      // 生成带有模块索引和层级的内容
-      let { number, content } = this.generateNumberedContent(
+      
+      // 获取当前模块中已有的目录数量,用于生成新目录的编号
+      const existingDirectories = com.attrs.filter(attr => attr.type === "Directory");
+      const currentLevelDirectories = existingDirectories.filter(dir => dir.level === e.content.level);
+      
+      // 生成目录编号 - 使用下划线替代点号
+      const number = this.generateDirectoryNumber(
         _this.comIndex,
-        currentLevel
+        e.content.level,
+        currentLevelDirectories.length + 1
       );
 
+      // 生成唯一ID - 使用下划线分隔所有部分
+      let uniqueId = `Directory_${_this.comIndex}_${e.content.level}_${number.replace(/\./g, '_')}`;
+
       let data = {
         type: "Directory",
         id: uniqueId,
-        name: "目录信息",
+        name: "目录信息", 
         intro: "目录信息",
-        number: number,
-        content: content,
-        level: currentLevel,
+        number: number, // 保留原始的带点号的编号用于显示
+        displayNumber: number, // 用于显示的编号
+        content: "",
+        level: e.content.level,
         moduleIndex: _this.comIndex,
+        parentNumber: this.getParentNumber(number) // 记录父级目录编号
       };
 
-      // 使用 $set 来确保响应式更新
-      this.$set(com.attrs, com.attrs.length, data);
-
-      // 强制更新视图
-      this.$forceUpdate();
-
-      // 使用 nextTick 确保 DOM 更新后再检查
-      this.$nextTick(() => {
-        if (!com.attrs[com.attrs.length - 1].content) {
-          this.$set(com.attrs[com.attrs.length - 1], "content", content);
-          console.log(com);
-          this.$forceUpdate();
-        }
-      });
-
-      // 使用新的唯一 ID 在插入命令中
+      com.attrs.push(data);
+      
       _this.insertCmd = {
         content: `{{${uniqueId}}}`,
       };
-    },
 
-    generateNumberedContent(moduleIndex, level) {
-      let number = this.generateLevelPrefix(moduleIndex, level);
-      let content = this.coms[moduleIndex].type === "TextArea" ? "" : "";
-
-      return { number, content };
+      // 更新所有目录的显示
+      this.updateDirectoryDisplay(com);
     },
 
-    generateLevelPrefix(moduleIndex, level) {
-      let prefix = [];
-      let currentModule = this.coms[moduleIndex];
+    generateDirectoryNumber(moduleIndex, level, count) {
+      // 如果是一级目录,直接返回模块序号
+      if(level === 1) {
+        return `${moduleIndex + 1}`;
+      }
 
-      // 获取当前模块中已存在的目录项
-      let existingDirectories = currentModule.attrs.filter(
-        (attr) => attr.type === "Directory"
+      // 获取父级目录编号
+      const parentLevel = level - 1;
+      const parentDirectories = this.coms[moduleIndex].attrs.filter(
+        attr => attr.type === "Directory" && attr.level === parentLevel
       );
+      
+      if(parentDirectories.length === 0) {
+        // 如果没有父级目录,自动创建
+        const parentNumber = this.generateDirectoryNumber(moduleIndex, parentLevel, 1);
+        this.insertDirectory({
+          content: {
+            level: parentLevel
+          }
+        });
+        return `${parentNumber}.${count}`;
+      }
 
-      // 计算当前层级的序号
-      let currentLevelCount =
-        existingDirectories.filter((dir) => dir.level === level).length + 1;
+      // 使用最后一个父级目录的编号
+      const lastParent = parentDirectories[parentDirectories.length - 1];
+      return `${lastParent.number}.${count}`;
+    },
 
-      // 构建多级序号
-      for (let i = 1; i <= level; i++) {
-        if (i === 1) {
-          prefix.push(moduleIndex + 1);
-        } else if (i === level) {
-          prefix.push(currentLevelCount);
-        } else {
-          // 对于中间层级,找到最近的上级目录项
-          let parentLevel = existingDirectories
-            .filter((dir) => dir.level === i - 1)
-            .pop();
-          prefix.push(parentLevel ? parentLevel.number.split(".")[i - 1] : 1);
-        }
+    getParentNumber(number) {
+      const parts = number.split('.');
+      if(parts.length > 1) {
+        return parts.slice(0, -1).join('.');
       }
-
-      return prefix.join(".");
+      return '';
     },
 
     onInsertProductAttr(e) {
@@ -4029,6 +4022,23 @@ export default {
       // 强制更新视图
       this.$forceUpdate();
     },
+
+    // 添加新方法:更新目录显示
+    updateDirectoryDisplay(com) {
+      // 按级别和编号排序目录
+      const directories = com.attrs
+        .filter(attr => attr.type === "Directory")
+        .sort((a, b) => {
+          if (a.level !== b.level) return a.level - b.level;
+          return a.number.localeCompare(b.number, undefined, { numeric: true });
+        });
+
+      // 更新每个目录的显示内容
+      directories.forEach(dir => {
+        const pattern = new RegExp(`{{${dir.id}}}`, 'g');
+        com.content = com.content.replace(pattern, `${dir.number} {{${dir.id}}}`);
+      });
+    },
   },
 };
 </script>
@@ -4127,6 +4137,7 @@ export default {
   }
 }
 .module-list-container {
+  width: 320px;
   margin-top: 110px;
   /* position: absolute;
   top: 135px;
@@ -4267,4 +4278,76 @@ export default {
 .highlight {
   animation: highlight-pulse 2s ease-in-out;
 }
+
+/* 添加到组件的 <style> 部分 */
+.el-tree {
+  .el-tree-node {
+    position: relative;
+    
+    /* 为每个节点添加左侧垂直线 */
+    &:before {
+      content: '';
+      position: absolute;
+      left: 8px; /* 调整线条位置 */
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background-color: #1aad19; /* 线条颜色 */
+      z-index: 1;
+    }
+    
+    /* 移除最后一个子节点的垂直线延伸 */
+    &:last-child:before {
+      height: 20px; /* 调整到节点中心位置 */
+    }
+
+    /* 为每个节点添加水平连接线 */
+    .el-tree-node__content:before {
+      content: '';
+      position: absolute;
+      left: 8px; /* 与垂直线对齐 */
+      top: 50%;
+      width: 16px; /* 水平线长度 */
+      height: 2px;
+      background-color: #1aad19;
+      z-index: 1;
+    }
+  }
+
+  /* 移除根节点的垂直线 */
+  & > .el-tree-node:before {
+    display: none;
+  }
+  
+  /* 移除第一层节点的连接线 */
+  & > .el-tree-node > .el-tree-node__content:before {
+    display: none;
+  }
+
+  /* 调整节点内容的位置,为线条留出空间 */
+  .el-tree-node__content {
+    position: relative;
+    padding-left: 28px !important; /* 调整缩进 */
+  }
+
+  /* 确保展开箭头在正确位置 */
+  .el-tree-node__expand-icon {
+    padding: 6px;
+    margin-left: 10px;
+  }
+}
+
+/* 自定义树节点样式 */
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 14px;
+  
+  /* 编辑输入框样式 */
+  .el-input {
+    margin-left: -4px;
+  }
+}
 </style>