feat(feature): add event feature func

src/api/dashboard/event.ts

@@ -1,6 +1,6 @@
 import Axios from "@/api";
-import { EditableEventType, EventType } from "@/types/event";
-import { List } from "@/types/Request";
+import type { EditableEventType, EventType } from "@/types/event";
+import type { List } from "@/types/Request";
 
 export async function getEventList(params: {
   pageSize: number;

src/api/dashboard/feature.ts

@@ -0,0 +1,34 @@
+import Axios from "@/api";
+import type {
+  CrateFeatureType,
+  EditableFeatureType,
+  FeatureType,
+} from "@/types/feature";
+import type { List } from "@/types/Request";
+
+export async function getFeatureList(params: {
+  pageSize: number;
+  current: number;
+}) {
+  const res = await Axios.get<List<FeatureType>>("/event/feature", {
+    params,
+  });
+
+  return res.data;
+}
+
+export async function createFeature(feature: CrateFeatureType) {
+  const res = await Axios.post<FeatureType>("/event/feature/create", {
+    feature,
+  });
+
+  return res.data;
+}
+
+export async function updateFeature(feature: EditableFeatureType) {
+  const res = await Axios.post<FeatureType>("/event/feature/update", {
+    feature,
+  });
+
+  return res.data;
+}

src/components/Error/index.tsx

@@ -6,7 +6,7 @@ export default function LoadError() {
   const navigate = useNavigate();
 
   return (
-    <DefaultContainer className="shadow sticky top-0 z-10">
+    <DefaultContainer className="sticky top-0 z-10">
       <Container className="flex flex-col items-center justify-center">
         <Title className="text-slate-700">发生了错误...</Title>
         <Text c="dimmed" size="lg" ta="center">

src/consts/event.ts

@@ -15,3 +15,11 @@
   [EventScale.Large]: "大型(Large)",
   [EventScale.Mega]: "超大型(Mega)",
 };
+
+export const EventStatusColor = {
+  [EventStatus.EventScheduled]: "blue",
+  [EventStatus.EventPostponed]: "gray",
+  [EventStatus.EventRescheduled]: "orange",
+  [EventStatus.EventMovedOnline]: "green",
+  [EventStatus.EventCancelled]: "red",
+};

src/pages/dashboard/cacheManager/index.tsx

@@ -6,13 +6,13 @@ import { IconRefresh } from '@tabler/icons-react';
 export default function CacheManager() {
   return (
     <>
-      <DefaultContainer className="shadow sticky top-0 z-10">
+      <DefaultContainer className="sticky top-0 z-10">
         <Group justify="space-between">
           <Title order={2}>缓存刷新控制台</Title>
         </Group>
       </DefaultContainer>
 
-      <DefaultContainer className="mt-4 shadow">
+      <DefaultContainer className="mt-4">
         <SimpleGrid cols={4}>
           <Button
             leftSection={<IconRefresh size={16} stroke={1.5} />}

src/pages/dashboard/event/components/EventList/index.tsx

@@ -1,10 +1,14 @@
 import { Space, Table, Tag } from 'antd';
 import dayjs from 'dayjs';
-import { ActionIcon, Button, Menu, rem, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Button, Menu, rem, Tooltip } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
 import type { ColumnsType } from 'antd/es/table';
-import { EventScaleLabel, EventStatusLabel } from '@/consts/event';
+import {
+  EventScaleLabel,
+  EventStatusColor,
+  EventStatusLabel,
+} from '@/consts/event';
 import type { EventType } from '@/types/event';
 import { useMutation } from '@tanstack/react-query';
 import { cleanPageCache } from '@/api/dashboard/cache';
@@ -49,6 +53,11 @@
   const navigate = useNavigate();
 
   const columns: ColumnsType<EventType> = [
+    {
+      title: '展商',
+      dataIndex: ['organization', 'name'],
+      key: 'organizationName',
+    },
     {
       title: '展会名称',
       dataIndex: 'name',
@@ -62,17 +71,22 @@
         <Space>
           <Tag>
             {dayjs(record.startAt).format('YYYY/MM/DD')}-
-            {dayjs(record.endAt).format('YYYY/MM/DD')}
+            {dayjs(record.endAt).format('MM/DD')}
           </Tag>
         </Space>
       ),
     },
     {
       title: '状态',
       dataIndex: 'status',
-      width: 100,
       key: 'status',
-      render: (status) => EventStatusLabel[status],
+      render: (status) => (
+        <Tooltip label={EventStatusLabel[status]}>
+          <Badge color={EventStatusColor[status]}>
+            {EventStatusLabel[status]}
+          </Badge>
+        </Tooltip>
+      ),
     },
     {
       title: '规模',
@@ -85,11 +99,7 @@
       dataIndex: ['addressExtra', 'city'],
       key: 'city',
     },
-    {
-      title: '展商',
-      dataIndex: ['organization', 'name'],
-      key: 'organizationName',
-    },
+
     {
       title: '地址',
       dataIndex: 'address',

src/pages/dashboard/event/edit/index.tsx

@@ -27,6 +27,8 @@ import {
   Title,
   Text,
   Center,
+  TagsInput,
+  MultiSelect,
 } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { useForm, zodResolver } from '@mantine/form';
@@ -49,6 +51,7 @@ import { Spin } from 'antd';
 import UploadImage from '@/components/UploadImage';
 import DefaultContainer from '@/components/Container';
 import LoadError from '@/components/Error';
+import { getFeatureList } from '@/api/dashboard/feature';
 
 export default function EventEditPage() {
   const { eventId } = useParams();
@@ -61,6 +64,7 @@ export default function EventEditPage() {
     queryFn: () => getEventDetail({ id: eventId as string }),
     refetchOnWindowFocus: false,
     enabled: !!eventId,
+    gcTime: 0,
   });
 
   if (isError) {
@@ -108,7 +112,8 @@ function EventEditorContent({ event }: { event?: EventType }) {
       citySlug: event?.addressExtra?.citySlug || '',
       address: event?.address || '',
       addressExtra: event?.addressExtra || { city: null },
-      features: event?.features || {},
+      features: event?.features || { self: [] },
+      commonFeatures: event?.commonFeatures?.map((f) => f.id) || [],
       source: event?.source || '',
       thumbnail: event?.thumbnail || 'fec-event-default-cover.png',
       poster: event?.poster?.all || [],
@@ -139,15 +144,27 @@ function EventEditorContent({ event }: { event?: EventType }) {
     queryFn: () => getAllOrganizations({ search: '' }),
   });
 
-  const organizationSelectOptions = organizationList?.map((item) => ({
-    label: item.name,
-    value: item.id,
-  }));
+  const { data: featureList } = useQuery({
+    queryKey: ['feature-list'],
+    queryFn: () => getFeatureList({ pageSize: 100, current: 1 }),
+  });
+
+  const organizationSelectOptions =
+    organizationList?.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })) || [];
 
   const selectedOrganization = organizationList?.find(
     (item) => item.id === form.values.organization,
   );
 
+  const featureSelectOptions =
+    featureList?.records.map((item) => ({
+      label: item.name,
+      value: item.id,
+    })) || [];
+
   const generateEventSlug = () => {
     const selectedYear = form.values.startAt?.getFullYear();
     const selectedMonth = form.values.startAt
@@ -186,7 +203,7 @@ function EventEditorContent({ event }: { event?: EventType }) {
           message: '更新展会数据成功',
           color: 'teal',
         });
-        navigate(-1);
+        navigate('/dashboard/event');
       }
       console.log('update res', res);
     } else {
@@ -198,11 +215,13 @@ function EventEditorContent({ event }: { event?: EventType }) {
           message: '创建展会数据成功',
           color: 'teal',
         });
-        navigate(-1);
+        navigate('/dashboard/event');
       }
     }
   };
 
