tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,310 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchUserAdvanced {
+  padding: 10px 20px;
+  background-color: var(--bg-color-operate);
+  display: flex;
+  gap: 24px;
+}
+
+.SearchUserAdvanced__filter-row {
+  position: relative;
+}
+
+.SearchUserAdvanced__filter-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.SearchUserAdvanced__filter-label {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.SearchUserAdvanced__filter-value {
+  color: var(--text-color-primary);
+  font-size: 14px;
+  flex: 1;
+}
+
+.SearchUserAdvanced__arrow {
+  font-size: 12px;
+  color: var(--text-color-disabled);
+  transition: transform 0.3s;
+}
+
+.SearchUserAdvanced__arrow--up {
+  transform: rotate(180deg);
+}
+
+.SearchUserAdvanced__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding: 8px 0;
+  background-color: var(--bg-color-operate);
+  box-shadow: 0 2px 6px 0 var(--shadow-color), 0 8px 24px 0 var(--shadow-color);
+  border-radius: 8px;
+  z-index: 10;
+  min-width: 68px;
+}
+
+.SearchUserAdvanced__option {
+  line-height: 22px;
+  padding: 5px 20px;
+  color: var(--text-color-primary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--list-color-focused);
+    color: var(--text-color-link);
+  }
+}
+
+.SearchUserAdvanced__age-inputs {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+
+  span {
+    color: var(--text-color-secondary);
+    font-size: 14px;
+  }
+}
+
+.SearchUserAdvanced__age-input {
+  width: 48px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--stroke-color-primary);
+  background-color: var(--bg-color-input);
+  color: var(--text-color-primary);
+  border-radius: 4px;
+  outline: none;
+  font-size: 14px;
+  text-align: center;
+
+  &:hover {
+    border-color: var(--stroke-color-secondary);
+  }
+
+  &:focus {
+    border-color: var(--text-color-link);
+  }
+
+  &::placeholder {
+    color: var(--text-color-disabled);
+  }
+
+  // 隐藏数字输入框的上下箭头
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+}
+
+.SearchUserAdvanced__confirm-button {
+  margin-left: 8px;
+  padding: 0 12px;
+  height: 24px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--text-color-link);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    color: var(--button-color-primary-hover);
+  }
+
+  &:active {
+    color: var(--button-color-primary-active);
+  }
+}
+
+.SearchUserAdvanced__action-sheet-mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.SearchUserAdvanced__action-sheet-panel {
+  width: 100%;
+  background-color: var(--bg-color-operate);
+  box-shadow: 0 -2px 8px var(--shadow-color);
+  border-radius: 12px 12px 0 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  animation: SearchUserAdvanced-slideUp .2s;
+}
+
+@keyframes SearchUserAdvanced-slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.SearchUserAdvanced__action-sheet-option {
+  padding: 16px 0;
+  text-align: center;
+  color: var(--text-color-primary);
+  border-bottom: 1px solid var(--floating-color-operate);
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--bg-color-bubble-own);
+    color: var(--text-color-link);
+  }
+}
+
+.SearchUserAdvanced__action-sheet-cancel {
+  padding: 16px 0;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 0;
+  border-top: 5px solid var(--floating-color-operate);
+  color: var(--text-color-secondary);
+}
+
+.SearchUserAdvanced__action-sheet-confirm {
+  width: 100%;
+  padding: 16px 0;
+  background-color: var(--text-color-link);
+  color: var(--text-color-primary);
+  border: none;
+  font-size: 16px;
+}
+
+.SearchUserAdvanced__filter-row-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.SearchUserAdvanced__filter-icon {
+  color: var(--text-color-link);
+}
+
+.SearchUserAdvanced__filter-text {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+}
+
+.SearchUserAdvanced__age-inputs-sheet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 24px 0 0 0;
+}
+
+.SearchUserAdvanced__filter-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  background: var(--bg-color-default);
+}
+
+.SearchUserAdvanced__filter-page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+}
+
+.SearchUserAdvanced__back-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.SearchUserAdvanced__header-title {
+  flex: 1;
+  text-align: center;
+  padding-right: 40px;
+  font-size: 17px;
+  font-weight: 500;
+  color: var(--text-color-primary);
+}
+
+.SearchUserAdvanced__filter-page-main {
+  padding: 4px 16px 20px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  background: var(--bg-color-operate);
+  box-shadow: 0 0 24 0 var(--shadow-color);
+}
+
+.SearchUserAdvanced__bottom-line {
+  border-bottom: 1px solid var(--shadow-color);
+}
+
+.SearchUserAdvanced__filter-page-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  cursor: pointer;
+}
+
+.SearchUserAdvanced__filter-page-label {
+  font-size: 16px;
+  color: var(--text-color-primary);
+}
+
+.SearchUserAdvanced__filter-page-value {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  gap: 8px;
+  color: var(--text-color-secondary);
+}
+
+.SearchUserAdvanced__filter-page-footer {
+  width: 100%;
+  padding-top: 40px;
+}
+
+.SearchUserAdvanced__filter-confirm-button {
+  width: 100%;
+  padding: 12px 0;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  cursor: pointer;
+  background: var(--text-color-link);
+  color: #fff;
+} 

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.vue

