feat(frontend): enhance SelectField and Tiptap components with improved class handling and word count display

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>
+</template>

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>

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