@douyinfe/semi-foundation 2.90.13 → 2.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.90.13",
+    "version": "2.91.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -6483,6 +6483,126 @@
             "require": "./lib/cjs/sideSheet/variables.scss",
             "default": "./lib/es/sideSheet/variables.scss"
         },
+        "./lib/es/sidebar/animation.scss": {
+            "import": "./lib/es/sidebar/animation.scss",
+            "require": "./lib/cjs/sidebar/animation.scss",
+            "default": "./lib/es/sidebar/animation.scss"
+        },
+        "./sidebar/animation.scss": {
+            "import": "./lib/es/sidebar/animation.scss",
+            "require": "./lib/cjs/sidebar/animation.scss",
+            "default": "./lib/es/sidebar/animation.scss"
+        },
+        "./lib/es/sidebar/constants.js": {
+            "types": "./lib/es/sidebar/constants.d.ts",
+            "import": "./lib/es/sidebar/constants.js",
+            "require": "./lib/cjs/sidebar/constants.js"
+        },
+        "./lib/es/sidebar/constants": {
+            "types": "./lib/es/sidebar/constants.d.ts",
+            "import": "./lib/es/sidebar/constants.js",
+            "require": "./lib/cjs/sidebar/constants.js"
+        },
+        "./sidebar/constants.js": {
+            "types": "./lib/es/sidebar/constants.d.ts",
+            "import": "./lib/es/sidebar/constants.js",
+            "require": "./lib/cjs/sidebar/constants.js"
+        },
+        "./sidebar/constants": {
+            "types": "./lib/es/sidebar/constants.d.ts",
+            "import": "./lib/es/sidebar/constants.js",
+            "require": "./lib/cjs/sidebar/constants.js"
+        },
+        "./lib/es/sidebar/containerFoundation.js": {
+            "types": "./lib/es/sidebar/containerFoundation.d.ts",
+            "import": "./lib/es/sidebar/containerFoundation.js",
+            "require": "./lib/cjs/sidebar/containerFoundation.js"
+        },
+        "./lib/es/sidebar/containerFoundation": {
+            "types": "./lib/es/sidebar/containerFoundation.d.ts",
+            "import": "./lib/es/sidebar/containerFoundation.js",
+            "require": "./lib/cjs/sidebar/containerFoundation.js"
+        },
+        "./sidebar/containerFoundation.js": {
+            "types": "./lib/es/sidebar/containerFoundation.d.ts",
+            "import": "./lib/es/sidebar/containerFoundation.js",
+            "require": "./lib/cjs/sidebar/containerFoundation.js"
+        },
+        "./sidebar/containerFoundation": {
+            "types": "./lib/es/sidebar/containerFoundation.d.ts",
+            "import": "./lib/es/sidebar/containerFoundation.js",
+            "require": "./lib/cjs/sidebar/containerFoundation.js"
+        },
+        "./lib/es/sidebar/mcpCofContentFoundation.js": {
+            "types": "./lib/es/sidebar/mcpCofContentFoundation.d.ts",
+            "import": "./lib/es/sidebar/mcpCofContentFoundation.js",
+            "require": "./lib/cjs/sidebar/mcpCofContentFoundation.js"
+        },
+        "./lib/es/sidebar/mcpCofContentFoundation": {
+            "types": "./lib/es/sidebar/mcpCofContentFoundation.d.ts",
+            "import": "./lib/es/sidebar/mcpCofContentFoundation.js",
+            "require": "./lib/cjs/sidebar/mcpCofContentFoundation.js"
+        },
+        "./sidebar/mcpCofContentFoundation.js": {
+            "types": "./lib/es/sidebar/mcpCofContentFoundation.d.ts",
+            "import": "./lib/es/sidebar/mcpCofContentFoundation.js",
+            "require": "./lib/cjs/sidebar/mcpCofContentFoundation.js"
+        },
+        "./sidebar/mcpCofContentFoundation": {
+            "types": "./lib/es/sidebar/mcpCofContentFoundation.d.ts",
+            "import": "./lib/es/sidebar/mcpCofContentFoundation.js",
+            "require": "./lib/cjs/sidebar/mcpCofContentFoundation.js"
+        },
+        "./lib/es/sidebar/sidebar.css": {
+            "import": "./lib/es/sidebar/sidebar.css",
+            "require": "./lib/cjs/sidebar/sidebar.css",
+            "default": "./lib/es/sidebar/sidebar.css"
+        },
+        "./sidebar/sidebar.css": {
+            "import": "./lib/es/sidebar/sidebar.css",
+            "require": "./lib/cjs/sidebar/sidebar.css",
+            "default": "./lib/es/sidebar/sidebar.css"
+        },
+        "./lib/es/sidebar/sidebar.scss": {
+            "import": "./lib/es/sidebar/sidebar.scss",
+            "require": "./lib/cjs/sidebar/sidebar.scss",
+            "default": "./lib/es/sidebar/sidebar.scss"
+        },
+        "./sidebar/sidebar.scss": {
+            "import": "./lib/es/sidebar/sidebar.scss",
+            "require": "./lib/cjs/sidebar/sidebar.scss",
+            "default": "./lib/es/sidebar/sidebar.scss"
+        },
+        "./lib/es/sidebar/utils.js": {
+            "types": "./lib/es/sidebar/utils.d.ts",
+            "import": "./lib/es/sidebar/utils.js",
+            "require": "./lib/cjs/sidebar/utils.js"
+        },
+        "./lib/es/sidebar/utils": {
+            "types": "./lib/es/sidebar/utils.d.ts",
+            "import": "./lib/es/sidebar/utils.js",
+            "require": "./lib/cjs/sidebar/utils.js"
+        },
+        "./sidebar/utils.js": {
+            "types": "./lib/es/sidebar/utils.d.ts",
+            "import": "./lib/es/sidebar/utils.js",
+            "require": "./lib/cjs/sidebar/utils.js"
+        },
+        "./sidebar/utils": {
+            "types": "./lib/es/sidebar/utils.d.ts",
+            "import": "./lib/es/sidebar/utils.js",
+            "require": "./lib/cjs/sidebar/utils.js"
+        },
+        "./lib/es/sidebar/variables.scss": {
+            "import": "./lib/es/sidebar/variables.scss",
+            "require": "./lib/cjs/sidebar/variables.scss",
+            "default": "./lib/es/sidebar/variables.scss"
+        },
+        "./sidebar/variables.scss": {
+            "import": "./lib/es/sidebar/variables.scss",
+            "require": "./lib/cjs/sidebar/variables.scss",
+            "default": "./lib/es/sidebar/variables.scss"
+        },
         "./lib/es/skeleton/animation.scss": {
             "import": "./lib/es/skeleton/animation.scss",
             "require": "./lib/cjs/skeleton/animation.scss",
@@ -9375,8 +9495,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.90.13",
-        "@douyinfe/semi-json-viewer-core": "2.90.13",
+        "@douyinfe/semi-animation": "2.91.0",
+        "@douyinfe/semi-json-viewer-core": "2.91.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -9397,7 +9517,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e1a57f7201bb0a16d7f74a721bef0599796ea765",
+    "gitHead": "ead51562c1d0499a5fcde1d828d57d3fd3d2b314",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/radio/variables.scss

@@ -1,33 +1,33 @@
-$color-radio_default-border-default: var(--semi-color-text-3); // 默认态描边颜色
-$color-radio_default-bg-default: transparent; // 默认态背景颜色
-$color-radio_default-bg-hover: var(--semi-color-fill-0); // 悬浮态背景颜色
-$color-radio_default-bg-active: var(--semi-color-fill-1); // 按下态背景颜色
-$color-radio_default-border-hover: var(--semi-color-focus-border); // 悬浮态描边颜色
-$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中时悬浮态描边颜色
-$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中时按下态描边颜色
+$color-radio_default-border-default: var(--semi-color-text-3); // 单选圆圈描边颜色 - 默认态
+$color-radio_default-bg-default: transparent; // 单选圆圈背景颜色 - 默认态
+$color-radio_default-bg-hover: var(--semi-color-fill-0); // 单选圆圈背景颜色 - 悬浮态
+$color-radio_default-bg-active: var(--semi-color-fill-1); // 单选圆圈背景颜色 - 按下态
+$color-radio_default-border-hover: var(--semi-color-focus-border); // 单选圆圈描边颜色 - 悬浮态
+$color-radio_checked-border-hover: var(--semi-color-primary-hover); // 选中状态单选圆圈描边颜色 - 悬浮态
+$color-radio_checked-border-active: var(--semi-color-primary-active); // 选中状态单选圆圈描边颜色 - 按下态
 
 $color-radio_default-text-default: var(--semi-color-text-0); // 选项文本颜色
 $color-radio_extra-text-default: var(--semi-color-text-2); // 辅助文本颜色
 
-$color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中项悬浮态背景颜色
-$color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中项按下态背景颜色
-$color-radio_primary-border-default: var(--semi-color-primary); // 选中项描边颜色
-$color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景颜色
-$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项圆点颜色
+$color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中状态单选圆圈背景颜色 - 悬浮态
+$color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中状态单选圆圈背景颜色 - 按下态
+$color-radio_primary-border-default: var(--semi-color-primary); // 选中状态单选圆圈描边颜色 - 默认态
+$color-radio_primary-bg-default: var(--semi-color-primary); // 选中状态单选圆圈背景颜色 - 默认态
+$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中状态单选圆圈中心圆点颜色
 
-$color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
-$color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
-$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中项禁用态描边颜色
+$color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中状态单选圆圈背景颜色 - 禁用态
+$color-radio_default-border-disabled: var(--semi-color-border); // 单选圆圈描边颜色 - 禁用态
+$color-radio_checked-border-disabled: var(--semi-color-primary-disabled); // 选中状态单选圆圈描边颜色 - 禁用态
 
-$color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态背景颜色
+$color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 单选圆圈背景颜色 - 禁用态
 $color-radio_disabled-bg-hover: transparent;
 $color-radio_disabled-text-default: var(--semi-color-disabled-text); // 禁用态文本颜色
-$color-radio_disabled-border-default: var(--semi-color-border); // 禁用态描边颜色
-$color-radio_checked-icon-disabled: rgba(var(--semi-white), 1); // 禁用态圆点颜色
+$color-radio_disabled-border-default: var(--semi-color-border); // 单选圆圈描边颜色 - 禁用态
+$color-radio_checked-icon-disabled: rgba(var(--semi-white), 1); // 选中且禁用状态下中心圆点颜色
 
 $color-radio_buttonRadio-text-default: var(--semi-color-text-1); // 按钮样式单选文本颜色
 $color-radio_buttonRadio-bg-default: var(--semi-color-fill-0); // 按钮样式单选背景颜色
-$color-radio_buttonRadio-text-checked-hover: var(--semi-color-primary); // 按钮样式单选选中项文本颜色
+// $color-radio_buttonRadio-text-checked-hover: var(--semi-color-primary); // 按钮样式单选选中项文本颜色
 $color-radio_buttonRadio-text-disabled: var(--semi-color-disabled-text); // 按钮样式单选禁用态文本颜色
 
 $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-1); // 按钮样式单选悬浮态背景色
