@opendesign-plus-test/components 0.0.1-rc.50 → 0.0.1-rc.51

package/src/components/search/internal/SearchPanel.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { OIcon } from '@opensig/opendesign';
+import IconDelete from '~icons/components/icon-delete-hover.svg';
+import IconDeleteAll from '~icons/components/icon-delete.svg';
+import IconRefresh from '~icons/components/icon-refresh.svg';
+import HighlightText from './HighlightText.vue';
+import { useI18n } from '@/i18n';
+import type { OSearchRecommendItem } from '../types';
+
+export interface SearchPanelPropsT {
+  keyword?: string;
+  onestepItems?: OSearchRecommendItem[];
+  onestepTitle?: string;
+  suggestItems?: OSearchRecommendItem[];
+  suggestTitle?: string;
+  recommendItems?: string[];
+  historyItems?: string[];
+  historyTitle?: string;
+  hotItems?: string[];
+  hotTitle?: string;
+  noDataText?: string;
+  highlightKeyword?: boolean;
+  /** When true, show history+hot sections only if keyword is empty */
+  hideOnKeyword?: boolean;
+  /** When true, show suggest empty state ("no data") even when list is empty */
+  showSuggestEmpty?: boolean;
+  isDark?: boolean;
+  /** 'chips' = tag-cloud (header dropdown), 'list' = full-width rows (page search) */
+  historyLayout?: 'chips' | 'list';
+}
+
+const props = withDefaults(defineProps<SearchPanelPropsT>(), {
+  keyword: '',
+  onestepItems: () => [],
+  suggestItems: () => [],
+  recommendItems: () => [],
+  historyItems: () => [],
+  hotItems: () => [],
+  highlightKeyword: true,
+  hideOnKeyword: false,
+  showSuggestEmpty: false,
+  isDark: false,
+  historyLayout: 'chips',
+});
+
+const emit = defineEmits<{
+  (e: 'onestep-click', item: OSearchRecommendItem): void;
+  (e: 'suggest-click', item: OSearchRecommendItem): void;
+  (e: 'recommend-click', val: string): void;
+  (e: 'history-click', val: string): void;
+  (e: 'hot-click', val: string): void;
+  (e: 'history-remove', val: string): void;
+  (e: 'history-clear'): void;
+  (e: 'hot-refresh'): void;
+}>();
+
+const { t } = useI18n();
+
+const hasKeyword = computed(() => !!props.keyword?.trim());
+
+const showOnestep = computed(() => hasKeyword.value && props.onestepItems.length > 0);
+const showSuggest = computed(() => hasKeyword.value && (props.suggestItems.length > 0 || props.showSuggestEmpty));
+const showRecommend = computed(
+  () => !hasKeyword.value && props.recommendItems.length > 0
+);
+const showHistory = computed(
+  () => (!props.hideOnKeyword || !hasKeyword.value) && props.historyItems.length > 0
+);
+const showHot = computed(
+  () => (!props.hideOnKeyword || !hasKeyword.value) && props.hotItems.length > 0
+);
+
+const showSuggestDivider = computed(() => showOnestep.value && showSuggest.value);
+const showHistoryHotDivider = computed(() => showHistory.value && showHot.value);
+</script>
+
+<template>
+  <div class="o-search-panel">
+    <!-- ONESTEP / 搜索直达 -->
+    <div v-if="showOnestep" class="o-search-panel-section o-search-panel-onestep">
+      <slot name="onestep-header" :items="onestepItems">
+        <div class="o-search-panel-section-title onestep">{{ onestepTitle ?? t('search.onestep') }}</div>
+      </slot>
+      <slot name="onestep-content" :items="onestepItems" :keyword="keyword">
+        <div
+          v-for="item in onestepItems"
+          :key="item.key + (item.path ?? '')"
+          class="o-search-panel-item o-search-panel-onestep-item"
+          @click="emit('onestep-click', item)"
+        >
+          <HighlightText :text="item.key" :keyword="keyword" :enabled="highlightKeyword" />
+          <span v-if="item.type" class="o-search-panel-onestep-tag">{{ item.type }}</span>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="showSuggestDivider" class="o-search-panel-divider"></div>
+
+    <!-- SUGGEST / 搜索建议 (rich items) -->
+    <div v-if="showSuggest" class="o-search-panel-section o-search-panel-suggest">
+      <slot name="suggest-header" :items="suggestItems">
+        <div class="o-search-panel-section-title suggest">{{ suggestTitle ?? t('search.suggest') }}</div>
+      </slot>
+      <slot name="suggest-content" :items="suggestItems" :keyword="keyword">
+        <template v-if="suggestItems.length">
+          <div
+            v-for="item in suggestItems"
+            :key="item.key"
+            class="o-search-panel-item"
+            @click="emit('suggest-click', item)"
+          >
+            <HighlightText :text="item.key" :keyword="keyword" :enabled="highlightKeyword" />
+          </div>
+        </template>
+        <div v-else class="o-search-panel-no-data">{{ noDataText ?? t('search.noData') }}</div>
+      </slot>
+    </div>
+
+    <!-- RECOMMEND (legacy plain string list, shown when no keyword) -->
+    <div v-if="showRecommend" class="o-search-panel-section o-search-panel-recommend">
+      <slot name="recommend-header" :items="recommendItems" />
+      <slot name="recommend-content" :items="recommendItems">
+        <div
+          v-for="item in recommendItems"
+          :key="item"
+          class="o-search-panel-recommend-item"
+          @click="emit('recommend-click', item)"
+        >
+          {{ item }}
+        </div>
+      </slot>
+    </div>
+
+    <!-- HISTORY / 历史记录 -->
+    <div v-if="showHistory" class="o-search-panel-section o-search-panel-history">
+      <slot name="history-header" :items="historyItems">
+        <div class="o-search-panel-common-header">
+          <span class="o-search-panel-section-title">{{ historyTitle ?? t('search.history') }}</span>
+          <OIcon v-if="historyLayout !== 'list'" class="o-search-panel-icon" @click.stop="emit('history-clear')">
+            <IconDeleteAll />
+          </OIcon>
+        </div>
+      </slot>
+      <slot name="history-content" :items="historyItems">
+        <!-- list layout: full-width rows, no delete icon -->
+        <template v-if="historyLayout === 'list'">
+          <div
+            v-for="item in historyItems"
+            :key="item"
+            class="o-search-panel-history-row"
+            @click="emit('history-click', item)"
+          >
+            <span class="o-search-panel-history-row-text">{{ item }}</span>
+          </div>
+        </template>
+        <!-- chips layout (default): tag-cloud -->
+        <template v-else>
+          <div class="o-search-panel-history-list">
+            <div
+              v-for="item in historyItems"
+              :key="item"
+              class="o-search-panel-history-item"
+              :class="{ 'is-dark': isDark }"
+              @click="emit('history-click', item)"
+            >
+              <span class="o-search-panel-history-text">{{ item }}</span>
+              <OIcon class="o-search-panel-history-remove" @click.stop="emit('history-remove', item)">
+                <IconDelete />
+              </OIcon>
+            </div>
+          </div>
+        </template>
+      </slot>
+    </div>
+
+    <div v-if="showHistoryHotDivider" class="o-search-panel-divider"></div>
+
+    <!-- HOT / 热门搜索 -->
+    <div v-if="showHot" class="o-search-panel-section o-search-panel-hot">
+      <slot name="hot-header" :items="hotItems">
+        <div class="o-search-panel-common-header">
+          <div class="o-search-panel-section-title">{{ hotTitle ?? t('search.hot') }}</div>
+          <OIcon class="o-search-panel-icon" @click.stop="emit('hot-refresh')">
+            <IconRefresh />
+          </OIcon>
+        </div>
+      </slot>
+      <slot name="hot-content" :items="hotItems">
+        <div class="o-search-panel-hot-list">
+          <div
+            v-for="item in hotItems"
+            :key="item"
+            class="o-search-panel-hot-item"
+            @click="emit('hot-click', item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-search-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--o-gap-4);
+}
+
+.o-search-panel-section + .o-search-panel-section {
+  // sections rely on explicit dividers / gap from parent
+}
+
+.o-search-panel-section-title {
+
+  &.suggest,
+  &.onestep {
+    margin-bottom: var(--o-gap-3);
+  }
+
+  @include tip1;
+  color: var(--o-color-info3);
+  font-weight: 400;
+
+  @include respond-to('<=pad_v') {
+    color: var(--o-color-info1);
+    @include text2;
+  }
+}
+
+.o-search-panel-item {
+  @include tip1;
+  padding: 5px 8px;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  border-radius: var(--o-radius-xs);
+
+  &:hover {
+    background-color: var(--o-color-control2-light);
+  }
+
+  &:active {
+    background-color: var(--o-color-control3-light);
+  }
+
+  @include respond-to('<=pad_v') {
+    @include text1;
+  }
+}
+
+.o-search-panel-onestep-item {
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+}
+
+.o-search-panel-onestep-tag {
+  @include tip2;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: 4px;
+  font-weight: 400;
+  margin-left: 8px;
+  border: 1px solid var(--o-color-control4);
+  color: var(--o-color-info3);
+}
+
+.o-search-panel-no-data {
+  @include tip2;
+  color: var(--o-color-info3);
+  padding: 0 8px;
+
+  @include respond-to('<=pad_v') {
+    @include text1;
+  }
+}
+
+.o-search-panel-recommend-item {
+  @include tip1;
+  padding: 5px 8px;
+  cursor: pointer;
+  color: var(--o-color-info1);
+  border-radius: var(--o-radius-xs);
+
+  &:hover {
+    background-color: var(--o-color-control2-light);
+  }
+}
+
+.o-search-panel-divider {
+  background: var(--o-color-control4);
+  width: 100%;
+  height: 1px;
+
+  @include respond-to('<=pad_v') {
+    display: none;
+  }
+}
+
+.o-search-panel-common-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.o-search-panel-icon {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 16px;
+
+  &:hover {
+    color: var(--o-color-primary1);
+  }
+}
+
+.o-search-panel-history-list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: var(--o-gap-3);
+}
+
+// ---- chips layout ----
+.o-search-panel-history-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  max-width: 224px;
+  height: 24px;
+  padding: 3px var(--o-gap-3);
+  background-color: var(--o-color-control2-light);
+  border-radius: var(--o-radius-xs);
+  color: var(--o-color-info1);
+  cursor: pointer;
+
+  @include hover {
+    background-color: var(--o-color-control3-light);
+    color: var(--o-color-primary1);
+
+    .o-search-panel-history-remove {
+      display: inline-flex;
+    }
+  }
+
+  &.is-dark {
+    @include hover {
+      background-color: rgb(var(--o-mixedgray-7));
+    }
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 28px;
+  }
+}
+
+.o-search-panel-history-text {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include tip2;
+
+  @include respond-to('<=pad_v') {
+    @include text1;
+  }
+}
+
+.o-search-panel-history-remove {
+  position: absolute;
+  right: -8px;
+  top: -8px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+
+  :deep(svg) {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// ---- list layout ----
+.o-search-panel-history-row {
+  padding: 4px 8px;
+  border-radius: var(--o-radius-xs);
+  cursor: pointer;
+  color: var(--o-color-info1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include tip1;
+
+  @include hover {
+    background-color: var(--o-color-control2-light);
+    color: var(--o-color-primary1);
+  }
+}
+
+.o-search-panel-hot-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--o-gap-3) var(--o-gap-4);
+  margin-top: var(--o-gap-3);
+  @include tip2;
+
+  @include respond-to('<=pad_v') {
+    display: block;
+    @include text1;
+  }
+}
+
+.o-search-panel-hot-item {
+  color: var(--o-color-info1);
+  cursor: pointer;
+
+  @include respond-to('<=pad_v') {                                                     
+    margin-top: var(--o-gap-3);                                                        
+  }  
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
+}
+</style>

package/src/components/search/types.ts

@@ -0,0 +1,25 @@
+export interface OSearchRecommendItem {
+  key: string;
+  path?: string;
+  type?: string;
+  count?: number;
+}
+
+export interface OSearchPayload {
+  keyword: string;
+  imageUrl?: string;
+}
+
+export interface OSearchImageUploadErrorPayload {
+  file: File;
+  error: unknown;
+}
+
+export type OSearchUploadImageFn = (file: File) => Promise<string>;
+
+export type OSearchItemClickType = 'history' | 'hot' | 'suggest' | 'onestep';
+
+export interface OSearchHighlightPart {
+  text: string;
+  match: boolean;
+}

package/src/i18n/en.ts

@@ -4,6 +4,16 @@ export default {
   'search.placeholder': 'Please enter the content',
   'search.expandedPlaceholder': 'Please enter the content',
   'search.history': 'History',
+  'search.imagePlaceholder': 'Search by text or upload image of any error',
+  'search.extendedPlaceholder': 'Press Enter to start, or refine your search with more info',
+  'search.imageUploadTooltip': 'JPG, PNG, JPEG supported (max 10 MB)',
+  'search.imageUploadFailed': 'Upload failed. Check connection and try again.',
+  'search.imageSizeExceeded': 'Image size exceeds the limit',
+  'search.imageInvalidType': 'Please upload an image file',
+  'search.onestep': 'Quick Navigation',
+  'search.suggest': 'Suggestions',
+  'search.noData': 'No data',
+  'search.suggestListLabel': 'Did you mean: ',
   'meeting.audioToText': 'Speech to Text',
   'meeting.item1': 'Convener: ',
   'meeting.item2': 'SIG: ',
@@ -22,8 +32,8 @@ export default {
   'meeting.sunday': 'Sunday',
   'meeting.sigGroup': 'The {0} group',
   'meeting.invite': ' invites you to',
-  'meeting.edit': ' modify',
-  'meeting.cancel': ' cancel',
+  'meeting.edit': ' [modified]',
+  'meeting.cancel': ' [canceled]',
   'meeting.dateTime': ' {1} on {0}',
   'meeting.meeting': ' the meeting',
   'meeting.cycleMeeting': ' the recurring meeting',

package/src/i18n/zh.ts

@@ -4,6 +4,16 @@ export default {
   'search.placeholder': '搜索',
   'search.expandedPlaceholder': '请输入搜索内容',
   'search.history': '历史搜索',
+  'search.imagePlaceholder': '输入文字搜索，支持粘贴或上传报错截图',
+  'search.extendedPlaceholder': '按下回车立即搜索，或补充更多信息进行搜索',
+  'search.imageUploadTooltip': '报错截图搜索，支持jpg、png、jpeg等，最大10M',
+  'search.imageUploadFailed': '图片上传失败，请检查网络后重试',
+  'search.imageSizeExceeded': '图片大小超出限制',
+  'search.imageInvalidType': '请上传图片文件',
+  'search.onestep': '导航搜索直达',
+  'search.suggest': '搜索建议',
+  'search.noData': '暂无数据',
+  'search.suggestListLabel': '您是不是在寻找：',
   'meeting.audioToText': '语音转文字',
   'meeting.item1': '发起人：',
   'meeting.item2': 'SIG组：',

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './components/element-plus';
 export * from './components/events';
 export * from './components/header';
 export * from './components/meeting';
+export * from './components/search';
 
 // 默认导出（用于Vue插件安装）
 export default {

package/vite.config.ts

@@ -36,6 +36,10 @@ export default defineConfig(({ mode }) => {
                 ) {
                   return false;
                 }
+                // locale 子路径打包进库，避免消费方路径解析问题
+                if (id.startsWith('@opensig/opendesign/es/locale/')) {
+                  return false;
+                }
                 // element-plus JS 保持外部化
                 if (/^element-plus/.test(id)) return true;
                 // 其他外部依赖
@@ -79,7 +83,7 @@ export default defineConfig(({ mode }) => {
           @use "@opendesign-plus/styles/mixin/font.scss" as *;
           @use "@opendesign-plus/styles/mixin/common.scss" as *;
           @use "@opendesign-plus/styles/mixin/gap.scss" as *;
-          @use "@/assets/styles/element-plus.scss" as *;
+          @use "@opendesign-plus/styles/element-plus.scss" as *;
         `,
         },
       },