+
+
- 
-
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/CommentReply/src/UserInfoCard/index.scss b/src/components/CommentReply/src/UserInfoCard/index.scss
new file mode 100644
index 0000000..2b9e270
--- /dev/null
+++ b/src/components/CommentReply/src/UserInfoCard/index.scss
@@ -0,0 +1,34 @@
+.user-info-card-main {
+ width: 350px;
+ min-height: 250px;
+
+ .user-info-card-image {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ }
+
+ .user-info-card-name {
+ padding-top: 5px;
+ padding-left: 10px;
+
+ .user-info-card-content-container {
+ margin-left: 10px;
+
+ .user-info-card-name-text {
+ font-size: 15px;
+ font-weight: 600;
+ }
+
+ .user-info-card-level-icon {
+ width: 40px;
+ margin-left: 5px;
+ cursor: pointer;
+ }
+ .user-info-card-info-text{
+ font-size: 12px;
+ color: #9499a0;
+ }
+ }
+
+ }
+}
diff --git a/src/components/MyUI/Ellipsis/Ellipsis.vue b/src/components/MyUI/Ellipsis/Ellipsis.vue
new file mode 100644
index 0000000..2b14e0b
--- /dev/null
+++ b/src/components/MyUI/Ellipsis/Ellipsis.vue
@@ -0,0 +1,149 @@
+
+
+
+ 
+
+
+
+
+
+
+ {{ title }}
+
+
+ {{ content }}
+
+
+
+
+
+
diff --git a/src/components/MyUI/Textarea/Textarea.vue b/src/components/MyUI/Textarea/Textarea.vue
new file mode 100644
index 0000000..c679258
--- /dev/null
+++ b/src/components/MyUI/Textarea/Textarea.vue
@@ -0,0 +1,279 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ tip }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/MyUI/Tooltip/Tooltip.vue b/src/components/MyUI/Tooltip/Tooltip.vue
new file mode 100644
index 0000000..104a4d6
--- /dev/null
+++ b/src/components/MyUI/Tooltip/Tooltip.vue
@@ -0,0 +1,573 @@
+
+
+
+ {{ content }}
+
+
+
+
diff --git a/src/components/MyUI/Waterfall/Waterfall.vue b/src/components/MyUI/Waterfall/Waterfall.vue
new file mode 100644
index 0000000..8712189
--- /dev/null
+++ b/src/components/MyUI/Waterfall/Waterfall.vue
@@ -0,0 +1,182 @@
+
+
+
+
+
+
+ {{ tooltip }}
+
+
+
+
+ ![]()
+
+
+
+
diff --git a/src/components/MyUI/utils/index.ts b/src/components/MyUI/utils/index.ts
index 8eff2f8..33492ba 100644
--- a/src/components/MyUI/utils/index.ts
+++ b/src/components/MyUI/utils/index.ts
@@ -1,3 +1,17 @@
+import type {Ref} from 'vue';
+import {
+ computed,
+ getCurrentInstance,
+ onBeforeUnmount,
+ onMounted,
+ onUnmounted,
+ reactive,
+ ref,
+ toValue,
+ useSlots,
+ watch
+} from 'vue';
+
/**
* 组合式函数
* 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在
@@ -6,7 +20,6 @@
* @returns 如果是单个插槽名称，则返回一个计算属性，表示该插槽是否存在
* 如果是插槽名称数组，则返回一个 reactive 对象，其中的每个属性对应该插槽是否存在
*/
-import { useSlots, reactive, computed } from 'vue';
export function useSlotsExist(slotsName: string | string[] = 'default') {
const slots = useSlots(); // 获取当前组件的所有插槽
// 检查特定名称的插槽是否存在且不为空
@@ -48,3 +61,287 @@ export function useSlotsExist(slotsName: string | string[] = 'default') {
return computed(() => checkSlotsExist(slotsName));
}
}
+
+/**
+ * 组合式函数
+ * 使用 Vue 的生命周期钩子添加和移除事件监听器
+ *
+ * 该函数旨在提供一种优雅的方式来管理事件监听器，避免在组件卸载后仍保留事件监听器，
+ * 从而可能导致内存泄漏的问题；通过结合 Vue 的 onMounted 和 onUnmounted 钩子，
+ * 在组件挂载时添加事件监听器，并在组件卸载时移除它
+ *
+ * @param target 目标元素或对象；可以是 DOM 元素或其他支持 addEventListener 的对象
+ * @param event 要监听的事件名称
+ * @param callback 事件被触发时执行的回调函数
+ */
+export function useEventListener(target: HTMLElement | Window | Document, event: string, callback: EventListenerOrEventListenerObject): void {
+ // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素
+ onMounted(() => target.addEventListener(event, callback as EventListenerOrEventListenerObject));
+ onUnmounted(() => target.removeEventListener(event, callback as EventListenerOrEventListenerObject));
+}
+
+
+/**
+ * 使用 requestAnimationFrame 实现的延迟 setTimeout 或间隔 setInterval 调用函数
+ *
+ * @param fn 要执行的函数
+ * @param delay 延迟的时间，单位为 ms，默认为 0，表示不延迟立即执行
+ * @param interval 是否间隔执行，如果为 true，则在首次执行后，以 delay 为间隔持续执行
+ * @returns 返回一个对象，包含一个 id 属性，该 id 为 requestAnimationFrame 的调用 ID，可用于取消动画帧
+ */
+export function rafTimeout(fn: () => void, delay: number = 0, interval: boolean = false): object {
+ let start: number | null = null; // 记录动画开始的时间戳
+ function timeElapse(timestamp: number) {
+ // 定义动画帧回调函数
+ /*
+ timestamp参数：与 performance.now() 的返回值相同，它表示 requestAnimationFrame() 开始去执行回调函数的时刻
+ */
+ if (!start) {
+ // 如果还没有开始时间，则以当前时间为开始时间
+ start = timestamp;
+ }
+ const elapsed = timestamp - start;
+ if (elapsed >= delay) {
+ try {
+ fn(); // 执行目标函数
+ } catch (error) {
+ console.error('Error executing rafTimeout function:', error);
+ }
+ if (interval) {
+ // 如果需要间隔执行，则重置开始时间并继续安排下一次动画帧
+ start = timestamp;
+ raf.id = requestAnimationFrame(timeElapse);
+ }
+ } else {
+ raf.id = requestAnimationFrame(timeElapse);
+ }
+ }
+
+ interface AnimationFrameID {
+ id: number
+ }
+
+ // 创建一个对象用于存储动画帧的 ID，并初始化动画帧
+ const raf: AnimationFrameID = {
+ id: requestAnimationFrame(timeElapse)
+ };
+ return raf;
+}
+
+/**
+ * 用于取消 rafTimeout 函数
+ *
+ * @param raf - 包含请求动画帧 ID 的对象；该 ID 是由 requestAnimationFrame 返回的
+ * 该函数旨在取消之前通过 requestAnimationFrame 请求的动画帧
+ * 如果传入的 raf 对象或其 id 无效，则会打印警告
+ */
+export function cancelRaf(raf: { id: number }): void {
+ if (raf && raf.id && typeof raf.id === 'number') {
+ cancelAnimationFrame(raf.id);
+ } else {
+ console.warn('cancelRaf received an invalid id:', raf);
+ }
+}
+
+/**
+ * 组合式函数
+ * 使用 ResizeObserver 观察 DOM 元素尺寸变化
+ *
+ * 该函数提供了一种方便的方式来观察一个或多个元素的尺寸变化，并在变化时执行指定的回调函数
+ *
+ * @param target 要观察的目标，可以是 Ref 对象、Ref 数组、HTMLElement 或 HTMLElement 数组
+ * @param callback 当元素尺寸变化时调用的回调函数
+ * @param options ResizeObserver 选项，用于定制观察行为
+ * @returns 返回一个对象，包含停止和开始观察的方法，使用者可以调用 start 方法开始观察，调用 stop 方法停止观察
+ */
+export function useResizeObserver(
+ target: Ref | Ref[] | HTMLElement | HTMLElement[],
+ callback: ResizeObserverCallback,
+ options: object = {}
+) {
+ const isSupported = useSupported(() => window && 'ResizeObserver' in window);
+ let observer: ResizeObserver | undefined;
+ const stopObservation = ref(false);
+ const targets = computed(() => {
+ const targetsValue = toValue(target);
+ if (targetsValue) {
+ if (Array.isArray(targetsValue)) {
+ return targetsValue.map((el: any) => toValue(el)).filter((el: any) => el);
+ } else {
+ return [targetsValue];
+ }
+ }
+ return [];
+ });
+ // 定义清理函数，用于断开 ResizeObserver 的连接
+ const cleanup = () => {
+ if (observer) {
+ observer.disconnect();
+ observer = undefined;
+ }
+ };
+ // 初始化 ResizeObserver，开始观察目标元素
+ const observeElements = () => {
+ if (isSupported.value && targets.value.length && !stopObservation.value) {
+ observer = new ResizeObserver(callback);
+ targets.value.forEach((element: HTMLElement) => observer!.observe(element, options));
+ }
+ };
+ // 监听 targets 的变化，当 targets 变化时，重新建立 ResizeObserver 观察
+ watch(
+ () => targets.value,
+ () => {
+ cleanup();
+ observeElements();
+ },
+ {
+ immediate: true, // 立即触发回调，以便初始状态也被观察
+ flush: 'post'
+ }
+ );
+ const stop = () => {
+ stopObservation.value = true;
+ cleanup();
+ };
+ const start = () => {
+ stopObservation.value = false;
+ observeElements();
+ };
+ // 在组件卸载前清理 ResizeObserver
+ onBeforeUnmount(() => cleanup());
+ return {
+ stop,
+ start
+ };
+}
+
+// 辅助函数
+export function useSupported(callback: () => unknown) {
+ const isMounted = useMounted();
+ return computed(() => {
+ // to trigger the ref
+ if (isMounted.value) {
+ // no-op
+ }
+ ;
+ return Boolean(callback());
+ });
+}
+
+export function useMounted() {
+ const isMounted = ref(false);
+ // 获取当前组件的实例
+ const instance = getCurrentInstance();
+ if (instance) {
+ onMounted(() => {
+ isMounted.value = true;
+ }, instance);
+ }
+ return isMounted;
+}
+
+/**
+ * 防抖函数 debounce
+ *
+ * 主要用于限制函数调用的频率，当频繁触发某个函数时，实际上只需要在最后一次触发后的一段时间内执行一次即可
+ * 这对于诸如输入事件处理函数、窗口大小调整事件处理函数等可能会频繁触发的函数非常有用
+ *
+ * @param fn 要执行的函数
+ * @param delay 防抖的时间期限，单位 ms，默认为 300ms
+ * @returns 返回一个新的防抖的函数
+ */
+export function debounce(fn: (...args: any[]) => any, delay: number = 300): any {
+ let timer: any = null; // 使用闭包保存定时器的引用
+ return function (...args: any[]) {
+ // 返回一个包装函数
+ if (timer) {
+ // 如果定时器存在，则清除之前的定时器
+ clearTimeout(timer);
+ }
+ // 设置新的定时器，延迟执行原函数
+ timer = setTimeout(() => {
+ fn(...args);
+ }, delay);
+ };
+}
+
+
+/**
+ * 组合式函数
+ * 使用 MutationObserver 观察 DOM 元素的变化
+ *
+ * 该函数提供了一个便捷的方式来订阅 DOM 元素的变动，当元素发生指定的变化时，调用提供的回调函数
+ * 使用者可以指定要观察的一个或多个 DOM 元素，以及观察的选项和回调函数
+ *
+ * @param target 要观察的目标，可以是 Ref 对象、Ref 数组、HTMLElement 或 HTMLElement 数组
+ * @param callback 当观察到变化时调用的回调函数
+ * @param options MutationObserver 的观察选项，默认为空对象；例如:
+ * subtree: 是否监听以 target 为根节点的整个子树，包括子树中所有节点的属性
+ * childList: 是否监听 target 节点中发生的节点的新增与删除
+ * attributes: 是否观察所有监听的节点属性值的变化
+ * attributeFilter: 声明哪些属性名会被监听的数组；如果不声明该属性，所有属性的变化都将触发通知
+ * @returns 返回一个对象，包含停止和开始观察的方法，使用者可以调用 start 方法开始观察，调用 stop 方法停止观察
+ */
+export function useMutationObserver(
+ target: Ref | Ref[] | HTMLElement | HTMLElement[],
+ callback: MutationCallback,
+ options = {}
+) {
+ const isSupported = useSupported(() => window && 'MutationObserver' in window);
+ const stopObservation = ref(false);
+ let observer: MutationObserver | undefined;
+ const targets = computed(() => {
+ const targetsValue = toValue(target);
+ if (targetsValue) {
+ if (Array.isArray(targetsValue)) {
+ return targetsValue.map((el: any) => toValue(el)).filter((el: any) => el);
+ } else {
+ return [targetsValue];
+ }
+ }
+ return [];
+ });
+ // 定义清理函数，用于断开 MutationObserver 的连接
+ const cleanup = () => {
+ if (observer) {
+ observer.disconnect();
+ observer = undefined;
+ }
+ };
+ // 初始化 MutationObserver，开始观察目标元素
+ const observeElements = () => {
+ if (isSupported.value && targets.value.length && !stopObservation.value) {
+ observer = new MutationObserver(callback);
+ targets.value.forEach((element: HTMLElement) => observer!.observe(element, options));
+ }
+ };
+ // 监听 targets 的变化，当 targets 变化时，重新建立 MutationObserver 观察
+ watch(
+ () => targets.value,
+ () => {
+ cleanup();
+ observeElements();
+ },
+ {
+ immediate: true, // 立即触发回调，以便初始状态也被观察
+ flush: 'post'
+ }
+ );
+ const stop = () => {
+ stopObservation.value = true;
+ cleanup();
+ };
+ const start = () => {
+ stopObservation.value = false;
+ observeElements();
+ };
+ // 在组件卸载前清理 MutationObserver
+ onBeforeUnmount(() => cleanup());
+ return {
+ stop,
+ start
+ };
+}
+
+
+