fix: 统一修改富文本详情样式问题

2024-02-28 11:25:34 +08:00 · 2024-02-28 11:25:34 +08:00 · b6cad47426
parent 7ffa913080
commit b6cad47426
8 changed files with 50 additions and 39 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -57,6 +57,7 @@
    "dayjs": "^1.11.9",
    "echarts": "^5.4.3",
    "fastq": "^1.15.0",
+    "github-markdown-css": "^5.5.1",
    "hotbox-minder": "1.0.15",
    "jsencrypt": "^3.3.2",
    "jsonpath-plus": "^8.0.0",
--- a/frontend/src/components/business/ms-comment/comment-item.vue
+++ b/frontend/src/components/business/ms-comment/comment-item.vue
@ -3,7 +3,7 @@
    <div class="p-1"> <MsAvatar avatar="word" /></div>
    <div class="flex w-full flex-col">
      <div class="font-medium text-[var(--color-text-1)]">{{ props.element.createUser }}</div>
-      <div v-dompurify-html="props.element.content" class="mt-[4px] text-[var(--color-text-2)]"></div>
+      <div v-dompurify-html="props.element.content" class="markdown-body mt-[4px]"></div>

      <div class="mb-4 mt-[16px] flex flex-row items-center">
        <div class="text-[var(--color-text-4)]">{{
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -6,7 +6,7 @@ import '@arco-themes/vue-ms-theme-default/index.less';
 import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 import SvgIcon from '@/components/pure/svg-icon/index.vue';
 import App from './App.vue';
-
+import 'github-markdown-css/github-markdown-light.css';
 // eslint-disable-next-line import/no-unresolved
 import 'virtual:svg-icons-register';
 import directive from './directive';
--- a/frontend/src/views/bug-management/components/bugDetailTab.vue
+++ b/frontend/src/views/bug-management/components/bugDetailTab.vue
@ -18,7 +18,7 @@
        :placeholder="t('bugManagement.edit.contentPlaceholder')"
        :upload-image="handleUploadImage"
      />
-      <div v-else v-dompurify-html="form?.description || '-'" class="text-[var(--color-text-3)]"></div>
+      <div v-else v-dompurify-html="form?.description || '-'" class="markdown-body"></div>
    </div>
    <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
      <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
@ -159,41 +159,41 @@
 </template>

 <script setup lang="ts">
-import {Message} from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';

-import MsButton from '@/components/pure/ms-button/index.vue';
-import {FormRuleItem} from '@/components/pure/ms-form-create/types';
-import MsIconfont from '@/components/pure/ms-icon-font/index.vue';
-import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
-import MsFileList from '@/components/pure/ms-upload/fileList.vue';
-import {MsFileItem} from '@/components/pure/ms-upload/types';
-import RelateFileDrawer from '@/components/business/ms-link-file/associatedFileDrawer.vue';
-import TransferModal from '@/views/case-management/caseManagementFeature/components/tabContent/transferModal.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import { FormRuleItem } from '@/components/pure/ms-form-create/types';
+  import MsIconfont from '@/components/pure/ms-icon-font/index.vue';
+  import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
+  import MsFileList from '@/components/pure/ms-upload/fileList.vue';
+  import { MsFileItem } from '@/components/pure/ms-upload/types';
+  import RelateFileDrawer from '@/components/business/ms-link-file/associatedFileDrawer.vue';
+  import TransferModal from '@/views/case-management/caseManagementFeature/components/tabContent/transferModal.vue';

-import {
-  checkFileIsUpdateRequest,
-  createOrUpdateBug,
-  deleteFileOrCancelAssociation,
-  downloadFileRequest,
-  editorUploadFile,
-  getAssociatedFileList,
-  previewFile,
-  transferFileRequest,
-  updateFile,
-  uploadOrAssociationFile,
-} from '@/api/modules/bug-management';
-import {getModules, getModulesCount} from '@/api/modules/project-management/fileManagement';
-import {useI18n} from '@/hooks/useI18n';
-import {useAppStore} from '@/store';
-import {downloadByteFile, sleep} from '@/utils';
+  import {
+    checkFileIsUpdateRequest,
+    createOrUpdateBug,
+    deleteFileOrCancelAssociation,
+    downloadFileRequest,
+    editorUploadFile,
+    getAssociatedFileList,
+    previewFile,
+    transferFileRequest,
+    updateFile,
+    uploadOrAssociationFile,
+  } from '@/api/modules/bug-management';
+  import { getModules, getModulesCount } from '@/api/modules/project-management/fileManagement';
+  import { useI18n } from '@/hooks/useI18n';
+  import { useAppStore } from '@/store';
+  import { downloadByteFile, sleep } from '@/utils';

-import {BugEditCustomFieldItem, BugEditFormObject} from '@/models/bug-management';
-import {AssociatedList, AttachFileInfo} from '@/models/caseManagement/featureCase';
-import {TableQueryParams} from '@/models/common';
+  import { BugEditCustomFieldItem, BugEditFormObject } from '@/models/bug-management';
+  import { AssociatedList, AttachFileInfo } from '@/models/caseManagement/featureCase';
+  import { TableQueryParams } from '@/models/common';

-import {convertToFileByBug, convertToFileByDetail} from '@/views/bug-management/utils';
+  import { convertToFileByBug, convertToFileByDetail } from '@/views/bug-management/utils';

-defineOptions({
+  defineOptions({
    name: 'BugDetailTab',
  });

@ -432,7 +432,7 @@ defineOptions({
        templateId: props.detailInfo.templateId,
        customFields,
      };
-      console.log(tmpObj)
+      console.log(tmpObj);
      // 执行保存操作
      const res = await createOrUpdateBug({ request: tmpObj, fileList: fileList.value as unknown as File[] });
      if (res) {
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
@ -282,7 +282,12 @@
      id: JSON.parse(platformInfo.value.demand_platform_config).zentaoId,
      caseId: props.caseId,
      demandPlatform: platformInfo.value.platform_key,
-      demandList,
+      demandList: propsRes.value.selectorStatus === 'all' ? [] : demandList,
+      functionalDemandBatchRequest: {
+        keyword: platformKeyword.value,
+        excludeIds: [...propsRes.value.excludeKeys],
+        selectAll: propsRes.value.selectorStatus === 'all',
+      },
    };
    try {
      drawerLoading.value = true;
@ -386,6 +391,8 @@
    switch (platformInfo.value.platform_key) {
      case 'zentao':
        return t('caseManagement.featureCase.zentao');
+      case 'jira':
+        return t('caseManagement.featureCase.jira');
      default:
        break;
    }
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
@ -28,7 +28,7 @@
          :upload-image="handleUploadImage"
          class="mt-2"
        />
-        <div v-else v-dompurify-html="detailForm?.prerequisite || '-'"></div>
+        <div v-else v-dompurify-html="detailForm?.prerequisite || '-'" class="markdown-body"></div>
      </a-form-item>
      <a-form-item
        field="step"
@ -69,6 +69,7 @@
        <div
          v-if="detailForm.caseEditType === 'TEXT' && !isEditPreposition"
          v-dompurify-html="detailForm.textDescription || '-'"
+          class="markdown-body"
        ></div>
      </a-form-item>
      <a-form-item
@ -82,7 +83,7 @@
          v-model:filed-ids="expectedResultFileIds"
          :upload-image="handleUploadImage"
        />
-        <div v-else v-dompurify-html="detailForm.expectedResult || '-'"></div>
+        <div v-else v-dompurify-html="detailForm.expectedResult || '-'" class="markdown-body"></div>
      </a-form-item>
      <a-form-item field="description" :label="t('caseManagement.featureCase.remark')">
        <MsRichText
@ -91,7 +92,7 @@
          v-model:raw="detailForm.description"
          :upload-image="handleUploadImage"
        />
-        <div v-else v-dompurify-html="detailForm.description || '-'"></div>
+        <div v-else v-dompurify-html="detailForm.description || '-'" class="markdown-body"></div>
      </a-form-item>
      <div v-if="isEditPreposition" class="flex justify-end">
        <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
--- a/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
@ -255,7 +255,8 @@ export default {
  'caseManagement.featureCase.associatedSuccess': 'Associated with success',
  'caseManagement.featureCase.defectSource': 'defect Source',
  'caseManagement.featureCase.sortSuccess': 'Sort successfully',
-  'caseManagement.featureCase.zentao': 'zentao',
+  'caseManagement.featureCase.zentao': 'ZenTao',
+  'caseManagement.featureCase.jira': 'JIRA',
  'caseManagement.featureCase.searchPlaceholder': 'Search by ID, name, or tag',
  'caseManagement.featureCase.ModuleOwned': 'Module owned',
 };
--- a/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
@ -251,6 +251,7 @@ export default {
  'caseManagement.featureCase.defectSource': '缺陷来源',
  'caseManagement.featureCase.sortSuccess': '排序成功',
  'caseManagement.featureCase.zentao': '禅道',
+  'caseManagement.featureCase.jira': 'JIRA',
  'caseManagement.featureCase.searchPlaceholder': '通过ID、名称或标签搜索',
  'caseManagement.featureCase.ModuleOwned': '所属模块',
 };