first commit

src/components/BaseChart.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+import type { EChartsOption } from 'echarts'
+
+const props = withDefaults(
+  defineProps<{
+    option: EChartsOption
+    height?: string
+  }>(),
+  {
+    height: '300px',
+  },
+)
+
+const chartRef = ref<HTMLDivElement>()
+let chart: echarts.ECharts | null = null
+let resizeObserver: ResizeObserver | null = null
+
+function render() {
+  if (!chart) return
+  chart.setOption(props.option, true)
+}
+
+onMounted(() => {
+  if (!chartRef.value) return
+  chart = echarts.init(chartRef.value)
+  render()
+  resizeObserver = new ResizeObserver(() => chart?.resize())
+  resizeObserver.observe(chartRef.value)
+})
+
+watch(
+  () => props.option,
+  () => render(),
+  { deep: true },
+)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  chart?.dispose()
+  chart = null
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="base-chart" :style="{ height }"></div>
+</template>
+
+<style scoped>
+.base-chart {
+  width: 100%;
+}
+</style>

src/components/PaginationBar.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    page: number
+    pageSize: number
+    total: number
+  }>(),
+  {
+    page: 1,
+    pageSize: 10,
+    total: 0,
+  },
+)
+
+const emit = defineEmits<{
+  'update:page': [value: number]
+  'update:pageSize': [value: number]
+  change: []
+}>()
+
+const currentPage = computed({
+  get: () => props.page,
+  set: (val: number) => emit('update:page', val),
+})
+
+const currentSize = computed({
+  get: () => props.pageSize,
+  set: (val: number) => emit('update:pageSize', val),
+})
+
+function handleChange() {
+  emit('change')
+}
+</script>
+
+<template>
+  <div class="pagination-bar">
+    <span class="total-text">共 {{ total }} 条</span>
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="currentSize"
+      :total="total"
+      :page-sizes="[10, 20, 30, 50]"
+      background
+      layout="sizes, prev, pager, next, jumper"
+      @current-change="handleChange"
+      @size-change="handleChange"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.total-text {
+  font-size: 13px;
+  color: #9aa3c0;
+}
+</style>

src/components/SearchFormCard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Search, Refresh } from '@element-plus/icons-vue'
+
+const emit = defineEmits<{
+  search: []
+  reset: []
+}>()
+</script>
+
+<template>
+  <div class="search-card">
+    <div class="search-fields">
+      <slot />
+    </div>
+    <div class="search-actions">
+      <el-button type="primary" :icon="Search" @click="emit('search')">查询</el-button>
+      <el-button :icon="Refresh" @click="emit('reset')">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-card {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(30, 36, 56, 0.05);
+  padding: 18px 20px;
+  margin-bottom: 16px;
+}
+
+.search-fields {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px 16px;
+  align-items: center;
+}
+
+.search-fields :deep(.el-input),
+.search-fields :deep(.el-select) {
+  width: 200px;
+}
+
+.search-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 10px;
+}
+</style>