diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index cbb078278504d32424a56d7a996ad38c186e81de..f4c7dc123768acbb99130b86f651252997663dde 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -146,6 +146,7 @@ onMounted(() => {
       :align="item.align"
       :formatter="item.format"
       show-overflow-tooltip
+      :fixed="item.fixed"
     ></el-table-column>
     <el-table-column
       v-if="tableActionbar"
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index 4df432ee5b0d32d4f7b65e6dd4478e32d204e865..9daf164e7a14dcc9a04a574486e994049f08f44d 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -178,4 +178,8 @@ const handleCustomClick = (item: any) => {
 .toobar {
   margin-bottom: 10px;
 }
+
+.el-upload {
+  display: inline-flex;
+}
 </style>
diff --git a/src/types/table.ts b/src/types/table.ts
index acb40b682440de68932609680e8fd23c9877a7c8..b6f88e4242939b09bcbdc7045861b284e6ee8ec3 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -5,6 +5,7 @@ export interface Column {
   type?: string
   align?: string
   slot?: boolean
+  fixed?: boolean
   format?(row: any, column?: any, cellValue?: any, index?: number): void
 }
 export interface Btns {
diff --git a/src/views/resource/attachment/index.vue b/src/views/resource/attachment/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..da131b5a9a71dc0db6ec4a493b0a0fa17024f7b6
--- /dev/null
+++ b/src/views/resource/attachment/index.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增角色',
+  edit: '编辑角色',
+  detail: '角色详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '角色编号',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '角色编号',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '角色名称',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '角色名称',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '名称',
+    vModel: 'userName',
+    placeholder: '名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenAddButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  importButtonName: '上传',
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '上传时间',
+    prop: 'roleName',
+  },
+  {
+    label: '名称',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '原文件名称',
+    prop: 'roleName',
+  },
+  {
+    label: '类型',
+    prop: 'roleName',
+  },
+  {
+    label: '大小',
+    prop: 'roleName',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+
+// 上传
+const upload = ref(null)
+
+const handleImport = (done: any) => {
+  // done()
+  //  this.$refs['upload'].$refs['upload-inner'].handleClick()
+
+  //  this.$refs['centerIcon'][0].$children[0].$refs.input.click()
+  // el-upload__input
+  if (upload.value) {
+    debugger
+    upload.value.handleStart()
+  }
+}
+
+const submitUpload = () => {
+  uploadRef.value!.submit()
+}
+</script>
+<template>
+  <el-upload
+    ref="uploadRef"
+    class="upload-demo"
+    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+    :auto-upload="true"
+  >
+    <template #trigger>
+      <el-button type="primary">上传</el-button>
+    </template>
+  </el-upload>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+    @on-import="handleImport"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/config/index.vue b/src/views/resource/sms/config/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fcfcce51fdc51f8269708c97d79913ffd3dd7388
--- /dev/null
+++ b/src/views/resource/sms/config/index.vue
@@ -0,0 +1,243 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增短信配置',
+  edit: '编辑短信配置',
+  detail: '短信配置详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '任务名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '任务名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '短信签名',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '短信签名',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '短信模板',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '短信模板',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '定时发送',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '定时发送',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '发送号码',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '发送号码',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '任务名称',
+    vModel: 'userName',
+    placeholder: '任务名称',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '任务名称',
+    prop: 'roleName',
+    fixed: true,
+    width: '200',
+  },
+  {
+    label: '短信签名',
+    prop: 'roleName',
+    width: '200',
+  },
+  {
+    label: '短信模板',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '定时发送',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '发送号码',
+    prop: 'roleId',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    /*  {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    }, */
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/signature/index.vue b/src/views/resource/sms/signature/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3e0405bd1118e8b866943a5680e57f46e2312ed1
--- /dev/null
+++ b/src/views/resource/sms/signature/index.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增签名管理',
+  edit: '编辑签名管理',
+  detail: '签名管理详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '签名名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名用途',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名用途',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名内容',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名内容',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明上传',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明上传',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '联系人',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '联系人',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    vModel: 'userName',
+    placeholder: '签名名称',
+  },
+  {
+    label: '签名类型',
+    vModel: 'userName',
+    placeholder: '签名类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '签名名称',
+    prop: 'roleName',
+  },
+  {
+    label: '签名用途',
+    prop: 'roleName',
+  },
+  {
+    label: '签名类型',
+    prop: 'roleName',
+  },
+  {
+    label: '签名内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明类型',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明上传',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/sms/template/index.vue b/src/views/resource/sms/template/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd533d268e2c5dd61491740ba2152d7c1eca5f81
--- /dev/null
+++ b/src/views/resource/sms/template/index.vue
@@ -0,0 +1,266 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增普通存储',
+  edit: '编辑普通存储',
+  detail: '普通存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '签名名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名用途',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名用途',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '签名内容',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '签名内容',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明类型',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '证明上传',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '证明上传',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '联系人',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '联系人',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '模板名称',
+    vModel: 'userName',
+    placeholder: '模板名称',
+  },
+  {
+    label: '短信类型',
+    vModel: 'userName',
+    placeholder: '短信类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '模板名称',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: '短信类型',
+    prop: 'roleName',
+  },
+  {
+    label: '短信内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '申请说明',
+    prop: 'roleId',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/storage/general/index.vue b/src/views/resource/storage/general/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71f7ad60df9301a87a60e2ce3de2bf0b17bd4ef2
--- /dev/null
+++ b/src/views/resource/storage/general/index.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增普通存储',
+  edit: '编辑普通存储',
+  detail: '普通存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: 'FTP地址',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: 'FTP地址',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'FTP账号',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: 'FTP账号',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'FTP密码',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: 'FTP密码',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    vModel: 'userName',
+    placeholder: '空间名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: 'FTP地址',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: 'FTP账号',
+    prop: 'roleName',
+  },
+  {
+    label: 'FTP密码',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '状态',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/resource/storage/object/index.vue b/src/views/resource/storage/object/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7754329bc477db5c4028e022f72776589a492a64
--- /dev/null
+++ b/src/views/resource/storage/object/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UploadInstance } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Role } from '@/types/role'
+import { FormItem } from '@/types/form'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
+import { SearchUser } from '@/types/user'
+
+const uploadRef = ref<UploadInstance>()
+
+const dataList = reactive<Array<Role>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增对象存储',
+  edit: '编辑对象存储',
+  detail: '对象存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    labelWidth: '90px',
+    vModel: 'roleId',
+    placeholder: '空间名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '类型',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: '类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'accessKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'accessKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'secretKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'secretKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    vModel: 'userName',
+    placeholder: '空间名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '空间名称',
+    prop: 'roleName',
+  },
+  {
+    label: '类型',
+    prop: 'roleName',
+  },
+  {
+    label: 'accessKey',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: 'secretKey',
+    prop: 'roleName',
+  },
+  {
+    label: '状态',
+    prop: 'roleName',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('左边自定义按钮click', item)
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        console.log('右边自定义按钮click', item)
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 加载数据
+ */
+const load = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    :search-form-items="searchFormItems"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
+    @on-load="load"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>