Situation-Awareness-Platform-Frontend/src/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue

<template>
  <div class="warning-detail-container">
    <div class="warning-title">
      <div style="padding-right: 20px;">{{ warningData.subject }}</div>
      <div class="sub-title mt-3">
        <div>
          <span>重要性</span>
          <d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
        </div>
        <div v-if="propsData.type === 'system'">
          <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">
      <d-editor-md
        v-model="warningData.overview"
        :mode="mode"
        :toolbar-config="toolbarConfig"
      ></d-editor-md>
    </div>
    <div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">{{warningData.group}} {{ warningData.publishTime }}</div>
    <div v-if="propsData.type === 'system'" class="warning-operation">
      <d-button @click="confirm" variant="solid" class="mr-2">确定</d-button>
      <d-button @click="$emit('close')">取消</d-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['close']);
const propsData = defineProps(['type', 'warningData']);
const warningData = ref({});
const toolbarConfig = [
  ['undo', 'redo'],
  ['h1', 'h2', 'bold', 'italic', 'strike', 'underline', 'color', 'font'],
  ['ul', 'ol', 'checklist', 'code', 'link', 'image', 'table'],
];
const mode = ref('readonly');
console.log(propsData.warningData)
warningData.value = propsData.warningData ?? {
  subject: '【漏洞排查预警】ApacheIgnite远程代码执行漏洞排查（CVE-2024-52577)',
  importance: '高',
  group: '可信开源代码库运营团队',
  pulishTime: '2025-2-20',
  overview: `## 一、概要
近日，安全中心发现Apache lgnite远程代码执行漏洞（CVE-2024-52577）。在 2.6.0<Apache Ignite< 2.17.0版本中，由于lgnite未能正确实施类序列化过滤器，攻击者能够利用恶意序列化对象绕过安全检查，从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级，若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。
## 二、修复方案
升级Apache Ignite至安全版本：2.17.0`
};
const confirm = () => {
  emit('close');
};
const handleModeChange = () => {
  if (mode.value === 'editonly') {
    mode.value = 'readonly';
  } else {
    mode.value = 'editonly';
  }
};
</script>

<style scoped lang="scss">
.warning-detail-container {
  width: 600px;

  .warning-title {
    color: #000000;
    font-family: HarmonyOS Sans SC;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    padding: 20px 20px 12px;

    .sub-title {
      display: flex;
      justify-content: space-between;
      >div:first-of-type>span {
        margin-right: 12px;
        color: #808080;
        font-family: HarmonyOS Sans SC;
        font-size: 12px;
      }
    }
  }
  
  .warning-text {
    padding: 20px 20px 0;
    background: #F6F6F8;
    color: initial;

    :deep .dp-md-readonly {
      .dp-md-toolbar-container {
        display: none;
      }
    }

    :deep .dp-md-view {
      background-color: #F6F6F8;

      h2 {
        font-size: 1.5em;
        font-weight: bold;
      }

      p {
        color: #252B3A;
        font-family: 苹方-简;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
      }
    }

    .text-box {

      div {
        margin-bottom: 8px;
        color: #252B3A;
        font-family: HarmonyOS Sans SC;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
      }

      ::v-deep .devui-textarea {
        color: #252B3A;
        font-family: 苹方-简;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
      }
    }
  }

  .warning-from {
    background: #F6F6F8;
    color: #808080;
    font-family: HarmonyOS Sans SC;
    font-size: 14px;
    text-align: center;
    padding: 20px;
  }

  .warning-operation {
    text-align: center;
    padding: 20px;
  }
}
</style>