diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..3c871743a652d34aac592a4aa9ffb5af074c9be1
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sig-OpenDesign
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/LICENSE.md b/LICENSE.md
deleted file mode 100644
index c5f25be3d91f5c87d9323cfced70ae13a02b6d32..0000000000000000000000000000000000000000
--- a/LICENSE.md
+++ /dev/null
@@ -1,171 +0,0 @@
-# Creative Commons Attribution-ShareAlike 4.0 International
-
-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.
-
-### Using Creative Commons Public Licenses
-
-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.
-
-* __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).
-
-* __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.
-
-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.
-
-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.
-
-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.
-
-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.
-
-h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
-
-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.
-
-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.
-
-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.___
-
-   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:
-
-       A. reproduce and Share the Licensed Material, in whole or in part; and
-
-       B. produce, reproduce, and Share Adapted Material.
-
-   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. __Term.__ The term of this Public License is specified in Section 6(a).
-
-   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.
-
-   5. __Downstream recipients.__
-
-       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.
-
-       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.
-
-       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.
-
-   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).
-
-b. ___Other rights.___
-
-   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.
-
-   2. Patent and trademark rights are not licensed under this Public License.
-
-   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.
-
-### Section 3 – License Conditions.
-
-Your exercise of the Licensed Rights is expressly made subject to the following conditions.
-
-a. ___Attribution.___
-
-   1. If You Share the Licensed Material (including in modified form), You must:
-
-       A. retain the following if it is supplied by the Licensor with the Licensed Material:
-
-         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);
-
-         ii. a copyright notice;
-
-         iii. a notice that refers to this Public License;
-
-         iv. a notice that refers to the disclaimer of warranties;
-
-         v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
-
-       B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
-
-       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.
-
-   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.
-
-   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.
-
-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
diff --git a/package.json b/package.json
index 87f342cb22575e04e4e0af7c6ee3a246a4f33481..6ca31673e75b8b8e6e99cce188e165ef1b248666 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,13 @@
   "name": "opendesign-components",
   "version": "1.0.0",
   "description": "",
