From 6aecf3c9f6d807c35f842937bc69202986d98207 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 11 Oct 2024 10:54:53 +0800
Subject: [PATCH 1/8] =?UTF-8?q?feat(virtualList):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8A=A8=E6=80=81=E5=8F=98=E5=8C=96=EF=BC=9B?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9ErenderChange=E4=BA=8B=E4=BB=B6=EF=BC=9B?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9EdefaultItemSize=E5=AD=97=E6=AE=B5=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=B8=8D=E5=AE=9A=E9=AB=98=E6=97=B6=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E6=AF=8F=E4=B8=80=E9=A1=B9=E9=BB=98=E8=AE=A4=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=9B=E4=BF=AE=E5=A4=8D=E5=AE=B9=E5=99=A8=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E5=8F=98=E5=8C=96=EF=BC=8C=E6=B8=B2=E6=9F=93=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/virtual-list/OVirtualList.vue         | 195 +++++++++++++-----
 .../src/virtual-list/__demo__/TheIndex.vue    |   2 +
 .../__demo__/VirtualListBasic.vue             |  34 ++-
 .../__demo__/VirtualListDynamic.vue           |  74 +++++++
 packages/opendesign/src/virtual-list/types.ts |   9 +-
 5 files changed, 255 insertions(+), 59 deletions(-)
 create mode 100644 packages/opendesign/src/virtual-list/__demo__/VirtualListDynamic.vue

diff --git a/packages/opendesign/src/virtual-list/OVirtualList.vue b/packages/opendesign/src/virtual-list/OVirtualList.vue
index f3657204..e4e3671f 100644
--- a/packages/opendesign/src/virtual-list/OVirtualList.vue
+++ b/packages/opendesign/src/virtual-list/OVirtualList.vue
@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
+import { ref, computed, onMounted, watch, nextTick } from 'vue';
 import { vScrollbar } from '../scrollbar';
 import { virtualListProps } from './types';
-import { isArray, isUndefined } from '../_utils/is';
+import { isUndefined } from '../_utils/is';
 import { vOnResize } from '../directives/on-resize';
 import { debounceRAF } from '../_utils/helper';
 
 const props = defineProps(virtualListProps);
+const emits = defineEmits<{
+  (e: 'renderChange', start: number, end: number): void;
+}>();
 /**
  * 设置滚动条参数
  */
