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

package/dist/index.d.ts

@@ -1,20 +1,11 @@
-import { default as OBanner } from './components/OBanner.vue';
-import { default as OCookieNotice } from './components/OCookieNotice.vue';
-import { default as OFooter } from './components/OFooter.vue';
-import { default as OHeaderSearch } from './components/OHeaderSearch.vue';
-import { default as OHeaderUser } from './components/OHeaderUser.vue';
-import { default as OPlusConfigProvider } from './components/OPlusConfigProvider.vue';
-import { default as OSection } from './components/OSection.vue';
-import { default as OSourceCode } from './components/OSourceCode.vue';
-import { default as OThemeSwitcher } from './components/OThemeSwitcher.vue';
-export { OBanner, OCookieNotice, OFooter, OHeaderSearch, OHeaderUser, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
 export * from './components/activity';
+export * from './components/banner';
+export * from './components/config-provider';
+export * from './components/cookie-notice';
 export * from './components/element-plus';
 export * from './components/events';
+export * from './components/footer';
 export * from './components/header';
 export * from './components/meeting';
 export * from './components/search';
-declare const _default: {
-    install: (app: any) => void;
-};
-export default _default;
+export * from './components/section';

package/docs/design.md

@@ -21,7 +21,7 @@ components
 | openEuler社区页头| OHeader_openEuler.vue   |  11月完成  ||
 | openEuler社区页脚| OFooter_openEuler.vue   |  11月完成  ||
 | 悬浮按钮| OFloatingButton.vue   |  11月完成  ||
-| 语言切换| OLanguageSwitcher.vue   |  11月完成  |调用useLocale的能力|
-| 风格切换| OThemeSwitcher.vue   |  11月完成  |调用useTheme的能力|
+| 语言切换| OHeaderLanguageSwitcher.vue   |  11月完成  |调用useLocale的能力|
+| 风格切换| OHeaderTheme.vue   |  11月完成  |调用useTheme的能力|
 | 导航用户信息| OUserInfo.vue   |  11月完成  |调用useLogin的能力|
 | 隐私管理| OCookieNotice.vue   |  11月完成  ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus-test/components",
-  "version": "0.0.1-rc.60",
+  "version": "0.0.1-rc.62",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -32,8 +32,8 @@
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
-    "@opendesign-plus/styles": "0.0.1-rc.2",
-    "@opendesign-plus/composables": "0.0.1-rc.8"
+    "@opendesign-plus/composables": "0.0.1-rc.8",
+    "@opendesign-plus/styles": "0.0.1-rc.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.0",

package/scripts/generate-components-index.js

@@ -17,11 +17,6 @@ function generateComponentsIndex() {
     // 读取组件目录
     const files = fs.readdirSync(componentsDir);
 
-    // 过滤出.vue文件（不包含子目录）
-    const vueFiles = files.filter(file =>
-      file.endsWith('.vue') && !fs.statSync(path.join(componentsDir, file)).isDirectory()
-    );
-
     // 扫描子目录，查找包含 index.ts 的目录
     const subDirs = files.filter(file => {
       const fullPath = path.join(componentsDir, file)
@@ -29,59 +24,22 @@ function generateComponentsIndex() {
         fs.existsSync(path.join(fullPath, 'index.ts'))
     })
 
-    console.log(`发现 ${ vueFiles.length } 个组件文件`)
     console.log(`发现 ${ subDirs.length } 个子目录: ${ subDirs.join(', ') }`)
 
-    // 生成 .vue 文件的导入语句
-    const vueImportStatements = vueFiles.map(file => {
-      const componentName = file.replace('.vue', '');
-      return `import ${componentName} from './components/${file}';`;
-    }).join('\n');
-
     // 生成子目录的重新导出语句
     const subDirExportStatements = subDirs.map(dir => {
       return `export * from './components/${ dir }';`
     }).join('\n')
 
-    // 生成组件列表
-    const componentNames = vueFiles.map(file => file.replace('.vue', ''));
-    const componentsObject = componentNames.map(name => `  ${name}`).join(',\n');
-
-    // 生成导出语句
-    const exportStatement = componentNames.length > 0
-      ? `export { ${ componentNames.join(', ') } };`
-      : ''
-
     // 生成完整的index.ts内容
     const indexContent = `// OpenDesignPlus Components 库入口文件
 // 此文件由 scripts/generate-components-index.js 自动生成
+${ subDirExportStatements }
+`.trim();
 
-${ vueImportStatements }
-
-${ componentsObject.length > 0 ? `// 导出组件
-const components = {
-${componentsObject}
-};` : '' }
-
-${ exportStatement ? `// 导出单个组件\n${ exportStatement }` : '' }
-
-${ subDirExportStatements ? `// 重新导出子目录中的组件\n${ subDirExportStatements }` : '' }
-
-// 默认导出（用于Vue插件安装）
-export default {
-  install: (app: any) => {
-    ${ componentsObject.length > 0 ? `// 注册所有组件
-    Object.entries(components).forEach(([name, component]) => {
-      app.component(name, component);
-    });` : '' }
-  }
-};
-`;
-    
     // 写入文件
     fs.writeFileSync(indexFilePath, indexContent, 'utf-8');
     console.log(`组件索引文件已生成: ${indexFilePath}`);
-    console.log(`成功导出 ${ componentNames.length } 个 .vue 组件`)
     if (subDirs.length > 0) {
       console.log(`成功重新导出 ${ subDirs.length } 个子目录: ${ subDirs.join(', ') }`)
     }

package/src/components/activity/OActivityMyCalendar.vue

@@ -410,7 +410,7 @@ const confirmDelete = () => {
   }
   dialogLoading.value = true;
   props.deleteActivityRequest(currentRow.value?.id)
-    .then((flag) => {
+    .then((flag: any) => {
       if (typeof flag === 'boolean' && !flag) {
         return;
       }

package/src/components/banner/OBanner.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
+import { computed } from 'vue';
+
+import { useScreen, useTheme } from '@opendesign-plus/composables';
+import ContentWrapper from '../common/ContentWrapper.vue';
+import BannerContent from './OBannerContent.vue';
+import type { BannerItem } from './types';
+
+const props = defineProps<{
+  options?: BannerItem | BannerItem[];
+  size?: 'large' | 'medium' | 'small' | 'tiny';
+  contentJustifyCenter?: boolean;
+  autoPlay?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click', href: string | undefined): void;
+}>();
+
+const { isLight } = useTheme();
+const { isPhone } = useScreen();
+
+// 单个 Banner（非数组，或仅含一项的数组）
+const singleBanner = computed((): BannerItem | undefined => {
+  if (!props.options) return undefined;
+  if (Array.isArray(props.options)) {
+    return props.options.length === 1 ? props.options[0] : undefined;
+  }
+  return props.options;
+});
+
+// 多个 Banner（数组且超过一项）
+const multiBanner = computed((): BannerItem[] | undefined => {
+  if (!Array.isArray(props.options) || props.options.length <= 1) return undefined;
+  return props.options;
+});
+</script>
+
+<template>
+  <div :class="['home-banner', size]">
+    <!-- 单个 Banner 的情况 -->
+    <div v-if="singleBanner" class="content-height">
+      <div v-if="size === 'tiny'">
+        {{ singleBanner.title }}
+      </div>
+
+      <BannerContent
+        v-else-if="!isPhone"
+        :info="singleBanner"
+        :size="size"
+        :content-justify-center="contentJustifyCenter"
+        :is-phone="isPhone"
+        :is-light="isLight"
+        @click="emit('click', $event)"
+      />
+
+      <ContentWrapper v-else class="banner-wrapper">
+        <OFigure
+          class="banner-bg"
+          :src="singleBanner.bg"
+          fit="cover"
+        />
+      </ContentWrapper>
+    </div>
+
+    <!-- 多个 Banner 轮播的情况 -->
+    <div v-else-if="multiBanner" class="content-height">
+      <OCarousel
+        v-if="!isPhone"
+        class="banner-carousel"
+        effect="toggle"
+        active-class="current-slide"
+        indicator-click
+        :auto-play="autoPlay"
+      >
+        <OCarouselItem
+          v-for="(info, index) in multiBanner"
+          :key="index"
+          class="banner-item"
+          :class="`banner-item${index}`"
+        >
+          <BannerContent
+            :info="info"
+            :size="size"
+            :content-justify-center="contentJustifyCenter"
+            :is-phone="isPhone"
+            :is-light="isLight"
+            @click="emit('click', $event)"
+          />
+        </OCarouselItem>
+      </OCarousel>
+
+      <OCarousel
+        v-else
+        class="banner-carousel"
+        effect="gallery"
+        indicator-click
+        arrow="never"
+        :auto-play="autoPlay"
+      >
+        <OCarouselItem
+          v-for="(info, index) in multiBanner"
+          :key="index"
+          class="banner-item"
+          :class="`banner-item${index}`"
+        >
+          <ContentWrapper class="banner-wrapper">
+            <OFigure
+              class="banner-bg"
+              :src="info.bg"
+              @click="emit('click', info.href)"
+            />
+          </ContentWrapper>
+        </OCarouselItem>
+      </OCarousel>
+    </div>
+
+    <!-- 没有 Banner 数据的情况 -->
+    <div v-else class="content-height">
+      <p>No data.</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home-banner {
+  overflow: hidden;
+  position: relative;
+
+  &.tiny {
+    @include display2;
+    font-weight: 500;
+    margin: var(--o-gap-8) 0;
+    color: var(--o-color-info1);
+  }
+
+  .content-height {
+    height: 100%;
+  }
+
+  &.large {
+    --banner-height: 460px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 400px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 360px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 184px;
+    }
+  }
+
+  &.medium {
+    --banner-height: 360px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 280px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('<=pad_v') {
+      --banner-height: 120px;
+    }
+  }
+
+  &.small {
+    --banner-height: 280px;
+    height: var(--banner-height);
+
+    @include respond-to('laptop-pc_s') {
+      --banner-height: 220px;
+    }
+
+    @include respond-to('pad_h') {
+      --banner-height: 180px;
+    }
+
+    @include respond-to('<=pad_v') {
+        display: none;
+    }
+  }
+
+  :deep(.o-btn) {
+    border-radius: var(--btn-height);
+  }
+}
+
+.banner-carousel {
+  width: 100%;
+  height: 100%;
+  @include respond-to('>pad_v') {
+    --carousel-indicator-offset: 53px;
+  }
+
+  @include respond-to('<=pad_v') {
+    --carousel-indicator-offset: 1px;
+  }
+
+  :deep(.o-carousel-indicator-bar) {
+    height: 24px;
+  }
+}
+
+.banner-item {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes fade-up {
+  from {
+    transform: translateY(var(--d));
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.current-slide {
+  .banner-title {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-subtitle {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-text {
+    animation: fade-up 400ms ease-in;
+  }
+  .banner-opts {
+    animation: fade-up 400ms ease-in;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+// 定制修改item1
+.banner-item0 {
+  .banner-attach {
+    height: 120px;
+
+    @include respond-to('pad') {
+      height: 80px;
+    }
+  }
+}
+
+.banner-item1 {
+  .banner-attach {
+    height: 156px;
+
+    @include respond-to('pad') {
+      height: 120px;
+    }
+  }
+}
+
+// 定制修改item2
+.banner-item2 {
+  .banner-content {
+    width: 100%;
+    justify-content: center;
+  }
+  .banner-attach {
+    height: 38%;
+    margin-top: -60px;
+    object-fit: contain;
+  }
+}
+
+.banner-wrapper {
+  height: 100%;
+
+  .banner-bg {
+    height: 100%;
+  }
+}
+</style>

package/src/components/banner/OBannerContent.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { OButton, OFigure } from '@opensig/opendesign';
+import ContentWrapper from '../common/ContentWrapper.vue';
+import type { BannerContentProps } from './types';
+
+defineProps<BannerContentProps>();
+
+// 内联定义 emits 类型
+const emit = defineEmits<{
+  (e: 'click', href: string | undefined): void;
+}>();
+
+const onClick = (href: string | undefined, hasBtn: string | undefined) => {
+  if (href && !hasBtn) {
+    window.open(href);
+    emit('click', href);
+  }
+};
+</script>
+
+<template>
+  <OFigure
+    class="banner-bg"
+    :src="info.bg"
+    :class="{
+      'with-sticky-bg': info.withStickyBg,
+      'cursor-pointer': info.href && !info.btn,
+    }"
+    :style="{
+      '--pad-offset': info.pad_offset,
+    }"
+    @click="onClick(info.href, info.btn)"
+  >
+    <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
+      <div class="banner-content">
+        <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
+
+        <!-- 标题 -->
+        <div 
+          :class="{
+            'banner-title': true, 
+            'text-dark': info.text_theme === 'dark' 
+          }" 
+          v-if="info.title"
+        >
+          {{ info.title }}
+        </div>
+        <!-- 副标题 -->
+        <div 
+          :class="{
+            'banner-subtitle': true, 
+            'text-dark': info.text_theme === 'dark' 
+          }" 
+          v-if="info.subtitle"
+        >
+          {{ info.subtitle }}
+        </div>
+        <div
+          class="banner-text"
+          v-if="info.bg_text"
+          :style="{
+            backgroundImage: `url(${info.bg_text})`,
+            '--pc-width': info.pc_text_width,
+            '--pc-height': info.pc_text_height,
+            '--pad-width': info.pad_text_width,
+            '--pad-height': info.pad_text_height,
+          }"
+        ></div>
+        <!-- 操作按钮 -->
+        <div v-if="info.btn" class="banner-opts">
+          <OButton 
+            :href="info.href" 
+            target="_blank" 
+            variant="solid" 
+            color="primary" 
+            :size="size === 'tiny' ? undefined : size"
+          >
+            {{ info.btn }}
+          </OButton>
+        </div>
+      </div>
+    </ContentWrapper>
+  </OFigure>
+</template>
+
+<style lang="scss" scoped>
+.banner-bg {
+  width: 100%;
+  height: 100%;
+
+  :deep(.o-figure-img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include respond-to('pad') {
+    :deep(.o-figure-img) {
+      transition: object-position 0.3s ease;
+      object-position: var(--pad-offset);
+    }
+  }
+
+  @include respond-to('phone') {
+    --figure-radius: 4px;
+  }
+}
+
+.banner-wrapper {
+  height: 100%;
+
+  &.content-center {
+    display: flex;
+    justify-content: center;
+
+    & .banner-content {
+      align-items: center;
+    }
+  }
+}
+
+.banner-content {
+  height: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.banner-title {
+  @include display1;
+  color: var(--o-color-info1);
+  font-weight: 500;
+  margin-bottom: 8px;
+
+  &.text-dark {
+    color: var(--o-color-info1-inverse);
+  }
+
+  @include respond-to('<=pad_v') {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+.banner-subtitle {
+  color: var(--o-color-info1);
+  margin-top: 8px;
+  font-size: 16px;
+
+  &.text-dark {
+    color: var(--o-color-info1-inverse);
+  }
+}
+
+.banner-text {
+  height: var(--pc-height);
+  width: var(--pc-width);
+  background-size: contain;
+  background-repeat: no-repeat;
+
+  @include respond-to('pad') {
+    height: var(--pad-height);
+    width: var(--pad-width);
+  }
+}
+
+.banner-opts {
+  margin-top: 24px;
+  --d: 20px;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>

package/src/components/banner/index.ts

@@ -0,0 +1,18 @@
+import _OBanner from './OBanner.vue';
+import _OBannerContent from './OBannerContent.vue';
+import type { App } from 'vue';
+
+
+const OBanner = Object.assign(_OBanner, {
+  install(app: App) {
+    app.component('OBanner', _OBanner);
+  },
+});
+const OBannerContent = Object.assign(_OBannerContent, {
+  install(app: App) {
+    app.component('OBannerContent', _OBannerContent);
+  },
+});
+
+export { OBanner, OBannerContent };
+export * from './types';

package/src/components/banner/types.ts

@@ -0,0 +1,39 @@
+// Banner 项的类型定义
+export interface BannerItem {
+  title?: string;
+  subtitle?: string;
+  bg: string;
+  text_theme?: 'light' | 'dark';
+  bg_text?: string;
+  pc_text_width?: string;
+  pc_text_height?: string;
+  pad_text_width?: string;
+  pad_text_height?: string;
+  attach?: string;
+  href?: string;
+  btn?: string;
+  withStickyBg?: boolean;
+  pad_offset?: string;
+}
+
+// BannerContent 组件的 Props 类型
+export interface BannerContentProps {
+  info: BannerItem;
+  size?: 'large' | 'medium' | 'small' | 'tiny';
+  contentJustifyCenter?: boolean;
+  isPhone?: boolean;
+  isLight?: boolean;
+}
+
+// Emits 事件类型
+export interface HomeBannerEmits {
+  (e: 'before-change', index: number): void;
+  (e: 'click', href: string | undefined): void;
+}
+
+export interface BannerContentEmits {
+  (e: 'click', href: string | undefined): void;
+}
+
+// 组件尺寸类型
+export type ComponentSize = 'large' | 'medium' | 'small' | 'tiny';

package/src/components/common/ClientOnly.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const isClient = ref(false);
+
+onMounted(() => {
+  isClient.value = true;
+});
+</script>
+
+<template>
+  <slot v-if="isClient" />
+</template>

package/src/components/{OPlusConfigProvider.vue → config-provider/OPlusConfigProvider.vue}

@@ -2,8 +2,8 @@
 import { computed, provide, reactive } from 'vue';
 
 import { OConfigProvider } from '@opensig/opendesign';
-import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn.mjs';
-import enUS from '@opensig/opendesign/es/locale/lang/en-us.mjs';
+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';
 

package/src/components/config-provider/index.ts

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