From 1df2fc86ff8b9fcc5f3d297cc574d0edc6eeaaf7 Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Tue, 2 Sep 2025 10:33:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(doc):=20OCard=E7=BB=84=E4=BB=B6=E8=A1=A5?= =?UTF-8?q?=E5=85=85=E4=B8=BB=E9=A2=98=E8=A7=84=E8=8C=83=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=EF=BC=8CCSS=E5=8F=98=E9=87=8FAPI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__docs__/__case__/AscendComposite1.vue | 40 +++++++++ .../__docs__/__case__/AscendComposite2.vue | 18 ++++ .../card/__docs__/__case__/AscendImage.vue | 36 ++++++++ .../__docs__/__case__/AscendPlainImage1.vue | 38 ++++++++ .../__docs__/__case__/AscendPlainImage2.vue | 59 ++++++++++++ .../__docs__/__case__/AscendPlainText.vue | 85 ++++++++++++++++++ .../__docs__/__case__/KunpengComposite1.vue | 43 +++++++++ .../__docs__/__case__/KunpengComposite2.vue | 18 ++++ .../card/__docs__/__case__/KunpengImage.vue | 41 +++++++++ .../__docs__/__case__/KunpengPlainImage1.vue | 37 ++++++++ .../__docs__/__case__/KunpengPlainImage2.vue | 53 +++++++++++ .../__docs__/__case__/KunpengPlainText.vue | 90 +++++++++++++++++++ .../__docs__/__case__/OpenEulerComposite1.vue | 37 ++++++++ .../__docs__/__case__/OpenEulerComposite2.vue | 18 ++++ .../card/__docs__/__case__/OpenEulerImage.vue | 41 +++++++++ .../__case__/OpenEulerPlainImage1.vue | 38 ++++++++ .../__case__/OpenEulerPlainImage2.vue | 53 +++++++++++ .../__docs__/__case__/OpenEulerPlainText.vue | 88 ++++++++++++++++++ .../src/card/__docs__/index.en-US.md | 54 +++++++++++ .../src/card/__docs__/index.zh-CN.md | 53 +++++++++++ 20 files changed, 940 insertions(+) create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendImage.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue create mode 100644 packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue new file mode 100644 index 00000000..60845fe0 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendComposite1.vue @@ -0,0 +1,40 @@ + + + +#### 复合卡片 + +昇腾主题文本按钮有特殊的交互效果: + +参考:[文本按钮](/zh-CN/components/button#文本按钮(无背景,无线框)) + + + +#### Composite Cards + +The Ascend theme provides special interaction effects for text buttons: + +Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border)) + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue new file mode 100644 index 00000000..15fdf65d --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendComposite2.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue b/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue new file mode 100644 index 00000000..466f1304 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendImage.vue @@ -0,0 +1,36 @@ + + + +#### 图文卡片 + + + +#### Image-Text card + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue new file mode 100644 index 00000000..692cb27c --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage1.vue @@ -0,0 +1,38 @@ + + + +#### 纯图卡片 + +纯图卡片使用 `OFigure` 组件实现: + +1. 当内容在卡片底部时,使用 `title` 插槽插入文案 +2. 当内容从上部开始,使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题,浅色背景图片可使用浅色主题,从而提高内容的对比度。 +3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片,需设置`hoverable`属性为`true` +4. 给 `OFigure` 添加 `c-figure-ascend-radius` 类名使用 `L` 尺寸的圆角,添加 `c-figure-ascend-xl-radius` 类名使用 `XL` 尺寸的圆角 + + + +#### Image-Only Card + +Image-Only Cards are implemented using the `OFigure` component: + +1. When content is at the bottom of the card, use the `title` slot to insert text. +2. When content starts from the top, use the `default` slot to insert content. + For dark background images, the dark theme can be used; for light background images, the light theme can be used to improve content contrast. +3. Interactive Image-Only Cards require images to zoom in when hovered over or pressed. Set the `hoverable` property to `true`. +4. Add the `c-figure-ascend-radius` class to `OFigure` to use the L-sized border radius, + and add the `c-figure-ascend-xl-radius` class to use the XL-sized border radius. + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue new file mode 100644 index 00000000..afe763ae --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainImage2.vue @@ -0,0 +1,59 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue new file mode 100644 index 00000000..fd8fe7b4 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/AscendPlainText.vue @@ -0,0 +1,85 @@ + + + +### 昇腾主题规范 + +可交互卡片需满足以下视觉要求: + +鼠标悬停或按下时 + +- 阴影:设置`:hoverable="true"` +- 极光色:给 `OCard` 添加 `c-card-ascend-hover` 类名 + +昇腾主题中卡片圆角有 XL 和 L 两种尺寸(默认为 L 尺寸),若使用 XL 尺寸,则添加`c-card-ascend-xl-radius`类名 + +注意事项:`OCard`具有`href`属性时默认开启阴影效果,不用再设置`:hoverable="true"` + +#### 文本卡片 & 图标卡片 + + + +### Ascend Theme Specifications + +Interactive cards must meet the following visual requirements: + +On hover or press: + +- Shadow: Set `:hoverable="true"` +- Ascend Color: Add the `c-card-ascend-hover` class to `OCard` + +The Ascend theme supports two border-radius sizes for cards: XL and L (default is L). To use the XL size, add the `c-card-ascend-xl-radius` class. + +Note: When the `OCard` has an `href` attribute, the shadow effect is enabled by default. There is no need to set `:hoverable="true"`. + +#### Text Cards & Icon Cards + + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue new file mode 100644 index 00000000..f524836c --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite1.vue @@ -0,0 +1,43 @@ + + + +#### 复合卡片 + +鲲鹏主题要求文本按钮 hover 时文字变红并显示红色下划线: + +1. 使用 `OLink` 组件 +2. 设置 `:hover-underline="true"` 且添加 `c-link-kunpeng` 类名 + +参考:[文本按钮](/zh-CN/components/button#文本按钮(无背景,无线框)) + + + +#### Composite Card + +The Kunpeng Theme requires that the text of a text button turns red and displays a red underline on hover: + +1. Use the `OLink` component +2. Set `:hover-underline="true"` and add the `c-link-kunpeng` class name + +Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border)) + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue new file mode 100644 index 00000000..1e060f8a --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengComposite2.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue new file mode 100644 index 00000000..a25c038d --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengImage.vue @@ -0,0 +1,41 @@ + + + +#### 图文卡片 + +鲲鹏主题中封面图片与卡片边缘之间没有间距,可以给 `OCard` 添加 `c-card-kunpeng` 类名应用该样式。 + + + +#### Image-Text Card + +In the Kunpeng Theme, there is no spacing between the cover image and the card edge. +You can add the `c-card-kunpeng` class name to the `OCard` component to apply this styling. + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue new file mode 100644 index 00000000..a5eec55a --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage1.vue @@ -0,0 +1,37 @@ + + + +#### 纯图卡片 + +纯图卡片使用 `OFigure` 组件实现: + +1. 当内容在卡片底部时,使用 `title` 插槽插入文案 +2. 当内容从上部开始,使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题,浅色背景图片可使用浅色主题,从而提高内容的对比度。 +3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片,需设置`hoverable`属性为`true` +4. 可通过给 `OFigure` 添加 `c-figure-kunpeng-radius` 类名应用符合规范的卡片圆角样式 + + + +#### Image-Only Card + +The Image-Only Card is implemented using the `OFigure` component: + +1. When content is positioned at the bottom of the card, use the `title` slot to insert text. +2. When content starts from the top of the card, use the `default` slot to insert content. + For dark background images, the dark theme can be applied; for light background images, the light theme can be applied to improve content contrast. +3. Interactive Image-Only Cards require images to enlarge on hover or press. Set the `hoverable` prop to `true`. +4. A spec-compliant card border radius style can be applied by adding the `c-figure-kunpeng-radius` class name to `OFigure`. + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue new file mode 100644 index 00000000..b355caf4 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainImage2.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue new file mode 100644 index 00000000..c9e0eea4 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/KunpengPlainText.vue @@ -0,0 +1,90 @@ + + + +### 鲲鹏主题规范 + +可交互卡片需满足以下视觉要求: + +鼠标悬停或按下时 + +- 文字颜色:红色(需设置`:hoverable="true"`和`cursor="pointer"`) +- 图标颜色:红色(需设置`:hoverable="true"`) +- 阴影:禁用 + +注意事项: + +1. 必须添加`c-card-kunpeng`类名以应用主题样式 +2. `OCard`具有`href`属性时默认开启文字及图标交互效果,不用再设置`:hoverable="true"`及`cursor="pointer"`属性 + +#### 文本卡片 & 图标卡片 + + + +### Kunpeng Theme Specifications + +Interactive cards must meet the following visual requirements: + +On hover or press: + +- Text color: Red (requires setting `:hoverable="true"` and `cursor="pointer"`) +- Icon color: Red (requires setting `:hoverable="true"`) +- Shadow: Disabled + +Notes: + +1. The `c-card-kunpeng` class name must be added to apply theme styles +2. When the `OCard` has an `href` attribute, text and icon interaction effects are enabled by default. + There is no need to set the `:hoverable="true"` and `cursor="pointer"` properties + +#### Text Cards & Icon Cards + + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue new file mode 100644 index 00000000..db5fbf19 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite1.vue @@ -0,0 +1,37 @@ + + + +#### 复合卡片 + +欧拉主题中文本按钮无下划线,因此 `OLink` 组件的 `underline` 属性应设置为 `false`(默认值) + +参考:[文本按钮](/zh-CN/components/button#文本按钮(无背景,无线框)) + + + +#### Composite Card + +In the Euler Theme, text buttons have no underline, so the `underline` prop of the `OLink` component should be set to `false` (default value). + +Reference: [Text Button](/en-US/components/button#text-buttons-(no-background%2C-no-border)) + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue new file mode 100644 index 00000000..8f6cad55 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerComposite2.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue new file mode 100644 index 00000000..a3073a68 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerImage.vue @@ -0,0 +1,41 @@ + + + +#### 图文卡片 + +欧拉主题中图片与卡片之间没有间距,可以给 `OCard` 添加 `c-card-openeuler` 类名应用该样式。 + + + +#### Image-Text Card + +In the Euler Theme, there is no spacing between the image and the card. +You can add the `c-card-openeuler` class name to the `OCard` component to apply this styling. + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue new file mode 100644 index 00000000..3255aa42 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage1.vue @@ -0,0 +1,38 @@ + + + +#### 纯图卡片 + +纯图卡片使用 `OFigure` 组件实现: + +1. 当内容在卡片底部时,使用 `title` 插槽插入文案 +2. 当内容从上部开始,使用 `default` 插槽插入内容。深色背景图片可使用使用深色主题,浅色背景图片可使用浅色主题,从而提高内容的对比度。 +3. 可交互的纯图卡片要求鼠标悬停或按下时放大图片,需设置`hoverable`属性为`true` +4. 可通过给 `OFigure` 添加 `c-figure-openeuler-radius` 类名应用符合规范的卡片圆角样式 + + + +#### Image-Only Card + +The Image-Only Card is implemented using the `OFigure` component: + +1. When content is positioned at the bottom of the card, use the `title` slot to insert text. +2. When content starts from the top of the card, use the `default` slot to insert content. + For dark background images, the dark theme can be applied; for light background images, the light theme can be applied to improve content contrast. +3. Interactive Image-Only Cards require images to enlarge on hover or press. Set the `hoverable` prop to `true`. +4. A spec-compliant card border radius style can be applied by adding the `c-figure-openeuler-radius` class name to `OFigure`. + + + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue new file mode 100644 index 00000000..c01f6cb4 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainImage2.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue new file mode 100644 index 00000000..869eeb48 --- /dev/null +++ b/packages/opendesign/src/card/__docs__/__case__/OpenEulerPlainText.vue @@ -0,0 +1,88 @@ + + + +### 欧拉主题规范 + +可交互卡片需满足以下视觉要求: + +鼠标悬停或按下时 + +- 文字颜色:主题色(需设置`:hoverable="true"`和`cursor="pointer"`) +- 显示阴影:(需设置`:hoverable="true"`) + +注意事项: + +1. 必须添加`c-card-openeuler`类名以应用主题样式 +2. `OCard`具有`href`属性时默认开启文字及图标交互效果,不用再设置`:hoverable="true"`及`cursor="pointer"`属性 + +#### 文本卡片 & 图标卡片 + + + +### Euler Theme Specifications + +Interactive cards must meet the following visual requirements: + +When hovering or pressing: + +- Text color: Primary Color (requires setting `:hoverable="true"` and `cursor="pointer"`) +- Display Shadow: (requires setting `:hoverable="true"`) + +Notes: + +1. Must add the `c-card-openeuler` class name to apply the theme styles. +2. When the `OCard` has an `href` attribute, text and icon interaction effects are automatically enabled, +so there is no need to set `:hoverable="true"` or `cursor="pointer"`. + +#### Text Card & Icon Card + + + + + diff --git a/packages/opendesign/src/card/__docs__/index.en-US.md b/packages/opendesign/src/card/__docs__/index.en-US.md index d14192e2..238eaf32 100644 --- a/packages/opendesign/src/card/__docs__/index.en-US.md +++ b/packages/opendesign/src/card/__docs__/index.en-US.md @@ -9,6 +9,60 @@ sidebar: OCard + + + + + + + + + + + + + + + + + + + + + ## API +### CSS 变量 + +| CSS Variables | Description | +| --- | --- | +| \-\-card-bg-color | Background color | +| \-\-card-radius | Border radius | +| \-\-card-shadow | Shadow in normal state | +| \-\-card-shadow-hover | Shadow in hover state | +| \-\-card-shadow-active | Shadow in active state | +| \-\-card-cover-radius | Cover border radius | +| \-\-card-h-cover-width | Horizontal cover width (effective in horizontal layout) | +| \-\-card-h-cover-max-width | Maximum horizontal cover width (effective in horizontal layout) | +| \-\-card-main-padding-v | Vertical padding of main content area | +| \-\-card-main-padding-h | Horizontal padding of main content area | +| \-\-card-main-padding | Defines the main content padding by combining vertical and horizontal padding values: `var(--card-main-padding-v) var(--card-main-padding-h)` | +| \-\-card-icon-gap | Spacing between icon and content: bottom margin in vertical layout, right margin in horizontal layout, left margin in reverse horizontal layout | +| \-\-card-icon-color | Icon color | +| \-\-card-icon-size | Icon size | +| \-\-card-header-color | Header color | +| \-\-card-header-text-size | Header text size | +| \-\-card-header-text-height | Header text height | +| \-\-card-title-word-break | Word-break property value for title | +| \-\-card-content-gap | Spacing between title and content | +| \-\-card-content-color | Content color | +| \-\-card-content-text-size | Content text size | +| \-\-card-content-text-height | Content text height | +| \-\-card-detail-word-break | Word-break property value for detail | +| \-\-card-footer-gap | Spacing between footer and content | +| \-\-card-footer-color | Footer color | +| \-\-card-footer-text-size | Footer text size | +| \-\-card-footer-text-height | Footer text height | +| \-\-card-cover-padding | Cover padding | + diff --git a/packages/opendesign/src/card/__docs__/index.zh-CN.md b/packages/opendesign/src/card/__docs__/index.zh-CN.md index 1d36e822..7ae4cb77 100644 --- a/packages/opendesign/src/card/__docs__/index.zh-CN.md +++ b/packages/opendesign/src/card/__docs__/index.zh-CN.md @@ -9,6 +9,59 @@ sidebar: OCard 卡片 + + + + + + + + + + + + + + + + + + + + ## API +### CSS 变量 + +| CSS 变量 | 描述 | +| --- | --- | +| \-\-card-bg-color | 背景色 | +| \-\-card-radius | 圆角 | +| \-\-card-shadow | 普通状态下的阴影 | +| \-\-card-shadow-hover | hover状态下的阴影 | +| \-\-card-shadow-active | 激活状态下的阴影 | +| \-\-card-cover-radius | 封面圆角 | +| \-\-card-h-cover-width | 横向封面宽度,在横向布局下有效 | +| \-\-card-h-cover-max-width | 横向封面最大宽度,在横向布局下有效 | +| \-\-card-main-padding-v | 内容区域垂直内边距 | +| \-\-card-main-padding-h | 内容区域水平内边距 | +| \-\-card-main-padding | 内容区域内边距,由两个变量组成:`--card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h)` | +| \-\-card-icon-gap | 图标与内容之间的间距:垂直布局时为下外边距,水平布局时为右外边距,水平反向布局时为左外边距 | +| \-\-card-icon-color | 图标颜色 | +| \-\-card-icon-size | 图标大小 | +| \-\-card-header-color | 标题颜色 | +| \-\-card-header-text-size | 标题字体大小 | +| \-\-card-header-text-height | 标题字体高度 | +| \-\-card-title-word-break | 标题 `word-break` 属性值 | +| \-\-card-content-gap | 标题与内容之间的间距 | +| \-\-card-content-color | 内容颜色 | +| \-\-card-content-text-size | 内容字体大小 | +| \-\-card-content-text-height | 内容字体高度 | +| \-\-card-detail-word-break | 详情 `word-break` 属性值 | +| \-\-card-footer-gap | 脚注与内容之间的间距 | +| \-\-card-footer-color | 脚注颜色 | +| \-\-card-footer-text-size | 脚注字体大小 | +| \-\-card-footer-text-height | 脚注字体高度 | +| \-\-card-cover-padding | 封面内边距 | + -- Gitee