feat: 完成会员消息触达模块页面与交互

apps/web-antd/src/views/member/message-reach/components/MessageTemplateToolbar.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
+import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';
+
+import { Button, Input, Select } from 'ant-design-vue';
+
+import { MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS } from '../composables/message-reach-page/constants';
+
+defineProps<{
+  canManage: boolean;
+  filters: MessageTemplateFilterForm;
+}>();
+
+const emit = defineEmits<{
+  (event: 'create'): void;
+  (event: 'search'): void;
+  (event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
+  (event: 'update:keyword', value: string): void;
+}>();
+
+function handleCategoryChange(value: unknown) {
+  emit(
+    'update:category',
+    String(value || '') as '' | MemberMessageTemplateCategory,
+  );
+  emit('search');
+}
+</script>
+
+<template>
+  <div class="mmr-toolbar">
+    <Select
+      class="mmr-select"
+      :value="filters.category || ''"
+      :options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
+      @update:value="(value) => handleCategoryChange(value)"
+    />
+
+    <Input
+      class="mmr-keyword-input"
+      :value="filters.keyword"
+      placeholder="搜索模板名称"
+      allow-clear
+      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
+      @press-enter="emit('search')"
+    />
+
+    <span class="mmr-spacer"></span>
+
+    <Button type="primary" :disabled="!canManage" @click="emit('create')">
+      新建模板
+    </Button>
+  </div>
+</template>