瀏覽代碼

处理目录分级

yangg 9 月之前
父節點
當前提交
2966f7471c

+ 2 - 2
src/views/document/com/components/TextArea/index.scss

@@ -9,10 +9,10 @@
   .rich-editor{
     width:100%;
     min-height: 20px;
-    h1{
+   /*  h1{
       font-size:14px;
       font-weight: bold;
-    }
+    } */
   }
 
   .content{

+ 43 - 20
src/views/document/com/components/TextArea/index.vue

@@ -377,30 +377,18 @@ export default {
           data = data.replace("{{" + attrId + "}}", result);
         } else if (_this.com.attrs[i].type == "Directory") {
           const directoryContent = _this.com.attrs[i].content;
+          const level = _this.com.attrs[i].level || 1; // 默认为1级目录
           const attrId = _this.com.attrs[i].id;
 
-          // Create a more flexible regex pattern
+          // 创建一个更灵活的正则表达式模式
           const directoryRegex = new RegExp(`{{\\s*${attrId}\\s*}}`, "g");
 
-          // Replace the content, preserving surrounding HTML tags
+          // 替换内容,直接在标题标签上应用类名
           data = data.replace(directoryRegex, (match, offset, string) => {
-            // Check if the match is inside a tag
-            const precedingText = string.substring(0, offset);
-            const followingText = string.substring(offset + match.length);
-            const precedingTag = precedingText.match(/<([^>]+)>$/);
-            const followingCloseTag = followingText.match(/^<\/([^>]+)>/);
-
-            // If it's inside matching tags, replace the entire element
-            return `<h1>${directoryContent}</h1>`;
-            /*     if (
-              precedingTag &&
-              followingCloseTag &&
-              precedingTag[1] === followingCloseTag[1]
-            ) {
-            } else {
-              // Otherwise, just replace the placeholder
-              return directoryContent;
-            } */
+            // 根据级别创建适当的HTML标签
+            const tag = `h${Math.min(level, 6)}`; // 限制最大级别为h6
+            const className = `directory-level-${level}`;
+            return `<${tag} class="${className}">${directoryContent}</${tag}>`;
           });
           //处理目录
           /* data = data.replace(
@@ -987,7 +975,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./index.scss";
 .template-textarea {
   position: relative;
@@ -1042,4 +1030,39 @@ export default {
     display: none; // Hide the original toolbar
   }
 }
+::v-deep .directory-level-1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-left: 0;
+}
+
+::v-deep .directory-level-2 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 20px;
+}
+
+.directory-level-3 {
+  font-size: 18px;
+  font-weight: bold;
+  margin-left: 40px;
+}
+
+.directory-level-4 {
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 60px;
+}
+
+.directory-level-5 {
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 80px;
+}
+
+.directory-level-6 {
+  font-size: 12px;
+  font-weight: normal;
+  margin-left: 100px;
+}
 </style>

+ 41 - 1
src/views/document/com/menus.vue

@@ -104,6 +104,32 @@
     >
       <sourceEs @onPicked="onPickedAi"></sourceEs>
     </el-dialog>
+    <!-- 插入目录 -->
+    <el-dialog
+      :visible.sync="showDirectoryLevelDialog"
+      append-to-body
+      v-el-drag-dialog
+      width="300px"
+      :close-on-click-modal="false"
+      custom-class="prod-verify"
+      title="选择目录等级"
+    >
+      <el-form :model="directoryForm" label-width="100px">
+        <el-form-item label="目录等级">
+          <el-select v-model="directoryForm.level" placeholder="请选择目录等级">
+            <el-option label="一级目录" :value="1"></el-option>
+            <el-option label="二级目录" :value="2"></el-option>
+            <el-option label="三级目录" :value="3"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDirectoryLevelDialog = false">取 消</el-button>
+        <el-button type="primary" @click="confirmDirectoryLevel"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -124,7 +150,7 @@ export default {
     sourceData,
     sourceAi,
     sourceEs,
-    ChatBox
+    ChatBox,
   },
   directives: { elDragDialog },
   props: {
@@ -135,6 +161,10 @@ export default {
   },
   data() {
     return {
+      showDirectoryLevelDialog: false,
+      directoryForm: {
+        level: 1
+      },
       showFormula: false,
       showVariable: false,
       showSourceData: false,
@@ -332,10 +362,20 @@ export default {
         this.showSourceAi = true;
       } else if (e.key == "aiEs") {
         this.showSourceEs = true;
+      } else  if (e.key === "Directory") {
+        this.showDirectoryLevelDialog = true;
       } else {
         this.$emit("onEvents", e);
       }
     },
+    confirmDirectoryLevel() {
+      this.showDirectoryLevelDialog = false;
+      this.$emit("onEvents", {
+        type: "insert",
+        key: "Directory",
+        content: { level: this.directoryForm.level }
+      });
+    }
   },
 };
 </script>

+ 22 - 13
src/views/document/create.vue

@@ -33,9 +33,7 @@
           size="mini"
           @click="renew"
           v-if="
-           articleId !== undefined &&
-            type !== 'module' &&
-            type == 'document'
+            articleId !== undefined && type !== 'module' && type == 'document'
           "
           >更新文档</el-button
         >
@@ -1213,7 +1211,7 @@ export default {
           data: { dataList },
         } = await searchFormula({ page: 1, pageSize: 999 });
         data.attrs = data.attrs.map((item) => {
-          const formula = dataList.find((el) => el.id === item.data.id);
+          const formula = dataList.find((el) => el.id === item.id);
           return formula
             ? { ...item, formula: formula.formula, data: formula }
             : item;
@@ -1312,7 +1310,7 @@ export default {
           typeof res.data.data === "string"
             ? JSON.parse(res.data.data)
             : res.data.data;
-            
+
         const updatedComs = await Promise.all(
           templateData.map(async (el) => {
             /* let templateInfo = { data: {} };
@@ -1321,11 +1319,11 @@ export default {
             } */
             const formulaData = await searchFormula({ page: 1, pageSize: 999 });
 
-            const attrs =el.attrs
-              /* typeof templateInfo.data.attrs === "string"
+            const attrs = el.attrs;
+            /* typeof templateInfo.data.attrs === "string"
                 ? JSON.parse(templateInfo.data.attrs)
                 : templateInfo.data.attrs || []; // Add a fallback empty array */
-           
+
             attrs.forEach((item) => {
               const matchedFormula = formulaData.data.dataList.find(
                 (ite) => ite.id === item.data.id
@@ -1336,7 +1334,7 @@ export default {
               }
             });
 
-            return { ...el/* , ...templateInfo.data, attrs */ };
+            return { ...el /* , ...templateInfo.data, attrs */ };
           })
         );
 
@@ -1649,7 +1647,7 @@ export default {
           this.insertProductAttr();
           break;
         case "Directory": //插入主题
-          _this.insertDirectory();
+          _this.insertDirectory(e);
           break;
         case "addNew": //插入新记录
           _this.insertNew(e);
@@ -1736,19 +1734,30 @@ export default {
 
       let com = _this.coms[_this.comIndex];
       let uniqueId = "Directory" + (com.attrs.length + 1);
+
+      // 查找现有的目录内容
+      let existingDirectory = com.attrs.find(
+        (attr) => attr.type === "Directory"
+      );
+
       let data = {
         type: "Directory",
         id: uniqueId,
         name: "目录信息",
         intro: "目录信息",
-        content: "目录信息",
+        content: existingDirectory ? existingDirectory.content : "目录信息",
+        level: e.content.level,
       };
+
+      // 始终添加新的目录项
       com.attrs.push(data);
+
       console.log(_this.coms);
+
+      // 在插入命令中使用新的唯一ID
       _this.insertCmd = {
-        content: "<div>{{" + uniqueId + "}}</div>",
+        content: `<div class="directory-level-${e.content.level}">{{${uniqueId}}}</div>`,
       };
-      // com.content+='{{'+data.id+'}}';
     },
 
     onInsertProductAttr(e) {