@@ -48,9 +48,9 @@ $color-radio_cardRadioGroup_addon-text-default: var(--semi-color-text-0); // 卡
 $color-radio_cardRadioGroup_extra-text-default: var(--semi-color-text-2); // 卡片样式单选辅助文字颜色
 $color-radio_cardRadioGroup_checked_disabled-border-default: var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 默认态
 $color-radio_cardRadioGroup_checked_disabled-border-hover:  var(--semi-color-primary-disabled); // 卡片样式选中项禁用态描边颜色 - 悬浮态
-$color-radio_card-bg-hover: var(--semi-color-white); // 单选圆点颜色
-$color-radio_card-bg-active: var(--semi-color-white); // 单选圆点颜色 - 按下态
-$color-radio_card-bg-default: var(--semi-color-white); // 单选圆点颜色 - 悬浮态
+$color-radio_card-bg-hover: var(--semi-color-white); // 卡片模式下单选圆圈背景颜色 - 悬浮态
+$color-radio_card-bg-active: var(--semi-color-white); // 卡片模式下单选圆圈背景颜色 - 按下态
+$color-radio_card-bg-default: var(--semi-color-white); // 卡片模式下单选圆圈背景颜色 - 默认态
 
 $color-radio_primary-outline-focus: var(--semi-color-primary-light-active); // 轮廓颜色 - 按键聚焦
 

