修改

src/components/wang.vue

@@ -5,11 +5,36 @@
       <button @click="insertVideo">上传视频</button>
       <button @click="loadAllContent">加载所有内容</button>
       <button @click="generateTOC">生成目录</button>
-      <button @click="deleteAllVideos">删除所有视频</button>
+      <input type="color">
+      <!-- <button @click="deleteAllVideos">删除所有视频</button> -->
       <button @click="loadFwb">模拟加载</button>
-      <button @click='test'>测试</button>
-      
+      <!-- <button @click='test'>测试</button>  -->
     </div>
+   
+
+      <div class="s1000d-editor-container">
+        <!-- 工具栏 -->
+        <div class="toolbar">
+          <button @click="exportToS1000D" class="tool-btn">导出S1000D XML</button>
+          <label for="xml-upload" class="tool-btn">导入S1000D XML</label>
+          <input
+            id="xml-upload"
+            type="file"
+            accept=".xml"
+            @change="handleS1000DUpload"
+            style="display: none"
+          />
+          <button @click="validateCurrentXml" class="tool-btn">验证XML</button>
+        </div>
+        <!-- 编辑器区域 -->
+        <div class="editor-area" style="display:none;">
+          <div ref="editor" class="editor"></div>
+          <div class="xml-preview" style="display: none">
+            <h3>XML预览</h3>
+            <pre>{{ formattedXmlPreview }}</pre>
+          </div>
+        </div>
+     </div>
     <div id="main" class="content-preview"></div>
     <div id="nav" class="toc-container"></div>
     <div id="editor" ref="editor"></div>
@@ -23,6 +48,8 @@
 
 <script> 
 import WangEditor from 'wangeditor'
+// import '@yaireo/colorpicker/dist/colorpicker.min.css';
+// import '@yaireo/colorpicker'
 // import axios from 'axios'; 
 // window.handleMessageFromDotNet = function(msg) {
 //   alert("Received message from C#: " + msg);
@@ -40,6 +67,47 @@ export default {
       editorContent: '',
       editorContent2:'',
       hasVideoSelected: false,
+       xmlPreview: '',
+      showValidationModal: false,
+      validationResult: {
+        valid: false,
+        message: '',
+        details: ''
+      },
+      // 简单的S1000D模板配置
+      dmConfig: {
+        dmc: {
+          modelIdentCode: 'AAA',
+          systemDiffCode: 'BBB',
+          systemCode: 'CCC',
+          subSystemCode: 'DDD',
+          subSubSystemCode: 'EEE',
+          assyCode: 'FFF',
+          disassyCode: 'GGG',
+          disassyCodeVariant: 'HHH',
+          infoCode: 'III',
+          infoCodeVariant: 'JJJ',
+          itemLocationCode: 'KKK'
+        },
+        issueInfo: {
+          issueNumber: '001',
+          inWork: '01',
+          issueDate: new Date().toISOString().split('T')[0]
+        },
+        language: 'zh-CN'
+      }
+    }
+  },
+   computed: {
+    formattedXmlPreview() {
+      if (!this.xmlPreview) return '暂无XML预览';
+      
+      // 简单格式化XML显示
+      return this.xmlPreview
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\n/g, '<br>')
+        .replace(/\s/g, '&nbsp;');
     }
   },
   mounted() {
@@ -82,6 +150,14 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
       let dm = this.editor.config.menus;
       console.log("默认菜单",dm)
 
+
+      // 启用颜色选择功能
+    this.editor.config.colors = [
+      '#000000', '#ffffff', '#eeeef1', 
+      '#ff0000', '#ff5e5e', '#ffbbbb',
+      '#0033ff', '#0055ff', '#3d7eff',
+      'red',"#096","#9cf"
+    ]
       // 完全自定义菜单
   this.editor.config.menus = [
     'image',    // 图片
@@ -95,8 +171,8 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
     'strikeThrough', // 删除线
     // 'line',//行高
     'lineHeight',//
-    // 'foreColor', // 文字颜色
-    // 'backColor', // 背景颜色
+    'foreColor', // 文字颜色
+    'backColor', // 背景颜色
     // 'link',     // 链接
     'list',     // 列表
     // 'todo',//
@@ -107,7 +183,7 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
     // 'code',     // 代码
     'splitLine',//分割线
     'undo',     // 撤销
-    'redo'      // 重做
+    'redo',      // 重做 
   ]
 
       // 创建编辑器
@@ -135,7 +211,7 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
       this.editor.cmd.do('insertHTML', `<img src="${imgUrl}" style="max-width: 100%;" alt="图片">`)
     },
     
