Add new components for login and comment functionality

2025-08-17 20:15:33 +08:00
parent 99df1d1f81
commit 07b4d3de99
37 changed files with 4744 additions and 263 deletions
--- a/components/kl-query-filter/index.vue
+++ b/components/kl-query-filter/index.vue
@ -0,0 +1,115 @@
+<template>
+  <div class="filter-wrap">
+    <div v-if="slots.operate" class="operate-wrap m-b-8px p-b-8px">
+      <slot name="operate"></slot>
+    </div>
+    <div class="flex justify-between">
+      <div class="flex flex-wrap gap-8px">
+        <slot />
+        <template v-if="btn">
+          <div class="kl-filter-btns">
+            <el-button :loading="loading" :icon="Search" :class="[{ 'm-l-20px': props.searchBtnMarginLeft }]" type="primary" @click="handleSearch"
+              >搜索</el-button
+            >
+            <el-button v-if="isShowReset" :icon="Refresh" @click="handleReset">重置</el-button>
+            <slot name="followBtn"></slot>
+          </div>
+        </template>
+        <el-popover v-if="slots.ext" ref="popoverRef" placement="bottom-end" :width="popoverWidth" trigger="click">
+          <template #reference>
+            <slot name="more-btn">
+              <el-button type="primary" link
+                >更多筛选<el-icon><ArrowDown /></el-icon
+              ></el-button>
+            </slot>
+          </template>
+          <slot name="ext" />
+          <el-divider />
+          <div class="flex flex-justify-end">
+            <el-button v-if="isShowReset" @click="handleReset">重置</el-button>
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
+          </div>
+        </el-popover>
+      </div>
+      <slot name="btn"></slot>
+    </div>
+    <div v-if="slots.footer" class="filter-footer mt-14px">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  // 注意 在使用 el-select 或 el-date-picker 等组件时，需要在组件上添加 :teleported="false" 属性，
+  // 否则会出现弹窗失去焦点关闭的情况
+  import { useSlots, ref, getCurrentInstance } from 'vue'
+  import { Search, ArrowDown, Refresh } from '@element-plus/icons-vue'
+  const slots = useSlots()
+  const { proxy } = getCurrentInstance() as any
+  const popoverRef = ref()
+  const props = defineProps({
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    btn: {
+      //是否显示按钮
+      type: Boolean,
+      default: true,
+    },
+    isShowReset: {
+      //是否显示重置按钮
+      type: Boolean,
+      default: true,
+    },
+    popoverWidth: {
+      type: Number,
+      default: 350,
+    },
+    searchBtnMarginLeft: {
+      //搜索按钮是否有做边距
+      type: Boolean,
+      default: false,
+    },
+  })
+  const emits = defineEmits<{
+    (event: 'search'): void
+    (event: 'reset'): void
+  }>()
+  if (!proxy.$parent?.resetFields) {
+    console.error('QueryFilters必须嵌套在 ElForm 中才能正常使用')
+  }
+  const handleReset = () => {
+    if (props.loading) return
+    proxy.$parent?.resetFields()
+    emits('reset')
+    popoverRef.value?.hide()
+  }
+  const handleSearch = () => {
+    if (props.loading) return
+    emits('search')
+    popoverRef.value?.hide()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .filter-wrap {
+    background-color: #ffffff;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    padding: 12px;
+    .operate-wrap {
+      border-bottom: 1px solid #e6e8ed;
+    }
+    :deep(.el-form-item) {
+      margin-bottom: 0 !important;
+      align-items: flex-start;
+    }
+    .kl-filter-btns {
+      display: inline-flex;
+    }
+  }
+  :deep(.el-divider--horizontal) {
+    margin: 12px 0 !important;
+  }
+</style>