修复 SCSS 变量引用和样式微调

- 统一所有 SCSS 文件中的变量命名 (transition-base, shadow-lg 等)
- 更新注释中的变量名格式
- 优化 global.scss 和 variables.scss 结构

jk-rag-platform/.claude/settings.local.json

@@ -40,7 +40,23 @@
       "Bash(sed -i '' 's/@tag-bg-slate:/\\\\$tag-bg-slate:/g; s/@tag-text-slate:/\\\\$tag-text-slate:/g; s/@tag-bg-blue:/\\\\$tag-bg-blue:/g; s/@tag-text-blue:/\\\\$tag-text-blue:/g; s/@tag-bg-indigo:/\\\\$tag-bg-indigo:/g; s/@tag-text-indigo:/\\\\$tag-text-indigo:/g; s/@tag-bg-teal:/\\\\$tag-bg-teal:/g; s/@tag-text-teal:/\\\\$tag-text-teal:/g; s/@tag-bg-purple:/\\\\$tag-bg-purple:/g; s/@tag-text-purple:/\\\\$tag-text-purple:/g; s/@tag-bg-rose:/\\\\$tag-bg-rose:/g; s/@tag-text-rose:/\\\\$tag-text-rose:/g; s/@tag-bg-cyan:/\\\\$tag-bg-cyan:/g; s/@tag-text-cyan:/\\\\$tag-text-cyan:/g; s/@tag-bg-amber:/\\\\$tag-bg-amber:/g; s/@tag-text-amber:/\\\\$tag-text-amber:/g' variables.scss)",
       "Bash(sed -i '' 's/@font-size-base:/\\\\$font-size-base:/g; s/@font-size-xs:/\\\\$font-size-xs:/g; s/@font-size-sm:/\\\\$font-size-sm:/g; s/@font-size-md:/\\\\$font-size-md:/g; s/@font-size-lg:/\\\\$font-size-lg:/g; s/@font-size-xl:/\\\\$font-size-xl:/g' variables.scss)",
       "Bash(sed -i '' 's/@border-radius-base:/\\\\$border-radius-base:/g' variables.scss)",
-      "Bash(sed -i '' 's/@theme-text-color:/\\\\$theme-text-color:/g' variables.scss)"
+      "Bash(sed -i '' 's/@theme-text-color:/\\\\$theme-text-color:/g' variables.scss)",
+      "Bash(sed -i '' 's/@text-primary/$text-primary/g; s/@success-color/$success-color/g; s/@warning-color/$warning-color/g; s/@error-color/$error-color/g; s/@font-4xl/$font-4xl/g' global.scss)",
+      "Bash(sed -i '' 's/@font-3xl/$font-3xl/g; s/@font-2xl/$font-2xl/g; s/@font-lg/$font-lg/g; s/@font-base/$font-base/g' global.scss)",
+      "Bash(sed -i '' 's/@line-height-tight/$line-height-tight/g; s/@line-height-base/$line-height-base/g; s/@text-secondary/$text-secondary/g' global.scss)",
+      "Bash(sed -i '' 's/@bg-tertiary/$bg-tertiary/g; s/@text-disabled/$text-disabled/g' global.scss)",
+      "Bash(sed -i '' 's/@spacing-1/$spacing-1/g; s/@spacing-6/$spacing-6/g; s/@font-sm/$font-sm/g; s/@font-weight-bold/$font-weight-bold/g' global.scss)",
+      "Bash(sed -i '' 's/@spacing-lg/$spacing-lg/g; s/@icon-xl/$icon-xl/g; s/@shadow-md/$shadow-md/g' global.scss)",
+      "Bash(sed -i '' 's/@icon-lg/$icon-lg/g; s/@spacing-8/$spacing-8/g; s/@radius-xl/$radius-xl/g; s/@transition-base/$transition-base/g' global.scss)",
+      "Bash(sed -i '' 's/@search-height/$search-height/g; s/@bg-hover/$bg-hover/g; s/@text-primary/$text-primary/g' global.scss)",
+      "Bash(sed -i '' 's/@icon-bg-blue/$icon-bg-blue/g; s/@font-2xl/$font-2xl/g; s/@spacing-lg/$spacing-lg/g' global.scss)",
+      "Bash(sed -i '' 's/@shadow-sm/$shadow-sm/g; s/@border-base/$border-base/g; s/@bg-secondary/$bg-secondary/g' global.scss)",
+      "Bash(sed -i '' 's/@radius-lg/$radius-lg/g; s/@spacing-4/$spacing-4/g' global.scss)",
+      "Bash(sed -i '' 's/@header-height/$header-height/g; s/@screen-xl/$screen-xl/g; s/@screen-lg/$screen-lg/g' global.scss)",
+      "Bash(sed -i '' 's/@screen-md/$screen-md/g; s/@spacing-10/$spacing-10/g' global.scss)",
+      "Bash(sed -i '' 's/@primary-light/$primary-light/g; s/@primary-dark/$primary-dark/g' global.scss)",
+      "Bash(git commit:*)",
+      "Bash(git add:*)"
     ]
   }
 }

jk-rag-platform/src/components/common/AppCard/index.scss

@@ -10,7 +10,7 @@
     border-radius: $radius-xl;
     padding: $spacing-4;
     cursor: pointer;
-    transition: @transition-base;
+    transition: $transition-base;
     position: relative;
     overflow: hidden;
     min-height: 280px;
@@ -19,7 +19,7 @@
 
     &:hover {
         transform: translateY(-$spacing-1);
-        box-shadow: @shadow-lg;
+        box-shadow: $shadow-lg;
         border-color: fade($primary-color, 30%);
 
         .card-actions {
@@ -46,9 +46,9 @@
     padding: 2px 6px;
     background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
     color: #FFFFFF;
-    border-radius: @radius-full;
+    border-radius: $radius-full;
     font-size: 9px;
-    font-weight: @font-weight-bold;
+    font-weight: $font-weight-bold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
@@ -62,9 +62,9 @@
     left: $spacing-4;
     padding: 2px 6px;
     color: #FFFFFF;
-    border-radius: @radius-full;
+    border-radius: $radius-full;
     font-size: 9px;
-    font-weight: @font-weight-semibold;
+    font-weight: $font-weight-semibold;
     z-index: 10;
 }
 
@@ -78,7 +78,7 @@
 }
 
 // 创建者信息区域 - 三行文字与图标高度一致（56px）
-// 计算：@font-xs + $font-base + @font-sm = 9px + 13px + 12px = 34px 文字 
+// 计算：$font-xs + $font-base + $font-sm = 9px + 13px + 12px = 34px 文字 
 //      + $spacing-1 × 2 = 8px 间距 + 行高余量 ≈ 56px
 .card-creator {
     display: flex;
@@ -90,36 +90,36 @@
         display: flex;
         flex-direction: column;
         gap: $spacing-1;  // 行间距 4px
-        line-height: @line-height-tight;
+        line-height: $line-height-tight;
 
         .card-creator-label {
-            font-size: @font-xs;  // 9px
-            color: @text-hint;
+            font-size: $font-xs;  // 9px
+            color: $text-hint;
             text-transform: uppercase;
             letter-spacing: 0.05em;
             font-weight: $font-weight-medium;
-            line-height: @line-height-tight;
+            line-height: $line-height-tight;
         }
 
         .card-creator-name {
             font-size: $font-base;  // 13px
             color: $text-secondary;
-            font-weight: @font-weight-semibold;
+            font-weight: $font-weight-semibold;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            line-height: @line-height-tight;
+            line-height: $line-height-tight;
         }
 
         // 项目名称 - 单行省略
         .card-pro-name {
-            font-size: @font-sm;  // 12px
-            color: @text-hint;
+            font-size: $font-sm;  // 12px
+            color: $text-hint;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             max-width: 180px;
-            line-height: @line-height-tight;
+            line-height: $line-height-tight;
         }
     }
 }
@@ -135,13 +135,13 @@
     padding: 2px;
     flex-shrink: 0;
 
-    &.bg-blue { background: @icon-bg-blue; }
-    &.bg-indigo { background: @icon-bg-indigo; }
-    &.bg-teal { background: @icon-bg-teal; }
-    &.bg-purple { background: @icon-bg-purple; }
-    &.bg-rose { background: @icon-bg-rose; }
-    &.bg-cyan { background: @icon-bg-cyan; }
-    &.bg-amber { background: @icon-bg-amber; }
+    &.bg-blue { background: $icon-bg-blue; }
+    &.bg-indigo { background: $icon-bg-indigo; }
+    &.bg-teal { background: $icon-bg-teal; }
+    &.bg-purple { background: $icon-bg-purple; }
+    &.bg-rose { background: $icon-bg-rose; }
+    &.bg-cyan { background: $icon-bg-cyan; }
+    &.bg-amber { background: $icon-bg-amber; }
     &.bg-green { background: #F0FDF4; }
     &.bg-orange { background: #FFF7ED; }
 
@@ -152,7 +152,7 @@
     }
 
     .iconify {
-        font-size: @icon-3xl;
+        font-size: $icon-3xl;
     }
 }
 
