@douyinfe/semi-foundation 2.90.13 → 2.91.0

package/lib/cjs/sidebar/sidebar.scss

@@ -0,0 +1,677 @@
+@import './variables.scss';
+@import './animation.scss';
+
+$module: #{$prefix}-sidebar;
+
+.#{$module} {
+
+    &-main {
+        .#{$module}-container-content {
+            overflow: hidden;
+        }
+
+        &-content-wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        &-content {
+            padding: $spacing-sidebar_main_content-padding;
+            height: 100%;
+            box-sizing: border-box;
+            overflow: auto;
+        }
+    }
+
+    // base container
+    &-container {
+        height: 100%;
+        border-left: $width-sidebar_container-borderLeft solid $color-sidebar_container-borderLeft;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        position: relative;
+
+        &-header {
+            display: flex;
+            align-items: center;
+            padding: $spacing-sidebar_container_header-paddingY $spacing-sidebar_container_header-paddingRight $spacing-sidebar_container_header-paddingY $spacing-sidebar_container_header-paddingLeft;
+            border-bottom: $width-sidebar_container_header_borderBottom solid $color-sidebar_container_header-borderBottom;
+
+            &-title {
+                flex: 1;
+                @include font-size-header-6;
+                font-weight: $font-weight-bold;
+            }
+
+            &-closeBtn {
+                flex-shrink: 0;
+            }
+
+        }
+
+        &-content {
+            flex: 1 1;
+            overflow: hidden;
+            // overflow: auto;
+        }
+
+        .#{$prefix}-toast-wrapper {
+            position: absolute;
+        }
+
+    }
+
+    @keyframes #{$module}-slideShow_right {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes #{$module}-slideHide_right {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(100%);
+        }
+    }
+
+    &-animation-content_show {
+        animation: #{$module}-slideShow_right $animation_duration_sidebar_inner-show $animation_function_sidebar_inner-show $animation_delay_sidebar_inner-show;
+        animation-fill-mode: forwards;
+    }
+
+    &-animation-content_hide {
+        animation: #{$module}-slideHide_right $animation_duration_sidebar_inner-hide $animation_function_sidebar_inner-hide $animation_delay_sidebar_inner-hide;
+        animation-fill-mode: forwards;
+    }
+
+
+    // mcp configure content
+    &-mcp-configure-content {
+        padding: $spacing-sidebar_mcp_content-paddingY $spacing-sidebar_mcp_content-paddingX;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        box-sizing: border-box;
+
+        &-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &-count {
+                @include font-size-small;              
+                vertical-align: middle;
+                color: $color-sidebar_mcp_header_counter-text;
+            }
+        }
+
+        &-search {
+            margin: $spacing-sidebar_mcp_search-marginY $spacing-sidebar_mcp_search-marginX;
+        }
+
+        &-search-container {
+            display: flex;
+            column-gap: $spacing-sidebar_mcp_search_container-columnGap;
+        }
+
+        &-item-container {
+            overflow-y: auto;
+        }
+
+        &-item {
+            padding: $spacing-sidebar_mcp_item-paddingY $spacing-sidebar_mcp_item-paddingX;
+            display: flex;
+            align-items: center;
+            border-bottom: $width-sidebar_mcp_item-borderBottom solid $color-sidebar_mcp_item-borderBottom;
+
+            &-sign {
+                width: $width-sidebar_mcp_item_sign;
+                height: $width-sidebar_mcp_item_sign;
+                margin-right: $spacing-sidebar_mcp_item_sign-marginRight;
+                flex-shrink: 0;
+
+                .#{$prefix}-icon {
+                    font-size: $font-sidebar_mcp_item_sign_icon-fontSize;
+                }
+            }
+
+            &-content {
+                justify-content: center;
+                flex: 1;
+                min-width: 0;
+                margin-right: $spacing-sidebar_mcp_item_content-marginRight;
+
+                &-label {
+                    @include font-size-regular;
+                    font-weight: $font-weight-bold;
+                    color: $color-sidebar_mcp_item_label;
+                }
+
+                &-desc {
+                    @include font-size-small;
+                    color: $color-sidebar_mcp_item_desc;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    max-width: 100%;
+                }
+            }
+
+            &-button {
+                flex-shrink: 0;
+
+                &-configure {
+                    margin-right: $spacing-sidebar_mcp_item_button_configure-marginRight;
+                }
+
+                &.#{$prefix}-button.#{$prefix}-button-with-icon-only  {
+                    width: $width-sidebar_mcp_item_button;
+                    height: $width-sidebar_mcp_item_button;
+                }
+               
+            }
+        }
+
+        &-custom-empty {
+            margin-top: $spacing-sidebar_mcp_custom_empty-marginTop;
+        }
+    }
+
+    &-annotation {
+        .#{$module}-container-content {
+            padding: $spacing-sidebar_annotation_container-padding;
+            overflow: auto;
+        }
+
+        &-content {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: $spacing-sidebar_annotation_content-gap;
+            width: 100%;
+        }
+
+        &-item {
+            cursor: pointer;
+
+            &-title {
+                // 最多两行
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: normal;
+                max-width: 100%;
+                display: -webkit-box;
+                line-clamp: 2;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                @include font-size-regular;
+                color: var(--semi-color-text-0);
+                font-weight: $font-weight-bold;
+            }
+
+            &-footer {
+                display: flex;
+                column-gap: $spacing-sidebar_annotation_footer-columnGap;
+                align-items: center;
+
+                &-logo {
+                    font-size: $font-sidebar_annotation_footer_logo-fontSize;
+                    width: $width-sidebar_annotation_footer_logo;
+                    height: $width-sidebar_annotation_footer_logo;
+                }
+
+                &-text {
+                    @include font-size-small;
+                    color: var(--semi-color-text-0);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    flex-grow: 1;
+                }
+
+                &-order {
+                    box-sizing: border-box;
+                    min-width: $width-sidebar_annotation_footer_order-minWidth;
+                    padding: $spacing-sidebar_annotation_footer_order-paddingY $spacing-sidebar_annotation_footer_order-paddingX;
+                    height: $height-sidebar_annotation_footer_order;
+                    border-radius: $radius-sidebar_annotation_footer_order;
+                    background-color: var(--semi-color-fill-1);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    @include font-size-small;
+                    color: var(--semi-color-text-2);
+                }
+            }
+
+            &-text {
+                padding: $spacing-sidebar_annotation_text-paddingY $spacing-sidebar_annotation_text-paddingX;
+                width: 100%;
+                row-gap: $spacing-sidebar_annotation_content-gap;
+                display: flex;
+                flex-direction: column;
+
+                &-detail {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: normal;
+                    max-width: 100%;
+                    display: -webkit-box;
+                    line-clamp: 4;
+                    -webkit-line-clamp: 4;
+                    -webkit-box-orient: vertical;
+                    @include font-size-small;
+                    color: var(--semi-color-text-2);
+                }
+            }
+
+            &-video {
+                border-radius: $radius-sidebar_annotation_video;
+                border: $width-sidebar_annotation_video-border solid $color-sidebar_annotation_video-border;
+                overflow: hidden;
+                width: calc((100% - #{$spacing-sidebar_annotation_content-gap}) / 2);
+                box-sizing: border-box;
+
+                &-content {
+                    padding: $spacing-sidebar_annotation_video_content-paddingTop $spacing-sidebar_annotation_video_content-paddingRight $spacing-sidebar_annotation_video_content-paddingBottom $spacing-sidebar_annotation_video_content-paddingLeft;
+                    display: flex;
+                    flex-direction: column;
+                    row-gap: $spacing-sidebar_annotation_content-gap;
+                }
+
+                .#{$module}-annotation-item-title {
+                    height: $height-sidebar_annotation_video_item_title;
+                }
+
+                &-img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+
+                    &-wrapper {
+                        position: relative;
+                        width: 100%;
+                        height: $height-sidebar_annotation_video_img-wrapper;
+                    }
+                }
+
+                &-play {
+                    position: absolute;
+                    top: $spacing-sidebar_annotation_video_play-top;
+                    right: $spacing-sidebar_annotation_video_play-right;
+                    border: 1px solid var(--semi-color-bg-0);
+                    background: var(--semi-color-text-2);
+                    color: var(--semi-color-bg-0);
+                    border-radius: 50%;
+                    width: $width-sidebar_annotation_video_play;
+                    height: $width-sidebar_annotation_video_play;
+
+                    &.#{$prefix}-icon {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: $font-sidebar_annotation_video_play_icon-fontSize;
+                    }
+                    
+                }
+
+                &-duration {
+                    padding: $spacing-sidebar_annotation_video_duration-paddingY $spacing-sidebar_annotation_video_duration-paddingX;
+                    position: absolute;
+                    bottom: $spacing-sidebar_annotation_video_duration-bottom;
+                    right: $spacing-sidebar_annotation_video_duration-right;
+                    background-color: $color-sidebar_annotation_video_duration-bg;
+                    border-radius: $radius-sidebar_annotation_video_duration;
+                    @include font-size-small;
+                    color: $color-sidebar_annotation_video_duration-text;
+                }
+
+                &-title {
+                    @include font-size-regular;
+                    color: $color-sidebar_annotation_video_title-text;
+                }
+            }
+        }
+    }
+
+    &-code-content {
+        height: 100%;
+    }
+
+    &-code-content, &-main-content {
+
+        .#{$prefix}-codeHighlight-defaultTheme pre[class*=language-] {
+            margin: 0px;
+            padding-top: 0px;
+            padding-bottom: 0px;
+            background-color: transparent;
+            overflow-y: hidden;
+            overflow-x: auto;
+        }
+
+        .#{$prefix}-codeHighlight .line-numbers .line-numbers-rows {
+            border-right: none;
+        }
+
+         .#{$prefix}-json-viewer {
+            padding-top: 0px;
+            padding-bottom: 0px;
+            background-color: transparent;
+        }
+
+    }
+
+    &-collapse {
+
+        .#{$prefix}-collapse-item {
+            border: $width-sidebar_collapse_item_border solid $color-sidebar_collapse_item-border;
+            border-radius: $radius-sidebar_collapse_item;
+
+            &:not(:last-child) {
+                margin-bottom: $spacing-sidebar_collapse_item_marginBottom;
+            }
+        }
+
+        .#{$prefix}-collapse-header {
+            padding: $spacing-sidebar_collapse_header-paddingY $spacing-sidebar_collapse_header-paddingX;
+            margin: 0px;
+            font-weight: $font-weight-regular; 
+        }
+
+        &-header-content {
+            display: flex;
+            align-items: center;
+            gap: $spacing-sidebar_collapse_header_content_gap;
+            width: 100%;
+            padding-right: $spacing-sidebar_collapse_header_content_paddingRight;
+
+            .#{$prefix}-icon {
+                color: var(--semi-color-text-1);
+            }
+        }
+
+        &-header-text {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &-header-expand-btn {
+            flex-shrink: 0;
+
+            &.semi-button.semi-button-with-icon-only {
+                padding: $spacing-sidebar_collapse_header_expand_btn-padding;
+                width: $width-sidebar_collapse_header_expand_btn;
+                height: $width-sidebar_collapse_header_expand_btn;
+            }
+        }
+
+        .#{$prefix}-collapse-item-active {
+            .#{$prefix}-collapsible-wrapper {
+                border-top: $width-sidebar_collapse_item_content-borderTop solid $color-sidebar_collapse_item_content-borderTop;
+            }
+        }
+
+        &-code {
+            .#{$prefix}-collapse-content {
+                padding: 12px 0px;
+            }
+        }
+
+    }
+
+    &-options {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: $spacing-sidebar_options-gap;
+        padding: $spacing-sidebar_options-paddingY $spacing-sidebar_options-paddingX;
+        border-bottom: $width-sidebar_options-borderBottom solid $color-sidebar_options-borderBottom;
+
+        &-button {
+            .semi-button-content-right {
+                margin-left: $spacing-sidebar_options_button-marginLeft;
+            }
+        }
+
+        &-normal {
+            &.semi-button-primary.semi-button-light {
+                color: $color-sidebar_options_button-text;
+                font-weight: $font-weight-regular;
+            }
+        }
+    }
+
+    &-file {
+        
+        .tiptap {
+            font-size: $font-sidebar_file-fontSize;
+            line-height: $font-sidebar_file-lineHeight;
+
+            ::selection {
+                background: $color-sidebar_file_selection-bg; 
+            }
+
+            ::-moz-selection {
+                background: $color-sidebar_file_selection-bg;
+            }
+    
+            p.is-editor-empty:first-child::before {
+                color: $color-sidebar_file_placeholder-text;
+                content: attr(data-placeholder);
+                float: left;
+                height: 0;
+                pointer-events: none;
+            }
+    
+            p {
+                margin: 0px;
+                white-space: pre-wrap;
+                color: $color-sidebar_file-text;
+            }
+
+            blockquote {
+                border-left: $width-sidebar_file_blockquote-borderLeft solid $color-sidebar_file_blockquote-borderLeft;
+                margin: $spacing-sidebar_file_blockquote-marginY $spacing-sidebar_file_blockquote-marginX;
+                padding-left: $spacing-sidebar_file_blockquote-paddingLeft;
+            }
+    
+            &:focus {
+                outline: none;
+            }
+
+            pre {
+                background-color: $color-sidebar_file_pre_bg;
+                padding: $spacing-sidebar_file_pre-paddingY $spacing-sidebar_file_pre-paddingX;
+                border-radius: $radius-sidebar_file_pre;
+                overflow: auto;
+                font-size: $font-sidebar_file_pre-fontSize;
+                line-height: $font-sidebar_file_pre-lineHeight;
+                border: $width-sidebar_file_pre-border solid $color-sidebar_file_pre-border;
+
+                code {
+                    background-color: transparent;
+                }
+            }
+            
+            code {
+                background-color: $color-sidebar_file_code-bg;
+                padding: $spacing-sidebar_file_code-paddingY $spacing-sidebar_file_code-paddingX;
+            }
+
+            hr {
+                border: none;
+                border-top: $width-sidebar_file_hr-border solid $color-sidebar_file_hr-borderTop;
+            }
+
+            span.select {
+                display: inline-block;
+                background-color: $color-sidebar_file_selection-bg;
+                line-height: $font-sidebar_file-lineHeight;
+            }
+
+            &.ProseMirror img:not([data-type="emoji"] img) {
+                outline: .125rem solid transparent;
+                margin: 12px 0;
+            }
+
+            &.ProseMirror img:not([data-type="emoji"] img).ProseMirror-selectednode {
+                outline-color: var(--semi-color-text-0);
+            }
+
+            .tiptap-image-slot {
+                .uploadFail, .validateFail, .uploading, .success {
+                    .#{$prefix}-upload-drag-area {
+                        display: none;
+                    }
+                }
+                
+            }
+
+        }
+
+        &-menu-bar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: $spacing-sidebar_file_menu_bar-gap;
+            border-top: $width-sidebar_menu_bar-borderTop solid $color-sidebar_menu_bar-borderTop;
+            border-bottom: $width-sidebar_menu_bar-borderBottom solid $color-sidebar_menu_bar-borderBottom;
+            padding: $spacing-sidebar_file_menu_bar-paddingY $spacing-sidebar_file_menu_bar-paddingX;
+
+            &-dropdown-item-active {
+                color: $color-sidebar_menu_bar_dropdown_item-active-text;
+                background: $color-sidebar_menu_bar_dropdown_item-active-bg;
+            }
+
+            .#{$prefix}-divider-vertical {
+                margin: $spacing-sidebar_menu_bar_divider-margin;
+            }
+
+            &-btn {
+
+                &-active {
+
+                    &.#{$prefix}-button-tertiary.#{$prefix}-button-borderless {
+                        background: $color-sidebar_menu_bar_btn-active-bg;
+                    }
+                }
+
+                &-codeblock {
+                    font-size: $font-sidebar_file_menu_bar_codeblock-fontSize;
+                    line-height: $font-sidebar_file_menu_bar_codeblock-lineHeight;
+                    padding: $spacing-sidebar_file_menu_bar_codeblock-padding;
+                }
+
+            }
+
+            &-link-dropdown {
+                padding: $spacing-sidebar_file_menu_bar-link-dropdown-padding;
+                display: flex; 
+                align-items: center;
+                justify-content: center;
+
+                &-btn-active {
+
+                    &.#{$prefix}-button-tertiary.#{$prefix}-button-borderless {
+                        color: $color-sidebar_menu_bar_link_dropdown_btn-active;
+                    }  
+                }
+            } 
+        }
+
+    }
+
+    &-detail {
+        .#{$module}-file {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+
+            &-content {
+                height: 100%;
+            }
+
+            &-editor {
+                overflow: auto;
+                flex: 1;
+                padding: $spacing-sidebar_detail_file_editor-paddingY $spacing-sidebar_detail_file_editor-paddingX;
+            }
+        }
+
+        .#{$module}-code-content {
+            overflow: auto;
+        }
+    }
+
+    &-main {
+
+        .#{$module}-code-content {
+            height: 200px;
+            overflow: auto;
+        }
+
+        .#{$module}-collapse-file {
+            .#{$prefix}-collapse-content {
+                max-height: $height-sidebar_main_collapse_file_content-maxHeight;
+                overflow: auto;
+            }
+        }
+
+
+
+        .#{$module}-collapse-code {
+            .#{$prefix}-collapse-content {
+                max-height: $height-sidebar_main_collapse_code_content-maxHeight;
+                overflow: auto;
+            }
+        }
+
+        .#{$prefix}-codeHighlight {
+            height: 200px;
+            overflow: auto;
+            // margin-top: -12px;
+        }
+
+        
+    }
+
+    &-detail-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        color: $color-sidebar_detail_header-text;
+        padding: $spacing-sidebar_detail_header-padding;
+
+        &-left {
+            display: flex;
+            flex-direction: row;
+            column-gap: $spacing-sidebar_detail_header_left-columnGap;
+            align-items: center;
+        }
+
+        &-title {
+            @include font-size-header-6;
+            font-weight: $font-weight-bold;
+        }
+
+        &-right {
+            display: flex;
+            flex-direction: row;
+            column-gap: $spacing-sidebar_detail_header_right-columnGap;
+            align-items: center;
+        }
+    }
+}

package/lib/cjs/sidebar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { MCPOption } from './mcpCofContentFoundation';
+export declare function getFilterResult(inputValue: string, options?: MCPOption[], customFilter?: (value: string, option: MCPOption) => boolean): MCPOption[];
+export declare function baseFilter(value: string, option: MCPOption): boolean;

package/lib/cjs/sidebar/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baseFilter = baseFilter;
+exports.getFilterResult = getFilterResult;
+function getFilterResult(inputValue) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let customFilter = arguments.length > 2 ? arguments[2] : undefined;
+  const lowCaseInputValue = inputValue.toLowerCase();
+  const filteredOptions = options.filter(option => {
+    if (typeof customFilter === 'function') {
+      return customFilter(lowCaseInputValue, option);
+    } else {
+      return baseFilter(lowCaseInputValue, option);
+    }
+  });
+  return filteredOptions;
+}
+function baseFilter(value, option) {
+  const labelText = typeof option.label === 'string' ? option.label : '';
+  if (labelText.toLowerCase().includes(value)) {
+    return true;
+  }
+  const descText = typeof option.desc === 'string' ? option.desc : '';
+  return descText.toLowerCase().includes(value);
+}