From e073d53d6ef88c118be2c52cf24c3c077c8e459a Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Mon, 8 Jan 2024 15:18:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E5=85=AC=E5=85=B1=E8=84=9A=E6=9C=AC=E9=A1=B5=E9=9D=A2&?=
 =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E5=86=85=E5=AE=B9=E5=9B=9E=E6=98=BE?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/case-management/featureCase.ts    |   5 +
 .../requrls/case-management/featureCase.ts    |   2 +
 .../components/business/ms-comment/input.vue  |   2 +-
 .../ms-remove-button/MsRemoveButton.vue       |  20 +-
 .../pure/ms-rich-text/MsRichText.vue          |  67 ++++--
 .../extensions/mention/MentionList.vue        |   4 +-
 .../extensions/mention/suggestion.ts          |   3 +-
 frontend/src/enums/routeEnum.ts               |   1 +
 frontend/src/enums/tableEnum.ts               |   1 +
 frontend/src/locale/en-US/index.ts            |   1 +
 frontend/src/locale/zh-CN/index.ts            |   1 +
 .../models/projectManagement/commonScript.ts  |   5 +
 .../routes/modules/projectManagement.ts       |  11 +
 .../components/bugDetailTab.vue               |   2 +-
 frontend/src/views/bug-management/edit.vue    |   2 +-
 .../components/caseTemplateDetail.vue         |   8 +-
 .../tabContent/tabBug/addDefectDrawer.vue     |   2 +-
 .../tabDependency/preAndPostCaseDrawer.vue    |  23 +-
 .../tabDependency/tabDependency.vue           |  57 ++++-
 .../components/tabContent/tabDetail.vue       |  12 +-
 .../caseManagementFeature/locale/en-US.ts     |   2 +
 .../caseManagementFeature/locale/zh-CN.ts     |   2 +
 .../components/addScriptDrawer.vue            | 160 +++++++++++++
 .../commonScript/components/scriptDefined.vue | 111 +++++++++
 .../project-management/commonScript/index.vue | 226 ++++++++++++++++++
 .../commonScript/locale/en-US.ts              |  46 ++++
 .../commonScript/locale/zh-CN.ts              |  47 ++++
 .../project-management/commonScript/utils.ts  |  55 +++++
 .../template/components/proTemplateDetail.vue |   2 +-
 .../components/caseTemplateLeftContent.vue    |   2 +-
 .../components/defectTemplateLeftContent.vue  |   2 +-
 .../template/components/templateDetail.vue    |   2 +-
 .../template/components/workflowCard.vue      |   2 +-
 .../pluginManager/components/uploadModel.vue  |   1 -
 34 files changed, 816 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/models/projectManagement/commonScript.ts
 create mode 100644 frontend/src/views/project-management/commonScript/components/addScriptDrawer.vue
 create mode 100644 frontend/src/views/project-management/commonScript/components/scriptDefined.vue
 create mode 100644 frontend/src/views/project-management/commonScript/index.vue
 create mode 100644 frontend/src/views/project-management/commonScript/locale/en-US.ts
 create mode 100644 frontend/src/views/project-management/commonScript/locale/zh-CN.ts
 create mode 100644 frontend/src/views/project-management/commonScript/utils.ts