@@ -22,18 +25,30 @@ const scrollbarProps = computed(() => {
 /**
  * 对列表数据预处理
  */
-const listData = computed(() => {
-  if (!isArray(props.list)) {
-    return [];
+const listData = ref<
+  Array<{
+    id: number | string;
+    index: number;
+    data: any;
+  }>
+>([]);
+watch(
+  () => props.list,
+  (value) => {
+    listData.value = value.map((item, index) => ({
+      id: item.id,
+      data: item,
+      index,
+    }));
+  },
+  {
+    immediate: true,
   }
-  return props.list.map((item, index) => ({
-    item,
-    index,
-  }));
-});
+);
 
 // 可视区域内的起始序号
 const visibleStartIndex = ref(props.defaultStartIndex ?? 0);
+let visibleStartId: string | number | undefined = undefined;
 // 可视区域内的结束序号
 const renderCount = ref(1);
 // 渲染起始序号
@@ -44,7 +59,12 @@ const startIndex = computed(() => {
 const endIndex = computed(() => {
   return Math.min(startIndex.value + renderCount.value + props.buffer * 2, listData.value.length - 1);
 });
-
+watch([visibleStartIndex, renderCount], () => {
+  if (!initialScroll) {
+    return;
+  }
+  emits('renderChange', startIndex.value, endIndex.value);
+});
 /**
  * 渲染的数据
  */
@@ -52,22 +72,61 @@ const renderList = computed(() => {
   return listData.value.slice(startIndex.value, endIndex.value + 1);
 });
 
+watch(listData, (value) => {
+  if (!isUndefined(visibleStartId) && wrapperRef.value) {
+    // 计算滚动偏移量
+    const top = wrapperRef.value.scrollTop - listMetaData[visibleStartIndex.value].top;
+    // 找到更新后的可视数据index
+    const index = value.findIndex((item) => item.id === visibleStartId);
+    if (index >= 0) {
+      visibleStartIndex.value = index;
+      // 重新定位滚动条位置（需加上偏移量）
+      wrapperRef.value.scrollTop = listMetaData[index].top + top;
+    }
+  }
+});
+
 const wrapperRef = ref<HTMLElement>();
-// 动态高度时，先给定默认高度
-const placeholderSize = 80;
 
 // 列表虚拟总高度，先给定初始值
-const contentSize = ref((props.itemSize ? props.itemSize : placeholderSize) * listData.value.length);
+const contentSize = ref((props.itemSize ? props.itemSize : props.defaultItemSize) * listData.value.length);
 // 容器可视区尺寸
 const containerSize = ref({
   height: 0,
   width: 0,
 });
 const onContainerResize = () => {
-  containerSize.value.height = wrapperRef.value?.offsetHeight ?? 0;
-  containerSize.value.width = wrapperRef.value?.offsetWidth ?? 0;
+  if (!wrapperRef.value) {
+    return;
+  }
+  containerSize.value.height = wrapperRef.value.offsetHeight;
+  containerSize.value.width = wrapperRef.value.offsetWidth;
 
-  debounceUpdateVisibleCount();
+  // 第一次初始化滚动位置后，再根据容器尺寸变化刷新渲染项，未初始化，则不刷新
+  if (!initialScroll) {
+    return;
+  }
+  const scrollTop = wrapperRef.value.scrollTop;
+
+  // 刷新起始渲染项
+  for (let i = visibleStartIndex.value; i >= 0; i--) {
+    const meta = listMetaData[i];
+
+    if (meta.top <= scrollTop) {
+      visibleStartIndex.value = i;
+      break;
+    }
+  }
+
+  // 刷新结束渲染项
+  for (let i = endIndex.value; i < listMetaData.length; i++) {
+    const meta = listMetaData[i];
+
+    if (meta.bottom >= scrollTop + containerSize.value.height) {
+      renderCount.value = i - visibleStartIndex.value;
+      break;
+    }
+  }
 };
 
 const contentStyle = computed(() => ({
@@ -81,6 +140,11 @@ const renderListStyle = computed(() => {
   };
 });
 
+/**
+ * 初始化滚动位置
+ */
+let initialScroll = false;
+
 /**
  * 滚动到指定序号项
  * @param index
@@ -92,38 +156,52 @@ const scrollToIndex = (index: number) => {
   wrapperRef.value.scrollTop = listMetaData[index].top;
 };
 
-/**
- * 初始化滚动位置
- */
-const initialScroll = ref(false);
-watchEffect(() => {
-  if (initialScroll.value) {
-    scrollToIndex(props.defaultStartIndex);
-  }
-});
-
 interface ItemMeta {
+  id: string | number;
   index: number;
   top: number;
   bottom: number;
   size: number;
   measured: boolean;
 }
+
 let listMetaData: Array<ItemMeta> = [];
-watchEffect(() => {
-  const itemSize = props.itemSize ? props.itemSize : placeholderSize;
-  listMetaData = listData.value.map((_, index) => {
-    const meta = {
-      index,
-      size: itemSize,
-      top: itemSize * index,
-      bottom: itemSize * (index + 1),
-      measured: props.itemSize ? true : false,
-    };
-    return meta;
-  });
-  contentSize.value = listMetaData[listMetaData.length - 1].bottom;
-});
+// 列表数据变换时，重新计算尺寸数据
+watch(
+  [() => props.itemSize, () => listData.value],
+  ([propSize, dataList]) => {
+    const itemSize = propSize ? propSize : props.defaultItemSize;
+
+    let lastTop = 0;
+    listMetaData = dataList.map((item, index) => {
+      // 非固定高度
+      if (!propSize) {
+        const m = listMetaData.find((mItem) => mItem.id === item.id);
+        if (m && m.measured) {
+          lastTop = m.bottom;
+          return m;
+        }
+      }
+
+      const metaItem = {
+        id: item.id,
+        index,
+        size: itemSize,
+        top: lastTop,
+        bottom: lastTop + itemSize,
+        measured: propSize ? true : false,
+      };
+
+      lastTop += itemSize;
+
+      return metaItem;
+    });
+    contentSize.value = listMetaData[listMetaData.length - 1].bottom;
+  },
+  {
+    immediate: true,
+  }
+);
 
 /**
  * 更新item的相关偏移、高度，总高度
@@ -155,7 +233,7 @@ const updateVisibleCount = (scrollOffset?: number) => {
 
   for (let i = visibleStartIndex.value + 1; i < listMetaData.length; i++) {
     const meta = listMetaData[i];
-    if (meta.top > scrollSize + containerHeight) {
+    if (meta.top >= scrollSize + containerHeight) {
       renderCount.value = i - visibleStartIndex.value;
       break;
     }
@@ -195,11 +273,13 @@ const onScroll = () => {
   if (props.itemSize) {
     visibleStartIndex.value = Math.floor(scrollOffset / props.itemSize);
     offset.value = listMetaData[startIndex.value].top;
+    visibleStartId = listMetaData[visibleStartIndex.value].id;
     return;
   }
 
   visibleStartIndex.value = getStartIndex(scrollOffset);
   offset.value = listMetaData[startIndex.value].top;
+  visibleStartId = listMetaData[visibleStartIndex.value].id;
 
   debounceUpdateVisibleCount(scrollOffset);
 };
@@ -209,20 +289,31 @@ const onScroll = () => {
 const onItemResize = (en: ResizeObserverEntry, index: number) => {
   const el = en.target as HTMLElement;
   const meta = listMetaData[index];
+
+  const size = el.offsetHeight;
   // 如果之前计算过，且尺寸无变化，则不需要刷新meta数据
-  if (meta.measured && meta.size === el.offsetHeight) {
+  if (meta.measured && meta.size === size) {
     return;
   }
 
-  meta.size = el.offsetHeight;
+  // 如果未计算的元素在滚动位置之前，则需要修正默认高度与渲染后的高度差，避免抖动
+  if (meta.measured === false && wrapperRef.value && wrapperRef.value.scrollTop > meta.top) {
+    wrapperRef.value.scrollTop += size - meta.size;
+  }
+
+  meta.size = size;
   meta.measured = true;
   meta.bottom = meta.top + meta.size;
 
   updateMeta(index);
 
-  // 滚动到初始位置
-  if (index === props.defaultStartIndex && !initialScroll.value) {
-    initialScroll.value = true;
+  // 处理初始滚动位置
+  if (index === props.defaultStartIndex && !initialScroll) {
+    // 等渲染后再重新定位滚动初始位置
+    nextTick(() => {
+      scrollToIndex(props.defaultStartIndex);
+      initialScroll = true;
+    });
   }
 
   debounceUpdateVisibleCount();
@@ -233,8 +324,10 @@ const init = () => {
     return;
   }
   // 先初始化滚动位置
-  scrollToIndex(props.defaultStartIndex);
-  onContainerResize();
+  if (props.itemSize) {
+    scrollToIndex(props.defaultStartIndex);
+    initialScroll = true;
+  }
 };
 
 onMounted(() => {
@@ -254,11 +347,11 @@ defineExpose({
           <template v-for="item in renderList" :key="item.index">
             <template v-if="props.itemSize">
               <div class="o-virtual-render-item" :style="{ height: props.itemSize + 'px' }">
-                <slot :item="item.item" :index="item.index"></slot>
+                <slot :item="item.data" :index="item.index"></slot>
               </div>
             </template>
             <div v-else class="o-virtual-render-item" v-on-resize="(en:ResizeObserverEntry) => onItemResize(en, item.index)">
-              <slot :item="item.item" :index="item.index"></slot>
+              <slot :item="item.data" :index="item.index"></slot>
             </div>
           </template>
         </div>
diff --git a/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue b/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
index 8ca5f690..f7f48ac1 100644
--- a/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import VirtualListBasic from './VirtualListBasic.vue';
+import VirtualListDynamic from './VirtualListDynamic.vue';
 </script>
 <template>
   <div class="page-demo">
     <VirtualListBasic />
+    <VirtualListDynamic />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue b/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
index 00bfc155..5b72df12 100644
--- a/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
+++ b/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { OVirtualList } from '../index';
 import '../style';
 import { BaseScrollerPropsT } from '../../scrollbar';
+import { uniqueId } from '../../_utils/helper';
 
 const list = ref(
   new Array(50).fill(1).map((_, idx) => ({
@@ -17,17 +18,19 @@ const onClick = (item: any) => {
 
 const containerHeight = ref(300);
 const changeContainerSize = () => {
-  containerHeight.value += 20;
+  containerHeight.value += 100;
 };
 
 const list2 = ref(
   new Array(20).fill(1).map((_, idx) => ({
+    id: uniqueId(),
     label: `${idx + 1}`,
     height: Math.floor(Math.random() * 80 + 40),
   }))
 );
 const changeListData = () => {
   const n = new Array(10).fill(1).map((_, idx) => ({
+    id: uniqueId(),
     label: `add${idx + 1}`,
     height: Math.floor(Math.random() * 80 + 40),
   }));
@@ -39,13 +42,16 @@ const scrollbarProps: Partial<BaseScrollerPropsT> = {
   size: 'medium',
   autoUpdateOnScrollSize: true,
 };
+const onRenderChange = (start: number, end: number) => {
+  console.log(start, end);
+};
 </script>
 <template>
   <h4>Scroller basic</h4>
   <div class="row">
     <div class="col">
       <h5>高度固定且一致</h5>
-      <OVirtualList class="container" :list="list" :default-start-index="10" :item-size="80">
+      <OVirtualList class="container" :list="list" :default-start-index="10" :item-size="80" @render-change="onRenderChange">
         <template #default="{ item, index }">
           <div :key="item.label" class="section" :class="`item-${index + 1}`">
             <span>Row:</span> <span>{{ item.label }}</span
@@ -72,7 +78,14 @@ const scrollbarProps: Partial<BaseScrollerPropsT> = {
 
   <div class="row">
     <div class="col">
-      <OVirtualList class="container2" :list="list" :default-start-index="10" :style="{ height: containerHeight + 'px' }" :item-size="80">
+      <OVirtualList
+        class="container2"
+        :list="list"
+        :default-start-index="10"
+        :style="{ height: containerHeight + 'px' }"
+        :item-size="80"
+        @render-change="onRenderChange"
+      >
         <template #default="{ item, index }">
           <div :key="item.label" class="section" :class="`item-${index + 1}`">
             <span>Row:</span> <span>{{ item.label }}</span
@@ -82,7 +95,7 @@ const scrollbarProps: Partial<BaseScrollerPropsT> = {
       </OVirtualList>
     </div>
     <div class="col">
-      <OVirtualList class="container2" :list="list" :default-start-index="10" :style="{ height: containerHeight + 'px' }">
+      <OVirtualList class="container2" :list="list" :default-start-index="44" :style="{ height: containerHeight + 'px' }">
         <template #default="{ item, index }">
           <div :key="item.label" class="section" :class="`item-${index + 1}`" :style="{ height: item.height + 'px' }">
             <span>Row:</span> <span>{{ item.label }}</span
@@ -114,11 +127,18 @@ const scrollbarProps: Partial<BaseScrollerPropsT> = {
       </OVirtualList>
     </div>
     <div class="col">
-      <OVirtualList class="container2" :list="list2" :default-start-index="10" :style="{ height: containerHeight + 'px' }" :scrollbar="scrollbarProps">
+      <OVirtualList
+        class="container2"
+        :list="list2"
+        :default-start-index="10"
+        :style="{ height: containerHeight + 'px' }"
+        :scrollbar="scrollbarProps"
+        @render-change="onRenderChange"
+      >
         <template #default="{ item, index }">
           <div :key="item.label" class="section" :class="`item-${index + 1}`" :style="{ height: item.height + 'px' }">
             <span>Row:</span> <span>{{ item.label }}</span
-            >------<span>Height:</span> <span>80px</span>
+            >------<span>Height:</span> <span>{{ item.height }}</span>
           </div>
         </template>
       </OVirtualList>
@@ -144,7 +164,7 @@ section > div {
   flex: 0 1 30%;
 }
 .section {
-  height: 100px;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/opendesign/src/virtual-list/__demo__/VirtualListDynamic.vue b/packages/opendesign/src/virtual-list/__demo__/VirtualListDynamic.vue
new file mode 100644
index 00000000..f4f5b1d3
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/__demo__/VirtualListDynamic.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { uniqueId } from '../../_utils/helper';
+import { OVirtualList } from '../index';
+import '../style';
+
+const list = ref(
+  new Array(50).fill(1).map((_, idx) => ({
+    id: uniqueId(),
+    label: `${idx + 1}`,
+    height: Math.floor(Math.random() * 80 + 40),
+  }))
+);
+
+const onRenderChange = (start: number, end: number) => {
+  console.log(start, end);
+
+  if (start <= 5) {
+    const n = new Array(10).fill(1).map((_, idx) => ({
+      id: uniqueId(),
+      label: `add${idx + 1}`,
+      height: Math.floor(Math.random() * 80 + 40),
+    }));
+    list.value = n.concat(list.value);
+  } else if (start >= list.value.length - 5) {
+    const n = new Array(10).fill(1).map((_, idx) => ({
+      id: uniqueId(),
+      label: `add${idx + 1}`,
+      height: Math.floor(Math.random() * 80 + 40),
+    }));
+    list.value = list.value.concat(n);
+  }
+};
+</script>
+<template>
+  <h4>动态追加数据（支持头部或尾部追加数据）</h4>
+  <div>
+    <h5>【数据添加id】根据滚动显示的位置，动态增加数据（向上滚动头部添加数据，向下滚动尾部追加数据）</h5>
+    <OVirtualList class="container" :list="list" :default-start-index="10" :item-size="80" @renderChange="onRenderChange">
+      <template #default="{ item, index }">
+        <div :key="item.label" class="section" :class="`item-${index + 1}`">
+          <span>Row:</span> <span>{{ item.label }}</span
+          >------<span>Height:</span> <span>80px</span>
+        </div>
+      </template>
+    </OVirtualList>
+  </div>
+</template>
+<style lang="scss" scoped>
+.container {
+  width: 400px;
+  height: 300px;
+  border: 2px solid rgb(111, 45, 234);
+  box-sizing: border-box;
+  display: flex;
+}
+
+section > div {
+  flex: 0 1 30%;
+}
+.section {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+@for $i from 1 through 100 {
+  .item-#{$i} {
+    background-color: rgba(random(255), random(255), random(255), 1);
+  }
+}
+</style>
diff --git a/packages/opendesign/src/virtual-list/types.ts b/packages/opendesign/src/virtual-list/types.ts
index 4923c403..d498b280 100644
--- a/packages/opendesign/src/virtual-list/types.ts
+++ b/packages/opendesign/src/virtual-list/types.ts
@@ -7,7 +7,7 @@ import { BaseScrollerPropsT } from '../scrollbar';
 
 export const virtualListProps = {
   /**
-   * 列表数据
+   * 列表数据，如果数据存在动态追加，需要每一项需包含唯一ID
    */
   list: {
     type: Array<any>,
@@ -20,6 +20,13 @@ export const virtualListProps = {
   itemSize: {
     type: Number,
   },
+  /**
+   * 不定高时，每一项的默认高度
+   */
+  defaultItemSize: {
+    type: Number,
+    default: 80,
+  },
   /**
    * 默认滚动到第几项
    */
-- 
Gitee


From 903ef63702c2c1b9aea1744539bf947eb53e4d43 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 11 Oct 2024 11:09:44 +0800
Subject: [PATCH 2/8] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/ReleaesNote.md | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/docs/ReleaesNote.md b/packages/docs/ReleaesNote.md
index 77c1e06d..779e53a5 100644
--- a/packages/docs/ReleaesNote.md
+++ b/packages/docs/ReleaesNote.md
@@ -122,7 +122,28 @@
 1. [Textarea] 解决 textarea placeholder 文字颜色不正确的问题
 2. [Option] 修复禁用状态时，hover 样式错误问题
 
-TODO
+# [open-scripts] 0.0.20
+
+- fix
+
+1. 修复图标路径兼容性、文件名转变量名兼容性、不同实例同 id 的相互影响
+
+# 0.0.70 ...
+
+- feat
+
+1. [VirtualList] 虚拟列表支持数据动态追加（头部/尾部）；新增`renderChange`事件；新增 defaultItemSize 字段，支持不定高时，设置项默认高度
+2. [message] 支持指定 message 显示到指定目标元素周围
+3. 增加木兰许可证
+
+- fix
+
+1. 修复部分文本错误
+2. [Scrollbar] 修复 showType 为 hover 且使用 useScrollbar 时，hover 不显示滚动条问题;
+
+---
+
+# TODO
 
 1. pagination 支持 layout 控制顺序
 2. carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo
-- 
Gitee


From 835ffe0a359da0b81ec8678a2eedbee1b9f0d885 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 11 Oct 2024 15:20:38 +0800
Subject: [PATCH 3/8] =?UTF-8?q?docs=EF=BC=9A=20=E5=B0=86scripts=E5=92=8Cop?=
 =?UTF-8?q?endesign=E7=9A=84=E5=8F=91=E5=B8=83=E6=97=A5=E5=BF=97=E5=88=86?=
 =?UTF-8?q?=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...leaesNote.md => ReleaesNote.opendesign.md} | 197 ++++++++----------
 packages/docs/ReleaesNote.scripts.md          |  18 ++
 2 files changed, 108 insertions(+), 107 deletions(-)
 rename packages/docs/{ReleaesNote.md => ReleaesNote.opendesign.md} (91%)
 create mode 100644 packages/docs/ReleaesNote.scripts.md

diff --git a/packages/docs/ReleaesNote.md b/packages/docs/ReleaesNote.opendesign.md
similarity index 91%
rename from packages/docs/ReleaesNote.md
rename to packages/docs/ReleaesNote.opendesign.md
index 779e53a5..c2a5ae6f 100644
--- a/packages/docs/ReleaesNote.md
+++ b/packages/docs/ReleaesNote.opendesign.md
@@ -1,69 +1,66 @@
-# 0.0.26
-
-1. Card 去掉 titleMaxRow、detailMaxRow 属性，使用 css 变量设置： --card-title-max-row，--card-detail-max-row
-2. Figure 去掉 position、fit 属性，使用 css 变量设置：--figure-fit --figure-position
-
-# 0.0.50 - 0620
+# TODO
 
-1. 优化 clickoutside，支持 touch，popover 支持移动端 touch 触发隐藏
-2. popup 宽度限制改为相对于屏幕
-3. 修复上传组件重复选择同一文件，不触发 change 事件问题
-4. invalid 属性从 input-number 组件移到 input 组件
+1. pagination 支持 layout 控制顺序
+2. carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo
+3. 级联重构
+4. virtualList 整改为 use-virtual-list
+5. select 重构，通过 options 传列表数据
+6. table 支持虚拟滚动，支持固定列，固定行
+7. Tab 重构成分离 OTabs：OTabNav\OTabPane ?
 
-# 0.0.51 -
+---
 
-1. 修复 layer 组件在卸载时，未移除挂载目标的相关类；
-2. 表格插槽支持自定义 td、th 内容；
-3. 修复 pagination 跳转输入框能输入小数问题；
-4. upload 增加 beforeSelect 入参
-5. 浮层蒙层共用，解决闪烁问题 todo
+# 0.0.70 ...
 
-# 0.0.53
+- feat
 
-# 0.0.56
+1. [VirtualList] 虚拟列表支持数据动态追加（头部/尾部）；新增`renderChange`事件；新增 defaultItemSize 字段，支持不定高时，设置项默认高度
+2. [message] 支持指定 message 显示到指定目标元素周围
+3. 增加木兰许可证
 
-1. collapse&menu 展开时高度设置为 auto；
-2. toggle 支持单独使用；
-3. 解决 dialog 移动端居中问题；
-4. 取消 dropdown 内容左右边距；
-5. 解决 cascader 滚动条重叠问题
+- fix
 
-# 0.0.57
+1. 修复部分文本错误
+2. [Scrollbar] 修复 showType 为 hover 且使用 useScrollbar 时，hover 不显示滚动条问题;
 
-1. figure 支持视频封面、标题
-2. dialog 新增支持设置移动端半屏
+# 0.0.69 2024-09-24
 
-# 0.0.58
+- feat
 
-1. figure 刷新播放图标
+1. [Figure] 为 figure 增加 load 事件
+2. [Scrollbar] 支持设置 thumb 的最小尺寸
+3. [VirtualList] 新增虚拟列表，支持定高、动态高度,
+4. [Select] 增加虚拟列表的示例、滚动条参数更改 scroller -> scrollbar
+5. [Pagination] 支持虚拟列表展示下拉的页码数
+6. [Dialog] 滚动条参数更改 scroller -> scrollbar, 重构弹窗间距样式，增加文本颜色变量（--dlg-color, --dlg-header-color）;
+7. [Popup] pad & phone 支持 trigger： 'none', 'click', 'click-outclick'
+8. [Carousel] 轮播组件悬浮暂停时将暂停事件抛出
 
-# 0.0.61
+- fix
 
-1. [table] 插槽更名：表头 th_xx; 表体 td_xx;
-2. 移除废弃的 flex 组件
-3. 升级 vue 到 3.4
-4. [use-theme] 支持 SSR
-5. [form] 修复提交按钮不触发校验问题
-6. [input] 解决输入框自动填充时背景颜色不正确的问题
+1. [Textarea] 解决 textarea placeholder 文字颜色不正确的问题
+2. [Option] 修复禁用状态时，hover 样式错误问题
 
-# 0.0.62
+# 0.0.68 2024-08-12
 
-1. [Carousel] 支持配置 pauseOnHover，控制是否在鼠标 hover 时，自动轮播停止，移除时恢复轮播
-2. [select] 支持下拉分组
-3. [upload] 支持 v-model 受控模式
-4. [scroller] 支持 css 变量控制滚动槽位置
+1. [Table] 插槽 head 更名为 header;
+2. [pagination] 支持 total 插槽;
+3. [scroller] 修复在设置 max-height 时无法滚动问题;
+4. [textarea] 增加插槽 prepend、append，修复自动尺寸 bug；滚动使用 scroller；
+5. [input/textarea] 修复样式未导出问题，组件光标从 pointer 更改为 text
+6. [config-provider] 增加全局配置项 link，可用于实际场景中，适配 router-link 等; 增加 tag 属性，支持自定义标签
+7. [link] 增加 tag 属性，支持自定义标签
+8. [form] 修复 input 事件不触发表单校验，涉及组件 input/textarea/inputNumber
+9. [Tab] 新增 headerClass 类，支持自定义头部样式，比如 sticky;
 
-# 0.0.63
+# 0.0.67
 
-1. 支持组件国际化(en\cn)
-2. 优化颜色变量
-3. [select|input|textarea] 优化交互样式
-4. [select] 修复无法默认选中 value 为 0 的 option
-5. [upload] 移除 btnProps 属性
+1. [input] 重构 input，支持 autowidth，maxlength、minlength，无效值判断接口从 checkValid 更改为 validate，props 移除 parse
+2. [textarea] 重构 textarea，长度限制提示支持国际化
 
-# 0.0.64
+# 0.0.66
 
-1. [select] 修复多选时 v-model 失效问题 #I9IJT2
+1. [scrollbar] 重构 scroller 及 scrollbar, 支持 hook useScrollbar、指令 vScrollbar
 
 # 0.0.65
 
@@ -74,81 +71,67 @@
 5. 更新全局 token 变量值
 6. 刷新部分英文文案
 
-# 0.0.66
-
-1. [scrollbar] 重构 scroller 及 scrollbar, 支持 hook useScrollbar、指令 vScrollbar
-
-# 0.0.67
-
-1. [input] 重构 input，支持 autowidth，maxlength、minlength，无效值判断接口从 checkValid 更改为 validate，props 移除 parse
-2. [textarea] 重构 textarea，长度限制提示支持国际化
-
-# [open-scripts] 0.0.18
-
-1. 解决图标服务端渲染，无法绑定事件问题；
-2. svgo 配置增加默认 prefixIds，用于解决老版本对 svg 图标 id 不能正常使用问题
-
-# [open-scripts] 0.0.19
+# 0.0.64
 
-1. 修复 svg 文件名因空格、目录嵌套导致生成的 svg 组件被重名替换问题。
+1. [select] 修复多选时 v-model 失效问题 #I9IJT2
 
-# 0.0.68
+# 0.0.63
 
-1. [Table] 插槽 head 更名为 header;
-2. [pagination] 支持 total 插槽;
-3. [scroller] 修复在设置 max-height 时无法滚动问题;
-4. [textarea] 增加插槽 prepend、append，修复自动尺寸 bug；滚动使用 scroller；
-5. [input/textarea] 修复样式未导出问题，组件光标从 pointer 更改为 text
-6. [config-provider] 增加全局配置项 link，可用于实际场景中，适配 router-link 等; 增加 tag 属性，支持自定义标签
-7. [link] 增加 tag 属性，支持自定义标签
-8. [form] 修复 input 事件不触发表单校验，涉及组件 input/textarea/inputNumber
-9. [Tab] 新增 headerClass 类，支持自定义头部样式，比如 sticky;
+1. 支持组件国际化(en\cn)
+2. 优化颜色变量
+3. [select|input|textarea] 优化交互样式
+4. [select] 修复无法默认选中 value 为 0 的 option
+5. [upload] 移除 btnProps 属性
 
-# 0.0.69
+# 0.0.62
 
-- feat
+1. [Carousel] 支持配置 pauseOnHover，控制是否在鼠标 hover 时，自动轮播停止，移除时恢复轮播
+2. [select] 支持下拉分组
+3. [upload] 支持 v-model 受控模式
+4. [scroller] 支持 css 变量控制滚动槽位置
 
-1. [Figure] 为 figure 增加 load 事件
-2. [Scrollbar] 支持设置 thumb 的最小尺寸
-3. [VirtualList] 新增虚拟列表，支持定高、动态高度,
-4. [Select] 增加虚拟列表的示例、滚动条参数更改 scroller -> scrollbar
-5. [Pagination] 支持虚拟列表展示下拉的页码数
-6. [Dialog] 滚动条参数更改 scroller -> scrollbar, 重构弹窗间距样式，增加文本颜色变量（--dlg-color, --dlg-header-color）;
-7. [Popup] pad & phone 支持 trigger： 'none', 'click', 'click-outclick'
-8. [Carousel] 轮播组件悬浮暂停时将暂停事件抛出
+# 0.0.61
 
-- fix
+1. [table] 插槽更名：表头 th_xx; 表体 td_xx;
+2. 移除废弃的 flex 组件
+3. 升级 vue 到 3.4
+4. [use-theme] 支持 SSR
+5. [form] 修复提交按钮不触发校验问题
+6. [input] 解决输入框自动填充时背景颜色不正确的问题
 
-1. [Textarea] 解决 textarea placeholder 文字颜色不正确的问题
-2. [Option] 修复禁用状态时，hover 样式错误问题
+# 0.0.58
 
-# [open-scripts] 0.0.20
+1. figure 刷新播放图标
 
-- fix
+# 0.0.57
 
-1. 修复图标路径兼容性、文件名转变量名兼容性、不同实例同 id 的相互影响
+1. figure 支持视频封面、标题
+2. dialog 新增支持设置移动端半屏
 
-# 0.0.70 ...
+# 0.0.56
 
-- feat
+1. collapse&menu 展开时高度设置为 auto；
+2. toggle 支持单独使用；
+3. 解决 dialog 移动端居中问题；
+4. 取消 dropdown 内容左右边距；
+5. 解决 cascader 滚动条重叠问题
 
-1. [VirtualList] 虚拟列表支持数据动态追加（头部/尾部）；新增`renderChange`事件；新增 defaultItemSize 字段，支持不定高时，设置项默认高度
-2. [message] 支持指定 message 显示到指定目标元素周围
-3. 增加木兰许可证
+# 0.0.51 -
 
-- fix
+1. 修复 layer 组件在卸载时，未移除挂载目标的相关类；
+2. 表格插槽支持自定义 td、th 内容；
+3. 修复 pagination 跳转输入框能输入小数问题；
+4. upload 增加 beforeSelect 入参
+5. 浮层蒙层共用，解决闪烁问题 todo
 
-1. 修复部分文本错误
-2. [Scrollbar] 修复 showType 为 hover 且使用 useScrollbar 时，hover 不显示滚动条问题;
+# 0.0.50 - 0620
 
----
+1. 优化 clickoutside，支持 touch，popover 支持移动端 touch 触发隐藏
+2. popup 宽度限制改为相对于屏幕
+3. 修复上传组件重复选择同一文件，不触发 change 事件问题
+4. invalid 属性从 input-number 组件移到 input 组件
 
-# TODO
+# 0.0.26
 
-1. pagination 支持 layout 控制顺序
-2. carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo
-3. 级联重构
-4. virtualList 整改为 use-virtual-list
-5. select 重构，通过 options 传列表数据
-6. table 支持虚拟滚动，支持固定列，固定行
-7. Tab 重构成分离 OTabs：OTabNav\OTabPane ?
+1. Card 去掉 titleMaxRow、detailMaxRow 属性，使用 css 变量设置： --card-title-max-row，--card-detail-max-row
+2. Figure 去掉 position、fit 属性，使用 css 变量设置：--figure-fit --figure-position
diff --git a/packages/docs/ReleaesNote.scripts.md b/packages/docs/ReleaesNote.scripts.md
new file mode 100644
index 00000000..9a250987
--- /dev/null
+++ b/packages/docs/ReleaesNote.scripts.md
@@ -0,0 +1,18 @@
+# [open-scripts]
+
+# 0.0.18
+
+1. 解决图标服务端渲染，无法绑定事件问题；
+2. svgo 配置增加默认 prefixIds，用于解决老版本对 svg 图标 id 不能正常使用问题
+
+# 0.0.19 2024-08-12
+
+- fix
+
+1. 修复 svg 文件名因空格、目录嵌套导致生成的 svg 组件被重名替换问题。
+
+# 0.0.20 2024-10-10
+
+- fix
+
+1. 修复图标路径兼容性、文件名转变量名兼容性、不同实例同 id 的相互影响
-- 
Gitee


From 92f18206ad56957657ba36bdc36f7dcc764cb466 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sat, 17 Aug 2024 20:41:13 +0800
Subject: [PATCH 4/8] =?UTF-8?q?chore:=20=E7=A7=BB=E9=99=A4input=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/_components/in-box/InBox.vue   | 10 +---------
 .../opendesign/src/_components/in-box/style/index.scss | 10 ----------
 packages/opendesign/src/_components/in-box/types.ts    |  6 ------
 3 files changed, 1 insertion(+), 25 deletions(-)

diff --git a/packages/opendesign/src/_components/in-box/InBox.vue b/packages/opendesign/src/_components/in-box/InBox.vue
index 04db1ac1..b7932746 100644
--- a/packages/opendesign/src/_components/in-box/InBox.vue
+++ b/packages/opendesign/src/_components/in-box/InBox.vue
@@ -11,15 +11,7 @@ const round = getRoundClass(props, '_box');
 <template>
   <label
     class="o_box"
-    :class="[
-      `o_box-${props.color}`,
-      `o_box-${props.variant}`,
-      `o_box-${props.size || defaultSize}`,
-      {
-        'o_box-input': props.input,
-      },
-      round.class.value,
-    ]"
+    :class="[`o_box-${props.color}`, `o_box-${props.variant}`, `o_box-${props.size || defaultSize}`, round.class.value]"
     :style="round.style.value"
     :for="props.for"
   >
diff --git a/packages/opendesign/src/_components/in-box/style/index.scss b/packages/opendesign/src/_components/in-box/style/index.scss
index 6ea952fb..c6abe220 100644
--- a/packages/opendesign/src/_components/in-box/style/index.scss
+++ b/packages/opendesign/src/_components/in-box/style/index.scss
@@ -109,13 +109,3 @@
     border-left-width: 0;
   }
 }
-
-.o_box-input {
-  --input-color: var(--o-color-info1);
-  --input-color-disabled: var(--o-color-info4);
-  --input-placeholder: var(--o-color-info4);
-
-  --input-icon-color: var(--o-color-info3);
-  --input-icon-color-hover: var(--o-color-info2);
-  --input-icon-color-disabled: var(--o-color-info4);
-}
diff --git a/packages/opendesign/src/_components/in-box/types.ts b/packages/opendesign/src/_components/in-box/types.ts
index c85374c3..2b7d6eb2 100644
--- a/packages/opendesign/src/_components/in-box/types.ts
+++ b/packages/opendesign/src/_components/in-box/types.ts
@@ -52,12 +52,6 @@ export const inBoxProps = {
   for: {
     type: String,
   },
-  /**
-   * 是否只读
-   */
-  input: {
-    type: Boolean,
-  },
 };
 
 export type InBoxProps = ExtractPropTypes<typeof inBoxProps>;
-- 
Gitee


From 026bfc624d1186adf6f6f6f0fc6f444c33c490c1 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Sun, 18 Aug 2024 17:22:26 +0800
Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20useInput=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E4=B8=8D=E6=94=AF=E6=8C=81=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=AF=B9=E5=BA=94=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E6=8E=A5=E5=8F=A3updateValue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/_components/in-input/InInput.vue      | 11 ++++++-----
 .../opendesign/src/_headless/use-input.ts     | 19 ++++++++++++++-----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/opendesign/src/_components/in-input/InInput.vue b/packages/opendesign/src/_components/in-input/InInput.vue
index c4d4a973..c66062f6 100644
--- a/packages/opendesign/src/_components/in-input/InInput.vue
+++ b/packages/opendesign/src/_components/in-input/InInput.vue
@@ -25,8 +25,9 @@ const { t } = useI18n();
 const { disabled, type, format, validate } = toRefs(props);
 
 const {
-  currentValue,
+  realValue,
   displayValue,
+  updateValue,
   clearValue: clear,
   isValid,
   handleBlur,
@@ -68,8 +69,8 @@ watch(
   () => props.modelValue,
   (val) => {
     const value = formateToString(val);
-    if (value !== currentValue.value) {
-      currentValue.value = value;
+    if (value !== realValue.value) {
+      updateValue(value);
     }
   }
 );
@@ -91,9 +92,9 @@ onMounted(() => {
 // 计算当前长度
 const currentLength = computed(() => {
   if (isFunction(props.getLength)) {
-    return props.getLength(currentValue.value);
+    return props.getLength(realValue.value);
   }
-  return currentValue.value.length ?? 0;
+  return realValue.value.length ?? 0;
 });
 // 是否超出最大长度限制
 const isOutLengthLimit = computed(() => {
diff --git a/packages/opendesign/src/_headless/use-input.ts b/packages/opendesign/src/_headless/use-input.ts
index 7b67b87d..468c7339 100644
--- a/packages/opendesign/src/_headless/use-input.ts
+++ b/packages/opendesign/src/_headless/use-input.ts
@@ -44,6 +44,9 @@ export function useInput(options: InputOptionT) {
   // 记录上一次有效输入值
   let lastValidValue: string = '';
 
+  /**
+   * 校验是否值有效，如果值为空，始终有效
+   */
   const doValidate = () => {
     isValid.value = currentValue.value === '' ? true : validateFn.value(currentValue.value);
     return isValid.value;
@@ -58,7 +61,7 @@ export function useInput(options: InputOptionT) {
       lastValidValue = currentValue.value;
     }
 
-    if (!isFocus.value || !format?.value) {
+    if (!(format?.value && isFocus.value)) {
       displayValue.value = formatFn.value(currentValue.value);
     }
   });
@@ -144,10 +147,11 @@ export function useInput(options: InputOptionT) {
     const keyCode = e.key || e.code;
     if (!composition.isComposing.value && keyCode === Enter.key) {
       emitValidUpdateValue();
-      emitChange();
 
       displayValue.value = currentValue.value;
 
+      emitChange();
+
       emits('pressEnter', e);
     }
   };
@@ -170,10 +174,15 @@ export function useInput(options: InputOptionT) {
     clearValue();
   };
 
+  const updateValue = (val: string) => {
+    currentValue.value = val;
+    lastValue.value = currentValue.value;
+  };
+
   return {
-    currentValue,
-    lastValue,
-    displayValue,
+    realValue: computed(() => currentValue.value),
+    displayValue: computed(() => displayValue.value),
+    updateValue,
     isValid,
     inputEl,
     clearValue,
-- 
Gitee


From cbc2ab19fec3db34f89b1e984aa334a915d50ff7 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Fri, 11 Oct 2024 15:53:34 +0800
Subject: [PATCH 6/8] =?UTF-8?q?refactor(InTextarea):=20=E9=80=82=E9=85=8Du?=
 =?UTF-8?q?seInput=E5=AF=BC=E5=87=BA=E7=9A=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/_components/in-textarea/InTextarea.vue        | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/opendesign/src/_components/in-textarea/InTextarea.vue b/packages/opendesign/src/_components/in-textarea/InTextarea.vue
index b6588c45..c0de7aec 100644
--- a/packages/opendesign/src/_components/in-textarea/InTextarea.vue
+++ b/packages/opendesign/src/_components/in-textarea/InTextarea.vue
@@ -26,8 +26,9 @@ const { t } = useI18n();
 const { format, validate } = toRefs(props);
 
 const {
-  currentValue,
+  realValue,
   displayValue,
+  updateValue,
   clearValue: clear,
   isValid,
   handleBlur,
@@ -65,8 +66,8 @@ watch(
   () => props.modelValue,
   (val) => {
     const value = formateToString(val);
-    if (value !== currentValue.value) {
-      currentValue.value = value;
+    if (value !== realValue.value) {
+      updateValue(value);
     }
   }
 );
@@ -88,9 +89,9 @@ onMounted(() => {
 // 计算当前长度
 const currentLength = computed(() => {
   if (isFunction(props.getLength)) {
-    return props.getLength(currentValue.value);
+    return props.getLength(realValue.value);
   }
-  return currentValue.value.length ?? 0;
+  return realValue.value.length ?? 0;
 });
 // 是否超出最大长度限制
 const isOutLengthLimit = computed(() => {
-- 
Gitee


From 45dc817d34771d3bd2372eb0c9f16d44bdced99c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=A6=E9=82=A6=E9=82=A6=E9=82=A6?= <15622356989@163.com>
Date: Thu, 10 Oct 2024 18:54:44 +0800
Subject: [PATCH 7/8] update license

---
 LICENSE.md                     | 259 ++++++++++++++++++---------------
 packages/opendesign/LICENSE.md | 194 ++++++++++++++++++++++++
 packages/scripts/LICENSE.md    | 194 ++++++++++++++++++++++++
 3 files changed, 529 insertions(+), 118 deletions(-)
 create mode 100644 packages/opendesign/LICENSE.md
 create mode 100644 packages/scripts/LICENSE.md

diff --git a/LICENSE.md b/LICENSE.md
index c5f25be3..f63f5a9c 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,171 +1,194 @@
-# Creative Commons Attribution-ShareAlike 4.0 International
+木兰宽松许可证，第2版
 
-Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible.
+木兰宽松许可证，第2版
 
-### Using Creative Commons Public Licenses
+2020年1月 http://license.coscl.org.cn/MulanPSL2
 
-Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses.
+您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束：
 
-* __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors).
+0.   定义
 
-* __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees).
+“软件” 是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。
 
-## Creative Commons Attribution-ShareAlike 4.0 International Public License
+“贡献” 是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。
 
-By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
+“贡献者” 是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。
 
-### Section 1 – Definitions.
+“法人实体” 是指提交贡献的机构及其“关联实体”。
 
-a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
+“关联实体” 是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是
+指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。
 
-b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
+1.   授予版权许可
 
-c. __BY-SA Compatible License__ means a license listed at [creativecommons.org/compatiblelicenses](http://creativecommons.org/compatiblelicenses), approved by Creative Commons as essentially the equivalent of this Public License.
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可
+以复制、使用、修改、分发其“贡献”，不论修改与否。
 
-d. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
+2.   授予专利许可
 
-e. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定
+撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡
+献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软
+件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“
+关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或
+其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权
+行动之日终止。
 
-f. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
+3.   无商标许可
 
-g. __License Elements__ means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution and ShareAlike.
+“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定
+的声明义务而必须使用除外。
 
-h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
+4.   分发限制
 
-i. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
+您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“
+本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。
 
-j. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
+5.   免责声明与责任限制
 
-k. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
+“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对
+任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于
+何种法律理论，即使其曾被建议有此种损失的可能性。
 
-l. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
+6.   语言
 
-m. __You__ means the individual or entity exercising the Licensed Rights under this Public License. __Your__ has a corresponding meaning.
+“本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文
+版为准。
 
-### Section 2 – Scope.
+条款结束
 
-a. ___License grant.___
+如何将木兰宽松许可证，第2版，应用到您的软件
 
-   1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
+如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：
 
-       A. reproduce and Share the Licensed Material, in whole or in part; and
+1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；
 
-       B. produce, reproduce, and Share Adapted Material.
+2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；
 
-   2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
+3， 请将如下声明文本放入每个源文件的头部注释中。
 
-   3. __Term.__ The term of this Public License is specified in Section 6(a).
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
 
-   4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
+Mulan Permissive Software License，Version 2
 
-   5. __Downstream recipients.__
+Mulan Permissive Software License，Version 2 (Mulan PSL v2)
 
-       A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
+January 2020 http://license.coscl.org.cn/MulanPSL2
 
-       B. __Additional offer from the Licensor – Adapted Material.__ Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply.
+Your reproduction, use, modification and distribution of the Software shall
+be subject to Mulan PSL v2 (this License) with the following terms and
+conditions:
 
-       C. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
+0. Definition
 
-   6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
+Software means the program and related documents which are licensed under
+this License and comprise all Contribution(s).
 
-b. ___Other rights.___
+Contribution means the copyrightable work licensed by a particular
+Contributor under this License.
 
-   1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
+Contributor means the Individual or Legal Entity who licenses its
+copyrightable work under this License.
 
-   2. Patent and trademark rights are not licensed under this Public License.
+Legal Entity means the entity making a Contribution and all its
+Affiliates.
 
-   3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties.
+Affiliates means entities that control, are controlled by, or are under
+common control with the acting entity under this License, ‘control’ means
+direct or indirect ownership of at least fifty percent (50%) of the voting
+power, capital or other securities of controlled or commonly controlled
+entity.
 
-### Section 3 – License Conditions.
+1. Grant of Copyright License
 
-Your exercise of the Licensed Rights is expressly made subject to the following conditions.
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable copyright license to reproduce, use, modify, or distribute its
+Contribution, with modification or not.
 
-a. ___Attribution.___
+2. Grant of Patent License
 
-   1. If You Share the Licensed Material (including in modified form), You must:
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable (except for revocation under this Section) patent license to
+make, have made, use, offer for sale, sell, import or otherwise transfer its
+Contribution, where such patent license is only limited to the patent claims
+owned or controlled by such Contributor now or in future which will be
+necessarily infringed by its Contribution alone, or by combination of the
+Contribution with the Software to which the Contribution was contributed.
+The patent license shall not apply to any modification of the Contribution,
+and any other combination which includes the Contribution. If you or your
+Affiliates directly or indirectly institute patent litigation (including a
+cross claim or counterclaim in a litigation) or other patent enforcement
+activities against any individual or entity by alleging that the Software or
+any Contribution in it infringes patents, then any patent license granted to
+you under this License for the Software shall terminate as of the date such
+litigation or activity is filed or taken.
 
-       A. retain the following if it is supplied by the Licensor with the Licensed Material:
+3. No Trademark License
 
-         i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
+No trademark license is granted to use the trade names, trademarks, service
+marks, or product names of Contributor, except as required to fulfill notice
+requirements in section 4.
 
-         ii. a copyright notice;
+4. Distribution Restriction
 
-         iii. a notice that refers to this Public License;
+You may distribute the Software in any medium with or without modification,
+whether in source or executable forms, provided that you provide recipients
+with a copy of this License and retain copyright, patent, trademark and
+disclaimer statements in the Software.
 
-         iv. a notice that refers to the disclaimer of warranties;
+5. Disclaimer of Warranty and Limitation of Liability
 
-         v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
+THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR
+COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT
+LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING
+FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO
+MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF
+THE POSSIBILITY OF SUCH DAMAGES.
 
-       B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
+6. Language
 
-       C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
+THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION
+AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF
+DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION
+SHALL PREVAIL.
+
+END OF THE TERMS AND CONDITIONS
+
+How to Apply the Mulan Permissive Software License，Version 2
+(Mulan PSL v2) to Your Software
+
+To apply the Mulan PSL v2 to your work, for easy identification by
+recipients, you are suggested to complete following three steps:
+
+i. Fill in the blanks in following statement, including insert your software
+name, the year of the first publication of your software, and your name
+identified as the copyright owner;
 
-   2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
+ii. Create a file named "LICENSE" which contains the whole context of this
+License in the first directory of your software package;
 
-   3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
+iii. Attach the statement to the appropriate annotated syntax at the
+beginning of each source file.
 
-b. ___ShareAlike.___
-
-In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply.
-
-1. The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-SA Compatible License.
-
-2. You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material.
-
-3. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply.
-
-### Section 4 – Sui Generis Database Rights.
-
-Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
-
-a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database;
-
-b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and
-
-c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
-
-For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
-
-### Section 5 – Disclaimer of Warranties and Limitation of Liability.
-
-a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__
-
-b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__
-
-c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
-
-### Section 6 – Term and Termination.
-
-a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
-
-b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
-
-   1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
-
-   2. upon express reinstatement by the Licensor.
-
-   For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
-
-c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
-
-d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
-
-### Section 7 – Other Terms and Conditions.
-
-a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
-
-b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
-
-### Section 8 – Interpretation.
-
-a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
-
-b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
-
-c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
-
-d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
-
-> Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” The text of the Creative Commons public licenses is dedicated to the public domain under the [CC0 Public Domain Dedication](https://creativecommons.org/publicdomain/zero/1.0/legalcode). Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses.
->
-> Creative Commons may be contacted at creativecommons.org.
\ No newline at end of file
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
diff --git a/packages/opendesign/LICENSE.md b/packages/opendesign/LICENSE.md
new file mode 100644
index 00000000..f63f5a9c
--- /dev/null
+++ b/packages/opendesign/LICENSE.md
@@ -0,0 +1,194 @@
+木兰宽松许可证，第2版
+
+木兰宽松许可证，第2版
+
+2020年1月 http://license.coscl.org.cn/MulanPSL2
+
+您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束：
+
+0.   定义
+
+“软件” 是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。
+
+“贡献” 是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。
+
+“贡献者” 是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。
+
+“法人实体” 是指提交贡献的机构及其“关联实体”。
+
+“关联实体” 是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是
+指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。
+
+1.   授予版权许可
+
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可
+以复制、使用、修改、分发其“贡献”，不论修改与否。
+
+2.   授予专利许可
+
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定
+撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡
+献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软
+件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“
+关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或
+其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权
+行动之日终止。
+
+3.   无商标许可
+
+“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定
+的声明义务而必须使用除外。
+
+4.   分发限制
+
+您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“
+本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。
+
+5.   免责声明与责任限制
+
+“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对
+任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于
+何种法律理论，即使其曾被建议有此种损失的可能性。
+
+6.   语言
+
+“本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文
+版为准。
+
+条款结束
+
+如何将木兰宽松许可证，第2版，应用到您的软件
+
+如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：
+
+1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；
+
+2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；
+
+3， 请将如下声明文本放入每个源文件的头部注释中。
+
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
+
+Mulan Permissive Software License，Version 2
+
+Mulan Permissive Software License，Version 2 (Mulan PSL v2)
+
+January 2020 http://license.coscl.org.cn/MulanPSL2
+
+Your reproduction, use, modification and distribution of the Software shall
+be subject to Mulan PSL v2 (this License) with the following terms and
+conditions:
+
+0. Definition
+
+Software means the program and related documents which are licensed under
+this License and comprise all Contribution(s).
+
+Contribution means the copyrightable work licensed by a particular
+Contributor under this License.
+
+Contributor means the Individual or Legal Entity who licenses its
+copyrightable work under this License.
+
+Legal Entity means the entity making a Contribution and all its
+Affiliates.
+
+Affiliates means entities that control, are controlled by, or are under
+common control with the acting entity under this License, ‘control’ means
+direct or indirect ownership of at least fifty percent (50%) of the voting
+power, capital or other securities of controlled or commonly controlled
+entity.
+
+1. Grant of Copyright License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable copyright license to reproduce, use, modify, or distribute its
+Contribution, with modification or not.
+
+2. Grant of Patent License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable (except for revocation under this Section) patent license to
+make, have made, use, offer for sale, sell, import or otherwise transfer its
+Contribution, where such patent license is only limited to the patent claims
+owned or controlled by such Contributor now or in future which will be
+necessarily infringed by its Contribution alone, or by combination of the
+Contribution with the Software to which the Contribution was contributed.
+The patent license shall not apply to any modification of the Contribution,
+and any other combination which includes the Contribution. If you or your
+Affiliates directly or indirectly institute patent litigation (including a
+cross claim or counterclaim in a litigation) or other patent enforcement
+activities against any individual or entity by alleging that the Software or
+any Contribution in it infringes patents, then any patent license granted to
+you under this License for the Software shall terminate as of the date such
+litigation or activity is filed or taken.
+
+3. No Trademark License
+
+No trademark license is granted to use the trade names, trademarks, service
+marks, or product names of Contributor, except as required to fulfill notice
+requirements in section 4.
+
+4. Distribution Restriction
+
+You may distribute the Software in any medium with or without modification,
+whether in source or executable forms, provided that you provide recipients
+with a copy of this License and retain copyright, patent, trademark and
+disclaimer statements in the Software.
+
+5. Disclaimer of Warranty and Limitation of Liability
+
+THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR
+COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT
+LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING
+FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO
+MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF
+THE POSSIBILITY OF SUCH DAMAGES.
+
+6. Language
+
+THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION
+AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF
+DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION
+SHALL PREVAIL.
+
+END OF THE TERMS AND CONDITIONS
+
+How to Apply the Mulan Permissive Software License，Version 2
+(Mulan PSL v2) to Your Software
+
+To apply the Mulan PSL v2 to your work, for easy identification by
+recipients, you are suggested to complete following three steps:
+
+i. Fill in the blanks in following statement, including insert your software
+name, the year of the first publication of your software, and your name
+identified as the copyright owner;
+
+ii. Create a file named "LICENSE" which contains the whole context of this
+License in the first directory of your software package;
+
+iii. Attach the statement to the appropriate annotated syntax at the
+beginning of each source file.
+
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
diff --git a/packages/scripts/LICENSE.md b/packages/scripts/LICENSE.md
new file mode 100644
index 00000000..f63f5a9c
--- /dev/null
+++ b/packages/scripts/LICENSE.md
@@ -0,0 +1,194 @@
+木兰宽松许可证，第2版
+
+木兰宽松许可证，第2版
+
+2020年1月 http://license.coscl.org.cn/MulanPSL2
+
+您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束：
+
+0.   定义
+
+“软件” 是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。
+
+“贡献” 是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。
+
+“贡献者” 是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。
+
+“法人实体” 是指提交贡献的机构及其“关联实体”。
+
+“关联实体” 是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是
+指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。
+
+1.   授予版权许可
+
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可
+以复制、使用、修改、分发其“贡献”，不论修改与否。
+
+2.   授予专利许可
+
+每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定
+撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡
+献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软
+件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“
+关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或
+其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权
+行动之日终止。
+
+3.   无商标许可
+
+“本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定
+的声明义务而必须使用除外。
+
+4.   分发限制
+
+您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“
+本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。
+
+5.   免责声明与责任限制
+
+“软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对
+任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于
+何种法律理论，即使其曾被建议有此种损失的可能性。
+
+6.   语言
+
+“本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文
+版为准。
+
+条款结束
+
+如何将木兰宽松许可证，第2版，应用到您的软件
+
+如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步：
+
+1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字；
+
+2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中；
+
+3， 请将如下声明文本放入每个源文件的头部注释中。
+
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
+
+Mulan Permissive Software License，Version 2
+
+Mulan Permissive Software License，Version 2 (Mulan PSL v2)
+
+January 2020 http://license.coscl.org.cn/MulanPSL2
+
+Your reproduction, use, modification and distribution of the Software shall
+be subject to Mulan PSL v2 (this License) with the following terms and
+conditions:
+
+0. Definition
+
+Software means the program and related documents which are licensed under
+this License and comprise all Contribution(s).
+
+Contribution means the copyrightable work licensed by a particular
+Contributor under this License.
+
+Contributor means the Individual or Legal Entity who licenses its
+copyrightable work under this License.
+
+Legal Entity means the entity making a Contribution and all its
+Affiliates.
+
+Affiliates means entities that control, are controlled by, or are under
+common control with the acting entity under this License, ‘control’ means
+direct or indirect ownership of at least fifty percent (50%) of the voting
+power, capital or other securities of controlled or commonly controlled
+entity.
+
+1. Grant of Copyright License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable copyright license to reproduce, use, modify, or distribute its
+Contribution, with modification or not.
+
+2. Grant of Patent License
+
+Subject to the terms and conditions of this License, each Contributor hereby
+grants to you a perpetual, worldwide, royalty-free, non-exclusive,
+irrevocable (except for revocation under this Section) patent license to
+make, have made, use, offer for sale, sell, import or otherwise transfer its
+Contribution, where such patent license is only limited to the patent claims
+owned or controlled by such Contributor now or in future which will be
+necessarily infringed by its Contribution alone, or by combination of the
+Contribution with the Software to which the Contribution was contributed.
+The patent license shall not apply to any modification of the Contribution,
+and any other combination which includes the Contribution. If you or your
+Affiliates directly or indirectly institute patent litigation (including a
+cross claim or counterclaim in a litigation) or other patent enforcement
+activities against any individual or entity by alleging that the Software or
+any Contribution in it infringes patents, then any patent license granted to
+you under this License for the Software shall terminate as of the date such
+litigation or activity is filed or taken.
+
+3. No Trademark License
+
+No trademark license is granted to use the trade names, trademarks, service
+marks, or product names of Contributor, except as required to fulfill notice
+requirements in section 4.
+
+4. Distribution Restriction
+
+You may distribute the Software in any medium with or without modification,
+whether in source or executable forms, provided that you provide recipients
+with a copy of this License and retain copyright, patent, trademark and
+disclaimer statements in the Software.
+
+5. Disclaimer of Warranty and Limitation of Liability
+
+THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR
+COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT
+LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING
+FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO
+MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF
+THE POSSIBILITY OF SUCH DAMAGES.
+
+6. Language
+
+THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION
+AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF
+DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION
+SHALL PREVAIL.
+
+END OF THE TERMS AND CONDITIONS
+
+How to Apply the Mulan Permissive Software License，Version 2
+(Mulan PSL v2) to Your Software
+
+To apply the Mulan PSL v2 to your work, for easy identification by
+recipients, you are suggested to complete following three steps:
+
+i. Fill in the blanks in following statement, including insert your software
+name, the year of the first publication of your software, and your name
+identified as the copyright owner;
+
+ii. Create a file named "LICENSE" which contains the whole context of this
+License in the first directory of your software package;
+
+iii. Attach the statement to the appropriate annotated syntax at the
+beginning of each source file.
+
+Copyright (c) [Year] [name of copyright holder]
+[Software Name] is licensed under Mulan PSL v2.
+You can use this software according to the terms and conditions of the Mulan
+PSL v2.
+You may obtain a copy of Mulan PSL v2 at:
+         http://license.coscl.org.cn/MulanPSL2
+THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+See the Mulan PSL v2 for more details.
-- 
Gitee


From b7814bae56362ee898b7d22188509d8804f07575 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Mon, 14 Oct 2024 11:16:58 +0800
Subject: [PATCH 8/8] =?UTF-8?q?refactor(virtualList):=20API=20scrollToInde?=
 =?UTF-8?q?x=20=3D>=20scrollToView=EF=BC=8C=E5=AE=9A=E9=AB=98=E4=B8=8B?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E6=BB=9A=E5=8A=A8=E5=88=B0=E4=B8=8E?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A3=E6=8C=87=E5=AE=9A=E5=AF=B9=E9=BD=90=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E4=BD=8D=E7=BD=AE=EF=BC=8C=E4=B9=9F=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B9=B3=E6=BB=91=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../select/__demo__/SelectLargeOptions.vue    |  4 +-
 .../src/virtual-list/OVirtualList.vue         | 52 ++++++++++--
 .../src/virtual-list/__demo__/TheIndex.vue    |  2 +
 .../virtual-list/__demo__/VirtualListAPI.vue  | 84 +++++++++++++++++++
 4 files changed, 133 insertions(+), 9 deletions(-)
 create mode 100644 packages/opendesign/src/virtual-list/__demo__/VirtualListAPI.vue

diff --git a/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue b/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue
index 3bb4a62a..126991fb 100644
--- a/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue
+++ b/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue
@@ -9,12 +9,12 @@ const selectVal1 = ref('opt-4');
 const options = new Array(10000).fill(0).map((_, idx) => ({ label: `option-${idx}`, value: `opt-${idx}` }));
 const startIndex = computed(() => options.findIndex((item) => item.value == selectVal1.value));
 const isVisible = ref(false);
-const virtualList = ref<typeof OVirtualList>();
+const virtualList = ref<InstanceType<typeof OVirtualList>>();
 const onOptionsToggle = (visible: boolean) => {
   isVisible.value = visible;
   if (visible) {
     setTimeout(() => {
-      virtualList.value?.scrollToIndex(startIndex.value);
+      virtualList.value?.scrollToView(startIndex.value);
     }, 50);
   }
 };
diff --git a/packages/opendesign/src/virtual-list/OVirtualList.vue b/packages/opendesign/src/virtual-list/OVirtualList.vue
index e4e3671f..a5c2b1ff 100644
--- a/packages/opendesign/src/virtual-list/OVirtualList.vue
+++ b/packages/opendesign/src/virtual-list/OVirtualList.vue
@@ -146,14 +146,50 @@ const renderListStyle = computed(() => {
 let initialScroll = false;
 
 /**
- * 滚动到指定序号项
- * @param index
+ * 将指定项滚动到视口内，不定高场景下，可能存在滚动不准确
+ * @param index 指定项
+ * @param align 'start' | 'end' | 'center' | 'nearest' | number, 默认值'start'，不定高场景下，'end' | 'center'因高度不固定，可能存在滚动不准确
+ * @param behavior ScrollBehavior, 默认值 'instant'，不定高场景下，仅支持'instant'
  */
-const scrollToIndex = (index: number) => {
+const scrollToView = (index: number, align: 'start' | 'end' | 'center' | 'nearest' | number = 'start', behavior: ScrollBehavior = 'instant') => {
   if (!wrapperRef.value || index < 0 || index >= listMetaData.length) {
     return;
   }
-  wrapperRef.value.scrollTop = listMetaData[index].top;
+  const item = listMetaData[index];
+  const itemTop = item.top;
+
+  const cSize = containerSize.value.height;
+
+  // 计算最终对齐方式
+  let _align = align;
+  if (_align === 'nearest') {
+    const currScrollTop = wrapperRef.value.scrollTop;
+    if (currScrollTop > itemTop) {
+      _align = 'start';
+    } else if (currScrollTop + cSize < itemTop) {
+      _align = 'end';
+    } else {
+      // 如果在视口内，则不滚动
+      return;
+    }
+  }
+
+  let scrollTop = itemTop;
+  if (_align !== 'start') {
+    const itemSize = listMetaData[index].size;
+    if (_align === 'center') {
+      scrollTop = itemTop - cSize / 2 + itemSize / 2;
+    } else if (_align === 'end') {
+      scrollTop = itemTop - cSize + itemSize;
+    } else if (typeof _align === 'number') {
+      scrollTop = itemTop + _align;
+    }
+  }
+
+  wrapperRef.value.scrollTo({
+    top: scrollTop,
+    behavior: props.itemSize ? behavior : 'instant',
+  });
 };
 
 interface ItemMeta {
@@ -163,6 +199,7 @@ interface ItemMeta {
   bottom: number;
   size: number;
   measured: boolean;
+  isScrolling: boolean;
 }
 
 let listMetaData: Array<ItemMeta> = [];
@@ -190,6 +227,7 @@ watch(
         top: lastTop,
         bottom: lastTop + itemSize,
         measured: propSize ? true : false,
+        isScrolling: false,
       };
 
       lastTop += itemSize;
@@ -311,7 +349,7 @@ const onItemResize = (en: ResizeObserverEntry, index: number) => {
   if (index === props.defaultStartIndex && !initialScroll) {
     // 等渲染后再重新定位滚动初始位置
     nextTick(() => {
-      scrollToIndex(props.defaultStartIndex);
+      scrollToView(props.defaultStartIndex);
       initialScroll = true;
     });
   }
@@ -325,7 +363,7 @@ const init = () => {
   }
   // 先初始化滚动位置
   if (props.itemSize) {
-    scrollToIndex(props.defaultStartIndex);
+    scrollToView(props.defaultStartIndex);
     initialScroll = true;
   }
 };
@@ -335,7 +373,7 @@ onMounted(() => {
 });
 
 defineExpose({
-  scrollToIndex,
+  scrollToView,
 });
 </script>
 
diff --git a/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue b/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
index f7f48ac1..63df5df2 100644
--- a/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import VirtualListBasic from './VirtualListBasic.vue';
 import VirtualListDynamic from './VirtualListDynamic.vue';
+import VirtualListAPI from './VirtualListAPI.vue';
 </script>
 <template>
   <div class="page-demo">
     <VirtualListBasic />
+    <VirtualListAPI />
     <VirtualListDynamic />
   </div>
 </template>
diff --git a/packages/opendesign/src/virtual-list/__demo__/VirtualListAPI.vue b/packages/opendesign/src/virtual-list/__demo__/VirtualListAPI.vue
new file mode 100644
index 00000000..3c34edbd
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/__demo__/VirtualListAPI.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OVirtualList } from '../index';
+import '../style';
+
+const list = ref(
+  new Array(50).fill(1).map((_, idx) => ({
+    label: idx + 1,
+    height: Math.floor(Math.random() * 80 + 40),
+  }))
+);
+
+const defaultStartIndex = 10;
+const index = ref(5);
+const virtualRef = ref<InstanceType<typeof OVirtualList>>();
+const virtualRef2 = ref<InstanceType<typeof OVirtualList>>();
+const onClick = () => {
+  virtualRef.value?.scrollToView(index.value, 'center', 'smooth');
+  virtualRef2.value?.scrollToView(index.value, 'start');
+};
+</script>
+<template>
+  <h4>API 调用</h4>
+  <div>
+    <div>
+      <input v-model="index" />
+      <button @click="onClick">滚动到</button>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div>
+          <h5>高度固定且一致</h5>
+          <OVirtualList ref="virtualRef" class="container" :list="list" :default-start-index="defaultStartIndex" :item-size="80">
+            <template #default="{ item, index }">
+              <div :key="item.label" class="section" :class="`item-${index + 1}`">
+                <span>Row:</span> <span>{{ item.label }}</span
+                >------<span>Height:</span> <span>80px</span>
+              </div>
+            </template>
+          </OVirtualList>
+        </div>
+      </div>
+      <div class="col">
+        <div>
+          <h5>动态高度</h5>
+          <OVirtualList ref="virtualRef2" class="container" :list="list" :default-start-index="defaultStartIndex" :default-item-size="20">
+            <template #default="{ item, index }">
+              <div :key="item.label" class="section" :class="`item-${index + 1}`" :style="{ height: item.height + 'px' }">
+                <span>Row:</span> <span>{{ item.label }}</span
+                >------<span>Height:</span> <span>{{ item.height }}</span>
+              </div>
+            </template>
+          </OVirtualList>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.container {
+  width: 400px;
+  height: 300px;
+  border: 2px solid rgb(111, 45, 234);
+  box-sizing: border-box;
+  display: flex;
+}
+
+section > div {
+  flex: 0 1 30%;
+}
+.section {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px 0;
+}
+
+@for $i from 1 through 100 {
+  .item-#{$i} {
+    background-color: rgba(random(255), random(255), random(255), 1);
+  }
+}
+</style>
-- 
Gitee