refactor: 同步 GiDemo 更新

src/styles/arco-ui/a-space.less

@@ -0,0 +1,4 @@
+// 修复arco-space-item为空时，仍然显示的问题
+.arco-space-item:empty {
+  display: none;
+}

src/styles/arco-ui/a-tabs.less

@@ -0,0 +1,3 @@
+.arco-tabs-nav-extra:not(:empty) {
+  margin-right: var(--padding);
+}

src/styles/arco-ui/index.less

@@ -15,6 +15,8 @@
 @import './a-typography.less';
 @import './a-button.less';
 @import './a-divider.less';
+@import './a-space.less';
+@import './a-tabs.less';
 
 @color-menu-dark-bg: var(--color-bg-1);
 @card-color-bg: var(--color-bg-1);
@@ -71,4 +73,4 @@ body {
 .danger {
   color: rgb(var(--danger-6));
   margin-right: 4px;
-}
+}

src/styles/base.scss

@@ -1,4 +1,4 @@
-@use './var.scss' as *;
+@import './var.scss';
 
 body {
   --margin: 14px; // 通用外边距

src/styles/global.scss

@@ -1,5 +1,5 @@
 /* 全局样式 */
-@use './var.scss' as *;
+@import './var.scss';
 
 .w-full {
   width: 100%;
@@ -162,6 +162,26 @@
   border-radius: 100px;
 }
 
+.gi_bg_1 {
+  background-color: var(--color-bg-1);
+}
+
+.gi_bg_2 {
+  background-color: var(--color-bg-2);
+}
+
+.gi_bg_3 {
+  background-color: var(--color-bg-3);
+}
+
+.gi_bg_4 {
+  background-color: var(--color-bg-4);
+}
+
+.gi_bg_5 {
+  background-color: var(--color-bg-5);
+}
+
 // hover按钮
 .gi_hover_btn {
   border: 0 !important;
@@ -211,6 +231,24 @@
   }
 }
 
+// 页面卡片，右侧有返回按钮
+.gi_page_card {
+  flex: 1;
+  margin: var(--margin);
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .arco-card-body {
+    flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
 // 卡片标题，标题左侧的伪类样式
 .gi_card_title {
   > .arco-card-header {
@@ -310,6 +348,26 @@
   }
 }
 
+.gi_full_tabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .arco-tabs-content {
+    flex: 1;
+    padding-top: 0;
+
+    .arco-tabs-content-list {
+      height: 100%;
+    }
+
+    .arco-tabs-pane {
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+}
+
 // 编辑表格，表头的必填红色星号
 .gi_column_require {
   .arco-table-th-title {
@@ -321,6 +379,14 @@
   }
 }
 
+.gi_full_column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
 .gi_tabs {
   display: flex;
   flex-direction: column;

src/styles/index.scss

@@ -1,17 +1,17 @@
 // 基础样式
-@use './base.scss' as *;
+@import './base.scss';
 
 // 全局类名样式
-@use './global.scss' as *;
+@import './global.scss';
 
 // 自定义原生滚动条样式
-@use './scrollbar-reset.scss' as *;
+@import './scrollbar-reset.scss';
 
 // 自定义 nprogress 插件进度条颜色
-@use './nprogress.scss' as *;
+@import './nprogress.scss';
 
 // 富文本的css主题颜色变量
-@use './editor.scss' as *;
+@import './editor.scss';
 
 // 动画类名
-@use './animated.scss' as *;
+@import './animated.scss';