package/select/variables.scss

@@ -34,29 +34,28 @@ $color-select_main-text-default: var(--semi-color-text-0); // 选择器输入框
 $color-select-icon-default: var(--semi-color-text-2); // 选择器输入框图标颜色
 $color-select_clearBtn-text-default: var(--semi-color-text-2); // 选择器输入框清空按钮颜色 - 默认态
 $color-select_clearBtn-text-hover: var(--semi-color-primary); // 选择器输入框清空按钮颜色 - 悬停态
-$color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
+// $color-select_input-bg-default: transparent; // 选择器输入框清空按钮颜色 - 悬停态
 $color-select_input_disabled-bg: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色
 $color-select_input_disabled-border: var(--semi-color-border); // 禁用选择器输入框描边颜色
 $color-select_input_disabled-border-focus: transparent; // 禁用选择器输入框描边颜色 - 聚焦态
 $color-select_input_disabled-text: var(--semi-color-disabled-text); // 禁用选择器输入框回填内容文字颜色
-$color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 悬停态
-$color-select_input_disabled-bg-focus: var(--semi-color-disabled-fill); // 选择器输入框回填内容文字颜色 - 聚焦态
+$color-select_input_disabled-bg-hover: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色 - 悬停态
+$color-select_input_disabled-bg-focus: var(--semi-color-disabled-fill); // 禁用选择器输入框背景色 - 聚焦态
 
 $color-select_input_placeholder-text: var(--semi-color-text-2); // 选择器输入框占位文本文字颜色
 
