tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/MessageList/i18n/en-US.ts

@@ -0,0 +1,42 @@
+const MessageList = {
+
+  // GroupTipMessage
+  administrator: 'Administrator',
+  enabled_mute_all_members: 'enabled mute all members',
+  disabled_mute_all_members: 'disabled mute all members',
+  became_new_group_owner: 'became the new group owner',
+  changed_group_name_to: 'changed group name to',
+  published_new_announcement: 'published new group notification',
+  joined_group: 'joined the group',
+  group_member: 'Group member',
+  left_group: 'left the group',
+  was: 'was',
+  kicked_out_of_group: 'kicked out of the group',
+  became_admin: 'became admin',
+  admin_privileges_revoked: 'admin privileges revoked',
+  was_muted: 'was muted',
+  was_unmuted: 'was unmuted',
+  group_tip_message: 'Group tip message',
+
+  // TUIChat
+  download_failed: 'Download failed',
+  create_group: 'Create Group',
+  unread: 'Unread',
+  all_read: 'All Read',
+  read: 'Read',
+  you: 'You',
+  recalled_a_message: 'recalled a message',
+  reedit: 'Re-edit',
+  origin_message_has_been_recalled: 'Original message has been recalled',
+  forward: 'Forward',
+  max_count_exceed: 'Max Count Exceed',
+  read_receipt_detail: 'Read Receipt Detail',
+  read_count: 'Read Count',
+  unread_count: 'Unread Count',
+  loading: 'Loading',
+  no_read_members: 'No Read Members',
+  no_more: 'No More',
+  no_unread_members: 'No Unread Members',
+};
+
+export default MessageList;

package/src/components/MessageList/i18n/index.ts

@@ -0,0 +1,13 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+Object.entries(resources).forEach(([lng, resource]) => {
+  i18next.addResourceBundle(lng, 'translation', { MessageList: resource }, true, false);
+});

package/src/components/MessageList/i18n/zh-CN.ts

@@ -0,0 +1,41 @@
+const MessageList = {
+  // GroupTipMessage
+  administrator: '管理员',
+  enabled_mute_all_members: '开启全员禁言',
+  disabled_mute_all_members: '取消全员禁言',
+  became_new_group_owner: '成为新的群主',
+  changed_group_name_to: '修改群名为',
+  published_new_announcement: '发布新公告',
+  joined_group: '加入群组',
+  group_member: '群成员',
+  left_group: '退出群组',
+  was: '被',
+  kicked_out_of_group: '踢出群组',
+  became_admin: '成为管理员',
+  admin_privileges_revoked: '被撤销管理员',
+  was_muted: '被禁言',
+  was_unmuted: '被取消禁言',
+  group_tip_message: '群提示消息',
+
+  // TUIChat
+  download_failed: '下载失败',
+  create_group: '创建群组',
+  unread: '未读',
+  all_read: '全部已读',
+  read: '已读',
+  you: '你',
+  recalled_a_message: '撤回了一条消息',
+  reedit: '重新编辑',
+  origin_message_has_been_recalled: '原消息已被撤回',
+  forward: '转发',
+  max_count_exceed: '超过最大数量限制',
+  read_receipt_detail: '已读详情',
+  read_count: '已读人数',
+  unread_count: '未读人数',
+  loading: '加载中',
+  no_read_members: '暂无已读成员',
+  no_more: '已加载全部',
+  no_unread_members: '暂无未读成员',
+};
+
+export default MessageList;

package/src/components/MessageList/index.ts

@@ -2,6 +2,8 @@ import { Message } from './Message';
 import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
 import MessageList from './MessageList.vue';
 
+import './i18n';
+
 export {
   Message,
   MessageList,

package/src/components/Search/Search.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.Search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: var(--bg-color-operate);
+  border-radius: 8px;
+  overflow: hidden;
+} 

package/src/components/Search/Search.vue

