Add issue report dialog service (#2284)

Co-authored-by: huchenlei <huchenlei@proton.me>

src/components/dialog/content/FeedbackDialogContent.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="p-8 h-full min-w-96">
-    <div class="flex flex-col items-center">
-      <h3 class="text-4xl">{{ $t('g.feedback') }}</h3>
-    </div>
-  </div>
-  <Divider />
-  <div>
-    <ReportIssuePanel
-      error-type="Feedback"
-      :title="$t('issueReport.feedbackTitle')"
-      :default-fields="['SystemStats', 'Settings']"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-
-import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
-</script>
-
-<style scoped>
-:deep(.p-panel) {
-  @apply border-none;
-}
-</style>

src/components/dialog/content/IssueReportDialogContent.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="p-2 h-full" aria-labelledby="issue-report-title">
+    <Panel
+      :pt="{
+        root: 'border-none',
+        content: 'p-0'
+      }"
+    >
+      <template #header>
+        <header class="flex flex-col items-center">
+          <h2 id="issue-report-title" class="text-4xl">{{ title }}</h2>
+          <span v-if="subtitle" class="text-muted mt-2">{{ subtitle }}</span>
+        </header>
+      </template>
+      <ReportIssuePanel v-bind="panelProps" :pt="{ root: 'border-none' }" />
+    </Panel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Panel from 'primevue/panel'
+
+import type { IssueReportPanelProps } from '@/types/issueReportTypes'
+
+import ReportIssuePanel from './error/ReportIssuePanel.vue'
+
+defineProps<{
+  title: string
+  subtitle?: string
+  panelProps: IssueReportPanelProps
+}>()
+</script>

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -67,19 +67,17 @@ import { useI18n } from 'vue-i18n'
 import CheckboxGroup from '@/components/common/CheckboxGroup.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import type { DefaultField, ReportField } from '@/types/issueReportTypes'
+import type {
+  DefaultField,
+  IssueReportPanelProps
+} from '@/types/issueReportTypes'
 
 const ISSUE_NAME = 'User reported issue'
 const DETAILS_MAX_LEN = 5_000
 const CONTACT_MAX_LEN = 320
 
-const props = defineProps<{
-  errorType: string
-  defaultFields?: DefaultField[]
-  extraFields?: ReportField[]
-  tags?: Record<string, string>
-  title?: string
-}>()
+const props = defineProps<IssueReportPanelProps>()
+
 const {
   defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'],
   tags = {}