@@ -0,0 +1,348 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchUserAdvanced">
+    <div :class="$style['SearchUserAdvanced__filter-row']">
+      <div
+        :class="$style['SearchUserAdvanced__filter-select']"
+        @click="isH5 ? toggleFilter() : setIsGenderOpen(!isGenderOpen)"
+      >
+        <span :class="$style['SearchUserAdvanced__filter-label']"> {{ t('Search.filter.gender') }}： </span>
+        <span :class="$style['SearchUserAdvanced__filter-value']">
+          {{ getGenderText(userAdvanced?.gender || t('Search.filter.gender.any')) }}
+        </span>
+        <span :class="[$style.SearchUserAdvanced__arrow, { [$style['SearchUserAdvanced__arrow--up']]: isGenderOpen }]">
+          ▼
+        </span>
+      </div>
+      <div v-if="!isH5 && isGenderOpen" :class="$style.SearchUserAdvanced__dropdown" ref="genderRef">
+        <div
+          v-for="item in genderList"
+          :key="item.value"
+          :class="$style.SearchUserAdvanced__option"
+          @click="handleGenderChange(item.value)"
+        >
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div :class="$style['SearchUserAdvanced__filter-row']" ref="ageRef">
+      <div
+        :class="$style['SearchUserAdvanced__filter-select']"
+        @click="isH5 ? toggleFilter() : setIsAgeOpen(!isAgeOpen)"
+      >
+        <span :class="$style['SearchUserAdvanced__filter-label']"> {{ t('Search.filter.age') }}： </span>
+        <span :class="$style['SearchUserAdvanced__filter-value']">
+          {{ `${minAge || '0'}-${maxAge || '99'} ${t('Search.filter.age.yearsOld')}` }}
+        </span>
+        <span
+          v-if="!isH5"
+          :class="[$style.SearchUserAdvanced__arrow, { [$style['SearchUserAdvanced__arrow--up']]: isAgeOpen }]"
+        >
+          ▼
+        </span>
+      </div>
+      <div v-if="!isH5 && isAgeOpen" :class="$style.SearchUserAdvanced__dropdown">
+        <div :class="$style['SearchUserAdvanced__age-inputs']">
+          <input
+            type="number"
+            min="0"
+            max="99"
+            :value="tempAge.min ?? ''"
+            placeholder="0"
+            @input="e => handleAgeInputChange('min', (e.target as HTMLInputElement).value)"
+            :class="$style['SearchUserAdvanced__age-input']"
+          />
+          <span>-</span>
+          <input
+            type="number"
+            min="0"
+            max="99"
+            :value="tempAge.max ?? ''"
+            placeholder="99"
+            @input="e => handleAgeInputChange('max', (e.target as HTMLInputElement).value)"
+            :class="$style['SearchUserAdvanced__age-input']"
+          />
+          <span>{{ t('Search.filter.age.yearsOld') }}</span>
+          <TUIButton :class="$style['SearchUserAdvanced__confirm-button']" @click="handleAgeConfirm">
+            {{ t('Search.action.confirm') }}
+          </TUIButton>
+        </div>
+      </div>
+    </div>
+    <div v-if="isH5" :class="$style['SearchUserAdvanced__filter-row-right']" @click="toggleFilter">
+      <IconSetting :class="$style['SearchUserAdvanced__filter-icon']" />
+      <span :class="$style['SearchUserAdvanced__filter-text']">{{ t('Search.filter.title') }}</span>
+    </div>
+
+    <div v-if="isFilterPage" :class="$style['SearchUserAdvanced__filter-page']">
+      <div :class="$style['SearchUserAdvanced__filter-page-header']">
+        <div :class="$style['SearchUserAdvanced__back-button']" @click="toggleFilter">
+          <IconBack size="24" />
+        </div>
+        <div :class="$style['SearchUserAdvanced__header-title']">{{ t('Search.filter.title') }}</div>
+      </div>
+
+      <div :class="$style['SearchUserAdvanced__filter-page-main']">
+        <div
+          :class="[$style['SearchUserAdvanced__filter-page-row'], $style['SearchUserAdvanced__bottom-line']]"
+          @click="setIsGenderOpen(true)"
+        >
+          <span :class="$style['SearchUserAdvanced__filter-page-label']">{{ t('Search.filter.gender') }}</span>
+          <div :class="$style['SearchUserAdvanced__filter-page-value']">
+            <span>{{ getGenderText(tempGender) }}</span>
+            <span :class="$style.SearchUserAdvanced__arrow">&gt;</span>
+          </div>
+        </div>
+        <div v-if="isGenderOpen" :class="$style['SearchUserAdvanced__action-sheet-mask']">
+          <div :class="$style['SearchUserAdvanced__action-sheet-panel']" ref="genderRef">
+            <div
+              v-for="item in genderList"
+              :key="item.value"
+              :class="$style['SearchUserAdvanced__action-sheet-option']"
+              @click="handleTempGender(item.value)"
+            >
+              {{ item.label }}
+            </div>
+            <div :class="$style['SearchUserAdvanced__action-sheet-cancel']" @click="setIsGenderOpen(false)">
+              {{ t('Search.action.cancel') }}
+            </div>
+          </div>
+        </div>
+        <div :class="$style['SearchUserAdvanced__filter-page-row']">
+          <span :class="$style['SearchUserAdvanced__filter-page-label']">{{ t('Search.filter.age') }}</span>
+          <div :class="$style['SearchUserAdvanced__filter-page-value']">
+            <span>{{ `${tempAge.min ?? 0}-${tempAge.max ?? 99}` }}</span>
+          </div>
+        </div>
+        <Slider
+          :value="[tempAge.min ?? 0, tempAge.max ?? 99]"
+          :min="0"
+          :max="99"
+          @change="val => setTempAge({ min: val[0], max: val[1] })"
+        />
+      </div>
+
+      <div :class="$style['SearchUserAdvanced__filter-page-footer']">
+        <TUIButton :class="$style['SearchUserAdvanced__filter-confirm-button']" @click="handleFilterChange">
+          {{ t('Search.action.confirm') }}
+        </TUIButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, onUnmounted, computed, defineProps } from 'vue';
+import ChatEngine from '@tencentcloud/chat-uikit-engine';
+import { IconBack, IconSetting, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { SearchType } from '../../../../types/engine';
+import { isH5 } from '../../../../utils';
+import { Slider } from '../Slider';
+
+interface IUserAdvancedProps {
+  advancedParams?: Map<SearchType, any>;
+  onAdvancedParamsChange?: (params: Map<SearchType, any>) => void;
+}
+
+const props = defineProps<IUserAdvancedProps>();
+
+const { t } = useUIKit();
+
+// 临时工具函数
+const birthdayToAge = (birthday: number) => {
+  const today = new Date();
+  const birthDate = new Date(Math.floor(birthday / 10000), Math.floor((birthday % 10000) / 100) - 1, birthday % 100);
+  let age = today.getFullYear() - birthDate.getFullYear();
+  const monthDiff = today.getMonth() - birthDate.getMonth();
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age -= 1;
+  }
+  return age;
+};
+
+const ageToBirthday = (age: number | undefined) => {
+  if (!age) {
+    return undefined;
+  }
+  const today = new Date();
+  const year = today.getFullYear() - age;
+  return year * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
+};
+
+const userAdvanced = ref<any>({});
+const isGenderOpen = ref(false);
+const isAgeOpen = ref(false);
+const isFilterPage = ref(false);
+const tempAge = ref<{ min: number | undefined; max: number | undefined }>({
+  min: undefined,
+  max: undefined,
+});
+const tempGender = ref<string>('不限');
+const genderRef = ref<HTMLDivElement>();
+const ageRef = ref<HTMLDivElement>();
+
+const genderList = [
+  {
+    value: '不限',
+    label: t('Search.filter.gender.any'),
+  },
+  {
+    value: ChatEngine.TYPES.GENDER_MALE,
+    label: t('Search.filter.gender.male'),
+  },
+  {
+    value: ChatEngine.TYPES.GENDER_FEMALE,
+    label: t('Search.filter.gender.female'),
+  },
+];
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event: MouseEvent) => {
+  if (genderRef.value && !genderRef.value.contains(event.target as Node)) {
+    isGenderOpen.value = false;
+  }
+  if (ageRef.value && !ageRef.value.contains(event.target as Node)) {
+    isAgeOpen.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+
+// 监听高级参数变化
+watch(
+  () => props.advancedParams,
+  newParams => {
+    const userParams = newParams?.get(SearchType.USER) || {};
+    userAdvanced.value = {
+      ...userAdvanced.value,
+      ...userParams,
+    };
+    tempGender.value = userParams?.gender || '不限';
+    tempAge.value = {
+      min: userParams?.maxBirthday ? birthdayToAge(userParams?.maxBirthday) : undefined,
+      max: userParams?.miniBirthday ? birthdayToAge(userParams?.miniBirthday) : undefined,
+    };
+  },
+  { immediate: true }
+);
+
+const handleGenderChange = (gender: string) => {
+  if (props.onAdvancedParamsChange) {
+    const newParams = new Map(props.advancedParams || []);
+    newParams.set(SearchType.USER, {
+      ...userAdvanced.value,
+      gender: gender === '不限' ? undefined : gender,
+    });
+    props.onAdvancedParamsChange(newParams);
+  }
+  isGenderOpen.value = false;
+};
+
+const handleAgeChange = (age: { min: number | undefined; max: number | undefined }) => {
+  if (props.onAdvancedParamsChange) {
+    const newParams = new Map(props.advancedParams || []);
+    newParams.set(SearchType.USER, {
+      ...userAdvanced.value,
+      miniBirthday: ageToBirthday(age.max),
+      maxBirthday: ageToBirthday(age.min),
+    });
+    props.onAdvancedParamsChange(newParams);
+  }
+  isAgeOpen.value = false;
+};
+
+const handleAgeInputChange = (type: 'min' | 'max', value: string) => {
+  if (value === '') {
+    tempAge.value = {
+      ...tempAge.value,
+      [type]: undefined,
+    };
+  } else {
+    const numValue = Math.max(0, Math.min(99, parseInt(value, 10) || 0));
+    tempAge.value = {
+      ...tempAge.value,
+      [type]: numValue,
+    };
+  }
+};
+
+const toggleFilter = () => {
+  isFilterPage.value = !isFilterPage.value;
+};
+
+const handleAgeConfirm = () => {
+  const { min, max } = tempAge.value;
+  handleAgeChange({ min, max });
+};
+
+const handleFilterChange = () => {
+  toggleFilter();
+  const isSameGender = userAdvanced.value?.gender === tempGender.value;
+  const isSameMiniBirthday = userAdvanced.value?.miniBirthday === ageToBirthday(tempAge.value.max);
+  const isSameMaxBirthday = userAdvanced.value?.maxBirthday === ageToBirthday(tempAge.value.min);
+  if (isSameGender && isSameMiniBirthday && isSameMaxBirthday) {
+    return;
+  }
+  if (props.onAdvancedParamsChange) {
+    const newParams = new Map(props.advancedParams || []);
+    newParams.set(SearchType.USER, {
+      ...userAdvanced.value,
+      gender: tempGender.value === '不限' ? undefined : tempGender.value,
+      miniBirthday: tempAge.value.max !== 99 ? ageToBirthday(tempAge.value.max) : undefined,
+      maxBirthday: tempAge.value.min !== 0 ? ageToBirthday(tempAge.value.min) : undefined,
+    });
+    props.onAdvancedParamsChange(newParams);
+  }
+};
+
+const handleTempGender = (value: string) => {
+  tempGender.value = value;
+  isGenderOpen.value = false;
+};
+
+const setIsGenderOpen = (value: boolean) => {
+  isGenderOpen.value = value;
+  if (value) {
+    isAgeOpen.value = false;
+  }
+};
+
+const setIsAgeOpen = (value: boolean) => {
+  isAgeOpen.value = value;
+  if (value) {
+    isGenderOpen.value = false;
+  }
+};
+
+const setTempAge = (value: { min: number | undefined; max: number | undefined }) => {
+  tempAge.value = value;
+};
+
+const minAge = computed(() =>
+  userAdvanced.value?.maxBirthday ? birthdayToAge(userAdvanced.value.maxBirthday) : undefined
+);
+const maxAge = computed(() =>
+  userAdvanced.value?.miniBirthday ? birthdayToAge(userAdvanced.value.miniBirthday) : undefined
+);
+
+const getGenderText = (gender: string) => {
+  switch (gender) {
+    case ChatEngine.TYPES.GENDER_MALE:
+      return t('Search.filter.gender.male');
+    case ChatEngine.TYPES.GENDER_FEMALE:
+      return t('Search.filter.gender.female');
+    default:
+      return t('Search.filter.gender.any');
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './UserAdvanced.scss';
+</style>

package/src/components/Search/SearchAdvanced/UserAdvanced/index.ts

@@ -0,0 +1,2 @@
+export { default as UserAdvanced } from './UserAdvanced.vue';
+export * from './UserAdvanced.vue';

package/src/components/Search/SearchAdvanced/index.ts

@@ -0,0 +1,9 @@
+import SearchAdvancedComponent from './SearchAdvanced.vue';
+
+export * from './MessageAdvanced';
+export * from './UserAdvanced';
+export * from './SearchTab';
+export * from './DateRangePicker';
+export * from './Slider';
+
+export default SearchAdvancedComponent;