@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.30

package/src/components/header-source-code/OHeaderSourceCode.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
+
+import IconChevronDown from '~icons/components/icon-chevron-down.svg';
+
+export interface CodeItemT {
+  label: string;
+  href: string;
+  icon?: string;
+  target?: string;
+}
+
+export interface CodePropsT {
+  title?: string;
+  options?: CodeItemT[];
+  href?: string;
+  target?: string;
+  icon?: string;
+  justify?: string;
+}
+
+withDefaults(defineProps<CodePropsT>(), {
+  justify: 'center',
+});
+
+const itemChange = (data: Pick<CodeItemT, 'href' | 'target'>) => {
+  window.open(data.href, data.target ? data.target : '_blank');
+};
+
+const dropdownVisible = ref(false);
+const visibleChange = (val: boolean) => {
+  dropdownVisible.value = val;
+};
+</script>
+
+<template>
+  <div class="source-code">
+    <div v-if="href" class="info-wrap" @click="itemChange({ href: href, target: target })">
+      <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.href" 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: 100%;
+  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>

package/src/components/header-source-code/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderSourceCode from './OHeaderSourceCode.vue';
+import type { App } from 'vue';
+
+const OHeaderSourceCode = Object.assign(_OHeaderSourceCode, {
+  install(app: App) {
+    app.component('OHeaderSourceCode', _OHeaderSourceCode);
+  },
+});
+
+export { OHeaderSourceCode };

package/src/components/header-theme/OHeaderTheme.vue

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { OIcon, OSwitch, OIconSun, OIconMoon } from '@opensig/opendesign';
+import { useScreen } from '@opendesign-plus/composables';
+
+import IconSun from '~icons/components/icon-sun.svg';
+import IconMoon from '~icons/components/icon-moon.svg';
+
+export interface OHeaderThemePropsT {
+  theme?: string;
+  type?: 'auto' | 'common' | 'mobile';
+  lightValue?: string;
+  darkValue?: string;
+  disabled?: boolean;
+}
+
+export interface OHeaderThemeEmitsT {
+  (e: 'update:theme', value: string): void;
+  (e: 'change', val: string): void;
+}
+
+const props = withDefaults(defineProps<OHeaderThemePropsT>(), {
+  theme: 'light',
+  type: 'auto',
+  lightValue: 'light',
+  darkValue: 'dark',
+  disabled: false,
+});
+
+const emit = defineEmits<OHeaderThemeEmitsT>();
+
+const { gtPhone } = useScreen();
+
+const switchVal = computed({
+  get() {
+    return props.theme;
+  },
+  set(val: string) {
+    emit('update:theme', val);
+    emit('change', val);
+  },
+});
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && gtPhone.value);
+});
+
+const toggleTheme = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
+};
+</script>
+
+<template>
+  <div class="o-theme-switcher">
+    <div v-if="isCommon" class="o-theme-switcher-common" :class="{ disabled }" @click="toggleTheme">
+      <OIcon class="o-theme-icon">
+        <IconMoon v-if="switchVal === lightValue" />
+        <IconSun v-else />
+      </OIcon>
+    </div>
+
+    <div v-else class="o-theme-switcher-mobile">
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="lightValue" :unchecked-value="darkValue" :disabled="disabled">
+        <template #inactive>
+          <OIconMoon />
+        </template>
+        <template #active>
+          <OIconSun />
+        </template>
+        <template #off>
+          <OIconSun />
+        </template>
+        <template #on>
+          <OIconMoon />
+        </template>
+      </OSwitch>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-theme-switcher-common {
+  display: flex;
+  align-items: center;
+  width: var(--o-icon_size-m);
+  height: var(--o-icon_size-m);
+  font-size: var(--o-icon_size-m);
+
+  @include respond-to('pad_h') {
+    width: var(--o-icon_size-s);
+    height: var(--o-icon_size-s);
+    font-size: var(--o-icon_size-s);
+  }
+}
+
+.o-theme-switcher-common:not(.disabled) {
+  cursor: pointer;
+
+  .o-theme-icon {
+    color: var(--o-color-info2);
+
+    @include hover {
+      color: var(--o-color-primary2);
+      background-color: var(--o-color-control2-light);
+      border-radius: var(--o-radius-xs);
+    }
+
+    &:active {
+      color: var(--o-color-primary3);
+    }
+  }
+}
+
+.o-theme-switcher-common.disabled {
+  cursor: not-allowed;
+
+  .o-theme-icon {
+    color: var(--o-color-info4);
+  }
+}
+
+.o-theme-switcher-mobile {
+  .o-theme-switch {
+    --switch-handler-color: var(--o-color-white);
+    --switch-color: var(--o-color-info4);
+  }
+}
+</style>

package/src/components/header-theme/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderTheme from './OHeaderTheme.vue';
+import type { App } from 'vue';
+
+const OHeaderTheme = Object.assign(_OHeaderTheme, {
+  install(app: App) {
+    app.component('OHeaderTheme', _OHeaderTheme);
+  },
+});
+
+export { OHeaderTheme };

package/src/components/header-user/OHeaderUser.vue

@@ -0,0 +1,238 @@
+<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();
+
+export interface UserInfoT {
+  photo: string;
+  username: string;
+}
+
+export interface OptionsItemT {
+  id: string; // id
+  label: string; // 标题
+  icon?: string; // icon
+  url: string; // 跳转链接
+  target: string; // 跳转方式
+  total: number; // 消息数量
+  logout: boolean; // 是否是退出登录 item
+}
+
+export 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('<=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('<=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/header-user/index.ts

@@ -0,0 +1,10 @@
+import _OHeaderUser from './OHeaderUser.vue';
+import type { App } from 'vue';
+
+const OHeaderUser = Object.assign(_OHeaderUser, {
+  install(app: App) {
+    app.component('OHeaderUser', _OHeaderUser);
+  },
+});
+
+export { OHeaderUser };