From 83d6c6799061be56b0f70cfd655423277be347b8 Mon Sep 17 00:00:00 2001
From: nzbin <nzb329@163.com>
Date: Mon, 15 Apr 2024 23:19:17 +0800
Subject: [PATCH] refactor(docs): add rounded corners for table and fix typo

---
 .../conditions/conditions.component.html      |  2 +-
 .../pages/conditions/conditions.component.ts  |  5 +-
 projects/docs/src/styles/_reboot.scss         | 48 ++++++++++++++++---
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/projects/docs/src/app/pages/conditions/conditions.component.html b/projects/docs/src/app/pages/conditions/conditions.component.html
index 4b06abe..39400f5 100644
--- a/projects/docs/src/app/pages/conditions/conditions.component.html
+++ b/projects/docs/src/app/pages/conditions/conditions.component.html
@@ -37,7 +37,7 @@ <h2 id="rule">
         </li>
         <li>
           <code>$ne</code> -
-          <span>not eaqual</span>
+          <span>not equal</span>
         </li>
         <li>
           <code>$gt</code> -
diff --git a/projects/docs/src/app/pages/conditions/conditions.component.ts b/projects/docs/src/app/pages/conditions/conditions.component.ts
index 8b9f05e..222524a 100644
--- a/projects/docs/src/app/pages/conditions/conditions.component.ts
+++ b/projects/docs/src/app/pages/conditions/conditions.component.ts
@@ -14,11 +14,10 @@ import { ExampleViewerComponent, PageHeaderComponent } from '../../shared';
 })
 export class ConditionsComponent {
   ruleJson = `{
-  "type": "...",
-  "name": "...",
+  ...
   "showIf": {
     "conditions": [
-      [ "path", "operator", "value" ],
+      ["path", "operator", "value"],
       ...
     ],
     "logicalType": "$or"
diff --git a/projects/docs/src/styles/_reboot.scss b/projects/docs/src/styles/_reboot.scss
index 1e5168d..f0c27e0 100644
--- a/projects/docs/src/styles/_reboot.scss
+++ b/projects/docs/src/styles/_reboot.scss
@@ -91,13 +91,47 @@ code {
 
 table {
   width: 100%;
-  caption-side: bottom;
-  border-collapse: collapse;
-
-  th,
-  td {
-    padding: 8px;
-    border: 1px solid var(--border-color);
+  border-spacing: 0;
+
+  tr {
+    th {
+      border-top: 1px solid var(--border-color);
+    }
+
+    th,
+    td {
+      padding: 8px;
+      border-right: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+
+      &:first-child {
+        border-left: 1px solid var(--border-color);
+      }
+    }
+
+    &:first-child {
+      th {
+        &:first-child {
+          border-top-left-radius: 8px;
+        }
+
+        &:last-child {
+          border-top-right-radius: 8px;
+        }
+      }
+    }
+
+    &:last-child {
+      td {
+        &:first-child {
+          border-bottom-left-radius: 8px;
+        }
+
+        &:last-child {
+          border-bottom-right-radius: 8px;
+        }
+      }
+    }
   }
 }