图优化

web/src/components.d.ts

@@ -54,6 +54,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    NotificationRichTextEditor: typeof import('./components/NotificationRichTextEditor.vue')['default']
     PerformanceReportPanel: typeof import('./components/PerformanceReportPanel.vue')['default']
     RichMessageContent: typeof import('./components/RichMessageContent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

web/src/components/NotificationRichTextEditor.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { Ckeditor } from '@ckeditor/ckeditor5-vue'
+import {
+  AutoLink,
+  BlockQuote,
+  Bold,
+  ClassicEditor,
+  Essentials,
+  Heading,
+  Image,
+  ImageCaption,
+  ImageInsert,
+  ImageInsertViaUrl,
+  ImageResize,
+  ImageStyle,
+  ImageToolbar,
+  Italic,
+  Link,
+  LinkImage,
+  List,
+  Paragraph,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableProperties,
+  TableToolbar,
+  type EditorConfig,
+} from 'ckeditor5'
+import 'ckeditor5/ckeditor5.css'
+
+const model = defineModel<string>({ required: true })
+
+const editorConfig: EditorConfig = {
+  licenseKey: import.meta.env.VITE_CKEDITOR_LICENSE_KEY || 'GPL',
+  plugins: [
+    Essentials, Paragraph, Heading, Bold, Italic, Link, AutoLink, List, BlockQuote,
+    Image, ImageCaption, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle,
+    ImageToolbar, LinkImage, Table, TableCaption, TableCellProperties,
+    TableColumnResize, TableProperties, TableToolbar,
+  ],
+  toolbar: {
+    items: [
+      'heading', '|', 'bold', 'italic', 'link', '|', 'insertTable', 'insertImage',
+      '|', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo',
+    ],
+    shouldNotGroupWhenFull: false,
+  },
+  heading: {
+    options: [
+      { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
+      { model: 'heading2', view: 'h2', title: '标题', class: 'ck-heading_heading2' },
+      { model: 'heading3', view: 'h3', title: '小标题', class: 'ck-heading_heading3' },
+    ],
+  },
+  link: { addTargetToExternalLinks: true, defaultProtocol: 'https://' },
+  image: {
+    insert: { integrations: ['insertImageViaUrl'] },
+    toolbar: [
+      'toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline',
+      'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage', 'linkImage',
+    ],
+  },
+  table: {
+    contentToolbar: [
+      'tableColumn', 'tableRow', 'mergeTableCells', 'toggleTableCaption',
+      'tableProperties', 'tableCellProperties',
+    ],
+  },
+}
+</script>
+
+<template>
+  <Ckeditor
+    v-model="model"
+    :editor="ClassicEditor"
+    :config="editorConfig"
+  />
+</template>

web/src/views/CourseGradeStatisticsView.vue

@@ -1,10 +1,23 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ArrowLeft, Refresh } from '@element-plus/icons-vue'
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart } from 'echarts/charts'
+import { AriaComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
 import { useRoute, useRouter } from 'vue-router'
 import http, { apiErrorMessage } from '../api/http'
 
+echarts.use([
+  AriaComponent,
+  BarChart,
+  CanvasRenderer,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  TooltipComponent,
+])
+
 const route = useRoute()
 const router = useRouter()
 const loading = ref(false)