Merge remote-tracking branch 'origin/develop' into feat/tabbar

Tencent · Aug 21, 2024 · a17f3b2 · a17f3b2
2 parents 57db6af + d42b7fc
commit a17f3b2
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 28 deletions.
diff --git a/docs/mobile/api/grid.en-US.md b/docs/mobile/api/grid.en-US.md
@@ -0,0 +1,35 @@
+---
+title: Grid
+description: Used for functional entrance layout, cut pages or specific areas into large blocks such as several other blocks, forming several functional entrances.
+spline: base
+isComponent: true
+toc: false
+---
+
+### Basic Grid
+
+{{ base }}
+
+### Description
+
+{{ desc }}
+
+### Bordered
+
+{{ bordered }}
+
+### Badge
+
+{{ badge }}
+
+### Scrollable
+
+{{ scroll }}
+
+### Icon
+
+{{ icon }}
+
+### Card
+
+{{ card }}
diff --git a/docs/mobile/api/grid.md b/docs/mobile/api/grid.md
@@ -10,10 +10,26 @@ toc: false
 
 {{ base }}
 
-### 带说明宫格
+### 带描述宫格
 
 {{ desc }}
 
+### 带边框宫格
+
+{{ bordered }}
+
 ### 带徽标宫格
 
-{{ badge }}
+{{ badge }}
+
+### 可滑动宫格
+
+{{ scroll }}
+
+### 可传图标宫格
+
+{{ icon }}
+
+### 卡片宫格
+
+{{ card }}
diff --git a/docs/mobile/api/link.en-US.md b/docs/mobile/api/link.en-US.md
@@ -0,0 +1,17 @@
+---
+title: Link 
+description: Links are used to start a new task or jump to a new page.
+
+spline: base
+isComponent: true
+toc: false
+---
+
+
+### 01 Component Type
+
+{{ base }}
+
+### 02 Component Status
+
+{{ status }}
diff --git a/docs/mobile/api/link.md b/docs/mobile/api/link.md
@@ -0,0 +1,15 @@
+---
+title: Link 标签
+description: 用于开启一个任务或跳转一个新页面。
+spline: base
+isComponent: true
+toc: false
+---
+
+### 01 组件类型
+
+{{ base }}
+
+### 02 组件状态
+
+{{ status }}
diff --git a/docs/mobile/api/search.en-US.md b/docs/mobile/api/search.en-US.md
@@ -0,0 +1,31 @@
+---
+title: Search
+description: Search is used for users to input the search message and perform content search on the page.
+spline: base
+isComponent: true
+toc: false
+---
+
+## Code Demo
+
+### 01 Component Type
+
+Basic Search
+
+{{ base }}
+
+Display the cancel button after obtaining focus
+
+{{ action }}
+
+### 02 Component Style
+
+The shape of Search
+
+{{ shape }}
+
+### 03 Component State
+
+Default state alignment methods
+
+{{ other }}
diff --git a/docs/mobile/api/search.md b/docs/mobile/api/search.md
@@ -1,17 +1,31 @@
 ---
 title: Search 搜索框
-description: 用于用户输入搜索信息，并进行页面内容搜索
+description: 用于用户输入搜索信息，并进行页面内容搜索。
 spline: base
 isComponent: true
 toc: false
 ---
 
-### 基础搜索框
+## 代码演示
 
-使用场景：常用于全局内容搜索，位于搜索内容上方
+### 01 组件类型
+
+基础搜索框
 
 {{ base }}
 
-### 不同输入状态
+获取焦点后显示取消按钮
+
+{{ action }}
+
+### 02 组件样式
+
+搜索框形状
+
+{{ shape }}
+
+### 03 组件状态
+
+默认状态其他对齐方式
 
-{{ status }}
+{{ other }}
diff --git a/style/mobile/components/_index.less b/style/mobile/components/_index.less
@@ -60,7 +60,7 @@
 
 @import "./drawer/_index.less";
 
-@import "./search/_index.less";
+// @import "./search/_index.less";
 
 @import "./tabs/_index.less";
 

diff --git a/style/mobile/components/link/_index.less b/style/mobile/components/link/_index.less
@@ -35,11 +35,13 @@
       color: @@disabledColor;
     }
 
-    &.@{link}--hover {
-      color: @@activeColor;
+    &:active {
+      &.@{link}--hover {
+        color: @@activeColor;
 
-      &.@{link}--underline::after {
-        border-color: @@activeColor;
+        &.@{link}--underline::after {
+          border-color: @@activeColor;
+        }
       }
     }
   }
@@ -60,23 +62,26 @@
   display: flex;
   align-items: center;
   box-sizing: content-box;
+  text-decoration: none;
 
   &--underline::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     height: 0;
-    bottom: 0;
+    bottom: 2px;
     opacity: 1;
     border-bottom: 1px solid rgb(205, 11, 231);
   }
 
   &__prefix-icon:not(:empty) + &__content:not(:empty) {
     padding-left: 4px;
+    display: inherit;
   }
 
   &__content:not(:empty) + &__suffix-icon:not(:empty) {
     padding-left: 4px;
+    display: inherit;
   }
 }