-   // 插入视频（可靠版本）
+   // 插入视频
     insertVideo() {
       const videoUrl = 'http://youneed.top:10017/uploads/video.mp4'
       const videoId = `video-${Date.now()}`
@@ -183,16 +259,12 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
     },
 
 
-    bindDel(){
-    
-    },
-
 
 
   deleteAllVideos() {
       const videoWrappers = document.querySelectorAll('.video-wrapper')
       if (videoWrappers.length === 0) {
-        alert('没有找到可删除的视频')
+        console.log('没有找到可删除的视频')
         return
       }
       
@@ -209,7 +281,7 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
         }
       })
       
-      // 修正：使用正确的方式通知内容变更
+      // 使用正确的方式通知内容变更
       if (this.editor.txt) {
         this.editor.txt.html(this.editor.txt.html()) // 强制更新编辑器内容
       }
@@ -251,7 +323,7 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
       
       const mainContainer = document.getElementById('main')
       const headings = mainContainer.querySelectorAll('h1, h2, h3, h4, h5, h6')
-      
+      console.log("headings.length",headings.length)
       if (headings.length === 0) {
         navContainer.innerHTML = '<p>没有找到标题元素，无法生成目录。</p>'
         return
@@ -299,6 +371,182 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
       tocContainer.appendChild(tocTitle)
       tocContainer.appendChild(tocList)
       navContainer.appendChild(tocContainer)
+    },
+
+     // 生成S1000D XML模板
+    generateS1000DTemplate(content) {
+      const { dmc, issueInfo, language } = this.dmConfig;
+      
+      return `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE dmodule [
+  <!ENTITY % ISOEntities PUBLIC "ISO 8879-1986//ENTITIES ISO Character Entities 20030531//EN//XML" "http://www.s1000d.org/S1000D_4-1/ent/ISOEntities">
+  %ISOEntities;
+]>
+<dmodule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.s1000d.org/S1000D_4-1/xml_schema_flat/descript.xsd">
+  <idstatus>
+    <dmaddress>
+      <dmc>
+        <avee>${dmc.modelIdentCode}-${dmc.systemDiffCode}-${dmc.systemCode}-${dmc.subSystemCode}-${dmc.subSubSystemCode}-${dmc.assyCode}-${dmc.disassyCode}-${dmc.disassyCodeVariant}</avee>
+        <avee>${dmc.infoCode}-${dmc.infoCodeVariant}-${dmc.itemLocationCode}</avee>
+      </dmc>
+    </dmaddress>
+    <issueinfo>
+      <issue number="${issueInfo.issueNumber}" inwork="${issueInfo.inWork}" date="${issueInfo.issueDate}"/>
+      <language country="${language.split('-')[1]}" language="${language.split('-')[0]}"/>
+    </issueinfo>
+  </idstatus>
+  <content>
+    <description>
+      ${this.escapeXml(content)}
+    </description>
+  </content>
+</dmodule>`;
+    },
+    
+    // XML特殊字符转义
+    escapeXml(unsafe) {
+      return unsafe.replace(/[<>&'"]/g, (c) => {
+        switch (c) {
+          case '<': return '&lt;';
+          case '>': return '&gt;';
+          case '&': return '&amp;';
+          case '\'': return '&apos;';
+          case '"': return '&quot;';
+          default: return c;
+        }
+      });
+    },
+    
+    // 更新XML预览
+    updateXmlPreview(html) {
+      try {
+        this.xmlPreview = this.generateS1000DTemplate(html);
+      } catch (e) {
+        console.error('生成XML预览失败:', e);
+        this.xmlPreview = `生成XML预览时出错: ${e.message}`;
+      }
+    },
+    
+    // 导出为S1000D XML文件
+    exportToS1000D() {
+      const html = this.editor.txt.html();
+      const xmlContent = this.generateS1000DTemplate(html);
+      
+      // 下载文件
+      const blob = new Blob([xmlContent], { type: 'application/xml' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = `s1000d-${this.dmConfig.dmc.modelIdentCode}-${this.dmConfig.issueInfo.issueNumber}.xml`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+    },
+    
+    // 从S1000D XML导入
+    handleS1000DUpload(event) {
+      const file = event.target.files[0];
+      if (!file) return;
+      
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const xmlString = e.target.result;
+        const html = this.extractContentFromS1000D(xmlString);
+        
+        if (html) {
+          this.editor.txt.html(html);
+          this.updateXmlPreview(html);
+        }
+        
+        // 重置input值，允许重复选择同一文件
+        event.target.value = '';
+      };
+      reader.readAsText(file);
+    },
+    
+    // 从S1000D XML提取内容
+    extractContentFromS1000D(xmlString) {
+      try {
+        // 简单提取description内容
+        const descriptionMatch = xmlString.match(/<description>([\s\S]*?)<\/description>/i);
+        if (!descriptionMatch || !descriptionMatch[1]) {
+          throw new Error('未找到description内容');
+        }
+        
+        // 反转义XML特殊字符
+        let content = descriptionMatch[1]
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&amp;/g, '&')
+          .replace(/&apos;/g, "'")
+          .replace(/&quot;/g, '"');
+        
+        // 移除可能的多余空格和换行
+        content = content.trim();
+        
+        return content;
+      } catch (e) {
+        console.error('S1000D导入错误:', e);
+        alert(`导入S1000D XML失败: ${e.message}`);
+        return '';
+      }
+    },
+    
+    // 验证当前XML
+    validateCurrentXml() {
+      const validationResult = this.validateS1000DXml(this.xmlPreview);
+      this.validationResult = validationResult;
+      this.showValidationModal = true;
+    },
+    
+    // 基本S1000D XML验证
+    validateS1000DXml(xmlString) {
+      try {
+        // 检查基本结构
+        const hasDmodule = xmlString.includes('<dmodule');
+        const hasIdstatus = xmlString.includes('<idstatus');
+        const hasContent = xmlString.includes('<content');
+        
+        if (!hasDmodule) {
+          return {
+            valid: false,
+            message: '无效的S1000D文档: 缺少dmodule根元素'
+          };
+        }
+        
+        if (!hasIdstatus) {
+          return {
+            valid: false,
+            message: '缺少必需的S1000D元素: idstatus'
+          };
+        }
+        
+        if (!hasContent) {
+          return {
+            valid: false,
+            message: '缺少必需的S1000D元素: content'
+          };
+        }
+        
+        // 检查dmc结构
+        const hasDmc = xmlString.includes('<dmc>');
+        const hasAvee = xmlString.includes('<avee>');
+        
+        if (!hasDmc || !hasAvee) {
+          return {
+            valid: false,
+            message: '无效的dmc结构: 缺少dmc或avee元素'
+          };
+        }
+        
+        return {
+          valid: true,
+          message: 'XML文档符合S1000D基本结构要求'
+        };
+      } catch (e) {
+        return {
+          valid: false,
+          message: `验证过程中发生错误: ${e.message}`
+        };
+      }
     }
 
   },
