From 2af28b6a507c229a052cf48fdac916c2cb4be2aa Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Mon, 6 Apr 2026 21:59:13 +0800
Subject: [PATCH] feat(frontend): enhance SelectField and Tiptap components
 with improved class handling and word count display

---
 front/components/Field/SelectField.vue | 15 ++++-----------
 front/components/Tiptap/Index.vue      |  5 +++++
 front/lib/countWords.ts                |  9 +++++++++
 3 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 front/lib/countWords.ts

diff --git a/front/components/Field/SelectField.vue b/front/components/Field/SelectField.vue
index ad40b26..744056b 100644
--- a/front/components/Field/SelectField.vue
+++ b/front/components/Field/SelectField.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { RuleExpression } from 'vee-validate'
 type SelectValue = string | number
 const props = defineProps<{
@@ -19,13 +11,14 @@ const props = defineProps<{
         label?: string
         value: SelectValue
     }[]
+    class?: string
 }>()
 const { value } = useField<SelectValue>(props.name, props?.rules)
 </script>
 
 <template>
     <Select v-model="value">
-        <SelectTrigger>
+        <SelectTrigger :class="class">
             <SelectValue :placeholder="placeholder" />
         </SelectTrigger>
         <SelectContent>
@@ -37,4 +30,4 @@ const { value } = useField<SelectValue>(props.name, props?.rules)
             </SelectGroup>
         </SelectContent>
     </Select>
-</template>
\ No newline at end of file
+</template>
diff --git a/front/components/Tiptap/Index.vue b/front/components/Tiptap/Index.vue
index 222e86e..89df370 100644
--- a/front/components/Tiptap/Index.vue
+++ b/front/components/Tiptap/Index.vue
@@ -4,6 +4,7 @@ import StarterKit from '@tiptap/starter-kit'
 import { Markdown } from 'tiptap-markdown'
 import Placeholder from '@tiptap/extension-placeholder'
 import { cx } from 'class-variance-authority'
+import countWords from '@/lib/countWords'
 
 const props = defineProps<{
     modelValue?: string
@@ -15,6 +16,7 @@ const emit = defineEmits<{
 }>()
 
 const editor = ref<Editor | undefined>(undefined)
+
 onMounted(() => {
     editor.value = new Editor({
         content: props.modelValue,
@@ -58,4 +60,7 @@ onUnmounted(() => {
     >
     </editor-content>
     <!-- <BubbleMenuView :editor="editor as any" /> -->
+    <div v-if="modelValue?.length && modelValue?.length > 0" class="flex justify-end px-1 pt-1 text-xs text-gray-400 select-none">
+        {{ `${modelValue?.length ?? 0} 长度  ·  ${countWords(modelValue ?? '')} 字符` }}
+    </div>
 </template>
diff --git a/front/lib/countWords.ts b/front/lib/countWords.ts
new file mode 100644
index 0000000..b6fdd61
--- /dev/null
+++ b/front/lib/countWords.ts
@@ -0,0 +1,9 @@
+function countWords(text: string): number {
+    const trimmed = text?.trim()
+    if (!trimmed) return 0
+    const cjk = trimmed.match(/[\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/g)?.length ?? 0
+    const latin = trimmed.replace(/[\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/g, ' ').match(/\S+/g)?.length ?? 0
+    return cjk + latin
+}
+
+export default countWords