From 12f97cc1a443bf66dd3b919969c6af1459191eac Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Fri, 18 Apr 2025 23:14:33 +0800
Subject: [PATCH] fix(front): integrate VeeValidate rules in MarkdownInputField
 and enhance Tiptap styling for better user experience

---
 front/app.vue                                 | 5 +++++
 front/components/Field/MarkdownInputField.vue | 3 ++-
 front/components/Tiptap.vue                   | 2 +-
 front/package.json                            | 2 ++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/front/app.vue b/front/app.vue
index 406c1a7..9de59e6 100644
--- a/front/app.vue
+++ b/front/app.vue
@@ -1,5 +1,10 @@
 <!-- app.vue -->
 <script setup lang="ts">
+import { defineRule } from 'vee-validate';
+import { all } from '@vee-validate/rules';
+Object.entries(all).forEach(([name, rule]) => {
+  defineRule(name, rule);
+});
 // @ts-check
 const { $serwist } = useNuxtApp();
 $serwist?.addEventListener("installed", () => {
diff --git a/front/components/Field/MarkdownInputField.vue b/front/components/Field/MarkdownInputField.vue
index 11c2bea..56ef4ff 100644
--- a/front/components/Field/MarkdownInputField.vue
+++ b/front/components/Field/MarkdownInputField.vue
@@ -1,5 +1,5 @@
 <template>
-    <Field :name="name" v-slot="{ field }">
+    <Field :name="name" v-slot="{ field }" :rules="rules">
         <Tiptap :modelValue="field.value" @update:modelValue="field.onChange" v-bind="$attrs" />
     </Field>
 </template>
@@ -9,5 +9,6 @@ import Tiptap from '@/components/Tiptap.vue'
 
 const props = defineProps<{
     name: string
+    rules?: string
 }>()
 </script>
diff --git a/front/components/Tiptap.vue b/front/components/Tiptap.vue
index 738107e..6064f10 100644
--- a/front/components/Tiptap.vue
+++ b/front/components/Tiptap.vue
@@ -1,5 +1,5 @@
 <template>
-    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none" />
+    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1" />
 </template>
 
 <script setup lang="ts">
diff --git a/front/package.json b/front/package.json
index c5777d8..f654707 100644
--- a/front/package.json
+++ b/front/package.json
@@ -25,6 +25,7 @@
     "@tiptap/vue-3": "^2.11.7",
     "@types/lodash-es": "^4.17.12",
     "@vee-validate/nuxt": "^4.15.0",
+    "@vee-validate/rules": "^4.15.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
@@ -38,6 +39,7 @@
     "tailwindcss": "^4.1.3",
     "tiptap-markdown": "^0.8.10",
     "tw-animate-css": "^1.2.5",
+    "vaul-vue": "^0.4.1",
     "vue": "latest",
     "vue-router": "latest"
   },