feat: 点击chatgpt的时候增加loading

Tencent · Jul 31, 2023 · ede7e45 · ede7e45
1 parent 104e992
commit ede7e45
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss
@@ -207,6 +207,26 @@
   box-shadow: $toolbarShadowLight;
   background: $toolbarBgLight;
   overflow: hidden;
+  .icon-loading {
+    &.loading {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+    }
+
+    &.loading:after {
+      content: " ";
+      display: block;
+      width: 8px;
+      height: 8px;
+      margin-left: 2px;
+      margin-top: -2px;
+      border-radius: 50%;
+      border: 2px solid #000;
+      border-color: #000 transparent #000 transparent;
+      animation: loading 1.2s linear infinite;
+    }
+  }
 
   [data-toolbar-theme='dark'] & {
     background: $toolbarBgDark;

diff --git a/src/toolbars/hooks/ChatGpt.js b/src/toolbars/hooks/ChatGpt.js
@@ -98,6 +98,8 @@ export default class ChatGpt extends MenuBase {
    * 在编辑器中添加文字
    */
   concatText(selection, text) {
+    this.button.className = this.button.className.replace('icon-loading loading', '');
+    this.button.innerText = this.button.title;
     this.editor?.editor?.replaceSelection(`${selection || ''} \n${text}`);
     this.editor?.editor?.focus();
   }
@@ -111,6 +113,14 @@ export default class ChatGpt extends MenuBase {
     if (!this.openai) {
       return;
     }
+    // 增加loading
+    // eslint-disable-next-line prefer-destructuring
+    this.button = this.$cherry.wrapperDom.getElementsByClassName('cherry-toolbar-chatgpt')[0];
+    if (/icon-loading loading/.test(this.button.className)) {
+      return;
+    }
+    this.button.className += ' icon-loading loading';
+    this.button.innerText = '';
     // const that = this;
     const inputText = selection || this.$cherry.editor.editor.getValue();
     queryMap[name]