diff --git a/src/api/sendmail/index.ts b/src/api/sendmail/index.ts
new file mode 100644
index 0000000..e243fb0
--- /dev/null
+++ b/src/api/sendmail/index.ts
@@ -0,0 +1,19 @@
+import { XjrSmsPageModel, XjrSmsPageParams, XjrSmsPageResult } from './model/SmsModel';
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+  sendmail = '/mail/send',
+}
+
+export async function sendmail(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.sendmail,
+      data:params
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
\ No newline at end of file
diff --git a/src/api/sms/index.ts b/src/api/sms/index.ts
new file mode 100644
index 0000000..63a3225
--- /dev/null
+++ b/src/api/sms/index.ts
@@ -0,0 +1,19 @@
+import { XjrSmsPageModel, XjrSmsPageParams, XjrSmsPageResult } from './model/SmsModel';
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+  sendSms = '/sms/send',
+}
+
+export async function sendSms(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<boolean>(
+    {
+      url: Api.sendSms,
+      params: { mobile: params.mobile, message: params.message },
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
\ No newline at end of file
diff --git a/src/views/sendmail/index.vue b/src/views/sendmail/index.vue
new file mode 100644
index 0000000..979b956
--- /dev/null
+++ b/src/views/sendmail/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="p-4 bg-white h-full">
+    <div class="pb-4 text-xl">{{ t('邮件发送') }}</div>
+    <div class="step1-form">
+      <a-form
+        :key="formKey"
+        :model="formState"
+        name="basic"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 20 }"
+        autocomplete="off"
+        @finish="onFinish"
+        @finish-failed="onFinishFailed"
+      >
+        <div class="flex items-center header-title">
+          <div class="node-icon"></div>
+          <div class="text-base">{{ t('基本信息') }}</div>
+        </div>
+        <a-form-item
+          :label="t('邮件标题')"
+          name="title"
+     
+        >
+          <a-input v-model:value="formState.title" :placeholder="t('请输入邮件标题')" />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('邮件内容')"
+          name="plain"
+
+        >
+          <a-input v-model:value="formState.plain" :placeholder="t('请输入邮件内容')" />
+        </a-form-item>
+   
+        <a-form-item
+          :label="t('接收人姓名')"
+          name="name"
+
+        >
+          <a-input v-model:value="formState.name" :placeholder="t('请输入接收人姓名')" />
+        </a-form-item>
+   
+        <a-form-item
+          :label="t('接收人邮件')"
+          name="mail"
+
+        >
+          <a-input v-model:value="formState.mail" :placeholder="t('请输入接收人邮件')" />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 10, span: 24 }">
+          <!-- <a-button type="default" html-type="reset">{{ t('重置') }}</a-button> -->
+          <a-button type="primary" html-type="submit" class="ml-4">{{ t('提交') }}</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  // import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { sendmail } from '/@/api/sendmail';
+
+  const { t } = useI18n();
+  const { notification } = useMessage();
+
+  interface FormState {
+    title?: string;
+    plain?: string;
+    mail?: string;
+    name?: string
+  }
+
+  let formState = reactive<FormState>({});
+  const formKey = ref(0);
+  const id = ref();
+  onMounted(() => {
+    formState = {}
+  });
+  const onFinish = (values: any) => {
+    // console.log('------>', values)
+    // console.log('------>', formState)
+    //let params = values;
+    //params.id = id.value;
+    let params =  {
+      title: formState.title,
+      plain: formState.plain,
+      to: [{
+        name: formState.name,
+        mail: formState.mail
+      }]
+    }
+    sendmail(params).then((res) => {
+      if (res) {
+        notification.success({
+          message: t('提示'),
+          description: t('修改成功'),
+        });
+      } else {
+        notification.success({
+          message: t('提示'),
+          description: t('修改失败'),
+        });
+      }
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+</script>
+<style>
+  .header-title {
+    height: 40px;
+    font-size: 16px;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 12px;
+  }
+
+  .node-icon {
+    width: 6px;
+    height: 18px;
+    background-color: #5e95ff;
+    margin-right: 8px;
+  }
+</style>
diff --git a/src/views/sms/index.vue b/src/views/sms/index.vue
new file mode 100644
index 0000000..c12fac6
--- /dev/null
+++ b/src/views/sms/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="p-4 bg-white h-full">
+    <div class="pb-4 text-xl">{{ t('短信发送') }}</div>
+    <div class="step1-form">
+      <a-form
+        :key="formKey"
+        :model="formState"
+        name="basic"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 20 }"
+        autocomplete="off"
+        @finish="onFinish"
+        @finish-failed="onFinishFailed"
+      >
+        <div class="flex items-center header-title">
+          <div class="node-icon"></div>
+          <div class="text-base">{{ t('基本信息') }}</div>
+        </div>
+        <a-form-item
+          :label="t('收件人手机号')"
+          name="mobile"
+     
+        >
+          <a-input v-model:value="formState.mobile" :placeholder="t('请输入收件人手机号')" />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('短信内容')"
+          name="message"
+
+        >
+          <a-input v-model:value="formState.message" :placeholder="t('请输入短信内容')" />
+        </a-form-item>
+   
+   
+        <a-form-item :wrapper-col="{ offset: 10, span: 24 }">
+          <!-- <a-button type="default" html-type="reset">{{ t('重置') }}</a-button> -->
+          <a-button type="primary" html-type="submit" class="ml-4">{{ t('提交') }}</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, reactive, ref } from 'vue';
+
+  import { useI18n } from '/@/hooks/web/useI18n';
+  // import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  import { sendSms } from '/@/api/sms';
+
+  const { t } = useI18n();
+  const { notification } = useMessage();
+
+  interface FormState {
+    mobile?: string;
+    message?: string;
+  }
+
+  let formState = reactive<FormState>({});
+  const formKey = ref(0);
+  const id = ref();
+  onMounted(() => {
+    formState = {}
+  });
+  const onFinish = (values: any) => {
+    // console.log('------>', values)
+    // console.log('------>', formState)
+    let params = values;
+    params.id = id.value;
+    sendSms(formState).then((res) => {
+      if (res) {
+        notification.success({
+          message: t('提示'),
+          description: t('修改成功'),
+        });
+      } else {
+        notification.success({
+          message: t('提示'),
+          description: t('修改失败'),
+        });
+      }
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+</script>
+<style>
+  .header-title {
+    height: 40px;
+    font-size: 16px;
+    color: #333;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 12px;
+  }
+
+  .node-icon {
+    width: 6px;
+    height: 18px;
+    background-color: #5e95ff;
+    margin-right: 8px;
+  }
+</style>