feat: v3.3.3

surmon-china · Dec 31, 2021 · 0367a90 · 0367a90
1 parent b1fe17a
commit 0367a90
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Surmon.me blog",
   "author": {
     "name": "Surmon",

diff --git a/src/components/comment/helper.ts b/src/components/comment/helper.ts
@@ -16,6 +16,7 @@ export enum CommentEvents {
   Sort = 'sort',
   Page = 'page',
   Vote = 'vote',
+  Blossom = 'blossom',
   Delete = 'delete',
   Reply = 'reply',
   CancelReply = 'cancelReply',

diff --git a/src/components/comment/index.vue b/src/components/comment/index.vue
@@ -11,27 +11,28 @@
       @sort="fetchSortComments"
     />
     <divider class="divider" size="lg" />
-    <comment-publisher
-      :id="ANCHOR.COMMENT_PUBLISHER_ELEMENT_ID"
-      :disabled="isLoading || isRootPosting"
-      :total="commentStore.pagination?.total"
-      :responsive="!plain"
-      :fetching="fetching"
-      :profile="guestProfile"
-      :hidden-avatar="plain"
-    >
-      <template #pen>
-        <comment-pen
-          v-model="rootPenState.content"
-          v-model:preview="rootPenState.preview"
-          :auto-focus="!plain"
-          :hidden-stationery="plain"
-          :disabled="isRootPosting || isLoading"
-          :posting="isRootPosting"
-          @submit="handleRootSubmit"
-        />
-      </template>
-    </comment-publisher>
+    <comment-publisher-main :fetching="fetching">
+      <comment-publisher
+        :id="ANCHOR.COMMENT_PUBLISHER_ELEMENT_ID"
+        :disabled="isLoading || isRootPosting"
+        :total="commentStore.pagination?.total"
+        :default-blossomed="plain ? true : false"
+        :profile="guestProfile"
+        :hidden-avatar="plain"
+      >
+        <template #pen>
+          <comment-pen
+            v-model="rootPenState.content"
+            v-model:preview="rootPenState.preview"
+            :auto-focus="plain ? false : true"
+            :hidden-stationery="plain"
+            :disabled="isRootPosting || isLoading"
+            :posting="isRootPosting"
+            @submit="handleRootSubmit"
+          />
+        </template>
+      </comment-publisher>
+    </comment-publisher-main>
     <divider class="divider" size="lg" />
     <comment-main
       :fetching="isLoading"
@@ -53,6 +54,7 @@
               :disabled="false"
               :profile="guestProfile"
               :bordered="true"
+              :default-blossomed="true"
               :hidden-avatar="plain"
               :fixed-avatar="payload.isChild"
             >
@@ -108,8 +110,9 @@
   import CommentMain from './main.vue'
   import CommentList from './list/index.vue'
   import CommentLoadmore from './loadmore.vue'
-  import CommentPublisher from './publisher.vue'
-  import CommentPen from './pen.vue'
+  import CommentPublisherMain from './publisher/main.vue'
+  import CommentPublisher from './publisher/publisher.vue'
+  import CommentPen from './publisher/pen.vue'
 
   export default defineComponent({
     name: 'Dsiqus',
@@ -118,6 +121,7 @@
       CommentMain,
       CommentList,
       CommentLoadmore,
+      CommentPublisherMain,
       CommentPublisher,
       CommentPen
     },
@@ -181,11 +185,10 @@
         commentState.replyPID = 0
       }
       const replyComment = (commentID: number) => {
+        commentState.replyPID = commentID
         gtag?.event('reply_comment', {
           event_category: GAEventCategories.Comment
         })
-
-        commentState.replyPID = commentID
       }
 
       const fetchCommentList = (params: CommentFetchParams = {}) => {

diff --git a/src/components/comment/publisher/main.vue b/src/components/comment/publisher/main.vue
@@ -0,0 +1,50 @@
+<template>
+  <placeholder :loading="fetching">
+    <template #loading>
+      <div class="publisher-skeleton" key="skeleton">
+        <div class="avatar">
+          <skeleton-base />
+        </div>
+        <div class="content">
+          <skeleton-base />
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <slot></slot>
+    </template>
+  </placeholder>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  export default defineComponent({
+    name: 'CommentPublisherMain',
+    props: {
+      fetching: {
+        type: Boolean,
+        default: false
+      }
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import 'src/styles/init.scss';
+
+  $avatar-size: 4rem;
+
+  .publisher-skeleton {
+    display: flex;
+    height: $avatar-size;
+
+    .avatar {
+      width: $avatar-size;
+      margin-right: $gap;
+    }
+
+    .content {
+      flex-grow: 1;
+    }
+  }
+</style>
diff --git a/src/components/comment/pen.vue → src/components/comment/publisher/pen.vue b/src/components/comment/pen.vue → src/components/comment/publisher/pen.vue
@@ -98,7 +98,7 @@
   import { markdownToHTML } from '/@/transforms/markdown'
   import { focusPosition } from '/@/utils/editable'
   import { VALUABLE_LINKS } from '/@/config/app.config'
-  import { CommentEvents, EMOJIS } from './helper'
+  import { CommentEvents, EMOJIS } from '../helper'
 
   export enum PenEvents {
     Update = 'update:modelValue',

diff --git a/src/components/comment/publisher.vue → ...omponents/comment/publisher/publisher.vue b/src/components/comment/publisher.vue → ...omponents/comment/publisher/publisher.vue
@@ -1,87 +1,70 @@
 <template>
-  <placeholder :loading="fetching" @after-enter="handlePublisherRendered">
-    <template #loading>
-      <div class="publisher-skeleton" key="skeleton">
-        <div class="avatar">
-          <skeleton-base />
+  <form
+    key="publisher"
+    class="publisher"
+    name="comment"
+    :id="id"
+    :class="{
+      'hidden-avatar': hiddenAvatar,
+      'fixed-avatar': fixedAvatar,
+      blossomed,
+      bordered
+    }"
+  >
+    <transition name="module-slow">
+      <div class="profile" v-if="user.type === UserType.Null" v-show="blossomed">
+        <div class="name">
+          <input
+            v-model="profile.name"
+            required
+            type="text"
+            name="name"
+            autocomplete="on"
+            :disabled="disabled"
+            :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_NAME) + ' *'"
+          />
         </div>
-        <div class="content">
-          <skeleton-base />
+        <div class="email">
+          <input
+            v-model="profile.email"
+            required
+            type="email"
+            name="email"
+            autocomplete="on"
+            :disabled="disabled"
+            :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_EMAIL) + ' *'"
+          />
         </div>
+        <div class="site">
+          <input
+            v-model="profile.site"
+            type="url"
+            name="url"
+            autocomplete="on"
+            :disabled="disabled"
+            :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_SITE)"
+          />
+        </div>
+      </div>
+    </transition>
+    <div class="postbox">
+      <div class="avatar" v-if="!hiddenAvatar">
+        <uimage :alt="profile.name" :src="avatar" />
       </div>
-    </template>
-    <template #default>
-      <form
-        key="publisher"
-        class="publisher"
-        name="comment"
-        :id="id"
-        :class="{
-          'hidden-avatar': hiddenAvatar,
-          'fixed-avatar': fixedAvatar,
-          blossomed,
-          bordered
-        }"
-      >
-        <transition name="module-slow">
-          <div class="profile" v-if="user.type === UserType.Null" v-show="blossomed">
-            <div class="name">
-              <input
-                v-model="profile.name"
-                required
-                type="text"
-                name="name"
-                autocomplete="on"
-                :disabled="disabled"
-                :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_NAME) + ' *'"
-              />
-            </div>
-            <div class="email">
-              <input
-                v-model="profile.email"
-                required
-                type="email"
-                name="email"
-                autocomplete="on"
-                :disabled="disabled"
-                :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_EMAIL) + ' *'"
-              />
-            </div>
-            <div class="site">
-              <input
-                v-model="profile.site"
-                type="url"
-                name="url"
-                autocomplete="on"
-                :disabled="disabled"
-                :placeholder="t(LANGUAGE_KEYS.COMMENT_POST_SITE)"
-              />
-            </div>
-          </div>
-        </transition>
-        <div class="postbox">
-          <div class="avatar" v-if="!hiddenAvatar">
-            <uimage :alt="profile.name" :src="avatar" />
-          </div>
-          <transition name="module-slow">
-            <div class="editor" v-if="blossomed" key="editor">
-              <slot name="pen"></slot>
-            </div>
-            <div class="placeholder" v-else key="placeholder" @click="handleBlossom">
-              <i18n
-                zh="在下有一拙见，不知..."
-                :en="`${total ? 'Join' : 'Start'} the discussion...`"
-              />
-            </div>
-          </transition>
+      <transition name="module-slow">
+        <div class="editor" v-if="blossomed" key="editor">
+          <slot name="pen"></slot>
+        </div>
+        <div class="placeholder" v-else key="placeholder" @click="handleBlossom">
+          <i18n zh="在下有一拙见，不知..." :en="`${total ? 'Join' : 'Start'} the discussion...`" />
         </div>
