x-next 1.12.0 → 1.14.0

package/AI_USAGE/components/time-range-selector.md

@@ -0,0 +1,355 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# TimeRangeSelector AI 使用
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+先读 [通用接入](../core.md)。公开导出：`TimeRangeSelector`；主要模型：v-model。完整 Props、Events、Slots、实例方法与服务签名见 [本地 API](./time-range-selector-api.md)，包含本组件族全部子组件和别名。
+
+按需样式：`x-next/style/time-range-selector`（包含 base.css、time-range-selector.css）。代码块未单独引样式时在应用入口加载全量样式，或按实际所有组件加载 JS 入口；不要仅因复制一个组件页就漏掉其中的 Button 等组合依赖。
+
+## 场景用法
+
+以下示例从本地 `src/docs/components/time-range-selector.md` 显式导入到独立 AI 源，补齐局部注册、状态和样式后进行严格模板检查。上方已核验行为优先；原始 prop 默认值、包装透传和示例业务适配分别查 [完整 API](./time-range-selector-api.md) 与场景说明。类型通过不代表所有散文和交互已验证。
+
+### 用途与选型
+
+用于在一天内选择一个或多个时间区间，适合排班、报表筛选和监控时间段配置。
+
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['08:00', '12:00'],
+  ['14:00', '18:00'],
+]);
+</script>
+<template>
+<TimeRangeSelector v-model="ranges" />
+</template>
+```
+
+### 禁用时间段
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['07:00', '11:00'],
+  ['15:00', '19:00'],
+]);
+</script>
+<template>
+<TimeRangeSelector
+    v-model="ranges"
+    :disabled-ranges="[['12:00', '13:00']]"
+    :step-minutes="30"
+  />
+</template>
+```
+
+### 场景风格
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const defaultRanges = ref<[string, string][]>([['07:00', '11:00']]);
+const scheduleRanges = ref<[string, string][]>([
+  ['08:30', '12:30'],
+  ['14:00', '18:00'],
+]);
+const monitorRanges = ref<[string, string][]>([
+  ['00:00', '04:00'],
+  ['19:00', '23:00'],
+]);
+const compactRanges = ref<[string, string][]>([
+  ['09:00', '13:00'],
+  ['15:00', '19:00'],
+]);
+const hiddenCursorRanges = ref<[string, string][]>([
+  ['08:00', '12:00'],
+  ['14:00', '18:00'],
+]);
+
+const defaultDisabled = ref<[string, string][]>([['13:00', '15:00']]);
+const scheduleDisabled = ref<[string, string][]>([['12:30', '14:00']]);
+const monitorDisabled = ref<[string, string][]>([['04:00', '06:00']]);
+const compactDisabled = ref<[string, string][]>([['13:00', '14:30']]);
+const hiddenCursorDisabled = ref<[string, string][]>([['12:00', '13:00']]);
+</script>
+<template>
+<TimeRangeSelector
+    v-model="defaultRanges"
+    scene="default"
+    :disabled-ranges="defaultDisabled"
+  />
+  <TimeRangeSelector
+    v-model="scheduleRanges"
+    scene="schedule"
+    :disabled-ranges="scheduleDisabled"
+  />
+  <TimeRangeSelector
+    v-model="monitorRanges"
+    scene="monitor"
+    :disabled-ranges="monitorDisabled"
+  />
+  <TimeRangeSelector
+    v-model="compactRanges"
+    scene="compact"
+    :disabled-ranges="compactDisabled"
+  />
+  <TimeRangeSelector
+    v-model="hiddenCursorRanges"
+    scene="compact"
+    :disabled-ranges="hiddenCursorDisabled"
+    :show-cursor="false"
+  />
+</template>
+```
+
+### 自定义颜色
+
+更细的主题控制可以覆盖组件 CSS 变量。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const defaultRanges = ref<[string, string][]>([['08:00', '12:00']]);
+const scheduleRanges = ref<[string, string][]>([['09:00', '13:00']]);
+const monitorRanges = ref<[string, string][]>([['00:00', '04:00']]);
+const compactRanges = ref<[string, string][]>([['15:00', '19:00']]);
+
+const defaultDisabled = ref<[string, string][]>([['13:00', '15:00']]);
+const scheduleDisabled = ref<[string, string][]>([['13:00', '14:30']]);
+const monitorDisabled = ref<[string, string][]>([['04:00', '06:00']]);
+const compactDisabled = ref<[string, string][]>([['12:00', '13:30']]);
+</script>
+<template>
+<TimeRangeSelector
+    v-model="defaultRanges"
+    color="#0f766e"
+    :disabled-ranges="defaultDisabled"
+  />
+  <TimeRangeSelector
+    v-model="scheduleRanges"
+    scene="schedule"
+    color="#2563eb"
+    :disabled-ranges="scheduleDisabled"
+  />
+  <TimeRangeSelector
+    v-model="monitorRanges"
+    scene="monitor"
+    color="#dc2626"
+    :disabled-ranges="monitorDisabled"
+  />
+  <TimeRangeSelector
+    v-model="compactRanges"
+    scene="compact"
+    color="#16a34a"
+    :disabled-ranges="compactDisabled"
+    :show-cursor="false"
+  />
+</template>
+```
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['08:00', '12:00'],
+  ['15:00', '19:00'],
+]);
+</script>
+<template>
+<TimeRangeSelector v-model="ranges" class="custom-time-range" />
+</template>
+<style scoped>
+.custom-time-range {
+  --x-time-range-selector-color: #0f766e;
+  --x-time-range-selector-grid-radius: 8px;
+  --x-time-range-selector-range-height: 34px;
+  --x-time-range-selector-range-radius: 8px;
+}
+</style>
+```
+
+### 限制范围数量
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['08:00', '12:00'],
+  ['14:00', '18:00'],
+]);
+</script>
+<template>
+<TimeRangeSelector v-model="ranges" :max-ranges="3" />
+</template>
+```
+
+### 允许重叠
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['08:00', '12:00'],
+  ['10:00', '14:00'],
+]);
+</script>
+<template>
+<TimeRangeSelector v-model="ranges" overlap-allowed />
+</template>
+```
+
+### 更细步长
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+
+const ranges = ref<[string, string][]>([
+  ['08:15', '12:15'],
+]);
+</script>
+<template>
+<TimeRangeSelector v-model="ranges" :step-minutes="15" />
+</template>
+```
+
+### 整体禁用与只读
+
+禁用时退出 Tab 序列，只读时仍可聚焦查看。两种状态都阻止创建、移动、缩放与删除；拖拽过程中切换状态会取消预览并恢复外部值。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Space, Checkbox, TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+const ranges = ref<[string, string][]>([['08:00', '12:00']]);
+const disabled = ref(false);
+const readonly = ref(false);
+</script>
+<template>
+<Space><Checkbox v-model="disabled">禁用</Checkbox><Checkbox v-model="readonly">只读</Checkbox></Space>
+  <TimeRangeSelector v-model="ranges" :disabled="disabled" :readonly="readonly" />
+</template>
+```
+
+### 键盘与删除事件
+
+Home / End 定位到一天的首尾时间块。键盘每次移动一个 `stepMinutes`，遵守禁区、重叠、最大数量和 24:00 边界。双击区间或在区间聚焦后按 Delete / Backspace 删除。删除先触发 `remove`，再触发 `update:modelValue` 和 `change`。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+const ranges = ref<[string, string][]>([]);
+const log = ref('等待操作');
+const removed = ref('等待删除');
+const onChange = (value: [string, string][]) => { log.value = `change: ${JSON.stringify(value)}`; };
+const onRemove = (value: [string, string]) => { removed.value = `remove: ${value.join(' - ')}`; };
+import type { HTMLAttributes } from 'vue';
+const nativeAttrs1 = { "aria-label": "排班时间段" } satisfies HTMLAttributes;
+</script>
+<template>
+<TimeRangeSelector v-bind="nativeAttrs1" v-model="ranges"  :disabled-ranges="[['12:00', '13:00']]" :max-ranges="3"
+    @change="onChange" @remove="onRemove" />
+  <p>{{ log }}；{{ removed }}</p>
+</template>
+```
+
+### Form 禁用、校验与重置
+
+用户完成拖拽或键盘修改时触发 Form 的 change 校验；外部模型同步不会重复触发 change。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Checkbox, Form, FormItem, TimeRangeSelector, Space, Button } from 'x-next';
+import { reactive, ref } from 'vue';
+import type { FormInstance } from 'x-next';
+const form = reactive({ ranges: [] as [string, string][] });
+const formRef = ref<FormInstance>();
+const disabled = ref(false);
+const result = ref('至少选择一个时间段');
+const validate = async () => { result.value = (await formRef.value!.validate()) ? '请添加时间段' : '校验通过'; };
+const reset = () => { formRef.value!.resetFields(); result.value = '已重置'; };
+</script>
+<template>
+<Checkbox v-model="disabled">禁用整个表单</Checkbox>
+  <Form ref="formRef" :model="form" :disabled="disabled" layout="vertical">
+    <FormItem field="ranges" label="工作时段" :rules="{ type: 'array', minLength: 1, message: '至少选择一个时间段' }">
+      <TimeRangeSelector v-model="form.ranges" />
+    </FormItem>
+  </Form>
+  <Space><Button @click="validate">校验</Button><Button @click="reset">重置</Button></Space>
+  <p>{{ result }}</p>
+</template>
+```
+
+### 受控接收与拒绝更新
+
+拖拽中显示预览，结束后提交更新请求。父级未同步接收时，下一个渲染周期恢复 `modelValue`；键盘操作也遵循此规则。外部模型更新会终止正在进行的拖拽。
+
+```vue
+<script setup lang="ts">
+import 'x-next/style.css';
+import { Checkbox, TimeRangeSelector } from 'x-next';
+import { ref } from 'vue';
+const ranges = ref<[string, string][]>([['08:00', '12:00']]);
+const accept = ref(false);
+const log = ref('当前拒绝修改，操作后会恢复');
+const handleUpdate = (value: [string, string][]) => {
+  log.value = `请求：${JSON.stringify(value)}，${accept.value ? '已接收' : '已拒绝'}`;
+  if (accept.value) ranges.value = value;
+};
+</script>
+<template>
+<Checkbox v-model="accept">接收修改</Checkbox>
+  <TimeRangeSelector :model-value="ranges" @update:model-value="handleUpdate" />
+  <p>{{ log }}</p>
+</template>
+```
+
+### 交互说明
+
+- 在时间轴空白区域按下并拖动可创建范围。
+- 拖动范围主体可移动时间段，拖动过程中会保持原区间宽度。
+- 拖动左右边缘可调整开始和结束时间。
+- 双击已选范围可删除。
+- 当 `overlapAllowed` 为 `false` 时，组件会阻止创建或拖入重叠区间。
+- 禁用时间段不会被纳入最终值，拖拽靠近禁用时间段时会停在边界。
+
+`disabledRanges` 只限制指定时间段；整体禁用请使用 `disabled`。拖拽时显示内部预览，外部模型更新会终止当前拖拽并同步值。请使用 `v-model` 接收最终结果；父级拒绝更新时会在下一渲染周期恢复 `modelValue`。
+
+
+
+返回 [AI 索引](../index.md)。先查本页与 [本地 API](./time-range-selector-api.md)；需要更深类型时查 [公开组件导航](../catalog.md)，不默认上网查找本包用法。

package/AI_USAGE/components/timeline-api.md

@@ -0,0 +1,93 @@
+<!-- Generated by pnpm generate:ai-usage. Edit script/ai-usage/content.md and script/ai-usage/. -->
+# Timeline 完整公开 API
+
+适用版本：x-next@1.14.0；来源指纹：`014984639d816a2c7e25eb22690c586b0b2e8efba6846bec8a4e424db41a09e9`。
+
+从同版本构建的公开声明、运行时 props/emits 和显式 expose 生成。运行时导入始终使用 `x-next`，声明路径仅作定位。插槽类型未细化时，具体槽名与作用域见本地用法示例。
+
+## Timeline API
+
+公开声明：`dist/components/timeline/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| reverse | 是否倒序展示 | undefined &#124; false &#124; true | 否 | false（Vue Boolean 转换） |
+| lineType | 轴线样式 | undefined &#124; "dashed" &#124; "dotted" &#124; "solid" | 否 | "solid" |
+| direction | 时间线方向 | undefined &#124; "horizontal" &#124; "vertical" | 否 | "vertical" |
+| mode | 展示模式 | undefined &#124; "top" &#124; "bottom" &#124; "right" &#124; "left" &#124; "alternate" | 否 | "left" |
+| pending | 是否展示幽灵节点，传入字符串时作为节点内容展示 | undefined &#124; string &#124; false &#124; true | 否 | false（Vue Boolean 转换） |
+| labelPosition | 标签文本位置 | undefined &#124; "same" &#124; "relative" | 否 | "same" |
+
+### Events
+
+未声明组件 emits；原生事件与包装透传按本页用法核实。
+
+### Slots
+
+| 名称 | 用途 | 公开类型 |
+| --- | --- | --- |
+| default | 时间线节点列表 | 文档列出的实际插槽；公开类型未细化，作用域见场景用法 |
+| dot | 自定义幽灵节点 | 文档列出的实际插槽；公开类型未细化，作用域见场景用法 |
+
+### 实例方法
+
+没有检索到显式 expose 或 Options API methods 的公开方法；不把 setup 内部函数当成稳定实例 API。
+
+### 关联类型定义
+
+以下摘自本组件族声明，供查阅嵌套配置；运行时和值类型均以根入口可导出项为准。
+
+```typescript-reference
+type CSSColor = CSSProperties['color'];
+
+type LineType = 'dotted' | 'dashed' | 'solid';
+
+type TimelineDirection = 'vertical' | 'horizontal';
+
+type TimelineMode = 'left' | 'right' | 'top' | 'bottom' | 'alternate';
+
+type TimelineLabelPosition = 'same' | 'relative';
+
+type TimelineDotType = 'solid' | 'hollow';
+
+type TimelineItemPosition = 'left' | 'right' | 'top' | 'bottom';
+```
+
+
+## TimelineItem API
+
+公开声明：`dist/components/timeline-item/index.d.ts`。 类型中的 undefined 表示可省略；原始 prop 默认值不等于继承配置或服务默认值。
+
+### Props
+
+| 名称 | 用途 | 公开类型 | 必填 | 声明默认值 |
+| --- | --- | --- | --- | --- |
+| label | 标签文本 | undefined &#124; string | 否 | 未声明 |
+| dotColor | 时间点颜色 | undefined &#124; string & {} &#124; "initial" &#124; "red" &#124; "orangered" &#124; "orange" &#124; "gold" &#124; "lime" &#124; "green" &#124; "cyan" &#124; "blue" &#124; "purple" &#124; "magenta" &#124; "gray" &#124; "-moz-initial" &#124; "inherit" &#124; "revert" &#124; "revert-layer" &#124; "unset" &#124; "aliceblue" &#124; "antiquewhite" &#124; "aqua" &#124; "aquamarine" &#124; "azure" &#124; "beige" &#124; "bisque" &#124; "black" &#124; "blanchedalmond" &#124; "blueviolet" &#124; "brown" &#124; "burlywood" &#124; "cadetblue" &#124; "chartreuse" &#124; "chocolate" &#124; "coral" &#124; "cornflowerblue" &#124; "cornsilk" &#124; "crimson" &#124; "darkblue" &#124; "darkcyan" &#124; "darkgoldenrod" &#124; "darkgray" &#124; "darkgreen" &#124; "darkgrey" &#124; "darkkhaki" &#124; "darkmagenta" &#124; "darkolivegreen" &#124; "darkorange" &#124; "darkorchid" &#124; "darkred" &#124; "darksalmon" &#124; "darkseagreen" &#124; "darkslateblue" &#124; "darkslategray" &#124; "darkslategrey" &#124; "darkturquoise" &#124; "darkviolet" &#124; "deeppink" &#124; "deepskyblue" &#124; "dimgray" &#124; "dimgrey" &#124; "dodgerblue" &#124; "firebrick" &#124; "floralwhite" &#124; "forestgreen" &#124; "fuchsia" &#124; "gainsboro" &#124; "ghostwhite" &#124; "goldenrod" &#124; "greenyellow" &#124; "grey" &#124; "honeydew" &#124; "hotpink" &#124; "indianred" &#124; "indigo" &#124; "ivory" &#124; "khaki" &#124; "lavender" &#124; "lavenderblush" &#124; "lawngreen" &#124; "lemonchiffon" &#124; "lightblue" &#124; "lightcoral" &#124; "lightcyan" &#124; "lightgoldenrodyellow" &#124; "lightgray" &#124; "lightgreen" &#124; "lightgrey" &#124; "lightpink" &#124; "lightsalmon" &#124; "lightseagreen" &#124; "lightskyblue" &#124; "lightslategray" &#124; "lightslategrey" &#124; "lightsteelblue" &#124; "lightyellow" &#124; "limegreen" &#124; "linen" &#124; "maroon" &#124; "mediumaquamarine" &#124; "mediumblue" &#124; "mediumorchid" &#124; "mediumpurple" &#124; "mediumseagreen" &#124; "mediumslateblue" &#124; "mediumspringgreen" &#124; "mediumturquoise" &#124; "mediumvioletred" &#124; "midnightblue" &#124; "mintcream" &#124; "mistyrose" &#124; "moccasin" &#124; "navajowhite" &#124; "navy" &#124; "oldlace" &#124; "olive" &#124; "olivedrab" &#124; "orchid" &#124; "palegoldenrod" &#124; "palegreen" &#124; "paleturquoise" &#124; "palevioletred" &#124; "papayawhip" &#124; "peachpuff" &#124; "peru" &#124; "pink" &#124; "plum" &#124; "powderblue" &#124; "rebeccapurple" &#124; "rosybrown" &#124; "royalblue" &#124; "saddlebrown" &#124; "salmon" &#124; "sandybrown" &#124; "seagreen" &#124; "seashell" &#124; "sienna" &#124; "silver" &#124; "skyblue" &#124; "slateblue" &#124; "slategray" &#124; "slategrey" &#124; "snow" &#124; "springgreen" &#124; "steelblue" &#124; "tan" &#124; "teal" &#124; "thistle" &#124; "tomato" &#124; "turquoise" &#124; "violet" &#124; "wheat" &#124; "white" &#124; "whitesmoke" &#124; "yellow" &#124; "yellowgreen" &#124; "transparent" &#124; "AccentColor" &#124; "AccentColorText" &#124; "ActiveText" &#124; "ButtonBorder" &#124; "ButtonFace" &#124; "ButtonText" &#124; "Canvas" &#124; "CanvasText" &#124; "Field" &#124; "FieldText" &#124; "GrayText" &#124; "Highlight" &#124; "HighlightText" &#124; "LinkText" &#124; "Mark" &#124; "MarkText" &#124; "SelectedItem" &#124; "SelectedItemText" &#124; "VisitedText" &#124; "ActiveBorder" &#124; "ActiveCaption" &#124; "AppWorkspace" &#124; "Background" &#124; "ButtonHighlight" &#124; "ButtonShadow" &#124; "CaptionText" &#124; "InactiveBorder" &#124; "InactiveCaption" &#124; "InactiveCaptionText" &#124; "InfoBackground" &#124; "InfoText" &#124; "Menu" &#124; "MenuText" &#124; "Scrollbar" &#124; "ThreeDDarkShadow" &#124; "ThreeDFace" &#124; "ThreeDHighlight" &#124; "ThreeDLightShadow" &#124; "ThreeDShadow" &#124; "Window" &#124; "WindowFrame" &#124; "WindowText" &#124; "currentColor" | 否 | 未声明 |
+| dotType | 时间点类型 | undefined &#124; "solid" &#124; "hollow" | 否 | "solid" |
+| lineType | 当前节点后的轴线样式 | undefined &#124; "dashed" &#124; "dotted" &#124; "solid" | 否 | 未声明 |
+| lineColor | 当前节点后的轴线颜色 | undefined &#124; string & {} &#124; "initial" &#124; "red" &#124; "orangered" &#124; "orange" &#124; "gold" &#124; "lime" &#124; "green" &#124; "cyan" &#124; "blue" &#124; "purple" &#124; "magenta" &#124; "gray" &#124; "-moz-initial" &#124; "inherit" &#124; "revert" &#124; "revert-layer" &#124; "unset" &#124; "aliceblue" &#124; "antiquewhite" &#124; "aqua" &#124; "aquamarine" &#124; "azure" &#124; "beige" &#124; "bisque" &#124; "black" &#124; "blanchedalmond" &#124; "blueviolet" &#124; "brown" &#124; "burlywood" &#124; "cadetblue" &#124; "chartreuse" &#124; "chocolate" &#124; "coral" &#124; "cornflowerblue" &#124; "cornsilk" &#124; "crimson" &#124; "darkblue" &#124; "darkcyan" &#124; "darkgoldenrod" &#124; "darkgray" &#124; "darkgreen" &#124; "darkgrey" &#124; "darkkhaki" &#124; "darkmagenta" &#124; "darkolivegreen" &#124; "darkorange" &#124; "darkorchid" &#124; "darkred" &#124; "darksalmon" &#124; "darkseagreen" &#124; "darkslateblue" &#124; "darkslategray" &#124; "darkslategrey" &#124; "darkturquoise" &#124; "darkviolet" &#124; "deeppink" &#124; "deepskyblue" &#124; "dimgray" &#124; "dimgrey" &#124; "dodgerblue" &#124; "firebrick" &#124; "floralwhite" &#124; "forestgreen" &#124; "fuchsia" &#124; "gainsboro" &#124; "ghostwhite" &#124; "goldenrod" &#124; "greenyellow" &#124; "grey" &#124; "honeydew" &#124; "hotpink" &#124; "indianred" &#124; "indigo" &#124; "ivory" &#124; "khaki" &#124; "lavender" &#124; "lavenderblush" &#124; "lawngreen" &#124; "lemonchiffon" &#124; "lightblue" &#124; "lightcoral" &#124; "lightcyan" &#124; "lightgoldenrodyellow" &#124; "lightgray" &#124; "lightgreen" &#124; "lightgrey" &#124; "lightpink" &#124; "lightsalmon" &#124; "lightseagreen" &#124; "lightskyblue" &#124; "lightslategray" &#124; "lightslategrey" &#124; "lightsteelblue" &#124; "lightyellow" &#124; "limegreen" &#124; "linen" &#124; "maroon" &#124; "mediumaquamarine" &#124; "mediumblue" &#124; "mediumorchid" &#124; "mediumpurple" &#124; "mediumseagreen" &#124; "mediumslateblue" &#124; "mediumspringgreen" &#124; "mediumturquoise" &#124; "mediumvioletred" &#124; "midnightblue" &#124; "mintcream" &#124; "mistyrose" &#124; "moccasin" &#124; "navajowhite" &#124; "navy" &#124; "oldlace" &#124; "olive" &#124; "olivedrab" &#124; "orchid" &#124; "palegoldenrod" &#124; "palegreen" &#124; "paleturquoise" &#124; "palevioletred" &#124; "papayawhip" &#124; "peachpuff" &#124; "peru" &#124; "pink" &#124; "plum" &#124; "powderblue" &#124; "rebeccapurple" &#124; "rosybrown" &#124; "royalblue" &#124; "saddlebrown" &#124; "salmon" &#124; "sandybrown" &#124; "seagreen" &#124; "seashell" &#124; "sienna" &#124; "silver" &#124; "skyblue" &#124; "slateblue" &#124; "slategray" &#124; "slategrey" &#124; "snow" &#124; "springgreen" &#124; "steelblue" &#124; "tan" &#124; "teal" &#124; "thistle" &#124; "tomato" &#124; "turquoise" &#124; "violet" &#124; "wheat" &#124; "white" &#124; "whitesmoke" &#124; "yellow" &#124; "yellowgreen" &#124; "transparent" &#124; "AccentColor" &#124; "AccentColorText" &#124; "ActiveText" &#124; "ButtonBorder" &#124; "ButtonFace" &#124; "ButtonText" &#124; "Canvas" &#124; "CanvasText" &#124; "Field" &#124; "FieldText" &#124; "GrayText" &#124; "Highlight" &#124; "HighlightText" &#124; "LinkText" &#124; "Mark" &#124; "MarkText" &#124; "SelectedItem" &#124; "SelectedItemText" &#124; "VisitedText" &#124; "ActiveBorder" &#124; "ActiveCaption" &#124; "AppWorkspace" &#124; "Background" &#124; "ButtonHighlight" &#124; "ButtonShadow" &#124; "CaptionText" &#124; "InactiveBorder" &#124; "InactiveCaption" &#124; "InactiveCaptionText" &#124; "InfoBackground" &#124; "InfoText" &#124; "Menu" &#124; "MenuText" &#124; "Scrollbar" &#124; "ThreeDDarkShadow" &#124; "ThreeDFace" &#124; "ThreeDHighlight" &#124; "ThreeDLightShadow" &#124; "ThreeDShadow" &#124; "Window" &#124; "WindowFrame" &#124; "WindowText" &#124; "currentColor" | 否 | 未声明 |
+| position | 交替模式下的单项位置 | undefined &#124; "top" &#124; "bottom" &#124; "right" &#124; "left" | 否 | 未声明 |
+
+### Events
+
+未声明组件 emits；原生事件与包装透传按本页用法核实。
+
+### Slots
+
+| 名称 | 用途 | 公开类型 |
+| --- | --- | --- |
+| default | 时间线内容 | any |
+| dot | 自定义时间点节点，优先级高于 icon | any |
+| icon | 自定义时间点图标，兼容旧用法 | any |
+| label | 自定义标签 | any |
+| description | 自定义描述，未传入默认插槽时展示 | any |
+
+### 实例方法
+
+没有检索到显式 expose 或 Options API methods 的公开方法；不把 setup 内部函数当成稳定实例 API。
+
+
+返回 [Timeline 用法](./timeline.md)。