diff --git a/style/mobile/components/link/_var.less b/style/mobile/components/link/_var.less
@@ -1,28 +1,73 @@
 // 状态色 - 默认色
 
-@link-default-color: var(--td-link-default-color, @font-gray-1); // default 主题默认态颜色
-@link-default-active-color: var(--td-link-default-active-color, @brand-color-active); // default 主题激活态颜色
-@link-default-disabled-color: var(--td-link-default-disabled-color, @text-color-disabled); // default 主题禁用态颜色
+@link-default-color: var(
+  --td-link-default-color,
+  @text-color-primary
+); // default 主题默认态颜色
+@link-default-active-color: var(
+  --td-link-default-active-color,
+  @brand-color-active
+); // default 主题激活态颜色
+@link-default-disabled-color: var(
+  --td-link-default-disabled-color,
+  @text-color-disabled
+); // default 主题禁用态颜色
 
 // 状态色 - 主色
-@link-primary-color: var(--td-link-primary-color, @brand-color); // primary 主题默认态颜色
-@link-primary-active-color: var(--td-link-primary-active-color, @brand-color-active); // primary 主题激活态颜色
-@link-primary-disabled-color: var(--td-link-primary-disabled-color, @brand-color-disabled); // primary 主题禁用态颜色
+@link-primary-color: var(
+  --td-link-primary-color,
+  @brand-color
+); // primary 主题默认态颜色
+@link-primary-active-color: var(
+  --td-link-primary-active-color,
+  @brand-color-active
+); // primary 主题激活态颜色
+@link-primary-disabled-color: var(
+  --td-link-primary-disabled-color,
+  @brand-color-disabled
+); // primary 主题禁用态颜色
 
 // 状态色 - 成功
-@link-success-color: var(--td-link-success-color, @success-color); // success 主题默认态颜色
-@link-success-active-color: var(--td-link-success-active-color, @success-color-active); // success 主题激活态颜色
-@link-success-disabled-color: var(--td-link-success-disabled-color, @success-color-disabled); // success 主题禁用态颜色
+@link-success-color: var(
+  --td-link-success-color,
+  @success-color
+); // success 主题默认态颜色
+@link-success-active-color: var(
+  --td-link-success-active-color,
+  @success-color-active
+); // success 主题激活态颜色
+@link-success-disabled-color: var(
+  --td-link-success-disabled-color,
+  @success-color-disabled
+); // success 主题禁用态颜色
 
 // 状态色 - 警告
-@link-warning-color: var(--td-link-warning-color, @warning-color); // warning 主题默认态颜色
-@link-warning-active-color: var(--td-link-warning-active-color, @warning-color-active); // warning 主题激活态颜色
-@link-warning-disabled-color: var(--td-link-warning-disabled-color, @warning-color-disabled); // warning 主题禁用态颜色
+@link-warning-color: var(
+  --td-link-warning-color,
+  @warning-color
+); // warning 主题默认态颜色
+@link-warning-active-color: var(
+  --td-link-warning-active-color,
+  @warning-color-active
+); // warning 主题激活态颜色
+@link-warning-disabled-color: var(
+  --td-link-warning-disabled-color,
+  @warning-color-disabled
+); // warning 主题禁用态颜色
 
 // 状态色 - 危险
-@link-danger-color: var(--td-link-danger-color, @error-color); // danger 主题默认态颜色
-@link-danger-active-color: var(--td-link-danger-active-color, @error-color-active); // danger 主题激活态颜色
-@link-danger-disabled-color: var(--td-link-danger-disabled-color, @error-color-disabled); // danger 主题禁用态颜色
+@link-danger-color: var(
+  --td-link-danger-color,
+  @error-color
+); // danger 主题默认态颜色
+@link-danger-active-color: var(
+  --td-link-danger-active-color,
+  @error-color-active
+); // danger 主题激活态颜色
+@link-danger-disabled-color: var(
+  --td-link-danger-disabled-color,
+  @error-color-disabled
+); // danger 主题禁用态颜色
 
 // 字号
 @link-content-small-font-size: 12px;
@@ -37,6 +82,7 @@
 @link-content-large-line-height: 24px;
 @link-icon-large-font-size: 18px;
 
+@link-icon-margin: 6px;
 @themes: primary, success, warning, default, danger;
 
 @link: ~"@{prefix}-link";