Revert "fix: chat style; login check; asset auto connect"

This reverts commit f791b11.

Author: ZhaoJiSen

.gitignore

@@ -47,7 +47,6 @@ luna.tar.gz
 luna/
 package-lock.json
 .angular
-.yarn
 
 # generated at build time by scripts/generate-build-info.mjs
 /src/environments/build-info.ts

.yarnrc.yml

@@ -1,46 +1,18 @@
-<div class="chat-overlay-root">
-  <div #launcher [hidden]="chatAIShown" [ngStyle]="launcherStyle" class="chat-launcher">
-    <button
-      (keydown)="onLauncherKeydown($event)"
-      (lostpointercapture)="onLauncherLostPointerCapture($event)"
-      (pointerdown)="onLauncherPointerDown($event)"
-      [class.dragging]="isDragging"
-      aria-label="移动浮动工具栏"
-      class="chat-drag-handle"
-      type="button"
-    >
-      <nz-icon nzTheme="outline" nzType="holder" />
-    </button>
+<div id="chatContainer" class="chat-container">
+  <nz-float-button-group [hidden]="chatAIShown">
+    @if(isShowSetting && subViews.length === 1) {
+      <nz-float-button (click)="handleShowDrawer()" [nzIcon]="setting"></nz-float-button>
+    }
+    <nz-float-button (click)="showChatAI()" [hidden]="!chatAiApiEnabled" [nzIcon]="customer"> </nz-float-button>
+  </nz-float-button-group>
+  <ng-template #setting>
+    <nz-icon nzTheme="outline" nzType="setting" />
+  </ng-template>
+  <ng-template #customer>
+    <img alt="" class="chat-img" src="assets/icons/chat-ai.png" />
+  </ng-template>
 
-    <div class="chat-action-group">
-      @if (isShowSetting && subViews.length === 1) {
-        <button
-          (click)="handleShowDrawer()"
-          aria-label="打开设置"
-          class="chat-action-button"
-          type="button"
-        >
-          <nz-icon nzTheme="outline" nzType="setting" />
-        </button>
-      }
-      <button
-        (click)="showChatAI()"
-        [hidden]="!chatAiApiEnabled"
-        aria-label="打开智能问答"
-        class="chat-action-button"
-        type="button"
-      >
-        <img alt="" class="chat-img" src="assets/icons/chat-ai.png" />
-      </button>
-    </div>
-  </div>
-
-  <div
-    *ngIf="chatAiApiEnabled"
-    [class.chat-panel-expanded]="chatPanelExpanded"
-    [style.display]="chatAIShown ? 'block' : 'none'"
-    class="chat-panel"
-  >
+  <div *ngIf="chatAiApiEnabled" [style.display]="chatAIShown ? 'block' : 'none'" class="drawer-panel">
     <div class="content">
       <iframe
         #contentWindow
@@ -53,3 +25,16 @@
     </div>
   </div>
 </div>
+
+<!--   <div [hidden]="!showBtn || chatAIShown || !isShowSetting" id="dragBox"> -->
+<!--     <div -->
+<!--             (click)="onSettingOpenDrawer()" -->
+<!--             [hidden]="!isShowSetting || subViews.length > 1" -->
+<!--             class="drag-setting" -->
+<!--     > -->
+<!--       <i class="fa fa-cog"></i> -->
+<!--     </div> -->
+<!--     <div (click)="showChatAI()" [hidden]="!chatAiEnabled" class="robot-button"> -->
+<!--       <img alt="" class="chat-img" src="assets/icons/chat-ai.png"/> -->
+<!--     </div> -->
+<!--   </div> -->

src/app/elements/chat/chat.component.html

@@ -1,147 +1,113 @@
-:host {
-  pointer-events: none;
+nz-float-button-group,
+nz-float-button {
+  position: absolute;
+  right: 1px;
+  top: 0;
 }
 
-.chat-overlay-root {
+.chat-container {
   position: fixed;
-  inset: 0;
+  bottom: 200px;
+  right: 9px;
   z-index: 99999;
-  pointer-events: none;
-}
-
-.chat-launcher {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  width: 40px;
-  padding: 4px;
-  border-radius: 20px;
-  color: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.05);
-  box-shadow: none;
-  pointer-events: auto;
+  cursor: move;
   user-select: none;
-  z-index: 1;
-}
-
-.chat-drag-handle,
-.chat-action-button {
+  overflow: visible;
+  padding: 10px 0;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: 12.5px;
-  color: rgba(255, 255, 255, 0.5);
-  background: transparent;
-  cursor: pointer;
-  transition:
-    color 0.16s ease,
-    background 0.16s ease;
-
-  &:hover,
-  &:focus-visible {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.08);
-  }
-}
-
-.chat-drag-handle {
-  cursor: grab;
-  touch-action: none;
+  flex-direction: column;
+  align-items: flex-end;
 
-  &.dragging {
-    cursor: grabbing;
+  .content {
+    height: 100%;
+    iframe {
+      border: none;
+    }
   }
-}
-
-.chat-action-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  width: 32px;
-}
 