-$color-select_option_main-text: var(--semi-color-text-0); // 选择器菜单选项文本颜色
-$color-select_option_keyword-text: var(--semi-color-primary); // 选择器菜单选项匹配搜索结果文本颜色
-$color-select_option-bg-default: transparent; // 选择器菜单选项背景颜色 - 默认态
-$color-select_option-icon-default: transparent; // 选择器菜单选项图标颜色 - 默认态
-$color-select_option-bg-hover: var(--semi-color-fill-0); // 选择器菜单选项背景颜色 - 悬停态
-$color-select_option-bg-active: var(--semi-color-fill-1); // 选择器菜单选项背景颜色 - 按下态
-$color-select_option_disabled-text: var(--semi-color-disabled-text); // 禁用选择器菜单选项文字颜色
-$color-select_option_disabled-bg: transparent; // 禁用选择器菜单选项背景颜色
-$color-select_option-icon-active: var(--semi-color-text-2); // 禁用选择器菜单选项图标颜色 - 选中态
-$color-select_option-border-default: var(--semi-color-border); // 分组选择器菜单项描边颜色
-$color-select-option-bg-selected: transparent; // 选择器菜单选项背景颜色 - 选中态
-$color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
-$color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_option_main-text: var(--semi-color-text-0); // 选择器下拉菜单选项文本颜色
+$color-select_option_keyword-text: var(--semi-color-primary); // 选择器下拉菜单选项匹配搜索结果文本颜色
+$color-select_option-icon-default: transparent; // 选择器下拉菜单选项图标颜色 - 默认态
+$color-select_option-bg-hover: var(--semi-color-fill-0); // 选择器下拉菜单选项背景颜色 - 悬停态
+$color-select_option-bg-active: var(--semi-color-fill-1); // 选择器下拉菜单选项背景颜色 - 按下态
+$color-select_option_disabled-text: var(--semi-color-disabled-text); // 禁用选择器下拉菜单选项文字颜色
+// $color-select_option_disabled-bg: transparent; // 禁用选择器下拉菜单选项背景颜色
+$color-select_option-icon-active: var(--semi-color-text-2); // 选择器下拉菜单选项图标颜色 - 选中态
+$color-select_option-border-default: var(--semi-color-border); // 选择器下拉菜单分组标题分割线颜色
+$color-select-option-bg-selected: transparent; // 选择器下拉菜单选项背景颜色 - 选中态
+$color-select_create_tips-text: var(--semi-color-text-2); // 选择器下拉菜单新建选项提示文本颜色
+$color-select_group-text: var(--semi-color-text-2); // 选择器下拉菜单分组标题文本颜色
 
 $color-select_prefix_suffix_text-default: var(--semi-color-text-2); // 选择器输入框前后缀文本颜色
 
