@opendesign-plus-test/components 0.0.1-rc.60 → 0.0.1-rc.62

package/src/components/{OCookieNotice.vue → cookie-notice/OCookieNotice.vue}

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import ClientOnly from './common/ClientOnlyWrapper';
+import ClientOnly from '../common/ClientOnly.vue';
 import { useScreen } from '@opendesign-plus/composables';
 import { useI18n } from '@/i18n';
 import { DialogActionT, OButton, ODialog, OIcon, OIconClose, OSwitch } from '@opensig/opendesign';

package/src/components/cookie-notice/index.ts

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

package/src/components/element-plus/OElCookieNotice.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import ClientOnly from '../common/ClientOnlyWrapper';
+import ClientOnly from '../common/ClientOnly.vue';
 import { useScreen } from '@opendesign-plus/composables';
 import { useI18n } from '@/i18n';
 import { ElButton, ElDialog, ElSwitch, ElIcon, ElDivider } from 'element-plus';

package/src/components/events/OEventsApply.vue

@@ -103,6 +103,18 @@ defineProps<EventsApplyPropsT>();
         --height: var(--o-gap-6);
         height: calc(100% + var(--height) - 40px); // 延伸到下一个元素
         background-color: var(--o-color-control4);
+        @include respond('laptop') {
+          --height: var(--o-gap-5);
+        }
+        @include respond('pad_h') {
+          --height: var(--o-gap-4);
+        }
+        @include respond('pad_v') {
+          --height: var(--o-gap-5);
+        }
+        @include respond('phone') {
+          --height: var(--o-gap-5);
+        }
       }
 
       // 最后一个序号不显示连接线（倒数第2个子元素，因为最后一个是step-item）
@@ -117,12 +129,38 @@ defineProps<EventsApplyPropsT>();
     grid-template-columns: repeat(3, 1fr); // 桌面端：3列
     grid-template-rows: repeat(3, auto); // 桌面端：3行
     gap: var(--o-gap-6);
