diff --git a/src/api/DraftApi.ts b/src/api/DraftApi.ts
new file mode 100644
index 0000000..837806f
--- /dev/null
+++ b/src/api/DraftApi.ts
@@ -0,0 +1,52 @@
+import { api } from 'src/boot/axios';
+import { PageQueryDto } from './ApiCommon';
+
+const DraftUriBase = '/api/draft';
+
+export class PagingQueryParams extends PageQueryDto {
+  name?: string;
+}
+
+/**
+ * 分页查询用户信息
+ * @param params
+ * @returns
+ */
+export async function pageQuery(params: PagingQueryParams) {
+  const response = await api.get(`${DraftUriBase}/paging`, {
+    params: params,
+  });
+  return response.data;
+}
+
+/**
+ * 创建草稿
+ * @param params
+ * @returns
+ */
+export async function createDraft(draftData: {
+  name: string;
+}): Promise<string> {
+  const response = await api.post(`${DraftUriBase}/create`, draftData);
+  return response.data;
+}
+
+/**
+ * 删除草稿
+ * @param id 草稿id
+ */
+export async function deleteDraft(id: string) {
+  return await api.delete(`${DraftUriBase}/delete/${id}`);
+}
+
+/**
+ * 草稿图发布
+ * @param id 草稿id
+ */
+export async function publishDraft(data: {
+  layoutId: string;
+  name: string;
+  overwrite?: boolean;
+}) {
+  return await api.post(`${DraftUriBase}/publish`, data);
+}
diff --git a/src/pages/DraftManage.vue b/src/pages/DraftManage.vue
new file mode 100644
index 0000000..9dd8110
--- /dev/null
+++ b/src/pages/DraftManage.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="草稿图"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      :filter="filter"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:top-right>
+        <q-input
+          dense
+          debounce="1000"
+          v-model="filter.name"
+          label="名称"
+        ></q-input>
+        <q-btn flat round color="primary" icon="sym_o_search" />
+        <q-btn color="primary" label="新建" @click="createFormShow = true" />
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              :to="`/painting/${props.row.id}`"
+            />
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="发布"
+              @click="prePublish(props.row)"
+            />
+            <q-btn
+              color="red"
+              :disable="operateDisabled"
+              label="删除"
+              @click="deleteData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="createFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">新建草稿图</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input outlined label="名称" v-model="draftName" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="创建" @click="onCreate" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+    <q-dialog
+      v-model="publishFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">草稿发布</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input
+            outlined
+            disable
+            label="草稿名称"
+            v-model="publishForm.draftName"
+          />
+          <q-input outlined label="发布名称" v-model="publishForm.pubName" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn color="primary" label="发布" @click="publishGraphics" />
+          <q-btn label="取消" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import {
+  pageQuery,
+  publishDraft,
+  createDraft,
+  deleteDraft,
+} from '../api/DraftApi';
+
+const $q = useQuasar();
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'name',
+    label: '名称',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  { name: 'creator', label: '创建人', field: 'creator', align: 'center' },
+  {
+    name: 'createTime',
+    label: '创建时间',
+    field: 'createTime',
+    align: 'center',
+  },
+  {
+    name: 'updateTime',
+    label: '更新时间',
+    field: 'updateTime',
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const filter = reactive({
+  name: '',
+});
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+async function onRequest(props: any) {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  const filter = props.filter;
+
+  loading.value = true;
+  try {
+    let response = await pageQuery({
+      current: page,
+      size: rowsPerPage,
+      name: filter.name,
+    });
+    const pageData = response.data;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+const createFormShow = ref(false);
+const draftName = ref('');
+async function onCreate() {
+  operateDisabled.value = true;
+  try {
+    await createDraft({
+      name: draftName.value,
+    });
+    createFormShow.value = false;
+    tableRef.value.requestServerInteraction(); // 刷新列表
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error.message,
+    });
+  } finally {
+    operateDisabled.value = false;
+  }
+}
+
+const publishFormShow = ref(false);
+const publishForm = reactive({
+  id: '',
+  draftName: '',
+  pubName: '',
+  overwrite: true,
+});
+function prePublish(row: any) {
+  publishFormShow.value = true;
+  publishForm.id = row.id;
+  publishForm.draftName = row.name;
+  publishForm.pubName = row.name;
+}
+
+async function publishGraphics() {
+  try {
+    await publishDraft({
+      layoutId: publishForm.id,
+      name: publishForm.pubName,
+      overwrite: publishForm.overwrite,
+    });
+    publishFormShow.value = false;
+    $q.notify({
+      type: 'positive',
+      message: '发布成功',
+    });
+  } catch (error: any) {
+    $q.notify({
+      type: 'negative',
+      message: error,
+    });
+  }
+}
+
+async function deleteData(row: any) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除草稿图 "${row.name}" 吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteDraft(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message,
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+</script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 465e233..e351f41 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -19,6 +19,18 @@ const routes: RouteRecordRaw[] = [
     name: 'register',
     component: () => import('pages/UserRegister.vue'),
   },
+  {
+    path: '/dataManage',
+    name: 'dataManage',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: 'draft',
+        name: 'draft',
+        component: () => import('pages/DraftManage.vue'),
+      },
+    ],
+  },
 
   // Always leave this as last one,
   // but you can also remove it