InstallDependencies 内置组件增强

[Wxh16144]

解决类似需求： https://github.com/Wxh16144/dumi-debug-app/pull/11 不一定是前端几个包管理器安装依赖操作

下面是一个伪代码：

import React from 'react';
import type { TabsProps } from 'antd';
import { Tabs } from 'antd';
import SourceCode from 'dumi/theme-default/builtins/SourceCode';

const map: any = {
  android: {
    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/android/android-original.svg',
    label: 'Android'
  },
  ios: {
    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/apple/apple-original.svg',
    label: 'iOS'
  },
  windows: {
    icon: `https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/windows8/windows8-original.svg`,
    label: 'Windows'
  },
  linux: {
    icon: `https://cdn.jsdelivr.net/gh/devicons/devicon@master/icons/linux/linux-original.svg`,
    label: 'Linux'
  },
}

const InstallDependencies: React.FC = (props) => {
  const items = Object.entries(props)
    .map(([key, value]: any) => {
      if (!value || !map[key]) return null;

      return {
        key,
        children: <SourceCode lang="bash">{value}</SourceCode>,
        label: (
          <div>
            <img src={map[key].icon} alt={map[key].label} style={{ width: 18, height: 18 }} />
            <span style={{ marginLeft: 8 }}>{map[key].label}</span>
          </div>
        ),
      };
    })
    .filter(Boolean) as TabsProps['items'];

  return (
    <Tabs
      className="antd-site-snippet"
      // defaultActiveKey="npm"
      items={items}
    />
  );
};

export default InstallDependencies;

[Wxh16144]

sorry, 没注意看文档，原来是支持这类操作 https://kuangpf.com/dumi-theme-antd/guide/builtins-bash--o-s-platform 不过感觉这两个组件是不是可以合并为一个内置组件

[KuangPF]

可以支持下，下个版本加上吧。

[KuangPF]

考虑了下，由于在 .md 文件中无法传入一些复杂的参数，因此也没有提供更加便捷可扩展的内置组件，只是在内置组件 <BashOSPlatform /> 新增支持 ios 和 android 两种选项，0.3.15 版本已处理。