feat 搭建架构骨架

src/views/profile/feedback.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FileInfo } from '@/types/api'
+import type { Feedback } from '@/types/business/profile'
+import { useProfileStore } from '@/stores/modules/profile'
+import FeedbackForm from './cpns/FeedbackForm.vue'
+
+const profileStore = useProfileStore()
+
+const resetSignal = ref(0)
+
+function onSubmit(feedback: Feedback): void {
+  if (!feedback.title.trim()) {
+    ElMessage.warning('请填写反馈标题')
+    return
+  }
+  if (!feedback.description.trim()) {
+    ElMessage.warning('请填写详细描述')
+    return
+  }
+  void profileStore.submitFeedback(feedback).then(() => {
+    ElMessage.success('提交成功')
+    resetSignal.value += 1
+  })
+}
+
+function onReset(): void {
+  resetSignal.value += 1
+}
+
+function onPreview(file: FileInfo): void {
+  if (file.url) {
+    window.open(file.url, '_blank')
+    return
+  }
+  ElMessage.info('附件预览待接口接入')
+}
+</script>
+
+<template>
+  <div class="feedback-page">
+    <header class="feedback-page__head">
+      <h2 class="feedback-page__title">
+        意见反馈
+      </h2>
+      <p class="feedback-page__sub text-secondary">
+        您的每一条建议都是我们前进的动力
+      </p>
+    </header>
+
+    <FeedbackForm
+      :reset-signal="resetSignal"
+      @submit="onSubmit"
+      @reset="onReset"
+      @preview="onPreview"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.feedback-page {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  width: 100%;
+
+  &__head {
+    .flex(column, flex-start);
+    gap: @spacing-xs;
+    width: 100%;
+    padding: @spacing-base @spacing-xl;
+    border-radius: @radius-lg;
+    background: @white;
+    box-shadow: @shadow-base;
+  }
+
+  &__title {
+    font-size: @font-size-lg;
+    font-weight: 600;
+    color: @heading-color;
+  }
+
+  &__sub {
+    font-size: @font-size-base;
+  }
+}
+</style>