perf: merge with dev

Author: ibuler

.gitignore

@@ -47,6 +47,7 @@ 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

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/app/elements/asset-tree/asset-tree.component.scss

@@ -11,19 +11,33 @@
   @content;
 }
 
+:host {
+  display: block;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .tree-container {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
+  overflow: hidden;
   background-color: var(--el-asset-tree-bg-color);
 
   .tree-type {
+    flex: 0 0 30px;
+    min-height: 30px;
+    overflow: hidden;
     transition: all 0.3s;
 
     .tree-type-banner {
       position: relative;
       display: flex;
+      flex: 0 0 30px;
       height: 30px;
+      min-height: 30px;
       line-height: 30px;
       padding-right: 11px;
       padding-left: 15px;
@@ -141,9 +155,10 @@
 
     .tree-type-content {
       position: relative;
-      padding: 5px 10px;
-      min-height: 40px;
-      height: calc(100% - 31px);
+      flex: 1 1 0;
+      padding: 1px;
+      min-height: 0;
+      height: auto;
       background-color: var(--el-asset-tree-bg-color);
       overflow: hidden;
       scrollbar-gutter: stable both-edges;
@@ -170,7 +185,11 @@
     }
 
     &.expand-tree {
-      height: calc(100% - 31px);
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      min-height: 0;
+      height: auto;
     }
   }
 }

src/app/elements/asset-tree/asset-tree.component.ts

@@ -204,9 +204,9 @@ export class ElementAssetTreeComponent implements OnInit {
       ];
     }
 
-    // Asset node inside a favorite folder: connect / remove favorite
-    if (cnode.favoriteFolderId) {
-      const isK8sFav = cnode.meta.data.platform_type === 'k8s';
+    // Favorite asset leaf (under a folder or directly under root): connect / move / remove
+    if (cnode.isFavoriteLeaf) {
+      const isK8sFav = cnode.meta?.data?.platform_type === 'k8s';
       const favViewList = this._viewSrv.viewList;
       return [
         {
@@ -230,6 +230,7 @@ export class ElementAssetTreeComponent implements OnInit {
           hide: favViewList.length <= 0 || isK8sFav,
           click: this.onFavoriteConnect.bind(this, true)
         },
+        ...this.getMoveToMenus(cnode),
         {
           id: 'remove-favorite',
           name: this._i18n.instant('Remove favorite'),
@@ -324,12 +325,45 @@ export class ElementAssetTreeComponent implements OnInit {
     if (cnode.isParent) {
       return [];
     }
+    return this.buildFolderTargetMenus({
+      id: 'favorite-to',
+      name: this._i18n.instant('Favorite to'),
+      fa: 'fa-star-o',
+      assetId: this.resolveAssetId(cnode),
+      onSelect: this.onFavoriteTo.bind(this)
+    });
+  }
+
+  /**
+   * Build a "Move to" parent menu for a favorite-tree asset leaf,
+   * so it can be relocated into another favorite folder.
+   */
+  getMoveToMenus(cnode): any[] {
+    return this.buildFolderTargetMenus({
+      id: 'move-to',
+      name: this._i18n.instant('Move to'),
+      fa: 'fa-folder-o',
+      assetId: this.resolveAssetId(cnode),
+      onSelect: this.onMoveTo.bind(this)
+    });
+  }
+
+  /**
+   * Shared folder submenu builder for "Favorite to" / "Move to".
+   */
+  private buildFolderTargetMenus(options: {
+    id: string;
+    name: string;
+    fa: string;
+    assetId: string;
+    onSelect: (folderId: string) => void;
+  }): any[] {
     if (this.favoriteFolders.length === 0) {
       return [
         {
-          id: 'favorite-to',
-          name: this._i18n.instant('Favorite to'),
-          fa: 'fa-star-o',
+          id: options.id,
+          name: options.name,
+          fa: options.fa,
           hide: false,
           children: [
             {
@@ -341,21 +375,20 @@ export class ElementAssetTreeComponent implements OnInit {
         }
       ];
     }
-    const assetId = this.resolveAssetId(cnode);
-    const favoritedFolderIds = this.getAssetFavoriteFolderIds(assetId);
+    const favoritedFolderIds = this.getAssetFavoriteFolderIds(options.assetId);
     return [
       {
-        id: 'favorite-to',
-        name: this._i18n.instant('Favorite to'),
-        fa: 'fa-star-o',
+        id: options.id,
+        name: options.name,
+        fa: options.fa,
         hide: false,
         children: this.favoriteFolders.map(folder => {
           const folderId = this.resolveFolderId(folder);
           return {
-            id: 'favorite-to-' + folderId,
+            id: options.id + '-' + folderId,
             name: folder.name,
             checked: favoritedFolderIds.has(folderId),
-            click: this.onFavoriteTo.bind(this, folderId)
+            click: () => options.onSelect(folderId)
           };
         })
       }
@@ -636,23 +669,27 @@ export class ElementAssetTreeComponent implements OnInit {
             favoriteFolderRealId: folderId
           });
         });
-        // Asset leaf nodes (one asset belongs to one folder; leaf id still uses folder+asset)
+        // Asset leaf nodes: under folder when folder is set, otherwise under favorite root
         (favorites || []).forEach(fav => {
-          const folderId = this.resolveFolderId(fav.folder ?? fav.folder_id);
-          if (!folderId || !fav.asset_info) {
+          if (!fav.asset_info) {
             return;
           }
+          const folderId = this.resolveFolderId(fav.folder ?? fav.folder_id);
           const info = fav.asset_info;
           const assetId = this.resolveAssetId({ id: info.id, assetId: info.id, meta: info.meta });
+          if (!assetId) {
+            return;
+          }
           nodes.push({
-            id: this.buildFavoriteLeafId(folderId, assetId),
-            pId: 'folder-' + folderId,
+            id: this.buildFavoriteLeafId(folderId || 'root', assetId),
+            pId: folderId ? 'folder-' + folderId : 'favorite-root',
             name: info.name,
             isParent: false,
             iconSkin: info.iconSkin,
             chkDisabled: info.chkDisabled,
             assetId,
-            favoriteFolderId: folderId,
+            favoriteFolderId: folderId || null,
+            isFavoriteLeaf: true,
             meta: info.meta
           });
         });
@@ -1088,7 +1125,7 @@ export class ElementAssetTreeComponent implements OnInit {
                     this.refreshFavoriteTree();
                     return;
                   }
-                  return this.favoriteAssetToFolder(createdFolderId, favoriteNode, {
+                  return this.favoriteAssetToFolder(createdFolderId, favoriteNode, 'Favorite', {
                     refreshTreeOnSuccess: true
                   }).catch(() => {
                     this.refreshFavoriteTree();
@@ -1208,19 +1245,30 @@ export class ElementAssetTreeComponent implements OnInit {
    * @param folderId target folder id
    */
   onFavoriteTo(folderId: string) {
-    this.favoriteAssetToFolder(folderId, this.rightClickSelectNode).catch(() => {});
+    this.favoriteAssetToFolder(folderId, this.rightClickSelectNode, 'Favorite').catch(() => {});
+  }
+
+  /** Move a favorite-tree asset leaf into another folder. */
+  onMoveTo(folderId: string) {
+    this.favoriteAssetToFolder(folderId, this.rightClickSelectNode, 'Move').catch(() => {});
   }
 
   private favoriteAssetToFolder(
     folderId: string,
     srcNode: any,
+    actionKey: string = 'Favorite',
     options: { refreshTreeOnSuccess?: boolean } = {}
   ): Promise<void> {
     const normalizedFolderId = this.resolveFolderId(folderId);
     const assetId = this.resolveAssetId(srcNode);
     if (!normalizedFolderId || !assetId) {
       return Promise.resolve();
     }
+    const currentFolderId = this.resolveFolderId(srcNode.favoriteFolderId);
+    if (currentFolderId && currentFolderId === normalizedFolderId) {
+      this._message.warning(this._i18n.instant('Already in this folder'));
+      return Promise.resolve();
+    }
     const favoritingKey = `${assetId}-${normalizedFolderId}`;
     if (this.favoritingInFlight.has(favoritingKey)) {
       return Promise.resolve();
@@ -1230,7 +1278,7 @@ export class ElementAssetTreeComponent implements OnInit {
       .favoriteAssetToFolder(assetId, normalizedFolderId)
       .toPromise()
       .then(() => {
-        const msg = this._i18n.instant('Favorite') + ' ' + this._i18n.instant('success');
+        const msg = this._i18n.instant(actionKey) + ' ' + this._i18n.instant('success');
         this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });
         this.setFavoriteAssetRecord(normalizedFolderId, assetId, srcNode);
         if (options.refreshTreeOnSuccess) {
@@ -1291,22 +1339,26 @@ export class ElementAssetTreeComponent implements OnInit {
         chkDisabled: srcNode.chkDisabled,
         assetId: normalizedAssetId,
         favoriteFolderId: normalizedFolderId,
+        isFavoriteLeaf: true,
         meta: srcNode.meta
       }
     ]);
   }
 
   /**
-   * Remove an asset from its folder.
+   * Remove an asset from favorites (from a folder, or from root when folder is empty).
    * On success, only remove this single leaf node (instantly disappears),
    * without rebuilding the whole tree, keeping other folders' expand state.
    */
   onRemoveFromFolder() {
     const node = this.rightClickSelectNode;
     const assetId = node.assetId;
-    const folderId = node.favoriteFolderId;
+    const folderId = this.resolveFolderId(node.favoriteFolderId);
     const ztree = node.ztree;
-    this._http.removeFavoriteFromFolder(assetId, folderId).subscribe(() => {
+    const remove$ = folderId
+      ? this._http.removeFavoriteFromFolder(assetId, folderId)
+      : this._http.favoriteAsset(assetId, false);
+    remove$.subscribe(() => {
       this.removeFavoriteAssetRecord(folderId, assetId);
       const msg = this._i18n.instant('Remove favorite') + ' ' + this._i18n.instant('success');
       this._toastr.success(msg, '', { nzClass: 'custom-success-notification' });

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

@@ -1,18 +1,46 @@
-<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-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 *ngIf="chatAiApiEnabled" [style.display]="chatAIShown ? 'block' : 'none'" class="drawer-panel">
+    <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 chat-ai-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 class="content">
       <iframe
         #contentWindow
@@ -25,16 +53,3 @@
     </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> -->