diff --git a/frontend/packages/web/src/components/business/crm-approval-popover/useApprovalPopoverDetail.ts b/frontend/packages/web/src/components/business/crm-approval-popover/useApprovalPopoverDetail.ts
index 85eed5d740..32cf887dbe 100644
--- a/frontend/packages/web/src/components/business/crm-approval-popover/useApprovalPopoverDetail.ts
+++ b/frontend/packages/web/src/components/business/crm-approval-popover/useApprovalPopoverDetail.ts
@@ -6,7 +6,7 @@ import { ApproverItem } from '@/components/business/crm-approver-avatar-list/ind
 
 export type ApprovalPopoverFormKeyType =
   | FormDesignKeyEnum.CONTRACT
-  | FormDesignKeyEnum.CONTRACT_INVOICE
+  | FormDesignKeyEnum.INVOICE
   | FormDesignKeyEnum.OPPORTUNITY_QUOTATION
   | FormDesignKeyEnum.ORDER;
 
@@ -26,7 +26,7 @@ const detailApiMap: Record<ApprovalPopoverFormKeyType, (sourceId: string) => Pro
       approveUserList: [],
       resourceId: '',
     }),
-  [FormDesignKeyEnum.CONTRACT_INVOICE]: (sourceId: string) =>
+  [FormDesignKeyEnum.INVOICE]: (sourceId: string) =>
     Promise.resolve({
       approveStatus: ProcessStatusEnum.NONE,
       approveUserList: [],
diff --git a/frontend/packages/web/src/components/business/crm-approver-avatar-list/index.vue b/frontend/packages/web/src/components/business/crm-approver-avatar-list/index.vue
index 351b95cfcb..4654d47167 100644
--- a/frontend/packages/web/src/components/business/crm-approver-avatar-list/index.vue
+++ b/frontend/packages/web/src/components/business/crm-approver-avatar-list/index.vue
@@ -104,14 +104,15 @@
     display: flex;
     padding: 8px 2px;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 4px;
   }
   .crm-approver-avatar-list__item {
     display: flex;
     align-items: center;
     min-width: 0;
     max-width: 100%;
-    gap: 8px;
+    column-gap: 8px;
+    row-gap: 4px;
     cursor: pointer;
   }
   .crm-approver-avatar-list__avatar-wrap {
@@ -125,7 +126,7 @@
     transition: box-shadow 0.18s ease;
     @apply flex flex-shrink-0 items-center justify-between;
     &--active {
-      box-shadow: 0 0 0 0.5px var(--primary-8);
+      box-shadow: 0 0 0 1px var(--primary-8);
     }
   }
   .crm-approver-avatar-list__item:hover {
diff --git a/frontend/packages/web/src/components/business/crm-editable-text/index.vue b/frontend/packages/web/src/components/business/crm-editable-text/index.vue
index ef8566983a..046fd024e4 100644
--- a/frontend/packages/web/src/components/business/crm-editable-text/index.vue
+++ b/frontend/packages/web/src/components/business/crm-editable-text/index.vue
@@ -5,17 +5,23 @@
     v-model:value="inputValue"
     :maxlength="255"
     clearable
+    @update-value="handleInput"
     @keydown.enter="confirmEdit"
     @blur="handleBlur"
   />
-  <div v-else class="flex items-center gap-[8px]">
+  <div
+    v-else
+    class="crm-editable-text-view flex min-w-0 max-w-full items-center gap-[8px]"
+    :class="{ 'cursor-pointer': props.clickToEdit }"
+    @click="props.clickToEdit ? enableEditMode() : undefined"
+  >
     <slot>{{ value }} </slot>
     <CrmIcon
       v-permission="props.permission"
       class="table-row-edit cursor-pointer text-[var(--text-n4)]"
       type="iconicon_edit"
       :size="16"
-      @click="enableEditMode"
+      @click.stop="enableEditMode"
     />
   </div>
 </template>
@@ -28,10 +34,14 @@
   const props = defineProps<{
     value: string;
     permission: string[];
+    clickToEdit?: boolean;
+    emptyTextTip?: string;
   }>();
 
   const emit = defineEmits<{
     (e: 'handleEdit', value: string, done?: () => void): void;
+    (e: 'input', value: string): void;
+    (e: 'cancel'): void;
   }>();
 
   const { t } = useI18n();
@@ -51,7 +61,7 @@
 
   function confirmEdit() {
     if (!inputValue.value.trim().length) {
-      Message.warning(t('common.value.notNull'));
+      Message.warning(props.emptyTextTip ?? t('common.value.notNull'));
       return;
     }
     emit('handleEdit', inputValue.value, () => {
@@ -61,10 +71,19 @@
 
   function handleBlur() {
     isEditing.value = false;
+    emit('cancel');
+  }
+
+  function handleInput(value: string) {
+    emit('input', value);
   }
 </script>
 
 <style lang="less">
+  .crm-editable-text-view {
+    min-width: 0;
+    max-width: 100%;
+  }
   .n-data-table {
     .table-row-edit {
       @apply invisible;
diff --git a/frontend/packages/web/src/components/business/crm-process-drawer/index.vue b/frontend/packages/web/src/components/business/crm-process-drawer/index.vue
index f4f397d34a..97ebe4a628 100644
--- a/frontend/packages/web/src/components/business/crm-process-drawer/index.vue
+++ b/frontend/packages/web/src/components/business/crm-process-drawer/index.vue
@@ -12,19 +12,21 @@
   >
     <template #header>
       <div class="crm-process-drawer-header-content">
-        <div class="crm-process-drawer-header-item flex items-center">
+        <div class="crm-process-drawer-header-item crm-process-drawer-header-item--title flex items-center">
           <n-button text class="mr-[4px] w-[32px]" @click="handleCancel">
             <n-icon size="16">
               <ChevronBackOutline />
             </n-icon>
           </n-button>
-          <div class="one-line-text flex flex-1 items-center gap-[8px]">
-            <n-tooltip trigger="hover" :delay="300" :disabled="!props.title">
-              <template #trigger>
-                <div class="one-line-text !leading-[20px]"> {{ props.title ?? '-' }}</div>
-              </template>
-              {{ props.title ?? '-' }}
-            </n-tooltip>
+          <div class="crm-process-drawer-title-wrap flex flex-1 items-center gap-[8px]">
+            <slot name="title">
+              <n-tooltip trigger="hover" :delay="300" :disabled="!props.title">
+                <template #trigger>
+                  <div class="one-line-text !leading-[20px]"> {{ props.title ?? '-' }}</div>
+                </template>
+                {{ props.title ?? '-' }}
+              </n-tooltip>
+            </slot>
           </div>
         </div>
         <div class="flex justify-center">
@@ -111,10 +113,21 @@
 <style scoped lang="less">
   .crm-process-drawer-header-content {
     padding: 8px;
+    gap: 24px;
     box-sizing: border-box;
     @apply flex items-center;
     .crm-process-drawer-header-item {
       @apply flex flex-1;
+
+      min-width: 0;
+    }
+    .crm-process-drawer-header-item--title {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+    .crm-process-drawer-title-wrap {
+      overflow: hidden;
+      min-width: 0;
     }
   }
 </style>
diff --git a/frontend/packages/web/src/config/process.ts b/frontend/packages/web/src/config/process.ts
index 42ba2bdec5..b6409b5901 100644
--- a/frontend/packages/web/src/config/process.ts
+++ b/frontend/packages/web/src/config/process.ts
@@ -1,3 +1,4 @@
+import { FormDesignKeyEnum } from '@lib/shared/enums/formDesignEnum';
 import { ProcessStatusEnum } from '@lib/shared/enums/process';
 import { useI18n } from '@lib/shared/hooks/useI18n';
 import { ProcessStatusType } from '@lib/shared/models/system/process';
@@ -43,3 +44,17 @@ export const processStatusOptions = Object.entries(processStatusMap).map(([key,
   label: value.label,
   value: key,
 }));
+
+export const defaultBasicForm = {
+  businessType: FormDesignKeyEnum.OPPORTUNITY_QUOTATION,
+  name: '',
+  executionTiming: ['CREATE'],
+  description: '',
+};
+
+export const defaultMoreConfig = {
+  submitterAuthority: true,
+  approverAuthority: [],
+  autoApproval: 'firstNodeApproval',
+  approvalOpinion: false,
+};
diff --git a/frontend/packages/web/src/router/routes/modules/system.ts b/frontend/packages/web/src/router/routes/modules/system.ts
index 494e876e9b..b0c70d9741 100644
--- a/frontend/packages/web/src/router/routes/modules/system.ts
+++ b/frontend/packages/web/src/router/routes/modules/system.ts
@@ -17,6 +17,7 @@ const system: AppRouteRecordRaw = {
       'SYSTEM_NOTICE:READ',
       'SYSTEM_SETTING:READ',
       'OPERATION_LOG:READ',
+      'APPROVAL_FLOW:READ',
     ],
     icon: 'iconicon_set_up',
     collapsedLocale: 'menu.collapsedSettings',
@@ -65,7 +66,7 @@ const system: AppRouteRecordRaw = {
       meta: {
         hideChildrenInMenu: true,
         locale: 'menu.settings.processSetting',
-        permissions: [], // todo xinxinwu
+        permissions: ['APPROVAL_FLOW:READ'],
       },
       children: [
         {
@@ -75,7 +76,7 @@ const system: AppRouteRecordRaw = {
           meta: {
             locale: 'menu.settings.approvalFlow',
             isTopMenu: true,
-            permissions: [], // todo xinxinwu
+            permissions: ['APPROVAL_FLOW:READ'],
           },
         },
         // todo 这个版本不上工作流
diff --git a/frontend/packages/web/src/views/contract/invoice/components/invoiceTable.vue b/frontend/packages/web/src/views/contract/invoice/components/invoiceTable.vue
index 785d7757e9..46897b19bd 100644
--- a/frontend/packages/web/src/views/contract/invoice/components/invoiceTable.vue
+++ b/frontend/packages/web/src/views/contract/invoice/components/invoiceTable.vue
@@ -459,7 +459,7 @@
       approvalStatus: (row: ContractInvoiceItem) =>
         h(CrmApprovalPopover, {
           status: row.approvalStatus,
-          formKey: FormDesignKeyEnum.CONTRACT_INVOICE,
+          formKey: FormDesignKeyEnum.INVOICE,
           sourceId: row.id,
           disabled: row.approvalStatus !== ProcessStatusEnum.UNAPPROVED,
           onMore: () => {
diff --git a/frontend/packages/web/src/views/system/process/locale/en-US.ts b/frontend/packages/web/src/views/system/process/locale/en-US.ts
index 409e6d8391..a82ab92241 100644
--- a/frontend/packages/web/src/views/system/process/locale/en-US.ts
+++ b/frontend/packages/web/src/views/system/process/locale/en-US.ts
@@ -31,4 +31,8 @@ export default {
   'process.process.approvalAuthority.allowAddSign': 'Allow adding signatory',
   'process.process.approvalAuthority.allowAddTempApprover':
     'When checked, approver can add temporary approver in the approval flow',
+  'process.process.processName': 'Process Name',
+  'process.process.basic.businessType': 'Business Type',
+  'process.process.basic.executionTiming': 'Execution timing',
+  'process.process.basic.description': 'Description',
 };
diff --git a/frontend/packages/web/src/views/system/process/locale/zh-CN.ts b/frontend/packages/web/src/views/system/process/locale/zh-CN.ts
index 56e3b70dd0..d61f6ce48a 100644
--- a/frontend/packages/web/src/views/system/process/locale/zh-CN.ts
+++ b/frontend/packages/web/src/views/system/process/locale/zh-CN.ts
@@ -28,4 +28,8 @@ export default {
   'process.process.approvalAuthority.addTempApprover': '勾选后，审批人可在审批流程中增加临时审批人',
   'process.process.approvalAuthority.allowAddSign': '允许加签',
   'process.process.approvalAuthority.allowAddTempApprover': '勾选后，审批人可在审批流程中增加临时审批人',
+  'process.process.processName': '流程名称',
+  'process.process.basic.businessType': '业务类型',
+  'process.process.basic.executionTiming': '执行时机',
+  'process.process.basic.description': '描述信息',
 };
diff --git a/frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue b/frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue
index 0ba0c7e90c..0829400864 100644
--- a/frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue
+++ b/frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue
@@ -7,23 +7,50 @@
     @next-step="handleNextStep"
     @cancel="() => emit('cancel')"
   >
+    <template #title>
+      <div class="process-name-header flex max-w-full flex-1 overflow-hidden">
+        <CrmEditableText
+          :status="errorStatus"
+          size="small"
+          :value="form.basicConfig.name"
+          :permission="['APPROVAL_FLOW:UPDATE']"
+          click-to-edit
+          :emptyTextTip="t('common.notNull', { value: t('process.process.processName') })"
+          @handle-edit="handleEditName"
+          @input="handleInput"
+          @cancel="handleCancelEditName"
+        >
+          <n-tooltip trigger="hover" :delay="300" :disabled="!form.basicConfig.name">
+            <template #trigger>
+              <div class="process-name one-line-text">
+                {{ form.basicConfig.name ?? '-' }}
+              </div>
+            </template>
+            {{ form.basicConfig.name ?? '-' }}
+          </n-tooltip>
+        </CrmEditableText>
+      </div>
+    </template>
     <template v-if="visible">
-      <ApprovalFlowDesign v-if="activeTab === 'process'" />
-      <moreSetting v-if="activeTab === 'moreSetting'" />
+      <ApprovalFlowDesign v-if="activeTab === 'process'" v-model:basicConfig="form.basicConfig" />
+      <moreSetting v-if="activeTab === 'moreSetting'" v-model:moreConfig="form.moreConfig" />
     </template>
   </CrmProcessDrawer>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useMessage } from 'naive-ui';
+  import { NTooltip } from 'naive-ui';
 
   import { useI18n } from '@lib/shared/hooks/useI18n';
 
+  import CrmEditableText from '@/components/business/crm-editable-text/index.vue';
   import CrmProcessDrawer from '@/components/business/crm-process-drawer/index.vue';
   import ApprovalFlowDesign from './approvalFlowDesign.vue';
   import moreSetting from './moreSetting.vue';
 
+  import { defaultBasicForm, defaultMoreConfig } from '@/config/process';
+
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -40,6 +67,13 @@
 
   const activeTab = ref('process');
 
+  const form = ref({
+    basicConfig: defaultBasicForm,
+    moreConfig: defaultMoreConfig,
+  });
+
+  const editingName = ref('');
+
   const tabList = [
     {
       name: 'process',
@@ -60,6 +94,49 @@
   }
 
   function handleSave() {}
+
+  function handleEditName(value: string, done?: () => void) {
+    form.value.basicConfig.name = value;
+    editingName.value = value;
+    done?.();
+  }
+
+  function handleCancelEditName() {
+    editingName.value = form.value.basicConfig.name ?? '';
+  }
+
+  const errorStatus = computed(() => (editingName.value.trim().length ? '' : 'error'));
+  function handleInput(value: string) {
+    editingName.value = value;
+  }
 </script>
 
-<style scoped></style>
+<style lang="less">
+  .process-name-header {
+    min-width: 0;
+    > * {
+      min-width: 0;
+      max-width: 100%;
+      flex: 1 1 auto;
+    }
+    .table-row-edit {
+      @apply invisible;
+    }
+    &:hover {
+      .table-row-edit {
+        color: var(--primary-8);
+        @apply visible;
+      }
+    }
+    .process-name {
+      overflow: hidden;
+      min-width: 0;
+      max-width: 100%;
+      font-size: 14px;
+      font-weight: 400;
+      border-bottom: 2px solid var(--text-n6);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>
diff --git a/frontend/packages/web/src/views/system/process/process/components/approvalFlowDesign.vue b/frontend/packages/web/src/views/system/process/process/components/approvalFlowDesign.vue
index 28a07c81d7..cc128a486c 100644
--- a/frontend/packages/web/src/views/system/process/process/components/approvalFlowDesign.vue
+++ b/frontend/packages/web/src/views/system/process/process/components/approvalFlowDesign.vue
@@ -26,6 +26,7 @@
       </template>
       <template #rightContent="{ selection }">
         <div> {{ selection }} </div>
+        <basicForm v-model:basicConfig="basicConfig" />
       </template>
     </CrmFlow>
   </div>
@@ -34,6 +35,8 @@
 <script setup lang="ts">
   import { ref } from 'vue';
 
+  import { FormDesignKeyEnum } from '@lib/shared/enums/formDesignEnum';
+
   import CrmIcon from '@/components/pure/crm-icon-font/index.vue';
   import {
     addConditionBranch,
@@ -52,6 +55,9 @@
   import { findBranchLocation, findNodeLocation } from '@/components/business/crm-flow/dsl/queries';
   import CrmFlow from '@/components/business/crm-flow/index.vue';
   import type { ConditionBranch, FlowNode, FlowSchema } from '@/components/business/crm-flow/types';
+  import basicForm from './basicForm.vue';
+
+  import { defaultBasicForm } from '@/config/process';
 
   defineOptions({
     name: 'ApprovalFlowView',
@@ -65,6 +71,12 @@
     });
   }
 
+  const basicConfig = defineModel<Record<string, any>>('basicConfig', {
+    default: () => ({
+      ...defaultBasicForm,
+    }),
+  });
+
   function createDefaultFlow(): FlowSchema {
     return {
       id: createFlowId('flow'),
diff --git a/frontend/packages/web/src/views/system/process/process/components/basicForm.vue b/frontend/packages/web/src/views/system/process/process/components/basicForm.vue
new file mode 100644
index 0000000000..71d60b8527
--- /dev/null
+++ b/frontend/packages/web/src/views/system/process/process/components/basicForm.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="process-basic-setting p-[16px]">
+    <n-form ref="formRef" class="process-basic-setting-form" :model="form" label-placement="top">
+      <n-form-item require-mark-placement="left" path="businessType" :label="t('process.process.basic.businessType')">
+        <n-select
+          v-model:value="form.businessType"
+          :options="businessTypeOptions"
+          :placeholder="t('common.pleaseSelect')"
+        />
+      </n-form-item>
+      <n-form-item
+        require-mark-placement="right"
+        path="name"
+        :label="t('process.process.processName')"
+        :rule="[{ required: true, message: t('common.notNull', { value: `${t('process.process.processName')}` }) }]"
+      >
+        <n-input v-model:value="form.name" :maxlength="255" type="text" :placeholder="t('common.pleaseInput')" />
+      </n-form-item>
+      <n-form-item
+        require-mark-placement="right"
+        path="executionTiming"
+        :label="t('process.process.basic.executionTiming')"
+      >
+        <n-checkbox-group v-model:value="form.executionTiming" class="mt-[4px]">
+          <div class="flex flex-col gap-[8px]">
+            <n-checkbox v-for="item of executionTimingList" :key="item.value" :value="item.value">
+              <div class="flex items-center gap-[8px]">
+                {{ item.label }}
+              </div>
+            </n-checkbox>
+          </div>
+        </n-checkbox-group>
+      </n-form-item>
+      <n-form-item require-mark-placement="right" path="description" :label="t('process.process.basic.description')">
+        <n-input
+          v-model:value="form.description"
+          :maxlength="1000"
+          :placeholder="t('common.pleaseInput')"
+          type="textarea"
+          clearable
+        />
+      </n-form-item>
+    </n-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { NCheckbox, NCheckboxGroup, NForm, NFormItem, NInput, NSelect, useMessage } from 'naive-ui';
+
+  import { FormDesignKeyEnum } from '@lib/shared/enums/formDesignEnum';
+  import { useI18n } from '@lib/shared/hooks/useI18n';
+
+  import { defaultBasicForm } from '@/config/process';
+
+  const { t } = useI18n();
+  // todo ts type
+  const form = defineModel<Record<string, any>>('basicConfig', {
+    default: () => ({
+      ...defaultBasicForm,
+    }),
+  });
+
+  const businessTypeOptions = [
+    {
+      label: t('crmFormCreate.drawer.quotation'),
+      value: FormDesignKeyEnum.OPPORTUNITY_QUOTATION,
+    },
+    {
+      label: t('module.contract'),
+      value: FormDesignKeyEnum.CONTRACT,
+    },
+    {
+      label: t('module.invoiceApproval'),
+      value: FormDesignKeyEnum.INVOICE,
+    },
+    {
+      label: t('module.order'),
+      formKey: FormDesignKeyEnum.ORDER,
+    },
+  ];
+
+  const executionTimingList = [
+    {
+      value: 'CREATE',
+      label: t('common.create'),
+    },
+    {
+      value: 'UPDATE',
+      label: t('common.edit'),
+    },
+  ];
+</script>
+
+<style lang="less">
+  .process-basic-setting-form {
+    .n-form-item-label {
+      font-weight: 600;
+      color: var(--text-n1);
+    }
+  }
+</style>
diff --git a/frontend/packages/web/src/views/system/process/process/components/moreSetting.vue b/frontend/packages/web/src/views/system/process/process/components/moreSetting.vue
index b01bb8bcdb..b6329d6242 100644
--- a/frontend/packages/web/src/views/system/process/process/components/moreSetting.vue
+++ b/frontend/packages/web/src/views/system/process/process/components/moreSetting.vue
@@ -118,14 +118,14 @@
 
   import { useI18n } from '@lib/shared/hooks/useI18n';
 
+  import { defaultMoreConfig } from '@/config/process';
+
   const { t } = useI18n();
-  const Message = useMessage();
 
-  const form = ref({
-    submitterAuthority: true,
-    approverAuthority: [],
-    autoApproval: 'firstNodeApproval',
-    approvalOpinion: false,
+  const form = defineModel<Record<string, any>>('moreConfig', {
+    default: () => ({
+      ...defaultMoreConfig,
+    }),
   });
 
   const approverAuthorityList = [
diff --git a/frontend/packages/web/src/views/system/process/process/index.vue b/frontend/packages/web/src/views/system/process/process/index.vue
index 1e2b145fe7..ec6759a1ef 100644
--- a/frontend/packages/web/src/views/system/process/process/index.vue
+++ b/frontend/packages/web/src/views/system/process/process/index.vue
@@ -12,7 +12,7 @@
     >
       <template #tableTop>
         <div class="flex items-center justify-between">
-          <n-button type="primary" @click="handleAdd">
+          <n-button v-permission="['APPROVAL_FLOW:ADD']" type="primary" @click="handleAdd">
             {{ t('process.process.newProcess') }}
           </n-button>
           <CrmSearchInput v-model:value="keyword" class="!w-[240px]" @search="searchData" />
@@ -170,8 +170,7 @@
           CrmEditableText,
           {
             value: row.name ?? '',
-            // todo xinxinwu
-            permission: [],
+            permission: ['APPROVAL_FLOW:UPDATE'],
             onHandleEdit: async (val: string, done?: () => void) => {
               const res = await handleChangeName(row.id, val);
               if (res) {
@@ -234,10 +233,9 @@
                 size: 'small',
                 rubberBand: false,
                 value: row.enable,
-                // todo 权限
-                disabled: !hasAnyPermission(['CUSTOMER_MANAGEMENT_CONTACT:UPDATE']),
+                disabled: !hasAnyPermission(['APPROVAL_FLOW:UPDATE']),
                 onClick: () => {
-                  if (!hasAnyPermission(['CUSTOMER_MANAGEMENT_CONTACT:UPDATE'])) return;
+                  if (!hasAnyPermission(['APPROVAL_FLOW:UPDATE'])) return;
                   handleToggleStatus(row);
                 },
               });
@@ -304,12 +302,12 @@
             {
               label: t('common.edit'),
               key: 'edit',
-              permission: [],
+              permission: ['APPROVAL_FLOW:UPDATE'],
             },
             {
               label: t('common.delete'),
               key: 'delete',
-              permission: [],
+              permission: ['APPROVAL_FLOW:DELETE'],
             },
           ],
           onSelect: (key: string) => handleActionSelect(row, key),