+    @include respond('laptop') {
+      gap: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      gap: var(--o-gap-4);
+    }
+    @include respond('pad_v') {
+      gap: var(--o-gap-5);
+    }
+    @include respond('phone') {
+      gap: var(--o-gap-5);
+    }
 
     // 移动端：2列布局（序号列 + 内容列）
     @include respond('<=pad_v') {
       grid-template-columns: auto 1fr; // 第1列自适应，第2列占满
       grid-template-rows: auto; // 行数自动
       gap: var(--o-gap-3); // 列间距12px，行间距12px
+      row-gap: var(--o-gap-6); // 行间距
+
+      @include respond('laptop') {
+        row-gap: var(--o-gap-5);
+      }
+      @include respond('pad_h') {
+        row-gap: var(--o-gap-4);
+      }
+      @include respond('pad_v') {
+        row-gap: var(--o-gap-3);
+      }
+      @include respond('phone') {
+        row-gap: var(--o-gap-3);
+      }
     }
 
     .step-item {
@@ -132,6 +170,12 @@ defineProps<EventsApplyPropsT>();
       flex-direction: column; // 垂直排列子元素
       --idx-size: 20px;
       --idx-gap: var(--o-gap-3);
+      @include respond('laptop') {
+        --idx-gap: var(--o-gap-2);
+      }
+      @include respond('pad_h') {
+        --idx-gap: var(--o-gap-2);
+      }
       // 移动端：强制在第2列显示
       @include respond('<=pad_v') {
         grid-column: 2 !important;
@@ -146,6 +190,14 @@ defineProps<EventsApplyPropsT>();
         display: flex;
         align-items: center;
         @include h2;
+        @include respond('laptop') {
+          margin-bottom: var(--o-gap-3);
+          padding: var(--o-gap-4) var(--o-gap-5) 0 var(--o-gap-5);
+        }
+        @include respond('pad_h') {
+          margin-bottom: var(--o-gap-2);
+          padding: var(--o-gap-3) var(--o-gap-4) 0 var(--o-gap-4);
+        }
         @include respond('pad_v') {
           margin-bottom: 0;
           padding: var(--o-gap-3) var(--o-gap-4);
@@ -183,6 +235,12 @@ defineProps<EventsApplyPropsT>();
         color: var(--o-color-info2);
         padding: 0 var(--o-gap-6) var(--o-gap-4) var(--o-gap-6);
         @include tip1;
+        @include respond('laptop') {
+          padding: 0 var(--o-gap-5) var(--o-gap-3) var(--o-gap-5);
+        }
+        @include respond('pad_h') {
+          padding: 0 var(--o-gap-4) var(--o-gap-3) var(--o-gap-4);
+        }
         @include respond('pad_v') {
           padding: var(--o-gap-3) var(--o-gap-4);
         }
@@ -215,6 +273,12 @@ defineProps<EventsApplyPropsT>();
               font-size: 16px;
               margin-right: var(--o-gap-4);
               color: #fff;
+              @include respond('laptop') {
+                margin-right: var(--o-gap-3);
+              }
+              @include respond('pad_h') {
+                margin-right: var(--o-gap-2);
+              }
               @include respond('pad_v') {
                 margin-right: var(--o-gap-2);
               }
@@ -237,11 +301,19 @@ defineProps<EventsApplyPropsT>();
             --padding-left: var(--o-gap-4);
             padding-left: calc(var(--o-gap-4) + var(--o-gap-4));
             color: rgba(255, 255, 255, 0.8);
+            @include respond('laptop') {
+              --padding-left: var(--o-gap-3);
+            }
+            @include respond('pad_h') {
+              --padding-left: var(--o-gap-2);
+            }
             @include respond('pad_v') {
               padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
             }
             @include respond('phone') {
               padding-left: var(--o-gap-5);
+              color: var(--o-color-info2);
             }
           }
         }
@@ -335,9 +407,23 @@ defineProps<EventsApplyPropsT>();
 
         .img-wrapper {
           height: 280px;
-          width: calc(100% - var(--o-gap-6) * 2);
+          --width: var(--o-gap-6);
+          width: calc(100% - var(--width) * 2);
           margin-left: auto;
           margin-right: auto;
+          @include respond('laptop') {
+            --width: var(--o-gap-5);
+          }
+          @include respond('pad_h') {
+            --width: var(--o-gap-4);
+            height: 220px;
+          }
+          @include respond('pad_v') {
+            --width: var(--o-gap-5);
+          }
+          @include respond('phone') {
+            --width: var(--o-gap-5);
+          }
         }
 
         .img-wrapper-phone {

package/src/components/events/OEventsList.vue

@@ -198,7 +198,16 @@ const list = computed(() => {
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
-    @include respond('<=pad_v') {
+    @include respond('laptop') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      padding: var(--o-gap-4) var(--o-gap-5);
+    }
+    @include respond('pad_v') {
+      padding: var(--o-gap-3) var(--o-gap-4);
+    }
+    @include respond('phone') {
       padding: var(--o-gap-3) var(--o-gap-4);
     }
 
@@ -212,6 +221,12 @@ const list = computed(() => {
         flex-shrink: 0;
         margin-right: var(--o-gap-5);
         font-weight: 500;
+        @include respond('laptop') {
+          margin-right: var(--o-gap-4);
+        }
+        @include respond('pad_h') {
+          margin-right: var(--o-gap-3);
+        }
         @include respond('pad_v') {
           margin-right: var(--o-gap-4);
         }
@@ -219,7 +234,6 @@ const list = computed(() => {
           margin-right: var(--o-gap-4);
         }
       }
-
       .o-toggle {
         --toggle-size: 32px;
         --toggle-padding: 3px 15px;
@@ -253,6 +267,14 @@ const list = computed(() => {
       grid-template-columns: repeat(1, 1fr);
       container-type: inline-size;
     }
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+      gap: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+      gap: var(--o-gap-4);
+    }
     @include respond('pad_v') {
       margin-top: var(--o-gap-4);
       gap: var(--o-gap-3);
@@ -322,6 +344,10 @@ const list = computed(() => {
           @include respond('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
+          @include respond('phone') {
+            top: var(--o-gap-2);
+            right: var(--o-gap-2);
+          }
         }
 
         .event-name {
@@ -351,6 +377,12 @@ const list = computed(() => {
           }
 
           @include text1;
+          @include respond('laptop') {
+            margin-top: var(--o-gap-4);
+          }
+          @include respond('pad_h') {
+            margin-top: var(--o-gap-3);
+          }
           @include respond('pad_v') {
             margin-top: var(--o-gap-2);
           }
@@ -382,6 +414,19 @@ const list = computed(() => {
     --pagination-item-bg-color-current: var(--o-color-primary1);
     --pagination-item-color-current: #fff;
 
+    @include respond('laptop') {
+      margin-top: var(--o-gap-5);
+    }
+    @include respond('pad_h') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('pad_v') {
+      margin-top: var(--o-gap-4);
+    }
+    @include respond('phone') {
+      margin-top: var(--o-gap-4);
+    }
+
     .o-pagination-wrap {
       justify-content: flex-end;
     }

package/src/components/{OFooter.vue → footer/OFooter.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ODivider } from '@opensig/opendesign';
 
-import ContentWrapper from './common/ContentWrapper.vue';
+import ContentWrapper from '../common/ContentWrapper.vue';
 
 const props = withDefaults(defineProps<{
   simple: any;
@@ -34,9 +34,9 @@ const props = withDefaults(defineProps<{
       <ContentWrapper v-if="$slots.atom || props.atom">
         <slot name="atom">
           <div v-if="props.atom" class="atom">
-            <p class="atom-text">{{ props.atom[props.lang].title }}</p>
-            <a :href="props.atom[props.lang].href" target="_blank">
-              <img :src="props.atom[props.lang].img" class="atom-logo" alt="" />
+            <p class="atom-text">{{ props.atom[props.lang]?.title }}</p>
+            <a :href="props.atom[props.lang]?.href" target="_blank">
+              <img :src="props.atom[props.lang]?.img" class="atom-logo" alt="" />
             </a>
           </div>
           <ODivider class="atom-divider" />

package/src/components/footer/index.ts

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

package/src/components/header/OHeaderLanguageSwitcher.vue

@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useLocale, useScreen } from '@opendesign-plus/composables';
+import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
+
+import IconLocale from '~icons/components/icon-locale.svg';
+
+export interface LanguageOptionT {
+  id: string;
+  label: string;
+  simple: string;
+}
+
+const props = defineProps({
+  options: {
+    type: Array as () => LanguageOptionT[],
+    default() {
+      return [
+        { id: 'zh', label: '简体中文', simple: '中' },
+        { id: 'en', label: 'English', simple: 'EN'  },
+      ];
+    },
+  },
+  type: {
+    type: String as () => 'auto' | 'common' | 'mobile',
+    default: 'auto',
+  },
+  auto: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { changeLocale, locale } = useLocale();
+
+const { lePadV } = useScreen();
+const lang = computed(() => {
+  return locale.value;
+});
+
+
+// 选择语言
+const emits = defineEmits(['change']);
+const changeLanguage = (newlang: LanguageOptionT) => {
+  if (props.auto) {
+    changeLocale();
+  }
+  emits('change', newlang);
+};
+
+const getLang = (lang: String, simple?: boolean) => {
+  const item = props.options.find((el: LanguageOptionT) => el.id === lang);
+  if (item) {
+    return simple ? item.simple : item.label;
+  }
+
+  const defaultLang = props.options[0];
+  return simple ? defaultLang.simple : defaultLang.label;
+};
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && !lePadV.value);
+});
+</script>
+
+<template>
+  <div
+    v-if="isCommon"
+    :class="options.length <= 1 ? 'hide-lang' : 'header-lang'"
+  >
+    <ODropdown
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+    >
+      <div class="info-wrap">
+        <OIcon class="icon">
+          <IconLocale />
+          <div :class="['locale-tag', { 'is-en': lang === 'en' }]">{{ getLang(lang, true) }}</div>
+        </OIcon>
+      </div>
+
+      <template #dropdown>
+        <ODropdownItem
+          v-for="item in options"
+          @click="changeLanguage(item)"
+          :key="item.id"
+          :class="['list', { 'is-active': lang === item.id }]"
+        >
+          {{ getLang(item.id) }}
+        </ODropdownItem>
+      </template>
+    </ODropdown>
+  </div>
+
+  <div
+    v-else
+    :class="options.length <= 1 ? 'hide-lang' : 'mobile-change-language'"
+  >
+    <span
+      v-for="item in options"
+      :key="item.id"
+      :class="{ active: lang === item.id }"
+      @click.stop="changeLanguage(item)"
+      >{{ getLang(item.id, true) }}</span
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.hide-lang {
+  display: none;
+}
+
+.header-lang {
+  height: calc(100% + 10px);
+  display: flex;
+  align-items: center;
+
+  .info-wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon {
+      font-size: var(--o-icon_size_control-m);
+      position: relative;
+      color: var(--o-color-info1);
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
+    }
+    .locale-tag {
+      position: absolute;
+      font-size: 10px;
+      height: 12px;
+      width: 12px;
+      background-color: var(--o-color-fill2);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 12px;
+      top: 11px;
+
+      &.is-en {
+        width: 16px;
+      }
+    }
+  }
+  .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;
+  }
+}
+
+.o-dropdown {
+  height: 100%;
+}
+.o-dropdown-item {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1);
+  min-width: 144px;
+  height: 40px;
+  color: var(--o-color-info1);
+
+  @include hover {
+    background: var(--o-color-control2-light);
+  }
+
+  &.is-active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+  }
+}
+.dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+
+.mobile-change-language {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  span {
+    color: var(--o-color-info1);
+    margin-right: var(--o-gap-1);
+    text-align: center;
+    @include text1;
+    cursor: pointer;
+    &.active {
+      color: var(--o-color-primary1);
+      font-weight: 500;
+    }
+    &:not(:last-child) {
+      &:after {
+        content: '|';
+        margin-left: var(--o-gap-1);
+        color: var(--o-color-info1);
+      }
+    }
+  }
+}
+</style>

package/src/components/{OHeaderSearch.vue → header/OHeaderSearch.vue}

@@ -4,15 +4,15 @@ import { OIcon } from '@opensig/opendesign';
 import { onClickOutside, useDebounceFn } from '@vueuse/core';
 import { useScreen } from '@opendesign-plus/composables';
 
-import SearchImageInput from './search/internal/SearchImageInput.vue';
-import SearchPanel from './search/internal/SearchPanel.vue';
-import { useSearchHistory } from './search/composables/useSearchHistory';
+import SearchImageInput from '../search/internal/SearchImageInput.vue';
+import SearchPanel from '../search/internal/SearchPanel.vue';
+import { useSearchHistory } from '../search/composables/useSearchHistory';
 import { useI18n } from '@/i18n';
 import type {
   OSearchPayload,
   OSearchRecommendItem,
   OSearchUploadImageFn,
-} from './search/types';
+} from '../search/types';
 
 import IconSearch from '~icons/components/icon-header-search.svg';
 import IconBack from '~icons/components/icon-header-back.svg';
@@ -214,7 +214,7 @@ const handleClear = () => {
 const handleSuggestClick = (item: OSearchRecommendItem) => {
   emit('recommend-click', item);
   innerValue.value = item.key;
-  runSearch(item.key);
+  runSearch(item.key ?? '');
 };
 
 const handleRecommendClick = (val: string) => {

package/src/components/{OSourceCode.vue → header/OHeaderSourceCode.vue}

@@ -4,14 +4,14 @@ import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
 
-interface CodeItemT {
+export interface CodeItemT {
   label: string;
   href: string;
   icon?: string;
   target?: string;
 }
 
-interface CodePropsT {
+export interface CodePropsT {
   title?: string;
   options?: CodeItemT[];
   href?: string;

package/src/components/{OThemeSwitcher.vue → header/OHeaderTheme.vue}

@@ -6,7 +6,7 @@ import { useScreen } from '@opendesign-plus/composables';
 import IconSun from '~icons/components/icon-sun.svg';
 import IconMoon from '~icons/components/icon-moon.svg';
 
-export interface OThemeSwitcherPropsT {
+export interface OHeaderThemePropsT {
   theme?: string;
   type?: 'auto' | 'common' | 'mobile';
   lightValue?: string;
@@ -14,12 +14,12 @@ export interface OThemeSwitcherPropsT {
   disabled?: boolean;
 }
 
-export interface OThemeSwitcherEmitsT {
+export interface OHeaderThemeEmitsT {
   (e: 'update:theme', value: string): void;
   (e: 'change', val: string): void;
 }
 
-const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
+const props = withDefaults(defineProps<OHeaderThemePropsT>(), {
   theme: 'light',
   type: 'auto',
   lightValue: 'light',
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
   disabled: false,
 });
 
-const emit = defineEmits<OThemeSwitcherEmitsT>();
+const emit = defineEmits<OHeaderThemeEmitsT>();
 
 const { gtPhone } = useScreen();
 

package/src/components/{OHeaderUser.vue → header/OHeaderUser.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { OIcon, OBadge, ODropdown, ODropdownItem } from '@opensig/opendesign';
 
-import AppAvatar from './common/AppAvatar.vue';
+import AppAvatar from '../common/AppAvatar.vue';
 
 import IconAvatar from '~icons/components/icon-avatar-line.svg';
 import IconChevronDown from '~icons/components/icon-chevron-down.svg';
@@ -10,12 +10,12 @@ import { useScreen } from '@opendesign-plus/composables';
 
 const { lePadV } = useScreen();
 
-interface UserInfoT {
+export interface UserInfoT {
   photo: string;
   username: string;
 }
 
-interface OptionsItemT {
+export interface OptionsItemT {
   id: string; // id
   label: string; // 标题
   icon?: string; // icon
@@ -25,7 +25,7 @@ interface OptionsItemT {
   logout: boolean; // 是否是退出登录 item
 }
 
-interface UserPropsT {
+export interface UserPropsT {
   token?: string;
   lang?: string;
   noticeTotal?: number;

package/src/components/header/index.ts

@@ -1,5 +1,10 @@
 import _OHeader from './OHeader.vue';
 import _OHeaderMobile from './OHeaderMobile.vue';
+import _OHeaderUser from './OHeaderUser.vue';
+import _OHeaderSearch from './OHeaderSearch.vue';
+import _OHeaderTheme from './OHeaderTheme.vue';
+import _OHeaderSourceCode from './OHeaderSourceCode.vue';
+import _OHeaderLanguageSwitcher from './OHeaderLanguageSwitcher.vue';
 import type { App } from 'vue';
 
 const OHeader = Object.assign(_OHeader, {
@@ -7,10 +12,42 @@ const OHeader = Object.assign(_OHeader, {
     app.component('OHeader', _OHeader);
   },
 });
+
 const OHeaderMobile = Object.assign(_OHeaderMobile, {
   install(app: App) {
     app.component('OHeaderMobile', _OHeaderMobile);
   },
 });
 
-export { OHeader, OHeaderMobile };
+const OHeaderUser = Object.assign(_OHeaderUser, {
+  install(app: App) {
+    app.component('OHeaderUser', _OHeaderUser);
+  },
+});
+
+const OHeaderSearch = Object.assign(_OHeaderSearch, {
+  install(app: App) {
+    app.component('OHeaderSearch', _OHeaderSearch);
+  },
+});
+
+const OHeaderTheme = Object.assign(_OHeaderTheme, {
+  install(app: App) {
+    app.component('OHeaderTheme', _OHeaderTheme);
+  },
+});
+
+const OHeaderSourceCode = Object.assign(_OHeaderSourceCode, {
+  install(app: App) {
+    app.component('OHeaderSourceCode', _OHeaderSourceCode);
+  },
+});
+
+const OHeaderLanguageSwitcher = Object.assign(_OHeaderLanguageSwitcher, {
+  install(app: App) {
+    app.component('OHeaderLanguageSwitcher', _OHeaderLanguageSwitcher);
+  },
+});
+
+export * from './types';
+export { OHeader, OHeaderMobile, OHeaderUser, OHeaderSearch, OHeaderTheme, OHeaderSourceCode, OHeaderLanguageSwitcher };