@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.221

package/src/components/OHeaderUser.vue

@@ -1,304 +0,0 @@
-<script setup lang="ts">
-import { OIcon, OBadge, ODivider, ODropdown, ODropdownItem } from '@opensig/opendesign';
-
-import AppAvatar from './common/AppAvatar.vue';
-
-import IconAvatar from '~icons/components/icon-avatar-line.svg';
-import IconChevronDown from '~icons/components/icon-chevron-down.svg';
-
-import { useScreen } from '@opendesign-plus/composables';
-
-const { lePadV } = useScreen();
-
-interface UserInfoT {
-  photo: string;
-  username: string;
-}
-
-interface OptionsItemT {
-  id: string; // id
-  label: string; // 标题
-  icon?: string; // icon
-  url: string; // 跳转链接
-  target: string; // 跳转方式
-  total: number; // 消息数量
-  logout: boolean; // 是否是退出登录 item
-}
-
-interface UserPropsT {
-  token?: string;
-  lang?: string;
-  noticeTotal?: number;
-  userInfo?: UserInfoT;
-  userInfoVisible?: boolean;
-  options?: OptionsItemT[];
-}
-
-withDefaults(defineProps<UserPropsT>(), {
-  token: undefined,
-  lang: undefined,
-  noticeTotal: undefined,
-  userInfo: undefined,
-  userInfoVisible: undefined,
-  options: undefined,
-});
-
-export interface OHeaderUserEmitsT {
-  (e: 'login'): void;
-  (e: 'logout'): void;
-}
-
-const emit = defineEmits<OHeaderUserEmitsT>();
-
-const login = () => {
-  emit('login');
-};
-
-const jumpToPage = (val: any) => {
-  if (val?.logout) {
-    emit('logout');
-  } else {
-    window.open(val.url, val.target);
-  }
-};
-</script>
-
-<template>
-  <div class="header-user">
-    <!-- 未登录或登录失败 -->
-    <template v-if="!token">
-      <OIcon @click="login" class="avatar-icon">
-        <IconAvatar />
-      </OIcon>
-    </template>
-    <!-- 已登录 -->
-    <Transition name="header-user-zoom-in">
-      <div class="user-info" v-if="token">
-        <ODropdown
-          :trigger="lePadV ? 'click' : 'hover'"
-          :optionPosition="lePadV ? 'br' : 'bottom'"
-          :option-wrap-class="`user-dropdown ${lang === 'en' ? 'is-en' : ''} user-dropdown${userInfoVisible ? '-info' : ''}`"
-        >
-          <div class="info-wrap hover-icon-rotate">
-            <OBadge :value="noticeTotal" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="lePadV ? 24 : 32" />
-            </OBadge>
-            <p class="user-account">{{ userInfo.username }}</p>
-            <OIcon class="icon">
-              <IconChevronDown />
-            </OIcon>
-          </div>
-          <template #dropdown>
-            <!-- 账号信息 -->
-            <div v-if="userInfoVisible" class="user-info-dropdown">
-              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="32" />
-              <div class="right-info">
-                <p class="user-fullname">用户名</p>
-                <p class="user-account">{{ userInfo.username }}</p>
-              </div>
-            </div>
-            <ODivider v-if="userInfoVisible" :style="{ '--o-divider-gap': '6px' }" />
-            <template v-for="item in options" :key="item.label">
-              <ODropdownItem :style="{ '--dropdown-item-justify': userInfoVisible ? 'flex-start' : 'center' }" @click="jumpToPage(item)">
-                <template v-if="item?.icon">
-                  <OBadge :value="item.total" color="danger" class="header-message icon-message" :class="{ 'notice-not': !item.total }">
-                    <OIcon>
-                      <component :is="item.icon" class="icon" />
-                    </OIcon>
-                  </OBadge>
-                  <span>{{ item.label }}</span>
-                </template>
-                <template v-else>
-                  <OBadge v-if="item?.total" :value="item.total" color="danger" class="header-message message" :class="{ 'notice-not': !item.total }">
-                    {{ item.label }}
-                  </OBadge>
-                  <span v-else>{{ item.label }}</span>
-                </template>
-              </ODropdownItem>
-            </template>
-          </template>
-        </ODropdown>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header-user {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0.15s;
-}
-
-.user-info {
-  height: 100%;
-  min-width: 32px;
-  display: flex;
-  cursor: pointer;
-}
-
-.info-wrap {
-  height: calc(100% - 10px);
-  margin: 5px 0;
-  display: flex;
-  align-items: center;
-
-  .icon {
-    margin-left: 4px;
-  }
-}
-
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  margin-right: 12px;
-
-  :deep(.o-badge-content) {
-    right: 8px;
-    top: 2px;
-  }
-}
-
-.o-dropdown-item {
-  width: 142px;
-  white-space: nowrap;
-  --dropdown-item-color: var(--o-color-info1);
-  --dropdown-item-padding: 6px 8px;
-  @include tip1;
-
-  @include hover {
-    color: var(--o-color-primary1);
-    background: var(--o-color-control2-light);
-  }
-
-  .o-icon {
-    color: var(--o-color-info3);
-    --icon-size: 24px;
-    margin-right: 8px;
-  }
-
-  .icon-message {
-    height: 24px;
-    display: flex;
-
-    @include respond-to('laptop') {
-      height: 16px;
-    }
-
-    :deep(.o-badge-content) {
-      right: 14px;
-    }
-  }
-}
-
-.notice-not {
-  :deep(.o-badge-content) {
-    display: none;
-  }
-}
-
-.user-info-dropdown {
-  display: flex;
-  align-items: center;
-}
-
-.right-info {
-  margin-left: 10px;
-}
-
-.user-fullname {
-  color: var(--o-color-info3);
-  @include tip2;
-}
-
-.user-account {
-  color: var(--o-color-info1);
-  max-width: 90px;
-  font-weight: 500;
-  @include tip1;
-  @include text-truncate(1);
-}
-
-@include respond-to('<=pad_v') {
-  .header-user {
-    min-width: auto;
-
-    .user-info {
-      min-width: 24px;
-
-      .info-wrap {
-        .user-avatar {
-          margin-right: 0;
-          width: 24px;
-          height: 24px;
-        }
-
-        .user-account {
-          display: none;
-        }
-
-        .icon {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.user-dropdown {
-  --dropdown-list-radius: var(--o-radius-m);
-}
-.user-dropdown-info {
-  --dropdown-list-padding: 11px 11px 6px !important;
-}
-.avatar-icon {
-  font-size: 24px;
-  color: var(--o-color-info1);
-  cursor: pointer;
-
-  @include hover {
-    color: var(--o-color-primary1);
-  }
-}
-@include respond-to('<=pad_v') {
-  .user-dropdown {
-    --dropdown-list-radius: 8px;
-
-    .user-info-dropdown {
-      display: none;
-    }
-
-    .o-divider {
-      display: none;
-    }
-
-    .o-icon {
-      display: none;
-    }
-
-    .o-badge-content {
-      right: 0 !important;
-      transform: translate(0, 0) scale(0.5);
-      transform-origin: top right;
-      min-width: 18px;
-      width: fit-content;
-      height: 18px;
-      font-size: 12px;
-      line-height: 18px;
-      .o-badge-label {
-        transform: scale(1);
-        font-size: 12px;
-        line-height: 18px;
-      }
-    }
-  }
-  .user-dropdown-info {
-    --dropdown-list-padding: 9px 4px !important;
-  }
-}
-</style>

package/src/components/OPlusConfigProvider.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide, reactive } from 'vue';
-
-import { OConfigProvider } from '@opensig/opendesign';
-import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn';
-import enUS from '@opensig/opendesign/es/locale/lang/en-us';
-
-import { configProviderInjectKey } from '@/shared/provide';
-
-export interface OPlusConfigProviderPropsT {
-  locale: 'zh' | 'en';
-  theme: 'light' | 'dark';
-}
-
-const props = withDefaults(defineProps<OPlusConfigProviderPropsT>(), {
-  lang: 'zh',
-  theme: 'light',
-});
-
-const globalConfig = reactive({
-  locale: computed(() => props.locale),
-  theme: computed(() => props.theme),
-});
-
-provide(configProviderInjectKey, globalConfig);
-</script>
-
-<template>
-  <OConfigProvider :locale="locale === 'zh' ? zhCN : enUS">
-    <slot />
-  </OConfigProvider>
-</template>

package/src/components/OSection.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { isArray, OLink, OIcon } from '@opensig/opendesign';
-import IconChevronRight from '~icons/components/icon-chevron-right.svg';
-
-interface SectionPropsT {
-  title?: string | Array<string>;
-  subtitle?: string;
-  full?: boolean;
-  headerJustifyCenter?: boolean;
-  footer?: string;
-  footerHref?: string;
-}
-
-const props = withDefaults(defineProps<SectionPropsT>(), {
-  title: undefined,
-  subtitle: undefined,
-  full: false,
-  headerJustifyCenter: true,
-  footer: undefined,
-  footerHref: undefined,
-});
-</script>
-
-<template>
-  <div class="app-section" :class="{ 'is-full': props.full }">
-    <div class="section-wrapper">
-      <slot name="main">
-        <!-- header -->
-        <div v-if="$slots.header || props.title || props.subtitle" class="section-header" :class="{ 'is-left': !props.headerJustifyCenter }">
-          <slot name="header">
-            <template v-if="isArray(props.title)">
-              <h2 v-for="item in props.title" :key="item" class="section-title">
-                {{ item }}
-              </h2>
-            </template>
-            <h2 v-else-if="$slots.title || props.title" class="section-title">
-              <slot name="title">
-                {{ props.title }}
-              </slot>
-            </h2>
-            <p v-if="$slots.subtitle || props.subtitle" class="section-subtitle">
-              <slot name="subtitle">
-                {{ props.subtitle }}
-              </slot>
-            </p>
-          </slot>
-        </div>
-
-        <!-- body -->
-        <div v-if="$slots.default" class="section-body">
-          <slot></slot>
-        </div>
-
-        <!-- footer -->
-        <div v-if="$slots.footer || props.footer" class="section-footer">
-          <slot name="footer">
-            <OLink :href="props.footerHref" target="_blank">
-              {{ props.footer }}
-              <template #suffix>
-                <OIcon class="footer-icon"><IconChevronRight /> </OIcon>
-              </template>
-            </OLink>
-          </slot>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-section {
-  --o-gap-section: var(--o-gap-7);
-  .section-wrapper {
-    margin: var(--o-gap-section) auto 0;
-  }
-
-  &.is-full {
-    .section-body {
-      max-width: 100%;
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  &:last-child {
-    .section-wrapper {
-      padding-bottom: var(--o-gap-section);
-    }
-  }
-
-  .section-header {
-    &.is-left {
-      .section-title,
-      .section-subtitle {
-        justify-content: start;
-      }
-    }
-  }
-
-  .section-title {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    color: var(--o-color-info1);
-    text-align: center;
-    @include display3;
-    font-weight: 500;
-  }
-
-  .section-subtitle {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    display: flex;
-    justify-content: center;
-    margin-top: 12px;
-    color: var(--o-color-info2);
-    @include text1;
-
-    @include respond-to('pad-laptop') {
-      margin-top: 8px;
-    }
-
-    @include respond-to('phone') {
-      margin-top: 12px;
-      text-align: center;
-    }
-  }
-
-  .section-body {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-
-    margin-top: var(--o-gap-7);
-  }
-
-  .section-footer {
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--layout-content-padding);
-    margin: 0 auto;
-    color: var(--o-color-info1);
-
-    display: flex;
-    justify-content: center;
-    @include text1;
-
-    margin-top: 32px;
-
-    :deep(.o-btn) {
-      border-radius: var(--btn-height);
-    }
-
-    @include respond-to('<=laptop') {
-      margin-top: 16px;
-    }
-
-    @include respond-to('phone') {
-      margin-top: 12px;
-    }
-
-    &:hover {
-      .footer-icon {
-        fill: var(--link-color-active);
-      }
-    }
-  }
-
-  .footer-icon {
-    font-size: 16px;
-    height: 24px;
-  }
-}
-</style>

package/src/components/OSourceCode.vue

@@ -1,153 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
-
-import IconChevronDown from '~icons/components/icon-chevron-down.svg';
-
-interface CodeItemT {
-  label: string;
-  url: string;
-  icon?: string;
-}
-
-interface CodePropsT {
-  title?: string;
-  options?: CodeItemT[];
-  url?: string;
-  icon?: string;
-  justify?: string;
-}
-
-withDefaults(defineProps<CodePropsT>(), {
-  title: undefined,
-  options: undefined,
-  url: undefined,
-  icon: undefined,
-  justify: 'center',
-});
-
-const itemChange = (data: any) => {
-  window.open(data.url, '_blank');
-};
-
-const dropdownVisible = ref(false);
-const visibleChange = (val: boolean) => {
-  dropdownVisible.value = val;
-};
-</script>
-
-<template>
-  <div class="source-code">
-    <div v-if="url" class="info-wrap">
-      <span class="title">{{ title }}</span>
-      <OIcon v-if="icon">
-        <component :is="icon" class="icon" />
-      </OIcon>
-    </div>
-    <ODropdown
-      v-else
-      trigger="hover"
-      optionPosition="bottom"
-      option-wrap-class="dropdown"
-      :class="{ 'dropdown-active': dropdownVisible }"
-      @visible-change="visibleChange"
-    >
-      <div class="info-wrap hover-icon-rotate">
-        <span class="title">{{ title }}</span>
-        <OIcon class="icon"><IconChevronDown /></OIcon>
-      </div>
-      <template #dropdown>
-        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list" :style="{ '--dropdown-item-justify': justify }">
-          {{ item.label }}
-          <OIcon v-if="item.icon">
-            <component :is="item.icon" class="icon" />
-          </OIcon>
-        </ODropdownItem>
-      </template>
-    </ODropdown>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.source-code {
-  height: calc(100% + 10px);
-  display: flex;
-  align-items: center;
-  .info-wrap {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    color: var(--o-color-info1);
-    cursor: pointer;
-
-    @include hover {
-      color: var(--o-color-primary1);
-    }
-
-    .title {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      height: 100%;
-      @include tip1;
-    }
-  }
-  .list {
-    background: var(--o-color-fill2);
-    cursor: pointer;
-    box-shadow: var(--o-shadow-1);
-    border-radius: var(--o-radius_control-xs);
-    padding: var(--o-gap-1);
-    width: 144px;
-  }
-}
-
-.hover-icon-rotate {
-  .o-icon {
-    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
-  }
-
-  @include hover {
-    .o-icon {
-      transform: rotate(-180deg);
-    }
-  }
-}
-.icon {
-  font-size: var(--o-icon_size_control-xs);
-  margin-left: var(--o-gap-1);
-}
-.o-dropdown {
-  height: 100%;
-}
-.dropdown-active {
-  .info-wrap {
-    color: var(--o-color-primary1);
-  }
-  .o-icon {
-    transform: rotate(-180deg);
-  }
-}
-.o-dropdown-item {
-  background: var(--o-color-fill2);
-  cursor: pointer;
-  border-radius: var(--o-radius_control-xs);
-  padding: var(--o-gap-1) 12px;
-  min-width: 144px;
-  height: 32px;
-  @include tip1;
-
-  @include hover {
-    background: var(--o-color-control2-light);
-  }
-
-  &:active {
-    color: var(--o-color-primary1);
-    background: var(--o-color-control3-light);
-    font-weight: 600;
-  }
-}
-.dropdown {
-  --dropdown-list-radius: var(--o-radius-xs);
-}
-</style>