-.chat-action-button {
-  .anticon {
-    font-size: 16px;
+  .drawer-panel {
+    background-color: transparent;
+    position: fixed;
+    top: 0;
+    right: 440px;
+    width: 440px;
+    min-width: 260px;
+    height: 100vh;
+    user-select: none;
+    border-radius: 10px 0 0 10px;
+    transition: transform 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    box-shadow: 0 0 8px 4px #00000014;
+    transform: translate(100%);
+    z-index: 1000;
+    opacity: 0.95;
   }
 
-  .chat-img {
-    width: 16px;
-    height: 16px;
-    opacity: 0.5;
-    transition: opacity 0.16s ease;
+  .show {
+    transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
   }
 
-  &:hover .chat-img,
-  &:focus-visible .chat-img {
+  .show .modal {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
     opacity: 1;
   }
-}
-
-.chat-panel {
-  position: fixed;
-  right: 12px;
-  bottom: 12px;
-  width: min(440px, calc(100vw - 24px));
-  min-width: 260px;
-  height: min(400px, calc(100dvh - 24px));
-  overflow: hidden;
-  border-radius: 10px;
-  background: #fff;
-  box-shadow: 0 0 8px 4px #00000014;
-  pointer-events: auto;
-  transition:
-    width 0.25s cubic-bezier(0.7, 0.3, 0.1, 1),
-    height 0.25s cubic-bezier(0.7, 0.3, 0.1, 1),
-    border-radius 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-  z-index: 2;
 
-  &.chat-panel-expanded {
-    top: 0;
-    right: 0;
-    bottom: auto;
-    width: min(440px, 100vw);
-    height: 100dvh;
-    border-radius: 10px 0 0 10px;
+  .show .drawer-panel {
+    transform: translate(0);
   }
 
-  .content {
-    width: 100%;
-    height: 100%;
+  ::ng-deep {
+    .ant-float-btn-group {
+      position: absolute;
+      padding: 10px 0;
+      opacity: 1;
+    }
 
-    iframe {
-      display: block;
-      width: 100%;
-      height: 100%;
+    .ant-float-btn-group-circle .ant-float-btn-circle:not(:last-child) {
+      margin-bottom: 5px;
+    }
+
+    .ant-float-btn-default,
+    .ant-float-btn-default .ant-float-btn-body {
+      position: relative;
+      background: rgba(30, 30, 30, 0.85);
+      border-radius: 999px;
+      box-shadow: 0 6px 16px rgba(0,0,0,.30);
+      transition: background .2s ease, box-shadow .2s ease;
       border: none;
     }
-  }
-}
+    .ant-float-btn-default:hover,
+    .ant-float-btn-default:hover .ant-float-btn-body {
+      background: rgba(20, 20, 20, 0.92);
+      box-shadow: 0 8px 22px rgba(0,0,0,.36);
+    }
 
-::ng-deep {
-  .chat-drag-handle .anticon {
-    font-size: 16px;
-  }
-}
+    .ant-float-btn-default .ant-float-btn-body::before,
+    .ant-float-btn-default::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 999px;
+      pointer-events: none;
+      box-shadow:
+        inset 0 0 0 1px rgba(255,255,255,.65),
+        0 0 0 1px rgba(0,0,0,.75);
+    }
 
-@media (max-width: 480px) {
-  .chat-panel {
-    right: 6px;
-    bottom: 6px;
-    width: calc(100vw - 12px);
-    height: min(400px, calc(100dvh - 12px));
+    .ant-btn .anticon,
+    .ant-float-btn .anticon {
+      color: #fff;
+      filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
+    }
 
-    &.chat-panel-expanded {
-      right: 0;
-      width: 100vw;
-      border-radius: 0;
+    img.chat-img {
+      width: 18px;
+      height: 18px;
+      opacity: .95;
+      filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
     }
   }
 }