refactor: 评论编辑初步

packages/home/src/components/home/article-comment.vue

@@ -69,7 +69,7 @@ export default {
   data() {
     return {
       showEditor: false,
-      publisher: this.$store.getters['comment/publisher'],
+      publisher: {},
       replying: null,
     }
   },

packages/home/src/components/home/comment-editor.vue

@@ -23,7 +23,7 @@
     <el-button
       type="danger"
       class="btn-editor"
-      @click="onClose"
+      @click="$emit('close')"
     >
       <el-icon><el-icon-close /></el-icon>
     </el-button>
@@ -36,21 +36,18 @@
         <el-form-item
           label="昵称"
           prop="publisher.name"
-          :rules="commentRules.publisher.fields.name"
         >
           <el-input v-model="comment.publisher.name" />
         </el-form-item>
         <el-form-item
           label="邮箱"
           prop="publisher.email"
-          :rules="commentRules.publisher.fields.email"
         >
           <el-input v-model="comment.publisher.email" />
         </el-form-item>
         <el-form-item
           label="网站"
           prop="publisher.website"
-          :rules="commentRules.publisher.fields.website"
         >
           <el-input v-model="comment.publisher.website" />
         </el-form-item>
@@ -76,98 +73,67 @@
     </el-form>
   </div>
 </template>
+<script lang="ts" setup>
+import {Check as ElIconCheck, Close as ElIconClose, DCaret as ElIconDCaret} from '@element-plus/icons-vue'
+import {ElButton, ElCol, ElForm, ElFormItem, ElInput, FormRules} from 'element-plus'
+import {reactive, ref} from 'vue'
 
-<script>
-import {
-  Check as ElIconCheck,
-  Close as ElIconClose,
-  DCaret as ElIconDCaret,
-} from '@element-plus/icons-vue'
-import {$emit, $off, $on, $once} from '../../utils/gogocodeTransfer.js'
-import {
-  ElButton as Button,
-  ElCol as Col,
-  ElForm as Form,
-  ElFormItem as FormItem,
-  ElInput as Input,
-} from 'element-plus'
+const emits = defineEmits(['submit', 'close'])
+const props = defineProps<{
+  display: boolean
+  publisher: {name: string; email: string; website: string}
+  reply: {publisher: {name: string; email: string; website: string}; content: string}
+}>()
 
 const defaultHeight = 300
-
-export default {
-  name: 'FreyjaCommentEditor',
-  components: {
-    ElButton: Button,
-    ElForm: Form,
-    ElFormItem: FormItem,
-    ElInput: Input,
-    ElCol: Col,
-    ElIconDCaret,
-    ElIconCheck,
-    ElIconClose,
-  },
-  props: {
-    display: Boolean,
-    publisher: Object,
-    reply: Object,
-  },
-  emits: ['submit', 'close'],
-  data() {
-    return {
-      beforeHeight: 0,
-      dragY: 0,
-      comment: {
-        publisher: this.publisher,
-        content: '',
+const height = ref(defaultHeight)
+const beforeHeight = ref(0)
+const dragY = ref(0)
+const commentForm = ref<InstanceType<typeof ElForm> | null>(null)
+const comment = reactive({
+  publisher: props.publisher,
+  content: '',
+})
+const commentRules = reactive({
+  publisher: {
+    type: 'object',
+    required: true,
+    fields: {
+      name: {
+        type: 'string',
+        required: true,
       },
-      height: defaultHeight,
-      commentRules: {
-        publisher: {
-          type: 'object',
-          required: true,
-          fields: {
-            name: {
-              type: 'string',
-              required: true,
-            },
-            email: {
-              type: 'email',
-              required: true,
-            },
-            website: {
-              type: 'url',
-              required: false,
-            },
-          },
-        },
-        content: {
-          type: 'string',
-          required: true,
-        },
+      email: {
+        type: 'email',
+        required: true,
+      },
+      website: {
+        type: 'url',
+        required: false,
       },
-    }
-  },
-  methods: {
-    onDragBtnSize(e) {
-      if (e.screenX === 0) return
-      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      this.height = this.beforeHeight + (this.dragY - e.pageY)
-    },
-    onDragstartBtnSize(e) {
-      this.dragY = e.pageY
-      this.beforeHeight = this.height
-    },
-    onClose() {
-      $emit(this, 'close')
-    },
-    onSubmit() {
-      this.$refs['commentForm'].validate((valid) => {
-        if (valid) {
-          $emit(this, 'submit', this.comment)
-        }
-      })
     },
   },
+  content: {
+    type: 'string',
+    required: true,
+  },
+} as FormRules<typeof comment>)
+
+
+function onDragBtnSize(e: DragEvent): void {
+  if (e.screenX === 0) return
+  height.value = beforeHeight.value + (dragY.value - e.pageY)
+}
+function onDragstartBtnSize(e: DragEvent): void {
+  dragY.value = e.pageY
+  beforeHeight.value = height.value
+}
+async function onSubmit(): Promise<void> {
+  await commentForm.value?.validate((valid) => {
+    if (valid) {
+      emits('submit', comment)
+    }
+  })
 }
 </script>
 

packages/home/src/components/home/menu-category.vue

@@ -4,20 +4,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'FreyjaMenuCategory',
-  data() {
-    this.$store.dispatch('home/getCategories')
-    return {
-      categories: this.$store.state.home.categories,
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      // eslint-disable-next-line no-console
-      console.log('213')
-    },
-  },
-}
+<script lang="ts" setup>
+import {useHomeStore} from '../../store/home.ts'
+
+const homeStore = useHomeStore()
+
+await homeStore.getCategories()
 </script>

packages/home/src/pages/home/HomeArticle.vue

@@ -37,7 +37,7 @@
 import lozad from 'lozad'
 import prismjs from 'prismjs'
 import {PageContext} from 'vike/types'
-import {inject, onMounted} from 'vue'
+import {inject, onMounted, ref} from 'vue'
 import {useRoute} from 'vue-router'
 import FreyjaArticleComment from '../../components/home/article-comment.vue'
 import {useArticleStore} from '../../store/article.ts'
@@ -49,16 +49,16 @@ const route = useRoute()
 
 const articleId = route.params.id as string
 
+const comments = ref([])
+
 onMounted(async () => {
   prismjs.highlightAll()
   lozad().observe()
-  await commentStore.list(articleId, 1)
+  comments.value = await commentStore.list(articleId, 1)
 })
 
 const pageContext = inject<PageContext>('pageContext')
-await articleStore.get(articleId)
-const article = articleStore.article
-const comments = commentStore.comments
+const article = await articleStore.get(articleId)
 if (pageContext) {
   pageContext.exports.title = article.title
 }

packages/home/src/store/comment.ts

@@ -67,6 +67,7 @@ export const useCommentStore = defineStore('comment', {
       }
 
       this.comments = await resp.json() as IComment[]
+      return this.comments
     },
     savePublisher(publisher: ICommentState['publisher']) {
       this.publisher = publisher