@@ -165,21 +165,21 @@
     gap: $spacing-1;
     opacity: 0;
     transform: translateY(0);
-    transition: @transition-base;
+    transition: $transition-base;
     z-index: 15;
 
     .card-action-btn {
         width: 36px;
         height: 36px;
         border-radius: $radius-lg;
-        background: @bg-tertiary;
+        background: $bg-tertiary;
         border: none;
         display: flex;
         align-items: center;
         justify-content: center;
         color: $text-secondary;
         cursor: pointer;
-        transition: @transition-base;
+        transition: $transition-base;
 
         &:hover {
             background: $border-base;
@@ -188,7 +188,7 @@
         }
 
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
         }
     }
 }
@@ -196,13 +196,13 @@
 // 应用名称
 .card-title {
     font-size: $font-lg;
-    font-weight: @font-weight-semibold;
+    font-weight: $font-weight-semibold;
     color: $text-primary;
     margin: 0;
     padding: 0;
     margin-bottom: $spacing-2;
-    transition: @transition-fast;
-    line-height: @line-height-tight;
+    transition: $transition-fast;
+    line-height: $line-height-tight;
 
     .app-card:hover & {
         color: $primary-color;
@@ -211,9 +211,9 @@
 
 // 应用描述
 .card-description {
-    font-size: @font-sm;
+    font-size: $font-sm;
     color: $text-secondary;
-    line-height: @line-height-base;
+    line-height: $line-height-base;
     margin-bottom: $spacing-2;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -233,20 +233,20 @@
 .card-tag {
     padding: 3px 10px;
     border-radius: $radius-md;
-    font-size: @font-xs;
-    font-weight: @font-weight-bold;
+    font-size: $font-xs;
+    font-weight: $font-weight-bold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     white-space: nowrap;
 
-    &.tag-slate { background: @tag-bg-slate; color: @tag-text-slate; }
-    &.tag-blue { background: @tag-bg-blue; color: @tag-text-blue; }
-    &.tag-indigo { background: @tag-bg-indigo; color: @tag-text-indigo; }
-    &.tag-teal { background: @tag-bg-teal; color: @tag-text-teal; }
-    &.tag-purple { background: @tag-bg-purple; color: @tag-text-purple; }
-    &.tag-rose { background: @tag-bg-rose; color: @tag-text-rose; }
-    &.tag-cyan { background: @tag-bg-cyan; color: @tag-text-cyan; }
-    &.tag-amber { background: @tag-bg-amber; color: @tag-text-amber; }
+    &.tag-slate { background: $tag-bg-slate; color: $tag-text-slate; }
+    &.tag-blue { background: $tag-bg-blue; color: $tag-text-blue; }
+    &.tag-indigo { background: $tag-bg-indigo; color: $tag-text-indigo; }
+    &.tag-teal { background: $tag-bg-teal; color: $tag-text-teal; }
+    &.tag-purple { background: $tag-bg-purple; color: $tag-text-purple; }
+    &.tag-rose { background: $tag-bg-rose; color: $tag-text-rose; }
+    &.tag-cyan { background: $tag-bg-cyan; color: $tag-text-cyan; }
+    &.tag-amber { background: $tag-bg-amber; color: $tag-text-amber; }
 }
 
 // 统计信息
@@ -269,11 +269,11 @@
         display: flex;
         align-items: center;
         gap: $spacing-1;
-        font-size: @font-sm;
-        color: @text-hint;
+        font-size: $font-sm;
+        color: $text-hint;
 
         .iconify {
-            font-size: @icon-md;
+            font-size: $icon-md;
         }
     }
 }
@@ -292,11 +292,11 @@
     display: flex;
     align-items: center;
     gap: $spacing-1;
-    font-size: @font-xs;
-    color: @text-hint;
+    font-size: $font-xs;
+    color: $text-hint;
 
     .iconify {
-        font-size: @icon-md;
+        font-size: $icon-md;
         color: $success-color;
     }
 }
@@ -305,7 +305,7 @@
     display: flex;
     align-items: center;
     gap: $spacing-1;
-    font-size: @font-xs;
+    font-size: $font-xs;
     color: $text-secondary;
     white-space: nowrap;
     overflow: hidden;
@@ -313,16 +313,16 @@
     max-width: 200px;
 
     .iconify {
-        font-size: @icon-md;
+        font-size: $icon-md;
     }
 }
 
 .card-visible-tag {
-    font-size: @font-xs;
-    font-weight: @font-weight-semibold;
+    font-size: $font-xs;
+    font-weight: $font-weight-semibold;
     padding: 2px 8px;
     border-radius: @radius-sm;
-    background: @bg-tertiary;
+    background: $bg-tertiary;
 }
 
 // 悬停操作按钮层
@@ -339,7 +339,7 @@
     border-top: 1px solid $border-light;
     opacity: 0;
     transform: translateY($spacing-2);
-    transition: @transition-base;
+    transition: $transition-base;
     pointer-events: none;
 
     .app-card:hover & {
@@ -353,13 +353,13 @@
         width: auto;
         min-width: 100px;
         height: 40px;
-        background: @bg-tertiary;
+        background: $bg-tertiary;
         border: 1px solid $border-base;
         border-radius: $radius-lg;
         font-size: $font-md;
         font-weight: $font-weight-medium;
         color: $text-primary;
-        transition: @transition-base;
+        transition: $transition-base;
         margin-right: $spacing-2;  // 与立即使用按钮的间距
         display: inline-flex;
         align-items: center;
@@ -367,12 +367,12 @@
 
         &:hover {
             background: $border-base;
-            border-color: @border-dark;
+            border-color: $border-dark;
             color: $text-primary;
         }
 
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
             display: inline-flex;
             align-items: center;
         }
@@ -387,10 +387,10 @@
         border: none;
         border-radius: $radius-lg;
         font-size: $font-md;
-        font-weight: @font-weight-semibold;
+        font-weight: $font-weight-semibold;
         color: #FFFFFF;
         box-shadow: 0 4px 12px fade($primary-color, 30%);
-        transition: @transition-base;
+        transition: $transition-base;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -407,7 +407,7 @@
         }
 
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
             display: inline-flex;
             align-items: center;
         }

jk-rag-platform/src/components/common/FilterBar/index.scss

@@ -19,7 +19,7 @@
                 padding: $spacing-2 $spacing-3;  // 8px 12px - 更紧凑
                 font-size: $font-md;  // 13px
                 color: $text-secondary;
-                transition: @transition-base;
+                transition: $transition-base;
                 
                 &:hover {
                     color: $text-primary;
@@ -28,7 +28,7 @@
                 &.ant-tabs-tab-active {
                     .ant-tabs-tab-btn {
                         color: $primary-color;
-                        font-weight: @font-weight-semibold;
+                        font-weight: $font-weight-semibold;
                     }
                 }
             }
@@ -48,7 +48,7 @@
         background: $bg-secondary;
         border: 1px solid $border-base;
         border-radius: $radius-lg;  // 8px
-        transition: all 0.2s @easing-default;
+        transition: all 0.2s $easing-default;
         position: relative;
         overflow: hidden;
         
@@ -66,7 +66,7 @@
                 height: 100%;
                 
                 &::placeholder {
-                    color: @text-hint;
+                    color: $text-hint;
                 }
             }
         }
@@ -84,7 +84,7 @@
             color: $text-secondary;
             font-size: 15px;
             cursor: pointer;
-            transition: all 0.2s @easing-default;
+            transition: all 0.2s $easing-default;
             flex-shrink: 0;
             
             &:hover:not(:disabled) {
@@ -111,7 +111,7 @@
         // 加载状态
         &.loading {
             .search-button {
-                color: @text-hint;
+                color: $text-hint;
             }
         }
         
@@ -139,7 +139,7 @@
             .ant-tabs-nav {
                 .ant-tabs-tab {
                     padding: $spacing-2 $spacing-3;  // 8px 12px
-                    font-size: @font-sm;  // 11px
+                    font-size: $font-sm;  // 11px
                 }
             }
         }

jk-rag-platform/src/components/common/FilterDrawer/index.scss

@@ -13,7 +13,7 @@
 
     .filter-title {
         font-size: $font-lg;
-        font-weight: @font-weight-semibold;
+        font-weight: $font-weight-semibold;
         color: $text-primary;
         margin-bottom: $spacing-3;
     }

jk-rag-platform/src/components/common/GuideTips/index.scss

