From 52f4b9260a9fe23460e97985a4af431781e84804 Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Thu, 7 Aug 2025 14:09:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix(doc):=20OperatorView=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=94=9F=E6=88=90=E6=8E=A7=E4=BB=B6=E6=A0=87=E7=AD=BE=E6=97=B6?= =?UTF-8?q?=E5=B0=86=E9=A9=BC=E5=B3=B0=E8=BD=AC=E5=8C=96=E4=B8=BA=E5=8D=95?= =?UTF-8?q?=E8=AF=8D=EF=BC=8C=E4=BC=98=E5=8C=96propsToAttrStr=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E7=B1=BB=E5=9E=8B=E7=AD=BE=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docs/src/components/OperatorView.ts | 11 ++++++----- packages/opendesign/src/_demo/utils.ts | 20 ++++++++++++++++++-- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/docs/src/components/OperatorView.ts b/packages/docs/src/components/OperatorView.ts index a694b937..8327474d 100644 --- a/packages/docs/src/components/OperatorView.ts +++ b/packages/docs/src/components/OperatorView.ts @@ -39,12 +39,13 @@ type RadioScheme = { export type SchemeT = CheckboxScheme | SelectorScheme | InputScheme | TextareaScheme | InputNumberScheme | RadioScheme; export type State = Record; +const camelcase2words = (str: string) => str.replace(/(?<=[a-z])([A-Z])|(?<=[A-Z])([A-Z][a-z])/g, ' $&').replace(/^[a-z]/, (char) => char.toUpperCase()); const createCheckboxItem = (key: string, value: CheckboxScheme) => { - return h(OCheckbox, { value: key }, { default: () => value.label || key }); + return h(OCheckbox, { value: key }, { default: () => value.label || camelcase2words(key) }); }; const createSelectorItem = (key: string, value: SelectorScheme, state: State) => { return h(Fragment, [ - h('span', { class: 'props-playground-selector-name' }, value.label || key), + h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h( OSelect, { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) }, @@ -56,13 +57,13 @@ const createSelectorItem = (key: string, value: SelectorScheme, state: State) => }; const createInputItem = (key: string, value: InputScheme, state: State) => { return h(Fragment, [ - h('span', { class: 'props-playground-selector-name' }, value.label || key), + h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h(OInput, { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) }), ]); }; const createTextareaItem = (key: string, value: TextareaScheme, state: State) => { return h(Fragment, [ - h('span', { class: 'props-playground-selector-name' }, value.label || key), + h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h(OTextarea, { modelValue: state[key], style: { '--row': value.row || 3 }, @@ -73,7 +74,7 @@ const createTextareaItem = (key: string, value: TextareaScheme, state: State) => }; const createInputNumberItem = (key: string, value: InputNumberScheme, state: State) => { return h(Fragment, [ - h('span', { class: 'props-playground-selector-name' }, value.label || key), + h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h(OInputNumber, { modelValue: state[key], min: value.min, diff --git a/packages/opendesign/src/_demo/utils.ts b/packages/opendesign/src/_demo/utils.ts index d8f86c6e..f4e02854 100644 --- a/packages/opendesign/src/_demo/utils.ts +++ b/packages/opendesign/src/_demo/utils.ts @@ -11,10 +11,10 @@ export function hyphenate(str: string) { * @param exclude 不转化的props属性名 * @returns 属性字符串 */ -export function propsToAttrStr(props: Record, exclude = [] as string[]) { +export function propsToAttrStr>(props: T, exclude: (keyof T)[] = []): string { return Object.entries(props) .reduce((acc, [_key, value]) => { - if (exclude.includes(_key)) { + if (exclude.includes(_key as any)) { return acc; } const key = hyphenate(_key); @@ -50,3 +50,19 @@ export function propsToAttrStr(props: Record, exclude = [] as strin }, '') .slice(1); } + +const REPLACEMENTS: Record = { + '<': '<', + '>': '>', + '"': '"', + "'": ''', + '&': '&', +}; +function replaceCellChar(ch: string) { + return REPLACEMENTS[ch]; +} +// 避免xss注入 +export function escapeHTML(value?: string) { + const ESCAPE_REPLACE_RE = /[<>"'&]/g; + return value ? value.replace(ESCAPE_REPLACE_RE, replaceCellChar) : ''; +} -- Gitee From 10e7369c71e18c7f815c0aa7e87d10d6c6a4789b Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Thu, 7 Aug 2025 14:10:41 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(doc):=20=E4=BC=98=E5=8C=96=E9=83=A8?= =?UTF-8?q?=E5=88=86=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3usage=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E7=9A=84schema=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../opendesign/src/badge/__docs__/__case__/BadgeUsage.vue | 8 ++++---- .../opendesign/src/card/__docs__/__case__/CardUsage.vue | 5 ++--- .../src/carousel/__docs__/__case__/CarouselUsage.vue | 7 +------ .../src/cascader/__docs__/__case__/CascaderUsage.vue | 6 ++---- 4 files changed, 9 insertions(+), 17 deletions(-) diff --git a/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue b/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue index 67ee2061..a0af9a37 100644 --- a/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue +++ b/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue @@ -45,11 +45,11 @@ const _schema = { type: 'boolean', default: false, }, - 'offset-x': { + offsetX: { type: 'number', default: 0, }, - 'offset-y': { + offsetY: { type: 'number', default: 0, }, @@ -57,12 +57,12 @@ const _schema = { const NUMBER_REGEXP = /^\d+$/; const _template: DocDemoTemplate = (props) => { - const { 'offset-x': offsetX, 'offset-y': offsetY, value } = props; + const { offsetX, offsetY, value } = props; const isNumber = NUMBER_REGEXP.test(value); return ` diff --git a/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue b/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue index eefee6d8..157edde5 100644 --- a/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue +++ b/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue @@ -76,7 +76,7 @@ const _schema = { }, coverOrIcon: { type: 'radio', - list: ['cover', 'icon'], + list: ['Cover', 'Icon'] as const, default: 'cover', }, coverRatio: { @@ -122,14 +122,13 @@ const _schema = { noResponsive: { type: 'boolean', default: false, - label: 'close responsive', }, } satisfies Record; const _template: DocDemoTemplate = (props) => { const { coverOrIcon, titleRow, detailRow } = props; let attrs = ''; - if (coverOrIcon === 'cover') { + if (coverOrIcon === 'Cover') { attrs += ' cover="/card-cover.jpg"'; } else { attrs += ' icon="/avatar.svg"'; diff --git a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue index 6ed2bdc2..87b795c3 100644 --- a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue +++ b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue @@ -81,14 +81,13 @@ const _schema = { autoPlay: { type: 'boolean', default: true, - label: 'auto play', }, interval: { type: 'number', default: 5000, step: 1000, min: 1000, - label: 'interval (ms)', + label: 'Interval (ms)', }, arrow: { type: 'list', @@ -98,20 +97,16 @@ const _schema = { hideIndicator: { type: 'boolean', default: false, - label: 'hide indicator', }, indicatorClick: { type: 'boolean', - label: 'indicator click', }, pauseOnHover: { type: 'boolean', default: true, - label: 'pause on hover', }, clickToSwitch: { type: 'boolean', - label: 'click to switch', }, } satisfies Record; diff --git a/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue b/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue index ac131173..7566fcc8 100644 --- a/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue +++ b/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue @@ -89,10 +89,9 @@ import { DocDemoTemplate, DocDemoSchema } from '../../../_demo/types'; import { propsToAttrStr } from '../../../_demo/utils'; const _schema = { - 'path-mode': { + pathMode: { type: 'boolean', default: false, - label: 'path mode', }, round: { type: 'list', @@ -106,11 +105,10 @@ const _schema = { type: 'string', default: 'Please select', }, - 'option-position': { + optionPosition: { type: 'list', list: ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'], default: 'bl', - label: 'option position', }, } satisfies Record; -- Gitee From 5a3f5f1de4c98a0ca0e3ad06627e7111fb929aa5 Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Thu, 7 Aug 2025 14:12:01 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix(doc):=20=E5=AE=8C=E5=96=84=20DialogSlot?= =?UTF-8?q?=20=E7=A4=BA=E4=BE=8B=E7=9A=84=E8=8B=B1=E6=96=87=E6=96=87?= =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E5=AE=8C=E5=96=84Dialog=20css=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dialog/__docs__/__case__/DialogSlot.vue | 73 +++++-------------- .../__docs__/__case__/DialogSlotForm.vue | 57 +++++++++++++++ .../src/dialog/__docs__/index.en-US.md | 42 ++++++----- .../src/dialog/__docs__/index.zh-CN.md | 41 ++++++----- 4 files changed, 119 insertions(+), 94 deletions(-) create mode 100644 packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue diff --git a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue index 9fac140b..731030ef 100644 --- a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue +++ b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue @@ -9,29 +9,35 @@ - `default`: 主体，用于放置内容。**注**：`default` 插槽中的内容有溢出滚动的功能（可通过 `scrollbar` 参数调整滚动条，参数类型[BaseScrollerPropsT](#base-scroller-props-t)），其余插槽位置固定不能滚动； - `actions`: 按钮，用于自定义底部按钮 - `footer`: 底部，用于防止底部内容。**注**：`footer` 插槽会覆盖 `actions` 插槽。 + + + +### Slots + +The dialog has four slots: + +- `header`: Header, used to place the title. +- `default`: Body, used to place content. **Note**: Content in the `default` slot supports overflow scrolling + (the scrollbar can be adjusted via the `scrollbar` parameter; for the parameter type, see [BaseScrollerPropsT](#base-scroller-props-t)), + while other slots have fixed positions and cannot scroll. +- `actions`: Buttons, used to customize the bottom buttons. - - - - - - - - - - \ No newline at end of file diff --git a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue new file mode 100644 index 00000000..9855664a --- /dev/null +++ b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue @@ -0,0 +1,57 @@ + + + + diff --git a/packages/opendesign/src/dialog/__docs__/index.en-US.md b/packages/opendesign/src/dialog/__docs__/index.en-US.md index 410634e0..ab175580 100644 --- a/packages/opendesign/src/dialog/__docs__/index.en-US.md +++ b/packages/opendesign/src/dialog/__docs__/index.en-US.md @@ -8,31 +8,33 @@ sidebar: ODialog + + ## API ### CSS Variables -| CSS Variable | Description | -| --- | --- | -| --dlg-close-size | Size of the close button | -| --dlg-close-color | Color of the close button | -| --dlg-close-color-hover | Color of the close button when hovered | -| --dlg-close-color-active | Color of the close button when active | -| --dlg-color | Text color | -| --dlg-header-color | Header color, overrides `--dlg-color` | -| --dlg-bg-color | Background color | -| --dlg-radius | Border radius | -| --dlg-shadow | Box shadow | -| --dlg-max-height | Maximum height | -| --dlg-min-height | Minimum height | -| --dlg-min-width | Minimum width | -| --dlg-width | Width | -| --dlg-margin | Margin | -| --dlg-edge-gap | Padding | -| --dlg-inner-gap | Spacing between the default header and footer | -| --dlg-header-gap | Spacing between the header and default content, overrides `--dlg-inner-gap` | -| --actions-justify | Alignment of the action buttons at the bottom | +| CSS Variable | Description | +| -------------------------- | --------------------------------------------------------------------------- | +| \-\-dlg-close-size | Size of the close button | +| \-\-dlg-close-color | Color of the close button | +| \-\-dlg-close-color-hover | Color of the close button when hovered | +| \-\-dlg-close-color-active | Color of the close button when active | +| \-\-dlg-color | Text color | +| \-\-dlg-header-color | Header color, overrides `--dlg-color` | +| \-\-dlg-bg-color | Background color | +| \-\-dlg-radius | Border radius | +| \-\-dlg-shadow | Box shadow | +| \-\-dlg-max-height | Maximum height | +| \-\-dlg-min-height | Minimum height | +| \-\-dlg-min-width | Minimum width | +| \-\-dlg-width | Width | +| \-\-dlg-margin | Margin | +| \-\-dlg-edge-gap | Padding | +| \-\-dlg-inner-gap | Spacing between the default header and footer | +| \-\-dlg-header-gap | Spacing between the header and default content, overrides `--dlg-inner-gap` | +| \-\-actions-justify | Alignment of the action buttons at the bottom | diff --git a/packages/opendesign/src/dialog/__docs__/index.zh-CN.md b/packages/opendesign/src/dialog/__docs__/index.zh-CN.md index 2c6385a0..9bcc4c68 100644 --- a/packages/opendesign/src/dialog/__docs__/index.zh-CN.md +++ b/packages/opendesign/src/dialog/__docs__/index.zh-CN.md @@ -9,31 +9,32 @@ sidebar: ODialog 对话框 + ## API ### CSS 变量 -| CSS变量 | 描述 | -| --- | --- | -| --dlg-close-size | 关闭按钮大小 | -| --dlg-close-color | 关闭按钮颜色 | -| --dlg-close-color-hover | 鼠标悬停关闭按钮颜色 | -| --dlg-close-color-active | 鼠标按下关闭按钮颜色 | -| --dlg-color | 文字颜色 | -| --dlg-header-color | 标题颜色，覆盖 `--dlg-color` | -| --dlg-bg-color | 背景颜色 | -| --dlg-radius | 圆角 | -| --dlg-shadow | 阴影 | -| --dlg-max-height | 最大高度 | -| --dlg-min-height | 最小高度 | -| --dlg-min-width | 最小宽度 | -| --dlg-width | 宽度 | -| --dlg-margin | 外边距 | -| --dlg-edge-gap | 内边距 | -| --dlg-inner-gap | header default 和 footer 之间的间距 | -| --dlg-header-gap | header 和 default 之间的间距，覆盖 `--dlg-inner-gap` | -| --actions-justify | 底部操作按钮的对齐方式 | +| CSS 变量 | 描述 | +| -------------------------- | ---------------------------------------------------- | +| \-\-dlg-close-size | 关闭按钮大小 | +| \-\-dlg-close-color | 关闭按钮颜色 | +| \-\-dlg-close-color-hover | 鼠标悬停关闭按钮颜色 | +| \-\-dlg-close-color-active | 鼠标按下关闭按钮颜色 | +| \-\-dlg-color | 文字颜色 | +| \-\-dlg-header-color | 标题颜色，覆盖 `--dlg-color` | +| \-\-dlg-bg-color | 背景颜色 | +| \-\-dlg-radius | 圆角 | +| \-\-dlg-shadow | 阴影 | +| \-\-dlg-max-height | 最大高度 | +| \-\-dlg-min-height | 最小高度 | +| \-\-dlg-min-width | 最小宽度 | +| \-\-dlg-width | 宽度 | +| \-\-dlg-margin | 外边距 | +| \-\-dlg-edge-gap | 内边距 | +| \-\-dlg-inner-gap | header default 和 footer 之间的间距 | +| \-\-dlg-header-gap | header 和 default 之间的间距，覆盖 `--dlg-inner-gap` | +| \-\-actions-justify | 底部操作按钮的对齐方式 | -- Gitee From af85d45ec5727cdbc055559612a6d0e314d6f4bf Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Thu, 7 Aug 2025 14:12:24 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat(doc):=20=E6=96=B0=E5=A2=9E=20divider?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__docs__/__case__/DividerUsage.vue | 86 +++++++++++++++++++ .../src/divider/__docs__/index.en-US.md | 24 ++++++ .../src/divider/__docs__/index.zh-CN.md | 24 ++++++ packages/opendesign/src/divider/types.ts | 16 +++- 4 files changed, 146 insertions(+), 4 deletions(-) create mode 100644 packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue create mode 100644 packages/opendesign/src/divider/__docs__/index.en-US.md create mode 100644 packages/opendesign/src/divider/__docs__/index.zh-CN.md diff --git a/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue b/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue new file mode 100644 index 00000000..4c9425ce --- /dev/null +++ b/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue @@ -0,0 +1,86 @@ + + + +### 使用说明 + +#### 参数配置 + +- **variant**：控制分割线形状 + 可选值：`solid`（实线）、`dashed`（虚线）、`dotted`（点线） + +- **direction**：控制分割线方向 + 可选值：`h`（水平）、`v`（垂直） + + - 水平分割线（`direction="h"`）默认宽度占满容器； + - 垂直分割线（`direction="v"`）默认高度为 `1em`。 + +- **darker**：控制分割线颜色深浅 + 可选值：`true`（深色）、`false`（浅色） + +#### 标签 + +- **限制**：仅水平分割线（`direction="h"`）支持标签功能。 +- **标签位置**：通过 `labelPosition` 属性控制，可选值：`left`（左侧）、`center`（中间）、`right`（右侧）。 +- **标签内容**：标签文本需放置在组件的 `default` 插槽中。 + + + +### Usage Instructions + +#### Props Configuration + +- **variant**: Controls the shape of the divider + Optional values: `solid` (solid line), `dashed` (dashed line), `dotted` (dotted line) + +- **direction**: Controls the direction of the divider + Optional values: `h` (horizontal), `v` (vertical) + + - Horizontal dividers (`direction="h"`) by default fill the full width of the container; + - Vertical dividers (`direction="v"`) have a default height of `1em`. + +- **darker**: Controls the darkness of the divider color + Optional values: `true` (darker), `false` (lighter) + +#### Label + +- **Restrictions**: Only horizontal dividers (`direction="h"`) support the label feature. +- **Label Position**: Controlled by the `labelPosition` prop, with optional values: `left` (left side), `center` (middle), `right` (right side). +- **Label Content**: The label text should be placed in the component's default slot. + + + diff --git a/packages/opendesign/src/divider/__docs__/index.en-US.md b/packages/opendesign/src/divider/__docs__/index.en-US.md new file mode 100644 index 00000000..43a3318b --- /dev/null +++ b/packages/opendesign/src/divider/__docs__/index.en-US.md @@ -0,0 +1,24 @@ +--- +sidebar: ODivider +--- + +# ODivider + +## Demo + + + +## API + +### CSS Variables + +| CSS Variable | Description | +| ------------------------- | ------------------------------------------------ | +| \-\-o-divider-color | Label text color | +| \-\-o-divider-text-size | Label text font size | +| \-\-o-divider-text-height | Label text line height | +| \-\-o-divider-label-gap | Spacing between label and divider | +| \-\-o-divider-bd-color | Divider border color | +| \-\-o-divider-gap | Spacing between divider and surrounding elements | + + diff --git a/packages/opendesign/src/divider/__docs__/index.zh-CN.md b/packages/opendesign/src/divider/__docs__/index.zh-CN.md new file mode 100644 index 00000000..a07c15fd --- /dev/null +++ b/packages/opendesign/src/divider/__docs__/index.zh-CN.md @@ -0,0 +1,24 @@ +--- +sidebar: ODivider +--- + +# ODivider 分割线 + +## 示例 + + + +## API + +### CSS 变量 + +| CSS 变量 | 描述 | +| ----------------------- | -------------------------- | +| \-\-o-divider-color | label 文本颜色 | +| \-\-o-divider-text-size | label 文本字号 | +| \-\-o-divider-text-height | label 文本行高 | +| \-\-o-divider-label-gap | label 与分割线之间的间距 | +| \-\-o-divider-bd-color | 分割线颜色 | +| \-\-o-divider-gap | 分割线与周围元素之间的间距 | + + diff --git a/packages/opendesign/src/divider/types.ts b/packages/opendesign/src/divider/types.ts index 4e42e386..6ae4f80e 100644 --- a/packages/opendesign/src/divider/types.ts +++ b/packages/opendesign/src/divider/types.ts @@ -6,28 +6,36 @@ export type DividerVariantT = (typeof DividerVariantTypes)[number]; export const dividerProps = { /** - * 分割线类型 DividerVariantT + * @zh-CN 分割线形状 + * @en-US Divider shape + * @default 'solid' */ variant: { type: String as PropType, default: 'solid', }, /** - * 分割线方向 DirectionT + * @zh-CN 分割线方向 + * @en-US Divider direction + * @default 'h' */ direction: { type: String as PropType, default: 'h', }, /** - * 自定义内容位置 + * @zh-CN 分割线标签位置 + * @en-US Divider label position + * @default 'center' */ labelPosition: { type: String as PropType<'left' | 'center' | 'right'>, default: 'center', }, /** - * 是否颜色加深 + * @zh-CN 是否使用深色 + * @en-US Whether to use dark + * @default false */ darker: { type: Boolean, -- Gitee