@opendesign-plus-test/components 0.0.1-rc.61 → 0.0.1-rc.63

package/dist/index.d.ts

@@ -1,21 +1,16 @@
-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 OLanguageSwitcher } from './components/OLanguageSwitcher.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 { OCookieNotice, OFooter, OHeaderSearch, OHeaderUser, OLanguageSwitcher, 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/header-language-switcher';
+export * from './components/header-search';
+export * from './components/header-source-code';
+export * from './components/header-theme';
+export * from './components/header-user';
 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.61",
+  "version": "0.0.1-rc.63",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -25,26 +25,26 @@
       "require": "./dist/components.css"
     }
   },
-  "dependencies": {
-    "@opensig/opendesign": "1.2.3-sp1",
-    "@vueuse/core": "10.11.1",
+  "peerDependencies": {
+    "@opensig/opendesign": "1.2.4",
+    "@vueuse/core": "^14.0.0",
     "aos": "^2.3.4",
     "dayjs": "^1.11.13",
     "video.js": "^8.23.7",
     "vue-dompurify-html": "^3.1.2",
+    "vue": "^3.5.13",
+    "element-plus": "2.13.1",
     "@opendesign-plus/composables": "0.0.1-rc.8",
     "@opendesign-plus/styles": "0.0.1-rc.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.0",
-    "element-plus": "^2.13.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "sass": "^1.71.1",
     "typescript": "~5.8.2",
     "unplugin-element-plus": "^0.11.2",
     "unplugin-icons": "^0.14.1",
     "vite": "^6.2.3",
     "vite-plugin-dts": "^4.5.3",
-    "vue": "^3.4.0",
     "vue-tsc": "2.2.8"
   },
   "scripts": {

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 自动生成
-
-${ 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);
-    });` : '' }
-  }
-};
-`;
+${ subDirExportStatements }
+`.trim();
 
     // 写入文件
     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/assets/styles/element-plus.scss

@@ -169,6 +169,8 @@
 
   .el-input__wrapper {
     background: var(--o-color-fill2);
+    box-shadow: none;
+    border: 1px solid var(--el-input-border-color);
   }
 
   .el-select__wrapper {

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 };

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/index.ts

@@ -7,10 +7,12 @@ const OHeader = Object.assign(_OHeader, {
     app.component('OHeader', _OHeader);
   },
 });
+
 const OHeaderMobile = Object.assign(_OHeaderMobile, {
   install(app: App) {
     app.component('OHeaderMobile', _OHeaderMobile);
   },
 });
 
+export * from './types';
 export { OHeader, OHeaderMobile };

package/src/components/header-language-switcher/index.ts

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

package/src/components/{OHeaderSearch.vue → header-search/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';

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

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

package/src/components/{OSourceCode.vue → header-source-code/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/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/{OThemeSwitcher.vue → header-theme/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/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 };