@@ -31,12 +31,12 @@
         .guide-tips-title {
             display: flex;
             align-items: center;
-            font-size: @font-sm;
+            font-size: $font-sm;
             color: $text-primary;
             // 移除文字颜色过渡，保持静态
 
             .guide-tips-icon {
-                font-size: @icon-lg;
+                font-size: $icon-lg;
                 color: #FAAD14;
                 margin-right: $spacing-2;
                 transition: transform 0.2s ease, filter 0.2s ease;
@@ -44,12 +44,12 @@
         }
 
         .guide-tips-close {
-            color: @text-hint;
+            color: $text-hint;
             cursor: pointer;
             display: flex;
             align-items: center;
-            font-size: @icon-lg;
-            transition: @transition-base;
+            font-size: $icon-lg;
+            transition: $transition-base;
 
             &:hover {
                 color: $primary-color;
@@ -73,39 +73,39 @@
         border-radius: $radius-lg;
         box-shadow: $shadow-sm;
         border: 1px solid $border-light;
-        transition: @transition-base;
+        transition: $transition-base;
         height: 100%;
 
         &:hover {
-            box-shadow: @shadow-md;
+            box-shadow: $shadow-md;
             // 移除边框颜色变化，保持静态
         }
 
         // 卡片头部
         .guide-tips-card-title {
             font-size: $font-md;
-            font-weight: @font-weight-semibold;
+            font-weight: $font-weight-semibold;
             color: $text-primary;
             margin-bottom: $spacing-2;
-            line-height: @line-height-tight;  // 1.1
+            line-height: $line-height-tight;  // 1.1
         }
 
         // 卡片内容
         .guide-tips-card-description {
-            font-size: @font-sm;
+            font-size: $font-sm;
             color: $text-secondary;
-            line-height: @line-height-base;  // 1.3
+            line-height: $line-height-base;  // 1.3
             flex: 1;
         }
 
         // Step 编号
         .guide-tips-card-step {
-            font-size: @font-sm;
+            font-size: $font-sm;
             color: $primary-color;
-            font-weight: @font-weight-semibold;
+            font-weight: $font-weight-semibold;
             margin-top: $spacing-2;
             text-align: right;
-            line-height: @line-height-tight;  // 1.1
+            line-height: $line-height-tight;  // 1.1
         }
     }
 
@@ -128,7 +128,7 @@
 }
 
 // 响应式适配 - 遵循全局断点
-@media (max-width: @screen-md) {
+@media (max-width: $screen-md) {
     .guide-tips-wrapper {
         .guide-tips-row {
             margin: 0;
@@ -136,11 +136,11 @@
     }
 }
 
-@media (max-width: @screen-sm) {
+@media (max-width: $screen-sm) {
     .guide-tips-wrapper {
         .guide-tips-header {
             .guide-tips-title {
-                font-size: @font-xs;
+                font-size: $font-xs;
             }
         }
     }

jk-rag-platform/src/components/common/StatsGrid/index.scss

@@ -10,12 +10,12 @@
     margin-bottom: $spacing-4;  // 16px - 紧凑间距
 
     // 平板及以下：2 列
-    @media (max-width: @screen-lg) {
+    @media (max-width: $screen-lg) {
         grid-template-columns: repeat(2, 1fr);
     }
 
     // 移动端：保持 2 列（不变成 1 列）
-    @media (max-width: @screen-md) {
+    @media (max-width: $screen-md) {
         grid-template-columns: repeat(2, 1fr);
         gap: $spacing-3;  // 12px - 更紧凑
     }
@@ -26,10 +26,10 @@
     padding: $spacing-4;  // 16px - 紧凑内边距
     border-radius: $radius-xl;  // 12px
     border: 1px solid $border-light;
-    transition: @transition-base;
+    transition: $transition-base;
 
     &:hover {
-        box-shadow: @shadow-md;
+        box-shadow: $shadow-md;
         transform: translateY(-$spacing-1);
     }
 }
@@ -42,94 +42,94 @@
 }
 
 .stat-card-icon {
-    width: @icon-2xl;  // 40px
-    height: @icon-2xl;
+    width: $icon-2xl;  // 40px
+    height: $icon-2xl;
     border-radius: $radius-lg;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &.bg-blue { 
-        background: @icon-bg-blue; 
+        background: $icon-bg-blue; 
     }
     &.bg-indigo { 
-        background: @icon-bg-indigo; 
+        background: $icon-bg-indigo; 
     }
     &.bg-orange { 
-        background: @icon-bg-amber; 
+        background: $icon-bg-amber; 
     }
     &.bg-green { 
-        background: @success-light; 
+        background: $success-light; 
     }
 
     .iconify {
-        font-size: @icon-lg;  // 18px - 紧凑图标
+        font-size: $icon-lg;  // 18px - 紧凑图标
 
         &.icon-blue { color: $primary-color; }
-        &.icon-indigo { color: @info-dark; }
+        &.icon-indigo { color: $info-dark; }
         &.icon-orange { color: $warning-color; }
         &.icon-green { color: $success-color; }
     }
 }
 
 .stat-card-trend {
-    font-size: @font-xs;  // 8px - 紧凑文字
-    font-weight: @font-weight-semibold;
-    line-height: @line-height-tight;
+    font-size: $font-xs;  // 8px - 紧凑文字
+    font-weight: $font-weight-semibold;
+    line-height: $line-height-tight;
 
     &.text-green { color: $success-color; }
-    &.text-blue { color: @info-color; }
-    &.text-orange { color: @warning-dark; }
-    &.text-gray { color: @text-hint; }
+    &.text-blue { color: $info-color; }
+    &.text-orange { color: $warning-dark; }
+    &.text-gray { color: $text-hint; }
 }
 
 .stat-card-label {
-    font-size: @font-sm;  // 11px - 紧凑文字
+    font-size: $font-sm;  // 11px - 紧凑文字
     color: $text-secondary;
     margin-bottom: $spacing-1;  // 4px
-    line-height: @line-height-tight;
+    line-height: $line-height-tight;
 }
 
 .stat-card-value {
-    font-size: @font-2xl;  // 16px - 紧凑数值
-    font-weight: @font-weight-bold;
+    font-size: $font-2xl;  // 16px - 紧凑数值
+    font-weight: $font-weight-bold;
     color: $text-primary;
     margin: 0;
-    line-height: @line-height-tight;
+    line-height: $line-height-tight;
 
     small {
-        font-size: @font-sm;  // 11px
-        font-weight: @font-weight-normal;
-        color: @text-hint;
+        font-size: $font-sm;  // 11px
+        font-weight: $font-weight-normal;
+        color: $text-hint;
         margin-left: $spacing-1;
     }
 }
 
 // ===== 移动端优化（≤768px）=====
-@media (max-width: @screen-md) {
+@media (max-width: $screen-md) {
     .stat-card {
         padding: $spacing-3;  // 12px - 更紧凑
 
         .stat-card-icon {
-            width: @icon-xl;  // 36px - 更小图标
-            height: @icon-xl;
+            width: $icon-xl;  // 36px - 更小图标
+            height: $icon-xl;
             border-radius: $radius-md;  // 6px
 
             .iconify {
-                font-size: @icon-md;  // 16px
+                font-size: $icon-md;  // 16px
             }
         }
 
         .stat-card-trend {
-            font-size: @font-xs;  // 8px
+            font-size: $font-xs;  // 8px
         }
 
         .stat-card-label {
-            font-size: @font-xs;  // 8px
+            font-size: $font-xs;  // 8px
         }
 
         .stat-card-value {
-            font-size: @font-xl;  // 15px
+            font-size: $font-xl;  // 15px
         }
     }
 }

jk-rag-platform/src/pages/appCenter/appPlazaList/style.scss

@@ -10,7 +10,7 @@
 
 .app-plaza-list {
     padding: $spacing-4 $spacing-6;
-    min-height: calc(100vh - @header-height);
+    min-height: calc(100vh - $header-height);
     background: $bg-primary;
 }
 

jk-rag-platform/src/pages/appCenter/categoryApps/style.scss

@@ -10,7 +10,7 @@
 
 .category-apps-list {
     padding: $spacing-4 $spacing-6;
-    min-height: calc(100vh - @header-height);
+    min-height: calc(100vh - $header-height);
     background: $bg-primary;
 }
 

jk-rag-platform/src/pages/knowledgeLib/detail/style.scss

@@ -12,13 +12,13 @@
     }
 
     h2 {
-        font-size: @font-3xl;   // 18px
+        font-size: $font-3xl;   // 18px
         color: $text-primary;
         margin: 2px 0;
     }
 
     h3 {
-        font-size: @font-2xl;   // 16px
+        font-size: $font-2xl;   // 16px
         color: $text-primary;
         margin: 2px 0;
     }

jk-rag-platform/src/pages/knowledgeLib/list/KnowledgeDrawer.scss

@@ -18,7 +18,7 @@
             align-items: center;
             gap: $spacing-4;
             padding: $spacing-4;
-            background: @bg-tertiary;
+            background: $bg-tertiary;
             border-radius: $radius-xl;
             margin-bottom: $spacing-4;
 
@@ -33,7 +33,7 @@
                 flex-shrink: 0;
 
                 .iconify {
-                    font-size: @icon-2xl;  // 24px - 使用全局变量
+                    font-size: $icon-2xl;  // 24px - 使用全局变量
                     color: $primary-color;
                 }
             }
@@ -43,15 +43,15 @@
 
                 .section-title {
                     font-size: $font-lg;
-                    font-weight: @font-weight-semibold;
+                    font-weight: $font-weight-semibold;
                     color: $text-primary;
                     margin-bottom: $spacing-1;
                 }
 
                 .section-desc {
-                    font-size: @font-sm;
-                    color: @text-hint;
-                    line-height: @line-height-base;
+                    font-size: $font-sm;
+                    color: $text-hint;
+                    line-height: $line-height-base;
                 }
             }
         }
@@ -73,7 +73,7 @@
 
             span {
                 font-size: $font-lg;
-                font-weight: @font-weight-semibold;
+                font-weight: $font-weight-semibold;
                 color: $text-primary;
             }
         }
@@ -92,8 +92,8 @@
                 }
 
                 .ant-form-item-extra {
-                    font-size: @font-sm;
-                    color: @text-hint;
+                    font-size: $font-sm;
+                    color: $text-hint;
                     margin-top: $spacing-1;
                 }
             }

