From 369209b49b3e07b9a7bc8db6a910baa2a55b0d0c Mon Sep 17 00:00:00 2001 From: skiyee <319619193@qq.com> Date: Wed, 22 Oct 2025 17:23:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(steps):=20=E5=AE=9E=E7=8E=B0=20Steps=20?= =?UTF-8?q?=E6=AD=A5=E9=AA=A4=E6=9D=A1=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/uni/src/pages-info/steps/base.vue | 111 ++++++ .../uni/src/pages-info/steps/clickable.vue | 108 ++++++ examples/uni/src/pages-info/steps/custom.vue | 334 ++++++++++++++++++ .../uni/src/pages-info/steps/description.vue | 149 ++++++++ examples/uni/src/pages-info/steps/icon.vue | 85 +++++ examples/uni/src/pages-info/steps/size.vue | 189 ++++++++++ examples/uni/src/pages-info/steps/status.vue | 126 +++++++ .../uni/src/pages-info/steps/vertical.vue | 70 ++++ .../skiyee-uni-ui/src/components/sk-step.vue | 241 +++++++++++++ .../skiyee-uni-ui/src/components/sk-steps.vue | 175 +++++++++ packages/skiyee-uni-ui/src/constants/index.ts | 1 + packages/skiyee-uni-ui/src/constants/steps.ts | 13 + packages/skiyee-uni-ui/src/styles/index.ts | 6 + packages/skiyee-uni-ui/src/styles/sk-step.ts | 123 +++++++ packages/skiyee-uni-ui/src/styles/sk-steps.ts | 33 ++ packages/skiyee-uni-ui/src/types/index.ts | 1 + packages/skiyee-uni-ui/src/types/steps.ts | 48 +++ 17 files changed, 1813 insertions(+) create mode 100644 examples/uni/src/pages-info/steps/base.vue create mode 100644 examples/uni/src/pages-info/steps/clickable.vue create mode 100644 examples/uni/src/pages-info/steps/custom.vue create mode 100644 examples/uni/src/pages-info/steps/description.vue create mode 100644 examples/uni/src/pages-info/steps/icon.vue create mode 100644 examples/uni/src/pages-info/steps/size.vue create mode 100644 examples/uni/src/pages-info/steps/status.vue create mode 100644 examples/uni/src/pages-info/steps/vertical.vue create mode 100644 packages/skiyee-uni-ui/src/components/sk-step.vue create mode 100644 packages/skiyee-uni-ui/src/components/sk-steps.vue create mode 100644 packages/skiyee-uni-ui/src/constants/steps.ts create mode 100644 packages/skiyee-uni-ui/src/styles/sk-step.ts create mode 100644 packages/skiyee-uni-ui/src/styles/sk-steps.ts create mode 100644 packages/skiyee-uni-ui/src/types/steps.ts diff --git a/examples/uni/src/pages-info/steps/base.vue b/examples/uni/src/pages-info/steps/base.vue new file mode 100644 index 0000000..ca4d01b --- /dev/null +++ b/examples/uni/src/pages-info/steps/base.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/clickable.vue b/examples/uni/src/pages-info/steps/clickable.vue new file mode 100644 index 0000000..6a0b5c5 --- /dev/null +++ b/examples/uni/src/pages-info/steps/clickable.vue @@ -0,0 +1,108 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/custom.vue b/examples/uni/src/pages-info/steps/custom.vue new file mode 100644 index 0000000..970105f --- /dev/null +++ b/examples/uni/src/pages-info/steps/custom.vue @@ -0,0 +1,334 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/description.vue b/examples/uni/src/pages-info/steps/description.vue new file mode 100644 index 0000000..b18a993 --- /dev/null +++ b/examples/uni/src/pages-info/steps/description.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/icon.vue b/examples/uni/src/pages-info/steps/icon.vue new file mode 100644 index 0000000..9072a7e --- /dev/null +++ b/examples/uni/src/pages-info/steps/icon.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/size.vue b/examples/uni/src/pages-info/steps/size.vue new file mode 100644 index 0000000..24b6a57 --- /dev/null +++ b/examples/uni/src/pages-info/steps/size.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/status.vue b/examples/uni/src/pages-info/steps/status.vue new file mode 100644 index 0000000..9fc9bad --- /dev/null +++ b/examples/uni/src/pages-info/steps/status.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/examples/uni/src/pages-info/steps/vertical.vue b/examples/uni/src/pages-info/steps/vertical.vue new file mode 100644 index 0000000..bb40768 --- /dev/null +++ b/examples/uni/src/pages-info/steps/vertical.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/skiyee-uni-ui/src/components/sk-step.vue b/packages/skiyee-uni-ui/src/components/sk-step.vue new file mode 100644 index 0000000..6880731 --- /dev/null +++ b/packages/skiyee-uni-ui/src/components/sk-step.vue @@ -0,0 +1,241 @@ + + + + + diff --git a/packages/skiyee-uni-ui/src/components/sk-steps.vue b/packages/skiyee-uni-ui/src/components/sk-steps.vue new file mode 100644 index 0000000..2ae8ee6 --- /dev/null +++ b/packages/skiyee-uni-ui/src/components/sk-steps.vue @@ -0,0 +1,175 @@ + + + + + diff --git a/packages/skiyee-uni-ui/src/constants/index.ts b/packages/skiyee-uni-ui/src/constants/index.ts index b747770..28c24a3 100644 --- a/packages/skiyee-uni-ui/src/constants/index.ts +++ b/packages/skiyee-uni-ui/src/constants/index.ts @@ -11,3 +11,4 @@ export * from './field' export * from './form' export * from './radio' export * from './roller' +export * from './steps' diff --git a/packages/skiyee-uni-ui/src/constants/steps.ts b/packages/skiyee-uni-ui/src/constants/steps.ts new file mode 100644 index 0000000..fb5de76 --- /dev/null +++ b/packages/skiyee-uni-ui/src/constants/steps.ts @@ -0,0 +1,13 @@ +/** + * Steps 步骤条常量 + * + * @author sKy(skiyee) + * @qq 319619193 + * @github https://github.com/skiyee + */ + +import type { InjectionKey } from 'vue' + +import type { StepsContext } from '../types' + +export const SK_STEPS_KEY: InjectionKey> = Symbol('sk-steps') diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts index cd3dee8..ffe5cb6 100644 --- a/packages/skiyee-uni-ui/src/styles/index.ts +++ b/packages/skiyee-uni-ui/src/styles/index.ts @@ -51,6 +51,12 @@ export { SkSliderUcv } from './sk-slider' export type { SkSpinnerUcvProps } from './sk-spinner' export { SkSpinnerUcv } from './sk-spinner' +export type { SkStepUcvProps } from './sk-step' +export { SkStepUcv } from './sk-step' + +export type { SkStepsUcvProps } from './sk-steps' +export { SkStepsUcv } from './sk-steps' + export type { SkSwitchUcvProps } from './sk-switch' export { SkSwitchUcv } from './sk-switch' diff --git a/packages/skiyee-uni-ui/src/styles/sk-step.ts b/packages/skiyee-uni-ui/src/styles/sk-step.ts new file mode 100644 index 0000000..ac11121 --- /dev/null +++ b/packages/skiyee-uni-ui/src/styles/sk-step.ts @@ -0,0 +1,123 @@ +// @unocss-include +/** + * sk-step 由 @skiyee/ucv 生成的样式组件 + * + * @author sKy(skiyee) + * @qq 319619193 + * @github https://github.com/skiyee + * + * @example + * ```ts + * const classes = SkStepUcv(props) + * ``` + * + * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/info/steps + */ +import type { InferProps } from '@skiyee/ucv' + +import { ucv } from '@skiyee/ucv' + +export const SkStepUcv = ucv({ + element: { + root: 'relative flex flex-1', + container: 'flex items-start', + iconWrapper: 'relative flex-center flex-shrink-0 border-(~ solid) rounded-full transition-all duration-250', + icon: 'transition-all duration-250', + content: 'flex flex-col flex-1 sk-unit:ml-12', + title: 'text-primary transition-colors duration-250', + description: 'text-secondary sk-unit:mt-4 transition-colors duration-250', + line: 'absolute bg-border transition-all duration-250', + }, + variants: { + direction: { + horizontal: { + root: 'flex-col', + container: 'flex-col items-center', + content: 'sk-variant:mt-12 sk-variant:ml-0 items-center text-center', + line: 'sk-variant:left-1/2 sk-variant:translate-x-1/2 sk-variant:top-0 sk-variant:h-full sk-variant:w-2', + }, + vertical: { + root: 'flex-row', + line: 'sk-variant:top-1/2 sk-variant:-translate-y-1/2 sk-variant:left-0 sk-variant:w-full sk-variant:h-2', + }, + }, + size: { + small: { + iconWrapper: 'sk-variant:size-24', + icon: 'sk-variant:size-12', + title: 'text-body-small', + description: 'text-caption', + }, + medium: { + iconWrapper: 'sk-variant:size-32', + icon: 'sk-variant:size-16', + title: 'text-body-medium', + description: 'text-body-small', + }, + large: { + iconWrapper: 'sk-variant:size-40', + icon: 'sk-variant:size-20', + title: 'text-body-large', + description: 'text-body-medium', + }, + }, + status: { + wait: { + iconWrapper: 'sk-variant:border-border bg-background', + icon: 'sk-variant:text-tertiary', + title: 'sk-variant:text-tertiary', + description: 'sk-variant:text-tertiary', + line: 'sk-variant:bg-border', + }, + process: { + iconWrapper: 'sk-variant:border-brand bg-brand', + icon: 'sk-variant:text-brand-foreground', + title: 'sk-variant:text-brand', + description: 'sk-variant:text-secondary', + line: 'sk-variant:bg-border', + }, + finish: { + iconWrapper: 'sk-variant:border-success bg-success', + icon: 'sk-variant:text-success-foreground', + title: 'sk-variant:text-success', + description: 'sk-variant:text-secondary', + line: 'sk-variant:bg-success', + }, + error: { + iconWrapper: 'sk-variant:border-danger bg-danger', + icon: 'sk-variant:text-danger-foreground', + title: 'sk-variant:text-danger', + description: 'sk-variant:text-secondary', + line: 'sk-variant:bg-danger', + }, + }, + clickable: { + true: { + container: 'cursor-pointer', + }, + false: {}, + }, + disabled: { + true: { + root: 'opacity-60 pointer-events-none', + }, + false: {}, + }, + isLast: { + true: { + line: 'sk-variant:hidden', + }, + false: {}, + }, + }, + defaults: { + direction: 'horizontal', + size: 'medium', + status: 'wait', + clickable: false, + disabled: false, + isLast: false, + }, +}) + +export type SkStepUcvProps = InferProps diff --git a/packages/skiyee-uni-ui/src/styles/sk-steps.ts b/packages/skiyee-uni-ui/src/styles/sk-steps.ts new file mode 100644 index 0000000..945c96d --- /dev/null +++ b/packages/skiyee-uni-ui/src/styles/sk-steps.ts @@ -0,0 +1,33 @@ +// @unocss-include +/** + * sk-steps 由 @skiyee/ucv 生成的样式组件 + * + * @author sKy(skiyee) + * @qq 319619193 + * @github https://github.com/skiyee + * + * @example + * ```ts + * const classes = SkStepsUcv(props) + * ``` + * + * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/info/steps + */ +import type { InferProps } from '@skiyee/ucv' + +import { ucv } from '@skiyee/ucv' + +export const SkStepsUcv = ucv({ + element: 'flex w-full', + variants: { + direction: { + horizontal: 'flex-row', + vertical: 'flex-col', + }, + }, + defaults: { + direction: 'horizontal', + }, +}) + +export type SkStepsUcvProps = InferProps diff --git a/packages/skiyee-uni-ui/src/types/index.ts b/packages/skiyee-uni-ui/src/types/index.ts index 275bfb2..ada73e2 100644 --- a/packages/skiyee-uni-ui/src/types/index.ts +++ b/packages/skiyee-uni-ui/src/types/index.ts @@ -13,3 +13,4 @@ export type * from './field' export type * from './form' export type * from './radio' export type * from './roller' +export type * from './steps' diff --git a/packages/skiyee-uni-ui/src/types/steps.ts b/packages/skiyee-uni-ui/src/types/steps.ts new file mode 100644 index 0000000..93f5570 --- /dev/null +++ b/packages/skiyee-uni-ui/src/types/steps.ts @@ -0,0 +1,48 @@ +/** + * Steps 步骤条类型定义 + * + * 定义步骤条相关的类型接口。 + * + * @author sKy(skiyee) + * @qq 319619193 + * @github https://github.com/skiyee + * + * @see 更多文档: https://skiyee-ui.netlify.app/docs/ + */ + +import type { SkStepsUcvProps, SkStepUcvProps } from '../styles' + +/** + * 步骤状态类型 + */ +export type StepStatus = 'wait' | 'process' | 'finish' | 'error' + +/** + * 步骤条上下文 + */ +export interface StepsContext { + props: { + active?: number; + direction?: SkStepsUcvProps['direction']; + size?: SkStepUcvProps['size']; + activeColor?: string; + inactiveColor?: string; + disabled?: boolean; + }; + /** + * 获取步骤的索引 + */ + getStepIndex: (uid: number) => number; + /** + * 注册步骤 + */ + registerStep: (uid: number) => void; + /** + * 注销步骤 + */ + unregisterStep: (uid: number) => void; + /** + * 点击步骤 + */ + onStepClick: (index: number) => void; +}