Refine UI

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Jun 18, 2024 · d490806 · d490806
1 parent be2dea9
commit d490806
Show file tree

Hide file tree

Showing 5 changed files with 1,245 additions and 1,048 deletions.
diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
@@ -1,5 +1,7 @@
-import './emoji-button';
+import type { User } from '@halo-dev/api-client';
+import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import {
   allowAnonymousCommentsContext,
@@ -9,12 +11,10 @@ import {
   kindContext,
   nameContext,
 } from './context';
-import { property, state } from 'lit/decorators.js';
-import type { User } from '@halo-dev/api-client';
+import './emoji-button';
+import './icons/icon-loading';
 import baseStyles from './styles/base';
-import { consume } from '@lit/context';
 import varStyles from './styles/var';
-import './icons/icon-loading';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -41,21 +41,12 @@ export class BaseForm extends LitElement {
   @state()
   name = '';
 
-  @property({ type: Boolean })
-  captchaRequired = false;
-
   @property({ type: String })
-  captchaImage = '';
+  captcha = '';
 
   @property({ type: Boolean })
   submitting = false;
 
-  @property({ type: String })
-  captchaCode = '';
-
-  @property({ type: String })
-  captchaCodeMsg = '';
-
   textareaRef: Ref<HTMLTextAreaElement> = createRef<HTMLTextAreaElement>();
 
   get customAccount() {
@@ -179,16 +170,6 @@ export class BaseForm extends LitElement {
                 placeholder="网站"
               />
               <a href=${this.loginUrl} rel="nofollow"> （已有该站点的账号） </a>
-              <div ?hidden=${!this.captchaRequired}>
-                <input
-                  name="captchaCode"
-                  value=${this.captchaCode}
-                  type="text"
-                  placeholder="验证码"
-                />
-                <span>${this.captchaCodeMsg}</span>
-                <img src="${this.captchaImage}" alt="captcha" width="100%" />
-              </div>
             </div>`
           : ''}
 
@@ -204,6 +185,15 @@ export class BaseForm extends LitElement {
               </button> `
             : ''}
           <div class="form__actions">
+            ${this.captcha
+              ? html`
+                  <div class="form__action--captcha">
+                    <input name="captchaCode" type="text" placeholder="请输入验证码" />
+                    <img src="${this.captcha}" alt="captcha" width="100%" />
+                  </div>
+                `
+              : ''}
+
             <emoji-button @emoji-select=${this.onEmojiSelect}></emoji-button>
             <button .disabled=${this.submitting} type="submit" class="form__button--submit">
               ${this.submitting
@@ -308,7 +298,7 @@ export class BaseForm extends LitElement {
         border: 0.05em solid var(--component-form-input-border-color);
         font-size: 0.875em;
         display: block;
-        height: 2.25em;
+        height: 2.65em;
         max-width: 100%;
         outline: 0;
         padding: 0.4em 0.75em;
@@ -371,12 +361,26 @@ export class BaseForm extends LitElement {
 
       .form__actions {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: 0.75em;
-        flex: 1 1 auto;
+        width: 100%;
         justify-content: flex-end;
       }
 
+      .form__action--captcha {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+        flex-direction: row-reverse;
+      }
+
+      .form__action--captcha img {
+        height: 2.25em;
+        width: auto;
+        border-radius: var(--base-border-radius);
+      }
+
       .form__button--submit {
         border-radius: var(--base-border-radius);
         background-color: var(--component-form-button-submit-bg-color);

diff --git a/packages/comment-widget/src/comment-form.ts b/packages/comment-widget/src/comment-form.ts
@@ -1,6 +1,10 @@
-import { html, LitElement } from 'lit';
-import { state } from 'lit/decorators.js';
+import { Comment, CommentRequest, User } from '@halo-dev/api-client';
 import { consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { Ref, createRef, ref } from 'lit/directives/ref.js';
+import './base-form';
+import { BaseForm } from './base-form';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -11,12 +15,8 @@ import {
   toastContext,
   versionContext,
 } from './context';
-import { Comment, CommentRequest, User } from '@halo-dev/api-client';
-import { createRef, Ref, ref } from 'lit/directives/ref.js';
-import { isRequireCaptcha, getCaptchaCodeHeader } from './utils/captcha';
-import { BaseForm } from './base-form';
-import './base-form';
 import { ToastManager } from './lit-toast';
+import { getCaptchaCodeHeader, isRequireCaptcha } from './utils/captcha';
 
 export class CommentForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -54,23 +54,14 @@ export class CommentForm extends LitElement {
   @state()
   submitting = false;
 
-  @state()
-  captchaRequired = false;
-
-  @state()
-  captchaImageBase64 = '';
-
-  @state()
-  captchaCodeMsg = '';
+  captcha = '';
 
   baseFormRef: Ref<BaseForm> = createRef<BaseForm>();
 
   override render() {
     return html` <base-form
       .submitting=${this.submitting}
-      .captchaRequired=${this.captchaRequired}
-      .captchaImage=${this.captchaImageBase64}
-      .captchaCodeMsg=${this.captchaCodeMsg}
+      .captcha=${this.captcha}
       ${ref(this.baseFormRef)}
       @submit="${this.onSubmit}"
     ></base-form>`;
@@ -128,16 +119,14 @@ export class CommentForm extends LitElement {
         body: JSON.stringify(commentRequest),
       });
 
-      console.log(response);
       if (isRequireCaptcha(response)) {
-        this.captchaRequired = true;
         const { captcha, detail } = await response.json();
-        this.captchaImageBase64 = captcha;
-        this.captchaCodeMsg = detail;
+        this.captcha = captcha;
+        this.toastManager?.warn(detail);
         return;
       }
-      this.captchaCodeMsg = ''
-      this.captchaRequired = false;
+
+      this.captcha = '';
 
       if (!response.ok) {
         throw new Error('评论失败，请稍后重试');

diff --git a/packages/comment-widget/src/utils/captcha.ts b/packages/comment-widget/src/utils/captcha.ts
@@ -1,5 +1,4 @@
 export const getCaptchaCodeHeader = (code: string): Record<string, string> => {
-  console.log('code input:', code)
   if (!code || code.trim().length === 0) {
     return {};
   }