@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.31

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

@@ -0,0 +1,431 @@
+<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 var(--o-gap-3);
+  cursor: pointer;
+  color: var(--o-color-info1);
+  border-radius: var(--o-radius-xs);
+  margin: 0 calc(-1 * var(--o-gap-3));
+
+  &: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 tip1;
+
+  @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;
+}