feat 搭建架构骨架

src/views/profile/cpns/FeedbackForm.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import { AppButton, FileList, UploadArea } from '@/components'
+import type { FileInfo } from '@/types/api'
+import type { Feedback } from '@/types/business/profile'
+
+interface Props {
+  /** 递增时清空表单（父级提交成功/重置信号） */
+  resetSignal?: number
+}
+
+const props = withDefaults(defineProps<Props>(), { resetSignal: 0 })
+
+const emit = defineEmits<{
+  submit: [feedback: Feedback]
+  reset: []
+  preview: [file: FileInfo]
+}>()
+
+const form = reactive({
+  title: '',
+  description: '',
+})
+
+const attachments = reactive<FileInfo[]>([])
+
+function clear(): void {
+  form.title = ''
+  form.description = ''
+  attachments.splice(0, attachments.length)
+}
+
+watch(
+  () => props.resetSignal,
+  () => clear(),
+)
+
+function onUpload(file: File): void {
+  attachments.push({
+    name: file.name,
+    size: file.size,
+    uploadTime: new Date().toISOString().slice(0, 10),
+    url: '',
+  })
+}
+
+function onDeleteFile(file: FileInfo): void {
+  const index = attachments.indexOf(file)
+  if (index >= 0) attachments.splice(index, 1)
+}
+
+function onSubmit(): void {
+  emit('submit', {
+    title: form.title,
+    description: form.description,
+    attachments: [...attachments],
+  })
+}
+
+function onReset(): void {
+  emit('reset')
+}
+</script>
+
+<template>
+  <div class="feedback-form">
+    <div class="feedback-form__field">
+      <label class="feedback-form__label">反馈标题<span class="feedback-form__required">*</span></label>
+      <input
+        v-model="form.title"
+        class="feedback-form__input"
+        type="text"
+        placeholder="请简要描述您的反馈标题"
+        maxlength="50"
+      >
+    </div>
+
+    <div class="feedback-form__field">
+      <label class="feedback-form__label">详细描述<span class="feedback-form__required">*</span></label>
+      <textarea
+        v-model="form.description"
+        class="feedback-form__textarea"
+        placeholder="请详细描述您遇到的问题或建议，便于我们更快为您处理"
+        maxlength="500"
+        rows="6"
+      />
+      <span class="feedback-form__counter text-secondary">{{ form.description.length }}/500</span>
+    </div>
+
+
+    <p class="feedback-form__tip">
+      提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
+    </p>
+
+    <div class="feedback-form__field">
+      <label class="feedback-form__label">附件</label>
+      <UploadArea @upload="onUpload" />
+      <FileList
+        :files="attachments"
+        @preview="emit('preview', $event)"
+        @delete="onDeleteFile"
+      />
+    </div>
+
+    <div class="feedback-form__footer">
+      <AppButton type="primary" @click="onSubmit">
+        提交反馈
+      </AppButton>
+      <AppButton type="default" @click="onReset">
+        重置
+      </AppButton>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.feedback-form {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+  padding: @spacing-lg @spacing-xl;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__field {
+    .flex(column, flex-start);
+    gap: @spacing-xs;
+    width: 100%;
+  }
+
+  &__label {
+    font-size: @font-size-base;
+    color: @heading-color;
+  }
+
+  &__required {
+    margin-left: 2px;
+    color: @danger-color;
+  }
+
+  &__input {
+    width: 100%;
+    height: 40px;
+    padding: 0 @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: @primary-color;
+    }
+  }
+
+  &__textarea {
+    width: 100%;
+    padding: @spacing-sm @spacing-base;
+    border: 1px solid @border-color;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+    font-size: @font-size-base;
+    line-height: 1.6;
+    outline: none;
+    transition: border-color 0.2s;
+    resize: vertical;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: @primary-color;
+    }
+  }
+
+  &__counter {
+    align-self: flex-end;
+    font-size: @font-size-sm;
+  }
+
+  &__tip {
+    padding: @spacing-sm @spacing-base;
+    border-radius: @radius-base;
+    background: @primary-light;
+    color: @primary-color;
+    font-size: @font-size-sm;
+    line-height: 1.6;
+  }
+
+  &__footer {
+    .flex(row, flex-start);
+    gap: @spacing-sm;
+  }
+}
+</style>