refactor(design): add windicss

vben

2021-02-17 4d7001bbcf3ff6e62deb967cb1c15b443b8aaff4

 src/components/Application/src/AppLocalePicker.vue

@@ -4,34 +4,35 @@
-->
<template>
  <Dropdown
    placement="bottomCenter"
    :trigger="['click']"
    :dropMenuList="localeList"
    :selectedKeys="selectedKeys"
    @menuEvent="handleMenuEvent"
    overlayClassName="app-locale-picker-overlay"
    :overlayClassName="`${prefixCls}-overlay`"
  >
    <span class="app-local-picker">
      <GlobalOutlined class="app-local-picker__icon" />
      <span v-if="showText">{{ getLangText }}</span>
    <span :class="prefixCls">
      <Icon icon="ion:language" />
      <span v-if="showText" :class="`${prefixCls}__text`">{{ getLangText }}</span>
    </span>
  </Dropdown>
</template>
<script lang="ts">
  import type { LocaleType } from '/@/locales/types';
  import type { DropMenu } from '/@/components/Dropdown';

  import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
  import { Dropdown } from '/@/components/Dropdown';
  import Icon from '/@/components/Icon';

  import { Dropdown, DropMenu } from '/@/components/Dropdown';
  import { GlobalOutlined } from '@ant-design/icons-vue';

  import { useLocale } from '/@/hooks/web/useLocale';
  import { useLocale } from '/@/locales/useLocale';
  import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';

  import { LocaleType } from '/@/locales/types';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({
    name: 'AppLocalPicker',
    components: { GlobalOutlined, Dropdown },
    components: { Dropdown, Icon },
    props: {
      // Whether to display text
      showText: propTypes.bool.def(true),
@@ -39,8 +40,11 @@
      reload: propTypes.bool,
    },
    setup(props) {
      const { localeList } = useLocaleSetting();
      const selectedKeys = ref<string[]>([]);

      const { prefixCls } = useDesign('app-locale-picker');

      const { localeList } = useLocaleSetting();

      const { changeLocale, getLang } = useLocale();

@@ -64,25 +68,27 @@
        toggleLocale(menu.event as string);
      }

      return { localeList, handleMenuEvent, selectedKeys, getLangText };
      return { localeList, handleMenuEvent, selectedKeys, getLangText, prefixCls };
    },
  });
</script>

<style lang="less" scoped>
  :global(.app-locale-picker-overlay) {
  @prefix-cls: ~'@{namespace}-app-locale-picker';

  :global(.@{prefix-cls}-overlay) {
    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }

  .app-local-picker {
  .@{prefix-cls} {
    display: flex;
    align-items: center;
    cursor: pointer;

    &__icon {
      margin-right: 4px;
    &__text {
      margin-left: 6px;
    }
  }
</style>