@@ -65,12 +64,12 @@ $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择
 $height-select_large: $height-control-large; // 选择器输入框高度 - 大尺寸
 $height-select_small: $height-control-small; // 选择器输入框高度 - 小尺寸
 $height-select_default: $height-control-default; // 选择器输入框高度 - 默认尺寸
-$width-select_option_tick: $width-icon-small; // 选择器菜单项选中对勾图标大小
+$width-select_option_tick: $width-icon-small; // 选择器下拉菜单项选中对勾图标大小
 $width-select-border: 1px; // 选择器输入框描边宽度
 $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
-$width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
+$width-select_group_top-border: $border-thickness-control; // 选择器下拉菜单分组标题描边宽度
 
 $height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
 $height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
@@ -80,27 +79,27 @@ $width-select-border-hover: $width-select-border;  // 选择器输入框描边
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
-$spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
+$spacing-select_option_tick-marginRight: $spacing-tight; // 选择器下拉菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
 $spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
 $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
 $spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
 $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
-$spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
-$spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
-$spacing-select_group-paddingBottom: $spacing-extra-tight; // 选择器菜单分组标题底部内边距
-$spacing-select_group-paddingLeft: $spacing-base-tight + $width-select_option_tick + $spacing-select_option_tick-marginRight; // 选择器菜单分组标题左侧外边距
-$spacing-select_group-paddingRight: $spacing-base; // 选择器菜单分组标题右侧内边距
+$spacing-select_group-marginTop: $spacing-extra-tight; // 选择器下拉菜单分组标题顶部外边距
+$spacing-select_group-paddingTop: $spacing-base-tight; // 选择器下拉菜单分组标题顶部内边距
+$spacing-select_group-paddingBottom: $spacing-extra-tight; // 选择器下拉菜单分组标题底部内边距
+$spacing-select_group-paddingLeft: $spacing-base-tight + $width-select_option_tick + $spacing-select_option_tick-marginRight; // 选择器下拉菜单分组标题左侧内边距
+$spacing-select_group-paddingRight: $spacing-base; // 选择器下拉菜单分组标题右侧内边距
 $spacing-select_loading_wrapper-paddingLeft: $spacing-base; // 选择器加载左侧内边距
 $spacing-select_loading_wrapper-paddingRight: $spacing-base; // 选择器加载右侧内边距
 $spacing-select_loading_wrapper-paddingTop: $spacing-tight; // 选择器加载顶部内边距
 $spacing-select_loading_wrapper-paddingBottom: $spacing-tight; // 选择器加载底部内边距
 $spacing-select_multiple_content_wrapper_empty-marginLeft: $spacing-tight; // 多项选择器空回填内容为空时左侧内边距
 $spacing-select_multiple_selection-marginLeft: $spacing-extra-tight; // 多项选择器回填内容左侧内边距
-$spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项左侧内边距
-$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
-$spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
-$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
+$spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器下拉菜单项左侧内边距
+$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器下拉菜单项右侧内边距
+$spacing-select_option-paddingTop: $spacing-tight; // 选择器下拉菜单项顶部内边距
+$spacing-select_option-paddingBottom: $spacing-tight; // 选择器下拉菜单项底部内边距
 
 
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距

package/sidebar/animation.scss

@@ -0,0 +1,7 @@
+$animation_duration_sidebar_inner-show: 180ms; // 侧边栏打开-动画持续时间
+$animation_function_sidebar_inner-show: cubic-bezier(0.25, 0.46, 0.45, 0.94); // 侧边栏打开-过渡曲线
+$animation_delay_sidebar_inner-show: 0ms; // 侧边栏打开-延迟时间
+
+$animation_duration_sidebar_inner-hide: 180ms; // 侧边栏关闭-动画持续时间
+$animation_function_sidebar_inner-hide: cubic-bezier(0.25, 0.46, 0.45, 0.94); // 侧边栏关闭-过渡曲线
+$animation_delay_sidebar_inner-hide: 0ms; // 侧边栏关闭-延迟时间

