@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.20

package/src/components/OHeaderUser.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { OIcon, OBadge, 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;
+  options?: OptionsItemT[];
+  customSize?: number;
+}
+
+withDefaults(defineProps<UserPropsT>(), {
+  token: undefined,
+  lang: undefined,
+  noticeTotal: undefined,
+  userInfo: undefined,
+  options: undefined,
+  customSize: 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' : ''}`"
+        >
+          <div class="info-wrap hover-icon-rotate">
+            <OBadge :value="noticeTotal" :dot="true" color="danger" class="header-message user-avatar" :class="{ 'notice-not': !noticeTotal }">
+              <AppAvatar :avatar="userInfo.photo" :name="userInfo.username" :custom-size="customSize" />
+            </OBadge>
+            <p class="user-account">{{ userInfo.username }}</p>
+            <OIcon class="icon">
+              <IconChevronDown />
+            </OIcon>
+          </div>
+          <template #dropdown>
+            <!-- 账号信息 -->
+            <template v-for="item in options" :key="item.label">
+              <ODropdownItem :style="{ '--dropdown-item-justify': 'center' }" @click="jumpToPage(item)">
+                <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>
+              </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 {
+  margin-right: 4px;
+
+  :deep(.o-badge-content) {
+    --badge-dot-size: 6px;
+    right: 7px;
+    top: 2px;
+  }
+}
+
+.o-dropdown-item {
+  white-space: nowrap;
+  --dropdown-item-color: var(--o-color-info1);
+  --dropdown-item-padding: 5px 12px;
+  @include tip1;
+
+  @include hover {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control2-light);
+  }
+}
+
+.notice-not {
+  :deep(.o-badge-content) {
+    display: none;
+  }
+}
+
+.user-account {
+  color: var(--o-color-info1);
+  max-width: 96px;
+  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;
+        }
+
+        .user-account {
+          display: none;
+        }
+
+        .icon {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.user-dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+.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 {
+    .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;
+      }
+    }
+  }
+}
+</style>

package/src/components/OPlusConfigProvider.vue

@@ -1,32 +1,32 @@
-<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>
+<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 +1,178 @@
-<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>
+<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>