Merge branch 'master' into theme-update

Signed-off-by: tomsun28 <tomsun28@outlook.com>

web-app/src/app/layout/basic/basic.component.less

@@ -2,11 +2,23 @@
 /* Import system theme variables */
 @import 'src/styles/theme.less';
 
+/* CSS Variables for theme support */
 :host {
+  /* Light theme variables */
+  --background-color: #f5f7fa;
+  --sidebar-background: #ffffff;
+  --content-background: #ffffff;
+  --border-color: rgba(255, 255, 255, 0.2);
+  --shadow-color: rgba(0, 0, 0, 0.06);
+  --primary-color: @primary-color;
+  --primary-color-light: lighten(@primary-color, 10%);
+
   display: block;  /* Change to block layout to avoid extra whitespace */
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--background-color);
+  min-height: 100vh;
 
   @media (max-width: 1200px) {
     .page-header-item {
@@ -20,6 +32,288 @@
   }
 }
 
+/* Dark theme variables */
+:host.dark {
+  --background-color: #141414;
+  --sidebar-background: #1f1f1f;
+  --content-background: #1f1f1f;
+  --border-color: rgba(255, 255, 255, 0.1);
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Dark theme support for ng-alain */
+:host ::ng-deep .dark {
+  --background-color: #141414;
+  --sidebar-background: #1f1f1f;
+  --content-background: #1f1f1f;
+  --border-color: rgba(255, 255, 255, 0.1);
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Global dark theme support */
+[data-theme='dark'] :host,
+.dark :host {
+  --background-color: #141414;
+  --sidebar-background: #1f1f1f;
+  --content-background: #1f1f1f;
+  --border-color: rgba(255, 255, 255, 0.1);
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Modern Layout Styles with Rounded Separation - Complete Override */
+:host ::ng-deep {
+  /* Reset all default ng-alain positioning - exclude header items */
+  .alain-default {
+    position: static !important;
+    transform: none !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  .alain-default__aside,
+  .alain-default__content {
+    position: static !important;
+    transform: none !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+  }
+
+  /* Layout container styling with CSS Grid */
+  .alain-default {
+    background-color: var(--background-color, #f5f7fa) !important;
+    padding: 12px !important;
+    display: grid !important;
+    grid-template-columns: 200px 1fr !important;
+    grid-template-rows: 64px 1fr !important;
+    grid-template-areas:
+      "header header"
+      "sidebar content" !important;
+    gap: 12px !important;
+    min-height: 100vh !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Collapsed sidebar layout */
+  .alain-default.alain-default__collapsed {
+    grid-template-columns: 64px 1fr !important;
+  }
+
+  /* Header modern styling */
+  .alain-default__header {
+    grid-area: header !important;
+    background: linear-gradient(135deg, var(--primary-color, @primary-color) 0%, var(--primary-color-light, lighten(@primary-color, 10%)) 100%) !important;
+    box-shadow: 0 4px 20px var(--shadow-color, rgba(0, 0, 0, 0.08)) !important;
+    border-radius: 16px !important;
+    backdrop-filter: blur(10px) !important;
+    transition: all 0.3s ease !important;
+    position: relative !important;
+    z-index: 10 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    height: 64px !important;
+    display: flex !important;
+    align-items: center !important;
+    overflow: hidden !important;
+  }
+
+  /* Ensure header items are visible and properly positioned */
+  .alain-default__header-item,
+  .alain-default__header .alain-default__header-logo,
+  .alain-default__header .alain-default__header-trigger,
+  .alain-default__header .alain-default__header-action,
+  .alain-default__nav-item,
+  header-notify,
+  header-user,
+  header-search {
+    position: relative !important;
+    z-index: 11 !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Fix notification badge positioning */
+  .alain-default__nav-item .ant-badge,
+  .alain-default__nav-item nz-badge {
+    display: inline-flex !important;
+    align-items: center !important;
+  }
+
+  /* Sidebar modern styling */
+  .alain-default__aside {
+    grid-area: sidebar !important;
+    background: var(--sidebar-background, #ffffff) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.06)) !important;
+    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)) !important;
+    backdrop-filter: blur(20px) !important;
+    overflow: hidden !important;
+    transition: all 0.3s ease !important;
+    position: relative !important;
+    margin: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  .alain-default__aside::after {
+    display: none !important; /* Remove default border */
+  }
+
+  /* Content area modern styling */
+  .alain-default__content {
+    grid-area: content !important;
+    background: var(--content-background, #ffffff) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.06)) !important;
+    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2)) !important;
+    backdrop-filter: blur(20px) !important;
+    overflow: auto !important;
+    transition: all 0.3s ease !important;
+    position: relative !important;
+    margin: 0 !important;
+    padding: 12px !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  /* Sidebar navigation modern styling */
+  .sidebar-nav__item {
+    margin: 4px 12px;
+    border-radius: 12px;
+    border-left: none;
+    transition: all 0.3s ease;
+    overflow: hidden;
+  }
+
+  .sidebar-nav__item:hover {
+    background: linear-gradient(135deg, rgba(63, 81, 181, 0.08) 0%, rgba(63, 81, 181, 0.04) 100%);
+    transform: translateX(4px);
+  }
+
+  .sidebar-nav__selected {
+    background: linear-gradient(135deg, rgba(63, 81, 181, 0.12) 0%, rgba(63, 81, 181, 0.08) 100%);
+    border-left: none;
+    border-radius: 12px;
+    position: relative;
+  }
+
+  .sidebar-nav__selected::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 24px;
+    background: linear-gradient(135deg, @primary-color 0%, lighten(@primary-color, 20%) 100%);
+    border-radius: 0 4px 4px 0;
+  }
+
+  .sidebar-nav__item-link {
+    padding: 12px 16px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
+    font-weight: 500;
+  }
+
+  .sidebar-nav__selected > .sidebar-nav__item-link {
+    font-weight: 600;
+  }
+
+  /* Header items modern styling */
+  .alain-default__nav-item {
+    border-radius: 8px;
+    margin: 0 4px;
+    transition: all 0.3s ease;
+  }
+
+  .alain-default__nav-item:hover {
+    background-color: rgba(255, 255, 255, 0.15) !important;
+    transform: translateY(-1px);
+  }
+
+  /* Search component modern styling */
+  .alain-default__search {
+    .ant-input-affix-wrapper {
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+    }
+
+    .ant-input-affix-wrapper:hover,
+    .ant-input-affix-wrapper:focus {
+      background: rgba(255, 255, 255, 0.25);
+      border-color: rgba(255, 255, 255, 0.4);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  /* Logo area styling */
+  .alain-default__header-logo {
+    border-radius: 12px;
+    margin: 8px;
+    transition: all 0.3s ease;
+  }
+
+  .alain-default__header-logo:hover {
+    transform: scale(1.02);
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .alain-default {
+      padding: 4px;
+    }
+
+    .alain-default__header {
+      border-radius: 12px;
+    }
+
+    .alain-default__aside {
+      margin-top: 4px;
+      border-radius: 12px;
+    }
+
+    .alain-default__content {
+      margin-top: 4px;
+      margin-left: 4px;
+      border-radius: 12px;
+    }
+  }
+
+  /* Dark theme support */
+  [data-theme='dark'] & {
+    :host {
+      background-color: #141414;
+    }
+
+    .alain-default__aside {
+      background: #1f1f1f;
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .alain-default__content {
+      background: #1f1f1f;
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .sidebar-nav__item:hover {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
+    }
+
+    .sidebar-nav__selected {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
+    }
+  }
+}
+
 /* Footer styles */
 global-footer {
   text-align: center;
@@ -198,4 +492,4 @@ global-footer {
 .chatbot-input input {
   flex: 1;
   margin-right: 8px;
-} 
+}

web-app/src/app/routes/dashboard/dashboard.component.html

@@ -18,7 +18,7 @@
 -->
 
 <div class="mobile-hide">
-  <ngx-slick-carousel style="margin-top: 70px" nz-row class="carousel" [config]="slideConfig">
+  <ngx-slick-carousel nz-row class="carousel" [config]="slideConfig">
     <div style="width: 25%; margin: 3px" ngxSlickItem class="slide">
       <div class="mb-md hoverCard">
         <div nz-row nzAlign="middle" class="bg-primary rounded-lg">
@@ -288,7 +288,7 @@
   </ngx-slick-carousel>
 </div>
 
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 400px">
+<div nz-row nzGutter="16" style="margin-top: 25px; height: 500px">
   <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 6 }" style="height: 100%">
     <nz-spin [nzSpinning]="wordCloudDataLoading">
       <angular-tag-cloud
@@ -391,7 +391,7 @@
   </div>
 </div>
 
-<div nz-row nzGutter="16" style="margin-top: 25px; height: 320px">
+<div nz-row nzGutter="16" style="margin-top: 25px; height: 420px">
   <div nz-col [nzXs]="{ span: 24 }" [nzSm]="{ span: 24 }" [nzMd]="{ span: 15 }" class="mb-md timeline-card" style="height: 100%">
     <nz-spin [nzSpinning]="alertContentLoading">
       <nz-card nzHoverable [nzTitle]="alertCardTitleTemplate" [nzExtra]="extraTemplate" style="height: inherit; overflow: hidden">

web-app/src/app/shared/components/help-message-show/help-message-show.component.html

@@ -39,11 +39,10 @@
       <button class="handover_button_content" id="handover_button_self" (click)="handleButtonClick()">{{
         'common.button.' + collapse_expand | i18n
       }}</button>
-      <i nz-icon (click)="handleButtonClick()">
-        <svg viewBox="64 64 896 896" focusable="false" fill="#000000" width="1.12em" height="1.12em" data-icon="alert" aria-hidden="true">
+      <i nz-icon (click)="handleButtonClick()" class="help-toggle-icon">
+        <svg viewBox="64 64 896 896" focusable="false" width="1.12em" height="1.12em" data-icon="alert" aria-hidden="true">
           <path
             d="M550.4 793.6L490.666667 853.333333l-59.733334-59.733333L256 618.666667l59.733333-59.733334 174.933334 174.933334 174.933333-174.933334 59.733333 59.733334-174.933333 174.933333zM490.666667 332.8l-174.933334 174.933333L256 448l174.933333-174.933333L490.666667 213.333333l59.733333 59.733334 174.933333 174.933333-59.733333 59.733333-174.933333-174.933333z"
-            fill="#000000"
             p-id="3525"
           ></path>
         </svg>

web-app/src/app/shared/components/help-message-show/help-message-show.component.less

@@ -1,16 +1,18 @@
 .help_message_div {
-  margin-top: 60px;
   width: 100%;
   max-height: 140px;
   overflow-y: hidden;
-  box-shadow: inset 1px 4px 6px 1px rgb(0 0 0 / 0.05);
+  box-shadow: inset 1px 4px 6px 1px rgba(0, 0, 0, 0.05);
+  background-color: var(--help-message-bg, #ffffff);
+  color: var(--help-message-text, rgba(0, 0, 0, 0.85));
 }
 .collapsed_content{
   overflow-y: hidden;
   max-height: 131.2px;
 }
 .help_message_nav_item {
-  color: gray;
+  color: var(--help-message-nav-text, #8c8c8c);
+  transition: color 0.3s ease;
 }
 
 .help_link_nav_item {
@@ -23,7 +25,7 @@
 
 .level1_breadcrumb {
   height: 28.8px;
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--help-message-breadcrumb-bg, rgba(0, 0, 0, 0.05));
 }
 
 .menu_name {
@@ -39,7 +41,16 @@
 }
 
 .level2_message_show::-webkit-scrollbar-track {
-  background-color: rgba(63, 81, 181, 0.38);
+  background-color: var(--help-message-scrollbar-track, rgba(63, 81, 181, 0.38));
+}
+
+.level2_message_show::-webkit-scrollbar-thumb {
+  background-color: var(--help-message-scrollbar-thumb, rgba(63, 81, 181, 0.6));
+  border-radius: 4px;
+}
+
+.level2_message_show::-webkit-scrollbar-thumb:hover {
+  background-color: var(--help-message-scrollbar-thumb-hover, rgba(63, 81, 181, 0.8));
 }
 
 .help_link_content {
@@ -65,11 +76,11 @@
 }
 
 .help_message_nav_item:hover {
-  color: #282828;
+  color: var(--help-message-nav-hover, #282828);
 }
 
 .help_message_nav:hover {
-  border-bottom: 2px solid rgba(116, 54, 157, 0.79);
+  border-bottom: 2px solid var(--help-message-nav-border-hover, rgba(116, 54, 157, 0.79));
 }
 
 .help_link_nav {
@@ -85,7 +96,7 @@
   float: left;
   height: 13px;
   width: 2px;
-  background-color: rgba(0, 0, 0, 0.44);
+  background-color: var(--help-message-divider, rgba(0, 0, 0, 0.44));
   margin-top: 8.5px;
   margin-left: 22px;
 }
@@ -105,22 +116,38 @@
 }
 
 .hover_blue:hover {
-  color: #2b4acb;
+  color: var(--help-message-link-hover, #2b4acb);
 }
 
 .handover_button_content {
   border: none;
   background-color: transparent;
+  color: var(--help-message-button-text, rgba(0, 0, 0, 0.85));
+  transition: color 0.3s ease;
 }
 
 .handover_button_content:hover {
-  color: #282828;
+  color: var(--help-message-button-hover, #282828);
 }
 
 .help_link_span {
   margin-right: 6px;
 }
 
+.help-toggle-icon {
+  cursor: pointer;
+  transition: color 0.3s ease;
+
+  svg {
+    fill: var(--help-message-button-text, rgba(0, 0, 0, 0.85));
+    transition: fill 0.3s ease;
+  }
+
+  &:hover svg {
+    fill: var(--help-message-button-hover, #282828);
+  }
+}
+
 .help_com_icon {
   width: 22px;
   height: 22px;
@@ -131,3 +158,37 @@
   float: left;
 }
 
+:host {
+  --help-message-bg: #ffffff;
+  --help-message-text: rgba(0, 0, 0, 0.85);
+  --help-message-nav-text: #8c8c8c;
+  --help-message-nav-hover: #282828;
+  --help-message-breadcrumb-bg: rgba(0, 0, 0, 0.05);
+  --help-message-nav-border-hover: rgba(116, 54, 157, 0.79);
+  --help-message-divider: rgba(0, 0, 0, 0.44);
+  --help-message-link-hover: #2b4acb;
+  --help-message-button-text: rgba(0, 0, 0, 0.85);
+  --help-message-button-hover: #282828;
+  --help-message-scrollbar-track: rgba(63, 81, 181, 0.38);
+  --help-message-scrollbar-thumb: rgba(63, 81, 181, 0.6);
+  --help-message-scrollbar-thumb-hover: rgba(63, 81, 181, 0.8);
+}
+
+[data-theme='dark'] :host,
+:host.dark,
+.dark :host {
+  --help-message-bg: #1f1f1f;
+  --help-message-text: rgba(255, 255, 255, 0.85);
+  --help-message-nav-text: rgba(255, 255, 255, 0.65);
+  --help-message-nav-hover: rgba(255, 255, 255, 0.85);
+  --help-message-breadcrumb-bg: rgba(255, 255, 255, 0.08);
+  --help-message-nav-border-hover: rgba(116, 54, 157, 0.79);
+  --help-message-divider: rgba(255, 255, 255, 0.3);
+  --help-message-link-hover: #4096ff;
+  --help-message-button-text: rgba(255, 255, 255, 0.85);
+  --help-message-button-hover: rgba(255, 255, 255, 0.95);
+  --help-message-scrollbar-track: rgba(255, 255, 255, 0.1);
+  --help-message-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --help-message-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+}
+

web-app/src/assets/color.less

@@ -2084,11 +2084,11 @@ body {color: rgba(0, 0, 0, 0.85);background-color: #f5f7fa;}
 .alain-default__aside-inner::-webkit-scrollbar-thumb {background-color: transparent;}
 .alain-default__progress-bar {background: rgba(221, 221, 221, 0.4);}
 .sidebar-nav__item {border-left: 3px solid transparent;}
-.sidebar-nav__item-link {color: rgba(0, 0, 0, 0.85);}
-.sidebar-nav__item-link:hover {color: @primary-color;}
+.sidebar-nav__item-link {color: rgba(0, 0, 0, 0.85); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-weight: 500;}
+.sidebar-nav__item-link:hover {color: @primary-color; font-weight: 500;}
 .sidebar-nav__item-disabled:hover {color: rgba(0, 0, 0, 0.85);}
 .sidebar-nav__selected {background-color: #fcfcfc;border-left-color: @primary-color;}
-.sidebar-nav__selected > .sidebar-nav__item-link {color: @primary-color;}
+.sidebar-nav__selected > .sidebar-nav__item-link {color: @primary-color; font-weight: 600;}
 .sidebar-nav__group-title {color: rgba(0, 0, 0, 0.45);}
 .sidebar-nav__sub .sidebar-nav__item {border-left: 0 !important;}
 .sidebar-nav__sub-arrow::before, .sidebar-nav__sub-arrow::after {background: #fff;background-image: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));border-radius: 2px;}

web-app/src/styles/index.less

@@ -4,3 +4,150 @@
     display: none;
   }
 }
+
+/* Modern UI Enhancements */
+body {
+  background-color: #f5f7fa;
+  transition: background-color 0.3s ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+  font-weight: 400;
+}
+
+[data-theme='dark'] body {
+  background-color: #141414;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Enhanced card styling */
+.ant-card {
+  border-radius: 12px !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
+  border: 1px solid rgba(0, 0, 0, 0.06) !important;
+  transition: all 0.3s ease !important;
+}
+
+.ant-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
+  transform: translateY(-2px) !important;
+}
+
+[data-theme='dark'] .ant-card {
+  background-color: #1f1f1f !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Enhanced button styling */
+.ant-btn {
+  transition: all 0.3s ease !important;
+}
+
+.ant-btn:hover {
+  transform: translateY(-1px) !important;
+}
+
+/* Enhanced table styling */
+.ant-table {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+}
+
+.ant-table-thead > tr > th {
+  background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%) !important;
+  border-bottom: 2px solid #e8e8e8 !important;
+}
+
+[data-theme='dark'] .ant-table-thead > tr > th {
+  background: linear-gradient(135deg, #262626 0%, #1f1f1f 100%) !important;
+  border-bottom-color: #434343 !important;
+}
+
+/* Enhanced modal styling */
+.ant-modal-content {
+  border-radius: 16px !important;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
+}
+
+/* Enhanced form styling */
+.ant-form-item {
+  margin-bottom: 20px !important;
+}
+
+.ant-input,
+.ant-input-number,
+.ant-select-selector {
+  transition: all 0.3s ease !important;
+}
+
+.ant-input:focus,
+.ant-input-number:focus,
+.ant-select-focused .ant-select-selector {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 12px rgba(63, 81, 181, 0.15) !important;
+}
+
+/* Enhanced pagination styling */
+.ant-pagination-item {
+  transition: all 0.3s ease !important;
+}
+
+.ant-pagination-item:hover {
+  transform: translateY(-1px) !important;
+}
+
+/* Enhanced tag styling */
+.ant-tag {
+  transition: all 0.3s ease !important;
+}
+
+.ant-tag:hover {
+  transform: translateY(-1px) !important;
+}
+
+/* Loading animation enhancement */
+.ant-spin-dot {
+  animation: antSpinMove 1s infinite linear !important;
+}
+
+@keyframes antSpinMove {
+  to {
+    opacity: 1;
+    transform: rotate(405deg);
+  }
+}
+
+/* Custom scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}