package/sidebar/constants.ts

@@ -0,0 +1,41 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    SIDEBAR: `${BASE_CLASS_PREFIX}-sidebar`,
+    COLLAPSE: `${BASE_CLASS_PREFIX}-sidebar-collapse`,
+    SIDEBAR_CONTENT: `${BASE_CLASS_PREFIX}-sidebar-content`,
+    MCP_CONFIGURE_CONTENT: `${BASE_CLASS_PREFIX}-sidebar-mcp-configure-content`,
+    ANNOTATION_CONTENT: `${BASE_CLASS_PREFIX}-sidebar-annotation_content`,
+    ANNOTATION_ITEM: `${BASE_CLASS_PREFIX}-sidebar-annotation-item`,
+    ANNOTATION: `${BASE_CLASS_PREFIX}-sidebar-annotation`,
+    OPTIONS: `${BASE_CLASS_PREFIX}-sidebar-options`,
+    FILE: `${BASE_CLASS_PREFIX}-sidebar-file`,
+};
+
+const strings = {
+    MODE: {
+        MAIN: 'main',
+        CODE: 'code',
+        FILE: 'file'
+    },
+    MCP_MODE: {
+        INNER: 'inner' as const,
+        CUSTOM: 'custom' as const
+    },
+    DIRECTION: {
+        left: true, right: false,
+        top: false, bottom: false, 
+        topLeft: false, topRight: false, 
+        bottomLeft: false, bottomRight: false,
+    },
+    JSON_VIEWER_OPTIONS: {
+        readOnly: true,
+        autoWrap: true,
+    }
+   
+};
+
+export {
+    cssClasses,
+    strings
+};

package/sidebar/containerFoundation.ts

@@ -0,0 +1,77 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import KeyCode from '../utils/keyCode';
+
+export interface ContainerProps {
+    title?: any;
+    resizable?: boolean;
+    style?: Record<string, any>;
+    className?: string;
+    defaultSize?: { width?: number | string; height?: number | string };
+    onCancel?: (e: any) => void;
+    children?: any;
+    visible?: boolean;
+    motion?: boolean;
+    afterVisibleChange?: (isVisible: boolean) => void;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    showClose?: boolean
+}
+
+export interface ContainerState {
+    displayNone: boolean;
+    onCancelReturnPromiseStatus?: "pending"|"fulfilled"|"rejected"
+}
+
+export interface ContainerAdapter extends DefaultAdapter<ContainerProps, ContainerState> {
+    notifyCancel: (e: any) => void;
+    notifyVisibleChange: (visible: boolean) => void;
+    setOnKeyDownListener: () => void;
+    removeKeyDownListener: () => void;
+    toggleDisplayNone: (displayNone: boolean) => void
+}
+
+export default class ContainerFoundation extends BaseFoundation<ContainerAdapter> {
+    constructor(adapter: ContainerAdapter) {
+        super({ ...ContainerFoundation.defaultAdapter, ...adapter });
+    }
+
+    init = () => {};
+
+    destroy = () => {
+        this.afterHide();
+    };
+
+    handleCancel(e: any) {
+        this._adapter.notifyCancel(e);
+    }
+
+    beforeShow() {
+        this._adapter.setOnKeyDownListener();
+    }
+
+    afterHide() {
+        this._adapter.removeKeyDownListener();
+    }
+
+    handleKeyDown(e: any) {
+        const { closeOnEsc } = this.getProps();
+        if (closeOnEsc && e.keyCode === KeyCode.ESC) {
+            e.stopPropagation();
+            this.handleCancel(e);
+            return;
+        }
+    }
+
+    onVisibleChange(visible: boolean) {
+        this._adapter.notifyVisibleChange(visible);
+    }
+
+    toggleDisplayNone = (displayNone: boolean) => {
+        this._adapter.toggleDisplayNone(displayNone);
+    }
+
+    handleAnimationEnd = () => {
+        const { visible } = this.getProps();
+        this.toggleDisplayNone(!visible);
+    }
+}