-      </form>
-    </template>
-  </placeholder>
+      </transition>
+    </div>
+  </form>
 </template>
 
 <script lang="ts">
-  import { defineComponent, computed, ref, PropType } from 'vue'
+  import { defineComponent, ref, computed, PropType } from 'vue'
   import { Author } from '/@/store/comment'
   import { useEnhancer } from '/@/app/enhancer'
   import { useUniversalStore, UserType } from '/@/store/universal'
@@ -95,6 +78,7 @@
   import { markdownToHTML } from '/@/transforms/markdown'
   import { firstUpperCase } from '/@/transforms/text'
   import { LANGUAGE_KEYS } from '/@/language/key'
+  import { CommentEvents } from '../helper'
 
   export default defineComponent({
     name: 'CommentPublisher',
@@ -103,10 +87,6 @@
         type: String,
         default: ''
       },
-      fetching: {
-        type: Boolean,
-        default: false
-      },
       disabled: {
         type: Boolean,
         default: false
@@ -124,9 +104,9 @@
         type: Boolean,
         default: false
       },
-      responsive: {
+      defaultBlossomed: {
         type: Boolean,
-        default: false
+        default: true
       },
       hiddenAvatar: {
         type: Boolean,
@@ -137,7 +117,8 @@
         required: false
       }
     },
-    setup(props) {
+    emits: [CommentEvents.Blossom],
+    setup(props, context) {
       const { i18n, gtag } = useEnhancer()
       const universalStore = useUniversalStore()
       const user = computed(() => universalStore.user)
@@ -156,19 +137,15 @@
         }
       })
 
-      const blossomed = ref(props.responsive ? false : true)
+      const blossomed = ref(props.defaultBlossomed)
       const handleBlossom = () => {
         blossomed.value = true
+        context.emit(CommentEvents.Blossom)
         gtag?.event('focus_publisher', {
           event_category: GAEventCategories.Comment
         })
       }
 
-      // reset blossomed state when rerender publisher
-      const handlePublisherRendered = () => {
-        blossomed.value = false
-      }
-
       return {
         user,
         avatar,
@@ -179,8 +156,7 @@
         t: i18n.t,
         firstUpperCase,
         markdownToHTML,
-        handleBlossom,
-        handlePublisherRendered
+        handleBlossom
       }
     }
   })