ant-design-vue/site/components/header.vue

<script>
import { isZhCN } from '../util';
import sortBy from 'lodash/sortBy';
import packageInfo from '../../package.json';

export default {
  props: {
    name: String,
    searchData: Array,
  },
  data () {
    return {
      value: null,
    };
  },
  methods: {
    handleClick () {
      const name = this.name;
      const path = this.$route.path;
      const newName = isZhCN(name) ? name.replace(/-cn\/?$/, '') : `${name}-cn`;
      this.$router.push({
        path: path.replace(name, newName),
      });
      this.$i18n.locale = isZhCN(name) ? 'en-US' : 'zh-CN';
    },
    onSelect (val) {
      this.$router.push(val);
      this.value = val;
    },
  },
  render () {
    const name = this.name;
    const searchData = sortBy(this.searchData, ['title']);
    const isCN = isZhCN(name);
    return (
      <header id='header'>
        <a-row>
          <a-col class='header-left' xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
            <router-link to={{ path: '/ant-design-vue' }} id='logo'>
              <img alt='logo' height='32' src='https://cdn.nlark.com/yuque/0/2019/png/87084/1548485177381-assets/web-upload/d18a622f-08d8-4955-a5c2-38138f80177b.png' />
              <span style='color: black;font-size: 16px;font-weight: 400;'>Ant Design Vue</span>
            </router-link>
            <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
              {isCN ? 'English' : '中文'}
            </a-button>
          </a-col>
          <a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
            <div id='search-box'>
              <a-icon type='search' />
              <a-select
                ref='selectBox'
                placeholder={isCN ? '搜索组件...' : 'input search text'}
                style='width: 200px'
                defaultActiveFirstOption={false}
                showArrow={false}
                showSearch
                onSelect={this.onSelect}
                optionFilterProp='children'
                key={this.value}
              >
                {
                  searchData.map(({ title, subtitle, url }) =>
                    <a-select-option key={url}>
                      {title} {isCN && subtitle}
                    </a-select-option>)
                }
              </a-select>
            </div>
            <a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
              {isCN ? 'English' : '中文'}
            </a-button>
            <a-select size='small' defaultValue={packageInfo.version} class='version'>
              <a-select-option value={packageInfo.version}>{packageInfo.version}</a-select-option>
            </a-select>
            <a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
              <a-menu-item key='components'>
                {isCN ? '组件' : 'Components'}
              </a-menu-item>
              <a-sub-menu key="Ecosystem" title={isCN ? '生态系统' : 'Ecosystem'}>
                <a-menu-item key="design">
                  <router-link to={{ path: isCN ? '/ant-design-vue/docs/vue/download-cn/' :  '/ant-design-vue/docs/vue/download/'}}>
                    {isCN ? '设计资源' : 'Design Resources'}
                  </router-link>
                </a-menu-item>
                <a-menu-item key="vscode">
                  <a target="_blank" href='https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper'>
                    VS Code Extension
                  </a>
                </a-menu-item>
                <a-menu-item key="awesome">
                  <a target="_blank" href='https://github.com/vueComponent/ant-design-vue-awesome'>
                    Awesome
                  </a>
                </a-menu-item>
                <a-menu-item key="github">
                  <a target="_blank" href='https://github.com/vueComponent/ant-design-vue'>GitHub</a>
                </a-menu-item>
                <a-menu-item key='wechat'>
                  <a-popover placement='right'>
                    <template slot='content'>
                      <img
                        width='160'
                        height='160'
                        alt='wechat'
                        src='https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1548484520368-assets/web-upload/28b3f1f9-938a-4bd5-ad2d-0cc4d2c200ed.jpeg'
                      />
                    </template>
                    <a>
                      {isCN ? '微信' : 'WeChat'}
                    </a>
                  </a-popover>
                </a-menu-item>
                <a-menu-item key='qq'>
                  <a-popover placement='right'>
                    <template slot='content'>
                      <img
                        width='160'
                        height='160'
                        alt='qq'
                        src='https://cdn.nlark.com/yuque/0/2019/png/87084/1548484520571-assets/web-upload/ca2259e1-6600-461b-8c5b-31018e8bcc07.png'
                      />
                    </template>
                    <a>
                      {isCN ? 'QQ(217490093)' : 'QQ(217490093)'}
                    </a>
                  </a-popover>
                </a-menu-item>
              </a-sub-menu>
              <a-menu-item key="sponsor">
                <router-link to={{ path: isCN ? '/ant-design-vue/docs/vue/sponsor-cn/' :  '/ant-design-vue/docs/vue/sponsor/'}}>
                  {isCN ? '支持我们' : 'Support us'}
                </router-link>
              </a-menu-item>
            </a-menu>
          </a-col>
        </a-row>
      </header>
    );
  },
};
</script>