feat: 个人中心

src/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue

@@ -3,19 +3,32 @@
     <div class="warning-title">
       <div>{{ warningData.title }}</div>
       <div class="sub-title mt-3">
-        <span>重要性</span>
-        <d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
+        <div>
+          <span>重要性</span>
+          <d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
+        </div>
+        <div>
+          <d-button v-show="mode === 'readonly'" class="edit-btn" icon="icon-edit" variant="text" title="编辑" @click="handleModeChange"/>
+          <d-button v-show="mode === 'editonly'" class="edit-btn" @click="handleModeChange">预览</d-button>
+        </div>
       </div>
     </div>
     <div class="warning-text">
-      <div class="text-box mb-5">
+      <!-- <div class="text-box mb-5">
         <div>一、概要</div>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.summary }}</p>
+        <d-textarea v-model="warningData.summary" id="textArea" autosize></d-textarea>
       </div>
       <div class="text-box">
         <div>二、修复方案</div>
         <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.fixMethod }}</p>
-      </div>
+        <d-textarea v-model="warningData.fixMethod" id="textArea2"></d-textarea>
+      </div> -->
+      <d-editor-md
+        v-model="warningData.text"
+        :mode="mode"
+        :toolbar-config="toolbarConfig"
+      ></d-editor-md>
     </div>
     <div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">可信开源代码库运营团队 {{ warningData.fromTime }}</div>
     <div v-if="propsData.type === 'system'" class="warning-operation">
@@ -35,12 +48,29 @@ const warningData = ref({
   importance: '高',
   summary: '近日，安全中心发现Apache lgnite远程代码执行漏洞（CVE-2024-52577）。在 2.6.0<Apache Ignite< 2.17.0版本中，由于lgnite未能正确实施类序列化过滤器，攻击者能够利用恶意序列化对象绕过安全检查，从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级，若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。',
   fixMethod: '升级Apache Ignite至安全版本：2.17.0',
-  fromTime: '2025-2-20'
+  fromTime: '2025-2-20',
+  text: `## 一、概要
+近日，安全中心发现Apache lgnite远程代码执行漏洞（CVE-2024-52577）。在 2.6.0<Apache Ignite< 2.17.0版本中，由于lgnite未能正确实施类序列化过滤器，攻击者能够利用恶意序列化对象绕过安全检查，从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级，若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。
+## 二、修复方案
+升级Apache Ignite至安全版本：2.17.0`
 });
+const toolbarConfig = [
+  ['undo', 'redo'],
+  ['h1', 'h2', 'bold', 'italic', 'strike', 'underline', 'color', 'font'],
+  ['ul', 'ol', 'checklist', 'code', 'link', 'image', 'table'],
+];
+const mode = ref('readonly');
 // warningData.value = propsData.warningData;
 const confirm = () => {
   emit('close');
 };
+const handleModeChange = () => {
+  if (mode.value === 'editonly') {
+    mode.value = 'readonly';
+  } else {
+    mode.value = 'editonly';
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -56,7 +86,9 @@ const confirm = () => {
     padding: 4px 20px 12px;
 
     .sub-title {
-      >span {
+      display: flex;
+      justify-content: space-between;
+      >div:first-of-type>span {
         margin-right: 12px;
         color: #808080;
         font-family: HarmonyOS Sans SC;
@@ -68,6 +100,22 @@ const confirm = () => {
   .warning-text {
     padding: 20px;
     background: #F6F6F8;
+    color: initial;
+
+    ::v-deep .dp-md-view {
+      h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+
+      p {
+        color: #252B3A;
+        font-family: 苹方-简;
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 400;
+      }
+    }
 
     .text-box {
 
@@ -80,11 +128,12 @@ const confirm = () => {
         line-height: 24px;
       }
 
-      p {
+      ::v-deep .devui-textarea {
         color: #252B3A;
         font-family: 苹方-简;
         font-size: 14px;
         line-height: 24px;
+        font-weight: 400;
       }
     }
   }