feat: sse demo

CHANGELOG.md

@@ -14,6 +14,7 @@
 - 字典管理 关闭租户不应显示`同步租户字典`按钮
 - 登录日志 漏掉了登录日志日期查询
 - 登出相关逻辑在并发(非await)情况下重复执行的问题
+- VxeTable在开启/关闭查询表单时 需要使用不同的padding
 
 **OTHERS**
 

apps/web-antd/src/views/演示使用自行删除/sse/api.ts

@@ -0,0 +1,26 @@
+import { requestClient } from '#/api/request';
+
+enum Api {
+  list = '/system/sse/list',
+  send = '/system/sse/send',
+  sendAll = '/system/sse/sendAll',
+  status = '/system/sse/status',
+}
+
+export function sseStatus() {
+  return requestClient.get<boolean>(Api.status);
+}
+
+export function sseSendAll(message: string) {
+  return requestClient.postWithMsg<void>(`${Api.sendAll}?message=${message}`);
+}
+
+export function sseSendByUserId(userId: string, message: string) {
+  return requestClient.postWithMsg<void>(
+    `${Api.send}/${userId}?message=${message}`,
+  );
+}
+
+export function sseList() {
+  return requestClient.get<any>(Api.list);
+}

apps/web-antd/src/views/演示使用自行删除/sse/index.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Space } from 'ant-design-vue';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+
+import { sseList } from './api';
+import sendMsgModal from './send-msg-modal.vue';
+
+const gridOptions: VxeGridProps = {
+  columns: [
+    {
+      title: '用户ID',
+      field: 'userId',
+    },
+    {
+      title: '用户账号',
+      field: 'userName',
+    },
+    {
+      title: '用户昵称',
+      field: 'nickName',
+    },
+    {
+      title: '用户部门',
+      field: 'deptName',
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: '操作',
+      width: 180,
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        const list = await sseList();
+        return {
+          rows: list,
+        };
+      },
+    },
+  },
+  rowConfig: {
+    isHover: false,
+    keyField: 'userId',
+    height: 48,
+  },
+  id: 'sse-index',
+};
+
+const [BasicTable] = useVbenVxeGrid({
+  gridOptions,
+});
+
+const [SendMsgModal, modalApi] = useVbenModal({
+  connectedComponent: sendMsgModal,
+});
+
+function handleSendAll() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+function handleSendSingle(userId: string) {
+  modalApi.setData({ userId });
+  modalApi.open();
+}
+</script>
+
+<template>
+  <Page
+    :auto-content-height="true"
+    description="这这里可以进行[Server-sent events]测试 非官方功能"
+    title="SSE测试"
+  >
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">在线用户列表</span>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button @click="handleSendAll">发送全体消息</a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <ghost-button @click="handleSendSingle(row.userId)">
+          发送消息
+        </ghost-button>
+      </template>
+    </BasicTable>
+    <SendMsgModal />
+  </Page>
+</template>

apps/web-antd/src/views/演示使用自行删除/sse/send-msg-modal.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter';
+
+import { sseSendAll, sseSendByUserId } from './api';
+
+const currentUserId = ref<string | undefined>(undefined);
+const title = computed(() => {
+  return currentUserId.value ? '发送指定消息' : '发送全体消息';
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  onConfirm: handleSubmit,
+  onOpenChange: (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    const data = modalApi.getData() as { userId: string | undefined };
+    currentUserId.value = data.userId;
+  },
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  layout: 'vertical',
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  schema: [
+    {
+      component: 'Textarea',
+      label: '消息内容',
+      fieldName: 'content',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function handleSubmit() {
+  try {
+    modalApi.modalLoading(true);
+
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const { content } = await formApi.getValues();
+
+    await (currentUserId.value
+      ? sseSendByUserId(currentUserId.value, content)
+      : sseSendAll(content));
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.modalLoading(false);
+  }
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    :title="title"
+  >
+    <BasicForm />
+  </BasicModal>
+</template>

packages/styles/src/antd/index.css

@@ -80,8 +80,9 @@ vxe表格右上角toolbar和左边元素的间距
 
 /**
 覆盖vxe-table的toolbar样式 由于默认已经有了padding 需要去除上边的padding
+需要判断是否开启查询表单
 */
-.vxe-toolbar {
+.vxe-grid:has(.vxe-grid--form-wrapper form) .vxe-toolbar {
   padding: 0 0 0.6em !important;
 }