@opendesign-plus-test/components 0.0.1-rc.55 → 0.0.1-rc.57

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/header/OHeader.vue

@@ -35,7 +35,7 @@ const handleMouseenter = (val: any) => {
     itemVisible.value = true;
   }
 };
-const handleMouseleave = (val: any) => {
+const handleMouseleave = () => {
   itemVisible.value = false;
 };
 const handleClick = (val: any) => {

package/src/components/meeting/OMeetingCalendar.vue

@@ -82,8 +82,8 @@ const getSummitData = async (date: string) => {
       return {
         ...v,
         type: CalendarDataType.SUMMIT,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start || '' }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end || '' }`,
       };
     });
   } else {
@@ -97,8 +97,8 @@ const getActivityData = async (date: string) => {
       return {
         ...v,
         type: CalendarDataType.EVENTS,
-        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
-        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start || '' }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end || '' }`,
       };
     });
   } else {

package/src/components/meeting/OMeetingForm.vue

@@ -689,7 +689,11 @@ defineExpose({
               <OIcon>
                 <IconTip />
               </OIcon>
-              <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+              <div>
+                <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+                <br>
+                <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+              </div>
             </div>
           </div>
         </template>
@@ -701,7 +705,11 @@ defineExpose({
             <OIcon>
               <IconTip />
             </OIcon>
-            <span>{{ t('meeting.meetingRecordDesc', [getPlatformLabel(form.platform)]) }}</span>
+            <div>
+              <span>{{ t('meeting.meetingRecordDesc1') }}</span>
+              <br>
+              <span>{{ t('meeting.meetingRecordDesc2') }}</span>
+            </div>
           </div>
         </div>
       </template>

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -90,7 +90,7 @@ const computedList = computed<any[]>(() => {
           dateRange = `${ formatDate(v.start_date) } ${ v.start }-${ formatDate(v.end_date) } ${ v.end }`;
         }
       } else {
-        dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD HH:mm') } ${ formatDate(v.end_date, 'YYYY/MM/DD HH:mm') }`;
+        dateRange = `${ formatDate(v.start_date, 'YYYY/MM/DD') } ${ formatDate(v.end_date, 'YYYY/MM/DD') }`;
       }
 
       return {
@@ -169,7 +169,7 @@ const computedList = computed<any[]>(() => {
       <OCollapseItem v-for="(item, index) in computedList" :key="item.id" :value="item.id">
         <template #title>
           <div class="meet-title-left">
-            <div class="meet-title" :title="item.topic || item.name">
+            <div class="meet-title" :title="item.topic || item.name || item.title">
               <OIcon
                 :style="{
                   backgroundColor: `${getConfig(item.type, 'color')}`

package/src/components/meeting/components/OMeetingDetail.vue

@@ -5,6 +5,7 @@ import { CalendarDataType, MeetingItemT } from '../types.ts';
 import MoreText from '@/components/common/MoreText.vue';
 import { formatDate } from '@/components/meeting/utils.ts';
 import { useMeetingConfig } from '../composables/useMeetingConfig';
+import { useI18n } from '@/i18n';
 
 const props = defineProps<{
   data: MeetingItemT;
@@ -13,7 +14,8 @@ const props = defineProps<{
   page?: CalendarDataType
 }>();
 const { t, getPlatformLabel } = useMeetingConfig();
-
+const { locale } = useI18n();
+const isZh = computed(() => locale.value === 'zh');
 // 会议详情配置
 const infoList = computed(() =>
   [
@@ -83,11 +85,15 @@ const columns = computed<ColumnItemT[]>(() => {
 });
 
 const domRef = ref([]);
+const SPLIT_MARK = '|';
 // 复制会议内容
 const copyInfo = () => {
   try {
-    let text = `${ t('meeting.meetingTopic') + props.data.topic }\n`;
-    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => `${ pre }${ cur.textContent }\n`, '');
+    const colon = isZh.value ? '：' : ': ';
+    let text = `${ t('meeting.meetingTopic') }${ colon }${ props.data.topic || props.data.name || props.data.title }\n`;
+    text += [...domRef.value].reduce((pre, cur: HTMLDivElement) => {
+      return `${ pre }${ cur.textContent ? cur.textContent.replace(SPLIT_MARK, colon) : '' }\n`;
+    }, '');
     navigator.clipboard.writeText(text);
     return Promise.resolve();
   } catch (e) {
@@ -114,6 +120,7 @@ defineExpose({ copyInfo });
     >
       <template v-if="getField(info.key) && !info.isRecord">
         <span class="label">{{ info.label }}</span>
+        <span class="split-mark">{{ SPLIT_MARK }}</span>
         <MoreText :show="show" v-if="info.ellipsis" :text="getField(info.key) || '-'" />
         <OLink
           v-else-if="info.isLink"
@@ -190,6 +197,13 @@ defineExpose({ copyInfo });
       }
     }
 
+    .split-mark {
+      width: 0;
+      height: 0;
+      opacity: 0;
+      overflow: hidden;
+    }
+
     &.type_events {
       .label {
         width: 6em;

package/src/components/search/OSearchInput.vue

@@ -0,0 +1,526 @@
+<script setup lang="ts">
+import { computed, ref, toRef, watch } from 'vue';
+import { onClickOutside, useDebounceFn } from '@vueuse/core';
+
+import SearchImageInput from './internal/SearchImageInput.vue';
+import SearchPanel from './internal/SearchPanel.vue';
+import { useSearchHistory } from './composables/useSearchHistory';
+import { useI18n } from '@/i18n';
+import type {
+  OSearchPayload,
+  OSearchRecommendItem,
+  OSearchUploadImageFn,
+} from './types';
+
+export interface OSearchInputPropsT {
+  modelValue?: string;
+  imageUrl?: string;
+  size?: 'small' | 'medium' | 'large';
+  placeholder?: string;
+  imagePlaceholder?: string;
+
+  /** ---- Image search ---- */
+  enableImageSearch?: boolean;
+  uploadImage?: OSearchUploadImageFn;
+  maxImageSize?: number;
+  imageUploadTooltip?: string;
+  allowedImageTypes?: string[];
+
+  /** ---- Recommendation lists (controlled by parent) ---- */
+  suggestItems?: OSearchRecommendItem[];
+  onestepItems?: OSearchRecommendItem[];
+  suggestTitle?: string;
+  onestepTitle?: string;
+  noDataText?: string;
+  /** When true, show "no data" placeholder for empty suggest while typing */
+  showSuggestEmpty?: boolean;
+  highlightKeyword?: boolean;
+  debounce?: number;
+
+  /** ---- History ---- */
+  enableHistory?: boolean;
+  historyItems?: string[];
+  maxHistoryCount?: number;
+  storeHistory?: boolean;
+  storageKey?: string;
+  historyTitle?: string;
+  /** Auto-record history on search; default true */
+  autoSaveHistory?: boolean;
+
+  /** ---- Hot searches (shown alongside history when no keyword) ---- */
+  hotItems?: string[];
+  hotTitle?: string;
+
+  /** ---- "Did you mean" list (below input) ---- */
+  suggestList?: string[];
+  suggestListLabel?: string;
+
+  /** ---- Misc ---- */
+  clearable?: boolean;
+  closeOnSearch?: boolean;
+  closeOnClickOutside?: boolean;
+  /** Show dropdown on focus even when empty (history) */
+  openOnFocus?: boolean;
+  /** Always show image as inline thumbnail inside the input; never expand preview below */
+  alwaysInlineThumbnail?: boolean;
+}
+
+const props = withDefaults(defineProps<OSearchInputPropsT>(), {
+  modelValue: '',
+  imageUrl: '',
+  size: 'large',
+  enableImageSearch: false,
+  maxImageSize: 10 * 1024 * 1024,
+  suggestItems: () => [],
+  onestepItems: () => [],
+  showSuggestEmpty: true,
+  highlightKeyword: true,
+  debounce: 300,
+  enableHistory: true,
+  historyItems: () => [],
+  maxHistoryCount: 6,
+  storeHistory: false,
+  storageKey: 'search-history',
+  autoSaveHistory: true,
+  hotItems: () => [],
+  suggestList: () => [],
+  clearable: true,
+  closeOnSearch: true,
+  closeOnClickOutside: true,
+  openOnFocus: true,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void;
+  (e: 'update:imageUrl', url: string): void;
+  (e: 'update:historyItems', items: string[]): void;
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+  (e: 'input', val: string): void;
+  (e: 'clear'): void;
+  (e: 'search', payload: OSearchPayload): void;
+  (e: 'recommend-click', item: OSearchRecommendItem): void;
+  (e: 'onestep-click', item: OSearchRecommendItem): void;
+  (e: 'history-click', val: string): void;
+  (e: 'hot-click', val: string): void;
+  (e: 'suggest-list-click', val: string): void;
+  (e: 'delete-history', items: string[]): void;
+  (e: 'delete-history-item', val: string): void;
+  (e: 'image-upload-start', file: File): void;
+  (e: 'image-upload-success', url: string, file: File): void;
+  (e: 'image-upload-error', error: unknown, file: File): void;
+  (e: 'image-validate-error', reason: 'size' | 'type', file: File): void;
+}>();
+
+const { t } = useI18n();
+
+type SuggestSegment = { text: string; em: boolean };
+function parseSuggest(raw: string): SuggestSegment[] {
+  const segments: SuggestSegment[] = [];
+  const re = /<em>(.*?)<\/em>/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(raw)) !== null) {
+    if (m.index > last) segments.push({ text: raw.slice(last, m.index), em: false });
+    segments.push({ text: m[1], em: true });
+    last = m.index + m[0].length;
+  }
+  if (last < raw.length) segments.push({ text: raw.slice(last), em: false });
+  return segments;
+}
+
+const inputRef = ref<InstanceType<typeof SearchImageInput>>();
+const wrapperRef = ref<HTMLElement | null>(null);
+
+const innerValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+});
+
+const isFocus = ref(false);
+const isPreviewOpen = ref(false);
+const justClosedPreview = ref(false);
+const hasInternalImage = ref(false);
+
+const showDropdown = computed(() => {
+  if (!isFocus.value) return false;
+  if (props.imageUrl || hasInternalImage.value) return false;
+  const hasSuggest =
+    !!innerValue.value &&
+    (props.suggestItems.length > 0 || props.onestepItems.length > 0 || props.showSuggestEmpty);
+  const hasHistory = props.enableHistory && history.items.value.length > 0 && !innerValue.value;
+  const hasHot = props.hotItems.length > 0 && !innerValue.value;
+  if (hasSuggest) return true;
+  if (props.openOnFocus && (hasHistory || hasHot)) return true;
+  return false;
+});
+
+// history
+const historyItemsRef = toRef(props, 'historyItems');
+const storageKeyRef = toRef(props, 'storageKey');
+const storeHistoryRef = toRef(props, 'storeHistory');
+const maxHistoryRef = toRef(props, 'maxHistoryCount');
+
+const history = useSearchHistory({
+  initial: historyItemsRef,
+  storageKey: storageKeyRef,
+  storeHistory: storeHistoryRef,
+  maxHistoryCount: maxHistoryRef,
+  onChange: (items) => emit('update:historyItems', items),
+});
+
+// debounced input event
+// suppressNextInput: set to true before programmatic value assignments (history/suggest
+// clicks) so the watcher-triggered debounce doesn't fire the input event.
+let suppressNextInput = false;
+const emitInputDebounced = useDebounceFn((val: string) => {
+  if (suppressNextInput) {
+    suppressNextInput = false;
+    return;
+  }
+  emit('input', val);
+}, () => props.debounce);
+
+watch(innerValue, (val) => {
+  emitInputDebounced(val);
+});
+
+// click outside
+onClickOutside(wrapperRef, () => {
+  if (!props.closeOnClickOutside) return;
+  if (isPreviewOpen.value || justClosedPreview.value) return;
+  isFocus.value = false;
+});
+
+const handleFocus = () => {
+  isFocus.value = true;
+  emit('focus');
+};
+
+const handleBlur = () => {
+  emit('blur');
+};
+
+const runSearch = async (overrideKeyword?: string) => {
+  if (inputRef.value?.getIsUploading?.()) {
+    await inputRef.value.awaitUpload?.();
+  }
+  const keyword = overrideKeyword !== undefined ? overrideKeyword.trim() : innerValue.value.trim();
+  const imageUrl = inputRef.value?.getUploadedUrl?.() || props.imageUrl;
+
+  if (!keyword && !imageUrl) return;
+
+  if (props.autoSaveHistory && keyword) {
+    history.push(keyword);
+  }
+
+  if (props.closeOnSearch) {
+    isFocus.value = false;
+  }
+
+  emit('search', { keyword, imageUrl: imageUrl || undefined });
+};
+
+const handleClear = () => {
+  innerValue.value = '';
+  emit('clear');
+};
+
+const handleSuggestClick = (item: OSearchRecommendItem) => {
+  emit('recommend-click', item);
+  suppressNextInput = true;
+  innerValue.value = item.key;
+  runSearch();
+};
+
+const handleOnestepClick = (item: OSearchRecommendItem) => {
+  emit('onestep-click', item);
+  if (item.path) {
+    const url = item.path;
+    if (typeof window !== 'undefined') window.open(url, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const handleHistoryClick = (val: string) => {
+  emit('history-click', val);
+  runSearch(val);
+};
+
+const handleHotClick = (val: string) => {
+  emit('hot-click', val);
+  runSearch(val);
+};
+
+const handleHistoryRemove = (val: string) => {
+  history.remove(val);
+  emit('delete-history-item', val);
+};
+
+const handleHistoryClear = () => {
+  const removed = [...history.items.value];
+  history.clearAll();
+  emit('delete-history', removed);
+};
+
+const handleSuggestListClick = (val: string) => {
+  const text = val.replace(/<[^>]+>/g, '');
+  emit('suggest-list-click', text);
+  suppressNextInput = true;
+  innerValue.value = text;
+  runSearch();
+};
+
+const onPreviewChange = (visible: boolean) => {
+  isPreviewOpen.value = visible;
+  if (!visible) {
+    justClosedPreview.value = true;
+    setTimeout(() => {
+      justClosedPreview.value = false;
+    }, 100);
+  }
+};
+
+const showInlineThumbnail = computed(() =>
+  !!props.imageUrl && (props.alwaysInlineThumbnail || !isFocus.value)
+);
+
+const onImageUploadStart = (file: File) => {
+  hasInternalImage.value = true;
+  emit('image-upload-start', file);
+};
+
+const onImageUploadSuccess = (url: string, file: File) => {
+  hasInternalImage.value = false;
+  emit('image-upload-success', url, file);
+};
+
+const onImageClear = () => {
+  hasInternalImage.value = false;
+  emit('update:imageUrl', '');
+};
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  search: runSearch,
+  saveHistory: (val?: string) => history.push(val ?? innerValue.value),
+});
+</script>
+
+<template>
+  <div ref="wrapperRef" class="o-search-input" :class="{ 'is-focus': isFocus }">
+    <div class="o-search-input-box">
+      <SearchImageInput
+        ref="inputRef"
+        v-model="innerValue"
+        :image-url="imageUrl"
+        :placeholder="placeholder"
+        :image-placeholder="imagePlaceholder"
+        :size="size"
+        :enable-image-search="enableImageSearch"
+        :upload-image="uploadImage"
+        :max-image-size="maxImageSize"
+        :image-upload-tooltip="imageUploadTooltip"
+        :allowed-image-types="allowedImageTypes"
+        :expanded="isFocus && !props.alwaysInlineThumbnail"
+        :inline-thumbnail="showInlineThumbnail"
+        :clearable="clearable"
+        class="o-search-input-field"
+        @update:imageUrl="(url: string) => emit('update:imageUrl', url)"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @enter="runSearch"
+        @clear="handleClear"
+        @image-clear="onImageClear"
+        @image-upload-start="onImageUploadStart"
+        @image-upload-success="onImageUploadSuccess"
+        @image-upload-error="(error: unknown, file: File) => emit('image-upload-error', error, file)"
+        @image-validate-error="(reason: 'size' | 'type', file: File) => emit('image-validate-error', reason, file)"
+        @preview-change="onPreviewChange"
+      >
+        <template #prefix><slot name="input-prefix" /></template>
+        <template #suffix="slotProps"><slot name="input-suffix" v-bind="slotProps" /></template>
+        <template v-if="$slots['image-preview']" #preview="slotProps">
+          <slot name="image-preview" v-bind="slotProps" />
+        </template>
+      </SearchImageInput>
+
+      <Transition name="o-search-input-dropdown">
+        <div v-if="showDropdown" class="o-search-input-dropdown">
+          <slot name="dropdown" :keyword="modelValue">
+            <SearchPanel
+              :keyword="modelValue"
+              :onestep-items="onestepItems"
+              :onestep-title="onestepTitle"
+              :suggest-items="suggestItems"
+              :suggest-title="suggestTitle"
+              :history-items="enableHistory ? history.items.value : []"
+              :history-title="historyTitle"
+              :hot-items="hotItems"
+              :hot-title="hotTitle"
+              :no-data-text="noDataText"
+              :highlight-keyword="highlightKeyword"
+              :hide-on-keyword="true"
+              :show-suggest-empty="showSuggestEmpty"
+              history-layout="list"
+              @onestep-click="handleOnestepClick"
+              @suggest-click="handleSuggestClick"
+              @history-click="handleHistoryClick"
+              @history-remove="handleHistoryRemove"
+              @history-clear="handleHistoryClear"
+              @hot-click="handleHotClick"
+            >
+              <template v-if="$slots['onestep-header']" #onestep-header="slotProps">
+                <slot name="onestep-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['onestep-content']" #onestep-content="slotProps">
+                <slot name="onestep-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['suggest-header']" #suggest-header="slotProps">
+                <slot name="suggest-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['suggest-content']" #suggest-content="slotProps">
+                <slot name="suggest-content" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['history-header']" #history-header="slotProps">
+                <slot name="history-header" v-bind="slotProps" />
+              </template>
+              <template v-if="$slots['history-content']" #history-content="slotProps">
+                <slot name="history-content" v-bind="slotProps" />
+              </template>
+            </SearchPanel>
+          </slot>
+        </div>
+      </Transition>
+    </div>
+
+    <div v-if="suggestList?.length" class="o-search-input-suggest-list-row">
+      <slot name="suggest-list" :items="suggestList">
+        <span class="o-search-input-suggest-list-label">{{ suggestListLabel ?? t('search.suggestListLabel') }}</span>
+        <ul class="o-search-input-suggest-list">
+          <li
+            v-for="(item, idx) in suggestList"
+            :key="item + idx"
+            class="o-search-input-suggest-list-item"
+            @click="handleSuggestListClick(item)"
+          >
+            <template v-for="seg in parseSuggest(item)" :key="seg.text + String(seg.em)">
+              <em v-if="seg.em">{{ seg.text }}</em>
+              <template v-else>{{ seg.text }}</template>
+            </template>
+          </li>
+        </ul>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-search-input {
+  position: relative;
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+
+  :deep(.o-input.o_box-large) {
+    --_box-height: 48px;
+  }
+  :deep(.o-search-image-input-icon) {
+    font-size: 24px;
+  }
+  :deep(.o-search-image-input-upload-btn) {
+    width: 24px;
+    height: 24px;
+  }
+
+  @include respond-to('pad_v-pc_s') {
+    :deep(.o-input.o_box-large) {
+      --_box-height: 40px;
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    :deep(.o-input.o_box-large) {
+      --_box-height: 32px;
+    }
+    :deep(.o-search-image-input-icon) {
+      font-size: 16px;
+    }
+    :deep(.o-search-image-input-upload-btn) {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.o-search-input-box {
+  position: relative;
+  width: 100%;
+}
+
+.o-search-input-field {
+  width: 100%;
+}
+
+.o-search-input-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: var(--o-gap-4);
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+}
+
+.o-search-input-dropdown-enter-active,
+.o-search-input-dropdown-leave-active {
+  transition: opacity var(--o-duration-m1), transform var(--o-duration-m1);
+}
+
+.o-search-input-dropdown-enter-from,
+.o-search-input-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.o-search-input-suggest-list-row {
+  display: flex;
+  margin-top: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  @include tip1;
+  color: var(--o-color-info1);
+}
+
+.o-search-input-suggest-list-label {
+  color: var(--o-color-info3);
+  margin-right: 4px;
+  @include tip1;
+}
+
+.o-search-input-suggest-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.o-search-input-suggest-list-item {
+  margin-right: 8px;
+  cursor: pointer;
+  color: var(--o-color-primary1);
+
+  :deep(em) {
+    color: var(--o-color-primary1);
+    font-style: normal;
+  }
+
+  @include hover {
+    text-decoration: underline;
+  }
+}
+</style>