+  "license": "MIT",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "pnpm --filter portal dev",
     "dev:ak": "pnpm --filter portal-ak dev",
     "dev:lib": "pnpm --filter @opensig/opendesign dev"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
   "dependencies": {
     "normalize.css": "^8.0.1",
     "vue": "^3.4.21",
diff --git a/packages/docs/ReleaesNote.md b/packages/docs/ReleaesNote.opendesign.md
similarity index 90%
rename from packages/docs/ReleaesNote.md
rename to packages/docs/ReleaesNote.opendesign.md
index 77c1e06dd0e6104fc3fe2948f5b0bf41af01d552..c2a5ae6f6441b98ee3294efe74f0443765e5684f 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
+# TODO
 
-# 0.0.50 - 0620
+1. pagination 支持 layout 控制顺序
+2. carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo
+3. 级联重构
+4. virtualList 整改为 use-virtual-list
+5. select 重构，通过 options 传列表数据
+6. table 支持虚拟滚动，支持固定列，固定行
+7. Tab 重构成分离 OTabs：OTabNav\OTabPane ?
 
-1. 优化 clickoutside，支持 touch，popover 支持移动端 touch 触发隐藏
-2. popup 宽度限制改为相对于屏幕
-3. 修复上传组件重复选择同一文件，不触发 change 事件问题
-4. invalid 属性从 input-number 组件移到 input 组件
+---
 
-# 0.0.51 -
+# 0.0.70 ...
 
-1. 修复 layer 组件在卸载时，未移除挂载目标的相关类；
-2. 表格插槽支持自定义 td、th 内容；
-3. 修复 pagination 跳转输入框能输入小数问题；
-4. upload 增加 beforeSelect 入参
-5. 浮层蒙层共用，解决闪烁问题 todo
+- feat
 
-# 0.0.53
+1. [VirtualList] 虚拟列表支持数据动态追加（头部/尾部）；新增`renderChange`事件；新增 defaultItemSize 字段，支持不定高时，设置项默认高度
+2. [message] 支持指定 message 显示到指定目标元素周围
+3. 增加木兰许可证
 
-# 0.0.56
-
-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,60 +71,67 @@
 5. 更新全局 token 变量值
 6. 刷新部分英文文案
 
-# 0.0.66
+# 0.0.64
 
-1. [scrollbar] 重构 scroller 及 scrollbar, 支持 hook useScrollbar、指令 vScrollbar
+1. [select] 修复多选时 v-model 失效问题 #I9IJT2
 
-# 0.0.67
+# 0.0.63
 
-1. [input] 重构 input，支持 autowidth，maxlength、minlength，无效值判断接口从 checkValid 更改为 validate，props 移除 parse
-2. [textarea] 重构 textarea，长度限制提示支持国际化
+1. 支持组件国际化(en\cn)
+2. 优化颜色变量
+3. [select|input|textarea] 优化交互样式
+4. [select] 修复无法默认选中 value 为 0 的 option
+5. [upload] 移除 btnProps 属性
 
-# [open-scripts] 0.0.18
+# 0.0.62
 
-1. 解决图标服务端渲染，无法绑定事件问题；
-2. svgo 配置增加默认 prefixIds，用于解决老版本对 svg 图标 id 不能正常使用问题
+1. [Carousel] 支持配置 pauseOnHover，控制是否在鼠标 hover 时，自动轮播停止，移除时恢复轮播
+2. [select] 支持下拉分组
+3. [upload] 支持 v-model 受控模式
+4. [scroller] 支持 css 变量控制滚动槽位置
 
-# [open-scripts] 0.0.19
+# 0.0.61
 
-1. 修复 svg 文件名因空格、目录嵌套导致生成的 svg 组件被重名替换问题。
+1. [table] 插槽更名：表头 th_xx; 表体 td_xx;
+2. 移除废弃的 flex 组件
+3. 升级 vue 到 3.4
+4. [use-theme] 支持 SSR
+5. [form] 修复提交按钮不触发校验问题
+6. [input] 解决输入框自动填充时背景颜色不正确的问题
 
-# 0.0.68
+# 0.0.58
 
-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. figure 刷新播放图标
 
-# 0.0.69
+# 0.0.57
 
-- feat
+1. figure 支持视频封面、标题
+2. dialog 新增支持设置移动端半屏
 
-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.56
 
-- fix
+1. collapse&menu 展开时高度设置为 auto；
+2. toggle 支持单独使用；
+3. 解决 dialog 移动端居中问题；
+4. 取消 dropdown 内容左右边距；
+5. 解决 cascader 滚动条重叠问题
 
-1. [Textarea] 解决 textarea placeholder 文字颜色不正确的问题
-2. [Option] 修复禁用状态时，hover 样式错误问题
+# 0.0.51 -
+
+1. 修复 layer 组件在卸载时，未移除挂载目标的相关类；
+2. 表格插槽支持自定义 td、th 内容；
+3. 修复 pagination 跳转输入框能输入小数问题；
+4. upload 增加 beforeSelect 入参
+5. 浮层蒙层共用，解决闪烁问题 todo
 
-TODO
+# 0.0.50 - 0620
 
-1. pagination 支持 layout 控制顺序
-2. carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo
-3. 级联重构
-4. virtualList 整改为 use-virtual-list
-5. select 重构，通过 options 传列表数据
-6. table 支持虚拟滚动，支持固定列，固定行
-7. Tab 重构成分离 OTabs：OTabNav\OTabPane ?
+1. 优化 clickoutside，支持 touch，popover 支持移动端 touch 触发隐藏
+2. popup 宽度限制改为相对于屏幕
+3. 修复上传组件重复选择同一文件，不触发 change 事件问题
+4. invalid 属性从 input-number 组件移到 input 组件
+
+# 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
diff --git a/packages/docs/ReleaesNote.scripts.md b/packages/docs/ReleaesNote.scripts.md
new file mode 100644
index 0000000000000000000000000000000000000000..f4a2d8f932e1638b293d43aa61c752fcba0f89cf
--- /dev/null
+++ b/packages/docs/ReleaesNote.scripts.md
@@ -0,0 +1,18 @@
+# [open-scripts]
+
+# 0.0.20 2024-10-10
+
+- fix
+
+1. 修复图标路径兼容性、文件名转变量名兼容性、不同实例同 id 的相互影响
+
+# 0.0.19 2024-08-12
+
+- fix
+
+1. 修复 svg 文件名因空格、目录嵌套导致生成的 svg 组件被重名替换问题。
+
+# 0.0.18
+
+1. 解决图标服务端渲染，无法绑定事件问题；
+2. svgo 配置增加默认 prefixIds，用于解决老版本对 svg 图标 id 不能正常使用问题
diff --git a/packages/docs/input.md b/packages/docs/input.md
index 01194d9b72fea265479fe42f17a6f27da086be1f..6ac8db65e1cf6049645e68eac8e3336dde79951d 100644
--- a/packages/docs/input.md
+++ b/packages/docs/input.md
@@ -60,7 +60,7 @@
 | disabled       | boolean                                                     | false       | 可选，是否为禁用状态                                             |
 | readonly       | boolean                                                     | false       | 可选，是否为只读状态                                             |
 | invalid        | boolean                                                     | false       | 可选，是否为非法值状态                                           |
-| clearable      | boolean                                                     | true        | 可选，是否是否可以清除                                           |
+| clearable      | boolean                                                     | true        | 可选，是否可以清除。                                           |
 | autoWidth      | boolean                                                     | true        | 可选，是否自动增加宽度                                           |
 | placeholder    | string                                                      | --          | 可选，提示文本                                                   |
 | showPasswordOn | 'click' \| 'mousedown'                                      | 'mousedown' | 可选，显示密码的方式                                             |
diff --git a/packages/opendesign/LICENSE b/packages/opendesign/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..3c871743a652d34aac592a4aa9ffb5af074c9be1
--- /dev/null
+++ b/packages/opendesign/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sig-OpenDesign
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index cb4af6f93de04424ce1d44e163e98e0314db1ea4..0d4b5c4b1ccaa5b74f133a2d104151de709d1e17 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@opensig/opendesign",
   "version": "0.0.69",
+  "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/_components/in-box/InBox.vue b/packages/opendesign/src/_components/in-box/InBox.vue
index 04db1ac1c022ea9e5fbe60387497cfaa813a8b61..b79327462f3fb454f4470b33e20b9e27a9f1bd9c 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 6ea952fbf9481dbefbeeb72d4ad9de152f0999b3..c6abe220295b5a635e7a0cb91f991c6716eb7c0d 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 c85374c3ac0749f19cc3b7da14558199464cee40..2b7d6eb28e9119cdbd5c5a541bb8a70e8da31ff5 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>;
diff --git a/packages/opendesign/src/_components/in-input/InInput.vue b/packages/opendesign/src/_components/in-input/InInput.vue
index c4d4a9735d928832607e70a88de7255cd7587331..4cfd197ef90b67755ec767f6ac4ddd0e077b6998 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,
@@ -44,6 +45,7 @@ const {
   format,
   validate,
   onInvalidChange: props.onInvalidChange,
+  beforeInput: props.beforeInput,
 });
 
 const { showPassword, onEyeMouseDown, onEyeMouseUp, onEyeClick } = useInputPassword({
@@ -68,8 +70,8 @@ watch(
   () => props.modelValue,
   (val) => {
     const value = formateToString(val);
-    if (value !== currentValue.value) {
-      currentValue.value = value;
+    if (value !== realValue.value) {
+      updateValue(value);
     }
   }
 );
@@ -91,9 +93,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(() => {
@@ -146,7 +148,6 @@ defineExpose({
         :id="props.inputId"
         ref="inputEl"
         class="o_input-input"
-        :value="displayValue"
         :type="inputType"
         :placeholder="props.placeholder"
         :readonly="props.readonly"
diff --git a/packages/opendesign/src/_components/in-input/types.ts b/packages/opendesign/src/_components/in-input/types.ts
index 5ee6155daa89b16b921248f1b3ace3f956890496..5883adcd5aba3d3049432585b50b33fd2647166b 100644
--- a/packages/opendesign/src/_components/in-input/types.ts
+++ b/packages/opendesign/src/_components/in-input/types.ts
@@ -108,6 +108,12 @@ export const inInputProps = {
   autoWidth: {
     type: Boolean,
   },
+  /**
+   * 针对输入内容进行处理，返回值作为输入最终值
+   */
+  beforeInput: {
+    type: Function as PropType<(value: string) => string>,
+  },
 };
 
 export type InInputProps = ExtractPropTypes<typeof inInputProps>;
diff --git a/packages/opendesign/src/_components/in-textarea/InTextarea.vue b/packages/opendesign/src/_components/in-textarea/InTextarea.vue
index b6588c458dd642609961dff4c792a53cabf5c34d..440c7604ab533eb64906f0b0453765afc9bb17ef 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,
@@ -45,6 +46,7 @@ const {
   format,
   validate,
   onInvalidChange: props.onInvalidChange,
+  beforeInput: props.beforeInput,
 });
 
 const resizeValue = computed(() => {
@@ -65,8 +67,8 @@ watch(
   () => props.modelValue,
   (val) => {
     const value = formateToString(val);
-    if (value !== currentValue.value) {
-      currentValue.value = value;
+    if (value !== realValue.value) {
+      updateValue(value);
     }
   }
 );
@@ -88,9 +90,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(() => {
@@ -151,7 +153,6 @@ defineExpose({
         :id="props.textareaId"
         ref="inputEl"
         class="o_textarea-textarea"
-        :value="displayValue"
         :placeholder="props.placeholder"
         :readonly="props.readonly"
         :disabled="props.disabled"
diff --git a/packages/opendesign/src/_components/in-textarea/types.ts b/packages/opendesign/src/_components/in-textarea/types.ts
index a56d587c85a6f49f42379fa63779819dc7320ae3..1c2f7012f6371910826eea18f88a66c7f4d1d55f 100644
--- a/packages/opendesign/src/_components/in-textarea/types.ts
+++ b/packages/opendesign/src/_components/in-textarea/types.ts
@@ -126,6 +126,12 @@ export const inTextareaProps = {
     type: [Boolean, Object] as PropType<boolean | Partial<BaseScrollerPropsT>>,
     default: true,
   },
+  /**
+   * 针对输入内容进行处理，返回值作为输入最终值
+   */
+  beforeInput: {
+    type: Function as PropType<(value: string) => string>,
+  },
 };
 
 export type inTextareaProps = ExtractPropTypes<typeof inTextareaProps>;
diff --git a/packages/opendesign/src/_headless/use-input.ts b/packages/opendesign/src/_headless/use-input.ts
index 7b67b87d7276326f937c5b4b1e96e8046be3459d..39347ba2d66bde26e9cd08008e8c191ae1d25084 100644
--- a/packages/opendesign/src/_headless/use-input.ts
+++ b/packages/opendesign/src/_headless/use-input.ts
@@ -19,13 +19,14 @@ export interface InputOptionT {
   validate?: Ref<((value: string) => boolean) | undefined>;
   onInvalidChange?: (inputValue: string, lastValidInputValue: string, lastValue: string) => string;
   format?: Ref<((value: string) => string) | undefined>;
+  beforeInput?: (inputValue: string) => string;
 }
 
 /**
  * 输入框
  */
 export function useInput(options: InputOptionT) {
-  const { defaultValue, format, emits, emitUpdate, validate, onInvalidChange } = options;
+  const { defaultValue, format, emits, emitUpdate, validate, onInvalidChange, beforeInput } = options;
   const currentValue = ref(defaultValue);
   const lastValue = ref(defaultValue);
 
@@ -44,6 +45,16 @@ export function useInput(options: InputOptionT) {
   // 记录上一次有效输入值
   let lastValidValue: string = '';
 
+  const setNativeDisplayValue = (value: string) => {
+    if (inputEl.value) {
+      inputEl.value.value = value;
+      displayValue.value = value;
+    }
+  };
+
+  /**
+   * 校验是否值有效，如果值为空，始终有效
+   */
   const doValidate = () => {
     isValid.value = currentValue.value === '' ? true : validateFn.value(currentValue.value);
     return isValid.value;
@@ -58,8 +69,8 @@ export function useInput(options: InputOptionT) {
       lastValidValue = currentValue.value;
     }
 
-    if (!isFocus.value || !format?.value) {
-      displayValue.value = formatFn.value(currentValue.value);
+    if (!(format?.value && isFocus.value)) {
+      setNativeDisplayValue(formatFn.value(currentValue.value));
     }
   });
 
@@ -98,10 +109,14 @@ export function useInput(options: InputOptionT) {
       return;
     }
 
-    const val = (e.target as HTMLInputElement)?.value;
+    let val = (e.target as HTMLInputElement)?.value;
+
+    if (isFunction(beforeInput)) {
+      val = beforeInput(val);
+    }
 
     currentValue.value = val;
-    displayValue.value = val;
+    setNativeDisplayValue(val);
 
     if (doValidate()) {
       emitUpdateValue();
@@ -118,7 +133,7 @@ export function useInput(options: InputOptionT) {
 
     isFocus.value = true;
     if (format?.value) {
-      displayValue.value = currentValue.value;
+      setNativeDisplayValue(currentValue.value);
     }
 
     emits('focus', e);
@@ -129,8 +144,8 @@ export function useInput(options: InputOptionT) {
     isFocus.value = false;
 
     if (format?.value) {
-      currentValue.value = displayValue.value;
-      displayValue.value = formatFn.value(currentValue.value);
+      currentValue.value = (e.target as HTMLInputElement)?.value;
+      setNativeDisplayValue(formatFn.value(currentValue.value));
     }
 
     emitValidUpdateValue();
@@ -144,9 +159,10 @@ export function useInput(options: InputOptionT) {
     const keyCode = e.key || e.code;
     if (!composition.isComposing.value && keyCode === Enter.key) {
       emitValidUpdateValue();
-      emitChange();
 
-      displayValue.value = currentValue.value;
+      setNativeDisplayValue(currentValue.value);
+
+      emitChange();
 
       emits('pressEnter', e);
     }
@@ -154,7 +170,7 @@ export function useInput(options: InputOptionT) {
 
   const clearValue = () => {
     currentValue.value = '';
-    displayValue.value = '';
+    setNativeDisplayValue('');
 
     doValidate();
 
@@ -170,10 +186,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,
diff --git a/packages/opendesign/src/_utils/helper.ts b/packages/opendesign/src/_utils/helper.ts
index 8b6f1f0cdc3e4bc1d851680c5696075851158940..ebc2380d045325751988a6bfb8805123fd97bab4 100644
--- a/packages/opendesign/src/_utils/helper.ts
+++ b/packages/opendesign/src/_utils/helper.ts
@@ -201,3 +201,23 @@ export function formateToString(val: unknown): string {
   }
   return String(val);
 }
+
+/**
+ * 使用图片url请求加载图片
+ * @param src s
+ * @returns
+ */
+export function requestImage(src: string) {
+  return new Promise((resolve, reject) => {
+    const onImgLoaded = () => {
+      resolve(src);
+    };
+    const onImgError = (e: Event | string) => {
+      reject(e);
+    };
+    const img = new Image();
+    img.onload = onImgLoaded;
+    img.onerror = onImgError;
+    img.src = src;
+  });
+}
diff --git a/packages/opendesign/src/_utils/log.ts b/packages/opendesign/src/_utils/log.ts
index a1c11afd65ab1d59393041febec0ac16c4473db6..3b21b046a5d0ada5e30e78e22db5db3ad8fc0829 100644
--- a/packages/opendesign/src/_utils/log.ts
+++ b/packages/opendesign/src/_utils/log.ts
@@ -10,14 +10,17 @@ const logFunction = {
 type LogLevel = keyof typeof logFunction;
 
 function getLogFunction(level: LogLevel, prefix?: string) {
-  if (prefix) {
-    return logFunction[level].bind(window.console, prefix);
-  } else {
-    return logFunction[level].bind(window.console);
+  // 非生产环境，打开日志打印
+  if (process.env.NODE_ENV === 'development') {
+    if (prefix) {
+      return logFunction[level].bind(window.console, prefix);
+    } else {
+      return logFunction[level].bind(window.console);
+    }
   }
 }
 
-export class Logger {
+export class Log {
   private prefix: string = '';
   constructor(prefix?: string) {
     if (prefix) {
@@ -37,4 +40,4 @@ export class Logger {
   }
 }
 
-export const logger = new Logger();
+export const log = new Log();
diff --git a/packages/opendesign/src/_utils/vue-utils.ts b/packages/opendesign/src/_utils/vue-utils.ts
index d406d0894bac9d73c8c3b289ae3f27d4b1607e2c..1e5496ed31890d9a7f3e3dc7c7f26ea24039effc 100644
--- a/packages/opendesign/src/_utils/vue-utils.ts
+++ b/packages/opendesign/src/_utils/vue-utils.ts
@@ -141,13 +141,13 @@ export const getFirstElement = (vn: VNode | VNode[]): HTMLElement | null => {
   return null;
 };
 
-export function useSlotFirstElement(): { setSlot: (nodes: VNode[] | undefined) => void; fistElement: Ref<HTMLElement | null> } {
+export function useSlotFirstElement(): { setSlot: (nodes: VNode[] | undefined) => void; firstElement: Ref<HTMLElement | null> } {
   let children: VNode[] | null = null;
-  const fistElement = ref<HTMLElement | null>(null);
+  const firstElement = ref<HTMLElement | null>(null);
 
   onMounted(() => {
     if (children) {
-      fistElement.value = getFirstElement(children);
+      firstElement.value = getFirstElement(children);
     }
   });
   return {
@@ -156,7 +156,7 @@ export function useSlotFirstElement(): { setSlot: (nodes: VNode[] | undefined) =
         children = nodes;
       }
     },
-    fistElement,
+    firstElement,
   };
 }
 
diff --git a/packages/opendesign/src/carousel/effects/gallery.ts b/packages/opendesign/src/carousel/effects/gallery.ts
index d1a548dc5280f93699051d14b06f5d5e391c9889..0d43649fb6beb4244aba806fc4408b5dad3577a3 100644
--- a/packages/opendesign/src/carousel/effects/gallery.ts
+++ b/packages/opendesign/src/carousel/effects/gallery.ts
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { isFunction } from '../../_utils/is';
 import { PointMoveT } from '../../_utils/types';
 import Effect, { EffectOptionT } from './effect';
@@ -174,7 +175,9 @@ export default class Gallery extends Effect {
           this.onChanged(toIndex, this.currentIndex);
         }
         this.currentIndex = toIndex;
-        this.loopRange();
+        nextTick().then(() => {
+          this.loopRange();
+        });
         return toIndex;
       });
     }
diff --git a/packages/opendesign/src/cascader/index.ts b/packages/opendesign/src/cascader/index.ts
index 22e05ea49448ee15d9ddc8f22b40e7bfd9cf9752..1d26775d07236e7d9f519d6e9bcd95ea81c1299c 100644
--- a/packages/opendesign/src/cascader/index.ts
+++ b/packages/opendesign/src/cascader/index.ts
@@ -1,12 +1,15 @@
 import type { App } from 'vue';
 
 import _OCascader from './OCascader.vue';
+import OCascaderPanel from './OCascaderPanel.vue';
 
 const OCascader = Object.assign(_OCascader, {
+  OCascaderPanel,
   install(app: App) {
     app.component('OCascader', _OCascader);
+    app.component('OCascaderPanel', OCascaderPanel);
   },
 });
 
-export { OCascader };
+export { OCascader, OCascaderPanel };
 export * from './types';
diff --git a/packages/opendesign/src/figure/OFigure.vue b/packages/opendesign/src/figure/OFigure.vue
index c25d38eecd908f84ad5fe4e40e7d610a98c4a458..58d25074cb2dea09839f9dd06f83df0ce6031d50 100644
--- a/packages/opendesign/src/figure/OFigure.vue
+++ b/packages/opendesign/src/figure/OFigure.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watchEffect } from 'vue';
 import { defaultPrestColorPool } from '../_utils/global';
 import HtmlTag from '../_components/html-tag';
 import { OLayer } from '../layer';
-import { IconImageError, IconVideoPlay } from '../_utils/icons';
+import { IconImageError, IconVideoPlay, IconClose } from '../_utils/icons';
+import { OIcon } from '../icon';
+import { useIntersectionObserver } from '../hooks';
 
 import { figureProps } from './types';
+import { isObject } from '../_utils/is';
+import { requestImage } from '../_utils/helper';
 
 const props = defineProps(figureProps);
 
@@ -20,19 +24,9 @@ const isLoading = ref(true);
 const isError = ref(false);
 const prestColor = props.colorful ? defaultPrestColorPool.value.pick() : '';
 
-const bgSrc = computed(() => {
-  if (props.background && props.ratio) {
-    return `url(${props.src})`;
-  }
-  return '';
-});
-
-const paddingTop = computed(() => {
-  if (props.ratio) {
-    return `${((1 / props.ratio) * 100).toFixed(2)}%`;
-  }
-  return '';
-});
+const imgSrc = ref<string | undefined>(undefined); // 当使用img标签时，图片地址
+const bgUrl = computed(() => (props.background && imgSrc.value ? `url(${imgSrc.value})` : undefined));
+const useObserver = (props.lazy && props.background) || isObject(props.lazy); // 使用IntersectionObserver检测是否开始加载图片
 
 const onImgLoaded = () => {
   isLoading.value = false;
@@ -45,36 +39,73 @@ const onImgError = () => {
   emits('error');
 };
 
-watch(
-  () => props.src,
-  (src?: string) => {
-    if (src && props.background) {
-      const img = new Image();
-      img.onload = onImgLoaded;
-      img.onerror = onImgError;
-      img.src = src;
+// 请求图片
+watchEffect(() => {
+  if (!props.src) {
+    return;
+  }
+
+  // 不设置懒加载
+  if (props.lazy === false) {
+    imgSrc.value = props.src;
+  } else {
+    // 懒加载判断使用浏览器原生属性，则直接赋值
+    if (!useObserver) {
+      imgSrc.value = props.src;
     }
-  },
-  { immediate: true }
-);
+  }
+
+  if (props.background && imgSrc.value) {
+    requestImage(imgSrc.value).then(onImgLoaded).catch(onImgError);
+  }
+});
+
+// 处理背景图片懒加载
+let io: ReturnType<typeof useIntersectionObserver> | null = null;
+const rootEl = ref<InstanceType<typeof HtmlTag> | null>(null);
+
 onMounted(() => {
   // 修复服务端渲染时，加载过快未刷新load状态问题
-  if (imgRef.value && imgRef.value.complete) {
+  if (imgRef.value && imgRef.value.complete && imgSrc.value) {
     onImgLoaded();
   }
+
+  if (useObserver) {
+    io = useIntersectionObserver(isObject(props.lazy) ? props.lazy : {});
+    if (rootEl.value) {
+      io?.observe(rootEl.value.$el, (entry: IntersectionObserverEntry) => {
+        if (entry.isIntersecting) {
+          imgSrc.value = props.src;
+        }
+      });
+    }
+  }
+});
+
+// 指定长宽比
+const paddingTop = computed(() => {
+  if (props.ratio) {
+    return `${((1 / props.ratio) * 100).toFixed(2)}%`;
+  }
+  return '';
 });
 
 // 全屏预览图片
 const previewVisible = ref(false);
 const canPreview = computed(() => props.preview || props.lazyPreiew);
-const preview = () => {
+const isMaskClose = computed(() => ['mask-button', 'mask'].includes(props.previewClose));
+const isButtonClose = computed(() => ['mask-button', 'button'].includes(props.previewClose));
+const preview = (visible: boolean = true) => {
   if (canPreview.value) {
-    previewVisible.value = true;
+    previewVisible.value = visible;
   }
 };
 const onPreviewChange = (visible: boolean) => {
   emits('preview', visible);
 };
+const onClosePreviewClick = () => {
+  previewVisible.value = false;
+};
 
 const onFigureClick = () => {
   if (props.preview) {
@@ -105,8 +136,9 @@ defineExpose({
       '--figure-fit': props.fit,
     }"
     @click="onFigureClick"
+    ref="rootEl"
   >
-    <template v-if="props.src">
+    <template v-if="imgSrc">
       <div
         v-if="paddingTop || isError"
         class="o-figure-wrap"
@@ -114,17 +146,35 @@ defineExpose({
           'o-figure-bg': props.background,
         }"
         :style="{
-          backgroundImage: bgSrc,
+          backgroundImage: bgUrl,
         }"
       >
         <div v-if="isError" class="o-figure-error-wrap">
           <slot name="error"><IconImageError /></slot>
         </div>
-        <img v-else-if="!props.background" ref="imgRef" :src="props.src" :alt="props.alt" class="o-figure-img-ratio" @load="onImgLoaded" @error="onImgError" />
+        <img
+          v-else-if="!props.background"
+          ref="imgRef"
+          :src="imgSrc"
+          :alt="props.alt"
+          class="o-figure-img-ratio"
+          :loading="props.lazy === true ? 'lazy' : 'eager'"
+          @load="onImgLoaded"
+          @error="onImgError"
+        />
       </div>
-      <img v-else-if="!isError" ref="imgRef" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
+      <img
+        v-else-if="!isError"
+        ref="imgRef"
+        :src="imgSrc"
+        :alt="props.alt"
+        class="o-figure-img"
+        :loading="props.lazy === true ? 'lazy' : 'eager'"
+        @load="onImgLoaded"
+        @error="onImgError"
+      />
     </template>
-    <div class="o-figure-main">
+    <div class="o-figure-main" v-if="props.videoPoster || $slots.content || $slots.title || $slots.default">
       <slot></slot>
       <div v-if="props.videoPoster" class="o-figure-mask">
         <slot name="play-icon">
@@ -142,8 +192,14 @@ defineExpose({
       </div>
     </div>
 
-    <OLayer v-if="canPreview" v-model:visible="previewVisible" class="o-figure-preview-layer" @change="onPreviewChange">
-      <div class="o-figure-preview-img"><img :src="props.src" /></div>
+    <OLayer v-if="canPreview" v-model:visible="previewVisible" class="o-figure-preview-layer" @change="onPreviewChange" :mask-close="isMaskClose">
+      <div class="o-figure-preview-wrapper">
+        <div class="o-figure-preview-img">
+          <OIcon button :icon="IconClose" class="o-figure-preview-close" @click="onClosePreviewClick" v-if="isButtonClose" />
+          <img :src="imgSrc" />
+        </div>
+        <slot name="preview"></slot>
+      </div>
     </OLayer>
   </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/figure/__demo__/FigureBasic.vue
index d7069ea613409b5f9e583d5cbf73e3f2ffff2b7e..f9ae785289d33b32a12f18147480c2ae93f18639 100644
--- a/packages/opendesign/src/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/figure/__demo__/FigureBasic.vue
@@ -1,15 +1,7 @@
 <script setup lang="ts">
 import { OFigure } from '../index';
-import { OIconSearch } from '../../icon-components';
-import { ref } from 'vue';
 const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
 
-const figureRef = ref<typeof OFigure | null>(null);
-const preivewImg = () => {
-  if (figureRef.value) {
-    figureRef.value.preview();
-  }
-};
 const playVideo = () => {
   alert('you can play video');
 };
@@ -20,10 +12,6 @@ const onload = () => {
 const onerror = () => {
   console.log('error');
 };
-
-const onpreview = (visible: boolean) => {
-  console.log('preview:', visible);
-};
 </script>
 <template>
   <h4>基本</h4>
@@ -34,12 +22,12 @@ const onpreview = (visible: boolean) => {
     <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background colorful @load="onload" />
     <OFigure class="img" hoverable :src="img" />
     <OFigure class="img" href="openEuler" target="__blank" :src="img" />
-    <OFigure class="img" :src="img" preview @preview="onpreview" />
-    <OFigure ref="figureRef" class="img" :src="img" lazy-preiew>
-      <OIconSearch class="zoomIn" @click="preivewImg" />
-    </OFigure>
     <OFigure class="img" :src="img" video-poster @click="playVideo" />
+  </section>
+
+  <h4>slot</h4>
 
+  <section>
     <OFigure style="width: 25%" :src="img" hoverable>
       <template #title>标题文本</template>
     </OFigure>
@@ -48,12 +36,7 @@ const onpreview = (visible: boolean) => {
     </OFigure>
   </section>
 </template>
-<style lang="scss">
-.dlg-action {
-  display: flex;
-  gap: 16px;
-  justify-content: flex-end;
-}
+<style lang="scss" scoped>
 .img {
   width: 25%;
   border: 1px solid #ddd;
diff --git a/packages/opendesign/src/figure/__demo__/FigureLazy.vue b/packages/opendesign/src/figure/__demo__/FigureLazy.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b010a8548e9c9c9dc47131aa2f09078259670c35
--- /dev/null
+++ b/packages/opendesign/src/figure/__demo__/FigureLazy.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { OFigure } from '../index';
+const img1 = 'https://www.openeuler.org/assets/computing-arch_zh_pc.Bn12UMeP.jpg';
+const img2 = 'https://www.openeuler.org/assets/blog-bg1.CWrw5LH1.jpg';
+const img3 = 'https://www.openeuler.org/assets/finance.Bg8z3_B5.png';
+const img4 = 'https://www.openeuler.org/img/banners/20241113-s3.png';
+const img5 = 'https://www.openeuler.org/assets/404.Cx3U9-ep.png';
+const img6 = 'https://www.openeuler.org/assets/blog-bg2.CNvN-qbF.jpg';
+
+const onload = (key: string) => {
+  console.log(key, 'loaded');
+};
+
+const onerror = (key: string) => {
+  console.log(key, 'error');
+};
+
+const lazyOption = {
+  rootMargin: '400px 0px 400px 0px',
+};
+</script>
+<template>
+  <div style="margin-top: 400vh"></div>
+  <h4>正常加载</h4>
+  <section>
+    <OFigure class="img" :src="img1" colorful @load="() => onload('img1')" @error="() => onerror('img1')" />
+    <OFigure class="img" :src="img2" :ratio="16 / 9" fit="cover" background colorful @load="() => onload('img2')" @error="() => onerror('img2')" />
+  </section>
+  <h4>懒加载 lazy</h4>
+  <section>
+    <OFigure class="img" :src="img3" colorful @load="() => onload('img3')" lazy @error="() => onerror('img3')" preview />
+    <OFigure class="img" :src="img4" :ratio="16 / 9" fit="cover" background colorful @load="() => onload('img4')" lazy @error="() => onerror('img4')" preview />
+  </section>
+
+  <h4>懒加载 lazy= { rootMargin: '400px 0px 400px 0px' }</h4>
+  <section>
+    <OFigure class="img" :src="img5" colorful @load="() => onload('img5')" :lazy="lazyOption" @error="() => onerror('img5')" preview />
+    <OFigure
+      class="img"
+      :src="img6"
+      :ratio="16 / 9"
+      fit="cover"
+      background
+      colorful
+      @load="() => onload('img6')"
+      :lazy="lazyOption"
+      @error="() => onerror('img6')"
+      preview
+    />
+    <img alt="" onerror="console.log('error')" />
+  </section>
+</template>
+<style lang="scss" scoped>
+.img {
+  width: 45%;
+  border: 1px solid #ddd;
+  position: relative;
+}
+.zoomIn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  color: red;
+  font-size: 32px;
+  cursor: pointer;
+}
+</style>
diff --git a/packages/opendesign/src/figure/__demo__/FigurePreview.vue b/packages/opendesign/src/figure/__demo__/FigurePreview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f7dd300c8f42ac9116bf70f22d7df9ceceaa9a8d
--- /dev/null
+++ b/packages/opendesign/src/figure/__demo__/FigurePreview.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { OFigure } from '../index';
+import { OIconSearch } from '../../icon-components';
+import { ref } from 'vue';
+const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
+
+const figureRef = ref<typeof OFigure | null>(null);
+const preivewImg = () => {
+  if (figureRef.value) {
+    figureRef.value.preview();
+  }
+};
+
+const onpreview = (visible: boolean) => {
+  console.log('preview:', visible);
+};
+
+const figureRef2 = ref<typeof OFigure | null>(null);
+const closePreviewManully = () => {
+  if (figureRef2.value) {
+    figureRef2.value.preview(false);
+  }
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <div>
+      <span>preview-close="mask"</span>
+      <OFigure class="img" :src="img" preview @preview="onpreview" preview-close="mask" />
+    </div>
+    <div>
+      <span>preview-close="button"</span>
+      <OFigure class="img" :src="img" preview @preview="onpreview" preview-close="button" />
+    </div>
+    <div>
+      <span>preview-close="mask-button"</span>
+      <OFigure class="img" :src="img" preview @preview="onpreview" preview-close="mask-button" />
+    </div>
+    <div>
+      <span>preview-close="none"</span>
+      <OFigure class="img" ref="figureRef2" :src="img" preview @preview="onpreview" preview-close="none">
+        <template #preview><button @click="closePreviewManully">关闭</button></template>
+      </OFigure>
+    </div>
+    <div>
+      <span>使用api调用preivew</span>
+      <OFigure ref="figureRef" class="img" :src="img" lazy-preiew>
+        <OIconSearch class="zoomIn" @click="preivewImg" />
+      </OFigure>
+    </div>
+  </section>
+</template>
+<style lang="scss" scoped>
+.img {
+  width: 25%;
+  border: 1px solid #ddd;
+  position: relative;
+}
+.zoomIn {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  color: red;
+  font-size: 32px;
+  cursor: pointer;
+}
+</style>
diff --git a/packages/opendesign/src/figure/__demo__/IndexFigure.vue b/packages/opendesign/src/figure/__demo__/TheIndex.vue
similarity index 60%
rename from packages/opendesign/src/figure/__demo__/IndexFigure.vue
rename to packages/opendesign/src/figure/__demo__/TheIndex.vue
index 0e8aec36975eeab8e03a63b731031d8165c6906b..2b3283a3cdf36ffdc8206d1ff7b927e96af67761 100644
--- a/packages/opendesign/src/figure/__demo__/IndexFigure.vue
+++ b/packages/opendesign/src/figure/__demo__/TheIndex.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import '../style';
 import FigureBasic from './FigureBasic.vue';
+import FigurePreview from './FigurePreview.vue';
+import FigureLazy from './FigureLazy.vue';
 </script>
 <template>
   <div class="page-demo">
     <FigureBasic />
+    <FigurePreview />
+    <FigureLazy />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/figure/style/index.ts b/packages/opendesign/src/figure/style/index.ts
index 13541f2cbd1488af9263928af4b85fb21195e72e..5a959b183a28f1eb4dccda57514e8f8a9ac54f3d 100644
--- a/packages/opendesign/src/figure/style/index.ts
+++ b/packages/opendesign/src/figure/style/index.ts
@@ -1,3 +1,4 @@
 import '../../_styles';
+import '../../icon/style';
 import '../../layer/style';
 import './index.scss';
diff --git a/packages/opendesign/src/figure/style/style.scss b/packages/opendesign/src/figure/style/style.scss
index 3a3b3e885451bfd6f2bef2284210b399e439572c..6b65299d7987e21d0575262e60cf6415daefe00a 100644
--- a/packages/opendesign/src/figure/style/style.scss
+++ b/packages/opendesign/src/figure/style/style.scss
@@ -94,6 +94,9 @@
   height: 100%;
   cursor: zoom-out;
 }
+.o-figure-preview-wrapper {
+  position: relative;
+}
 .o-figure-view-figure {
   width: 100%;
   height: 100%;
@@ -104,12 +107,27 @@
   cursor: pointer;
 }
 .o-figure-preview-img {
+  position: relative;
   img {
     vertical-align: top;
     max-width: 100vw;
     max-height: 100vh;
   }
 }
+.o-figure-preview-close {
+  font-size: var(--o-icon_size-m);
+  color: var(--o-color-info1-inverse);
+  position: absolute;
+  right: calc((var(--o-icon_size-m) + 16px) * -1);
+  @include x-svg-hover;
+  @include hover {
+    color: var(--o-color-info2-inverse);
+  }
+  &:active {
+    color: var(--o-color-info3-inverse);
+    transform: scale(0.9);
+  }
+}
 
 .o-figure-error-wrap {
   position: absolute;
diff --git a/packages/opendesign/src/figure/types.ts b/packages/opendesign/src/figure/types.ts
index 7b9dee8f71730de664fdab2e6305725472c8410e..5985b487633ec4939d5f084f8d8271cdaa0c013f 100644
--- a/packages/opendesign/src/figure/types.ts
+++ b/packages/opendesign/src/figure/types.ts
@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 
 export const figureProps = {
   /**
@@ -68,6 +68,25 @@ export const figureProps = {
   videoPoster: {
     type: Boolean,
   },
+  /**
+   * 关闭预览方式
+   */
+  previewClose: {
+    type: String as PropType<'button' | 'none' | 'mask' | 'mask-button'>,
+    default: 'mask',
+  },
+  /**
+   * 图片懒加载
+   * [false]: 立即加载
+   * [true]: 启用懒加载，根据与视口的位置关系判断是否加载图片
+   * 1. background为false时，使用原生img loading=lazy判断是否加载
+   * 2. background为true时，使用IntersectionObserver检测是否进入视口，加载图片
+   * [IntersectionObserverInit]: { root, rootMargin, threshold }，指定使用IntersectionObserver检测是否进入视口
+   * 配置参见 https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver
+   */
+  lazy: {
+    type: [Boolean, Object] as PropType<boolean | IntersectionObserverInit>,
+  },
 };
 
 export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
diff --git a/packages/opendesign/src/form/OFormItem.vue b/packages/opendesign/src/form/OFormItem.vue
index 5130ae3b3b6948ec8e1765221b4c4c5daf8a3378..35889bf9389e5f1fc6149ce60bca8f91a8ab1157 100644
--- a/packages/opendesign/src/form/OFormItem.vue
+++ b/packages/opendesign/src/form/OFormItem.vue
@@ -5,7 +5,7 @@ import { formItemInjectKey, formInjectKey, formCtx } from './provide';
 import { getFlexValue, groupRules } from './form';
 import { isArray } from '../_utils/is';
 import { asyncSome, getValueByPath, moveToFirst, setValueByPath } from '../_utils/helper';
-import { logger } from '../_utils/log';
+import { log } from '../_utils/log';
 
 const requireSymbol = '*';
 
@@ -70,7 +70,7 @@ const runValidate = async (trigger?: TriggerT): Promise<FieldResultT> => {
         return false;
       }
     } catch (e) {
-      logger.error('failed to validate rules');
+      log.error('failed to validate rules');
     }
   });
   return fieldResult.value;
diff --git a/packages/opendesign/src/hooks/use-intersection-observer.ts b/packages/opendesign/src/hooks/use-intersection-observer.ts
index 0564f773b3ce207762eb84f72754cbbccafdff17..93a198b641f2cc25a1534cd9be92c4c9d368498a 100644
--- a/packages/opendesign/src/hooks/use-intersection-observer.ts
+++ b/packages/opendesign/src/hooks/use-intersection-observer.ts
@@ -1,108 +1,125 @@
 import { isFunction } from '../_utils/is';
 
-export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void;
-
-/**
- * 监听池
- * isFirst: 监听的第一次回调
- */
-const observerPool = new WeakMap<
+type ElementPoolT = WeakMap<
   HTMLElement,
   {
     element: HTMLElement;
-    callbacks: Array<IntersectionListenerT>;
+    callbacks: Array<(entry: IntersectionObserverEntry, isIntersecting: boolean) => void>;
   } | null
->();
-
-// 记录监听数量
-let record = 0;
+>;
+interface ObserveInstanceT {
+  observer: IntersectionObserver;
+  record: number;
+  elementPool: ElementPoolT;
+}
+const defaultKey = {};
+/**
+ * 实例池
+ */
+const instancePool = new WeakMap<IntersectionObserverInit | typeof defaultKey, ObserveInstanceT>();
 
-// 创建监听实例
-let instance: ResizeObserver | null = null;
+function createObserverInstance(options?: IntersectionObserverInit): ObserveInstanceT {
+  let instance = instancePool.get(options || defaultKey);
+  if (!instance) {
+    const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        const ele = entry.target as HTMLElement;
+        const ins = instance?.elementPool.get(ele);
 
-function createObserver() {
-  return new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const ele = entry.target as HTMLElement;
-      const ins = observerPool.get(ele);
+        if (!ins) {
+          return;
+        }
 
-      if (!ins) {
-        return;
-      }
+        ins?.callbacks?.forEach((fn) => fn(entry, entry.isIntersecting));
+      });
+    }, options);
 
-      ins?.callbacks?.forEach((fn) => fn(entry));
-    });
-  });
+    /**
+     * 监听元素池
+     */
+    const elementPool: ElementPoolT = new WeakMap();
+    instance = {
+      observer,
+      record: 0,
+      elementPool: elementPool,
+    };
+    instancePool.set(options || defaultKey, instance);
+  }
+  return instance;
 }
 
 /**
- * 监听元素尺寸变化，
- * ele: 监听元素；
- * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ * 监听元素进入视口；
  */
-export function useIntersectionObserver() {
+export function useIntersectionObserver(options?: IntersectionObserverInit) {
+  // 创建监听实例
+  const instance = createObserverInstance(options);
+
   return {
     /**
      * 监听实例
      */
-    observer: instance,
+    observer: instance.observer,
     /**
      * 创建监听实例
-     * ele: 监听元素
-     * listener: resize回调, 移除监听时需要指定该监听函数
-     * isFirst: 是否为初次监听时的回调
+     * el: 添加监听的元素
+     * listener: 进入视口回调, 移除监听时需要指定该监听函数
      */
-    observe: (el?: HTMLElement, listener?: IntersectionListenerT) => {
+    observe: (el: HTMLElement, listener: (entry: IntersectionObserverEntry) => void) => {
       if (!el || !isFunction(listener)) {
         return null;
       }
 
-      // 同一元素，只创建一次ResizeObserver，通过数组存储回调
-      const val = observerPool.get(el);
+      // 同一元素，只创建一次Observer，通过数组存储回调
+      const val = instance.elementPool.get(el);
       if (val) {
         val.callbacks.push(listener);
       } else {
-        if (!instance) {
-          instance = createObserver();
-        }
-        instance.observe(el);
-        record++;
+        instance.observer.observe(el);
+        instance.record++;
 
-        observerPool.set(el, {
+        instance.elementPool.set(el, {
           element: el,
           callbacks: [listener],
         });
       }
 
-      return instance;
+      return instance.observer;
     },
     /**
-     * 移除监听
+     * 移除对某元素的监听
+     * el: 要移除监听的元素
      * listener: 要移除的监听函数，如果不传，则使用初始化时的回调
      */
-    unobserve: (el?: HTMLElement, listener?: IntersectionListenerT) => {
+    unobserve: (el: HTMLElement, listener: (entry: IntersectionObserverEntry) => void) => {
       if (!el || !isFunction(listener) || !instance) {
         return;
       }
 
-      const val = observerPool.get(el);
+      const val = instance.elementPool.get(el);
 
       if (val) {
         const idx = val.callbacks.indexOf(listener);
         val.callbacks.splice(idx, 1);
+
+        // 当el无监听回调时，不再监听该元素
         if (val.callbacks.length === 0) {
-          // 当el无监听时，销毁resizeObserver
-          instance.unobserve(el);
-          observerPool.delete(el);
+          instance.observer.unobserve(el);
+          instance.elementPool.delete(el);
+          instance.record--;
 
-          // 无监听元素，就断开
-          record--;
-          if (record === 0) {
-            instance.disconnect();
-            instance = null;
+          // 当无需要监听的元素，就断开
+          if (instance.record === 0) {
+            instance.observer.disconnect();
           }
         }
       }
     },
+    /**
+     * 销毁观察器
+     */
+    destroy() {
+      instance.observer.disconnect();
+    },
   };
 }
diff --git a/packages/opendesign/src/hooks/use-resize-observer.ts b/packages/opendesign/src/hooks/use-resize-observer.ts
index f9a36a9b04c91f736208b6607b8556fbf17ceda6..1fedb28d203b8ef0c78aa58b3cdc2c3a4da0126f 100644
--- a/packages/opendesign/src/hooks/use-resize-observer.ts
+++ b/packages/opendesign/src/hooks/use-resize-observer.ts
@@ -13,36 +13,46 @@ const observerPool = new WeakMap<
   } | null
 >();
 
-// 记录监听数量
-let record = 0;
-
 // 创建监听实例
-let instance: ResizeObserver | null = null;
+interface ObserveInstance {
+  observer: ResizeObserver;
+  record: number;
+}
 
-function createObserver() {
-  return new ResizeObserver((entries: ResizeObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const ele = entry.target as HTMLElement;
-      const ins = observerPool.get(ele);
-      if (!ins) {
-        return;
-      }
+let instance: ObserveInstance | null = null;
+function createObserverInstance() {
+  if (!instance) {
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      entries.forEach((entry) => {
+        const ele = entry.target as HTMLElement;
+        const ins = observerPool.get(ele);
+        if (!ins) {
+          return;
+        }
 
-      ins?.callbacks?.forEach((fn) => fn(entry, ins.isFirst));
+        ins?.callbacks?.forEach((fn) => fn(entry, ins.isFirst));
 
-      if (ins.isFirst) {
-        ins.isFirst = false;
-      }
+        if (ins.isFirst) {
+          ins.isFirst = false;
+        }
+      });
     });
-  });
+
+    instance = {
+      observer,
+      record: 0,
+    };
+  }
+  return instance;
 }
 export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void;
 /**
- * 监听元素尺寸变化，
- * ele: 监听元素；
- * onResize: resize回调（entry: 尺寸变化元素，isFirst: 是否为初次监听时的回调);
+ * 创建元素尺寸变化监听器，
  */
 export function useResizeObserver() {
+  // 创建监听实例
+  const instance = createObserverInstance();
+
   return {
     /**
      * 监听实例
@@ -50,11 +60,10 @@ export function useResizeObserver() {
     observer: instance,
     /**
      * 创建监听实例
-     * ele: 监听元素
+     * el: 监听元素
      * listener: resize回调, 移除监听时需要指定该监听函数
-     * isFirst: 是否为初次监听时的回调
      */
-    observe: (el?: HTMLElement, listener?: ResizeListenerT) => {
+    observe: (el: HTMLElement, listener: (entry: ResizeObserverEntry, isFirst: boolean) => void) => {
       if (!el || !isFunction(listener)) {
         return null;
       }
@@ -64,11 +73,8 @@ export function useResizeObserver() {
       if (val) {
         val.callbacks.push(listener);
       } else {
-        if (!instance) {
-          instance = createObserver();
-        }
-        instance.observe(el);
-        record++;
+        instance.observer.observe(el);
+        instance.record++;
 
         observerPool.set(el, {
           element: el,
@@ -81,9 +87,10 @@ export function useResizeObserver() {
     },
     /**
      * 移除监听
+     * el: 要移除监听的元素
      * listener: 要移除的监听函数，如果不传，则使用初始化时的onResize回调
      */
-    unobserve: (el?: HTMLElement, listener?: ResizeListenerT) => {
+    unobserve: (el: HTMLElement, listener: (entry: ResizeObserverEntry, isFirst: boolean) => void) => {
       if (!el || !isFunction(listener) || !instance) {
         return;
       }
@@ -94,19 +101,21 @@ export function useResizeObserver() {
         const idx = val.callbacks.indexOf(listener);
         val.callbacks.splice(idx, 1);
 
-        // 当el无监听时，销毁resizeObserver
+        // 当el无监听回调时，不再监听该元素
         if (val.callbacks.length === 0) {
-          instance.unobserve(el);
+          instance.observer.unobserve(el);
           observerPool.delete(el);
+          instance.record--;
 
-          // 无监听元素，就断开
-          record--;
-          if (record === 0) {
-            instance.disconnect();
-            instance = null;
+          // 当无需要监听的元素，就断开
+          if (instance.record === 0) {
+            instance.observer.disconnect();
           }
         }
       }
     },
+    destroy() {
+      instance.observer.disconnect();
+    },
   };
 }
diff --git a/packages/opendesign/src/input-number/OInputNumber.vue b/packages/opendesign/src/input-number/OInputNumber.vue
index b159f3a9abacbe32e3c168d9cd2d06eff6850ccc..c17aa4c55e72a0dcc1e971db929f21010f954d13 100644
--- a/packages/opendesign/src/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/input-number/OInputNumber.vue
@@ -42,6 +42,7 @@ watch(
     if (realValue.value !== val) {
       inputValue.value = number2string(val);
       realValue.value = val ?? 0;
+      lastValue = realValue.value;
     }
   }
 );
diff --git a/packages/opendesign/src/input/OInput.vue b/packages/opendesign/src/input/OInput.vue
index 6b2ad953fbf973546675b67fa0f625bc5298667f..838b753c7342fd1bcde12abeb9023babae376058 100644
--- a/packages/opendesign/src/input/OInput.vue
+++ b/packages/opendesign/src/input/OInput.vue
@@ -121,6 +121,7 @@ const onMouseDown = (e: MouseEvent) => {
         :min-length="props.minLength"
         :get-length="props.getLength"
         :input-on-outlimit="props.inputOnOutlimit"
+        :before-input="props.beforeInput"
         @change="onChange"
         @input="onInput"
         @focus="onFocus"
diff --git a/packages/opendesign/src/input/__demo__/InputMethod.vue b/packages/opendesign/src/input/__demo__/InputMethod.vue
index 6af6c4580665780b85080000b616bdb325ce306b..1f8ba08c0e5e30aa7562bdcbed0aa6ff704e14d8 100644
--- a/packages/opendesign/src/input/__demo__/InputMethod.vue
+++ b/packages/opendesign/src/input/__demo__/InputMethod.vue
@@ -5,6 +5,7 @@ import { OInput } from '../index';
 function numberWithCommas(x: number | string) {
   return String(x).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
+const val1 = ref('123456');
 const val2 = ref('123456');
 const format = (val: string | number) => {
   console.log('format', val);
@@ -15,6 +16,10 @@ const format = (val: string | number) => {
 const printEvent = (evt: string, v?: string) => {
   console.log(`[${evt}]`, v ?? '', 'value:', val2.value);
 };
+
+const beforeInput = (val: string) => {
+  return val.trim();
+};
 </script>
 <template>
   <h4>Format</h4>
@@ -43,5 +48,9 @@ const printEvent = (evt: string, v?: string) => {
       @press-enter="() => printEvent('press-enter')"
     />
   </section>
+  <section>
+    <div>首尾不允许输入空格： val1:{{ val1 }}</div>
+    <OInput v-model="val1" :before-input="beforeInput" />
+  </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/input/__demo__/InputTest.vue b/packages/opendesign/src/input/__demo__/InputTest.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67a0e40fd39661c9bbb806fbb92e3a3ecd19707b
--- /dev/null
+++ b/packages/opendesign/src/input/__demo__/InputTest.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OInput } from '../index';
+
+const val1 = ref('');
+const format = (val: string) => {
+  return val.trim();
+};
+</script>
+<template>
+  <div>val1:{{ val1 }}</div>
+  <section>
+    <p>text:</p>
+    <OInput v-model="val1" :max-length="5" :min-length="2" :before-input="format" />
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/input/__demo__/TheIndex.vue b/packages/opendesign/src/input/__demo__/TheIndex.vue
index ad1129c86ce6ab91f313c26f823b01e7aeba0012..b48b01423185f959f1e209d124d46f0c905da62c 100644
--- a/packages/opendesign/src/input/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/input/__demo__/TheIndex.vue
@@ -10,6 +10,7 @@ import InputSlot from './InputSlot.vue';
 import InputMethod from './InputMethod.vue';
 import InputAutoWidth from './InputAutoWidth.vue';
 import InputValid from './InputValid.vue';
+// import InputTest from './InputTest.vue';
 </script>
 <template>
   <div class="page-demo">
@@ -20,6 +21,7 @@ import InputValid from './InputValid.vue';
     <InputMethod />
     <InputValid />
     <InputAutoWidth />
+    <!-- <InputTest /> -->
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/link/OLink.vue b/packages/opendesign/src/link/OLink.vue
index c6433151096f23f664bc9c078625ff0874202841..c089fed08be49fefc69ad85acac1afffbf530a15 100644
--- a/packages/opendesign/src/link/OLink.vue
+++ b/packages/opendesign/src/link/OLink.vue
@@ -49,7 +49,9 @@ const onClick = (e: MouseEvent) => {
         <component :is="props.icon" />
       </slot>
     </span>
-    <span class="o-link-label"><slot></slot></span>
+    <span
+      ><span class="o-link-label"><slot></slot></span
+    ></span>
     <span v-if="$slots.suffix || props.suffix" class="o-link-suffix">
       <slot name="suffix"><IconLinkArrow class="o-link-icon-arrow" /></slot>
     </span>
diff --git a/packages/opendesign/src/link/__demo__/LinkBasic.vue b/packages/opendesign/src/link/__demo__/LinkBasic.vue
index 093ba55ac26a6bbd6d5062f5e273581b4ba820cd..3d64af25165a692e40bdbeac36fe93f108ebb523 100644
--- a/packages/opendesign/src/link/__demo__/LinkBasic.vue
+++ b/packages/opendesign/src/link/__demo__/LinkBasic.vue
@@ -66,12 +66,12 @@ const linkConfig: LinkConfigT = {
   </section>
   <h4>图标</h4>
   <section>
-    <OLink :href="link" :icon="OIconLink" status="primary" size="large">icon-prefix</OLink>
-    <OLink :href="link" suffix>icon-suffix</OLink>
+    <OLink :href="link" :icon="OIconLink" status="primary" size="large" hover-underline>icon-prefix</OLink>
+    <OLink :href="link" suffix hover-underline>icon-suffix</OLink>
     <OLink :href="link">
       <template #icon><OIconDone /></template>自定义图标链接slot:iconPrefix
     </OLink>
-    <OLink :href="link">
+    <OLink :href="link" hover-underline>
       自定义图标链接slot:iconSuffix<template #suffix><OIconAdd /></template>
     </OLink>
   </section>
@@ -95,5 +95,14 @@ const linkConfig: LinkConfigT = {
       <OLink status="primary" @click="onLinkClick">点击弹窗</OLink>
     </OConfigProvider>
   </section>
+  <h4>换行</h4>
+  <section>
+    <div style="width: 200px">
+      <OLink color="success" suffix hover-underline>
+        The Forum gathered experts from various industries, who offered their insight into the smart manufacturing of today and tomorrow and presented success
+        cases.
+      </OLink>
+    </div>
+  </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/link/style/style.scss b/packages/opendesign/src/link/style/style.scss
index cc7b21aa3d4ea7f811041a5707ee91155b0740dc..5ab258a5e0b34b1f76f74b8a1921db1ddb793844 100644
--- a/packages/opendesign/src/link/style/style.scss
+++ b/packages/opendesign/src/link/style/style.scss
@@ -5,7 +5,6 @@
   cursor: pointer;
   padding: 0 2px;
   color: var(--link-color);
-  display: inline-flex;
   align-items: center;
   text-decoration: none;
   border: none;
@@ -14,7 +13,7 @@
 
   @include hover {
     color: var(--link-color-hover);
-    .o-link-arrow {
+    .o-link-icon-arrow {
       transform: translate3d(4px, 0, 0);
     }
   }
@@ -23,7 +22,7 @@
     color: var(--link-color-active);
   }
 }
-.o-link-arrow {
+.o-link-icon-arrow {
   transition: transform var(--o-easing-standard) var(--o-duration-m2);
 }
 .o-link-hover-underline {
@@ -55,13 +54,15 @@
 }
 
 .o-link-prefix {
-  display: flex;
+  display: inline-flex;
+  vertical-align: middle;
   align-items: center;
   margin-right: var(--link-gap);
   font-size: var(--link-icon-size);
 }
 .o-link-suffix {
-  display: flex;
+  display: inline-flex;
+  vertical-align: middle;
   align-items: center;
   margin-left: var(--link-gap);
   font-size: var(--link-icon-size);
@@ -75,7 +76,7 @@
     color: var(--link-color-disabled);
   }
   @include hover {
-    .o-link-arrow {
+    .o-link-icon-arrow {
       transform: translate3d(0, 0, 0);
     }
     .o-link-label {
diff --git a/packages/opendesign/src/locale/index.ts b/packages/opendesign/src/locale/index.ts
index 26680881154a26607a614536f0f76364f812ad9d..556bfe5aa0966514eb83149091f3937db5d2ac7b 100644
--- a/packages/opendesign/src/locale/index.ts
+++ b/packages/opendesign/src/locale/index.ts
@@ -1,4 +1,4 @@
-import { logger } from '../_utils/log';
+import { log } from '../_utils/log';
 import { getValueByPath } from '../_utils/helper';
 import { isString } from '../_utils/is';
 import { configProviderInjectKey } from '../config-provider';
@@ -36,7 +36,7 @@ export function addLocale(
  */
 export function useLocale(localeKey: string) {
   if (!i18nLanguage.value[localeKey]) {
-    logger.warn(`no ${localeKey} languages found`);
+    log.warn(`no ${localeKey} languages found`);
     return;
   }
   currentLocal.value = localeKey;
@@ -51,7 +51,7 @@ export function useI18n() {
 
   const transform = (key: string, ...args: any[]): string => {
     if (!languages.value) {
-      logger.warn('no languages configed');
+      log.warn('no languages configed');
       return '';
     }
     const value = getValueByPath(languages.value, key);
diff --git a/packages/opendesign/src/option/OOption.vue b/packages/opendesign/src/option/OOption.vue
index 3dbe6e4c6ae4fa6f54968bbcd61cd9ba665fab7a..9f1d1da29946e6cfc57dd4bd0dd8b221939ef1e1 100644
--- a/packages/opendesign/src/option/OOption.vue
+++ b/packages/opendesign/src/option/OOption.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, ref, toRefs, watchEffect } from 'vue';
+import { computed, inject, ref, toRefs, watch } from 'vue';
 import { selectOptionInjectKey } from '../select/provide';
 import { optionProps } from './types';
 import { OCheckbox } from '../checkbox';
@@ -18,19 +18,30 @@ const currentVal = computed(() => {
 });
 
 const isActive = ref(false);
-watchEffect(() => {
-  isActive.value = !!currentVal.value?.includes(value.value);
-
-  // 初始化select的值、相应modelValue变化
-
-  selectInject?.select(
-    {
-      label: label.value || `${value.value}`,
-      value: value.value,
-    },
-    false
-  );
-});
+watch(
+  [currentVal, value],
+  () => {
+    // 响应modelValue变化
+    // 与 selectInject.select 拆分开，避免 modelValue 改变时，不必要地调用selectInject.select
+    isActive.value = Boolean(currentVal.value?.includes(value.value));
+  },
+  // currentVal 会被 OSelect 通过数组下标及push方法修改，所以需要deep
+  { immediate: true, deep: true }
+);
+watch(
+  [value, label],
+  ([newValue, newLabel]) => {
+    // 初始化并同步 select 的候选项
+    selectInject?.select(
+      {
+        label: newLabel || `${newValue}`,
+        value: newValue,
+      },
+      false
+    );
+  },
+  { immediate: true }
+);
 
 const clickOption = () => {
   if (!props.disabled) {
diff --git a/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue b/packages/opendesign/src/select/__demo__/SelectLargeOptions.vue
index 3bb4a62a680f9e7415654e2dc9f6e3ede3760f48..126991fbde3f4fd2ab73fb94822ef733dfe4fd14 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/switch/OSwitch.vue b/packages/opendesign/src/switch/OSwitch.vue
index 8ecb458f59d6b6625986df13dd3fe39a211fcc75..9a4ae721d305c1598f7d78fe983b4b9d66b5d3ef 100644
--- a/packages/opendesign/src/switch/OSwitch.vue
+++ b/packages/opendesign/src/switch/OSwitch.vue
@@ -4,6 +4,7 @@ import { switchProps } from './types';
 import { getRoundClass } from '../_utils/style-class';
 import { IconLoading } from '../_utils/icons';
 import { isPromise, isBoolean, isUndefined } from '../_utils/is';
+import { log } from '../_utils/log';
 
 const props = defineProps(switchProps);
 
@@ -61,7 +62,7 @@ const onClick = (ev: Event) => {
       }
     })
     .catch((err) => {
-      console.warn(`${err}`);
+      log.warn(`${err}`);
     });
 };
 </script>
diff --git a/packages/opendesign/src/tab/OTabPane.vue b/packages/opendesign/src/tab/OTabPane.vue
index 3f293eb0a1ced11e662a9d30b59ac5c88927fc52..8ef99d5e76dbcabc109a0e310b030fffd0405eca 100644
--- a/packages/opendesign/src/tab/OTabPane.vue
+++ b/packages/opendesign/src/tab/OTabPane.vue
@@ -10,6 +10,7 @@ import { tabPaneProps } from './types';
 import { IconClose } from '../_utils/icons';
 import ClientOnly from '../_components/client-only';
 import { isUndefined } from '../_utils/is';
+import { log } from '../_utils/log';
 
 const props = defineProps(tabPaneProps);
 
@@ -23,7 +24,7 @@ const { navsRef, activeValue, lazy } = tabInjection || {};
 
 const instance = getCurrentInstance();
 if (isUndefined(props.value) && isUndefined(props.label)) {
-  console.warn('OTabPane is missing prop: value or lable');
+  log.warn('OTabPane is missing prop: value or lable');
 }
 const paneKey = computed(() => {
   return props.value ?? props.label ?? instance?.uid ?? Math.random();
diff --git a/packages/opendesign/src/textarea/OTextarea.vue b/packages/opendesign/src/textarea/OTextarea.vue
index 5636aa02333139a73bbc52bd9e05df0c614de575..f46aad925dd9fd98d0818930e76247819cfbdd0a 100644
--- a/packages/opendesign/src/textarea/OTextarea.vue
+++ b/packages/opendesign/src/textarea/OTextarea.vue
@@ -137,6 +137,7 @@ const round = getRoundClass(props, 'textarea');
         :min-length="props.minLength"
         :input-on-outlimit="props.inputOnOutlimit"
         :textarea-id="textareaId"
+        :before-input="props.beforeInput"
         @change="onChange"
         @input="onInput"
         @focus="onFocus"
diff --git a/packages/opendesign/src/textarea/__demo__/TextareaBasic.vue b/packages/opendesign/src/textarea/__demo__/TextareaBasic.vue
index d20b80b8167efe97b2702db371d28cb2be6df2eb..98c324c21c8be33bb4d7e6f0689cb844bd708086 100644
--- a/packages/opendesign/src/textarea/__demo__/TextareaBasic.vue
+++ b/packages/opendesign/src/textarea/__demo__/TextareaBasic.vue
@@ -12,6 +12,10 @@ setTimeout(() => {
 const printEvent = (event: string, val?: string | number) => {
   console.log(`[${event}]`, val);
 };
+
+const beforeInput = (val: string) => {
+  return val.trim();
+};
 </script>
 <template>
   <h4>Color & Variant</h4>
@@ -107,5 +111,10 @@ const printEvent = (event: string, val?: string | number) => {
     <div>clearable="false"</div>
     <OTextarea v-model="val1" :max-length="10" size="large" :clearable="false" />
   </section>
+  <h4>beforeInput</h4>
+  <section>
+    <div>输入内容不允许收尾有空格</div>
+    <OTextarea v-model="val1" :max-length="10" size="large" :clearable="false" :before-input="beforeInput" />
+  </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/virtual-list/OVirtualList.vue b/packages/opendesign/src/virtual-list/OVirtualList.vue
index f3657204b6b363fab33ba118e760129ffd1f99db..338244cec5ed3eb9423a1b3e9a480f5a6695be81 100644
--- a/packages/opendesign/src/virtual-list/OVirtualList.vue
+++ b/packages/opendesign/src/virtual-list/OVirtualList.vue
@@ -1,12 +1,16 @@
 <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 { virtualListProps, RenderIndexInfo } from './types';
+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', renderIndex: RenderIndexInfo): void;
+}>();
 /**
  * 设置滚动条参数
  */
@@ -22,18 +26,35 @@ 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,
+  }
+);
+const defaultStartIndex = computed(() => {
+  if (isUndefined(props.defaultStartIndex)) {
+    return 0;
   }
-  return props.list.map((item, index) => ({
-    item,
-    index,
-  }));
+  return Math.max(Math.min(props.defaultStartIndex, props.list.length - 1), 0);
 });
-
 // 可视区域内的起始序号
-const visibleStartIndex = ref(props.defaultStartIndex ?? 0);
+const visibleStartIndex = ref(defaultStartIndex.value ?? 0);
+let visibleStartId: string | number | undefined;
 // 可视区域内的结束序号
 const renderCount = ref(1);
 // 渲染起始序号
@@ -42,9 +63,24 @@ const startIndex = computed(() => {
 });
 // 渲染结束序号
 const endIndex = computed(() => {
-  return Math.min(startIndex.value + renderCount.value + props.buffer * 2, listData.value.length - 1);
+  return Math.min(visibleStartIndex.value + renderCount.value + props.buffer - 1, listData.value.length - 1);
 });
 
+let lastVisibleStartIndex = visibleStartIndex.value;
+let lastRenderCount = renderCount.value;
+const emitRenderChange = () => {
+  if (lastVisibleStartIndex !== visibleStartIndex.value || lastRenderCount !== renderCount.value) {
+    emits('renderChange', {
+      start: startIndex.value,
+      end: endIndex.value,
+      count: renderCount.value,
+      visible: visibleStartIndex.value,
+    });
+    lastVisibleStartIndex = visibleStartIndex.value;
+    lastRenderCount = renderCount.value;
+  }
+};
+
 /**
  * 渲染的数据
  */
@@ -52,27 +88,78 @@ 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();
+  // 当容器高度为0，需要更新offset值
+  if (containerSize.value.height === 0) {
+    offset.value = 0;
+  }
+
+  // 第一次初始化滚动位置后，再根据容器尺寸变化刷新渲染项，未初始化，则不刷新
+  if (!initialScroll) {
+    if (contentSize.value < containerSize.value.height) {
+      visibleStartIndex.value = 0;
+    }
+    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;
+    }
+  }
+
+  // 刷新结束渲染项
+  let count = renderCount.value;
+  for (let i = endIndex.value; i < listMetaData.length; i++) {
+    const meta = listMetaData[i];
+
+    if (meta.top < scrollTop + containerSize.value.height) {
+      count++;
+    }
+  }
+  renderCount.value = count;
+  emitRenderChange();
 };
 
 const contentStyle = computed(() => ({
   '--content-height': `${contentSize.value}px`,
 }));
+
 // 虚拟列表偏移量，用于虚拟滚动
 const offset = ref(0);
 const renderListStyle = computed(() => {
@@ -82,48 +169,107 @@ const renderListStyle = computed(() => {
 });
 
 /**
- * 滚动到指定序号项
- * @param index
+ * 初始化滚动位置
  */
-const scrollToIndex = (index: number) => {
-  if (!wrapperRef.value || index < 0 || index >= listMetaData.length) {
-    return;
-  }
-  wrapperRef.value.scrollTop = listMetaData[index].top;
-};
+let initialScroll = props.itemSize ? true : false;
 
 /**
- * 初始化滚动位置
+ * 将指定项滚动到视口内，不定高场景下，可能存在滚动不准确
+ * @param index 指定项
+ * @param align 'start' | 'end' | 'center' | 'nearest' | number(按start对齐后的偏移量,<0:向上偏移，>0:向下偏移), 默认值'start'，不定高场景下，'end' | 'center'| number 因高度不固定，可能存在滚动不准确;
+ * @param behavior ScrollBehavior, 默认值 'instant'，不定高场景下，仅支持'instant'
  */
-const initialScroll = ref(false);
-watchEffect(() => {
-  if (initialScroll.value) {
-    scrollToIndex(props.defaultStartIndex);
+const scrollToView = (index: number, align: 'start' | 'end' | 'center' | 'nearest' | number = 'start', behavior: ScrollBehavior = 'instant') => {
+  if (!wrapperRef.value) {
+    return;
+  }
+  const toIndex = Math.max(Math.min(listMetaData.length - 1, index), 0);
+
+  const item = listMetaData[toIndex];
+  const itemTop = item.top;
+
+  const cSize = wrapperRef.value.offsetHeight;
+
+  // 计算最终对齐方式
+  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[toIndex].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 {
+  id: string | number;
   index: number;
   top: number;
   bottom: number;
   size: number;
   measured: boolean;
+  isScrolling: 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,
+        isScrolling: false,
+      };
+
+      lastTop += itemSize;
+
+      return metaItem;
+    });
+    contentSize.value = listMetaData[listMetaData.length - 1].bottom;
+  },
+  {
+    immediate: true,
+  }
+);
 
 /**
  * 更新item的相关偏移、高度，总高度
@@ -153,13 +299,15 @@ const updateVisibleCount = (scrollOffset?: number) => {
     return;
   }
 
+  let render = 1;
   for (let i = visibleStartIndex.value + 1; i < listMetaData.length; i++) {
     const meta = listMetaData[i];
-    if (meta.top > scrollSize + containerHeight) {
-      renderCount.value = i - visibleStartIndex.value;
-      break;
+    if (meta.top < scrollSize + containerHeight) {
+      render++;
     }
   }
+  renderCount.value = render;
+  emitRenderChange();
 };
 
 const debounceUpdateVisibleCount = debounceRAF(updateVisibleCount);
@@ -194,12 +342,11 @@ const onScroll = () => {
   const scrollOffset = wrapperRef.value?.scrollTop ?? 0;
   if (props.itemSize) {
     visibleStartIndex.value = Math.floor(scrollOffset / props.itemSize);
-    offset.value = listMetaData[startIndex.value].top;
-    return;
+  } else {
+    visibleStartIndex.value = getStartIndex(scrollOffset);
   }
-
-  visibleStartIndex.value = getStartIndex(scrollOffset);
   offset.value = listMetaData[startIndex.value].top;
+  visibleStartId = listMetaData[visibleStartIndex.value].id;
 
   debounceUpdateVisibleCount(scrollOffset);
 };
@@ -209,20 +356,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 === defaultStartIndex.value && !initialScroll) {
+    // 等渲染后再重新定位滚动初始位置
+    nextTick(() => {
+      scrollToView(defaultStartIndex.value);
+      initialScroll = true;
+    });
   }
 
   debounceUpdateVisibleCount();
@@ -233,8 +391,9 @@ const init = () => {
     return;
   }
   // 先初始化滚动位置
-  scrollToIndex(props.defaultStartIndex);
-  onContainerResize();
+  if (props.itemSize) {
+    scrollToView(defaultStartIndex.value);
+  }
 };
 
 onMounted(() => {
@@ -242,7 +401,7 @@ onMounted(() => {
 });
 
 defineExpose({
-  scrollToIndex,
+  scrollToView,
 });
 </script>
 
@@ -254,11 +413,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 8ca5f6904a0288b5e160852476386769569bce40..63df5df2816832888bb1ed67e5f38ab944e7fa26 100644
--- a/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
+++ b/packages/opendesign/src/virtual-list/__demo__/TheIndex.vue
@@ -1,9 +1,13 @@
 <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>
 <style lang="scss"></style>
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 0000000000000000000000000000000000000000..feab1c8373b68b228f44bdfb1e62c4a173ee7afa
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/__demo__/VirtualListAPI.vue
@@ -0,0 +1,85 @@
+<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 = () => {
+  const to = Math.max(index.value - 1, 0);
+  virtualRef.value?.scrollToView(to, 'center', 'smooth');
+  virtualRef2.value?.scrollToView(to, '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>高度固定且一致， 滚动到居中对齐： 'center'</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>动态高度，滚动到顶部对齐：'start'</h5>
+          <OVirtualList ref="virtualRef2" class="container" :list="list" :default-start-index="defaultStartIndex" :default-item-size="80">
+            <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>
diff --git a/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue b/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
index 00bfc15513116326cbb816918b5e35624e02c1af..48b71cd4396e0f07ded87933aee1bafbd8fa53e9 100644
--- a/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
+++ b/packages/opendesign/src/virtual-list/__demo__/VirtualListBasic.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { OVirtualList } from '../index';
+import { OVirtualList, RenderIndexInfo } 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 = (params: RenderIndexInfo) => {
+  console.log(params.start, params.end, params.count, params.visible);
+};
 </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">
+      <h5>高度固定且一致 default-start-index: 10</h5>
+      <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
@@ -55,8 +61,8 @@ const scrollbarProps: Partial<BaseScrollerPropsT> = {
       </OVirtualList>
     </div>
     <div class="col">
-      <h5>动态高度</h5>
-      <OVirtualList class="container" :list="list" :default-start-index="10">
+      <h5>动态高度 default-start-index: 10</h5>
+      <OVirtualList class="container" :list="list" :default-start-index="10" @render-change="onRenderChange">
         <template #default="{ item, index }">
           <div :key="item.label" class="section" :class="`item-${index + 1}`" :style="{ height: item.height + 'px' }" @click="onClick(item)">
             <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' }" @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
@@ -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 0000000000000000000000000000000000000000..050a49bb4bc2ee65d567c2686c23f03037dbf715
--- /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, RenderIndexInfo } 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 = (renderIndex: RenderIndexInfo) => {
+  const { start, end, visible, count } = renderIndex;
+  console.log(start, end, visible, count);
+  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 4923c4034bc9bbb46d356ee8ee05e212afb4f279..0a9d7f94f2c4ba89d90b6a6c5608b1d57d1712ed 100644
--- a/packages/opendesign/src/virtual-list/types.ts
+++ b/packages/opendesign/src/virtual-list/types.ts
@@ -1,13 +1,27 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import { BaseScrollerPropsT } from '../scrollbar';
 
+export interface RenderIndexInfo {
+  start: number;
+  end: number;
+  visible: number;
+  count: number;
+}
+
 /**
  * 虚拟滚动的子项不能使用margin，会导致总高度计算不准确（无法包含margin）
  */
 
 export const virtualListProps = {
   /**
-   * 列表数据
+   * 默认滚动到第几项
+   */
+  defaultStartIndex: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 列表数据，如果数据存在动态追加，需要每一项需包含唯一ID
    */
   list: {
     type: Array<any>,
@@ -21,11 +35,11 @@ export const virtualListProps = {
     type: Number,
   },
   /**
-   * 默认滚动到第几项
+   * 不定高时，每一项的默认高度
    */
-  defaultStartIndex: {
+  defaultItemSize: {
     type: Number,
-    default: 0,
+    default: 80,
   },
   /**
    * 前后预留项，减少滚动式空白
diff --git a/packages/portal-ak/src/pages/upload/TheBasic.vue b/packages/portal-ak/src/pages/upload/TheBasic.vue
index 971fe59ae1ac8b12860996e47d96b455a6a46296..9c9661a404b9087358d5297cb08bf8affa21468d 100644
--- a/packages/portal-ak/src/pages/upload/TheBasic.vue
+++ b/packages/portal-ak/src/pages/upload/TheBasic.vue
@@ -10,7 +10,7 @@ const defaultFileList2: UploadFileT[] = [
   },
   {
     id: '2',
-    name: 'test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2.png',
+    name: 'test2.png',
     status: 'failed',
     message: '上传失败',
   },
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 7ad4dee2c4d8ad6b10e028754dfd17c92cdad500..dcb2d826eede18ce5785eb9a5f1861e1e48778b8 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -294,7 +294,7 @@ export const routes = [
   {
     path: '/figure',
     name: 'Figure',
-    component: () => import('@components/figure/__demo__/IndexFigure.vue'),
+    component: () => import('@components/figure/__demo__/TheIndex.vue'),
     meta: {
       title: '图片 Figure',
     },
diff --git a/packages/scripts/LICENSE b/packages/scripts/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..3c871743a652d34aac592a4aa9ffb5af074c9be1
--- /dev/null
+++ b/packages/scripts/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sig-OpenDesign
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index 4c48c6aa0fd00465180d738b340b328b4d02447f..a64179dd64b0d1f02969f6c9ab1930f56588ad8a 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -1 +1,5 @@
 # scripts for open-design
+
+# 0.0.20
+
+- 【fix】修复图标路径兼容性、文件名转变量名兼容性、不同实例同 id 的相互影响
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 2a4a96188a8b4b6d5dd70948b719a94dba1ab257..f5a6dd0d8db410d7bd3422c064ec8feafa7f856b 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,7 +1,8 @@
 {
   "name": "@opensig/open-scripts",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "opendesign component Scripts",
+  "license": "MIT",
   "main": "dist/index.js",
   "bin": {
     "open-scripts": "dist/index.js"