@opendesign-plus/components 0.0.1-rc.6 → 0.0.1-rc.8

package/src/draft/SliderCard.vue

@@ -1,110 +1,110 @@
-<script lang="ts" setup>
-import { OCarousel, OCarouselItem, OFigure, OLink } from '@opensig/opendesign';
-import { useScreen } from '@/composables/useScreen';
-
-const { lePadV } = useScreen();
-
-interface CardT {
-  title: string;
-  content: string;
-  cover: string;
-  href: string;
-}
-
-const props = defineProps({
-  cards: {
-    type: Array as () => CardT[],
-    default: () => [],
-  },
-});
-</script>
-
-<template>
-  <div class="wrapper">
-    <OCarousel v-if="!lePadV" class="slider-card" indicator-click :loop="true" effect="toggle">
-      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
-        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
-          <div class="card-content">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-description">{{ card.content }}</div>
-            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
-          </div>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-    <OCarousel v-else class="slider-card" indicator-click :loop="true" effect="toggle">
-      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
-        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
-          <div class="card-content">
-            <div class="card-title">{{ card.title }}</div>
-            <div class="card-description">{{ card.content }}</div>
-            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
-          </div>
-        </OFigure>
-      </OCarouselItem>
-    </OCarousel>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.slider-card {
-  --slide-width: calc(70vw - 36px);
-  --slide-gap: 16px;
-  --carousel-indicator-offset: -32px;
-  height: 360px;
-  width: 100%;
-  overflow: visible;
-  :deep(.the-slider-container) {
-    height: 100%;
-    overflow: hidden;
-  }
-  :deep(.o-carousel-indicator-bar) {
-    width: 100%;
-    &::after {
-      border-radius: 6px;
-    }
-    &::before {
-      border-radius: 6px;
-    }
-  }
-  @include respond-to('pc_s') {
-    height: 300px;
-  }
-  @include respond-to('<=laptop') {
-    height: 280px;
-  }
-  @include respond-to('<=pad_v') {
-    --slide-width: calc(100vw - 64px);
-    width: calc(var(--slide-gap) + var(--slide-width));
-    height: 184px;
-  }
-}
-
-.slider-card-item {
-  height: 100%;
-}
-
-.slider-card-cover {
-  width: 100%;
-  height: 100%;
-}
-
-.card-content {
-  padding: 0 96px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-}
-
-.card-title {
-  @include h1;
-  font-weight: 600;
-  color: var(--o-color-info1);
-}
-
-.card-description {
-  margin-top: var(--o3-gap-3);
-  margin-bottom: var(--o3-gap-7);
-}
-</style>
+<script lang="ts" setup>
+import { OCarousel, OCarouselItem, OFigure, OLink } from '@opensig/opendesign';
+import { useScreen } from '@/composables/useScreen';
+
+const { lePadV } = useScreen();
+
+interface CardT {
+  title: string;
+  content: string;
+  cover: string;
+  href: string;
+}
+
+const props = defineProps({
+  cards: {
+    type: Array as () => CardT[],
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div class="wrapper">
+    <OCarousel v-if="!lePadV" class="slider-card" indicator-click :loop="true" effect="toggle">
+      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
+        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
+          <div class="card-content">
+            <div class="card-title">{{ card.title }}</div>
+            <div class="card-description">{{ card.content }}</div>
+            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
+          </div>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+    <OCarousel v-else class="slider-card" indicator-click :loop="true" effect="toggle">
+      <OCarouselItem v-for="(card, index) in props.cards" :key="index" class="slider-card-item">
+        <OFigure :src="card.cover" :alt="card.title" class="slider-card-cover">
+          <div class="card-content">
+            <div class="card-title">{{ card.title }}</div>
+            <div class="card-description">{{ card.content }}</div>
+            <OLink v-if="card.href" :href="card.href" class="card-link"> 了解更多 </OLink>
+          </div>
+        </OFigure>
+      </OCarouselItem>
+    </OCarousel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-card {
+  --slide-width: calc(70vw - 36px);
+  --slide-gap: 16px;
+  --carousel-indicator-offset: -32px;
+  height: 360px;
+  width: 100%;
+  overflow: visible;
+  :deep(.the-slider-container) {
+    height: 100%;
+    overflow: hidden;
+  }
+  :deep(.o-carousel-indicator-bar) {
+    width: 100%;
+    &::after {
+      border-radius: 6px;
+    }
+    &::before {
+      border-radius: 6px;
+    }
+  }
+  @include respond-to('pc_s') {
+    height: 300px;
+  }
+  @include respond-to('<=laptop') {
+    height: 280px;
+  }
+  @include respond-to('<=pad_v') {
+    --slide-width: calc(100vw - 64px);
+    width: calc(var(--slide-gap) + var(--slide-width));
+    height: 184px;
+  }
+}
+
+.slider-card-item {
+  height: 100%;
+}
+
+.slider-card-cover {
+  width: 100%;
+  height: 100%;
+}
+
+.card-content {
+  padding: 0 96px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.card-title {
+  @include h1;
+  font-weight: 600;
+  color: var(--o-color-info1);
+}
+
+.card-description {
+  margin-top: var(--o3-gap-3);
+  margin-bottom: var(--o3-gap-7);
+}
+</style>

package/src/env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/src/i18n/en.ts

@@ -1,20 +1,20 @@
-export default {
-  search: 'Search',
-  'search.hot': 'Top search',
-  'search.placeholder': 'Please enter the content',
-  'search.expandedPlaceholder': 'Please enter the content',
-  'search.history': 'History',
-  'cookie.title': '{0} Community Respects Your Privacy',
-  'cookie.desc': 'This site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our ',
-  'cookie.about': 'About Cookies',
-  'cookie.acceptAll': 'Accept All',
-  'cookie.rejectAll': 'Reject All',
-  'cookie.manage': 'Manage Cookies',
-  'cookie.necessaryCookie': 'Strictly Necessary Cookies',
-  'cookie.alwaysOn': 'Always active',
-  'cookie.necessaryCookieDetail': 'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
-  'cookie.analyticalCookie': 'Analytics Cookies',
-  'cookie.analyticalCookieDetail': 'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
-  'cookie.saveSetting': 'Save Settings',
-  'cookie.setting': 'Cookie settings',
-};
+export default {
+  search: 'Search',
+  'search.hot': 'Top search',
+  'search.placeholder': 'Please enter the content',
+  'search.expandedPlaceholder': 'Please enter the content',
+  'search.history': 'History',
+  'cookie.title': '{0} Community Respects Your Privacy',
+  'cookie.desc': 'This site uses cookies from us and our partners to improve your browsing experience and make the site work properly. By clicking "Accept All", you consent to the use of cookies. By clicking "Reject All", you disable the use of unnecessary cookies. You can manage your cookie settings by clicking "Manage Cookies". For more information or to change your cookie settings, please refer to our ',
+  'cookie.about': 'About Cookies',
+  'cookie.acceptAll': 'Accept All',
+  'cookie.rejectAll': 'Reject All',
+  'cookie.manage': 'Manage Cookies',
+  'cookie.necessaryCookie': 'Strictly Necessary Cookies',
+  'cookie.alwaysOn': 'Always active',
+  'cookie.necessaryCookieDetail': 'These cookies are necessary for the site to work properly and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as logging in or filling in forms. You can set the browser to block these cookies, but that can make parts of the site not work. These cookies do not store any personally identifiable information.',
+  'cookie.analyticalCookie': 'Analytics Cookies',
+  'cookie.analyticalCookieDetail': 'We will use these cookies only with your consent. These cookies help us make improvements by collecting statistics such as the number of visits and traffic sources.',
+  'cookie.saveSetting': 'Save Settings',
+  'cookie.setting': 'Cookie settings',
+};

package/src/i18n/index.ts

@@ -1,42 +1,42 @@
-import { computed, inject, getCurrentInstance, ref } from 'vue';
-
-import zh from './zh';
-import en from './en';
-import { configProviderInjectKey } from '@/shared/provide';
-import { isString, isUndefined } from '@opensig/opendesign';
-
-const i18nLangs = ref({
-  zh,
-  en,
-});
-
-export function useI18n() {
-  const instance = getCurrentInstance();
-  const configProvider = instance ? inject(configProviderInjectKey) : null;
-  const locale = computed(() => {
-    return configProvider?.locale || 'zh';
-  });
-
-  const transform = (key: string, ...args: any[]): string => {
-    const lang = i18nLangs.value[locale.value];
-    const value = lang[key as keyof typeof lang];
-
-    // 处理变量替换
-    if (args.length > 0 && isString(value)) {
-      return value.replace(/{(\d+)}/g, (match, index) => {
-        return args[index] ?? match;
-      });
-    }
-
-    if (isUndefined(value)) {
-      console.warn(`Cannot translate the value of keypath '${key}'`);
-    }
-
-    return value;
-  };
-
-  return {
-    locale,
-    t: transform,
-  };
-}
+import { computed, inject, getCurrentInstance, ref } from 'vue';
+
+import zh from './zh';
+import en from './en';
+import { configProviderInjectKey } from '@/shared/provide';
+import { isString, isUndefined } from '@opensig/opendesign';
+
+const i18nLangs = ref({
+  zh,
+  en,
+});
+
+export function useI18n() {
+  const instance = getCurrentInstance();
+  const configProvider = instance ? inject(configProviderInjectKey) : null;
+  const locale = computed(() => {
+    return configProvider?.locale || 'zh';
+  });
+
+  const transform = (key: string, ...args: any[]): string => {
+    const lang = i18nLangs.value[locale.value];
+    const value = lang[key as keyof typeof lang];
+
+    // 处理变量替换
+    if (args.length > 0 && isString(value)) {
+      return value.replace(/{(\d+)}/g, (match, index) => {
+        return args[index] ?? match;
+      });
+    }
+
+    if (isUndefined(value)) {
+      console.warn(`Cannot translate the value of keypath '${key}'`);
+    }
+
+    return value;
+  };
+
+  return {
+    locale,
+    t: transform,
+  };
+}

package/src/i18n/zh.ts

@@ -1,9 +1,14 @@
-export default {
-  search: '搜索',
-  'search.hot': '热门搜索',
-  'search.placeholder': '搜索',
-  'search.expandedPlaceholder': '请输入搜索内容',
-  'search.history': '历史搜索',
-  'cookie.desc': '我们使用cookie来确保您的高速浏览体验。继续浏览本站，即表示您同意我们使用cookie。',
-  'cookie.about': '查看详情',
-};
+export default {
+  search: '搜索',
+  'search.hot': '热门搜索',
+  'search.placeholder': '搜索',
+  'search.expandedPlaceholder': '请输入搜索内容',
+  'search.history': '历史搜索',
+  'cookie.desc': '我们使用cookie来确保您的高速浏览体验。继续浏览本站，即表示您同意我们使用cookie。',
+  'cookie.about': '查看详情',
+  'events.status': '活动状态',
+  'events.statusAll': '全部',
+  'events.statusIng': '进行中',
+  'events.statusFinish': '已结束',
+  'events.searchPlaceholder': '搜索活动名称、地点',
+};

package/src/index.ts

@@ -3,23 +3,37 @@
 
 import OBanner from './components/OBanner.vue';
 import OCookieNotice from './components/OCookieNotice.vue';
+import OFooter from './components/OFooter.vue';
+import OHeader from './components/OHeader.vue';
+import OHeaderMoblie from './components/OHeaderMoblie.vue';
 import OHeaderSearch from './components/OHeaderSearch.vue';
+import OHeaderUser from './components/OHeaderUser.vue';
 import OPlusConfigProvider from './components/OPlusConfigProvider.vue';
 import OSection from './components/OSection.vue';
+import OSourceCode from './components/OSourceCode.vue';
 import OThemeSwitcher from './components/OThemeSwitcher.vue';
 
 // 导出组件
 const components = {
   OBanner,
   OCookieNotice,
+  OFooter,
+  OHeader,
+  OHeaderMoblie,
   OHeaderSearch,
+  OHeaderUser,
   OPlusConfigProvider,
   OSection,
+  OSourceCode,
   OThemeSwitcher
 };
 
 // 导出单个组件
-export { OBanner, OCookieNotice, OHeaderSearch, OPlusConfigProvider, OSection, OThemeSwitcher };
+export { OBanner, OCookieNotice, OFooter, OHeader, OHeaderMoblie, OHeaderSearch, OHeaderUser, OPlusConfigProvider, OSection, OSourceCode, OThemeSwitcher };
+
+// 重新导出子目录中的组件
+export * from './components/element-plus';
+export * from './components/events';
 
 // 默认导出（用于Vue插件安装）
 export default {

package/src/shared/provide.ts

@@ -1,6 +1,6 @@
-import { InjectionKey } from 'vue';
-
-export const configProviderInjectKey: InjectionKey<{
-  locale: 'zh' | 'en';
-  theme: 'light' | 'dark';
-}> = Symbol('provide-config-provider');
+import { InjectionKey } from 'vue';
+
+export const configProviderInjectKey: InjectionKey<{
+  locale: 'zh' | 'en';
+  theme: 'light' | 'dark';
+}> = Symbol('provide-config-provider');

package/src/shims-vue-dompurify-html.d.ts

@@ -0,0 +1,17 @@
+declare module 'vue-dompurify-html' {
+  import { Plugin, Directive } from 'vue';
+
+  export interface DirectiveConfig {
+    default?: any;
+    namedConfigurations?: Record<string, any>;
+    hooks?: Record<string, any>;
+  }
+
+  export function buildVueDompurifyHTMLDirective(
+    config?: DirectiveConfig,
+    instanceBuilder?: () => any
+  ): Directive;
+
+  const VueDOMPurifyHTML: Plugin;
+  export default VueDOMPurifyHTML;
+}

package/src/vue.d.ts

@@ -1,10 +1,10 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare module '*.scss' {
-  const content: { [className: string]: string }
-  export default content
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.scss' {
+  const content: { [className: string]: string }
+  export default content
 }

package/tsconfig.json

@@ -1,33 +1,33 @@
-{
-  "compilerOptions": {
-    "target": "es2020",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    /* Declaration */
-    "declaration": true,
-    "declarationDir": "dist",
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Declaration */
+    "declaration": true,
+    "declarationDir": "dist",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}