jk-rag-platform/src/pages/knowledgeLib/list/style.scss

@@ -13,8 +13,8 @@
         // 表头样式
         .ant-table-thead {
             .ant-table-cell {
-                font-weight: @font-weight-semibold;
-                background: @bg-tertiary;
+                font-weight: $font-weight-semibold;
+                background: $bg-tertiary;
             }
         }
 

jk-rag-platform/src/pages/knowledgeLib/revisionTool/components/reviseDrawer.scss

@@ -27,5 +27,5 @@
 .pdf-page-placeholder {
     width: 100%;
     aspect-ratio: 1 / 1.3;
-    background: @bg-tertiary;  // 使用全局变量
+    background: $bg-tertiary;  // 使用全局变量
 }

jk-rag-platform/src/pages/layout/components/header.scss

@@ -3,7 +3,7 @@
 
 .header {
     width: 100%;
-    height: @header-height;
+    height: $header-height;
     padding: 0 $spacing-6;
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(12px);
@@ -16,12 +16,12 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: @z-index-fixed;
-    transition: @transition-base;
+    z-index: $z-index-fixed;
+    transition: $transition-base;
 
     &.scrolled {
         background: rgba(255, 255, 255, 1);
-        box-shadow: @shadow-md;
+        box-shadow: $shadow-md;
     }
 
     // 汉堡菜单按钮（移动端）
@@ -37,7 +37,7 @@
         transition: all 0.2s ease;
 
         &:hover {
-            background: @bg-tertiary;
+            background: $bg-tertiary;
             border-radius: $radius-md;
         }
 
@@ -70,7 +70,7 @@
         gap: $spacing-3;
         min-width: 240px;  // 桌面端最小宽度
         flex-shrink: 0;  // 不允许收缩
-        transition: @transition-base;
+        transition: $transition-base;
 
         &:hover {
             transform: translateX($spacing-1);
@@ -97,16 +97,16 @@
             gap: $spacing-1;
 
             .logo-title {
-                font-size: @font-xl;
-                font-weight: @font-weight-bold;
+                font-size: $font-xl;
+                font-weight: $font-weight-bold;
                 color: $text-primary;
                 margin: 0;
                 white-space: nowrap;  // 不换行
             }
 
             .logo-subtitle {
-                font-size: @font-xs;
-                font-weight: @font-weight-semibold;
+                font-size: $font-xs;
+                font-weight: $font-weight-semibold;
                 color: $primary-light;
                 text-transform: uppercase;
                 letter-spacing: 0.1em;
@@ -116,7 +116,7 @@
     }
     
     // 平板端（≤1024px）样式调整
-    @media (max-width: @screen-lg) {
+    @media (max-width: $screen-lg) {
         &-logo-section {
             min-width: 180px;  // 平板端最小宽度减小
             
@@ -132,7 +132,7 @@
     }
     
     // 移动端（≤768px）样式调整
-    @media (max-width: @screen-md) {
+    @media (max-width: $screen-md) {
         &-logo-section {
             min-width: 140px;  // 移动端最小宽度更小
             
@@ -379,7 +379,7 @@
         box-shadow: @shadow-xl;
         border: 1px solid $border-base;
         padding: $spacing-2;
-        z-index: @z-index-dropdown;
+        z-index: $z-index-dropdown;
         animation: dropdownSlide 0.2s ease;
 
         .user-dropdown-header {

jk-rag-platform/src/pages/layout/components/sidebar.scss

@@ -4,13 +4,13 @@
 // ===== Sidebar 侧边栏样式 =====
 
 .sidebar {
-    width: @sidebar-width;
+    width: $sidebar-width;
     position: fixed;
     left: 0;
-    top: @header-height;
-    height: calc(100vh - @header-height);
+    top: $header-height;
+    height: calc(100vh - $header-height);
     border-right: 1px solid $border-light;
-    background: @sidebar-bg;  // 使用 Sidebar 专用背景色
+    background: $sidebar-bg;  // 使用 Sidebar 专用背景色
     padding: $spacing-6;
     overflow-y: auto;
     overflow-x: hidden;
@@ -22,23 +22,23 @@
         transform: translateX(0);  // 始终显示
         
         &.collapsed {
-            width: @sidebar-collapsed-width;
+            width: $sidebar-collapsed-width;
         }
     }
 
     // 中等屏（769px~1024px）：默认展开（200px），collapsed 时折叠
     @media (min-width: 769px) and (max-width: 1024px) {
-        width: @sidebar-width-md;
+        width: $sidebar-width-md;
         transform: translateX(0);  // 始终显示
         
         &.collapsed {
-            width: @sidebar-collapsed-width;
+            width: $sidebar-collapsed-width;
         }
     }
 
     // 移动端（≤768px）：默认隐藏，collapsed 时显示
     @media (max-width: 768px) {
-        width: @sidebar-width;
+        width: $sidebar-width;
         transform: translateX(-100%);  // 默认隐藏
         
         &.collapsed {
@@ -63,9 +63,9 @@
 
 // 章节标题 - 使用更具体的选择器避免被其他页面样式覆盖
 .sidebar .section-title {
-    font-size: @font-sm;
-    font-weight: @font-weight-bold;
-    color: @text-hint;
+    font-size: $font-sm;
+    font-weight: $font-weight-bold;
+    color: $text-hint;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: $spacing-4;
@@ -87,7 +87,7 @@
     border-radius: $radius-xl;
     font-size: $font-md;
     font-weight: $font-weight-medium;
-    color: @sidebar-text-color;  // 使用 Sidebar 专用文字色
+    color: $sidebar-text-color;  // 使用 Sidebar 专用文字色
     text-decoration: none;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -99,8 +99,8 @@
 
     // 悬停状态
     &:hover {
-        background: @sidebar-hover-bg;
-        color: @sidebar-active-color;  // 悬停时文字变深
+        background: $sidebar-hover-bg;
+        color: $sidebar-active-color;  // 悬停时文字变深
         transform: translateX($spacing-1);
 
         .iconify {
@@ -110,13 +110,13 @@
 
     // 激活状态 - 深灰色粗体字 + 灰色圆角背景
     &.active {
-        background: @sidebar-hover-bg;  // 灰色圆角背景
-        color: @sidebar-active-color;   // 深灰色近黑 #131212
-        font-weight: @font-weight-bold; // 加粗到 700
+        background: $sidebar-hover-bg;  // 灰色圆角背景
+        color: $sidebar-active-color;   // 深灰色近黑 #131212
+        font-weight: $font-weight-bold; // 加粗到 700
 
         .iconify {
-            color: @sidebar-active-color;  // 图标也变深灰色
-            font-weight: @font-weight-bold;
+            color: $sidebar-active-color;  // 图标也变深灰色
+            font-weight: $font-weight-bold;
         }
     }
 
@@ -126,10 +126,10 @@
     }
 
     .iconify {
-        font-size: @icon-xl;
+        font-size: $icon-xl;
         flex-shrink: 0;
         transition: all 0.2s ease;
-        color: @sidebar-text-color;  // 默认图标颜色
+        color: $sidebar-text-color;  // 默认图标颜色
     }
 }
 
@@ -148,23 +148,23 @@
     }
 
     .promo-label {
-        font-size: @font-sm;
+        font-size: $font-sm;
         opacity: 0.8;
         margin-bottom: $spacing-2;
     }
 
     .promo-title {
         font-size: $font-lg;
-        font-weight: @font-weight-bold;
+        font-weight: $font-weight-bold;
         margin-bottom: $spacing-3;
-        line-height: @line-height-tight;
+        line-height: $line-height-tight;
     }
 
     .promo-btn {
         font-size: 10px;
-        font-weight: @font-weight-bold;
+        font-weight: $font-weight-bold;
         padding: $spacing-1 $spacing-3;
-        border-radius: @radius-full;
+        border-radius: $radius-full;
         background: $bg-secondary;
         color: $primary-color;
         border: none;
@@ -188,7 +188,7 @@
 
 @media (max-width: 1024px) {
     .sidebar {
-        width: @sidebar-width-md;  // 使用全局变量 200px
+        width: $sidebar-width-md;  // 使用全局变量 200px
         padding: $spacing-4;
     }
 }

jk-rag-platform/src/pages/layout/style.scss

@@ -13,10 +13,10 @@
 .main-container {
     display: flex;
     flex: 1;
-    margin-top: @header-height;
-    margin-left: @sidebar-width;
+    margin-top: $header-height;
+    margin-left: $sidebar-width;
     background: $bg-primary;
-    height: calc(100vh - @header-height);
+    height: calc(100vh - $header-height);
     overflow: hidden;
     transition: margin-left 0.2s ease;  // 添加过渡动画
 }
@@ -24,7 +24,7 @@
 // 响应式调整
 @media (max-width: 1024px) {
     .main-container {
-        margin-left: @sidebar-width-md;  // 中等屏幕调整
+        margin-left: $sidebar-width-md;  // 中等屏幕调整
     }
 }
 
@@ -34,7 +34,7 @@
         
         // 当 Sidebar 展开时（collapsed=false）
         &.sidebar-open {
-            margin-left: @sidebar-width;
+            margin-left: $sidebar-width;
         }
     }
 }
@@ -65,7 +65,7 @@
         background: $bg-secondary;
         position: sticky;
         top: 0;
-        z-index: @z-index-sticky;
+        z-index: $z-index-sticky;
     }
 
     .breadcrumb {
@@ -107,13 +107,13 @@
 
 .nav {
     width: 200px !important;
-    height: calc(100vh - @header-height) !important;
-    background: @sidebar-bg !important;
+    height: calc(100vh - $header-height) !important;
+    background: $sidebar-bg !important;
     border-right: 1px solid $border-base;
     position: fixed;
-    top: @header-height;
+    top: $header-height;
     left: 0;
-    z-index: @z-index-fixed;
+    z-index: $z-index-fixed;
 
     .ant-menu {
         background-color: transparent !important;
@@ -209,6 +209,6 @@
 
     &:hover {
         transform: translateY(-5px);
-        box-shadow: @shadow-lg;
+        box-shadow: $shadow-lg;
     }
 }

jk-rag-platform/src/pages/login/style.scss

@@ -35,7 +35,7 @@
                 margin-bottom: $spacing-8;
 
                 &-text {
-                    font-size: @font-2xl;
+                    font-size: $font-2xl;
                     color: $primary-color;
                     border-bottom: 2px solid $primary-color;
                     background: linear-gradient(to bottom, #FFFFFF 50%, #D3DCF6 50%);
@@ -45,8 +45,8 @@
 
         &-copyright {
             width: 100%;
-            font-size: @font-sm;
-            color: @text-disabled;
+            font-size: $font-sm;
+            color: $text-disabled;
             display: flex;
             justify-content: center;
             position: absolute;

jk-rag-platform/src/pages/otherApps/otherAppList/style.scss

@@ -7,7 +7,7 @@
 .other-app-list {
     // 页面容器 - 使用全局 .page-container 的 padding
     padding: $spacing-4 $spacing-6;
-    min-height: calc(100vh - @header-height);
+    min-height: calc(100vh - $header-height);
     background: $bg-primary;
 }
 
@@ -15,6 +15,6 @@
 .empty-state {
     text-align: center;
     padding: $spacing-10 $spacing-5;
-    color: @text-hint;
+    color: $text-hint;
     font-size: $font-lg;
 }

jk-rag-platform/src/pages/otherApps/style.scss

@@ -11,7 +11,7 @@
 
 .app-plaza-list {
     padding: $spacing-4 $spacing-6;  // 16px/24px - 紧凑间距
-    min-height: calc(100vh - @header-height);
+    min-height: calc(100vh - $header-height);
     background: $bg-primary;
 }
 

jk-rag-platform/src/pages/questionAnswer/form/DrawerForm.scss

@@ -9,8 +9,8 @@
         border-bottom: 1px solid $border-light;
         
         .ant-drawer-title {
-            font-size: @font-2xl;
-            font-weight: @font-weight-bold;
+            font-size: $font-2xl;
+            font-weight: $font-weight-bold;
             color: $text-primary;
         }
     }
@@ -40,7 +40,7 @@
         align-items: center;
         gap: $spacing-6;
         padding: $spacing-5;
-        background: @bg-tertiary;
+        background: $bg-tertiary;
         border-radius: $radius-xl;
         margin-bottom: $spacing-4;  // 16px - 紧凑间距
 
@@ -58,8 +58,8 @@
                 transition: all 0.3s ease;
 
                 .icon-preview-placeholder {
-                    color: @text-hint;
-                    font-size: @font-sm;
+                    color: $text-hint;
+                    font-size: $font-sm;
                 }
             }
         }
@@ -71,7 +71,7 @@
             gap: $spacing-3;
 
             .color-label {
-                font-size: @font-sm;
+                font-size: $font-sm;
                 color: $text-secondary;
             }
         }
@@ -94,7 +94,7 @@
 
         span {
             font-size: $font-lg;
-            font-weight: @font-weight-semibold;
+            font-weight: $font-weight-semibold;
             color: $text-primary;
         }
     }
@@ -126,7 +126,7 @@
         .clear-all {
             cursor: pointer;
             color: $text-secondary;
-            font-size: @icon-lg;
+            font-size: $icon-lg;
             transition: color 0.2s ease;
 
             &:hover {
@@ -210,7 +210,7 @@
 
             .ant-form-item-extra {
                 font-size: $font-base;
-                color: @text-hint;
+                color: $text-hint;
                 margin-top: $spacing-1;
             }
 

jk-rag-platform/src/pages/questionAnswer/form/VipSelector.scss

@@ -22,11 +22,11 @@
     padding: $spacing-4;
     display: flex;
     flex-direction: column;
-    background: @bg-tertiary;
+    background: $bg-tertiary;
 
     .section-title {
         font-size: $font-md;
-        font-weight: @font-weight-semibold;
+        font-weight: $font-weight-semibold;
         color: $text-primary;
         margin-bottom: $spacing-3;
         display: flex;
@@ -34,7 +34,7 @@
         gap: $spacing-2;
 
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
             color: $primary-color;
         }
     }
@@ -43,7 +43,7 @@
         flex: 1;
         overflow-y: auto;
         background: transparent;
-        font-size: @font-sm;
+        font-size: $font-sm;
 
         .ant-tree-treenode {
             padding: $spacing-1 0;
@@ -67,7 +67,7 @@
     }
 
     .selected-count {
-        font-size: @font-sm;
+        font-size: $font-sm;
         color: $text-secondary;
         text-align: center;
         padding: $spacing-2;
@@ -86,7 +86,7 @@
 
     .section-title {
         font-size: $font-md;
-        font-weight: @font-weight-semibold;
+        font-weight: $font-weight-semibold;
         color: $text-primary;
         margin-bottom: $spacing-3;
         display: flex;
@@ -94,7 +94,7 @@
         gap: $spacing-2;
 
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
             color: $primary-color;
         }
 
@@ -103,8 +103,8 @@
             padding: 2px 8px;
             background: fade($primary-color, 10%);
             color: $primary-color;
-            border-radius: @radius-full;
-            font-size: @font-xs;
+            border-radius: $radius-full;
+            font-size: $font-xs;
             font-weight: $font-weight-medium;
         }
     }
@@ -112,18 +112,18 @@
     .filter-bar {
         margin-bottom: $spacing-3;
         padding: $spacing-3;
-        background: @bg-tertiary;
+        background: $bg-tertiary;
         border-radius: $radius-lg;
     }
 
     .ant-table {
         flex: 1;
         overflow-y: auto;
-        font-size: @font-sm;
+        font-size: $font-sm;
 
         .ant-table-thead > tr > th {
-            background: @bg-tertiary;
-            font-weight: @font-weight-semibold;
+            background: $bg-tertiary;
+            font-weight: $font-weight-semibold;
             color: $text-primary;
         }
 
@@ -138,7 +138,7 @@
 }
 
 // 响应式适配
-@media (max-width: @screen-md) {
+@media (max-width: $screen-md) {
     .vip-selector-container {
         flex-direction: column;
         height: 600px;

jk-rag-platform/src/pages/questionAnswer/form/style.scss

@@ -56,7 +56,7 @@
     .preset-questions {
         margin: $spacing-6 0;
         padding: $spacing-5;
-        background: @bg-tertiary;
+        background: $bg-tertiary;
         border-radius: $radius-lg;
 
         h4 {
@@ -127,7 +127,7 @@
         border-bottom: 1px solid $border-light;
 
         .btn-back {
-            background: @bg-tertiary;
+            background: $bg-tertiary;
             border: 1px solid $border-base;
             color: $text-secondary;
 
@@ -150,7 +150,7 @@
             overflow-y: auto;
 
             &.param-config {
-                background: @bg-tertiary;
+                background: $bg-tertiary;
             }
 
             .config-header {

jk-rag-platform/src/pages/questionAnswer/info/index.tsx

@@ -1125,7 +1125,7 @@ const [isMultiRound,setIsMultiRound] = React.useState<boolean>(false);// 是否
                                 </div>
                             </div>
 
-                            <div style={{ display: 'flex', gap: '@spacing-3', marginTop: '@spacing-6', paddingTop: '@spacing-6', borderTop: '1px solid @border-light' }}>
+                            <div style={{ display: 'flex', gap: '12px', marginTop: '24px', paddingTop: '24px', borderTop: '1px solid #F3F4F6' }}>
                                 <Button
                                     className='btn-cancel'
                                     onClick={() => {
@@ -1163,7 +1163,7 @@ const [isMultiRound,setIsMultiRound] = React.useState<boolean>(false);// 是否
                                         上一步
                                     </Button>
                                 </div>
-                                <div style={{ display: 'flex', gap: '@spacing-3' }}>
+                                <div style={{ display: 'flex', gap: '12px' }}>
                                     <Button
                                         className='btn-cancel'
                                         onClick={() => {
@@ -1206,7 +1206,7 @@ const [isMultiRound,setIsMultiRound] = React.useState<boolean>(false);// 是否
                                             title="Prompt用于对大模型的回复做出一些列指令和约束。这段Prompt不会被用户看到。"
                                             placement="right"
                                         >
-                                            <InfoCircleOutlined style={{ marginLeft: '@spacing-2', color: '@text-hint', fontSize: '@font-md' }} />
+                                            <InfoCircleOutlined style={{ marginLeft: '8px', color: '#9CA3AF', fontSize: '13px' }} />
                                         </Tooltip>
                                         {/* <Switch checkedChildren="编辑" unCheckedChildren="只读" style={{marginLeft:'5px'}} value={editPrompt} onChange={(e) => {
                                             setEditPrompt(e)

jk-rag-platform/src/pages/system/audit/components/style.scss

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   background: $bg-secondary;
-  border-radius: @border-radius-base;
+  border-radius: $border-radius-base;
 
   // 内容区域
   &-content {
@@ -35,7 +35,7 @@
     &-container {
       width: 100%;
       height: 100%;
-      background: @bg-tertiary;
+      background: $bg-tertiary;
     }
 
     display: flex;
@@ -66,7 +66,7 @@
 // 按钮样式
 .btn {
   &-cancel {
-    background: @bg-tertiary;
+    background: $bg-tertiary;
     border: none;
     color: #000000;
     transition: all 0.3s ease;
@@ -433,7 +433,7 @@
   width: 100%;
   height: 100%;
   background: $bg-secondary;
-  border-radius: @border-radius-base;
+  border-radius: $border-radius-base;
   .pl-20{
     padding-left: 20px;
   }
@@ -529,7 +529,7 @@
 // 按钮样式
 .btn {
   &-cancel {
-    background: @bg-tertiary;
+    background: $bg-tertiary;
     border: none;
     color: #000000;
     transition: all 0.3s ease;
@@ -672,7 +672,7 @@
   
   &:nth-child(2) {
     // 中间 30% 区域 - 配置区域
-    background: @bg-tertiary;
+    background: $bg-tertiary;
   }
   
   &:last-child {
@@ -782,7 +782,7 @@
   font-size: 14px;
   font-weight: 500;
   color: #262626;
-  background: @bg-tertiary;
+  background: $bg-tertiary;
   padding: 12px 20px;
 }
 
@@ -794,7 +794,7 @@
   flex-direction: column;
   // 滚动条
   overflow-y: auto;
-  background: @bg-tertiary;
+  background: $bg-tertiary;
   // 提示词模板显示区域
   &-info {
     padding: 0px 20px 10px 20px;

jk-rag-platform/src/styles/global.scss

@@ -1,4 +1,4 @@
-@import './variables.less';
+@import './variables.scss';
 
 // ===== 隐藏式滚动条（全局） =====
 // 适用于所有内容区域，保持界面简洁
@@ -26,7 +26,7 @@ body {
     padding: 0;
     margin: 0;
     /* 不设置 overflow: hidden，允许页面滚动 */
-    background: @bg-primary; /* 设置全局背景色，避免滚动时出现白色空白 */
+    background: $bg-primary; /* 设置全局背景色，避免滚动时出现白色空白 */
     
     // 隐藏根元素滚动条
     scrollbar-width: none; // Firefox
@@ -41,13 +41,13 @@ body {
     height: 100%;
     width: 100%;
     /* 不设置 overflow: hidden，允许内容区域滚动 */
-    font-size: @font-size-base;
-    color: @theme-text-color !important;
+    font-size: $font-size-base;
+    color: $theme-text-color !important;
     // Ant-Design 主题 - 属性
-    --primary-color: @primary-color;
-    --text-color: @theme-text-color;
-    --border-radius: @border-radius-base;
-    background: @bg-primary; /* 设置背景色 */
+    --primary-color: $primary-color;
+    --text-color: $theme-text-color;
+    --border-radius: $border-radius-base;
+    background: $bg-primary; /* 设置背景色 */
     
     // 隐藏滚动条
     scrollbar-width: none; // Firefox
@@ -66,8 +66,8 @@ a,
 a:hover,
 a:active {
     cursor: pointer;
-    font-size: @font-size-base;
-    color: @primary-color;
+    font-size: $font-size-base;
+    color: $primary-color;
     text-decoration: none;
 }
 
@@ -83,19 +83,19 @@ ul li {
 // ==================== 全局工具类 ====================
 
 .text-primary {
-    color: @primary-color !important;
+    color: $primary-color !important;
 }
 
 .text-success {
-    color: @success-color !important;
+    color: $success-color !important;
 }
 
 .text-warning {
-    color: @warning-color !important;
+    color: $warning-color !important;
 }
 
 .text-error {
-    color: @error-color !important;
+    color: $error-color !important;
 }
 
 // 路由加载样式
@@ -117,74 +117,74 @@ ul li {
     }
 
     h1 {
-        font-size: @font-4xl;  // 20px
-        color: @text-primary;
+        font-size: $font-4xl;  // 20px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h2 {
-        font-size: @font-3xl;  // 18px
-        color: @text-primary;
+        font-size: $font-3xl;  // 18px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h3 {
-        font-size: @font-2xl;  // 16px
-        color: @text-primary;
+        font-size: $font-2xl;  // 16px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h4 {
-        font-size: @font-lg;  // 14px
-        color: @text-primary;
+        font-size: $font-lg;  // 14px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h5, h6 {
-        font-size: @font-base;  // 12px
-        color: @text-primary;
+        font-size: $font-base;  // 12px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     p {
-        font-size: @font-base;
-        color: @text-secondary;
-        line-height: @line-height-base;  // 1.3
+        font-size: $font-base;
+        color: $text-secondary;
+        line-height: $line-height-base;  // 1.3
     }
 }
 
 // Ant Design typography 样式
 .ant-typography {
     h1 {
-        font-size: @font-4xl;  // 20px
-        color: @text-primary;
+        font-size: $font-4xl;  // 20px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h2 {
-        font-size: @font-3xl;  // 18px
-        color: @text-primary;
+        font-size: $font-3xl;  // 18px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     h3 {
-        font-size: @font-2xl;  // 16px
-        color: @text-primary;
+        font-size: $font-2xl;  // 16px
+        color: $text-primary;
         margin: 2px 0;
-        line-height: @line-height-tight;  // 1.1
+        line-height: $line-height-tight;  // 1.1
     }
 
     p {
-        font-size: @font-base;
-        color: @text-secondary;
-        line-height: @line-height-base;  // 1.3
+        font-size: $font-base;
+        color: $text-secondary;
+        line-height: $line-height-base;  // 1.3
     }
 }
 
@@ -201,37 +201,37 @@ ul li {
 
 // 全局按钮样式
 .ant-btn-primary {
-    background: @primary-color;
-    border: 1px solid @primary-color;
+    background: $primary-color;
+    border: 1px solid $primary-color;
     color: #ffffff;
-    transition: @transition-base;
-    box-shadow: @shadow-sm;
+    transition: $transition-base;
+    box-shadow: $shadow-sm;
     
     &:hover {
-        background: @primary-light;
-        border-color: @primary-light;
+        background: $primary-light;
+        border-color: $primary-light;
         color: #ffffff;
     }
     
     &:active {
-        background: @primary-dark;
-        border-color: @primary-dark;
+        background: $primary-dark;
+        border-color: $primary-dark;
         color: #ffffff;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
         transform: translateY(0);
     }
     
     &:focus {
-        background: @primary-color;
-        border-color: @primary-color;
+        background: $primary-color;
+        border-color: $primary-color;
         color: #ffffff;
-        box-shadow: 0 0 0 2px rgba(@primary-color, 0.2);
+        box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
     }
     
     &:disabled {
-        background: @bg-tertiary;
-        border-color: @border-base;
-        color: @text-disabled;
+        background: $bg-tertiary;
+        border-color: $border-base;
+        color: $text-disabled;
         box-shadow: none;
         transform: none;
     }
@@ -239,53 +239,53 @@ ul li {
 
 // ==================== 排序按钮组 ====================
 .sort-buttons {
-    border: 1px solid @border-base;
-    border-radius: @radius-xl;
+    border: 1px solid $border-base;
+    border-radius: $radius-xl;
     overflow: hidden;
     
     .sort-btn {
-        padding: @spacing-2 @spacing-4;
-        background: @bg-secondary;
+        padding: $spacing-2 $spacing-4;
+        background: $bg-secondary;
         border: none;
-        border-right: 1px solid @border-base;
-        font-size: @font-md;
-        font-weight: @font-weight-medium;
-        color: @text-secondary;
+        border-right: 1px solid $border-base;
+        font-size: $font-md;
+        font-weight: $font-weight-medium;
+        color: $text-secondary;
         cursor: pointer;
-        transition: @transition-base;
+        transition: $transition-base;
         
         &:last-child {
             border-right: none;
         }
         
         &:hover {
-            background: @bg-hover;
-            color: @text-primary;
+            background: $bg-hover;
+            color: $text-primary;
         }
         
         &.active {
-            background: @icon-bg-blue;
-            color: @primary-color;
+            background: $icon-bg-blue;
+            color: $primary-color;
             font-weight: @font-weight-semibold;
         }
     }
 }
 
 .filter-btn {
-    width: @search-height;
-    height: @search-height;
-    border: 1px solid lighten(@primary-color, 20%);
-    background: @icon-bg-blue;
-    border-radius: @radius-xl;
+    width: $search-height;
+    height: $search-height;
+    border: 1px solid lighten($primary-color, 20%);
+    background: $icon-bg-blue;
+    border-radius: $radius-xl;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: @transition-base;
+    transition: $transition-base;
     
     .iconify {
-        font-size: @icon-lg;
-        color: @primary-color;
+        font-size: $icon-lg;
+        color: $primary-color;
     }
 }
 
@@ -293,22 +293,22 @@ ul li {
 
 // 页面容器（仅控制布局，不覆盖组件）
 .page-container {
-    padding: @spacing-4 @spacing-6;
-    min-height: calc(100vh - @header-height);
-    background: @bg-primary;
+    padding: $spacing-4 $spacing-6;
+    min-height: calc(100vh - $header-height);
+    background: $bg-primary;
 }
 
 // 内容区块（通用容器）
 .content-section {
-    margin-bottom: @spacing-4;  // 16px - 紧凑间距
-    padding: @spacing-3;
-    background: @bg-secondary;
-    border-radius: @radius-lg;
+    margin-bottom: $spacing-4;  // 16px - 紧凑间距
+    padding: $spacing-3;
+    background: $bg-secondary;
+    border-radius: $radius-lg;
 }
 
 // 区块间距
 .section-gap {
-    margin-bottom: @spacing-5;
+    margin-bottom: $spacing-5;
 }
 
 // ==================== 列表头部 ====================
@@ -318,9 +318,9 @@ ul li {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    margin-bottom: @spacing-4;
-    padding-bottom: @spacing-3;
-    border-bottom: 1px solid @border-base;
+    margin-bottom: $spacing-4;
+    padding-bottom: $spacing-3;
+    border-bottom: 1px solid $border-base;
     
     // 当下方紧跟 GuideTips 时，移除底部间距
     & + .guide-tips-wrapper {
@@ -329,8 +329,8 @@ ul li {
     
     // 使用 GuideTips 时的样式
     &.with-tips {
-        margin-bottom: @spacing-3;  // 12px - 与 GuideTips 的间距（统一视觉间距）
-        padding-bottom: @spacing-3; // 12px
+        margin-bottom: $spacing-3;  // 12px - 与 GuideTips 的间距（统一视觉间距）
+        padding-bottom: $spacing-3; // 12px
     }
     
     // 带返回按钮的标题栏
@@ -340,7 +340,7 @@ ul li {
         .list-header-title {
             display: flex;
             align-items: center;
-            gap: @spacing-1;
+            gap: $spacing-1;
             
             .back-btn {
                 display: flex;
@@ -351,13 +351,13 @@ ul li {
                 padding: 0;
                 background: transparent;
                 border: none;
-                color: @text-secondary;
+                color: $text-secondary;
                 cursor: pointer;
                 transition: all 0.2s ease;
                 flex-shrink: 0;
                 
                 &:hover {
-                    color: @primary-color;
+                    color: $primary-color;
                     
                     .anticon {
                         font-weight: 700;
@@ -374,55 +374,55 @@ ul li {
             
             h1, h3 {
                 margin: 0;
-                line-height: @line-height-tight;  // 1.1
+                line-height: $line-height-tight;  // 1.1
             }
         }
     }
     
     &-title {
         h1, h3 {
-            font-size: @font-3xl;
-            font-weight: @font-weight-bold;
-            color: @text-primary;
-            margin: 0 0 @spacing-1 0;
-            line-height: @line-height-tight;  // 1.1
+            font-size: $font-3xl;
+            font-weight: $font-weight-bold;
+            color: $text-primary;
+            margin: 0 0 $spacing-1 0;
+            line-height: $line-height-tight;  // 1.1
         }
 
         p {
-            font-size: @font-sm;
-            color: @text-secondary;
+            font-size: $font-sm;
+            color: $text-secondary;
             margin: 0;
-            line-height: @line-height-base;  // 1.3
+            line-height: $line-height-base;  // 1.3
         }
     }
     
     &-actions {
         display: flex;
-        gap: @spacing-3;
+        gap: $spacing-3;
         align-items: center;
         
         .create-btn {
             display: flex;
             align-items: center;
-            gap: @spacing-2;
-            padding: @spacing-2 @spacing-4;
-            background: @primary-color;
+            gap: $spacing-2;
+            padding: $spacing-2 $spacing-4;
+            background: $primary-color;
             color: #fff;
             border: none;
-            border-radius: @radius-lg;
-            font-size: @font-md;
-            font-weight: @font-weight-medium;
+            border-radius: $radius-lg;
+            font-size: $font-md;
+            font-weight: $font-weight-medium;
             cursor: pointer;
-            transition: @transition-base;
+            transition: $transition-base;
             
             &:hover {
-                background: @primary-light;
-                transform: translateY(-@spacing-1);
-                box-shadow: @shadow-md;
+                background: $primary-light;
+                transform: translateY(-$spacing-1);
+                box-shadow: $shadow-md;
             }
             
             .iconify {
-                font-size: @icon-xl;
+                font-size: $icon-xl;
             }
         }
     }
@@ -434,10 +434,10 @@ ul li {
 .sub-list-header {
     display: flex;
     align-items: center;
-    gap: @spacing-4;
-    margin-bottom: @spacing-4;  // 16px - 紧凑间距
-    padding-bottom: @spacing-3;
-    border-bottom: 1px solid @border-base;
+    gap: $spacing-4;
+    margin-bottom: $spacing-4;  // 16px - 紧凑间距
+    padding-bottom: $spacing-3;
+    border-bottom: 1px solid $border-base;
     
     .back-btn {
         display: flex;
@@ -445,33 +445,33 @@ ul li {
         justify-content: center;
         width: 36px;
         height: 36px;
-        border-radius: @radius-lg;
-        background: @bg-tertiary;
-        border: 1px solid @border-base;
-        color: @text-secondary;
+        border-radius: $radius-lg;
+        background: $bg-tertiary;
+        border: 1px solid $border-base;
+        color: $text-secondary;
         cursor: pointer;
-        transition: @transition-base;
+        transition: $transition-base;
         flex-shrink: 0;
         
         &:hover {
-            background: @border-base;
-            color: @primary-color;
-            transform: translateX(-@spacing-1);
+            background: $border-base;
+            color: $primary-color;
+            transform: translateX(-$spacing-1);
         }
         
         .iconify {
-            font-size: @icon-lg;
+            font-size: $icon-lg;
         }
     }
     
     .sub-list-title {
         h1, h2 {
-            font-size: @font-3xl; // 20px
-            font-weight: @font-weight-bold;
-            color: @text-primary;
+            font-size: $font-3xl; // 20px
+            font-weight: $font-weight-bold;
+            color: $text-primary;
             margin: 0;
             white-space: nowrap;
-            line-height: @line-height-tight;  // 1.1
+            line-height: $line-height-tight;  // 1.1
         }
     }
 }
@@ -480,30 +480,30 @@ ul li {
 
 .create-action-wrapper {
     text-align: right;
-    margin-bottom: @spacing-4; // 紧凑一级：24px → 16px
+    margin-bottom: $spacing-4; // 紧凑一级：24px → 16px
     
     .create-action-btn {
         display: inline-flex;
         align-items: center;
-        gap: @spacing-2;
-        padding: @spacing-2 @spacing-4;
-        background: @primary-color;
+        gap: $spacing-2;
+        padding: $spacing-2 $spacing-4;
+        background: $primary-color;
         color: #fff;
         border: none;
-        border-radius: @radius-lg;
-        font-size: @font-md;
-        font-weight: @font-weight-medium;
+        border-radius: $radius-lg;
+        font-size: $font-md;
+        font-weight: $font-weight-medium;
         cursor: pointer;
-        transition: @transition-base;
+        transition: $transition-base;
         
         &:hover {
-            background: @primary-light;
-            transform: translateY(-@spacing-1);
-            box-shadow: @shadow-md;
+            background: $primary-light;
+            transform: translateY(-$spacing-1);
+            box-shadow: $shadow-md;
         }
         
         .iconify {
-            font-size: @icon-xl;
+            font-size: $icon-xl;
         }
     }
 }
@@ -513,17 +513,17 @@ ul li {
 .app-card-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: @spacing-4; // 紧凑一级：24px → 16px
+    gap: $spacing-4; // 紧凑一级：24px → 16px
     
-    @media (max-width: @screen-xl) {
+    @media (max-width: $screen-xl) {
         grid-template-columns: repeat(3, 1fr);
     }
     
-    @media (max-width: @screen-lg) {
+    @media (max-width: $screen-lg) {
         grid-template-columns: repeat(2, 1fr);
     }
     
-    @media (max-width: @screen-md) {
+    @media (max-width: $screen-md) {
         grid-template-columns: 1fr;
     }
 }
@@ -531,13 +531,13 @@ ul li {
 .knowledge-card-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: @spacing-4; // 紧凑一级：24px → 16px
+    gap: $spacing-4; // 紧凑一级：24px → 16px
     
-    @media (max-width: @screen-lg) {
+    @media (max-width: $screen-lg) {
         grid-template-columns: repeat(2, 1fr);
     }
     
-    @media (max-width: @screen-md) {
+    @media (max-width: $screen-md) {
         grid-template-columns: 1fr;
     }
 }
@@ -545,24 +545,24 @@ ul li {
 // ==================== 分页器 ====================
 
 .pagination-container {
-    padding: @spacing-4 0;
+    padding: $spacing-4 0;
     display: flex;
     justify-content: flex-end;
     
     .ant-pagination {
         .ant-pagination-item {
-            border-radius: @radius-lg;
-            border-color: @border-base;
-            transition: @transition-base;
+            border-radius: $radius-lg;
+            border-color: $border-base;
+            transition: $transition-base;
             
             &:hover {
-                border-color: @primary-color;
-                transform: translateY(-@spacing-1);
+                border-color: $primary-color;
+                transform: translateY(-$spacing-1);
             }
             
             &.ant-pagination-item-active {
-                background: @primary-color;
-                border-color: @primary-color;
+                background: $primary-color;
+                border-color: $primary-color;
                 
                 a {
                     color: #fff;
@@ -573,13 +573,13 @@ ul li {
         .ant-pagination-prev,
         .ant-pagination-next {
             .ant-pagination-item-link {
-                border-radius: @radius-lg;
-                border-color: @border-base;
-                transition: @transition-base;
+                border-radius: $radius-lg;
+                border-color: $border-base;
+                transition: $transition-base;
                 
                 &:hover {
-                    border-color: @primary-color;
-                    color: @primary-color;
+                    border-color: $primary-color;
+                    color: $primary-color;
                 }
             }
         }
@@ -588,7 +588,7 @@ ul li {
 
 // ==================== 响应式适配 ====================
 
-@media (max-width: @screen-md) {
+@media (max-width: $screen-md) {
     .sort-buttons {
         flex-wrap: wrap;
         
@@ -602,8 +602,8 @@ ul li {
 @media (max-width: @screen-sm) {
     .sort-buttons {
         .sort-btn {
-            padding: @spacing-1 @spacing-2;
-            font-size: @font-sm;
+            padding: $spacing-1 $spacing-2;
+            font-size: $font-sm;
         }
     }
 }

jk-rag-platform/src/styles/variables.scss

@@ -114,12 +114,12 @@ $spacing-12: 48px;
 $spacing-16: 64px;
 
 // 快捷别名
-$spacing-xs: @spacing-1;
-$spacing-sm: @spacing-2;
-$spacing-md: @spacing-3;
-$spacing-lg: @spacing-4;
-$spacing-xl: @spacing-6;
-$spacing-2xl: @spacing-8;
+$spacing-xs: $spacing-1;
+$spacing-sm: $spacing-2;
+$spacing-md: $spacing-3;
+$spacing-lg: $spacing-4;
+$spacing-xl: $spacing-6;
+$spacing-2xl: $spacing-8;
 
 // ===== 圆角系统 =====
 
@@ -131,12 +131,12 @@ $radius-2xl: 16px;
 $radius-full: 9999px;
 
 // 快捷别名
-$border-radius-sm: @radius-sm;
-$border-radius-md: @radius-md;
-$border-radius-lg: @radius-lg;
-$border-radius-xl: @radius-xl;
-$border-radius-2xl: @radius-2xl;
-$border-radius-full: @radius-full;
+$border-radius-sm: $radius-sm;
+$border-radius-md: $radius-md;
+$border-radius-lg: $radius-lg;
+$border-radius-xl: $radius-xl;
+$border-radius-2xl: $radius-2xl;
+$border-radius-full: $radius-full;
 
 // ===== 阴影系统 =====
 
@@ -190,9 +190,9 @@ $easing-out: cubic-bezier(0, 0, 0.2, 1);
 $easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
 // 快捷过渡
-$transition-base: all @animation-base @easing-default;
-$transition-fast: all @animation-fast @easing-default;
-$transition-slow: all @animation-slow @easing-default;
+$transition-base: all $animation-base $easing-default;
+$transition-fast: all $animation-fast $easing-default;
+$transition-slow: all $animation-slow $easing-default;
 
 // ===== 响应式断点 =====
 
@@ -203,18 +203,18 @@ $screen-xl: 1280px;
 $screen-2xl: 1536px;
 
 // 断点别名（max-width）
-@breakpoint-xs: ~"only screen and (max-width: @{screen-sm})";
-@breakpoint-sm: ~"only screen and (max-width: @{screen-md})";
-@breakpoint-md: ~"only screen and (max-width: @{screen-lg})";
-@breakpoint-lg: ~"only screen and (max-width: @{screen-xl})";
-@breakpoint-xl: ~"only screen and (max-width: @{screen-2xl})";
+$breakpoint-xs: "only screen and (max-width: #{$screen-sm})";
+$breakpoint-sm: "only screen and (max-width: #{$screen-md})";
+$breakpoint-md: "only screen and (max-width: #{$screen-lg})";
+$breakpoint-lg: "only screen and (max-width: #{$screen-xl})";
+$breakpoint-xl: "only screen and (max-width: #{$screen-2xl})";
 
 // 断点别名（min-width）
-@breakpoint-sm-up: ~"only screen and (min-width: @{screen-sm})";
-@breakpoint-md-up: ~"only screen and (min-width: @{screen-md})";
-@breakpoint-lg-up: ~"only screen and (min-width: @{screen-lg})";
-@breakpoint-xl-up: ~"only screen and (min-width: @{screen-xl})";
-@breakpoint-2xl-up: ~"only screen and (min-width: @{screen-2xl})";
+$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})";
+$breakpoint-md-up: "only screen and (min-width: #{$screen-md})";
+$breakpoint-lg-up: "only screen and (min-width: #{$screen-lg})";
+$breakpoint-xl-up: "only screen and (min-width: #{$screen-xl})";
+$breakpoint-2xl-up: "only screen and (min-width: #{$screen-2xl})";
 
 // ===== 布局尺寸 =====
 
@@ -227,8 +227,8 @@ $search-height: 40px;
 $breadcrumb-height: 44px;
 
 // 卡片尺寸
-$card-padding: @spacing-4;  // 16px
-$card-radius: @radius-xl;   // 12px
+$card-padding: $spacing-4;  // 16px
+$card-radius: $radius-xl;   // 12px
 $card-icon-size: 48px;
 $card-btn-size: 28px;
 $card-play-btn-size: 36px;
@@ -273,16 +273,16 @@ $sidebar-hover-bg: #F3F4F6;       // 悬停背景
 $sidebar-active-color: #131212;   // 激活文字色（深灰近黑）
 
 // 边框颜色别名
-$border-color: @border-base;
+$border-color: $border-base;
 
 // 占位符文字颜色
-$text-placeholder: @text-hint;
+$text-placeholder: $text-hint;
 
 // 主色悬停
-$primary-color-hover: @primary-light;
+$primary-color-hover: $primary-light;
 
 // 缓动别名
-$ease-base: @easing-default;
+$ease-base: $easing-default;
 
 // 卡片图标背景色
 $icon-bg-blue: #EFF6FF;
@@ -351,7 +351,7 @@ $tag-text-amber: #B45309;
 // 细边框
 @mixin hairline-border {
     position: relative;
-
+    
     &::after {
         content: '';
         position: absolute;
@@ -377,7 +377,7 @@ $tag-text-amber: #B45309;
 // 阴影快捷方式
 @mixin shadow-card {
     box-shadow: $shadow-sm;
-
+    
     &:hover {
         box-shadow: $shadow-lg;
     }