+  console.log(form.values);
+
   return (
     <Box mx="auto">
       <form onSubmit={form.onSubmit(handleSubmit)}>
@@ -304,17 +323,15 @@ function EventEditorContent({ event }: { event?: EventType }) {
             </Group>
 
             <Group gap="xs" grow>
-              <NumberInput
+              <TextInput
                 label="经度"
                 placeholder="一般是三位整数"
-                hideControls
                 {...form.getInputProps('addressLon')}
               />
 
-              <NumberInput
+              <TextInput
                 label="纬度"
                 placeholder="一般是两位整数"
-                hideControls
                 {...form.getInputProps('addressLat')}
               />
             </Group>
@@ -373,6 +390,19 @@ function EventEditorContent({ event }: { event?: EventType }) {
               {...form.getInputProps('scale')}
             />
 
+            <TagsInput
+              label="展会专属标签"
+              placeholder="请输入展会专属的标签"
+              {...form.getInputProps('features.self')}
+            />
+
+            <MultiSelect
+              label="展会公共标签"
+              placeholder="请选择展会共有的标签"
+              data={featureSelectOptions}
+              {...form.getInputProps('commonFeatures')}
+            />
+
             <TextInput
               // withAsterisk
               label="展会信源"
@@ -502,7 +532,7 @@ function EventEditorContent({ event }: { event?: EventType }) {
           </Stack>
         </Container>
 
-        <Container>
+        <Container fluid>
           <Group justify="flex-end" mt="md">
             <Button type="submit">提交</Button>
           </Group>

src/pages/dashboard/event/page.tsx

@@ -22,7 +22,7 @@ export default function EventPage() {
 
   return (
     <>
-      <DefaultContainer className="shadow sticky top-0 z-10">
+      <DefaultContainer className="sticky top-0 z-10">
         <Group justify="space-between">
           <Title order={2}>展会列表</Title>
 
@@ -37,7 +37,7 @@ export default function EventPage() {
         </Group>
       </DefaultContainer>
 
-      <div className="shadow-xl mt-4 p-4 rounded-xl bg-white">
+      <div className="shadow mt-4 p-4 rounded-xl bg-white">
         <EventList
           data={data || { total: 0, records: [] }}
           isPending={isPending}

src/pages/dashboard/feature/components/FeatureEditor/index.tsx

@@ -0,0 +1,92 @@
+import { createFeature, updateFeature } from '@/api/dashboard/feature';
+import type { CrateFeatureType, EditableFeatureType } from '@/types/feature';
+import { Button, Group, Modal, Textarea, TextInput } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+export default function FeatureEditor({
+  opened,
+  onClose,
+  editingFeature,
+}: {
+  opened: boolean;
+  onClose: () => void;
+  editingFeature: EditableFeatureType | null;
+}) {
+  return (
+    <>
+      <Modal opened={opened} onClose={onClose} title="标签编辑" centered>
+        {opened && (
+          <ModalComponent editingFeature={editingFeature} onClose={onClose} />
+        )}
+      </Modal>
+    </>
+  );
+}
+
+function ModalComponent({
+  editingFeature,
+  onClose,
+}: { editingFeature: EditableFeatureType | null; onClose: () => void }) {
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: {
+      name: editingFeature?.name || '',
+      category: editingFeature?.category || '',
+      description: editingFeature?.description || '',
+    },
+  });
+
+  const handleSubmit = async (value: CrateFeatureType) => {
+    if (editingFeature?.id) {
+      const res = await updateFeature({ ...value, id: editingFeature.id });
+      console.log(res);
+      notifications.show({
+        title: '更新成功',
+        message: '更新标签成功',
+        color: 'teal',
+      });
+      return onClose();
+    }
+    const res = await createFeature(value);
+    console.log(res);
+    notifications.show({
+      title: '创建成功',
+      message: '创建标签成功',
+      color: 'teal',
+    });
+    return onClose();
+  };
+
+  return (
+    <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+      <TextInput
+        withAsterisk
+        label="标签名称"
+        placeholder="请输入标签名称"
+        key={form.key('name')}
+        {...form.getInputProps('name')}
+      />
+
+      <TextInput
+        withAsterisk
+        label="标签分类"
+        placeholder="请输入标签类别"
+        key={form.key('category')}
+        {...form.getInputProps('category')}
+      />
+
+      <Textarea
+        label="标签简述"
+        description="标签简述可能会在未来展示于筛选设置中。"
+        placeholder="请输入标签简述"
+        key={form.key('description')}
+        {...form.getInputProps('description')}
+      />
+
+      <Group justify="flex-end" mt="md">
+        <Button type="submit">提交</Button>
+      </Group>
+    </form>
+  );
+}