From db531af81800a85435072ed91776c37bafe95f4f Mon Sep 17 00:00:00 2001
From: YufJi <18012261618@126.com>
Date: Sat, 13 Jan 2024 21:01:17 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=92=8D=20=E7=BA=BF=E6=80=A7?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80demo=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-vusion/styles/theme.css                   |  5 ++
 src/linear-layout/api.ts                      |  2 +-
 src/linear-layout/demo/index.vue              | 65 ++++++++++++-------
 src/linear-layout/index.less                  | 16 ++---
 .../test/__snapshots__/demo.spec.js.snap      | 42 ++++++++++++
 src/linear-layout/test/demo.spec.js           |  4 ++
 6 files changed, 102 insertions(+), 32 deletions(-)
 create mode 100644 src/linear-layout/test/__snapshots__/demo.spec.js.snap
 create mode 100644 src/linear-layout/test/demo.spec.js

diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
index 8d4166881..1c2b7226a 100644
--- a/src-vusion/styles/theme.css
+++ b/src-vusion/styles/theme.css
@@ -61,6 +61,11 @@
   --van-space-base: var(
     --van-space-baset
   ); /* @desc 布局内各元素之间的外间距, 如：1px */ /* @prefix van */
+  --van-space-shrink: -1px;
+  --van-space-mini: 4px;
+  --van-space-small: 10px;
+  --van-space-large: 30px;
+
 
   /* @component van-panel */
   --van-panel-background-color: #fff; /* @type color */ /* @desc panel背景色 */ /* @depStaticStyles ["background-color"] */
diff --git a/src/linear-layout/api.ts b/src/linear-layout/api.ts
index 682b9a18f..fb120e4a2 100644
--- a/src/linear-layout/api.ts
+++ b/src/linear-layout/api.ts
@@ -56,7 +56,7 @@ namespace nasl.ui {
       },
       if: _ => _.justify !== 'space-between' && _.justify !== 'space-around'
     })