package/sidebar/mcpCofContentFoundation.ts

@@ -0,0 +1,106 @@
+import { throttle } from 'lodash';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { strings } from './constants';
+import { getFilterResult } from './utils';
+
+export interface MCPOption {
+    icon?: any;
+    label?: string;
+    value?: string;
+    desc?: any;
+    active?: boolean;
+    disabled?: boolean;
+    configure?: boolean
+}
+
+export interface MCPConfigureContentProps {
+    className?: string;
+    options?: MCPOption[];
+    customOptions?: MCPOption[];
+    filter?: (inputValue: string, option: MCPOption) => boolean;
+    placeholder?: string;
+    style?: any;
+    onStatusChange?: (options: MCPOption[], custom: boolean) => void;
+    onSearch?: (inputValue: string, custom: boolean) => void;
+    onAddClick?: (e: any) => void;
+    onConfigureClick?: (e: any, option: MCPOption) => void;
+    onEditClick?: (e: any, option: MCPOption) => void;
+    renderItem?: (props: { 
+        option: MCPOption; 
+        custom: boolean
+    }) => any
+
+}
+
+export type MCPConfigureMode = 'inner' | 'custom';
+
+export interface MCPConfigureContentState {
+    mode: MCPConfigureMode;
+    inputValue: string;
+    showOptions: MCPOption[];
+    cachedOptions: MCPOption[];
+    cachedCustomOptions: MCPOption[]
+}
+
+export interface MCPConfigureContentAdapter extends DefaultAdapter<MCPConfigureContentProps, MCPConfigureContentState> {
+    notifyConfigureClick: (e: any, option: MCPOption) => void;
+    notifyEditClick: (e: any, option: MCPOption) => void;
+    notifyStatusChange?: (options: MCPOption[], custom: boolean) => void;
+    notifyAddClick?: (e: any) => void
+    
+}
+
+export default class MCPConfigureContentFoundation extends BaseFoundation<MCPConfigureContentAdapter> {
+    constructor(adapter: MCPConfigureContentAdapter) {
+        super({ ...adapter });
+    }
+
+    handleSearch = (value: string) => {
+        this.setState({ inputValue: value });
+        this.updateShowOptions(value);
+    }
+
+    updateShowOptions = throttle((value: string, mode?: MCPConfigureMode) => {
+        let realMode = mode ?? this.getState('mode');
+        const { options = [], customOptions = [], filter } = this.getProps();
+        let showOptions = [];
+        if (realMode === strings.MCP_MODE.INNER) {
+            showOptions = value ? getFilterResult(value, options, filter) : options;
+        } else {
+            showOptions = value ? getFilterResult(value, customOptions, filter) : customOptions;
+        }
+        this.setState({ showOptions });
+    }, 300)
+
+    handleModeChange = (e: any) => {
+        const newMode = e.target.value;
+        this.setState({ mode: newMode });
+        this.updateShowOptions(this.getState('inputValue'), newMode);
+
+    }
+
+    onConfigureButtonClick = (e: React.MouseEvent<HTMLButtonElement>, option: MCPOption) => {
+        this._adapter.notifyConfigureClick(e, option);
+    }
+
+    onEditButtonClick = (e: React.MouseEvent<HTMLButtonElement>, option: MCPOption) => {
+        this._adapter.notifyEditClick(e, option);
+    }
+
+    handleStatusChange = (item: MCPOption, checked: boolean) => {
+        const { options = [], customOptions = [] } = this.getProps();
+        let newOptions = [];
+        const mode = this.getState('mode');
+        if (mode === strings.MCP_MODE.INNER) {
+            newOptions = options.map(option => option.value === item.value ? { ...option, active: checked } : option);
+        } else {
+            newOptions = customOptions.map(option => option.value === item.value ? { ...option, active: checked } : option);
+        }
+        this._adapter.notifyStatusChange(newOptions, mode === strings.MCP_MODE.CUSTOM);
+    }
+
+    handleAddClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        this._adapter.notifyAddClick(e);
+    }
+   
+}