diff --git a/frontend/src/api/modules/test-plan/testPlan.ts b/frontend/src/api/modules/test-plan/testPlan.ts
index 231aa8125c..60ef9874db 100644
--- a/frontend/src/api/modules/test-plan/testPlan.ts
+++ b/frontend/src/api/modules/test-plan/testPlan.ts
@@ -1,6 +1,7 @@
 import MSR from '@/api/http/index';
 import {
   addTestPlanModuleUrl,
+  AddTestPlanUrl,
   DeleteTestPlanModuleUrl,
   GetTestPlanListUrl,
   GetTestPlanModuleCountUrl,
@@ -12,7 +13,7 @@ import {
 import type { CreateOrUpdateModule, UpdateModule } from '@/models/caseManagement/featureCase';
 import type { CommonList, MoveModules, TableQueryParams } from '@/models/common';
 import { ModuleTreeNode } from '@/models/common';
-import type { TestPlanItem } from '@/models/testPlan/testPlan';
+import type { AddTestPlanParams, TestPlanItem } from '@/models/testPlan/testPlan';
 
 // 获取模块树
 export function getTestPlanModule(params: TableQueryParams) {
@@ -48,3 +49,8 @@ export function getPlanModulesCounts(data: TableQueryParams) {
 export function getTestPlanList(data: TableQueryParams) {
   return MSR.post<CommonList<TestPlanItem>>({ url: GetTestPlanListUrl, data });
 }
+
+// 创建测试计划
+export function addTestPlan(data: AddTestPlanParams) {
+  return MSR.post({ url: AddTestPlanUrl, data });
+}
diff --git a/frontend/src/api/requrls/test-plan/testPlan.ts b/frontend/src/api/requrls/test-plan/testPlan.ts
index 96d2962709..4a7f8ec04b 100644
--- a/frontend/src/api/requrls/test-plan/testPlan.ts
+++ b/frontend/src/api/requrls/test-plan/testPlan.ts
@@ -12,3 +12,5 @@ export const DeleteTestPlanModuleUrl = '/test-plan/module/delete';
 export const GetTestPlanModuleCountUrl = '/test-plan/module/count';
 // 测试计划列表
 export const GetTestPlanListUrl = '/test-plan/page';
+// 创建测试计划
+export const AddTestPlanUrl = '/test-plan/add';
diff --git a/frontend/src/components/pure/ms-more-setting-collapse/index.vue b/frontend/src/components/pure/ms-more-setting-collapse/index.vue
new file mode 100644
index 0000000000..0b81c6a021
--- /dev/null
+++ b/frontend/src/components/pure/ms-more-setting-collapse/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <a-collapse v-model:active-key="moreSettingActive" :bordered="false" :show-expand-icon="false">
+    <a-collapse-item :key="1">
+      <template #header>
+        <MsButton
+          type="text"
+          @click="() => (moreSettingActive.length > 0 ? (moreSettingActive = []) : (moreSettingActive = [1]))"
+        >
+          {{ t('common.moreSetting') }}
+          <icon-down v-if="moreSettingActive.length > 0" class="text-rgb(var(--primary-5))" />
+          <icon-right v-else class="text-rgb(var(--primary-5))" />
+        </MsButton>
+      </template>
+      <div class="mt-[24px]">
+        <slot name="content"></slot>
+      </div>
+    </a-collapse-item>
+  </a-collapse>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const moreSettingActive = ref<number[]>([]);
+  function clearMoreSettingActive() {
+    moreSettingActive.value = [];
+  }
+
+  defineExpose({
+    clearMoreSettingActive,
+  });
+</script>
diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts
index f8627f47ea..e1ffb580d0 100644
--- a/frontend/src/locale/en-US/common.ts
+++ b/frontend/src/locale/en-US/common.ts
@@ -164,4 +164,6 @@ export default {
   'common.unExecute': 'Not executed',
   'common.pass': 'Pass',
   'common.unPass': 'Fail pass',
+  'common.belongModule': 'Belong module',
+  'common.moreSetting': 'More settings',
 };
diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts
index 43c190b75e..f2dd45eada 100644
--- a/frontend/src/locale/zh-CN/common.ts
+++ b/frontend/src/locale/zh-CN/common.ts
@@ -164,4 +164,6 @@ export default {
   'common.unExecute': '未执行',
   'common.pass': '通过',
   'common.unPass': '不通过',
+  'common.belongModule': '所属模块',
+  'common.moreSetting': '更多设置',
 };
diff --git a/frontend/src/models/testPlan/testPlan.ts b/frontend/src/models/testPlan/testPlan.ts
index cb605741c0..3e694923b4 100644
--- a/frontend/src/models/testPlan/testPlan.ts
+++ b/frontend/src/models/testPlan/testPlan.ts
@@ -1,3 +1,5 @@
+import { BatchApiParams } from '../common';
+
 // 计划分页
 export interface TestPlanItem {
   id?: string;
@@ -24,4 +26,31 @@ export interface ResourcesItem {
   status: boolean;
 }
 
+export interface AssociateCaseRequest extends BatchApiParams {
+  functionalSelectIds?: string[];
+  apiSelectIds?: string[];
+  apiCaseSelectIds?: string[];
+  apiScenarioSelectIds?: string[];
+}
+
+export interface AddTestPlanParams {
+  id?: string;
+  name: string;
+  projectId: string;
+  groupId?: string;
+  moduleId: string;
+  cycle?: number[];
+  plannedStartTime?: number;
+  plannedEndTime?: number;
+  tags: string[];
+  description?: string;
+  testPlanning: boolean; // 是否开启测试规划
+  automaticStatusUpdate: boolean; // 是否自定更新功能用例状态
+  repeatCase: boolean; // 是否允许重复添加用例
+  passThreshold: number;
+  type: string;
+  baseAssociateCaseRequest: AssociateCaseRequest;
+  groupOption?: boolean;
+}
+
 export default {};
diff --git a/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue b/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
index b509ec1c52..07dbc88df0 100644
--- a/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
+++ b/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
@@ -164,10 +164,7 @@
       if (isSetDefaultKey) {
         selectedNodeKeys.value = [caseTree.value[0].id];
       }
-      emits(
-        'init',
-        caseTree.value.map((e) => e.name)
-      );
+      emits('init', caseTree.value);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
diff --git a/frontend/src/views/test-plan/testPlan/createAndEditPlanDrawer.vue b/frontend/src/views/test-plan/testPlan/createAndEditPlanDrawer.vue
new file mode 100644
index 0000000000..b7503824c1
--- /dev/null
+++ b/frontend/src/views/test-plan/testPlan/createAndEditPlanDrawer.vue
@@ -0,0 +1,201 @@
+<template>
+  <MsDrawer
+    v-model:visible="innerVisible"
+    :title="form.id ? t('case.updateCase') : t('testPlan.testPlanIndex.createTestPlan')"
+    :width="800"
+    unmount-on-close
+    :ok-text="form.id ? 'common.update' : 'common.create'"
+    :save-continue-text="t('case.saveContinueText')"
+    :show-continue="!form.id"
+    :ok-loading="drawerLoading"
+    @confirm="handleDrawerConfirm(false)"
+    @continue="handleDrawerConfirm(true)"
+    @cancel="handleCancel"
+  >
+    <a-form ref="formRef" :model="form" layout="vertical">
+      <a-form-item
+        field="name"
+        :label="t('caseManagement.featureCase.planName')"
+        :rules="[{ required: true, message: t('testPlan.planForm.nameRequired') }]"
+        class="w-[732px]"
+      >
+        <a-input v-model="form.name" :max-length="255" :placeholder="t('testPlan.planForm.namePlaceholder')" />
+      </a-form-item>
+      <a-form-item field="description" :label="t('common.desc')" class="w-[732px]">
+        <a-textarea v-model:model-value="form.description" :placeholder="t('common.pleaseInput')" :max-length="1000" />
+      </a-form-item>
+      <a-form-item :label="t('common.belongModule')" class="w-[436px]">
+        <a-tree-select
+          v-model:modelValue="form.moduleId"
+          :data="props.moduleTree"
+          :field-names="{ title: 'name', key: 'id', children: 'children' }"
+          :tree-props="{
+            virtualListProps: {
+              height: 200,
+              threshold: 200,
+            },
+          }"
+          allow-search
+          :filter-tree-node="filterTreeNode"
+        >
+          <template #tree-slot-title="node">
+            <a-tooltip :content="`${node.name}`" position="tl">
+              <div class="inline-flex w-full">
+                <div class="one-line-text w-[240px] text-[var(--color-text-1)]">
+                  {{ node.name }}
+                </div>
+              </div>
+            </a-tooltip>
+          </template>
+        </a-tree-select>
+      </a-form-item>
+      <a-form-item
+        field="cycle"
+        :label="t('testPlan.planForm.planStartAndEndTime')"
+        asterisk-position="end"
+        class="w-[436px]"
+      >
+        <a-range-picker
+          v-model:model-value="form.cycle"
+          show-time
+          value-format="timestamp"
+          :separator="t('common.to')"
+          :time-picker-props="{
+            defaultValue: ['00:00:00', '00:00:00'],
+          }"
+        />
+      </a-form-item>
+      <a-form-item field="tags" :label="t('common.tag')" class="w-[436px]">
+        <MsTagsInput v-model:model-value="form.tags" :max-tag-count="10" :max-length="50" />
+      </a-form-item>
+      <MsMoreSettingCollapse>
+        <template #content>
+          <div v-for="item in switchList" :key="item.key" class="mb-[24px] flex items-center gap-[8px]">
+            <a-switch v-model="form[item.key as keyof AddTestPlanParams] as boolean" size="small" />
+            {{ t(item.label) }}
+            <a-tooltip :position="item.tooltipPosition">
+              <template #content>
+                <div v-for="descItem in item.desc" :key="descItem">{{ t(descItem) }}</div>
+              </template>
+              <IconQuestionCircle class="h-[16px] w-[16px] text-[--color-text-4] hover:text-[rgb(var(--primary-5))]" />
+            </a-tooltip>
+          </div>
+          <a-form-item field="passThreshold" :label="t('testPlan.planForm.passThreshold')">
+            <a-input-number
+              v-model:model-value="form.passThreshold"
+              size="small"
+              mode="button"
+              class="w-[120px]"
+              :min="1"
+              :max="100"
+              :default-value="100"
+            />
+          </a-form-item>
+        </template>
+      </MsMoreSettingCollapse>
+    </a-form>
+  </MsDrawer>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { FormInstance, Message, TreeNodeData } from '@arco-design/web-vue';
+  import { cloneDeep } from 'lodash-es';
+
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsMoreSettingCollapse from '@/components/pure/ms-more-setting-collapse/index.vue';
+  import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
+
+  import { addTestPlan } from '@/api/modules/test-plan/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
+  import useAppStore from '@/store/modules/app';
+
+  import { ModuleTreeNode } from '@/models/common';
+  import type { AddTestPlanParams } from '@/models/testPlan/testPlan';
+  import { testPlanTypeEnum } from '@/enums/testPlanEnum';
+
+  interface SwitchListModel {
+    key: string;
+    label: string;
+    desc: string[];
+    tooltipPosition: 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';
+  }
+
+  const { t } = useI18n();
+  const appStore = useAppStore();
+
+  const props = defineProps<{
+    moduleTree?: ModuleTreeNode[];
+  }>();
+  const innerVisible = defineModel<boolean>('visible', {
+    required: true,
+  });
+
+  const drawerLoading = ref(false);
+  const formRef = ref<FormInstance>();
+  const initForm: AddTestPlanParams = {
+    name: '',
+    projectId: '',
+    moduleId: 'root',
+    cycle: [],
+    tags: [],
+    description: '',
+    testPlanning: false,
+    automaticStatusUpdate: true,
+    repeatCase: false,
+    passThreshold: 100,
+    type: testPlanTypeEnum.TEST_PLAN,
+    baseAssociateCaseRequest: { selectIds: [], selectAll: false, condition: {} },
+  };
+  const form = ref<AddTestPlanParams>(cloneDeep(initForm));
+
+  function filterTreeNode(searchValue: string, nodeData: TreeNodeData) {
+    return (nodeData as ModuleTreeNode).name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  }
+
+  const switchList: SwitchListModel[] = [
+    {
+      key: 'repeatCase',
+      label: 'testPlan.planForm.associateRepeatCase',
+      tooltipPosition: 'bl',
+      desc: ['testPlan.planForm.repeatCaseTip1', 'testPlan.planForm.repeatCaseTip2'],
+    },
+  ];
+
+  function handleCancel() {
+    innerVisible.value = false;
+    formRef.value?.resetFields();
+    form.value = cloneDeep(initForm);
+  }
+
+  function handleDrawerConfirm(isContinue: boolean) {
+    formRef.value?.validate(async (errors) => {
+      if (!errors) {
+        drawerLoading.value = true;
+        try {
+          // TODO 更新
+          const params: AddTestPlanParams = {
+            ...cloneDeep(form.value),
+            plannedStartTime: form.value.cycle ? form.value.cycle[0] : undefined,
+            plannedEndTime: form.value.cycle ? form.value.cycle[1] : undefined,
+            projectId: appStore.currentProjectId,
+          };
+          if (!form.value?.id) {
+            await addTestPlan(params);
+            Message.success(t('common.createSuccess'));
+          }
+          // TODO 刷新外层数据
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        } finally {
+          drawerLoading.value = false;
+        }
+        if (!isContinue) {
+          handleCancel();
+        }
+        form.value.name = '';
+      }
+    });
+  }
+</script>
diff --git a/frontend/src/views/test-plan/testPlan/index.vue b/frontend/src/views/test-plan/testPlan/index.vue
index c985051e34..a8ee5e5b51 100644
--- a/frontend/src/views/test-plan/testPlan/index.vue
+++ b/frontend/src/views/test-plan/testPlan/index.vue
@@ -9,7 +9,7 @@
               :placeholder="t('caseManagement.featureCase.searchTip')"
               allow-clear
             />
-            <a-dropdown-button class="ml-2" type="primary" @click="handleSelect">
+            <a-dropdown-button class="ml-2" type="primary" @click="handleSelect('createPlan')">
               {{ t('common.newCreate') }}
               <template #icon>
                 <icon-down />
@@ -87,6 +87,7 @@
         </div>
       </template>
     </MsSplitBox>
+    <CreateAndEditPlanDrawer v-model:visible="showPlanDrawer" :module-tree="folderTree" />
   </MsCard>
 </template>
 
@@ -101,12 +102,14 @@
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
   import PlanTable from './components/planTable.vue';
   import TestPlanTree from './components/testPlanTree.vue';
+  import CreateAndEditPlanDrawer from './createAndEditPlanDrawer.vue';
 
   import { createPlanModuleTree } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
   import type { CaseModuleQueryParams, CreateOrUpdateModule, ValidateInfo } from '@/models/caseManagement/featureCase';
+  import type { ModuleTreeNode } from '@/models/common';
 
   import Message from '@arco-design/web-vue/es/message';
 
@@ -141,7 +144,6 @@
   };
 
   const addSubVisible = ref(false);
-  const rootModulesName = ref<string[]>([]);
   const planTreeRef = ref();
   const confirmLoading = ref(false);
   const confirmRef = ref();
@@ -186,8 +188,11 @@
    * 设置根模块名称列表
    * @param names 根模块名称列表
    */
-  function setRootModules(names: string[]) {
-    rootModulesName.value = names;
+  const rootModulesName = ref<string[]>([]);
+  const folderTree = ref<ModuleTreeNode[]>([]);
+  function setRootModules(treeNode: ModuleTreeNode[]) {
+    folderTree.value = treeNode;
+    rootModulesName.value = treeNode.map((e) => e.name);
   }
 
   /**
@@ -195,7 +200,16 @@
    */
   function initModulesCount(params: any) {}
 
-  function handleSelect() {}
+  const showPlanDrawer = ref(false);
+  function handleSelect(value: string | number | Record<string, any> | undefined) {
+    switch (value) {
+      case 'createPlan':
+        showPlanDrawer.value = true;
+        break;
+      default:
+        break;
+    }
+  }
 </script>
 
 <style scoped lang="less">
diff --git a/frontend/src/views/test-plan/testPlan/locale/en-US.ts b/frontend/src/views/test-plan/testPlan/locale/en-US.ts
index 676070428a..c66dee26f6 100644
--- a/frontend/src/views/test-plan/testPlan/locale/en-US.ts
+++ b/frontend/src/views/test-plan/testPlan/locale/en-US.ts
@@ -60,4 +60,11 @@ export default {
   'project.testPlanIndex.functionalUseCase': 'case',
   'project.testPlanIndex.apiCase': 'Api use case',
   'project.testPlanIndex.apiScenarioCase': 'Api scenario use cases',
+  'testPlan.planForm.namePlaceholder': 'Please enter the name of the test plan',
+  'testPlan.planForm.nameRequired': 'Test plan name cannot be empty',
+  'testPlan.planForm.planStartAndEndTime': 'Planned start and end time',
+  'testPlan.planForm.associateRepeatCase': 'Allow associated duplicate cases',
+  'testPlan.planForm.passThreshold': 'Pass threshold',
+  'testPlan.planForm.repeatCaseTip1': 'Enable: Repeatedly associate the same case',
+  'testPlan.planForm.repeatCaseTip2': 'Close: Cannot be associated with the same case repeatedly',
 };
diff --git a/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts b/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
index 61b83ed743..67a01d94cf 100644
--- a/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
+++ b/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
@@ -60,4 +60,11 @@ export default {
   'project.testPlanIndex.functionalUseCase': '功能用例',
   'project.testPlanIndex.apiCase': '接口用例',
   'project.testPlanIndex.apiScenarioCase': '接口场景用例',
+  'testPlan.planForm.namePlaceholder': '请输入测试计划名称',
+  'testPlan.planForm.nameRequired': '测试计划名称不能为空',
+  'testPlan.planForm.planStartAndEndTime': '计划起止时间',
+  'testPlan.planForm.associateRepeatCase': '允许关联重复用例',
+  'testPlan.planForm.passThreshold': '通过阀值',
+  'testPlan.planForm.repeatCaseTip1': '开启：可重复关联同一个用例',
+  'testPlan.planForm.repeatCaseTip2': '关闭：不可重复关联同一用例',
 };