-    gap: 'shrink' | 'none' | 'small' | 'normal' | 'large' = 'normal';
+    gap: 'shrink' | 'none' | 'mini' | 'small' | 'large' = 'none';
     @Prop<VanLinearLayoutOptions, 'layout'>({
       group: '主要属性',
       title: '子元素展示方式',
diff --git a/src/linear-layout/demo/index.vue b/src/linear-layout/demo/index.vue
index 9b9b5112c..5b3850c78 100644
--- a/src/linear-layout/demo/index.vue
+++ b/src/linear-layout/demo/index.vue
@@ -1,43 +1,62 @@
 <template>
   <demo-section>
-    <demo-block>
-      <div>单行排布</div>
-
-      <van-linear-layout ref="linear1" direction="horizontal" mode="flex" justify="start" alignment="start">
-          <van-text :ref="`text2`" text="普通文本"></van-text>
-          <van-button :ref="`button1`" type="default" size="middle" text="确定" squareroud="round"></van-button>
-      </van-linear-layout>
+    <demo-block title="行内">
+      <div style="height: 100px; background-color: red;">
+          <van-linear-layout mode="inline" style="width: 100px; height: 50px; background-color: blue;">
+          </van-linear-layout>
+          <van-linear-layout mode="inline" style="width: 100px; height: 50px; background-color: green;">
+          </van-linear-layout>
+        </div>
     </demo-block>
 
-    <demo-block>
-      <div>多行排布</div>
-      <van-linear-layout direction="vertical">
-          <van-linear-layout>
+    <demo-block title="块级">
+      <div style="height: 100px; background-color: red;">
+          <van-linear-layout mode="block" style="width: 100px; height: 50px; background-color: blue;">
           </van-linear-layout>
-          <van-linear-layout>
+          <van-linear-layout mode="block" style="width: 100px; height: 50px; background-color: green;">
           </van-linear-layout>
+        </div>
+    </demo-block>
+
+    <demo-block title="弹性--单行排布">
+      <van-linear-layout mode="flex" direction="horizontal" gap="small" justify="center" alignment="center" style="height: 100px; background-color: red;">
+          <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
       </van-linear-layout>
     </demo-block>
 
-    <demo-block>
-      <div>两端排布</div>
+    <demo-block title="多行排布">
+      <van-linear-layout mode="flex" direction="vertical" gap="small" justify="center" alignment="center" style="background-color: red;">
+          <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
+      </van-linear-layout>
+    </demo-block>
 
-      <van-linear-layout justify="space-between">
-        <van-linear-layout>
-        </van-linear-layout>
-        <van-linear-layout>
-        </van-linear-layout>
+    <demo-block title="两端排布">
+      <van-linear-layout mode="flex" direction="horizontal" justify="space-between" alignment="center" style="height: 100px; background-color: red;">
+        <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
       </van-linear-layout>
     </demo-block>
 
+    <demo-block title="平均排布">
+      <van-linear-layout mode="flex" direction="horizontal" justify="space-around" alignment="center" style="height: 100px; background-color: red;">
+        <div style="width: 100px; height: 50px; background-color: blue;">
+          </div>
+          <div style="width: 100px; height: 50px; background-color: green;">
+          </div>
+      </van-linear-layout>
+    </demo-block>
   </demo-section>
-
 </template>
 
 <script>
 export default {
-  mounted() {
-    this.$refs.linear1.openLoading()
-  }
 }
 </script>
diff --git a/src/linear-layout/index.less b/src/linear-layout/index.less
index fc8a3e220..6d1a52131 100644
--- a/src/linear-layout/index.less
+++ b/src/linear-layout/index.less
@@ -29,11 +29,11 @@
 }
 
 .van-linear-layout[direction="horizontal"][gap="shrink"]>*:not(:last-child) {
-  margin-right: var(--space-shrink);
+  margin-right: var(--van-space-shrink);
 }
 
 .van-linear-layout[direction="vertical"][gap="shrink"]>*:not(:last-child) {
-  margin-bottom: var(--space-shrink);
+  margin-bottom: var(--van-space-shrink);
 }
 
 .van-linear-layout[direction="horizontal"][gap="shrink"]>*:hover {
@@ -49,27 +49,27 @@
 }
 
 .van-linear-layout[direction="horizontal"][gap="mini"]>*:not(:last-child) {
-  margin-right: var(--space-mini);
+  margin-right: var(--van-space-mini);
 }
 
 .van-linear-layout[direction="vertical"][gap="mini"]>*:not(:last-child) {
-  margin-bottom: var(--space-mini);
+  margin-bottom: var(--van-space-mini);
 }
 
 .van-linear-layout[direction="horizontal"][gap="small"]>*:not(:last-child) {
-  margin-right: var(--space-small);
+  margin-right: var(--van-space-small);
 }
 
 .van-linear-layout[direction="vertical"][gap="small"]>*:not(:last-child) {
-  margin-bottom: var(--space-small);
+  margin-bottom: var(--van-space-small);
 }
 
 .van-linear-layout[direction="horizontal"][gap="large"]>*:not(:last-child) {
-  margin-right: var(--space-large);
+  margin-right: var(--van-space-large);
 }
 
 .van-linear-layout[direction="vertical"][gap="large"]>*:not(:last-child) {
-  margin-bottom: var(--space-large);
+  margin-bottom: var(--van-space-large);
 }
 
 /* @deprecated */
diff --git a/src/linear-layout/test/__snapshots__/demo.spec.js.snap b/src/linear-layout/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..441a8d2a0
--- /dev/null
+++ b/src/linear-layout/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div style="height: 100px; background-color: red;">
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="inline" style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="inline" style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 100px; background-color: red;">
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="block" style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="block" style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" gap="small" justify="center" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="vertical" vusion-slot-name="default" class="van-linear-layout" mode="flex" gap="small" justify="center" alignment="center" style="background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" justify="space-between" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+  <div>
+    <div type="" direction="horizontal" vusion-slot-name="default" class="van-linear-layout" mode="flex" justify="space-around" alignment="center" style="height: 100px; background-color: red;">
+      <div style="width: 100px; height: 50px; background-color: blue;"></div>
+      <div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/linear-layout/test/demo.spec.js b/src/linear-layout/test/demo.spec.js
new file mode 100644
index 000000000..51a34a969
--- /dev/null
+++ b/src/linear-layout/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo'
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);