feat(projects): 新增项目、执行、任务等功能

src/components/custom/business-rich-text-view.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { sanitizeHtml } from '@/utils/sanitize';
+
+defineOptions({ name: 'BusinessRichTextView' });
+
+interface Props {
+  value?: string | null;
+  emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  emptyText: '—'
+});
+
+const safeHtml = computed(() => sanitizeHtml(props.value));
+const isEmpty = computed(() => !safeHtml.value || safeHtml.value.replace(/<[^>]+>/g, '').trim() === '');
+</script>
+
+<template>
+  <div class="business-rich-text-view">
+    <span v-if="isEmpty" class="business-rich-text-view__empty">{{ props.emptyText }}</span>
+    <div v-else class="business-rich-text-view__content" v-html="safeHtml" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.business-rich-text-view {
+  width: 100%;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+
+  &__empty {
+    color: var(--el-text-color-placeholder);
+  }
+
+  &__content {
+    :deep(p) {
+      margin: 0 0 8px;
+    }
+
+    :deep(p:last-child) {
+      margin-bottom: 0;
+    }
+
+    :deep(img) {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+
+    :deep(ul),
+    :deep(ol) {
+      padding-left: 24px;
+      margin: 0 0 8px;
+    }
+
+    :deep(blockquote) {
+      padding: 6px 12px;
+      margin: 0 0 8px;
+      border-left: 3px solid var(--el-border-color);
+      color: var(--el-text-color-regular);
+      background: var(--el-fill-color-light);
+    }
+
+    :deep(table) {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 0 0 8px;
+    }
+
+    :deep(table td),
+    :deep(table th) {
+      padding: 4px 8px;
+      border: 1px solid var(--el-border-color);
+    }
+
+    :deep(a) {
+      color: var(--el-color-primary);
+      text-decoration: underline;
+    }
+  }
+}
+</style>