我叫洪圣文

frontend/src/views/components/TimePeriodSearch/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="time-period-search">
+        <el-select class="time-period-search__unit" :model-value="unit" @update:model-value="handleUnitChange">
+            <el-option v-for="item in timePeriodUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-button
+            class="time-period-search__button"
+            :icon="ArrowLeft"
+            :title="`上一个${unitLabel}`"
+            @click="shiftPeriod(-1)"
+        />
+
+        <el-date-picker
+            class="time-period-search__picker"
+            :model-value="baseDate"
+            :type="getTimePeriodPickerType(props.unit)"
+            :format="getTimePeriodPickerFormat(props.unit)"
+            :clearable="false"
+            :editable="false"
+            :placeholder="`选择${unitLabel}`"
+            @update:model-value="handleDateChange"
+        />
+
+        <el-button
+            class="time-period-search__button"
+            :icon="ArrowRight"
+            :title="`下一个${unitLabel}`"
+            @click="shiftPeriod(1)"
+        />
+
+        <el-button
+            class="time-period-search__button"
+            :icon="Clock"
+            :title="`当前${unitLabel}`"
+            @click="setCurrentPeriod"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowLeft, ArrowRight, Clock } from '@element-plus/icons-vue'
+import {
+    getTimePeriodPickerFormat,
+    getTimePeriodPickerType,
+    resolveTimePeriodUnitLabel,
+    shiftTimePeriod,
+    timePeriodUnitOptions,
+    type TimePeriodUnit
+} from './timePeriod'
+
+defineOptions({
+    name: 'TimePeriodSearch'
+})
+
+const props = defineProps<{
+    unit: TimePeriodUnit
+    modelValue: Date | string | number
+}>()
+
+const emit = defineEmits<{
+    'update:unit': [value: TimePeriodUnit]
+    'update:modelValue': [value: Date]
+}>()
+
+const baseDate = computed(() => new Date(props.modelValue))
+const unitLabel = computed(() => resolveTimePeriodUnitLabel(props.unit))
+
+const handleUnitChange = (value: TimePeriodUnit) => {
+    emit('update:unit', value)
+}
+
+const handleDateChange = (value: Date | string | number | null) => {
+    if (!value) return
+    emit('update:modelValue', new Date(value))
+}
+
+const shiftPeriod = (offset: number) => {
+    emit('update:modelValue', shiftTimePeriod(props.unit, baseDate.value, offset))
+}
+
+const setCurrentPeriod = () => {
+    emit('update:modelValue', new Date())
+}
+</script>
+
+<style scoped lang="scss">
+.time-period-search {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 4px;
+}
+
+.time-period-search__unit {
+    width: 56px;
+    flex: 0 0 56px;
+}
+
+.time-period-search__picker {
+    width: 112px;
+    flex: 0 0 112px;
+}
+
+.time-period-search__button {
+    width: 28px;
+    flex: 0 0 28px;
+    padding: 8px 6px;
+}
+</style>