@alifd/chat 0.2.0 → 0.3.0-beta.0

package/lib/float-button/view/inner-drawer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerDrawer = void 0;
+exports.InnerDrawer = InnerDrawer;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
@@ -201,7 +201,6 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
                             react_1.default.createElement(next_1.Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
                     react_1.default.createElement("div", { className: `${cls}-body` }, showPane ? children : null))), mountTarget)));
 }
-exports.InnerDrawer = InnerDrawer;
 function FloatButtonByInnerDrawer(props) {
     const { width, title, target, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = props, rests = tslib_1.__rest(props, ["width", "title", "target", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
     return (react_1.default.createElement(float_button_1.default, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {

package/lib/icon/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @component 标签
+ * @en Icon
+ * @type 通用 - General
+ * @remarks 同 Next Icon - Same as Next.Icon
+ * @when Icon
+ */
+import React from 'react';
+import type { IconProps } from '@alifd/next/types/icon';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<IconProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>>, "key" | keyof IconProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<IconProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/icon/icon").default>, {}>;
+export default _default;

package/lib/icon/index.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ * @component 标签
+ * @en Icon
+ * @type 通用 - General
+ * @remarks 同 Next Icon - Same as Next.Icon
+ * @when Icon
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const Icon = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
+    return (react_1.default.createElement(next_1.Icon, Object.assign({}, props, { ref: ref, className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}icon`, className), size: size })));
+});
+const IconWithSub = (0, utils_1.assignSubComponent)(Icon, {
+    displayName: 'Icon',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(IconWithSub);

package/lib/icon/main.scss

@@ -0,0 +1 @@
+@import "../core/variables.scss";

package/lib/icon/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/button/style2';
+import './main.scss';

package/lib/icon/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/button/style2");
+require("./main.scss");

package/lib/icon/types.d.ts

@@ -0,0 +1,43 @@
+import type * as React from 'react';
+import { type CommonProps } from '@alifd/next';
+export interface IconSvgProps extends React.SVGAttributes<SVGSVGElement>, CommonProps {
+    /**
+     * 指定显示哪种图标
+     * @en Type of icon
+     */
+    type?: string;
+    /**
+     * 指定图标大小
+     * @en Size of icon
+     * @defaultValue 'medium'
+     */
+    size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
+}
+/**
+ * @api Icon
+ */
+export interface IconProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 指定显示哪种图标
+     * @en Type of icon
+     */
+    type?: string;
+    /**
+     * 指定图标大小
+     * @en Size of icon
+     * @defaultValue 'medium'
+     */
+    size?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
+}
+export interface IconOptions {
+    /**
+     * 如果页面上已经有同 id 的标签，那么不会再加载这个图标库
+     * @en If there is already a tag with the same ID on the page, the icon library will not be loaded again
+     */
+    scriptUrl: string;
+    /**
+     * extra common props of icon-font
+     * @skip
+     */
+    extraCommonProps?: React.SVGAttributes<SVGSVGElement>;
+}

package/lib/icon/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/index.d.ts

@@ -9,4 +9,12 @@ export { default as Input } from './input';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
 export { default as PersonPicker } from './person-picker';
+export { default as Message } from './message';
+export { default as Icon } from './icon';
+export { default as Balloon } from './balloon';
+export { default as List } from './list';
+export { default as ImagePreview } from './ImagePreview';
+export { default as HTMLRenderer } from './HTMLRenderer';
+export { default as Markdown } from './markdown';
+export { default as CardLoading } from './card-loading';
 export declare const version: string;

package/lib/index.js

@@ -1,29 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+exports.version = exports.CardLoading = exports.Markdown = exports.HTMLRenderer = exports.ImagePreview = exports.List = exports.Balloon = exports.Icon = exports.Message = exports.PersonPicker = exports.TimePicker = exports.DatePicker = exports.Input = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
+const tslib_1 = require("tslib");
 var button_1 = require("./button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return tslib_1.__importDefault(button_1).default; } });
 var card_1 = require("./card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return tslib_1.__importDefault(card_1).default; } });
 var feedback_1 = require("./feedback");
-Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return __importDefault(feedback_1).default; } });
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return tslib_1.__importDefault(feedback_1).default; } });
 var float_button_1 = require("./float-button");
-Object.defineProperty(exports, "FloatButton", { enumerable: true, get: function () { return __importDefault(float_button_1).default; } });
+Object.defineProperty(exports, "FloatButton", { enumerable: true, get: function () { return tslib_1.__importDefault(float_button_1).default; } });
 var text_1 = require("./text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return tslib_1.__importDefault(text_1).default; } });
 var tag_1 = require("./tag");
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return tslib_1.__importDefault(tag_1).default; } });
 var tab_1 = require("./tab");
-Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(tab_1).default; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return tslib_1.__importDefault(tab_1).default; } });
 var input_1 = require("./input");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return __importDefault(input_1).default; } });
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return tslib_1.__importDefault(input_1).default; } });
 var date_picker_1 = require("./date-picker");
-Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(date_picker_1).default; } });
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
 var time_picker_1 = require("./time-picker");
-Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return __importDefault(time_picker_1).default; } });
+Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(time_picker_1).default; } });
 var person_picker_1 = require("./person-picker");
-Object.defineProperty(exports, "PersonPicker", { enumerable: true, get: function () { return __importDefault(person_picker_1).default; } });
-exports.version = '0.2.0';
+Object.defineProperty(exports, "PersonPicker", { enumerable: true, get: function () { return tslib_1.__importDefault(person_picker_1).default; } });
+var message_1 = require("./message");
+Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return tslib_1.__importDefault(message_1).default; } });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return tslib_1.__importDefault(icon_1).default; } });
+var balloon_1 = require("./balloon");
+Object.defineProperty(exports, "Balloon", { enumerable: true, get: function () { return tslib_1.__importDefault(balloon_1).default; } });
+var list_1 = require("./list");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return tslib_1.__importDefault(list_1).default; } });
+var ImagePreview_1 = require("./ImagePreview");
+Object.defineProperty(exports, "ImagePreview", { enumerable: true, get: function () { return tslib_1.__importDefault(ImagePreview_1).default; } });
+var HTMLRenderer_1 = require("./HTMLRenderer");
+Object.defineProperty(exports, "HTMLRenderer", { enumerable: true, get: function () { return tslib_1.__importDefault(HTMLRenderer_1).default; } });
+var markdown_1 = require("./markdown");
+Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return tslib_1.__importDefault(markdown_1).default; } });
+var card_loading_1 = require("./card-loading");
+Object.defineProperty(exports, "CardLoading", { enumerable: true, get: function () { return tslib_1.__importDefault(card_loading_1).default; } });
+exports.version = '0.3.0-beta.0';

package/lib/input/index.d.ts

@@ -18,7 +18,6 @@
  * | SPACE       | Trigger the onClick event    |
  */
 import React from 'react';
-import { Input as NextInput } from '@alifd/next';
 export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<NextInput>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextInput, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/input").InputProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>> & Pick<import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>, "focus" | "getInputNode">>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/input").InputProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>> & Pick<import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>, "focus" | "getInputNode">, {}>;
 export default _default;

package/lib/list/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @component 列表
+ * @en List
+ * * @remarks 同 Next List，列表组件。- Same as Next List component.
+ * @type 通用 - General
+ * @when 最基础的列表展示，可承载文字、列表、图片、段落。
+ */
+export { List as default } from '@alifd/next';

package/lib/list/index.js

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * @component 列表
+ * @en List
+ * * @remarks 同 Next List，列表组件。- Same as Next List component.
+ * @type 通用 - General
+ * @when 最基础的列表展示，可承载文字、列表、图片、段落。
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var next_1 = require("@alifd/next");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return next_1.List; } });

package/lib/list/style.d.ts

@@ -0,0 +1 @@
+import '@alifd/next/lib/list/style2';

package/lib/list/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/list/style2");

package/lib/list/types.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import type { LoadingProps } from '@alifd/next/types/loading';
+import { type CommonProps } from '@alifd/next';
+type HTMLAttributesWeak = Omit<React.HTMLAttributes<HTMLElement>, 'title'>;
+/**
+ * @api List
+ */
+export interface ListProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    /**
+     * 列表头部
+     * @en List header
+     */
+    header?: ReactNode;
+    /**
+     * 列表尾部
+     * @en List footer
+     */
+    footer?: ReactNode;
+    /**
+     * 列表尺寸
+     * @en List size
+     * @defaultValue 'medium'
+     */
+    size?: 'medium' | 'small';
+    /**
+     * 是否显示分割线
+     * @en Whether to show the divider
+     * @defaultValue true
+     */
+    divider?: boolean;
+    /**
+     * children
+     */
+    children?: ReactNode;
+    /**
+     * 列表项数据源
+     * @en List item data source
+     */
+    dataSource?: unknown[];
+    /**
+     * 当使用 dataSource 时，可以用 renderItem 自定义渲染列表项
+     * @param current - 当前遍历的项 - The current item
+     * @param index - 当前遍历的项的索引 - The index of the current item
+     * @returns - 自定义渲染的 ReactElement - The ReactElement be customized
+     */
+    renderItem?: (current: unknown, index: number) => ReactElement;
+    /**
+     * loading 状态控制
+     * @en Loading state control
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * 自定义 Loading 组件
+     * @en Custom Loading component
+     * @param props - 透传 props - Pass through props
+     * @returns - 自定义的 Loading 组件 - Custom Loading component
+     * @remarks 请务必透传 props, 使用方式：loadingComponent=\{props =\> \<Loading \{...props\}/\>\}
+     */
+    loadingComponent?: (props: LoadingProps) => ReactElement;
+    /**
+     * 当列表为空时显示的内容
+     * @en The content displayed when the list is empty
+     */
+    emptyContent?: ReactNode;
+}
+/**
+ * @api List.Item
+ */
+export interface ListItemProps extends HTMLAttributesWeak, CommonProps {
+    /**
+     * 列表元素的标题
+     * @en The title of the list item
+     */
+    title?: ReactNode;
+    /**
+     * 列表元素的描述内容
+     * @en The description of the list item
+     */
+    description?: ReactNode;
+    /**
+     * 列表元素的头像 / 图标 / 图片内容
+     * @en The avatar / icon / image content of the list item
+     */
+    media?: ReactNode;
+    /**
+     * 额外内容
+     * @en Extra content
+     */
+    extra?: ReactNode;
+}
+export {};

package/lib/list/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/markdown/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MarkdownProps } from './types';
+import 'highlight.js/styles/github.css';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<MarkdownProps & React.RefAttributes<HTMLDivElement>, "key" | keyof MarkdownProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/lib/markdown/index.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const markdown_it_1 = tslib_1.__importDefault(require("markdown-it"));
+const HTMLRenderer_1 = tslib_1.__importDefault(require("../HTMLRenderer"));
+const next_1 = require("@alifd/next");
+const utils_1 = require("../utils");
+const dingtalk_im_emoji_1 = require("@ali/dingtalk-im-emoji");
+const highlight_js_1 = tslib_1.__importDefault(require("highlight.js")); // 引入 highlight.js
+require("highlight.js/styles/github.css"); // 引入代码高亮样式
+/**
+ * @component Markdown
+ * @en Markdown
+ * @type 通用 - General
+ * @remarks Markdown 组件用于解析和渲染 Markdown 文本内容。 - Markdown component used to parse and render Markdown text content.
+ * @when 需要解析和渲染 Markdown 文本内容时使用。 - Use when you need to parse and render Markdown text content.
+ */
+const Markdown = (0, react_1.forwardRef)(({ className, onReady, content }, ref) => {
+    (0, react_1.useEffect)(() => {
+        // 初始化表情库
+        (0, dingtalk_im_emoji_1.init)();
+        onReady === null || onReady === void 0 ? void 0 : onReady();
+    }, [onReady]);
+    const containerRef = (0, react_1.useRef)(null);
+    // 处理 HTML 标签
+    const processedContent = (0, react_1.useMemo)(() => {
+        const regex = /<font\s+([^>]+)>([^<]+)<\/font>/g;
+        return content.replace(regex, (match, attributes, text) => {
+            let sizeToken = '';
+            let colorTokenV2 = '';
+            // 提取属性
+            const sizeTokenMatch = attributes.match(/sizeToken=([\w_]+)/);
+            const colorTokenV2Match = attributes.match(/colorTokenV2=([\w_]+)/);
+            if (sizeTokenMatch) {
+                sizeToken = sizeTokenMatch[1].replace(/-/g, '_');
+            }
+            if (colorTokenV2Match) {
+                colorTokenV2 = colorTokenV2Match[1].replace(/-/g, '_');
+            }
+            // 生成样式
+            const styleParts = [];
+            if (sizeToken) {
+                styleParts.push(`font-size: var(--${sizeToken})`);
+            }
+            if (colorTokenV2) {
+                styleParts.push(`color: var(--${colorTokenV2})`);
+            }
+            const style = styleParts.join('; ');
+            return `<span style="${style}">${text}</span>`;
+        });
+    }, [content]);
+    // 转换表情符号
+    let transformedContent = (0, react_1.useMemo)(() => {
+        return (0, dingtalk_im_emoji_1.transformTextWithEmoji)(processedContent, {
+            genFrame: (name, url) => {
+                return {
+                    htmlTag: 'img',
+                    selfClose: true,
+                    attr: {
+                        draggable: 'false',
+                        style: 'vertical-align: text-center; display: inline-block; pointer-events: none;', // 使用相对单位和 inline-block 显示
+                        class: 'emoji',
+                        title: '[' + name + ']',
+                        src: url.url || url.staticURL,
+                        alt: name,
+                    },
+                };
+            },
+        });
+    }, [processedContent]);
+    // 渲染 Markdown
+    const html = (0, react_1.useMemo)(() => {
+        const md = new markdown_it_1.default({
+            html: true, // 确保允许解析 HTML 标签
+            xhtmlOut: true,
+            breaks: true,
+            langPrefix: 'language-',
+            linkify: true,
+            typographer: true,
+            highlight: (str, lang) => {
+                if (lang && highlight_js_1.default.getLanguage(lang)) {
+                    try {
+                        return highlight_js_1.default.highlight(lang, str, true).value;
+                    }
+                    catch (__) { }
+                }
+                return '';
+            }
+        });
+        // console.log(transformedContent, processedContent);
+        // 这里的 </ xx> 都被转成了&#x2F ， 所以会font标签的元素 后面都会多一个 </ xx>
+        transformedContent = transformedContent.replace(/<&#x2F;/g, '</');
+        return md.render(transformedContent);
+    }, [transformedContent]);
+    (0, react_1.useEffect)(() => {
+        if (containerRef.current) {
+            // 清除现有的 .code-block-header 元素
+            const existingHeaders = containerRef.current.querySelectorAll('.code-block-header');
+            existingHeaders.forEach(header => header.remove());
+            const codeBlocks = containerRef.current.querySelectorAll('pre code');
+            codeBlocks.forEach((block) => {
+                var _a;
+                const code = block.textContent || '';
+                const pre = block.parentElement;
+                const lang = block.className.replace('language-', '') || 'plaintext';
+                // 创建代码块头部
+                const header = document.createElement('div');
+                header.className = 'code-block-header';
+                // 创建语言标签
+                const languageSpan = document.createElement('span');
+                languageSpan.className = 'code-block-language';
+                languageSpan.textContent = lang;
+                // 创建复制按钮
+                const copyButton = document.createElement('button');
+                copyButton.className = 'code-block-copy';
+                copyButton.textContent = '复制';
+                copyButton.onclick = () => {
+                    navigator.clipboard.writeText(code).then(() => {
+                        copyButton.textContent = '已复制';
+                        setTimeout(() => {
+                            copyButton.textContent = '复制';
+                        }, 1000);
+                    });
+                };
+                header.appendChild(languageSpan);
+                header.appendChild(copyButton);
+                // 插入头部到代码块前
+                (_a = pre === null || pre === void 0 ? void 0 : pre.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(header, pre);
+            });
+        }
+    }, [html]);
+    return (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(className) },
+        react_1.default.createElement(HTMLRenderer_1.default, { imagePreview: true }, html)));
+});
+const MarkdownWithSub = (0, utils_1.assignSubComponent)(Markdown, {
+    displayName: 'Markdown',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(MarkdownWithSub);

package/lib/markdown/main.scss

@@ -0,0 +1,153 @@
+$primaryColor: #0080ff;
+$alternativePrimaryColor: $primaryColor;
+$mistPrimaryColor: fadeout($alternativePrimaryColor,93);
+$mediumTextColor: hsla(230,60%,11%,0.7);
+$subTextColor:  hsla(230,90%,11%,0.45);
+
+@mixin f-single-line() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  
+.box {
+  max-width: 100%;
+}
+
+.box img:only-child, .box video:only-child, .box .image:only-child {
+    display: inline-block;
+    margin: 0;
+    font-size: inherit;
+    vertical-align: inherit;
+}
+
+.emoji {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+.title {
+  font-size: 16px;
+  font-weight: bolder;
+  margin-bottom: 12px;
+}
+
+.text > div {
+  color:$subTextColor;
+}
+
+.reference {
+  margin-top: 6px;
+  font-size: 12px;
+
+  &-tip {
+    display: flex;
+    margin: 0 -16px 6px 0;
+    justify-content: flex-end;
+
+    &-inner {
+      @include f-single-line();
+      background: linear-gradient(to right, transparent, $mistPrimaryColor);
+      padding: 0 16px 0 32px;
+      color: $mediumTextColor;
+      min-width: 0;
+      flex: 0 1 auto;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+}
+
+.trustworthyRiskAlert {
+  font-size: 12px;
+  line-height: 18px;
+  color: $subTextColor;
+  margin-bottom: 8px;
+}
+.code-block-header {
+    display: flex;
+    height:24px;
+    // margin-top: 8px;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #EAECED;
+    padding: 5px 10px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  .code-block-language {
+    font-weight: bold;
+  }
+  
+  .code-block-copy {
+    color: var(--common_level3_base_color);
+    border: none;
+    border-radius: 4px;
+    height: 20px;
+    cursor: pointer;
+  }
+  
+  pre {
+    background-color: #f8f8f8;
+    border-bottom-left-radius: 14px;
+    border-bottom-right-radius: 14px;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+
+  .code-block-copy:hover {
+    background-color: #d2d2d2;
+  }
+
+:root {
+    --common_hypertitle_text_style__font_size: 64px;
+    --common_largetitle_text_style__font_size: 32px;
+    --common_h1_text_style__font_size: 24px;
+    --common_h2_text_style__font_size: 20px;
+    --common_h3_text_style__font_size: 18px;
+    --common_h4_text_style__font_size: 16px;
+    --common_h5_text_style__font_size: 15px;
+    --common_body_text_style__font_size: 14px;
+    --common_footnote_text_style__font_size: 12px;
+
+    --common_yellow1_color: #e5c442;
+    --common_orange1_color: #f1a13b;
+    --common_red1_color: #ec6033;
+    --common_pink1_color: #da5388;
+    --common_purple1_color: #af68cd;
+    --common_blue1_color: #387df6;
+    --common_water1_color: #79c6f5;
+    --common_olive1_color: #77912b;
+    --common_green1_color: #4fae51;
+    --common_level1_base_color: #1a1a1f;
+    --common_level2_base_color: #777578;
+    --common_level3_base_color: #a2a3a5;
+    --common_level4_base_color: #c8c8c9;
+    --common_gray1_color: #888f94;
+    --common_gray2_color: #abafb3;
+    --common_gray3_color: #c4c7ca;
+    --common_gray4_color: #696969;
+    --common_gray5_color: #e5e6e8;
+    --common_gray6_color: #f0f1f2;
+  }
+  
+  //暗黑模式的变量设置
+  @media (prefers-color-scheme: dark), (min-width: 0px) {
+    :root {
+        --common_level4_base_color:#47484a;
+        --common_gray1_color:#bebebe;
+        --common_gray2_color:#646464;
+        --common_gray3_color:#4b4b4b;
+        --common_gray4_color:#3a3a3a;
+        --common_gray5_color:#2c2c2c;
+        --common_gray6_color:#1e1e1e;
+        --common_level1_base_color:#D1D1D1;
+        --common_level2_base_color: #8C8C8D;
+        --common_level3_base_color:#757577;
+    }
+  }

package/lib/markdown/style.d.ts

@@ -0,0 +1,3 @@
+import '../HTMLRenderer/style';
+import './main.scss';
+import 'highlight.js/styles/github.css';

package/lib/markdown/style.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../HTMLRenderer/style");
+require("./main.scss");
+require("highlight.js/styles/github.css");