@@ -0,0 +1,196 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div
+    :class="[$style.Search, props.className]"
+    :style="props.style"
+    @click="stopClickPropagation"
+  >
+    <component
+      :is="SearchBar"
+      :value="searchValue"
+      :on-change="handleInputChange"
+      :on-key-down="handleKeyDown"
+      :on-clear="handleClear"
+      :auto-focus="autoFocus"
+      :variant="variant"
+    />
+    <component
+      :is="SearchAdvanced"
+      :variant="variant"
+      :search-type="selectedSearchType"
+      :advanced-params="searchAdvancedParams"
+      :on-advanced-params-change="handleAdvancedChange"
+    />
+    <component
+      :is="SearchResults"
+      :results="results"
+      :is-loading="isLoading"
+      :error="error"
+      :keyword="keyword"
+      :type-labels="defaultTypeLabels"
+      :search-type="selectedSearchType"
+      :on-result-item-click="handleResultItemClick"
+      :on-load-more="handleViewMore"
+      :SearchResultsPresearch="SearchResultsPresearch"
+      :SearchResultsLoading="SearchResultsLoading"
+      :SearchResultsEmpty="SearchResultsEmpty"
+      :SearchResultItem="SearchResultItem"
+      :variant="variant"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, withDefaults } from 'vue';
+import { useSearchState } from '../../states/SearchState';
+import { SearchType } from '../../types/engine';
+import { VariantType, defaultTypeLabels } from '../../types/search';
+import { debounce } from '../../utils/lodash';
+import DefaultSearchAdvanced from './SearchAdvanced';
+import DefaultSearchBar from './SearchBar';
+import DefaultSearchResults from './SearchResults';
+import type { SearchCloudMessagesResultItem, SearchParamsMap } from '../../types/engine';
+import type { SearchResultItemType, SearchProps } from '../../types/search';
+
+const props = withDefaults(defineProps<SearchProps>(), {
+  SearchBar: DefaultSearchBar,
+  SearchResults: DefaultSearchResults,
+  SearchAdvanced: DefaultSearchAdvanced,
+  debounceTime: 300,
+  variant: VariantType.MINI,
+  autoFocus: false,
+  className: '',
+  style: () => ({}),
+  SearchResultsPresearch: undefined,
+  SearchResultsLoading: undefined,
+  SearchResultsEmpty: undefined,
+  SearchResultItem: undefined,
+});
+
+const {
+  keyword,
+  results,
+  isLoading,
+  error,
+  selectedSearchType,
+  searchAdvancedParams,
+  setKeyword,
+  setSelectedType,
+  loadMore,
+  setSearchMessageAdvancedParams,
+  setSearchUserAdvancedParams,
+  setSearchGroupAdvancedParams,
+} = useSearchState(props.variant);
+
+const searchValue = ref(keyword.value);
+
+// 用于区分内部更新和外部更新
+const isExternalUpdate = ref(false);
+
+// 防抖搜索函数
+const debouncedSearch = debounce(async (searchKeyword: string) => {
+  try {
+    isExternalUpdate.value = true;
+    await setKeyword(searchKeyword);
+  } catch (err) {
+    props.onError?.(err as Error);
+  }
+}, props.debounceTime);
+
+// 监听 searchValue 变化
+watch(
+  searchValue,
+  (newValue) => {
+    if (!isExternalUpdate.value) {
+      debouncedSearch(newValue);
+    }
+  },
+  { immediate: false },
+);
+
+// 监听 keyword 变化
+watch(keyword, (newKeyword) => {
+  if (isExternalUpdate.value) {
+    isExternalUpdate.value = false;
+    return;
+  }
+  searchValue.value = newKeyword;
+});
+
+const handleInputChange = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  const { value } = target;
+  searchValue.value = value;
+  props.onKeywordChange?.(value);
+  if (props.variant !== VariantType.EXACT) {
+    debouncedSearch(value);
+  }
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    debouncedSearch.cancel?.();
+    isExternalUpdate.value = true;
+    setKeyword(searchValue.value);
+  }
+};
+
+const handleClear = () => {
+  searchValue.value = '';
+  debouncedSearch.cancel?.();
+  isExternalUpdate.value = true;
+  setKeyword('');
+  props.onKeywordChange?.('');
+};
+
+const handleAdvancedChange = (type: SearchType, params: SearchParamsMap[SearchType]) => {
+  const storeParams: any = searchAdvancedParams.value.get(type) || {};
+  switch (type) {
+    case SearchType.MESSAGE:
+      setSearchMessageAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    case SearchType.USER:
+      setSearchUserAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    case SearchType.GROUP:
+      setSearchGroupAdvancedParams({
+        ...storeParams,
+        ...params,
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const handleResultItemClick = (item: SearchResultItemType, type: SearchType) => {
+  if (props.onResultItemClick) {
+    props.onResultItemClick(item, type);
+  }
+  if (type === SearchType.MESSAGE) {
+    const { conversationID = '' } = (item as SearchCloudMessagesResultItem).conversation || {};
+    handleAdvancedChange(SearchType.MESSAGE, { conversationID });
+  }
+};
+
+const handleViewMore = (type: SearchType) => {
+  if (props.variant === VariantType.STANDARD && type !== SearchType.CHAT_MESSAGE) {
+    setSelectedType(type);
+  }
+  loadMore?.(type);
+};
+
+const stopClickPropagation = (e: Event) => {
+  e.stopPropagation();
+};
+</script>
+
+<style lang="scss" module>
+@import './Search.scss';
+</style>

package/src/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.scss

@@ -0,0 +1,308 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchDateRangePicker {
+  background: var(--bg-color-dialog);
+  box-shadow: 0 2px 8px var(--shadow-color);
+  border-radius: 8px;
+  padding: 16px;
+  z-index: 1001;
+  position: relative;
+}
+
+.SearchDateRangePicker__calendars {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+.SearchDateRangePicker__calendar {
+  flex: 1;
+  min-width: 280px;
+  position: relative;
+}
+
+.SearchDateRangePicker__calendar-header {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  position: relative;
+}
+
+.SearchDateRangePicker__current-month-year {
+  font-size: 14px;
+  color: var(--text-color-primary);
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  min-width: 100px;
+  text-align: center;
+  &:hover {
+    background-color: var(--bg-color-operate);
+  }
+}
+
+.SearchDateRangePicker__nav-button {
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  color: var(--text-color-disabled);
+  cursor: pointer;
+  padding: 4px;
+  transition: all 0.3s;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: var(--text-color-link);
+  }
+}
+
+.SearchDateRangePicker__picker-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-color-dialog);
+  box-shadow: 0 2px 8px var(--shadow-color);
+  border-radius: 8px;
+  padding: 8px;
+  z-index: 1002;
+  width: 260px;
+}
+
+.SearchDateRangePicker__picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.SearchDateRangePicker__picker-nav-button {
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  color: var(--text-color-disabled);
+  cursor: pointer;
+  padding: 4px;
+  &:hover {
+    color: var(--text-color-link);
+  }
+}
+
+.SearchDateRangePicker__picker-year-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color-primary);
+}
+
+.SearchDateRangePicker__picker-months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+}
+
+.SearchDateRangePicker__picker-month-button {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-color-primary);
+  border-radius: 4px;
+  padding: 8px 4px;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: var(--bg-color-operate);
+    border-color: var(--stroke-color-primary);
+  }
+}
+
+.SearchDateRangePicker__week-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  margin-bottom: 8px;
+}
+
+.SearchDateRangePicker__week-day {
+  font-size: 14px;
+  color: var(--text-color-disabled);
+  padding: 8px 0;
+}
+
+.SearchDateRangePicker__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.SearchDateRangePicker__day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--text-color-primary);
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  transition: all 0.1s ease-in-out;
+
+  &:hover {
+    background-color: var(--bg-color-operate);
+  }
+
+  &.SearchDateRangePicker__day--today {
+    font-weight: bold;
+    border: 1px solid var(--text-color-link);
+  }
+
+  &.SearchDateRangePicker__day--other-month {
+    color: var(--text-color-disabled);
+    cursor: default;
+    &:hover {
+        background-color: transparent;
+    }
+  }
+
+  &.SearchDateRangePicker__day--selected {
+    border-radius: 0;
+    background-color: rgba(42, 127, 255, 0.1);
+    color: var(--text-color-primary);
+  }
+
+  &.SearchDateRangePicker__day--start,
+  &.SearchDateRangePicker__day--end {
+    border-radius: 50%;
+    z-index: 1;
+    background-color: var(--text-color-link);
+    color: white;
+  }
+
+  &.SearchDateRangePicker__day--selected:not(.SearchDateRangePicker__day--start):not(.SearchDateRangePicker__day--end) {
+    border-radius: 0;
+    background-color: rgba(42, 127, 255, 0.1);
+    color: var(--text-color-primary);
+  }
+
+  &.SearchDateRangePicker__day--start:not(.SearchDateRangePicker__day--end)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 50%;
+      background-color: rgba(42, 127, 255, 0.1);
+      z-index: 0;
+  }
+
+  &.SearchDateRangePicker__day--end:not(.SearchDateRangePicker__day--start)::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 50%;
+      background-color: rgba(42, 127, 255, 0.1);
+      z-index: 0;
+  }
+}
+
+.SearchDateRangePicker__h5-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.3);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.SearchDateRangePicker__h5-panel {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px;
+  background: var(--bg-color-dialog);
+  box-shadow: 0 -2px 8px var(--shadow-color);
+  border-radius: 16px 16px 0 0;
+  animation: slideUp .2s;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.SearchDateRangePicker__h5-header {
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  padding: 16px 0 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.SearchDateRangePicker__h5-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background: var(--bg-color-dialog);
+}
+
+.SearchDateRangePicker__h5-cancel {
+  flex: 1;
+  margin-right: 8px;
+  padding: 12px 0;
+  background: #f5f5f5;
+  color: #888;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.SearchDateRangePicker__h5-confirm {
+  flex: 1;
+  margin-left: 8px;
+  padding: 12px 0;
+  background: #1677ff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.SearchDateRangePicker__h5-quick-options {
+  display: flex;
+  gap: 8px;
+  margin: 12px 0 8px 0;
+  justify-content: center;
+}
+
+.SearchDateRangePicker__h5-quick-option {
+  flex: 1;
+  min-width: 0;
+  padding: 8px 0;
+  font-size: 16px;
+  border-radius: 16px;
+  border: 1px solid #e6e6e6;
+  background: #f5f5f5;
+  color: #222;
+  cursor: pointer;
+  transition: all 0.2s;
+  &.SearchDateRangePicker__h5-quick-option--active {
+    background: #1677ff;
+    color: #fff;
+    border-color: #1677ff;
+  }
+}