@@ -357,6 +605,7 @@ console.log('webview对象是否存在:', !!window.chrome?.webview);
   border: 1px solid #eee;
   padding: 15px;
   background: #fafafa;
+  text-align: left;
 }
 #main th, 
 #main td {
@@ -418,4 +667,96 @@ video {
   /* background-color:#096; */
   display: none !important;
 }
+.s1000d-editor-container {
+  display: flex;
+  flex-direction: column;
+  /*height: 100vh;*/
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.toolbar {
+  margin-bottom: 15px;
+}
+
+.tool-btn {
+  padding: 8px 15px;
+  margin-right: 10px;
+  background-color: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tool-btn:hover {
+  background-color: #66b1ff;
+}
+
+.editor-area {
+  display: flex;
+  flex: 1;
+  gap: 20px;
+}
+
+.editor {
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.xml-preview {
+  flex: 1;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  overflow: auto;
+  background-color: #f5f7fa;
+}
+
+.xml-preview pre {
+  white-space: pre-wrap;
+  font-family: Consolas, Monaco, monospace;
+  margin: 0;
+}
+
+.modal {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 60%;
+  max-height: 80%;
+  overflow: auto;
+}
+
+.close {
+  float: right;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.valid {
+  color: #67c23a;
+}
+
+.invalid {
+  color: #f56c6c;
+}
+/deep/ .editor .w-e-text{
+  text-align: left;
+}
 </style>