# @cloud-ru/ds-uikit-product-header-legacy 中文文档 规范地址：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-header-legacy/ 版本：0\.1\.49 npm 元数据更新时间：2026-11-11T15:07:43.023Z 中文译文更新时间：2026-11-11T16:22:43.152Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-uikit-product-header-legacy 原文对照：https://npmcn.com/package/%40cloud-ru/ds-uikit-product-header-legacy/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，245 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：19 个 - 首次发布：2026-08-25T15:10:51.237Z - 最新版本发布：2026-11-11T15:07:42.615Z - 近 30 天下载量：6527（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：171（近 12 个月 171 个） ## 中文简介 `@cloud-ru/ds-uikit-product-header-legacy` ——"后遗症"-----····················································································································································································································································. ## 安装 ```sh npm install @cloud-ru/ds-uikit-product-header-legacy ``` 也可以使用：`pnpm add @cloud-ru/ds-uikit-product-header-legacy`、`yarn add @cloud-ru/ds-uikit-product-header-legacy`、`bun add @cloud-ru/ds-uikit-product-header-legacy` ## README # 页眉遗产 `@cloud-ru/ds-uikit-product-header-legacy` ——"后遗症"-----····················································································································································································································································. `@cloud-ru/ds-uikit-product-header-legacy` - 遗产 - 遗产 - 遗产 (原始内容存档于2018-10-29). Snack V2: контейнер, логотип, главное- dra- dra- dra-. ## Когда - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `@ds/*`。 。 。 . - \* 主菜单 \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* : 桌面—— \* \* 抽屉; 移动——\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* `customMobileMenu`) (中文(简体) ). Когда **не** 校对:soup - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 - используйте **`@cloud-ru/ds-uikit-product-header`**。 。 。 . - 说吧 - используйте **`@cloud-ru/ds-uikit-product-card-predefined`**。 。 。 . ## Установка ```bash pnpm add @cloud-ru/ds-uikit-product-header-legacy ``` ```ts import { HeaderLayout, Logo, MainMenu, PlatformLogo, useSearch, VARIANT, HEADER_LOGO_MODE, } from '@cloud-ru/ds-uikit-product-header-legacy' ``` ## Смотри - **`MainMenu`** - 台式/移动抽屉, `leftTop` 编号 : `search`时 **`MenuMobile`** через `customMobileMenu`。 。 。 . - **`@cloud-ru/ds-uikit-product-header`** -=ytet -伊甸园字幕组=- 翻译:. - **`@cloud-ru/ds-uikit-product-card-predefined`** —— 说 `CardServiceLight` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. - **`@cloud-ru/ds-drawer`** - 抽屉,主梅努. - **`@cloud-ru/ds-adaptive`** —— 说 `AdaptiveProvider` 编号 : `layoutType` 马恩梅努. ## 标题拉尤特 菜单、标志、选择、面包屑等工具栏. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `menu`, (中文(简体) ), `logo`, (中文(简体) ), `select`, (中文(简体) ), `breadcrumbs` и `toolbar`。 。 。 `isMobile` селектор,хлебные也. ### Когда - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. - 桌面 移动 相机 相机 `select`。 。 。 . Когда **не** нужен: - 说吧 - используйте **`MainMenu`**。 。 。 . ### Анатомия #### Слоты - `menu` - 。 。 。 。 . - `logo` ——брендовый. - `select` - селектор(скрывается) `isMobile`) (中文(简体) ). - `breadcrumbs` ——腾讯 (腾讯). - `toolbar` ——действия. #### 是移动( 默认) `false`(中文(简体) ) - `false` ——qqq:菜单+标志+选择面包屑+qq工具栏. - `true` ——选择"面包屑". ### Примеры #### 桌面 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. ```tsx import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; function Slot({ label }: { label: string }) { return
{label}
; } export function Desktop() { return ( } logo={} select={} breadcrumbs={} toolbar={} /> ); } ``` #### 移动 是Mobile QQ 选择 \\ 面包屑 . ```tsx import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; function Slot({ label }: { label: string }) { return
{label}
; } export function Mobile() { return ( } logo={} select={} breadcrumbs={} toolbar={} /> ); } ``` #### Минимальный 菜单、标志工具栏. ```tsx import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; function Slot({ label }: { label: string }) { return
{label}
; } export function Minimal() { return } logo={} toolbar={} />; } ``` ### 道具 **页眉 Layout Props** | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `breadcrumbs` | `ReactNode` | —— 说 | Хлебные. | | `className` | `string` | —— 说 | CSS - класс. | | `data-test-id` | `string` | —— 说 | | | `isMobile` | `boolean` | `false` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. | | `logo` | `ReactNode` | —— 说 | Логотип. | | `menu` | `ReactNode` | —— 说 | Главное. | | `select` | `ReactNode` | —— 说 | Селектор. | | `toolbar` | `ReactNode` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. | ## 标记 (原始内容存档于2018-09-22) (英语). Official website. (图) `buttonSimpleNeutral` +云罗果. Оболочка- `@cloud-ru/ds-button` (中性/简单/m). ### Когда - Слот `logo` 用户 **`HeaderLayout`**。 。 。 . - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`mode`{\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}你还好吧`path`) (中文(简体) ). ### Анатомия #### 模式( 默认) `prod`(中文(简体) ) - `prod` —— 说 `CloudLogo`。 。 。 . - `develop` —— 说 `CloudLogoDev`。 。 。 . - `stage` —— 说 `CloudLogoStage`。 。 。 . - `hybrid` —— 说 `CloudLogoHybrid`。 。 。 . #### 路径% 1 装入 - `path` - кастомное; при; загрузки; fall; fall `mode`。 。 。 . - `loading` - 旋转按钮. ### Примеры #### Режимы (原始内容存档于2018-09-29). HOURER LOGO MODE. ```tsx import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; export function Modes() { return (
); } ``` #### 正在装入 装入自旋器. ```tsx import { Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; export function Loading() { return ; } ``` #### Ссылка {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}嘿 哥们儿 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}嘿 哥们儿. ```tsx import { HEADER_LOGO_MODE, Logo } from '@cloud-ru/ds-uikit-product-header-legacy'; export function CustomHref() { return ; } ``` ### 道具 **日志** | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `className` | `string` | —— 说 | CSS - класс. | | `data-test-id` | `string` | —— 说 | | | `href` | `string` | —— 说 | Ссылка. | | `loading` | `boolean` | `false` | (原始内容存档于2017-10-12). QQ (spinner Button). | | `mode` | `"develop"` | `"hybrid"` | `"prod"` | `"stage"` | —— 说 | \===================================================================================================== (==================================================================. | | `onClick` | `MouseEventHandler` | —— 说 | Обработчик. | | `path` | `string` | —— 说 | (原始内容存档于2018-10-12). URL. QQQQ-后退QQ模式/prod. | ##### 相关类型 - `HeaderLogoMode` =: `"develop"` | `"hybrid"` | `"prod"` | `"stage"` ## 主菜单 (原始内容存档于2018-10-21). Legacy MainMenu — ^ MainMenuSVG → $ 抽屉 (桌面/移动). 遗产 MainMenu( 图片) `navigationOldDrawer` 编号 : `navigationOldDrawerMobile`) (中文(简体) ). Кнопка `MainMenuSVG` 抽屉. - **桌面** . . . . . `@cloud-ru/ds-drawer` (单位:千美元)`DrawerCustom`\-=ytet -伊甸园字幕组=- 翻译:. - **移动** -=YTET -伊甸园字幕组=- 翻译: Через `customMobileMenu` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 **`@cloud-ru/ds-uikit-product-header`** (底盘). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `AdaptiveProvider` (单位:千美元)`layoutType`) (中文(简体) ). ### Когда - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢`serviceGroups`, (中文(简体) ), `settingItems`, (中文(简体) ), `search`) (中文(简体) ). Когда **не** нужен: - 抽屉: - используйте **`HeaderLayout`**。 。 。 . - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 - используйте **`@cloud-ru/ds-uikit-product-header`**。 。 。 . ### Анатомия #### 触发 X 抽屉 - 触发 `@cloud-ru/ds-button` 中性 / 简单 / m {} `MainMenuSVG`。 。 。 . - 桌面抽屉 - `@cloud-ru/ds-drawer` `DrawerCustom`1120px (中文(简体) )`data-test-id='header__drawer-menu'`) (中文(简体) ). - 移动抽屉 -- -- 全重抽屉`navigationOldDrawerMobile`),"地底"("地底";"地底";"地底";"地底";"地底";"地底";"地底";"地底";"地底";"地底";"地底";"地底";"地上";"地上";"地上";"地上";"地上";"地上";"地上";"地上";"地上";"地上";"地上";"地上"; `data-test-id='header__drawer-menu-mobile'`。 。 。 . #### Левая(桌面) - `leftTop` . . . . `PlatformSelector`) (中文(简体) ). - `settingItems` - 。 。 。 。 . - `sidebarBottomSlot` ——внизу (например,баннер. #### Правая(桌面) - `rightTop` (移交/市场). - `search` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `useSearch` или(свой)`NavigationSearch`) ; ; ; ; ; ; . - `serviceGroups` . . . . `ServicesCategory` + 键 `CardServiceLight`) (中文(简体) ). #### 移动体 QQ 显示滚动体 : 1. `leftTop` - \\ \\ \\ \\ \\ \\ \\ `PlatformSelector` (+++++++++++++++++++++ `avatarName`) (中文(简体) ). 2. `search` . . . . . `NavigationSearch`; при \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*`position: sticky`) (中文(简体) ). 3. `rightTop` - \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ >`data-mobile` (笑声). 4. `serviceGroups` - # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #`data-mobile` на `.services`) ;最爱的"карточках". 5. `settingItems` —— 说 `CardServiceLight` + 键 `Divider` 卷轴身体. `sidebarBottomSlot` 移动 **не** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. #### 自定义移动梅努 QQ手机:QQ遗产 `MenuMobile` (抽屉)。 · 遗产 `HeaderLayout` # # # 移动 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `@cloud-ru/ds-uikit-product-header`。 。 。 . - `MenuMobile` импортируется `@cloud-ru/ds-uikit-product-header`, (中文(简体) ), **не** из `@cloud-ru/ds-uikit-product-header-legacy`。 。 。 . - 控制着 `open` 编号 : `setOpen`, \\ \\ \\ \\ \\ `MainMenu` ~ ~ ~ 抽屉 ~. - Данные `MenuMobile` aPI 标题`segments`, (中文(简体) ), `settingItems` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你这混蛋 `MainMenu`。 。 。 . #### 打开/ 设置打开 控制抽屉。 Без `open` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? 抽屉 触发器. ### Примеры #### Базовый 左侧Top, QQ, 设置项目 & 服务组 。 (原始内容存档于2019-10-21) (英语). Drawer открывается по по MainMenuSVG. ```tsx import { MainMenu } from '@cloud-ru/ds-uikit-product-header-legacy'; import { useState } from 'react'; import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner'; import { NewNavigationBanner } from '../../../stories/MainMenu/helperComponents/NewNavigationBanner'; import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector'; import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner'; import { ADMINISTRATIVE_SECTION, DEFAULT_PLATFORM_OPTION, MARKETPLACE_BANNER, NEW_NAVIGATION_BANNER, PLATFORM_OPTIONS_BY_ID, PLATFORM_SELECTOR_ITEMS, REFERRAL_BANNER, SERVICE_GROUPS, } from '../../fixtures'; export function Basic() { const [open, setOpen] = useState(false); const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id); const selected = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION; return ( setPlatformId(String(id))} /> } rightTop={ <> } settingItems={ADMINISTRATIVE_SECTION} serviceGroups={SERVICE_GROUPS} sidebarBottomSlot={} /> ); } ``` #### С 搜索 QQ 使用搜索 。 (原始内容存档于2019-10-21) (英语). Drawer открывается по по MainMenuSVG. ```tsx import { MainMenu, useSearch } from '@cloud-ru/ds-uikit-product-header-legacy'; import { useState } from 'react'; import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner'; import { NewNavigationBanner } from '../../../stories/MainMenu/helperComponents/NewNavigationBanner'; import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector'; import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner'; import { ADMINISTRATIVE_SECTION, DEFAULT_PLATFORM_OPTION, MARKETPLACE_BANNER, NEW_NAVIGATION_BANNER, PLATFORM_OPTIONS_BY_ID, PLATFORM_SELECTOR_ITEMS, REFERRAL_BANNER, SERVICE_GROUPS, } from '../../fixtures'; export function WithSearch() { const [open, setOpen] = useState(false); const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id); const search = useSearch(); const selected = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION; return ( setPlatformId(String(id))} /> } rightTop={ <> } search={search} settingItems={ADMINISTRATIVE_SECTION} serviceGroups={SERVICE_GROUPS} sidebarBottomSlot={} /> ); } ``` #### 移动式 适应性 Provider布局 Type=mobile: QQ = 左取 Top (+ + + + + → avatarName),相接- + , + + + + . (原始内容存档于2018-09-25). sidebar BottomSlot QQ--QQ手机QQ. ```tsx import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive'; import { MainMenu, useSearch } from '@cloud-ru/ds-uikit-product-header-legacy'; import { useState } from 'react'; import { MarketplaceBanner } from '../../../stories/MainMenu/helperComponents/MarketplaceBanner'; import { PlatformSelector } from '../../../stories/MainMenu/helperComponents/PlatformSelector'; import { ReferralBanner } from '../../../stories/MainMenu/helperComponents/ReferralBanner'; import { ADMINISTRATIVE_SECTION, DEFAULT_PLATFORM_OPTION, DEFAULT_PROJECT_OPTION, MARKETPLACE_BANNER, PLATFORM_OPTIONS_BY_ID, PLATFORM_SELECTOR_ITEMS, PROJECT_DESCRIPTION, PROJECT_OPTIONS_BY_ID, PROJECT_SELECTOR_ITEMS, REFERRAL_BANNER, SERVICE_GROUPS, } from '../../fixtures'; /** * Mobile-поверхность MainMenu: `leftTop` — PlatformSelector (платформа) + PlatformSelector (проект с `avatarName`). * `sidebarBottomSlot` на mobile не рендерится. */ export function MobileSurface() { const [open, setOpen] = useState(false); const [platformId, setPlatformId] = useState(DEFAULT_PLATFORM_OPTION.id); const [projectId, setProjectId] = useState(DEFAULT_PROJECT_OPTION.id); const search = useSearch(); const selectedPlatform = PLATFORM_OPTIONS_BY_ID[platformId] ?? DEFAULT_PLATFORM_OPTION; const selectedProject = PROJECT_OPTIONS_BY_ID[projectId] ?? DEFAULT_PROJECT_OPTION; return ( setPlatformId(String(id))} /> setProjectId(String(id))} /> } rightTop={ <> } search={search} settingItems={ADMINISTRATIVE_SECTION} serviceGroups={SERVICE_GROUPS} /> ); } ``` #### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你来干嘛? {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我 `customMobileMenu` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}被控制的抽屉 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080} ```tsx import { useState } from 'react'; import { MainMenu } from '@cloud-ru/ds-uikit-product-header-legacy'; import { MenuMobile } from '@cloud-ru/ds-uikit-product-header'; function HeaderMainMenu() { const [open, setOpen] = useState(false); return ( } /> ); } ``` ### 道具 **带有支持选项** | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `customMobileMenu` | `ReactNode` | —— 说 | QQ手机:QQ遗产 `MenuMobile` (抽屉). Например, `MenuMobile` из `@cloud-ru/ds-uikit-product-header` (底盘). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `open` 编号 : `setOpen`, \\ \\ \\ \\ \\ `MainMenu` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我被控制着 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我被控制着. | | `data-test-id` | `string` | —— 说 | | | `disabled` | `boolean` | —— 说 | | | `favorite` | `{ value: string[]; onChange: (productId: string) => (addingValue: boolean) => void; }` | —— 说 | | | `leftTop` | `ReactNode` | —— 说 | | | `onLinkChange` | `((value: string) => void)` | —— 说 | | | `open` | `boolean` | —— 说 | | | `platformGroups` | `LinksGroup[]` | —— 说 | Платформенные(一作«Облачные. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **не**。 。 。 . \-=YTET -伊甸园字幕组=- 翻译: **после** `serviceGroups`, (中文(简体) ), **перед** `settingItems`。 。 。 `favoritesEnabled: false`。 。 。 . | | `rightTop` | `ReactNode` | —— 说 | | | `search` | `SearchProps` | —— 说 | | | `serviceGroups` | `LinksGroup[]` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我对你的爱很感兴趣 **первыми** {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢. | | `setOpen` | `((open: boolean) => void)` | —— 说 | | | `settingItems` | `LinksGroup` | —— 说 | Административные(一作одна. QQ: QQ: QQ: QQ: QQ (桌面), QQ: QQ: QQ: карточек. С:группа也;отображается也;отображается也 **последней** 页:1 `serviceGroups` и `platformGroups`) (中文(简体) ). Обычно `favoritesEnabled: false`。 。 。 . 移动 : `CardServiceLight` + 键 `Divider` 卷轴身体. | | `sidebarBottomSlot` | `ReactNode` | —— 说 | \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* `bottom > items`) (中文(简体) ). | ### 故事书 带有SampleContent(图像移动构成): ### 图片 桌面( E)`navigationOldDrawer`: 移动( U)`navigationOldDrawerMobile`: ### Смотри - **`@cloud-ru/ds-uikit-product-header` / 主菜单** - новое и и `MenuMobile` (底盘) `customMobileMenu`。 。 。 . - **`@cloud-ru/ds-uikit-product-card-predefined`** —— 说 `CardServiceLight` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我.. `settingItems` 腾讯动漫. ### Адаптивность 桌面第一: `AdaptiveProvider` \\ \\ \\ / 故事本 。 QQ 工具栏 `layoutType=mobile` (原始内容存档于2018-09-26). ALPI. | Проп | 桌面 | 移动 | | --- | --- | --- | | `customMobileMenu` | —— 说 | 遗产 `MenuMobile`• 抽屉 | | `sidebarBottomSlot` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | Не | | `settingItems` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | `CardServiceLight` + 键 `Divider` \* \* \* \* 滚动体 | | `leftTop` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 | ++++++++++++++++++++++++++++++++++++++++++ `PlatformSelector`(中文(简体) ) | | `search` | ~ 卷起来 ~ ~ | 粘性 : 滚动体, : : | | `rightTop` 编号 : `serviceGroups` | Правая | \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* | \* \* \* \* \* \* \* \* \* \* 故事本——工具栏-全球 `layoutType` или `AdaptiveProvider` 编号 : `withLayoutType`。 。 。 . QQ手机 (QQ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ — 故事 **实例 / 标本**。 。 。 . ## 平台Logo (原始内容存档于2018-10-21) (英语). SVG - или Avatar с. (图) `platformSelectorIcons`) (中文(简体) ). Используется в `PlatformSelector` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}请把电话放下 При `avatarName` qQ Avatar с вместо SVG- варианта- для 移动项目选择器. ### Когда - {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. - {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}请把电话放下 `compact` (24×24 без-活塞). ### Анатомия #### 备选案文(违约) `evolution`(中文(简体) ) - `evolution` 编号 : `advanced` 编号 : `vmware` SVG的口音是... ... - `partner` 编号 : `marketplace` —— 说 `@cloud-ru/ds-avatar` 平方 («ПК»/«МА»). #### 压缩( 默认) `false`(中文(简体) ) - `false` -32x32 触发器. - `true` - 24x24 QX 列表项目(平面为 0, Avatar 大小) `s`) (中文(简体) ). #### 神通Name 阿凡达 触发器 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `variant`\-=YTET -伊甸园字幕组=- 翻译:. Используется вместе `PlatformSelector.avatarName` 用户名 `leftTop` (原始内容存档于2016-10-12). MainMenu (QQ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `partner` 编号 : `marketplace` без `avatarName` берутся `headerLegacyLocale` (单位:千美元)`platformLogo.avatarName.*`) (中文(简体) ). ### Примеры #### Варианты 。 。 。 。 。 . ```tsx import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy'; export function Variants() { return (
{Object.values(VARIANT).map(variant => ( ))}
); } ``` #### 压缩 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}请说吧. ```tsx import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy'; export function Compact() { return (
); } ``` #### 有远见的人 伙伴市场. ```tsx import { PlatformLogo, VARIANT } from '@cloud-ru/ds-uikit-product-header-legacy'; export function AvatarVariants() { return (
); } ``` #### 浮雕Name Avatar – QQ 移动项目选择器. ```tsx import { PlatformLogo } from '@cloud-ru/ds-uikit-product-header-legacy'; export function AvatarName() { return (
); } ``` ### 道具 **平台Logo 方案** | Prop | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | `avatarName` | `string` | —— 说 | QQ Avatar = 触发器(图片移动项目选择器). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. | | `className` | `string` | —— 说 | CSS - класс. | | `compact` | `boolean` | `false` | Компактный размер пунктов Droplist (图片列表项目图标 без pad 平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平起平. | | `data-test-id` | `string` | —— 说 | | | `variant` | `"advanced"` | `"evolution"` | `"marketplace"` | `"partner"` | `"vmware"` | `evolution` | (图) `platformSelectorIcons` /变种). | ##### 相关类型 - `Variant` =: `"advanced"` | `"evolution"` | `"marketplace"` | `"partner"` | `"vmware"` ## 常见问题 ### @cloud-ru/ds-uikit-product-header-legacy 是什么？ @cloud-ru/ds-uikit-product-header-legacy ——"后遗症"-----····················································································································································································································································\. ### 如何安装 @cloud-ru/ds-uikit-product-header-legacy？ 在项目目录运行 npm install @cloud-ru/ds-uikit-product-header-legacy，或使用 pnpm add / yarn add / bun add。 ### @cloud-ru/ds-uikit-product-header-legacy 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cloud-ru/ds-uikit-product-header-legacy 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @cloud-ru/ds-uikit-product-header-legacy 可以商用吗？ @cloud-ru/ds-uikit-product-header-legacy 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @cloud-ru/ds-uikit-product-header-legacy 的下载量有多少？ 根据 npm 官方下载统计，@cloud-ru/ds-uikit-product-header-legacy 在 2026/10/10 – 2026/11/08 这 30 天内被下载 6,527 次，日均约 218 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cloud-ru/ds-uikit-product-header-legacy 还在维护吗？ 最新版本 0\.1\.49 发布于 2026/11/11（今天）；至今共发布 171 个版本，其中过去 12 个月发布了 171 个；首次发布于 2026/08/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。