From f5fb500b52052a65a9d53a999692f1ba5318db6e Mon Sep 17 00:00:00 2001 From: ChuChencheng Date: 2024年7月30日 05:10:24 +0800 Subject: [PATCH] feat: add dashDensity in showLine --- examples/Feature.vue | 8 +- package.json | 3 +- pnpm-lock.yaml | 7 -- site/.vitepress/code/ShowLine.vue | 8 ++ site/.vitepress/components/PlaygroundLink.vue | 2 +- site/.vitepress/config.mts | 9 +++ site/api/vtree.md | 74 +++++++++---------- site/en/api/vtree.md | 74 +++++++++---------- src/components/TreeNode.vue | 19 +++-- src/types/index.ts | 8 ++ 10 files changed, 121 insertions(+), 91 deletions(-) diff --git a/examples/Feature.vue b/examples/Feature.vue index d6fa112..6c48fec 100644 --- a/examples/Feature.vue +++ b/examples/Feature.vue @@ -147,7 +147,7 @@
@@ -169,6 +169,9 @@ {{ showLineType }}

当前连接线类型:{{showLineType}}

+

+ 虚线密度: {{ dashDensity }} +

showLine.polyline: @@ -437,6 +440,8 @@ export default defineComponent({ showLineType.value = type } + const dashDensity = ref(3) + const showLinePolyline = ref(false) const onShowLinePolylineBtnClick = (polyline: boolean) => { showLinePolyline.value = polyline @@ -485,6 +490,7 @@ export default defineComponent({ onShowLineTypeBtnClick, showLinePolyline, onShowLinePolylineBtnClick, + dashDensity, // 自定义节点 nodeSlotDescText, diff --git a/package.json b/package.json index 1e0297e..8733626 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wsfe/vue-tree", - "version": "4.0.1", + "version": "4.1.0", "types": "./types", "description": "A vue tree component using virtual list.", "main": "./dist/vue-tree.umd.js", @@ -67,7 +67,6 @@ "@vue/repl": "^4.3.0", "@vue/test-utils": "^2.4.6", "@vue/vue3-jest": "^29.2.6", - "@wsfe/vue-tree": "^4.0.1", "autoprefixer": "^10.4.19", "happy-dom": "^14.12.0", "less": "^4.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 776b06c..30fc4a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,9 +29,6 @@ devDependencies: '@vue/vue3-jest': specifier: ^29.2.6 version: 29.2.6(@babel/core@7.24.7)(babel-jest@29.7.0)(jest@29.7.0)(typescript@5.4.5)(vue@3.4.30) - '@wsfe/vue-tree': - specifier: ^4.0.1 - version: 4.0.1 autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) @@ -2862,10 +2859,6 @@ packages: - vue dev: true - /@wsfe/vue-tree@4.0.1: - resolution: {integrity: sha512-B3a1bddMfvv2Nzjsw12EOID3ccvvPDiT1GSLY/LFP/S36EvvmMbR5giIj6yhigSpTYNF4j6ORiowMxpwM1Rt6w==} - dev: true - /abbrev@2.0.0: resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==} engines: {node: ^14.17.0 || ^16.13.0 ||>=18.0.0} diff --git a/site/.vitepress/code/ShowLine.vue b/site/.vitepress/code/ShowLine.vue index d2af7d0..606c192 100644 --- a/site/.vitepress/code/ShowLine.vue +++ b/site/.vitepress/code/ShowLine.vue @@ -19,6 +19,12 @@
+ +
+ showLine.dashDensity: + + {{ dashDensity }} +
@@ -29,11 +35,13 @@ import VTree from '@wsfe/vue-tree' const type = ref('solid') const polyline = ref(false) +const dashDensity = ref(3) const showLine = computed(() => { return { type: type.value, polyline: polyline.value, + dashDensity: dashDensity.value, } }) diff --git a/site/.vitepress/components/PlaygroundLink.vue b/site/.vitepress/components/PlaygroundLink.vue index 7c56621..518908c 100644 --- a/site/.vitepress/components/PlaygroundLink.vue +++ b/site/.vitepress/components/PlaygroundLink.vue @@ -1,5 +1,5 @@ setup lang="ts"> diff --git a/site/.vitepress/config.mts b/site/.vitepress/config.mts index d0c7ea9..bdc6c04 100644 --- a/site/.vitepress/config.mts +++ b/site/.vitepress/config.mts @@ -1,3 +1,4 @@ +import path from 'node:path' import { defineConfig } from 'vitepress' import zh from './zh.mjs' import en from './en.mjs' @@ -31,6 +32,14 @@ export default defineConfig({ { icon: 'github', link: 'https://github.com/wsfe/vue-tree' } ] }, + vite: { + resolve: { + alias: { + '@wsfe/vue-tree/style.css': path.resolve('src/styles/index.less'), + '@wsfe/vue-tree': path.resolve('src'), + }, + }, + }, locales: { root: { diff --git a/site/api/vtree.md b/site/api/vtree.md index 31e691f..41d6d34 100644 --- a/site/api/vtree.md +++ b/site/api/vtree.md @@ -3,43 +3,43 @@ ## VTree Props -| 属性 | 说明 | 类型 | 默认值 | -| :------------------------------- | :------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | -| value | 选中的值,可用 v-model ;单选为字符串或数字,多选为 `separator` 分隔的字符串或数组,优先多选 | `string \| number \| Array` | 无 | -| data | 传入的树数据。数据量大时,不建议通过 props 传入数据,建议用 `setData` 方法代替 | `object[]` | [] | -| unloadDataList | 供未加载且选中节点查询 title 字段值用的列表,格式与 `data` 一致即可 | `object[]` | [] | -| showUnloadCheckedNodes | 过滤已选时是否在列表后面展示未加载的已选节点 | `boolean` | true | -| emptyText | 数据为空时显示的文本 | `string` | '暂无数据' | -| titleField | 节点标题字段 | `string` | 'title' | -| keyField | 节点唯一标识字段 | `string` | 'id' | -| separator | 多选模式下 value 分隔符 | `string` | ',' | -| checkable | 是否可多选 | `boolean` | false | -| selectable | 是否可单选 | `boolean` | false | -| filteredNodeCheckable | 是否可勾选被过滤节点 | `boolean` | false | -| cascade | 父子节点是否关联 | `boolean` | true | -| enableLeafOnly | 是否只启用子节点,当 `多选且父子不关联` 或 `单选` 时有效 | `boolean` | false | -| disableAll | 是否禁用所有节点 | `boolean` | false | -| defaultExpandAll | 是否默认展开所有节点 | `boolean` | false | -| defaultExpandedKeys `Deprecated` | 默认展开的节点 key | `Array` | [] | -| expandedKeys `2.2.0` | 展开的节点 key ,组件内部将会响应此 Prop 的变化 | `Array` | [] | -| draggable | 是否可拖拽 | `boolean` | false | -| droppable | 是否可放置 | `boolean` | false | -| beforeDropMethod | 在放置节点之前执行的方法,返回 true 允许放置, false 可阻止放置 | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean` | `() => true` | -| ignoreMode | 忽略模式,指定 `getCheckedNodes`, `getCheckedKeys` 与 `v-model` 默认要忽略的部分 | `'none' \| 'parents' \| 'children'` | 'none' | -| autoLoad | 异步加载初始化时是否自动加载根节点 | `boolean` | true | -| load | 异步加载方法 | `(node: null \| TreeNode, resolve: Function, reject: Function) => any` | 无 | -| render | 节点渲染 render 函数 | `(h: CreateElement, node: TreeNode) => VNode` | 无 | -| filterMethod | 节点过滤方法 | `(keyword: string, node: TreeNode) => boolean` | 无 | -| expandOnFilter `2.1.0` | 过滤时是否展开所有可见节点 | `boolean` | true | -| unselectOnClick `2.1.0` | 点击已选中节点是否取消选中 | `boolean` | true | -| loading | 是否显示 loading 图标 | `boolean` | false | -| nodeClassName | 节点根元素的 class ,传入函数以对每个节点定制 class | `string \| object \| Array \| (node: TreeNode) => string \| object \| Array` | 无 | -| showLine `4.0.0` | 是否显示连接线,可指定连接线的宽度、颜色、实线、虚线,以及是否有折线 | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean }` | 无,如果传入的非 boolean,则默认为 `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false }` | -| animation `4.0.0` | 是否启用过渡动画,目前仅控制展开收起 | `boolean` | 无 | -| nodeMinHeight | 根据节点最小高度计算数据总高度 | `number` | 30 | -| nodeIndent | 子节点缩进 | `number` | 20 | -| renderNodeAmount | 渲染节点数量,可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | `number` | 100 | -| bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 | `number` | 20 | +| 属性 | 说明 | 类型 | 默认值 | +| :------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | +| value | 选中的值,可用 v-model ;单选为字符串或数字,多选为 `separator` 分隔的字符串或数组,优先多选 | `string \| number \| Array` | 无 | +| data | 传入的树数据。数据量大时,不建议通过 props 传入数据,建议用 `setData` 方法代替 | `object[]` | [] | +| unloadDataList | 供未加载且选中节点查询 title 字段值用的列表,格式与 `data` 一致即可 | `object[]` | [] | +| showUnloadCheckedNodes | 过滤已选时是否在列表后面展示未加载的已选节点 | `boolean` | true | +| emptyText | 数据为空时显示的文本 | `string` | '暂无数据' | +| titleField | 节点标题字段 | `string` | 'title' | +| keyField | 节点唯一标识字段 | `string` | 'id' | +| separator | 多选模式下 value 分隔符 | `string` | ',' | +| checkable | 是否可多选 | `boolean` | false | +| selectable | 是否可单选 | `boolean` | false | +| filteredNodeCheckable | 是否可勾选被过滤节点 | `boolean` | false | +| cascade | 父子节点是否关联 | `boolean` | true | +| enableLeafOnly | 是否只启用子节点,当 `多选且父子不关联` 或 `单选` 时有效 | `boolean` | false | +| disableAll | 是否禁用所有节点 | `boolean` | false | +| defaultExpandAll | 是否默认展开所有节点 | `boolean` | false | +| defaultExpandedKeys `Deprecated` | 默认展开的节点 key | `Array` | [] | +| expandedKeys `2.2.0` | 展开的节点 key ,组件内部将会响应此 Prop 的变化 | `Array` | [] | +| draggable | 是否可拖拽 | `boolean` | false | +| droppable | 是否可放置 | `boolean` | false | +| beforeDropMethod | 在放置节点之前执行的方法,返回 true 允许放置, false 可阻止放置 | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean` | `() => true` | +| ignoreMode | 忽略模式,指定 `getCheckedNodes`, `getCheckedKeys` 与 `v-model` 默认要忽略的部分 | `'none' \| 'parents' \| 'children'` | 'none' | +| autoLoad | 异步加载初始化时是否自动加载根节点 | `boolean` | true | +| load | 异步加载方法 | `(node: null \| TreeNode, resolve: Function, reject: Function) => any` | 无 | +| render | 节点渲染 render 函数 | `(h: CreateElement, node: TreeNode) => VNode` | 无 | +| filterMethod | 节点过滤方法 | `(keyword: string, node: TreeNode) => boolean` | 无 | +| expandOnFilter `2.1.0` | 过滤时是否展开所有可见节点 | `boolean` | true | +| unselectOnClick `2.1.0` | 点击已选中节点是否取消选中 | `boolean` | true | +| loading | 是否显示 loading 图标 | `boolean` | false | +| nodeClassName | 节点根元素的 class ,传入函数以对每个节点定制 class | `string \| object \| Array \| (node: TreeNode) => string \| object \| Array` | 无 | +| showLine `4.0.0` | 是否显示连接线,可指定连接线的宽度、颜色、实线、虚线,以及是否有折线;虚线密度 dashDensity `4.1.0` 类型为 1-10 的整数 | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean, dashDensity?: number }` | 无,如果传入的非 boolean,则默认为 `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }` | +| animation `4.0.0` | 是否启用过渡动画,目前仅控制展开收起 | `boolean` | 无 | +| nodeMinHeight | 根据节点最小高度计算数据总高度 | `number` | 30 | +| nodeIndent | 子节点缩进 | `number` | 20 | +| renderNodeAmount | 渲染节点数量,可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点 | `number` | 100 | +| bufferNodeAmount | 当滚动到视野外的节点个数大于此值时刷新渲染节点 | `number` | 20 | ## VTree Events diff --git a/site/en/api/vtree.md b/site/en/api/vtree.md index 8106f40..ef725a0 100644 --- a/site/en/api/vtree.md +++ b/site/en/api/vtree.md @@ -3,43 +3,43 @@ ## VTree Props -| Prop | Description | Type | Default Value | -| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- | -| value | Selected or checked value. Supports `v-model`. `value` will be a string or number in single select mode; a `separator` separated string or an array in multiple select mode. Multiple select mode takes the priority | `string \| number \| Array` | None | -| data | Tree data. It's recommended to use `setData` method instead of props when the data amount is large | `object[]` | [] | -| unloadDataList | The list for querying node title of not loaded but selected nodes. The format is the same as `data` | `object[]` | [] | -| showUnloadCheckedNodes | Whether to show checked nodes that are not loaded after filter | `boolean` | true | -| emptyText | No data text | `string` | '暂无数据' | -| titleField | Node title field | `string` | 'title' | -| keyField | Node unique key field | `string` | 'id' | -| separator | Separator of `value` in multiple select mode | `string` | ',' | -| checkable | Enable multiple select | `boolean` | false | -| selectable | Enable single select | `boolean` | false | -| filteredNodeCheckable | Whether the filtered nodes can be checked | `boolean` | false | -| cascade | Whether parent nodes and child nodes are cascaded | `boolean` | true | -| enableLeafOnly | Whether to enable leaf nodes only. Effective when 'in multiple select mode and cascade is false' or 'in single select mode' | `boolean` | false | -| disableAll | Whether to disable all nodes | `boolean` | false | -| defaultExpandAll | Whether to expand all nodes by default | `boolean` | false | -| defaultExpandedKeys `Deprecated` | Default expanded keys | `Array` | [] | -| expandedKeys `2.2.0` | Expanded node keys. The component will react to the changes of this prop | `Array` | [] | -| draggable | Whether nodes can be dragged | `boolean` | false | -| droppable | Whether nodes can be dropped | `boolean` | false | -| beforeDropMethod | This method will be invoked before node drop. Return `true` to allow dropping. Return `false` to prevent from dropping | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean` | `() => true` | -| ignoreMode | Specify the nodes to ignore in `getCheckedNodes`, `getCheckedKeys` and `v-model` | `'none' \| 'parents' \| 'children'` | 'none' | -| autoLoad | Whether to auto load root nodes when init | `boolean` | true | -| load | async load method | `(node: null \| TreeNode, resolve: Function, reject: Function) => any` | None | -| render | Node render function | `(h: CreateElement, node: TreeNode) => VNode` | None | -| filterMethod | Node filter method | `(keyword: string, node: TreeNode) => boolean` | None | -| expandOnFilter `2.1.0` | Whether to expand all visible nodes when filter | `boolean` | true | -| unselectOnClick `2.1.0` | Whether to cancel select when click on selected node | `boolean` | true | -| loading | Whether to show loading icon | `boolean` | false | -| nodeClassName | Class passed to the root element of the node. Pass a function to customize class for each node | `string \| object \| Array \| (node: TreeNode) => string \| object \| Array` | None | -| showLine `4.0.0` | Whether to show connecting lines. Pass object to specify line width, color, type and polyline | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean }` | None. If not boolean, the default value is `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false }` | -| animation `4.0.0` | Whether to enable transition animation. This prop only controls expand/collapse animation currently | `boolean` | None | -| nodeMinHeight | Calculate data total height according to node min height | `number` | 30 | -| nodeIndent | Child node indent | `number` | 20 | -| renderNodeAmount | Node amount to render. Not all visible nodes will be rendered when they are more than this prop and the height is more than (node amount the container clientHeight can hold + bufferNodeAmount) | `number` | 100 | -| bufferNodeAmount | Refresh render nodes when scrolled node amount is more than this prop | `number` | 20 | +| Prop | Description | Type | Default Value | +| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | +| value | Selected or checked value. Supports `v-model`. `value` will be a string or number in single select mode; a `separator` separated string or an array in multiple select mode. Multiple select mode takes the priority | `string \| number \| Array` | None | +| data | Tree data. It's recommended to use `setData` method instead of props when the data amount is large | `object[]` | [] | +| unloadDataList | The list for querying node title of not loaded but selected nodes. The format is the same as `data` | `object[]` | [] | +| showUnloadCheckedNodes | Whether to show checked nodes that are not loaded after filter | `boolean` | true | +| emptyText | No data text | `string` | '暂无数据' | +| titleField | Node title field | `string` | 'title' | +| keyField | Node unique key field | `string` | 'id' | +| separator | Separator of `value` in multiple select mode | `string` | ',' | +| checkable | Enable multiple select | `boolean` | false | +| selectable | Enable single select | `boolean` | false | +| filteredNodeCheckable | Whether the filtered nodes can be checked | `boolean` | false | +| cascade | Whether parent nodes and child nodes are cascaded | `boolean` | true | +| enableLeafOnly | Whether to enable leaf nodes only. Effective when 'in multiple select mode and cascade is false' or 'in single select mode' | `boolean` | false | +| disableAll | Whether to disable all nodes | `boolean` | false | +| defaultExpandAll | Whether to expand all nodes by default | `boolean` | false | +| defaultExpandedKeys `Deprecated` | Default expanded keys | `Array` | [] | +| expandedKeys `2.2.0` | Expanded node keys. The component will react to the changes of this prop | `Array` | [] | +| draggable | Whether nodes can be dragged | `boolean` | false | +| droppable | Whether nodes can be dropped | `boolean` | false | +| beforeDropMethod | This method will be invoked before node drop. Return `true` to allow dropping. Return `false` to prevent from dropping | `(dragKey: string \| number, dropKey: string \| number, hoverPart: 'before' \| 'body' \| 'after') => boolean` | `() => true` | +| ignoreMode | Specify the nodes to ignore in `getCheckedNodes`, `getCheckedKeys` and `v-model` | `'none' \| 'parents' \| 'children'` | 'none' | +| autoLoad | Whether to auto load root nodes when init | `boolean` | true | +| load | async load method | `(node: null \| TreeNode, resolve: Function, reject: Function) => any` | None | +| render | Node render function | `(h: CreateElement, node: TreeNode) => VNode` | None | +| filterMethod | Node filter method | `(keyword: string, node: TreeNode) => boolean` | None | +| expandOnFilter `2.1.0` | Whether to expand all visible nodes when filter | `boolean` | true | +| unselectOnClick `2.1.0` | Whether to cancel select when click on selected node | `boolean` | true | +| loading | Whether to show loading icon | `boolean` | false | +| nodeClassName | Class passed to the root element of the node. Pass a function to customize class for each node | `string \| object \| Array \| (node: TreeNode) => string \| object \| Array` | None | +| showLine `4.0.0` | Whether to show connecting lines. Pass object to specify line width, color, type and polyline. The density of dash dashDensity `4.1.0` ranges from 1 to 10 | `boolean \| { width?: number, type?: 'dashed' \| 'solid', color?: string, polyline?: boolean, dashDensity?: number }` | None. If not boolean, the default value is `{ width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }` | +| animation `4.0.0` | Whether to enable transition animation. This prop only controls expand/collapse animation currently | `boolean` | None | +| nodeMinHeight | Calculate data total height according to node min height | `number` | 30 | +| nodeIndent | Child node indent | `number` | 20 | +| renderNodeAmount | Node amount to render. Not all visible nodes will be rendered when they are more than this prop and the height is more than (node amount the container clientHeight can hold + bufferNodeAmount) | `number` | 100 | +| bufferNodeAmount | Refresh render nodes when scrolled node amount is more than this prop | `number` | 20 | ## VTree Events diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue index 5966349..747e28d 100644 --- a/src/components/TreeNode.vue +++ b/src/components/TreeNode.vue @@ -10,9 +10,9 @@ width: `${nodeIndent}px`, }" > - { type: showLineType.solid, color: '#D3D3D3', polyline: false, + dashDensity: 3, } let params: Required = defaultParams if (typeof props.showLine === 'object') { + let dashDensity = defaultParams.dashDensity + if (typeof props.showLine.dashDensity === 'number' && props.showLine.dashDensity>= 1 && props.showLine.dashDensity <= 10) { + dashDensity = props.showLine.dashDensity + } + params = { width: props.showLine.width ?? defaultParams.width, type: props.showLine.type ?? defaultParams.type, color: props.showLine.color ?? defaultParams.color, polyline: props.showLine.polyline ?? defaultParams.polyline, + dashDensity, } } return params @@ -132,7 +139,7 @@ const strokeWidth = computed(() => showLineParams.value.width * 100 / props.node const strokeDasharray = computed(() => { switch (showLineParams.value.type) { case showLineType.dashed: - return '25' + return 100 / (showLineParams.value.dashDensity * 2) default: break } @@ -140,10 +147,10 @@ const strokeDasharray = computed(() => { }) const polylinePoints = (isDirectParentLine: boolean) => { - if (!showLineParams.value.polyline || !isDirectParentLine) return '50,0 50,100' + if (!showLineParams.value.polyline || !isDirectParentLine) return 'M50,0 L50,100' const parent = props.getNode(props.data[props.keyField])?._parent - if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return '50,0 50,50 100,50 50,50' - return '50,0 50,50 100,50 50,50 50,100' + if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return 'M50,0 L50,50 M100,50 L50,50' + return 'M50,0 L50,100 M100,50 L50,50' } const { diff --git a/src/types/index.ts b/src/types/index.ts index 48de6cf..b72e1b6 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -31,10 +31,18 @@ export interface INonReactiveData { blockNodes: TreeNode[] } +// Utils to generate types like 1 | 2 | 3 +type Enumerate = Acc['length'] extends N + ? Acc[number] + : Enumerate + +type IntRange = Exclude, Enumerate> + export interface ShowLine { /** 连接线宽度,svg stroke-width, 默认 1px */ width?: number type?: showLineType color?: string polyline?: boolean + dashDensity?: IntRange<1, 11> }

AltStyle によって変換されたページ (->オリジナル) /