diff --git a/frontend/src/api/modules/case-management/featureCase.ts b/frontend/src/api/modules/case-management/featureCase.ts
index 40581b168e..2a94fab6ec 100644
--- a/frontend/src/api/modules/case-management/featureCase.ts
+++ b/frontend/src/api/modules/case-management/featureCase.ts
@@ -9,6 +9,7 @@ import {
   BatchEditCaseUrl,
   BatchMoveCaseUrl,
   CancelAssociationDemandUrl,
+  cancelPreAndPostCaseUrl,
   checkFileIsUpdateUrl,
   CreateCaseModuleTreeUrl,
   CreateCaseUrl,
@@ -309,4 +310,8 @@ export function getPrepositionRelation(data: TableQueryParams) {
 export function addPrepositionRelation(data: TableQueryParams) {
   return MSR.post<ModulesTreeType[]>({ url: `${AddDependOnRelationUrl}`, data });
 }
+// 取消依赖关系
+export function cancelPreOrPostCase(id: string) {
+  return MSR.get({ url: `${cancelPreAndPostCaseUrl}/${id}` });
+}
 export default {};
diff --git a/frontend/src/api/requrls/case-management/featureCase.ts b/frontend/src/api/requrls/case-management/featureCase.ts
index 5afd8acba4..428a2a7d76 100644
--- a/frontend/src/api/requrls/case-management/featureCase.ts
+++ b/frontend/src/api/requrls/case-management/featureCase.ts
@@ -114,3 +114,5 @@ export const GetDependOnPageUrl = '/functional/case/relationship/page';
 export const GetDependOnRelationUrl = '/functional/case/relationship/relate/page';
 // 添加前后置关系
 export const AddDependOnRelationUrl = '/functional/case/relationship/add';
+// 取消关联前后置关系
+export const cancelPreAndPostCaseUrl = '/functional/case/relationship/delete';
diff --git a/frontend/src/components/business/ms-comment/input.vue b/frontend/src/components/business/ms-comment/input.vue
index c25baccb3c..1a960a530f 100644
--- a/frontend/src/components/business/ms-comment/input.vue
+++ b/frontend/src/components/business/ms-comment/input.vue
@@ -10,7 +10,7 @@
     <div class="w-full items-center">
       <a-input v-if="!isActive" class="w-full" @click="isActive = true"></a-input>
       <div v-else class="flex flex-col justify-between">
-        <MsRichText v-model="currentContent" class="w-full" />
+        <MsRichText v-model:raw="currentContent" class="w-full" />
         <div class="mt-4 flex flex-row justify-end gap-[12px]">
           <a-button @click="cancelClick">{{ t('common.cancel') }}</a-button>
           <a-button type="primary" :disabled="!currentContent" @click="publish">{{ t('common.publish') }}</a-button>
diff --git a/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue b/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
index 601ff531fa..81813f53ce 100644
--- a/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
+++ b/frontend/src/components/business/ms-remove-button/MsRemoveButton.vue
@@ -5,10 +5,11 @@
     :sub-title-tip="props.subTitleTip"
     :loading="props.loading"
     :visible="currentVisible"
+    :ok-text="props.okText"
     @confirm="handleOk"
     @cancel="handleCancel"
   >
-    <MsButton @click="showPopover">{{ t('common.remove') }}</MsButton>
+    <MsButton @click="showPopover">{{ t(props.removeText) }}</MsButton>
   </MsPopconfirm>
 </template>
 
@@ -20,11 +21,18 @@
 
   import { useI18n } from '@/hooks/useI18n';
 
-  const props = defineProps<{
-    title: string;
-    subTitleTip: string;
-    loading?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      title: string;
+      subTitleTip: string;
+      loading?: boolean;
+      removeText?: string;
+      okText?: string;
+    }>(),
+    {
+      removeText: 'common.remove',
+    }
+  );
 
   const emit = defineEmits<{
     (e: 'ok'): void;
diff --git a/frontend/src/components/pure/ms-rich-text/MsRichText.vue b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
index 4660acd012..1f28dc77a5 100644
--- a/frontend/src/components/pure/ms-rich-text/MsRichText.vue
+++ b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
@@ -2,7 +2,7 @@
   /**
    *
    * @name: MsRichText.vue
-   * @param {string} modelValue v-model绑定的值
+   * @param {string} raw v-model绑定的值
    * @return {string} 返回编辑器内容
    * @description: 富文本编辑器
    * @example:
@@ -12,11 +12,14 @@
    * import rehypeStringify from 'rehype-stringify';
    * return unified().use(rehypeParse).use(rehypeFormat).use(rehypeStringify).processSync(content.value);
    */
+  import { useDebounceFn, useLocalStorage } from '@vueuse/core';
+
   import useLocale from '@/locale/useLocale';
 
   import '@halo-dev/richtext-editor/dist/style.css';
   import suggestion from './extensions/mention/suggestion';
   import {
+    Editor,
     ExtensionAudio,
     ExtensionBlockquote,
     ExtensionBold,
@@ -57,19 +60,36 @@
     ExtensionVideo,
     lowlight,
     RichTextEditor,
-    useEditor,
   } from '@halo-dev/richtext-editor';
   import Mention from '@tiptap/extension-mention';
 
-  const props = defineProps<{
-    modelValue: string;
+  const props = withDefaults(
+    defineProps<{
+      raw?: string;
+      uploadImage?: (file: File) => Promise<any>;
+    }>(),
+    {
+      raw: '',
+      uploadImage: undefined,
+    }
+  );
+
+  const editor = shallowRef<Editor>();
+
+  const emit = defineEmits<{
+    (event: 'update:raw', value: string): void;
+    (event: 'update', value: string): void;
   }>();
-  const emit = defineEmits(['update:model-value']);
 
-  const content = ref('');
+  // debounce OnUpdate
+  const debounceOnUpdate = useDebounceFn(() => {
+    const html = `${editor.value?.getHTML()}`;
+    emit('update:raw', html);
+    emit('update', html);
+  }, 250);
 
-  const editor = useEditor({
-    content: content.value,
+  editor.value = new Editor({
+    content: props.raw,
     extensions: [
       ExtensionBlockquote,
       ExtensionBold,
@@ -92,6 +112,8 @@
       ExtensionStrike,
       ExtensionText,
       ExtensionImage.configure({
+        inline: true,
+        allowBase64: false,
         HTMLAttributes: {
           loading: 'lazy',
         },
@@ -132,31 +154,38 @@
         HTMLAttributes: {
           class: 'mention',
         },
+        // TODO第一版本先按照初始化评论的人 不加userMap
+        renderLabel({ options, node }) {
+          return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+          // return `${options.suggestion.char}${userMap[node.attrs.id]}`;
+        },
         suggestion,
       }),
     ],
+    autofocus: 'start',
     onUpdate: () => {
-      content.value = `${editor.value?.getHTML()}`;
+      debounceOnUpdate();
     },
   });
 
   const { currentLocale } = useLocale();
   const locale = computed(() => currentLocale.value as 'zh-CN' | 'en-US');
+
   watch(
-    () => props.modelValue,
-    (val) => {
-      if (val) {
-        content.value = val;
+    () => props.raw,
+    () => {
+      if (props.raw !== editor.value?.getHTML()) {
+        editor.value?.commands.setContent(props.raw);
       }
+    },
+    {
+      immediate: true,
     }
   );
 
-  watch(
-    () => content.value,
-    () => {
-      emit('update:model-value', `${editor.value?.getHTML()}`);
-    }
-  );
+  onBeforeUnmount(() => {
+    editor.value?.destroy();
+  });
 </script>
 
 <template>
diff --git a/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue b/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
index 1174dd592f..a0e686124a 100644
--- a/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
+++ b/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
@@ -44,7 +44,7 @@
     const item = props.items[index];
 
     if (item) {
-      props.command({ id: `${item.name}(${item.email})` } as any);
+      props.command({ id: item.id, label: `${item.name}` } as any);
     }
   }
 
@@ -73,7 +73,7 @@
   function selectItem(index: any) {
     const item = props.items[index];
     if (item) {
-      props.command({ id: `${item.name}(${item.email})` } as any);
+      props.command({ id: item.id, label: `${item.name}` } as any);
     }
   }
 
diff --git a/frontend/src/components/pure/ms-rich-text/extensions/mention/suggestion.ts b/frontend/src/components/pure/ms-rich-text/extensions/mention/suggestion.ts
index 66e691cec7..e01d563147 100644
--- a/frontend/src/components/pure/ms-rich-text/extensions/mention/suggestion.ts
+++ b/frontend/src/components/pure/ms-rich-text/extensions/mention/suggestion.ts
@@ -5,7 +5,8 @@ import useAppStore from '@/store/modules/app';
 
 import type { UserListItem } from '@/models/setting/user';
 
-import { VueRenderer } from '@halo-dev/richtext-editor';
+import { Extension, VueRenderer } from '@halo-dev/richtext-editor';
+import Suggestion from '@tiptap/suggestion';
 import type { Instance } from 'tippy.js';
 import tippy from 'tippy.js';
 
diff --git a/frontend/src/enums/routeEnum.ts b/frontend/src/enums/routeEnum.ts
index 8592333d86..47dd5c915a 100644
--- a/frontend/src/enums/routeEnum.ts
+++ b/frontend/src/enums/routeEnum.ts
@@ -30,6 +30,7 @@ export enum ProjectManagementRouteEnum {
   PROJECT_MANAGEMENT = 'projectManagement',
   PROJECT_MANAGEMENT_FILE_MANAGEMENT = 'projectManagementFileManageMent',
   PROJECT_MANAGEMENT_MESSAGE_MANAGEMENT = 'projectManagementMessageManagement',
+  PROJECT_MANAGEMENT_COMMON_SCRIPT = 'projectManagementCommonScript',
   PROJECT_MANAGEMENT_MESSAGE_MANAGEMENT_EDIT = 'projectManagementMessageManagementEdit',
   PROJECT_MANAGEMENT_LOG = 'projectManagementLog',
   PROJECT_MANAGEMENT_PERMISSION = 'projectManagementPermission',
diff --git a/frontend/src/enums/tableEnum.ts b/frontend/src/enums/tableEnum.ts
index 5221537cdb..e657398bbc 100644
--- a/frontend/src/enums/tableEnum.ts
+++ b/frontend/src/enums/tableEnum.ts
@@ -23,6 +23,7 @@ export enum TableKeyEnum {
   ORGANIZATION_TEMPLATE_MANAGEMENT_STEP = 'organizationTemplateManagementStep',
   ORGANIZATION_PROJECT = 'organizationProject',
   ORGANIZATION_PROJECT_USER_DRAWER = 'organizationProjectUserDrawer',
+  ORGANIZATION_PROJECT_COMMON_SCRIPT = 'projectManagementCommonScript',
   FILE_MANAGEMENT_FILE = 'fileManagementFile',
   FILE_MANAGEMENT_CASE = 'fileManagementCase',
   FILE_MANAGEMENT_CASE_RECYCLE = 'fileManagementCaseRecycle',
diff --git a/frontend/src/locale/en-US/index.ts b/frontend/src/locale/en-US/index.ts
index a7e0ea52e4..9d6965280c 100644
--- a/frontend/src/locale/en-US/index.ts
+++ b/frontend/src/locale/en-US/index.ts
@@ -30,6 +30,7 @@ export default {
     'menu.projectManagement': 'Project',
     'menu.projectManagement.fileManagement': 'File Management',
     'menu.projectManagement.messageManagement': 'Message Management',
+    'menu.projectManagement.commonScript': 'Common Script',
     'menu.projectManagement.messageManagementEdit': 'Update Template',
     'menu.caseManagement.featureCase': 'Feature Case',
     'menu.caseManagement.featureCaseRecycle': 'Recycle',
diff --git a/frontend/src/locale/zh-CN/index.ts b/frontend/src/locale/zh-CN/index.ts
index 676a797556..77bff7b3eb 100644
--- a/frontend/src/locale/zh-CN/index.ts
+++ b/frontend/src/locale/zh-CN/index.ts
@@ -33,6 +33,7 @@ export default {
     'menu.projectManagement.log': '日志',
     'menu.projectManagement.fileManagement': '文件管理',
     'menu.projectManagement.messageManagement': '消息管理',
+    'menu.projectManagement.commonScript': '公共脚本',
     'menu.projectManagement.messageManagementEdit': '更新模板',
     'menu.caseManagement.featureCase': '功能用例',
     'menu.caseManagement.featureCaseRecycle': '回收站',
diff --git a/frontend/src/models/projectManagement/commonScript.ts b/frontend/src/models/projectManagement/commonScript.ts
new file mode 100644
index 0000000000..345b3aa618
--- /dev/null
+++ b/frontend/src/models/projectManagement/commonScript.ts
@@ -0,0 +1,5 @@
+export interface CommonScriptMenu {
+  title: string;
+  value: string;
+  command?: string;
+}
diff --git a/frontend/src/router/routes/modules/projectManagement.ts b/frontend/src/router/routes/modules/projectManagement.ts
index 9d0dadd792..bc1b3ae587 100644
--- a/frontend/src/router/routes/modules/projectManagement.ts
+++ b/frontend/src/router/routes/modules/projectManagement.ts
@@ -220,6 +220,17 @@ const ProjectManagement: AppRouteRecordRaw = {
         ],
       },
     },
+    // 公共脚本
+    {
+      path: 'commonScript',
+      name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_COMMON_SCRIPT,
+      component: () => import('@/views/project-management/commonScript/index.vue'),
+      meta: {
+        locale: 'menu.projectManagement.commonScript',
+        roles: ['*'],
+        isTopMenu: true,
+      },
+    },
     // 项目日志
     {
       path: 'log',
diff --git a/frontend/src/views/bug-management/components/bugDetailTab.vue b/frontend/src/views/bug-management/components/bugDetailTab.vue
index 72dcca81e5..92b0aef1b4 100644
--- a/frontend/src/views/bug-management/components/bugDetailTab.vue
+++ b/frontend/src/views/bug-management/components/bugDetailTab.vue
@@ -15,7 +15,7 @@
     <div class="mt-[8]" :class="{ 'max-h-[260px]': contentEditAble }">
       <MsRichText
         v-if="form.content"
-        v-model:model-value="form.content"
+        v-model:raw="form.content"
         :disabled="!contentEditAble"
         :placeholder="t('bugManagement.edit.contentPlaceholder')"
       />
diff --git a/frontend/src/views/bug-management/edit.vue b/frontend/src/views/bug-management/edit.vue
index 4018cf8485..a9c5deb98d 100644
--- a/frontend/src/views/bug-management/edit.vue
+++ b/frontend/src/views/bug-management/edit.vue
@@ -32,7 +32,7 @@
             <a-input v-model="form.title" :max-length="255" show-word-limit />
           </a-form-item>
           <a-form-item field="description" :label="t('bugManagement.edit.content')">
-            <MsRichText v-model="form.description" />
+            <MsRichText v-model:raw="form.description" />
           </a-form-item>
           <a-form-item field="attachment" :label="t('bugManagement.edit.file')">
             <div class="flex flex-col">
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
index 23ede51abe..7a81892ad0 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
@@ -18,7 +18,7 @@
           ></a-input>
         </a-form-item>
         <a-form-item field="precondition" :label="t('system.orgTemplate.precondition')" asterisk-position="end">
-          <MsRichText v-model:model-value="form.prerequisite" />
+          <MsRichText v-model:raw="form.prerequisite" />
         </a-form-item>
         <a-form-item
           field="step"
@@ -48,17 +48,17 @@
             <AddStep v-model:step-list="stepData" :is-disabled="false" />
           </div>
           <!-- 文本描述 -->
-          <MsRichText v-else v-model:modelValue="form.textDescription" />
+          <MsRichText v-else v-model:raw="form.textDescription" />
         </a-form-item>
         <a-form-item
           v-if="form.caseEditType === 'TEXT'"
           field="remark"
           :label="t('caseManagement.featureCase.expectedResult')"
         >
-          <MsRichText v-model:modelValue="form.expectedResult" />
+          <MsRichText v-model:raw="form.expectedResult" />
         </a-form-item>
         <a-form-item field="remark" :label="t('caseManagement.featureCase.remark')">
-          <MsRichText v-model:modelValue="form.description" />
+          <MsRichText v-model:raw="form.description" />
         </a-form-item>
         <AddAttachment @change="handleChange" @link-file="associatedFile" @upload="beforeUpload" />
       </a-form>
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue
index 4d58b39d3c..adc3d8ab5e 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue
@@ -22,7 +22,7 @@
         <a-input v-model="form.title" :max-length="255" show-word-limit />
       </a-form-item>
       <a-form-item :label="t('bugManagement.edit.content')">
-        <MsRichText v-model="form.description" />
+        <MsRichText v-model:raw="form.description" />
       </a-form-item>
     </a-form>
   </MsDrawer>
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
index e7b5be5504..8cd32e92b3 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
@@ -144,7 +144,7 @@
 
   const emit = defineEmits<{
     (e: 'update:visible', val: boolean): void;
-    (e: 'success', val: string[]): void;
+    (e: 'success'): void;
     (e: 'close'): void;
   }>();
 
@@ -273,6 +273,7 @@
       },
       showSetting: false,
       selectable: true,
+      heightUsed: 300,
       showSelectAll: true,
     },
     (record) => {
@@ -332,21 +333,16 @@
       moduleLoading.value = false;
     }
   }
-  /**
-   * @param 获取回收站模块
-   */
-
-  // 回收站模块树count参数
-  const emitTableParams: CaseModuleQueryParams = {
-    keyword: keyword.value,
-    moduleIds: [],
-    projectId: currentProjectId.value,
-    current: propsRes.value.msPagination?.current,
-    pageSize: propsRes.value.msPagination?.pageSize,
-  };
 
   async function getModulesCount() {
     try {
+      const emitTableParams: CaseModuleQueryParams = {
+        keyword: keyword.value,
+        moduleIds: [],
+        projectId: currentProjectId.value,
+        current: propsRes.value.msPagination?.current,
+        pageSize: propsRes.value.msPagination?.pageSize,
+      };
       modulesCount.value = await getCaseModulesCounts(emitTableParams);
     } catch (error) {
       console.log(error);
@@ -401,6 +397,7 @@
       };
       await addPrepositionRelation(params);
       Message.success(t('common.addSuccess'));
+      emit('success');
       innerVisible.value = false;
       resetSelector();
     } catch (error) {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue
index 39b47d7921..a73fe6f969 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue
@@ -2,10 +2,10 @@
   <div>
     <div class="flex items-center justify-between">
       <div>
-        <a-button v-if="showType === 'preposition'" class="mr-3" type="primary" @click="addCase('preposition')">
+        <a-button v-if="showType === 'preposition'" class="mr-3" type="primary" @click="addCase">
           {{ t('caseManagement.featureCase.addPresetCase') }}
         </a-button>
-        <a-button v-else type="primary" @click="addCase('postPosition')">
+        <a-button v-else type="primary" @click="addCase">
           {{ t('caseManagement.featureCase.addPostCase') }}
         </a-button>
       </div>
@@ -28,33 +28,50 @@
     </div>
     <ms-base-table ref="tableRef" v-bind="propsRes" v-on="propsEvent">
       <template #operation="{ record }">
-        <MsButton @click="cancelDependency(record)">{{ t('caseManagement.featureCase.cancelDependency') }}</MsButton>
+        <MsRemoveButton
+          position="br"
+          ok-text="common.confirm"
+          remove-text="caseManagement.featureCase.cancelDependency"
+          :title="t('caseManagement.featureCase.cancelDependencyTip', { name: characterLimit(record.name) })"
+          :sub-title-tip="t('caseManagement.featureCase.cancelDependencyContent')"
+          :loading="cancelLoading"
+          @ok="cancelDependency(record)"
+        />
       </template>
       <template v-if="(keyword || '').trim() === ''" #empty>
         <div class="flex items-center justify-center">
           {{ t('caseManagement.caseReview.tableNoData') }}
-          <MsButton class="ml-[8px]" @click="addCase('preposition')">
+          <MsButton class="ml-[8px]" @click="addCase">
             {{ t('caseManagement.featureCase.addPresetCase') }}
           </MsButton>
         </div>
       </template>
     </ms-base-table>
-    <PreAndPostCaseDrawer ref="drawerRef" v-model:visible="showDrawer" :show-type="showType" :case-id="props.caseId" />
+    <PreAndPostCaseDrawer
+      ref="drawerRef"
+      v-model:visible="showDrawer"
+      :show-type="showType"
+      :case-id="props.caseId"
+      @success="successHandler"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { Message } from '@arco-design/web-vue';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
   import PreAndPostCaseDrawer from './preAndPostCaseDrawer.vue';
 
-  import { getDependOnCase } from '@/api/modules/case-management/featureCase';
+  import { cancelPreOrPostCase, getDependOnCase } from '@/api/modules/case-management/featureCase';
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
+  import { characterLimit } from '@/utils';
 
   const appStore = useAppStore();
 
@@ -88,8 +105,8 @@
     },
     {
       title: 'caseManagement.featureCase.tableColumnVersion',
-      slotName: 'defectState',
-      dataIndex: 'defectState',
+      slotName: 'versionName',
+      dataIndex: 'versionName',
       showInTable: true,
       showTooltip: true,
       width: 300,
@@ -97,8 +114,8 @@
     },
     {
       title: 'caseManagement.featureCase.tableColumnCreateUser',
-      slotName: 'createUser',
-      dataIndex: 'createUser',
+      slotName: 'userName',
+      dataIndex: 'userName',
       showInTable: true,
       showTooltip: true,
       width: 300,
@@ -124,8 +141,20 @@
     enableDrag: true,
   });
 
+  const cancelLoading = ref<boolean>(false);
   // 取消依赖
-  function cancelDependency(record: any) {}
+  async function cancelDependency(record: any) {
+    cancelLoading.value = true;
+    try {
+      await cancelPreOrPostCase(record.id);
+      Message.success(t('caseManagement.featureCase.cancelFollowSuccess'));
+      loadList();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      cancelLoading.value = false;
+    }
+  }
 
   function getParams() {
     setLoadListParams({
@@ -139,11 +168,15 @@
   const showDrawer = ref<boolean>(false);
   const drawerRef = ref();
   // 添加前后置用例
-  function addCase(type: string) {
+  function addCase() {
     showDrawer.value = true;
     drawerRef.value.initModules();
   }
 
+  function successHandler() {
+    loadList();
+  }
+
   watch(
     () => showType.value,
     () => {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
index 9ef7e5a74b..44f1952acf 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
@@ -15,8 +15,8 @@
             }}</a-button
           ></span
         >
-        <MsRichText v-if="isEditPreposition" v-model:model-value="detailForm.prerequisite" class="mt-2" />
-        <div v-else class="text-[var(--color-text-3)]" v-html="detailForm?.prerequisite || '-'"></div>
+        <MsRichText v-if="isEditPreposition" v-model:raw="detailForm.prerequisite" class="mt-2" />
+        <div v-else v-dompurify-html="detailForm?.prerequisite || '-'" class="text-[var(--color-text-3)]"></div>
       </a-form-item>
       <a-form-item
         field="step"
@@ -50,7 +50,7 @@
         <!-- 文本描述 -->
         <MsRichText
           v-if="detailForm.caseEditType === 'TEXT' && isEditPreposition"
-          v-model:modelValue="detailForm.textDescription"
+          v-model:raw="detailForm.textDescription"
         />
         <div v-if="detailForm.caseEditType === 'TEXT' && !isEditPreposition">{{
           detailForm.textDescription || '-'
@@ -63,13 +63,13 @@
       >
         <MsRichText
           v-if="detailForm.caseEditType === 'TEXT' && isEditPreposition"
-          v-model:modelValue="detailForm.expectedResult"
+          v-model:raw="detailForm.expectedResult"
         />
         <div v-else class="text-[var(--color-text-3)]" v-html="detailForm.description || '-'"></div>
       </a-form-item>
       <a-form-item field="remark" :label="t('caseManagement.featureCase.remark')">
-        <MsRichText v-if="isEditPreposition" v-model:modelValue="detailForm.description" />
-        <div v-else class="text-[var(--color-text-3)]" v-html="detailForm.description || '-'"></div>
+        <MsRichText v-if="isEditPreposition" v-model:raw="detailForm.description" />
+        <div v-else v-dompurify-html="detailForm.description || '-'" class="text-[var(--color-text-3)]"></div>
       </a-form-item>
       <div v-if="isEditPreposition" class="flex justify-end">
         <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
diff --git a/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts b/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
index 79ab6f7aca..063c00b112 100644
--- a/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
@@ -244,4 +244,6 @@ export default {
   'caseManagement.featureCase.fileIsUpdated': 'File is updated',
   'caseManagement.featureCase.selectTransferDirectory': 'Please select the transfer directory',
   'caseManagement.featureCase.quicklyCreateDefectSuccess': 'Quick bug creation success',
+  'caseManagement.featureCase.cancelDependencyTip': 'Confirm cancel dependencies?',
+  'caseManagement.featureCase.cancelDependencyContent': 'Cancel after impact test plan related statistics',
 };
diff --git a/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts b/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
index 034a980b6c..d4a945f572 100644
--- a/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
@@ -239,4 +239,6 @@ export default {
   'caseManagement.featureCase.fileIsUpdated': '当前文件已更新',
   'caseManagement.featureCase.selectTransferDirectory': '请选择转存目录',
   'caseManagement.featureCase.quicklyCreateDefectSuccess': '快速创建缺陷成功',
+  'caseManagement.featureCase.cancelDependencyTip': '确认取消依赖关系吗？',
+  'caseManagement.featureCase.cancelDependencyContent': '取消后，影响测试计划相关统计',
 };
diff --git a/frontend/src/views/project-management/commonScript/components/addScriptDrawer.vue b/frontend/src/views/project-management/commonScript/components/addScriptDrawer.vue
new file mode 100644
index 0000000000..7ddbd712c9
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/components/addScriptDrawer.vue
@@ -0,0 +1,160 @@
+<template>
+  <MsDrawer
+    v-model:visible="showScriptDrawer"
+    :title="t('ms.case.associate.title')"
+    :width="768"
+    :footer="false"
+    unmount-on-close
+  >
+    <a-form ref="formRef" :model="form" layout="vertical">
+      <a-form-item
+        field="name"
+        :label="t('project.commonScript.publicScriptName')"
+        :rules="[{ required: true, message: t('project.commonScript.publicScriptNameNotEmpty') }]"
+      >
+        <a-input
+          v-model="form.name"
+          :max-length="255"
+          show-word-limit
+          :placeholder="t('project.commonScript.pleaseEnterScriptName')"
+        />
+      </a-form-item>
+      <a-form-item field="enable" :label="t('project.commonScript.scriptEnabled')">
+        <a-select class="max-w-[396px]" :placeholder="t('project.commonScript.scriptEnabled')">
+          <a-option>{{ t('project.commonScript.draft') }}</a-option>
+          <a-option>{{ t('project.commonScript.testsPass') }}</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="description" :label="t('system.organization.description')">
+        <a-textarea
+          v-model="form.description"
+          :placeholder="t('system.organization.descriptionPlaceholder')"
+          allow-clear
+          :auto-size="{ minRows: 1 }"
+        />
+      </a-form-item>
+      <a-form-item field="tags" :label="t('system.organization.description')">
+        <a-input-tag :placeholder="t('project.commonScript.enterContentAddTags')" allow-clear />
+      </a-form-item>
+      <a-form-item field="inputParameters" :label="t('project.commonScript.inputParams')">
+        <ms-base-table v-bind="propsRes" ref="tableRef" no-disable v-on="propsEvent"> </ms-base-table>
+      </a-form-item>
+      <div class="mb-2 flex items-center justify-between">
+        <a-radio-group v-model:model-value="scriptType" type="button" size="small">
+          <a-radio value="commonScript">{{ t('project.commonScript.commonScript') }}</a-radio>
+          <a-radio value="executionResult">{{ t('project.commonScript.executionResult') }}</a-radio>
+        </a-radio-group>
+        <a-button type="outline">{{ t('project.commonScript.scriptTest') }}</a-button>
+      </div>
+      <ScriptDefined v-if="scriptType === 'commonScript'" />
+      <div v-else>
+        <MsCodeEditor
+          v-model:model-value="executionResultValue"
+          title=""
+          width="100%"
+          height="calc(100vh - 155px)"
+          theme="MS-text"
+          :read-only="false"
+          :show-full-screen="false"
+          :show-theme-change="false"
+        />
+      </div>
+    </a-form>
+  </MsDrawer>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+
+  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import type { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import ScriptDefined from './scriptDefined.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+
+  const emit = defineEmits(['update:visible']);
+
+  const showScriptDrawer = computed({
+    get() {
+      return props.visible;
+    },
+    set(val) {
+      emit('update:visible', val);
+    },
+  });
+
+  const initForm = {
+    name: '',
+    description: '',
+  };
+
+  const form = ref({ ...initForm });
+
+  const columns: MsTableColumn = [
+    {
+      title: '参数名称',
+      slotName: 'name',
+      dataIndex: 'name',
+      showTooltip: true,
+      showInTable: true,
+    },
+    {
+      title: '是否必填',
+      slotName: 'required',
+      dataIndex: 'required',
+      showInTable: true,
+    },
+    {
+      title: '参数值',
+      dataIndex: 'tags',
+      slotName: 'tags',
+      showTooltip: true,
+      showInTable: true,
+    },
+    {
+      title: '描述',
+      slotName: 'desc',
+      dataIndex: 'desc',
+      showTooltip: true,
+    },
+  ];
+
+  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
+    () =>
+      Promise.resolve({
+        list: [],
+        current: 1,
+        pageSize: 10,
+        total: 2,
+      }),
+    {
+      columns,
+      tableKey: TableKeyEnum.FILE_MANAGEMENT_FILE,
+      showSetting: false,
+      scroll: { x: '100%' },
+      heightUsed: 300,
+    },
+    (item) => {
+      return {
+        ...item,
+        tags: item.tags?.map((e: string) => ({ id: e, name: e })) || [],
+      };
+    }
+  );
+
+  const scriptType = ref<'commonScript' | 'executionResult'>('commonScript');
+
+  const executionResultValue = ref('');
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/project-management/commonScript/components/scriptDefined.vue b/frontend/src/views/project-management/commonScript/components/scriptDefined.vue
new file mode 100644
index 0000000000..f8af6ceeee
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/components/scriptDefined.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="w-full bg-[var(--color-bg-3)] p-4 pb-0">
+    <div class="flex items-center justify-between">
+      <div>
+        <MsTag class="!mr-2" theme="outline">
+          <template #icon><icon-undo class="mr-1 text-[16px] text-[var(--color-text-4)]" /> </template>
+          {{ t('project.commonScript.undo') }}</MsTag
+        >
+        <MsTag theme="outline">
+          <template #icon>
+            <icon-eraser class="mr-1 text-[16px] text-[var(--color-text-4)]" />
+          </template>
+
+          {{ t('project.commonScript.clear') }}</MsTag
+        >
+      </div>
+      <MsTag theme="outline">{{ t('project.commonScript.formatting') }}</MsTag>
+    </div>
+  </div>
+  <div class="flex h-[calc(100vh-120px)] bg-[var(--color-bg-3)]">
+    <div class="leftCodeEditor w-[70%]">
+      <MsCodeEditor
+        v-model:model-value="commonScriptValue"
+        title=""
+        width="100%"
+        height="calc(100vh - 155px)"
+        theme="MS-text"
+        :read-only="false"
+        :show-full-screen="false"
+        :show-theme-change="false"
+      />
+    </div>
+    <div class="rightCodeEditor mt-[24px] h-[calc(100vh-155px)] w-[calc(30%-12px)] bg-white">
+      <div class="flex items-center justify-between p-3">
+        <div class="flex items-center">
+          <span v-if="expanded" class="collapsebtn mr-1 flex items-center justify-center" @click="expandedHandler">
+            <icon-right class="text-[12px] text-[var(--color-text-4)]" />
+          </span>
+          <span v-else class="expand mr-1 flex items-center justify-center" @click="expandedHandler">
+            <icon-down class="text-[12px] text-[rgb(var(--primary-6))]" />
+          </span>
+          <div class="font-medium">{{ t('project.commonScript.codeSnippet') }}</div>
+        </div>
+
+        <a-select v-model="language" class="max-w-[50%]" :placeholder="t('project.commonScript.pleaseSelected')">
+          <a-option v-for="item of languages" :key="item.value">{{ item.text }}</a-option>
+        </a-select>
+      </div>
+      <div v-if="!expanded" class="p-[12px] pt-0">
+        <div v-for="item of SCRIPT_MENU" :key="item.value" class="menuItem px-1 text-[12px]" @click="handleClick(item)">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
+  import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  import type { CommonScriptMenu } from '@/models/projectManagement/commonScript';
+
+  import { SCRIPT_MENU } from '../utils';
+
+  const { t } = useI18n();
+
+  const expanded = ref<boolean>(true);
+  const language = ref('beanshell');
+  const commonScriptValue = ref('');
+
+  const languages = [
+    { text: 'beanshell', value: 'beanshell' },
+    { text: 'python', value: 'python' },
+    { text: 'groovy', value: 'groovy' },
+    { text: 'javascript', value: 'javascript' },
+  ];
+
+  function expandedHandler() {
+    expanded.value = !expanded.value;
+  }
+
+  function handleClick(menu: CommonScriptMenu) {}
+</script>
+
+<style scoped lang="less">
+  .collapsebtn {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--color-text-n8) !important;
+    @apply cursor-pointer bg-white;
+  }
+  .expand {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: rgb(var(--primary-1));
+    @apply cursor-pointer;
+  }
+  .menuItem {
+    height: 24px;
+    line-height: 24px;
+    color: rgb(var(--primary-5));
+    @apply cursor-pointer;
+  }
+</style>
diff --git a/frontend/src/views/project-management/commonScript/index.vue b/frontend/src/views/project-management/commonScript/index.vue
new file mode 100644
index 0000000000..99289e564f
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <MsCard simple>
+    <div class="mb-4 flex items-center justify-between">
+      <a-button type="outline" @click="addCommonScript"> {{ t('project.commonScript.addPublicScript') }} </a-button>
+      <a-input-search
+        v-model:model-value="keyword"
+        :placeholder="t('project.commonScript.searchByNameAndId')"
+        allow-clear
+        class="mx-[8px] w-[240px]"
+      />
+    </div>
+    <ms-base-table v-bind="propsRes" v-on="propsEvent">
+      <template #name="{ record }">
+        <div class="flex items-center">
+          <div class="one-line-text max-w-[200px] text-[rgb(var(--primary-5))]">{{ record.name }}</div>
+          <a-popover :title="t('project.commonScript.publicScriptName')" position="right">
+            <a-button type="text" class="ml-2 px-0">{{ t('project.commonScript.preview') }}</a-button>
+            <template #content>
+              <div class="w-[436px] bg-[var(--color-bg-3)] px-2 pb-2">
+                <MsCodeEditor
+                  v-model:model-value="record.name"
+                  :show-theme-change="false"
+                  title=""
+                  width="100%"
+                  height="376px"
+                  theme="MS-text"
+                  :read-only="false"
+                  :show-full-screen="false"
+                />
+              </div>
+            </template>
+          </a-popover>
+        </div>
+      </template>
+      <template #enable="{ record }">
+        <MsTag v-if="record.enable" type="success" theme="light">{{ t('project.commonScript.testsPass') }}</MsTag>
+        <MsTag v-else>{{ t('project.commonScript.draft') }}</MsTag>
+      </template>
+      <template #operation="{ record }">
+        <MsButton status="primary">
+          {{ t('common.edit') }}
+        </MsButton>
+        <MsTableMoreAction
+          v-if="!record.internal"
+          :list="actions"
+          @select="(item:ActionsItem) => handleMoreActionSelect(item,record)"
+      /></template>
+    </ms-base-table>
+    <template v-if="(keyword || '').trim() === ''" #empty>
+      <div class="flex items-center justify-center">
+        {{ t('caseManagement.caseReview.tableNoData') }}
+        <MsButton class="ml-[8px]"> {{ t('project.commonScript.addPublicScript') }} </MsButton>
+      </div>
+    </template>
+    <AddScriptDrawer v-model:visible="showScriptDrawer" />
+  </MsCard>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Message } from '@arco-design/web-vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import type { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+  import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
+  import AddScriptDrawer from './components/addScriptDrawer.vue';
+
+  import { getDependOnCase } from '@/api/modules/case-management/featureCase';
+  import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
+  import { useAppStore, useTableStore } from '@/store';
+  import { characterLimit } from '@/utils';
+
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  const tableStore = useTableStore();
+
+  const { openModal } = useModal();
+
+  const { t } = useI18n();
+
+  const keyword = ref<string>('');
+
+  const columns: MsTableColumn = [
+    {
+      title: 'project.commonScript.name',
+      dataIndex: 'name',
+      slotName: 'name',
+      width: 300,
+      showInTable: true,
+    },
+    {
+      title: 'project.commonScript.description',
+      slotName: 'description',
+      dataIndex: 'description',
+      width: 200,
+      showDrag: true,
+    },
+    {
+      title: 'project.commonScript.enable',
+      dataIndex: 'enable',
+      slotName: 'enable',
+      showInTable: true,
+      width: 150,
+      showDrag: true,
+    },
+    {
+      title: 'project.commonScript.tags',
+      dataIndex: 'tags',
+      slotName: 'tags',
+      showInTable: true,
+      isTag: true,
+      width: 150,
+      showDrag: true,
+    },
+    {
+      title: 'project.commonScript.createUser',
+      slotName: 'createUser',
+      dataIndex: 'createUser',
+      showInTable: true,
+      width: 200,
+      showDrag: true,
+    },
+    {
+      title: 'project.commonScript.createTime',
+      slotName: 'createTime',
+      dataIndex: 'createTime',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+      showInTable: true,
+      width: 300,
+      showDrag: true,
+    },
+    {
+      title: 'system.resourcePool.tableColumnUpdateTime',
+      dataIndex: 'updateTime',
+      width: 180,
+      showDrag: true,
+    },
+    {
+      title: 'project.commonScript.tableColumnActions',
+      slotName: 'operation',
+      dataIndex: 'operation',
+      fixed: 'right',
+      width: 140,
+      showInTable: true,
+      showDrag: false,
+    },
+  ];
+
+  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, setProps } = useTable(getDependOnCase, {
+    scroll: { x: '100%' },
+    tableKey: TableKeyEnum.ORGANIZATION_PROJECT_COMMON_SCRIPT,
+    selectable: true,
+    heightUsed: 340,
+    showSetting: true,
+    enableDrag: true,
+  });
+
+  const actions: ActionsItem[] = [
+    {
+      label: t('common.delete'),
+      danger: true,
+      eventTag: 'delete',
+    },
+  ];
+
+  function deleteScript(record: Record<string, any>) {
+    openModal({
+      type: 'error',
+      title: t('project.commonScript.deleteTitleTip', { name: characterLimit(record.name) }),
+      content: t('project.commonScript.deleteTitleContent'),
+      okText: t('common.confirmDelete'),
+      cancelText: t('common.cancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      onBeforeOk: async () => {
+        try {
+          Message.success(t('common.deleteSuccess'));
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
+  }
+
+  function handleMoreActionSelect(item: ActionsItem, record: Record<string, any>) {
+    if (item.eventTag === 'delete') {
+      deleteScript(record);
+    }
+  }
+
+  onMounted(() => {
+    // setLoadListParams({});
+    // loadList();
+    setProps({
+      data: [
+        // {
+        //   name: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
+        //   description: 'description',
+        //   enable: true,
+        //   tags: [{ id: '1001', name: 'A' }],
+        // },
+      ],
+    });
+  });
+  tableStore.initColumn(TableKeyEnum.ORGANIZATION_PROJECT_COMMON_SCRIPT, columns, 'drawer');
+
+  const showScriptDrawer = ref<boolean>(false);
+
+  function addCommonScript() {
+    showScriptDrawer.value = true;
+  }
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/project-management/commonScript/locale/en-US.ts b/frontend/src/views/project-management/commonScript/locale/en-US.ts
new file mode 100644
index 0000000000..2f5da3ab2d
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/locale/en-US.ts
@@ -0,0 +1,46 @@
+export default {
+  'project.commonScript.searchByNameAndId': 'Search by name',
+  'project.commonScript.addPublicScript': 'Add public Script',
+  'project.commonScript.name': 'Name',
+  'project.commonScript.description': 'Description',
+  'project.commonScript.enable': 'Enable',
+  'project.commonScript.createUser': 'CreateUser',
+  'project.commonScript.createTime': 'CreateTime',
+  'project.commonScript.updateTime': 'UpdateTime',
+  'project.commonScript.tableColumnActions': 'Operation',
+  'project.commonScript.tags': 'tags',
+  'project.commonScript.deleteTitleTip': 'Confirm delete {name} script?',
+  'project.commonScript.deleteTitleContent':
+    'After deletion, the script may cause test cases that refer to it to fail, so be careful!',
+  'project.commonScript.preview': 'Preview',
+  'project.commonScript.testsPass': 'Pass the test',
+  'project.commonScript.draft': 'draft',
+  'project.commonScript.publicScriptName': 'Common script name',
+  'project.commonScript.publicScriptNameNotEmpty': 'The public script name cannot be empty',
+  'project.commonScript.pleaseEnterScriptName': 'Please enter a script name',
+  'project.commonScript.scriptEnabled': 'Script state',
+  'project.commonScript.enterContentAddTags': 'Enter the content to add the label directly',
+  'project.commonScript.inputParams': 'In parameter',
+  'project.commonScript.commonScript': 'Common script',
+  'project.commonScript.executionResult': 'Execution result',
+  'project.commonScript.scriptTest': 'test',
+  'project.commonScript.codeSnippet': 'Code snippet',
+  'project.commonScript.pleaseSelected': 'Please select',
+  'project.commonScript.formatting': 'formatting',
+  'project.commonScript.undo': 'cancel',
+  'project.commonScript.clear': 'clear',
+  'code_segment': {
+    importApiTest: 'Import from API definition',
+    newApiTest: 'New API test[JSON]',
+  },
+  'processor': {
+    codeTemplateGetVariable: 'Get Variable',
+    codeTemplateSetVariable: 'Set Variable',
+    codeTemplateGetResponseHeader: 'Get Response Header',
+    codeTemplateGetResponseCode: 'Get Response Code',
+    codeTemplateGetResponseResult: 'Get Response Result',
+    paramEnvironmentSetGlobalVariable: 'Set run environment param',
+    insertPublicScript: 'Insert the public script',
+    terminationTest: 'Termination test',
+  },
+};
diff --git a/frontend/src/views/project-management/commonScript/locale/zh-CN.ts b/frontend/src/views/project-management/commonScript/locale/zh-CN.ts
new file mode 100644
index 0000000000..02ef2ca116
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/locale/zh-CN.ts
@@ -0,0 +1,47 @@
+export default {
+  'project.commonScript.searchByNameAndId': '通过名称搜索',
+  'project.commonScript.addPublicScript': '添加公共脚本',
+  'project.commonScript.name': '名称',
+  'project.commonScript.description': '描述',
+  'project.commonScript.enable': '状态',
+  'project.commonScript.createUser': '创建人',
+  'project.commonScript.createTime': '创建时间',
+  'project.commonScript.updateTime': '更新时间',
+  'project.commonScript.tableColumnActions': '操作',
+  'project.commonScript.tags': '标签',
+  'project.commonScript.deleteTitleTip': '确认删除 {name} 脚本吗？',
+  'project.commonScript.deleteTitleContent': '删除后，脚本可能会导致引用该脚本的测试用例执行失败，请谨慎操作！',
+  'project.commonScript.preview': '预览',
+  'project.commonScript.testsPass': '测试通过',
+  'project.commonScript.draft': '草稿',
+  'project.commonScript.publicScriptName': '公共脚本名称',
+  'project.commonScript.publicScriptNameNotEmpty': '公共脚本名称',
+  'project.commonScript.pleaseEnterScriptName': '请输入脚本名称',
+  'project.commonScript.scriptEnabled': '脚本状态',
+  'project.commonScript.enterContentAddTags': '输入内容后回车可直接添加标签',
+  'project.commonScript.inputParams': '入参',
+  'project.commonScript.commonScript': '公共脚本',
+  'project.commonScript.executionResult': '执行结果',
+  'project.commonScript.scriptTest': '测试',
+  'project.commonScript.codeSnippet': '代码片段',
+  'project.commonScript.pleaseSelected': '请选择',
+  'project.commonScript.formatting': '格式化',
+  'project.commonScript.undo': '撤销',
+  'project.commonScript.clear': '清空',
+  'project': {
+    code_segment: {
+      importApiTest: '从API定义导入',
+      newApiTest: '新API测试(JSON)',
+    },
+    processor: {
+      codeTemplateGetVariable: '获取变量',
+      codeTemplateSetVariable: '设置变量',
+      codeTemplateGetResponseHeader: '获取响应头',
+      codeTemplateGetResponseCode: '获取响应码',
+      codeTemplateGetResponseResult: '获取响应结果',
+      paramEnvironmentSetGlobalVariable: '设置环境参数',
+      insertPublicScript: '插入公共脚本',
+      terminationTest: '终止测试',
+    },
+  },
+};
diff --git a/frontend/src/views/project-management/commonScript/utils.ts b/frontend/src/views/project-management/commonScript/utils.ts
new file mode 100644
index 0000000000..867c07a201
--- /dev/null
+++ b/frontend/src/views/project-management/commonScript/utils.ts
@@ -0,0 +1,55 @@
+import { useI18n } from '@/hooks/useI18n';
+
+import type { CommonScriptMenu } from '@/models/projectManagement/commonScript';
+
+const { t } = useI18n();
+
+export const SCRIPT_MENU: CommonScriptMenu[] = [
+  {
+    title: t('project.code_segment.importApiTest'),
+    value: 'api_definition',
+    command: 'api_definition',
+  },
+  {
+    title: t('project.code_segment.newApiTest'),
+    value: 'new_api_request',
+    command: 'new_api_request',
+  },
+  {
+    title: t('project.processor.codeTemplateGetVariable'),
+    value: 'vars.get("variable_name")',
+  },
+  {
+    title: t('project.processor.codeTemplateSetVariable'),
+    value: 'vars.put("variable_name", "variable_value")',
+  },
+  {
+    title: t('project.processor.codeTemplateGetResponseHeader'),
+    value: 'prev.getResponseHeaders()',
+  },
+  {
+    title: t('project.processor.codeTemplateGetResponseCode'),
+    value: 'prev.getResponseCode()',
+  },
+  {
+    title: t('project.processor.codeTemplateGetResponseResult'),
+    value: 'prev.getResponseDataAsString()',
+  },
+  {
+    title: t('project.processor.paramEnvironmentSetGlobalVariable'),
+    value: `vars.put(\${__metersphere_env_id}+"key","value"); 
+        vars.put("key","value")`,
+  },
+  {
+    title: t('project.processor.insertPublicScript'),
+    value: 'custom_function',
+    command: 'custom_function',
+  },
+  {
+    title: t('project.processor.terminationTest'),
+    value: 'terminal_function',
+    command: 'terminal_function',
+  },
+];
+
+export default {};
diff --git a/frontend/src/views/project-management/template/components/proTemplateDetail.vue b/frontend/src/views/project-management/template/components/proTemplateDetail.vue
index 794a65b7b6..5c8051c91c 100644
--- a/frontend/src/views/project-management/template/components/proTemplateDetail.vue
+++ b/frontend/src/views/project-management/template/components/proTemplateDetail.vue
@@ -101,7 +101,7 @@
           asterisk-position="end"
           class="max-w-[732px]"
         >
-          <MsRichText v-model:model-value="defectForm.description" />
+          <MsRichText v-model:raw="defectForm.description" />
           <MsFormItemSub :text="t('system.orgTemplate.defectContentTip')" :show-fill-icon="false" />
         </a-form-item>
       </a-form>
diff --git a/frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue b/frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue
index 265451e8d8..78cc2e3ffe 100644
--- a/frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue
+++ b/frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue
@@ -17,7 +17,7 @@
       ></a-input>
     </a-form-item>
     <a-form-item field="precondition" :label="t('system.orgTemplate.precondition')" asterisk-position="end">
-      <MsRichText v-model="viewForm.precondition" />
+      <MsRichText v-model:raw="viewForm.precondition" />
     </a-form-item>
     <a-form-item field="step" :label="t('system.orgTemplate.stepDescription')" class="relative">
       <div class="absolute left-16 top-0">
diff --git a/frontend/src/views/setting/organization/template/components/defectTemplateLeftContent.vue b/frontend/src/views/setting/organization/template/components/defectTemplateLeftContent.vue
index 4adecf467d..6c3e3a9a6c 100644
--- a/frontend/src/views/setting/organization/template/components/defectTemplateLeftContent.vue
+++ b/frontend/src/views/setting/organization/template/components/defectTemplateLeftContent.vue
@@ -17,7 +17,7 @@
       ></a-input>
     </a-form-item>
     <a-form-item field="precondition" :label="t('system.orgTemplate.defectContent')" asterisk-position="end">
-      <MsRichText v-model="viewForm.description" />
+      <MsRichText v-model:raw="viewForm.description" />
     </a-form-item>
     <a-form-item field="attachment" label="添加附件">
       <div class="flex flex-col">
diff --git a/frontend/src/views/setting/organization/template/components/templateDetail.vue b/frontend/src/views/setting/organization/template/components/templateDetail.vue
index f5c7b5a8f2..1a6a6bbbd1 100644
--- a/frontend/src/views/setting/organization/template/components/templateDetail.vue
+++ b/frontend/src/views/setting/organization/template/components/templateDetail.vue
@@ -101,7 +101,7 @@
           asterisk-position="end"
           class="max-w-[732px]"
         >
-          <MsRichText v-model:model-value="defectForm.description" />
+          <MsRichText v-model:raw="defectForm.description" />
           <MsFormItemSub :text="t('system.orgTemplate.defectContentTip')" :show-fill-icon="false" />
         </a-form-item>
       </a-form>
diff --git a/frontend/src/views/setting/organization/template/components/workflowCard.vue b/frontend/src/views/setting/organization/template/components/workflowCard.vue
index 5fe9abbf4f..54c5c0fa76 100644
--- a/frontend/src/views/setting/organization/template/components/workflowCard.vue
+++ b/frontend/src/views/setting/organization/template/components/workflowCard.vue
@@ -281,7 +281,7 @@
   }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
   .wrapper {
     width: 100%;
     min-width: 112px;
diff --git a/frontend/src/views/setting/system/pluginManager/components/uploadModel.vue b/frontend/src/views/setting/system/pluginManager/components/uploadModel.vue
index a549b3e53f..f25ed1a911 100644
--- a/frontend/src/views/setting/system/pluginManager/components/uploadModel.vue
+++ b/frontend/src/views/setting/system/pluginManager/components/uploadModel.vue
@@ -77,7 +77,6 @@
           <a-tooltip>
             <template #content>
               <div class="text-sm">{{ t('system.plugin.statusEnableTip') }}</div>
-              <div class="text-sm">{{ t('system.plugin.statusDisableTip') }}</div>
             </template>
             <div class="mx-1 flex h-[32px] items-center">
               <span class="mr-1">{{ t('system.plugin.pluginStatus') }}</span>