feat(系统管理): 系统管理组织模版页面搭建(模版列表和字段列表)&批量表单增加拖拽和调整卡片列表组件

frontend/src/api/modules/setting/template.ts

@@ -0,0 +1,54 @@
+import MSR from '@/api/http/index';
+import {
+  CreateFieldUrl,
+  CreateOrganizeTemplateUrl,
+  DeleteFieldDetailUrl,
+  DeleteOrganizeTemplateUrl,
+  EnableOrOffTemplateUrl,
+  GetDefinedFieldListUrl,
+  GetFieldDetailUrl,
+  GetOrganizeTemplateDetailUrl,
+  GetOrganizeTemplateUrl,
+  SetOrganizeTemplateUrl,
+  UpdateFieldUrl,
+  UpdateProjectTemplateUrl,
+} from '@/api/requrls/setting/template';
+
+import { CommonList, TableQueryParams } from '@/models/common';
+import type { AddOrUpdateField, DefinedFieldItem, OrganizeTemplateItem } from '@/models/setting/template';
+
+/** *
+ * 模版
+ */
+// 获取模版列表(组织)
+export function getOrganizeTemplateList(organizationId: string, scene: string) {
+  return MSR.get<OrganizeTemplateItem[]>({ url: GetOrganizeTemplateUrl, params: `/${organizationId}/${scene}` });
+}
+
+/** *
+ * 自定义字段(组织)
+ */
+// 获取自定义字段列表
+export function getFieldList(params: TableQueryParams) {
+  return MSR.get({ url: `${GetDefinedFieldListUrl}${params.organizationId}/${params.scene}` });
+}
+
+// 创建自定义字段(组织)
+export function addOrUpdateOrdField(data: AddOrUpdateField) {
+  if (data.id) {
+    return MSR.post({ url: UpdateFieldUrl, data });
+  }
+  return MSR.post({ url: CreateFieldUrl, data });
+}
+
+// 删除自定义字段(组织)
+export function deleteOrdField(id: string) {
+  return MSR.get({ url: DeleteFieldDetailUrl, params: id });
+}
+
+// 获取自定义字段详情选项(组织)
+export function getOrdFieldDetail(id: string) {
+  return MSR.get({ url: GetFieldDetailUrl, params: id });
+}
+
+export default {};

frontend/src/api/requrls/setting/template.ts

@@ -0,0 +1,44 @@
+// 项目---模板
+
+// 获取模版列表
+export const GetProjectTemplateUrl = '/project/template/list';
+// 设置模版
+export const SetProjectTemplateUrl = '/project/template/set-default';
+// 创建模版
+export const CreateProjectTemplateUrl = '/project/template/add';
+// 更新模版
+export const UpdateProjectTemplateUrl = '/project/template/update';
+// 获取模版详情
+export const GetProjectTemplateDetailUrl = '/project/template/get';
+// 删除模版
+export const DeleteProjectTemplateUrl = '/project/template/delete';
+
+// 组织--- 模板
+
+// 获取模版列表
+export const GetOrganizeTemplateUrl = '/organization/template/list';
+// 设置模版
+export const SetOrganizeTemplateUrl = '/organization/template/set-default';
+// 创建模版
+export const CreateOrganizeTemplateUrl = '/organization/template/add';
+// 更新模版
+export const UpdateOrganizeTemplateUrl = '/organization/template/update';
+// 获取模版详情
+export const GetOrganizeTemplateDetailUrl = '/organization/template/get';
+// 删除模版
+export const DeleteOrganizeTemplateUrl = '/organization/template/delete';
+// 关闭组织模板，开启项目模版
+export const EnableOrOffTemplateUrl = '/organization/template/disable';
+
+// 系统设置-组织-自定义字段
+
+// 获取自定义字段列表
+export const GetDefinedFieldListUrl = '/organization/custom/field/list/';
+// 创建自定义字段
+export const CreateFieldUrl = '/organization/custom/field/add';
+// 更新自定义字段
+export const UpdateFieldUrl = '/organization/custom/field/update';
+// 获取自定义字段详情
+export const GetFieldDetailUrl = '/organization/custom/field/get';
+// 删除自定义字段
+export const DeleteFieldDetailUrl = '/organization/custom/field/delete';

frontend/src/assets/icon-font/iconfont.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: iconfont; /* Project id 3462279 */
-  src: url('iconfont.woff2?t=1695722459901') format('woff2'), url('iconfont.woff?t=1695722459901') format('woff'),
+  src: url('iconfont.woff2?t=1697180140168') format('woff2'), url('iconfont.woff?t=1697180140168') format('woff'),
-    url('iconfont.ttf?t=1695722459901') format('truetype'), url('iconfont.svg?t=1695722459901#iconfont') format('svg');
+    url('iconfont.ttf?t=1697180140168') format('truetype'), url('iconfont.svg?t=1697180140168#iconfont') format('svg');
 }
 .iconfont {
   font-size: 16px;
@@ -10,6 +10,42 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.icon-icon_checkbox::before {
+  content: '\e76e';
+}
+.icon-icon_radio::before {
+  content: '\e76f';
+}
+.icon-icon_input::before {
+  content: '\e770';
+}
+.icon-icon_single_choice::before {
+  content: '\e766';
+}
+.icon-icon_people::before {
+  content: '\e767';
+}
+.icon-icon_style_one::before {
+  content: '\e768';
+}
+.icon-icon_rich_text::before {
+  content: '\e769';
+}
+.icon-icon_multiple_choice::before {
+  content: '\e76a';
+}
+.icon-icon_pound::before {
+  content: '\e76b';
+}
+.icon-icon_calendar_dot::before {
+  content: '\e76c';
+}
+.icon-icon_tag::before {
+  content: '\e76d';
+}
+.icon-icon_replace_outlined::before {
+  content: '\e765';
+}
 .icon-icon_drilling_outlined::before {
   content: '\e764';
 }

frontend/src/assets/icon-font/iconfont.json

@@ -5,6 +5,90 @@
   "css_prefix_text": "icon-",
   "description": "DE、MS项目icon管理",
   "glyphs": [
+    {
+      "icon_id": "37662517",
+      "name": "icon_checkbox",
+      "font_class": "icon_checkbox",
+      "unicode": "e76e",
+      "unicode_decimal": 59246
+    },
+    {
+      "icon_id": "37662516",
+      "name": "icon_radio",
+      "font_class": "icon_radio",
+      "unicode": "e76f",
+      "unicode_decimal": 59247
+    },
+    {
+      "icon_id": "37662515",
+      "name": "icon_input",
+      "font_class": "icon_input",
+      "unicode": "e770",
+      "unicode_decimal": 59248
+    },
+    {
+      "icon_id": "37569253",
+      "name": "icon_single_choice",
+      "font_class": "icon_single_choice",
+      "unicode": "e766",
+      "unicode_decimal": 59238
+    },
+    {
+      "icon_id": "37569252",
+      "name": "icon_people",
+      "font_class": "icon_people",
+      "unicode": "e767",
+      "unicode_decimal": 59239
+    },
+    {
+      "icon_id": "37569251",
+      "name": "icon_style_one",
+      "font_class": "icon_style_one",
+      "unicode": "e768",
+      "unicode_decimal": 59240
+    },
+    {
+      "icon_id": "37569249",
+      "name": "icon_rich_text",
+      "font_class": "icon_rich_text",
+      "unicode": "e769",
+      "unicode_decimal": 59241
+    },
+    {
+      "icon_id": "37569250",
+      "name": "icon_multiple_choice",
+      "font_class": "icon_multiple_choice",
+      "unicode": "e76a",
+      "unicode_decimal": 59242
+    },
+    {
+      "icon_id": "37569247",
+      "name": "icon_pound",
+      "font_class": "icon_pound",
+      "unicode": "e76b",
+      "unicode_decimal": 59243
+    },
+    {
+      "icon_id": "37569248",
+      "name": "icon_calendar_dot",
+      "font_class": "icon_calendar_dot",
+      "unicode": "e76c",
+      "unicode_decimal": 59244
+    },
+    {
+      "icon_id": "37569246",
+      "name": "icon_tag",
+      "font_class": "icon_tag",
+      "unicode": "e76d",
+      "unicode_decimal": 59245
+    },
+    {
+      "icon_id": "37541406",
+      "name": "icon_replace_outlined",
+      "font_class": "icon_replace_outlined",
+      "unicode": "e765",
+      "unicode_decimal": 59237
+    },
     {
       "icon_id": "37505843",
       "name": "icon_drilling_outlined",

frontend/src/assets/icon-font/iconfont.svg

@@ -14,6 +14,30 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="icon_checkbox" unicode="&#59246;" d="M640 810.666667a42.666667 42.666667 0 0 0 0-85.333334H192a21.333333 21.333333 0 0 1-21.333333-21.333333v-640a21.333333 21.333333 0 0 1 21.333333-21.333333h640a21.333333 21.333333 0 0 1 21.333333 21.333333V469.333333a42.666667 42.666667 0 0 0 85.333334 0v-405.333333a106.666667 106.666667 0 0 0-106.666667-106.666667h-640A106.666667 106.666667 0 0 0 85.333333 64v640A106.666667 106.666667 0 0 0 192 810.666667H640z m259.456-29.269334a42.666667 42.666667 0 0 0 9.941333-59.52l-320-448a42.666667 42.666667 0 0 0-61.397333-8.533333l-213.333333 170.666667a42.666667 42.666667 0 1 0 53.333333 66.645333l178.090667-142.506667 293.845333 411.306667a42.666667 42.666667 0 0 0 59.52 9.941333z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_radio" unicode="&#59247;" d="M512 853.333333c259.2 0 469.333333-210.133333 469.333333-469.333333s-210.133333-469.333333-469.333333-469.333333S42.666667 124.8 42.666667 384 252.8 853.333333 512 853.333333z m0-85.333333a384 384 0 1 1 0-768 384 384 0 0 1 0 768z m0-170.666667a213.333333 213.333333 0 1 0 0-426.666666 213.333333 213.333333 0 0 0 0 426.666666z m0-85.333333a128 128 0 1 1 0-256 128 128 0 0 1 0 256z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_input" unicode="&#59248;" d="M938.666667 725.333333a42.666667 42.666667 0 0 0 42.666666-42.666666v-597.333334a42.666667 42.666667 0 0 0-42.666666-42.666666H85.333333a42.666667 42.666667 0 0 0-42.666666 42.666666V682.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h853.333334z m-42.666667-85.333333H128v-512h768V640zM256 554.666667a42.666667 42.666667 0 0 0 42.666667-42.666667v-256a42.666667 42.666667 0 0 0-85.333334 0V512a42.666667 42.666667 0 0 0 42.666667 42.666667z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_single_choice" unicode="&#59238;" d="M512 853.333333c126.122667 0 244.48-50.048 331.861333-137.472A467.925333 467.925333 0 0 0 981.333333 384c0-126.122667-50.048-244.48-137.472-331.861333A467.925333 467.925333 0 0 0 512-85.333333c-126.122667 0-244.48 50.048-331.861333 137.472A467.925333 467.925333 0 0 0 42.666667 384c0 126.122667 50.048 244.48 137.472 331.861333A467.925333 467.925333 0 0 0 512 853.333333z m0-85.333333c-103.253333 0-199.936-40.874667-271.530667-112.469333A382.592 382.592 0 0 1 128 384c0-103.253333 40.874667-199.936 112.469333-271.530667A382.592 382.592 0 0 1 512 0c103.253333 0 199.936 40.874667 271.530667 112.469333A382.592 382.592 0 0 1 896 384c0 103.253333-40.874667 199.936-112.469333 271.530667A382.592 382.592 0 0 1 512 768z m243.498667-225.834667a42.666667 42.666667 0 0 0 0-60.330666l-256-256a42.666667 42.666667 0 0 0-60.330667 0l-128 128a42.666667 42.666667 0 0 0 60.330667 60.330666L469.333333 316.373333l225.834667 225.792a42.666667 42.666667 0 0 0 60.330667 0z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_people" unicode="&#59239;" d="M512 810.666667a192 192 0 1 0 0-384 192 192 0 0 0 0 384z m0-85.333334a106.666667 106.666667 0 1 1 0-213.333333 106.666667 106.666667 0 0 1 0 213.333333z m110.933333-384c128.042667 0 158.506667-2.474667 199.253334-23.253333a213.333333 213.333333 0 0 0 93.226666-93.226667c20.778667-40.746667 23.253333-71.210667 23.253334-199.253333v-25.6a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667v25.6c0 128.042667 2.474667 158.506667 23.253334 199.253333a213.333333 213.333333 0 0 0 93.226666 93.226667C242.56 338.858667 273.066667 341.333333 401.066667 341.333333h221.866666z m22.485334-85.333333H378.581333c-92.16-0.341333-116.522667-2.986667-138.026666-13.952a128 128 0 0 1-55.936-55.936c-10.965333-21.504-13.610667-45.866667-13.909334-138.026667L170.666667 42.666667h682.624v5.418666c-0.298667 88.618667-2.773333 114.56-12.672 135.509334l-1.237334 2.517333a128 128 0 0 1-55.936 55.936c-21.504 10.965333-45.866667 13.610667-138.026666 13.909333z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_style_one" unicode="&#59240;" d="M423.466667 784.213333l298.666666-725.333333a42.666667 42.666667 0 0 0-78.933333-32.426667L548.693333 256H219.306667l-94.506667-229.546667a42.666667 42.666667 0 0 0-50.986667-24.874666l-4.693333 1.621333a42.666667 42.666667 0 0 0-23.253333 55.722667l298.666666 725.333333c14.506667 35.2 64.426667 35.2 78.933334 0zM938.666667 128a42.666667 42.666667 0 0 0 0-85.333333h-85.333334a42.666667 42.666667 0 0 0 0 85.333333h85.333334z m0 213.333333a42.666667 42.666667 0 0 0 0-85.333333h-170.666667a42.666667 42.666667 0 0 0 0 85.333333h170.666667z m-425.130667 0L384 656 254.421333 341.333333h259.114667zM938.666667 554.666667a42.666667 42.666667 0 0 0 0-85.333334h-256a42.666667 42.666667 0 0 0 0 85.333334h256z m0 213.333333a42.666667 42.666667 0 0 0 0-85.333333h-341.333334a42.666667 42.666667 0 0 0 0 85.333333h341.333334z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_rich_text" unicode="&#59241;" d="M896 853.333333a85.333333 85.333333 0 0 0 85.333333-85.333333v-768a85.333333 85.333333 0 0 0-85.333333-85.333333H128a85.333333 85.333333 0 0 0-85.333333 85.333333V768a85.333333 85.333333 0 0 0 85.333333 85.333333h768z m0-85.333333H128v-768h768V768z m-128-597.333333a42.666667 42.666667 0 0 0 0-85.333334H256a42.666667 42.666667 0 0 0 0 85.333334h512zM597.333333 682.666667a42.666667 42.666667 0 0 0 0-85.333334h-128v-298.666666a42.666667 42.666667 0 0 0-85.333333 0V597.333333H256a42.666667 42.666667 0 1 0 0 85.333334h341.333333z m170.666667-341.333334a42.666667 42.666667 0 0 0 0-85.333333h-170.666667a42.666667 42.666667 0 0 0 0 85.333333h170.666667z m0 170.666667a42.666667 42.666667 0 0 0 0-85.333333h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_multiple_choice" unicode="&#59242;" d="M289.834667 798.165333a42.666667 42.666667 0 0 0 60.330666-60.330666l-128-128a42.666667 42.666667 0 0 0-60.330666 0l-64 64a42.666667 42.666667 0 0 0 60.330666 60.330666l33.834667-33.792 97.834667 97.792z m0-298.666666a42.666667 42.666667 0 1 0 60.330666-60.330667l-128-128a42.666667 42.666667 0 0 0-60.330666 0l-64 64a42.666667 42.666667 0 0 0 60.330666 60.330667l33.834667-33.792 97.834667 97.792z m0-298.666667a42.666667 42.666667 0 1 0 60.330666-60.330667l-128-128a42.666667 42.666667 0 0 0-60.330666 0l-64 64a42.666667 42.666667 0 0 0 60.330666 60.330667l33.834667-33.792 97.834667 97.792zM938.666667 448a42.666667 42.666667 0 0 0 0-85.333333H469.333333a42.666667 42.666667 0 0 0 0 85.333333h469.333334z m0-298.666667a42.666667 42.666667 0 0 0 0-85.333333H469.333333a42.666667 42.666667 0 0 0 0 85.333333h469.333334z m0 597.333334a42.666667 42.666667 0 0 0 0-85.333334H469.333333a42.666667 42.666667 0 0 0 0 85.333334h469.333334z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_pound" unicode="&#59243;" d="M682.666667 810.666667a42.666667 42.666667 0 0 0 42.666666-42.666667v-170.666667h170.666667a42.666667 42.666667 0 0 0 0-85.333333h-170.666667v-256h170.666667a42.666667 42.666667 0 0 0 0-85.333333h-170.666667v-170.666667a42.666667 42.666667 0 0 0-85.333333 0v170.666667H384v-170.666667a42.666667 42.666667 0 0 0-85.333333 0v170.666667H128a42.666667 42.666667 0 0 0 0 85.333333h170.666667V512H128a42.666667 42.666667 0 1 0 0 85.333333h170.666667V768a42.666667 42.666667 0 1 0 85.333333 0v-170.666667h256V768a42.666667 42.666667 0 0 0 42.666667 42.666667z m-42.666667-298.666667H384v-256h256V512z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_calendar_dot" unicode="&#59244;" d="M725.333333 810.666667a42.666667 42.666667 0 0 0 42.666667-42.666667v-42.666667h128a85.333333 85.333333 0 0 0 85.333333-85.333333v-597.333333a85.333333 85.333333 0 0 0-85.333333-85.333334H128a85.333333 85.333333 0 0 0-85.333333 85.333334V640a85.333333 85.333333 0 0 0 85.333333 85.333333h128V768a42.666667 42.666667 0 1 0 85.333333 0v-42.666667h341.333334V768a42.666667 42.666667 0 0 0 42.666666 42.666667zM256 640H128v-597.333333h768V640h-128v-42.666667a42.666667 42.666667 0 0 0-85.333333 0V640H341.333333v-42.666667a42.666667 42.666667 0 1 0-85.333333 0V640z m469.333333-362.666667a42.666667 42.666667 0 0 0 0-85.333333H298.666667a42.666667 42.666667 0 0 0 0 85.333333h426.666666z m-192 170.666667a42.666667 42.666667 0 0 0 0-85.333333H298.666667a42.666667 42.666667 0 0 0 0 85.333333h234.666666z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_tag" unicode="&#59245;" d="M512 810.666667a42.666667 42.666667 0 0 0 30.165333-12.501334l345.045334-345.045333a119.466667 119.466667 0 0 0 0-168.448l-275.413334-275.370667a119.466667 119.466667 0 0 0-169.002666-0.042666l-344.96 344.533333A42.666667 42.666667 0 0 0 85.333333 384V768a42.666667 42.666667 0 0 0 42.666667 42.666667h384z m-17.706667-85.333334H170.666667v-323.669333l332.458666-332.074667a34.133333 34.133333 0 0 1 18.773334-9.557333l5.376-0.426667a34.133333 34.133333 0 0 1 24.149333 10.026667l275.242667 275.2a34.133333 34.133333 0 0 1 0.085333 48.042667L494.293333 725.333333zM352 597.333333a53.333333 53.333333 0 1 0 0-106.666666 53.333333 53.333333 0 0 0 0 106.666666z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="icon_replace_outlined" unicode="&#59237;" d="M295.509333 120.106667a341.333333 341.333333 0 0 1 553.941334 315.562666l-40.149334-23.765333a21.333333 21.333333 0 0 0-31.744 22.869333l30.72 142.72a21.333333 21.333333 0 0 0 26.965334 15.957334l139.818666-41.898667a21.333333 21.333333 0 0 0 4.736-38.826667l-52.394666-30.933333c7.381333-31.402667 11.264-64.128 11.264-97.792 0-235.648-191.018667-426.666667-426.666667-426.666667a425.216 425.216 0 0 0-294.4 117.802667l77.909333 44.970667zM715.392 658.133333a341.333333 341.333333 0 0 1-542.890667-309.930666l46.805334 26.624a21.333333 21.333333 0 0 0 31.317333-23.338667L217.6 209.28a21.333333 21.333333 0 0 0-27.221333-15.488l-139.093334 44.202667a21.333333 21.333333 0 0 0-4.096 38.869333l45.866667 26.112C87.978667 329.216 85.333333 356.309333 85.333333 384 85.333333 619.648 276.352 810.666667 512 810.666667c108.373333 0 207.232-40.362667 282.453333-106.88l-79.061333-45.653334z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="icon_drilling_outlined" unicode="&#59236;" d="M228.010667 831.701333a21.461333 21.461333 0 0 0 21.632 21.589334L779.52 853.333333a21.546667 21.546667 0 0 0 21.589333-21.589333l0.085334-42.325333a21.845333 21.845333 0 0 0-21.632-21.632h-94.165334V574.72c0-5.717333 4.010667-11.221333 7.936-15.146667l176.810667-203.52a21.76 21.76 0 0 0 6.4-15.36l-0.042667-55.850666a21.461333 21.461333 0 0 0-21.632-21.589334l-297.472-0.128V128h99.584a25.6 25.6 0 0 0 19.328-42.368l-145.024-167.04a25.6 25.6 0 0 0-38.656 0l-145.024 167.04A25.6 25.6 0 0 0 366.976 128h103.936v135.168H172.8a21.546667 21.546667 0 0 0-21.546667 21.589333v55.893334c0 5.717333 2.261333 11.264 6.314667 15.317333l177.322667 203.52c4.053333 4.010667 8.832 9.557333 8.832 15.317333V767.914667H249.6a21.546667 21.546667 0 0 0-21.589333 21.589333l0.042666 42.197333z m201.130666-63.786666L429.226667 537.6l-164.906667-189.098667 204.970667-0.042666a32912.213333 32912.213333 0 0 1 85.333333 0l208.810667-0.085334-163.242667 188.458667L599.978667 768l-170.837334-0.085333z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="icon_stroke" unicode="&#59234;" d="M85.333333 672A10.666667 10.666667 0 0 0 96 682.666667h832a10.666667 10.666667 0 0 0 10.666667-10.666667v-21.333333a10.666667 10.666667 0 0 0-10.666667-10.666667H96A10.666667 10.666667 0 0 0 85.333333 650.666667v21.333333z m0-213.333333a10.666667 10.666667 0 0 0 10.666667 10.666666h832a10.666667 10.666667 0 0 0 10.666667-10.666666v-64a10.666667 10.666667 0 0 0-10.666667-10.666667H96a10.666667 10.666667 0 0 0-10.666667 10.666667v64z m0-247.466667a10.666667 10.666667 0 0 0 10.666667 10.666667h832a10.666667 10.666667 0 0 0 10.666667-10.666667v-115.2a10.666667 10.666667 0 0 0-10.666667-10.666667H96a10.666667 10.666667 0 0 0-10.666667 10.666667v115.2z"  horiz-adv-x="1024" />

frontend/src/assets/svg/api_ui_Template.svg

@@ -0,0 +1,38 @@
+<svg width="36" height="33" viewBox="0 0 36 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.0152 9.88257L36.0001 15.6474V27.177L26.0152 32.9418L16.0303 27.177V15.6474L26.0152 9.88257Z" fill="#811FA3"/>
+<g filter="url(#filter0_i_9708_9695)">
+<path d="M12.8378 0L25.6755 7.41189V22.2357L12.8378 29.6476L0 22.2357V7.41189L12.8378 0Z" fill="#F9F4FA"/>
+</g>
+<g filter="url(#filter1_f_9708_9695)">
+<path d="M22.3093 6.58838C23.4464 6.58838 24.3682 7.01531 24.3682 7.54196L24.3682 23.7528C24.3682 24.2794 23.4464 24.7063 22.3093 24.7063L9.95616 24.7063C8.81908 24.7063 7.8973 24.2794 7.8973 23.7528L7.8973 7.54195C7.8973 7.01531 8.81909 6.58838 9.95616 6.58838L22.3093 6.58838Z" fill="#A762BF"/>
+</g>
+<g filter="url(#filter2_d_9708_9695)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8322 7.99426C21.1538 7.67264 21.1538 7.1512 20.8322 6.82959C20.5106 6.50798 19.9891 6.50798 19.6675 6.82959L18.1323 8.36482C17.2366 7.77841 16.2578 7.67984 15.4169 7.80726C14.4127 7.9594 13.5252 8.4424 13.0792 8.88847L13.0792 8.88849L11.8439 10.1238C11.6894 10.2782 11.6027 10.4877 11.6027 10.7061C11.6027 10.9245 11.6894 11.134 11.8439 11.2885L16.3734 15.8179C16.695 16.1396 17.2164 16.1396 17.538 15.8179L18.7733 14.5826L18.7734 14.5826C19.2194 14.1366 19.7024 13.2491 19.8545 12.2449C19.9819 11.404 19.8834 10.4252 19.297 9.52949L20.8322 7.99426ZM14.2439 10.0531C14.4155 9.88151 14.9692 9.54097 15.6636 9.43576C16.3148 9.33708 17.0096 9.45411 17.6087 10.0531C18.2077 10.6522 18.3247 11.347 18.226 11.9982C18.1208 12.6926 17.7803 13.2463 17.6086 13.418L16.9557 14.0709L13.5909 10.7061L14.2438 10.0531L14.2439 10.0531ZM8.71986 13.5884C8.93828 13.5884 9.14775 13.6752 9.30219 13.8297L9.54362 14.0711L10.6086 13.0062C10.9302 12.6845 11.4516 12.6845 11.7732 13.0062C12.0948 13.3278 12.0948 13.8492 11.7732 14.1708L10.7083 15.2358L12.426 16.9535L13.491 15.8886C13.8126 15.567 14.334 15.567 14.6556 15.8886C14.9772 16.2102 14.9772 16.7316 14.6556 17.0532L13.5907 18.1182L13.8317 18.3591C14.1533 18.6808 14.1533 19.2022 13.8317 19.5238L12.5964 20.7591C12.1503 21.2052 11.2628 21.6882 10.2587 21.8404C9.41781 21.9678 8.4391 21.8692 7.5435 21.2829L6.00842 22.818C5.6868 23.1396 5.16536 23.1396 4.84375 22.818C4.52214 22.4964 4.52214 21.975 4.84375 21.6534L6.37875 20.1184C5.79219 19.2226 5.69358 18.2437 5.82102 17.4027C5.97316 16.3985 6.45617 15.511 6.90219 15.065L8.13753 13.8297C8.29197 13.6752 8.50144 13.5884 8.71986 13.5884ZM10.012 20.2119C9.36531 20.3098 8.67571 20.1951 8.07959 19.6071L8.06727 19.5945L8.05469 19.5822C7.46627 18.986 7.35151 18.2962 7.44952 17.6494C7.55472 16.955 7.89526 16.4013 8.0669 16.2296L8.71986 15.5767L12.0847 18.9415L11.4317 19.5945C11.2601 19.7661 10.7064 20.1066 10.012 20.2119Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_i_9708_9695" x="0" y="0" width="25.6758" height="30.6476" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9708_9695"/>
+</filter>
+<filter id="filter1_f_9708_9695" x="2.89746" y="1.58838" width="26.4707" height="28.1179" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_9708_9695"/>
+</filter>
+<filter id="filter2_d_9708_9695" x="4.60254" y="6.58838" width="16.4707" height="16.5708" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00986111 0 0 0 0 0.0953724 0 0 0 0 0.295833 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9708_9695"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9708_9695" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/src/assets/svg/caseTemplate.svg

@@ -0,0 +1,38 @@
+<svg width="36" height="38" viewBox="0 0 36 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.9091 11.4546C35.5116 11.4546 36 11.9674 36 12.6L36 33.2182C36 33.8508 35.5116 34.3637 34.9091 34.3637L20.7273 34.3637C20.1248 34.3637 19.6364 33.8508 19.6364 33.2182L19.6364 12.6C19.6364 11.9674 20.1248 11.4546 20.7273 11.4546L34.9091 11.4546Z" fill="#3370FF"/>
+<g filter="url(#filter0_i_9708_11592)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.68182 0C8.40568 0 8.18182 0.223858 8.18182 0.5V2.45455V4.09091V4.40909C8.18182 4.68523 8.40568 4.90909 8.68182 4.90909H8.99874C8.99916 4.90909 8.99958 4.90909 9 4.90909H15.5455C15.5459 4.90909 15.5463 4.90909 15.5467 4.90909H15.8636C16.1398 4.90909 16.3636 4.68523 16.3636 4.40909V4.09091V2.45455V0.5C16.3636 0.223858 16.1398 0 15.8636 0H8.68182ZM4.90909 7.36364V1.63636L1.63636 1.63636C0.732626 1.63636 0 2.36899 0 3.27273V32.7273C0 33.631 0.732625 34.3636 1.63636 34.3636H22.9091C23.8128 34.3636 24.5455 33.631 24.5455 32.7273L24.5455 3.27273C24.5455 2.36899 23.8128 1.63636 22.9091 1.63636L19.6364 1.63636V7.36364C19.6364 7.8155 19.2704 8.18182 18.8182 8.18182H5.72727C5.27504 8.18182 4.90909 7.8155 4.90909 7.36364Z" fill="#F5F8FF"/>
+</g>
+<g filter="url(#filter1_f_9708_11592)">
+<path d="M23.625 11C24.9367 11 26 11.5184 26 12.1579L26 31.8421C26 32.4816 24.9367 33 23.625 33L9.375 33C8.06332 33 7 32.4816 7 31.8421L7 12.1579C7 11.5184 8.06333 11 9.375 11L23.625 11Z" fill="#3370FF"/>
+</g>
+<g filter="url(#filter2_d_9708_11592)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.23654 14.7273C5.05579 14.7273 4.90927 14.8738 4.90927 15.0546V17.6727C4.90927 17.8535 5.05579 18 5.23654 18H19.3093C19.49 18 19.6365 17.8535 19.6365 17.6727V15.0546C19.6365 14.8738 19.49 14.7273 19.3093 14.7273H5.23654ZM5.23645 21.2727C5.0557 21.2727 4.90918 21.4193 4.90918 21.6V24.2182C4.90918 24.399 5.0557 24.5455 5.23645 24.5455H19.3092C19.4899 24.5455 19.6365 24.399 19.6365 24.2182V21.6C19.6365 21.4193 19.4899 21.2727 19.3092 21.2727H5.23645Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_i_9708_11592" x="0" y="0" width="24.5459" height="35.3636" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9708_11592"/>
+</filter>
+<filter id="filter1_f_9708_11592" x="2" y="6" width="29" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_9708_11592"/>
+</filter>
+<filter id="filter2_d_9708_11592" x="4.90918" y="14.7273" width="14.7275" height="9.91824" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00986111 0 0 0 0 0.0953724 0 0 0 0 0.295833 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9708_11592"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9708_11592" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/src/assets/svg/defectTemplate.svg

@@ -0,0 +1,38 @@
+<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6364 9.81818C19.6364 15.2406 15.2406 19.6364 9.81818 19.6364C4.39575 19.6364 0 15.2406 0 9.81818C0 4.39575 4.39575 0 9.81818 0C15.2406 0 19.6364 4.39575 19.6364 9.81818Z" fill="#FFC14E"/>
+<g filter="url(#filter0_i_9708_10905)">
+<path d="M36.0001 20.4545C36.0001 29.04 29.0402 36 20.4546 36C11.8691 36 4.90918 29.04 4.90918 20.4545C4.90918 11.869 11.8691 4.90906 20.4546 4.90906C29.0402 4.90906 36.0001 11.869 36.0001 20.4545Z" fill="#FFFCF6"/>
+</g>
+<g filter="url(#filter1_f_9708_10905)">
+<circle cx="18.8186" cy="18.8181" r="12.2727" fill="#FFC14E"/>
+</g>
+<g filter="url(#filter2_d_9708_10905)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.702 17.7025H15.9169V22.6116V23.0579C15.9169 23.7074 16.1149 25.086 16.8878 26.272C17.5252 27.25 18.576 28.14 20.3797 28.3609V17.7025H17.702ZM22.1648 17.7025V28.3614C23.9709 28.142 25.0213 27.2575 25.6575 26.2845C26.4291 25.1046 26.6277 23.7271 26.6277 23.0579V22.6133L26.6277 22.6116L26.6277 22.6099V17.7025H24.8425H22.1648ZM25.7328 15.9174H27.1505L29.5668 13.5011C29.9153 13.1526 30.4805 13.1526 30.829 13.5011C31.1776 13.8497 31.1776 14.4148 30.829 14.7634L28.4128 17.1797V21.719H30.1979C30.6909 21.719 31.0905 22.1187 31.0905 22.6116C31.0905 23.1046 30.6909 23.5042 30.1979 23.5042H28.3954C28.3248 24.4645 28.0206 25.9225 27.1645 27.2416L29.4902 29.5672C29.8388 29.9158 29.8388 30.481 29.4902 30.8295C29.1416 31.1781 28.5765 31.1781 28.2279 30.8295L25.9939 28.5955C24.9042 29.5424 23.3727 30.1984 21.2723 30.1984C19.1739 30.1984 17.6441 29.5393 16.5553 28.5908L14.3166 30.8295C13.9681 31.1781 13.4029 31.1781 13.0544 30.8295C12.7058 30.481 12.7058 29.9158 13.0544 29.5672L15.3854 27.2362C14.5277 25.9149 14.2214 24.4563 14.1496 23.5042H12.3467C11.8537 23.5042 11.4541 23.1046 11.4541 22.6116C11.4541 22.1187 11.8537 21.719 12.3467 21.719H14.1318V17.1797L11.7155 14.7634C11.367 14.4148 11.367 13.8497 11.7155 13.5011C12.0641 13.1526 12.6292 13.1526 12.9778 13.5011L15.3941 15.9174H16.8118C16.8875 13.4716 18.823 11.4546 21.2723 11.4546C23.7215 11.4546 25.6571 13.4716 25.7328 15.9174ZM23.9464 15.9174C23.8726 14.3946 22.6719 13.2397 21.2723 13.2397C19.8726 13.2397 18.672 14.3946 18.5982 15.9174H21.2723H23.9464Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_i_9708_10905" x="4.90918" y="4.90906" width="31.0908" height="32.0909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.756863 0 0 0 0 0.305882 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9708_10905"/>
+</filter>
+<filter id="filter1_f_9708_10905" x="1.5459" y="1.54541" width="34.5459" height="34.5454" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_9708_10905"/>
+</filter>
+<filter id="filter2_d_9708_10905" x="11.4541" y="11.4546" width="19.6367" height="19.7364" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00986111 0 0 0 0 0.0953724 0 0 0 0 0.295833 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9708_10905"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9708_10905" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/src/assets/svg/testPlanTemplate.svg

@@ -0,0 +1,38 @@
+<svg width="41" height="36" viewBox="0 0 41 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 1.63636C2 0.732625 2.73263 0 3.63636 0H33.0909C33.9946 0 34.7273 0.732625 34.7273 1.63636V22.9091C34.7273 23.8128 33.9946 24.5455 33.0909 24.5455H3.63636C2.73263 24.5455 2 23.8128 2 22.9091V1.63636Z" fill="#00C261"/>
+<g filter="url(#filter0_i_9708_10253)">
+<path d="M5.27246 13.091C5.27246 12.1872 6.00509 11.4546 6.90882 11.4546H36.3634C37.2671 11.4546 37.9997 12.1872 37.9997 13.091V34.3637C37.9997 35.2674 37.2671 36 36.3634 36H6.90882C6.00509 36 5.27246 35.2674 5.27246 34.3637V13.091Z" fill="#F2FCF7"/>
+</g>
+<g filter="url(#filter1_f_9708_10253)">
+<path d="M5 12.875C5 11.8395 5.73048 11 6.63158 11H34.3684C35.2695 11 36 11.8395 36 12.875V24.125C36 25.1605 35.2695 26 34.3684 26H6.63158C5.73048 26 5 25.1605 5 24.125V12.875Z" fill="#26CB79"/>
+</g>
+<g filter="url(#filter2_d_9708_10253)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9858 19.6861C23.3352 19.4957 22.6536 19.8688 22.4633 20.5193L19.936 29.1572C19.7456 29.8077 20.1187 30.4894 20.7692 30.6797C21.4197 30.87 22.1014 30.497 22.2917 29.8464L24.819 21.2086C25.0094 20.558 24.6363 19.8764 23.9858 19.6861ZM18.0044 20.11C18.4836 20.5893 18.4836 21.3663 18.0044 21.8456L14.7813 25.0687L18.0044 28.2918C18.4836 28.7711 18.4836 29.5481 18.0044 30.0274C17.5251 30.5067 16.748 30.5067 16.2687 30.0274L12.1778 25.9365C11.6985 25.4572 11.6985 24.6802 12.1778 24.2009L16.2687 20.11C16.748 19.6307 17.5251 19.6307 18.0044 20.11ZM26.9051 20.11C27.3844 19.6307 28.1614 19.6307 28.6407 20.11L32.7316 24.2009C33.2109 24.6802 33.2109 25.4572 32.7316 25.9365L28.6407 30.0274C28.1614 30.5067 27.3844 30.5067 26.9051 30.0274C26.4258 29.5481 26.4258 28.7711 26.9051 28.2918L30.1282 25.0687L26.9051 21.8456C26.4258 21.3663 26.4258 20.5893 26.9051 20.11Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_i_9708_10253" x="5.27246" y="11.4546" width="32.7275" height="25.5454" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9708_10253"/>
+</filter>
+<filter id="filter1_f_9708_10253" x="0" y="6" width="41" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.5" result="effect1_foregroundBlur_9708_10253"/>
+</filter>
+<filter id="filter2_d_9708_10253" x="11.8184" y="19.6364" width="21.2725" height="11.193" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00986111 0 0 0 0 0.0953724 0 0 0 0 0.295833 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9708_10253"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9708_10253" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/src/components/business/ms-batch-form/index.vue

@@ -1,40 +1,56 @@
 <template>
   <a-form ref="formRef" :model="form" layout="vertical">
-    <div class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
+    <div
+      class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]"
+      :style="{ width: props.formWidth || '100%' }"
+    >
       <a-scrollbar class="overflow-y-auto" :style="{ 'max-height': props.maxHeight }">
-        <div class="flex flex-wrap items-start justify-between gap-[8px]">
+        <Draggable
-          <template v-for="(item, i) of form.list" :key="`form-item-${i}`">
+          tag="div"
-            <div class="flex w-full items-start justify-between gap-[8px]">
+          ghost-class="ghost"
+          drag-class="dragChosenClass"
+          :disabled="!props.isShowDrag"
+          :list="form.list"
+          item-key="dateIndex"
+          :force-fallback="true"
+        >
+          <template #item="{ element, index }">
+            <div class="draggableElement gap-[8px] py-[6px] pr-[8px]" :class="[props.isShowDrag ? 'cursor-move' : '']">
+              <div v-if="props.isShowDrag" class="ml-[8px] mr-[8px] pt-[8px]">
+                <MsIcon type="icon-icon_drag" class="block text-[16px] text-[var(--color-text-4)]"
+              /></div>
               <a-form-item
                 v-for="model of props.models"
-                :key="`${model.filed}${i}`"
+                :key="`${model.filed}${index}`"
-                :field="`list[${i}].${model.filed}`"
+                :field="`list[${index}].${model.filed}`"
-                :class="i > 0 ? 'hidden-item' : 'mb-0 flex-1'"
+                :class="index > 0 ? 'hidden-item' : 'mb-0 flex-1'"
-                :label="i === 0 && model.label ? t(model.label) : ''"
+                :label="index === 0 && model.label ? t(model.label) : ''"
                 :rules="
                   model.rules?.map((e) => {
                     if (e.notRepeat === true) {
                       return {
-                        validator: (val, callback) => fieldNotRepeat(val, callback, i, model.filed, e.message),
+                        validator: (val, callback) => fieldNotRepeat(val, callback, index, model.filed, e.message),
                       };
                     }
                     return e;
                   })
                 "
                 asterisk-position="end"
+                :hide-asterisk="model.hideAsterisk"
+                :hide-label="model.hideLabel"
               >
                 <a-input
                   v-if="model.type === 'input'"
-                  v-model="item[model.filed]"
+                  v-model="element[model.filed]"
-                  class="mb-[4px] flex-1"
+                  class="flex-1"
                   :placeholder="t(model.placeholder || '')"
                   :max-length="model.maxLength || 250"
                   allow-clear
                 />
                 <a-input-number
                   v-if="model.type === 'inputNumber'"
-                  v-model="item[model.filed]"
+                  v-model="element[model.filed]"
-                  class="mb-[4px] flex-1"
+                  class="flex-1"
                   :placeholder="t(model.placeholder || '')"
                   :min="model.min"
                   :max="model.max || 9999999"
@@ -43,6 +59,7 @@
               </a-form-item>
               <div
                 v-show="form.list.length > 1"
+                class="minus"
                 :class="[
                   'flex',
                   'h-full',
@@ -51,15 +68,16 @@
                   'items-center',
                   'justify-center',
                   'text-[var(--color-text-4)]',
-                  i === 0 ? 'mt-[36px]' : 'mt-[5px]',
+                  'mt-[8px]',
                 ]"
-                @click="removeField(i)"
+                :style="{ 'margin-top': index === 0 && !props.isShowDrag ? '36px' : '' }"
+                @click="removeField(index)"
               >
                 <icon-minus-circle />
               </div>
             </div>
           </template>
-        </div>
+        </Draggable>
       </a-scrollbar>
       <div v-if="props.formMode === 'create'" class="w-full">
         <a-button class="px-0" type="text" @click="addField">
@@ -81,6 +99,7 @@
 
   import type { FormItemModel, FormMode } from './types';
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
+  import Draggable from 'vuedraggable';
 
   const { t } = useI18n();
 
@@ -91,9 +110,12 @@
       addText: string;
       maxHeight?: string;
       defaultVals?: any[]; // 当外层是编辑状态时，可传入已填充的数据
+      isShowDrag: boolean; // 是否可以拖拽
+      formWidth?: string; // 自定义表单区域宽度
     }>(),
     {
       maxHeight: '30vh',
+      isShowDrag: false,
     }
   );
 
@@ -190,4 +212,21 @@
   });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .draggableElement {
+    @apply flex w-full items-start justify-between rounded;
+  }
+  .ghost {
+    border: 1px dashed rgba(var(--primary-5));
+    background-color: rgba(var(--primary-1));
+    @apply rounded;
+  }
+  .dragChosenClass {
+    background: white;
+    opacity: 1 !important;
+    @apply rounded;
+    .minus {
+      margin: 0 !important;
+    }
+  }
+</style>

frontend/src/components/business/ms-batch-form/types.ts

@@ -17,6 +17,8 @@ export interface FormItemModel {
   min?: number;
   max?: number;
   maxLength?: number;
+  hideAsterisk?: boolean;
+  hideLabel?: boolean;
 }
 
 declare const _default: import('vue').DefineComponent<

frontend/src/components/business/ms-card-list/index.vue

@@ -3,7 +3,11 @@
     <div
       ref="msCardListRef"
       class="ms-card-list"
-      :style="{ 'grid-template-columns': `repeat(auto-fill, minmax(${props.cardMinWidth}px, 1fr))` }"
+      :style="{
+        'grid-template-columns': `repeat(auto-fill, minmax(${props.cardMinWidth}px, 1fr))`,
+        'gap': `${props.gap}px` || '24px',
+        'padding-bottom': props.paddingBottomSpace || 0,
+      }"
     >
       <div v-if="topLoading" class="ms-card-list-loading">
         <a-spin :loading="topLoading"></a-spin>
@@ -12,6 +16,7 @@
         v-for="(item, index) in props.mode === 'remote' ? remoteList : props.list"
         :key="item.key"
         class="ms-card-list-item"
+        :style="{ 'aspect-ratio': props.isProportional ? 1 / 1 : 'none' }"
       >
         <slot name="item" :item="item" :index="index"></slot>
       </div>
@@ -39,9 +44,14 @@
       shadowLimit: number; // 滚动距离高度，用于计算顶部底部阴影
       remoteParams?: Record<string, any>; // 远程数据模式下，请求数据的参数
       remoteFunc?: (v: TableQueryParams) => Promise<CommonList<any>>; // 远程数据模式下，请求数据的函数
+      gap?: number; // 卡片之间的间距
+      isProportional?: boolean; // 是否等比正方形
+      paddingBottomSpace?: string; // 是否存在底部的间距
     }>(),
     {
       mode: 'static',
+      gap: 24,
+      isProportional: true,
     }
   );
 
@@ -157,9 +167,9 @@
       clientHeight = msCardListContainerRef.value.clientHeight;
     }
     // 最大列数 = （容器宽度 + gap） / （最小卡片宽度 + gap）
-    const maxCols = Math.floor((clientWidth + 24) / (props.cardMinWidth + 24));
+    const maxCols = Math.floor((clientWidth + props.gap) / (props.cardMinWidth + props.gap));
     // 最大行数 =（容器高度 + gap） / （最小卡片宽度 + gap）。因为卡片宽高是 1:1，所以行数和列数相同。这里+2是为了在视图区域外多加载两行，以避免滚动条不出现
-    const maxRows = Math.round((clientHeight + 24) / (props.cardMinWidth + 24)) + 2;
+    const maxRows = Math.round((clientHeight + props.gap) / (props.cardMinWidth + props.gap)) + 2;
     listSize.value = maxCols * maxRows;
     setTimeout(() => {
       // 设置 400ms 后初始化完成，避免 useResizeObserver 一开始就触发，因为useResizeObserver使用了debounce-300ms，所以会有延迟
@@ -214,12 +224,9 @@
 
       .ms-scroll-bar();
 
-      gap: 24px;
       grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
       .ms-card-list-item {
         @apply relative w-full;
-
-        aspect-ratio: 1/1;
       }
       .ms-card-list-loading {
         @apply col-span-full flex items-center justify-center;

frontend/src/components/business/ms-template-card/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="outerWrapper p-[3px]">
+    <div class="innerWrapper">
+      <div class="content">
+        <div class="logo-img h-[48px] w-[48px]">
+          <svg-icon width="36px" height="36px" :name="svgList[props.cardItem.value]"></svg-icon>
+        </div>
+        <div class="template-operation">
+          <div class="flex items-center">
+            <span class="font-medium">{{ props.cardItem.name }}</span>
+            <span class="enable">{{ t('system.orgTemplate.enabledTemplates') }}</span>
+          </div>
+          <div class="flex min-w-[300px] flex-nowrap items-center">
+            <span class="operation hover:text-[rgb(var(--primary-5))]">
+              <span @click="fieldSetting">{{ t('system.orgTemplate.fieldSetting') }}</span>
+              <a-divider direction="vertical" />
+            </span>
+            <span class="operation hover:text-[rgb(var(--primary-5))]">
+              <span>{{ t('system.orgTemplate.TemplateManagement') }}</span> <a-divider direction="vertical" />
+            </span>
+            <span v-if="props.cardItem.value === 'BUG'" class="operation hover:text-[rgb(var(--primary-5))]">
+              <span>{{ t('system.orgTemplate.workflowSetup') }}</span> <a-divider direction="vertical" />
+            </span>
+            <span class="rounded p-[2px] hover:bg-[rgb(var(--primary-9))]">
+              <MsTableMoreAction :list="moreActions" @select="handleMoreActionSelect"
+            /></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { SettingRouteEnum } from '@/enums/routeEnum';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    cardItem: Record<string, any>;
+  }>();
+
+  const router = useRouter();
+
+  const moreActions = ref<ActionsItem[]>([
+    {
+      label: t('system.orgTemplate.enable'),
+      eventTag: 'enable',
+      danger: true,
+    },
+  ]);
+
+  const svgList = ref<Record<string, any>>({
+    FUNCTIONAL: 'caseTemplate',
+    API: 'api_ui_Template',
+    UI: 'api_ui_Template',
+    TEST_PLAN: 'testPlanTemplate',
+    BUG: 'defectTemplate',
+  });
+
+  const handleMoreActionSelect = (item: ActionsItem) => {};
+
+  // 字段设置
+  const fieldSetting = () => {
+    router.push({
+      name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_FILED_SETTING,
+      query: {
+        type: props.cardItem.value,
+      },
+    });
+  };
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-divider-vertical) {
+    margin: 0 8px;
+  }
+  .outerWrapper {
+    box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
+    @apply rounded bg-white;
+    .innerWrapper {
+      background: var(--color-bg-3);
+      @apply rounded p-6;
+      .content {
+        @apply flex;
+        .logo-img {
+          @apply mr-3 flex items-center bg-white;
+        }
+        .template-operation {
+          .operation {
+            cursor: pointer;
+          }
+          .enable {
+            color: var(--color-text-4);
+            background: var(--color-text-n8);
+            @apply ml-4 rounded p-1 text-xs;
+          }
+          @apply flex flex-col justify-between;
+        }
+      }
+    }
+  }
+</style>

frontend/src/config/pathMap.ts

@@ -163,6 +163,13 @@ export const pathMap: PathMapItem[] = [
             permission: [],
             level: MENU_LEVEL[1],
           },
+          {
+            key: 'SETTING_ORGANIZATION_TEMPLATE', // 系统设置-组织-模版
+            locale: 'menu.settings.organization.serviceIntegration',
+            route: RouteEnum.SETTING_ORGANIZATION_TEMPLATE,
+            permission: [],
+            level: MENU_LEVEL[1],
+          },
         ],
       },
     ],
@@ -195,6 +202,13 @@ export const pathMap: PathMapItem[] = [
             permission: [],
             level: MENU_LEVEL[2],
           },
+          {
+            key: 'PROJECT_MANAGEMENT_PERMISSION_TEMPLATE', // 项目管理-项目与权限-菜单管理
+            locale: 'project.permission.templateManager',
+            route: RouteEnum.PROJECT_MANAGEMENT_PERMISSION_TEMPLATE,
+            permission: [],
+            level: MENU_LEVEL[2],
+          },
           {
             key: 'PROJECT_MANAGEMENT_PERMISSION_VERSION', // 项目管理-项目与权限-项目版本
             locale: 'project.permission.projectVersion',

frontend/src/enums/routeEnum.ts

@@ -24,6 +24,7 @@ export enum ProjectManagementRouteEnum {
   PROJECT_MANAGEMENT_PERMISSION = 'projectManagementPermission',
   PROJECT_MANAGEMENT_PERMISSION_BASIC_INFO = 'projectManagementPermissionBasicInfo',
   PROJECT_MANAGEMENT_PERMISSION_MENU_MANAGEMENT = 'projectManagementPermissionMenuManagement',
+  PROJECT_MANAGEMENT_PERMISSION_TEMPLATE = 'projectManagementPermissionTemplate',
   PROJECT_MANAGEMENT_PERMISSION_VERSION = 'projectManagementPermissionVersion',
   PROJECT_MANAGEMENT_PERMISSION_USER_GROUP = 'projectManagementPermissionUserGroup',
   PROJECT_MANAGEMENT_PERMISSION_MEMBER = 'projectManagementPermissionMember',
@@ -57,6 +58,8 @@ export enum SettingRouteEnum {
   SETTING_ORGANIZATION_MEMBER = 'settingOrganizationMember',
   SETTING_ORGANIZATION_USER_GROUP = 'settingOrganizationUserGroup',
   SETTING_ORGANIZATION_PROJECT = 'settingOrganizationProject',
+  SETTING_ORGANIZATION_TEMPLATE = 'settingOrganizationTemplate',
+  SETTING_ORGANIZATION_TEMPLATE_FILED_SETTING = 'settingOrganizationTemplateFiledSetting',
   SETTING_ORGANIZATION_SERVICE = 'settingOrganizationService',
   SETTING_ORGANIZATION_LOG = 'settingOrganizationLog',
 }

frontend/src/enums/tableEnum.ts

@@ -17,6 +17,7 @@ export enum TableKeyEnum {
   PROJECT_MEMBER = 'projectMember',
   PROJECT_USER_GROUP = 'projectUserGroup',
   ORGANIZATION_MEMBER = 'organizationMember',
+  ORGANIZATION_TEMPLATE = 'organizationTemplate',
   ORGANIZATION_PROJECT = 'organizationProject',
   ORGANIZATION_PROJECT_USER_DRAWER = 'organizationProjectUserDrawer',
   FILE_MANAGEMENT_FILE = 'fileManagementFile',

frontend/src/enums/templateEnum.ts

@@ -0,0 +1,18 @@
+export enum TemplateIconEnum {
+  INPUT = 'icon-icon_input', // 输入框
+  TEXTAREA = 'icon-icon_style_one', // 文本
+  RICH_TEXT = 'icon-icon_rich_text', // 富文本
+  SELECT = 'icon-icon_single_choice', // 单选下拉框
+  MULTIPLE_SELECT = 'icon-icon_multiple_choice', // 多选下拉框
+  RADIO = 'icon-icon_radio', // 单选框
+  CHECKBOX = 'icon-icon_checkbox', // 复选框
+  MEMBER = 'icon-icon_people', // 成员
+  MULTIPLE_MEMBER = 'icon-icon_people', // 成员
+  DATE = 'icon-icon_calendar_dot', // 日期
+  DATETIME = 'icon-icon_calendar_dot', // 日期时间
+  INT = 'icon-icon_pound', // 数字-整型
+  FLOAT = 'icon-icon_pound', // 数字-浮点型
+  MULTIPLE_INPUT = 'icon-icon_tag', // 多值输入框、
+  NUMBER = 'icon-icon_pound', // 数字
+}
+export default {};

frontend/src/hooks/useContainerShadow.ts

@@ -16,7 +16,7 @@ export interface ContainerShadowOptions {
 }
 
 /**
- * 监听指定容器的滚动事件，以给容器添加顶部和地步的阴影，需要给指定的容器添加 .ms-container--shadow() 样式类使用阴影
+ * 监听指定容器的滚动事件，以给容器添加顶部和底部的阴影，需要给指定的容器添加 .ms-container--shadow() 样式类使用阴影
  * @param options ContainerShadowOptions
  */
 export default function useContainerShadow(options: ContainerShadowOptions) {

frontend/src/locale/en-US/index.ts

@@ -52,6 +52,8 @@ export default {
     'menu.settings.organization.member': 'Member',
     'menu.settings.organization.userGroup': 'User Group',
     'menu.settings.organization.project': 'Project',
+    'menu.settings.organization.template': 'Template',
+    'menu.settings.organization.templateFieldSetting': 'fieldSetting',
     'menu.settings.organization.serviceIntegration': 'Service Integration',
     'menu.settings.organization.log': 'Log',
     'navbar.action.locale': 'Switch to English',

frontend/src/locale/zh-CN/index.ts

@@ -52,6 +52,8 @@ export default {
     'menu.settings.organization.userGroup': '用户组',
     'menu.settings.organization.project': '项目',
     'menu.settings.organization.serviceIntegration': '服务集成',
+    'menu.settings.organization.template': '模版',
+    'menu.settings.organization.templateFieldSetting': '字段设置',
     'menu.settings.organization.log': '日志',
     'navbar.action.locale': '切换为中文',
     ...sys,

frontend/src/models/setting/template.ts

@@ -0,0 +1,53 @@
+import { LocationQueryValue } from 'vue-router';
+
+// 模版管理
+export interface OrganizeTemplateItem {
+  id: string;
+  name: string;
+  remark: string; // 备注
+  internal: true; // 是否是内置模版
+  updateTime: number;
+  createTime: number;
+  createUser: string;
+  scopeType: string; // 组织或项目级别字段
+  scopeId: string; // 组织或项目ID
+  enableThirdPart: boolean; // 是否开启api字段名配置
+  enableDefault: boolean; // 是否是默认模板
+  refId: string; // 项目模板所关联的组织模板ID
+  scene: string; // 使用场景
+}
+
+export type SeneType = 'FUNCTIONAL' | 'BUG' | 'API' | 'UI' | 'TEST_PLAN' | LocationQueryValue[] | LocationQueryValue;
+// 自定义字段
+export interface DefinedFieldItem {
+  id: string;
+  name: string;
+  scene: SeneType; // 使用场景
+  type: string;
+  remark: string;
+  internal: boolean; // 是否是内置字段
+  scopeType: string; // 组织或项目级别字段（PROJECT, ORGANIZATION）
+  createTime: number;
+  updateTime: number;
+  createUser: string;
+  refId: string; // 项目字段所关联的组织字段ID
+  enableOptionKey: boolean; // 是否需要手动输入选项key
+  scopeId: string; // 组织或项目ID
+}
+
+// 创建自定义字段
+
+export interface FieldOption {
+  value: string;
+  text: string;
+}
+
+export interface AddOrUpdateField {
+  id?: string;
+  name: string;
+  scene: SeneType; // 使用场景
+  type: string;
+  remark: string; // 备注
+  scopeId: string; // 组织或项目ID
+  options?: FieldOption[];
+}

frontend/src/router/routes/modules/projectManagement.ts

@@ -47,6 +47,16 @@ const ProjectManagement: AppRouteRecordRaw = {
             roles: ['*'],
           },
         },
+        // 模版管理
+        {
+          path: 'templateManager',
+          name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_TEMPLATE,
+          component: () => import('@/views/project-management/projectAndPermission/templateManagement/index.vue'),
+          meta: {
+            locale: 'project.permission.templateManager',
+            roles: ['*'],
+          },
+        },
         // 项目版本
         {
           path: 'projectVersion',

frontend/src/router/routes/modules/setting.ts

@@ -178,6 +178,37 @@ const Setting: AppRouteRecordRaw = {
             isTopMenu: true,
           },
         },
+        {
+          path: 'template',
+          name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE,
+          component: () => import('@/views/setting/organization/template/index.vue'),
+          meta: {
+            locale: 'menu.settings.organization.template',
+            roles: ['*'],
+            isTopMenu: true,
+          },
+        },
+        // 模版字段设置
+        {
+          path: 'templateFiledSetting',
+          name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_FILED_SETTING,
+          component: () => import('@/views/setting/organization/template/components/fieldSetting.vue'),
+          meta: {
+            locale: 'menu.settings.organization.templateFieldSetting',
+            roles: ['*'],
+            breadcrumbs: [
+              {
+                name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE,
+                locale: 'menu.settings.organization.template',
+              },
+              {
+                name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_FILED_SETTING,
+                locale: 'menu.settings.organization.templateFieldSetting',
+                editLocale: 'menu.settings.organization.templateFieldSetting',
+              },
+            ],
+          },
+        },
         {
           path: 'log',
           name: SettingRouteEnum.SETTING_ORGANIZATION_LOG,

frontend/src/utils/index.ts

@@ -295,3 +295,16 @@ export const getHashParameters = (): Record<string, string> => {
 
   return params;
 };
+
+/**
+ * 获取 id 序列号
+ * @returns
+ */
+export const getGenerateId = () => {
+  const timestamp = new Date().getTime().toString();
+  const randomDigits = Math.floor(Math.random() * 10000)
+    .toString()
+    .padStart(4, '0');
+  const generateId = timestamp + randomDigits;
+  return generateId.substring(0, 16);
+};

frontend/src/views/project-management/projectAndPermission/index.vue

@@ -64,6 +64,12 @@
       level: 2,
       name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_MENU_MANAGEMENT,
     },
+    {
+      key: 'templateManager',
+      title: 'project.permission.templateManager',
+      level: 2,
+      name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_TEMPLATE,
+    },
     {
       key: 'projectVersion',
       title: 'project.permission.projectVersion',

frontend/src/views/project-management/projectAndPermission/locale/en-US.ts

@@ -3,6 +3,7 @@ export default {
   'project.permission.project': 'Project',
   'project.permission.basicInfo': 'Basic Info',
   'project.permission.menuManagement': 'Menu Management',
+  'project.permission.templateManager': 'Template Manager',
   'project.permission.projectVersion': 'Project Version',
   'project.permission.memberPermission': 'Member Permission',
   'project.permission.member': 'Member',

frontend/src/views/project-management/projectAndPermission/locale/zh-CN.ts

@@ -3,6 +3,7 @@ export default {
   'project.permission.project': '项目',
   'project.permission.basicInfo': '基本信息',
   'project.permission.menuManagement': '菜单管理',
+  'project.permission.templateManager': '模版管理',
   'project.permission.projectVersion': '项目版本',
   'project.permission.memberPermission': '成员权限',
   'project.permission.member': '成员',

frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue

@@ -321,19 +321,26 @@
   /**
    * @description 项目管理-项目与权限-菜单管理
    */
-  import { useI18n } from '@/hooks/useI18n';
+  import { Message, TableData } from '@arco-design/web-vue';
-  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+
-  import useTable from '@/components/pure/ms-table/useTable';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import useTable from '@/components/pure/ms-table/useTable';
+  import MsTimeSelectorVue from '@/components/pure/ms-time-selector/MsTimeSelector.vue';
+  import DefectSync from './components/defectSync.vue';
+
   import {
-    postTabletList,
+    getAuditorOptions,
-    postUpdateMenu,
     getConfigByMenuItem,
     getPoolOptions,
-    getAuditorOptions,
+    postTabletList,
+    postUpdateMenu,
   } from '@/api/modules/project-management/menuManagement';
+  import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
+
   import {
     MenuTableConfigItem,
     MenuTableListItem,
@@ -341,10 +348,6 @@
     SelectValue,
   } from '@/models/projectManagement/menuManagement';
   import { MenuEnum } from '@/enums/commonEnum';
-  import { Message, TableData } from '@arco-design/web-vue';
-  import MsTimeSelectorVue from '@/components/pure/ms-time-selector/MsTimeSelector.vue';
-  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
-  import DefectSync from './components/defectSync.vue';
 
   const appStore = useAppStore();
   const currentProjectId = computed(() => appStore.currentProjectId);

frontend/src/views/project-management/projectAndPermission/templateManagement/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div> 模版管理 </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+</script>
+
+<style scoped></style>

frontend/src/views/setting/organization/template/components/editFieldDrawer.vue

@@ -0,0 +1,377 @@
+<template>
+  <MsDrawer
+    v-model:visible="showDrawer"
+    :title="isEdit ? t('system.orgTemplate.update') : t('system.orgTemplate.addField')"
+    :ok-text="t(isEdit ? 'system.orgTemplate.update' : 'system.orgTemplate.addField')"
+    :ok-loading="drawerLoading"
+    :width="680"
+    :show-continue="!isEdit"
+    @confirm="handleDrawerConfirm"
+    @continue="handleDrawerConfirm(true)"
+    @cancel="handleDrawerCancel"
+  >
+    <div class="form">
+      <a-form ref="fieldFormRef" class="rounded-[4px]" :model="fieldForm" layout="vertical">
+        <a-form-item
+          field="name"
+          :label="t('system.orgTemplate.fieldName')"
+          :rules="[{ required: true, message: t('system.orgTemplate.fieldNameRules') }]"
+          required
+          asterisk-position="end"
+        >
+          <a-input
+            v-model:model-value="fieldForm.name"
+            :placeholder="t('system.orgTemplate.fieldNamePlaceholder')"
+            :max-length="250"
+            show-word-limit
+          ></a-input>
+        </a-form-item>
+        <a-form-item field="remark" :label="t('system.orgTemplate.description')" asterisk-position="end">
+          <a-textarea
+            v-model="fieldForm.remark"
+            :max-length="250"
+            :placeholder="t('system.orgTemplate.resDescription')"
+            :auto-size="{
+              maxRows: 1,
+            }"
+          ></a-textarea>
+        </a-form-item>
+        <a-form-item field="type" :label="t('system.orgTemplate.fieldType')" asterisk-position="end">
+          <a-select
+            v-model="fieldType"
+            class="w-[260px]"
+            :placeholder="t('system.orgTemplate.fieldTypePlaceholder')"
+            allow-clear
+            @change="fieldChangeHandler"
+          >
+            <a-option v-for="item of fieldOptions" :key="item.value" :value="item.id">
+              <div class="flex items-center"
+                ><MsIcon :type="item.value" class="mx-2" /> <span>{{ item.label }}</span></div
+              >
+            </a-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item
+          v-if="fieldType === 'MEMBER'"
+          field="type"
+          :label="t('system.orgTemplate.allowMultiMember')"
+          asterisk-position="end"
+        >
+          <a-switch v-model="isMultipleSelectMember" size="small" />
+        </a-form-item>
+        <!-- 选项选择器 -->
+        <a-form-item
+          v-if="showOptionsSelect"
+          field="options"
+          :label="t('system.orgTemplate.optionContent')"
+          asterisk-position="end"
+          :rules="[{ message: t('system.orgTemplate.optionContentRules') }]"
+        >
+          <MsBatchForm
+            ref="batchFormRef"
+            :models="optionsModels"
+            form-mode="create"
+            add-text="system.orgTemplate.addOptions"
+            :is-show-drag="true"
+            form-width="340px"
+            :default-vals="fieldDefaultValues"
+          />
+        </a-form-item>
+        <!-- 日期和数值 -->
+        <a-form-item
+          v-if="showDateOrNumber"
+          field="selectFormat"
+          :label="
+            fieldForm.type === 'NUMBER' ? t('system.orgTemplate.numberFormat') : t('system.orgTemplate.dateFormat')
+          "
+          asterisk-position="end"
+        >
+          <a-select
+            v-model="selectFormat"
+            class="w-[260px]"
+            :placeholder="t('system.orgTemplate.formatPlaceholder')"
+            allow-clear
+          >
+            <a-option v-for="item of showDateOrNumber" :key="item.value" :value="item.value">
+              <div class="flex items-center">{{ item.label }}</div>
+            </a-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </div>
+  </MsDrawer>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { FormInstance, Message, ValidatedError } from '@arco-design/web-vue';
+
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
+  import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
+
+  import { addOrUpdateOrdField, getOrdFieldDetail } from '@/api/modules/setting/template';
+  import { useI18n } from '@/hooks/useI18n';
+  import { useAppStore } from '@/store';
+  import { getGenerateId } from '@/utils';
+
+  import type { AddOrUpdateField } from '@/models/setting/template';
+  import { TemplateIconEnum } from '@/enums/templateEnum';
+
+  import { getFieldType } from './fieldSetting';
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const appStore = useAppStore();
+
+  const props = defineProps<{
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['success', 'update:visible']);
+
+  const showDrawer = ref<boolean>(false);
+  const drawerLoading = ref<boolean>(false);
+
+  const fieldFormRef = ref<FormInstance>();
+  const initFieldForm: AddOrUpdateField = {
+    name: '',
+    type: '',
+    remark: '',
+    scopeId: '',
+    scene: 'FUNCTIONAL',
+    options: [],
+  };
+  const fieldForm = ref<AddOrUpdateField>({ ...initFieldForm });
+  const isEdit = computed(() => !!fieldForm.value.id);
+  const selectFormat = ref(''); // 选择格式
+  const isMultipleSelectMember = ref<boolean | undefined>(false); // 成员多选
+  const fieldType = ref(''); // 整体字段类型
+
+  // 是否展示选项添加面板
+  const showOptionsSelect = computed(() => {
+    const showOptionsType = ['RADIO', 'CHECKBOX', 'SELECT', 'MULTIPLE_SELECT'];
+    return showOptionsType.includes(fieldType.value);
+  });
+
+  // 是否展示日期或数值
+  const showDateOrNumber = computed(() => {
+    return getFieldType(fieldType.value);
+  });
+
+  // 批量表单-1.仅选项情况
+  const onlyOptions: Ref<FormItemModel> = ref({
+    filed: 'text',
+    type: 'input',
+    label: '',
+    rules: [{ required: true, message: t('system.orgTemplate.optionContentRules') }],
+    placeholder: t('system.orgTemplate.optionsPlaceholder'),
+    hideAsterisk: true,
+    hideLabel: true,
+  });
+  const optionsModels: Ref<FormItemModel[]> = ref([{ ...onlyOptions.value }]);
+  const batchFormRef = ref<MsBatchFormInstance | null>(null);
+
+  const resetForm = () => {
+    fieldForm.value = { ...initFieldForm };
+    selectFormat.value = '';
+    isMultipleSelectMember.value = false;
+    fieldType.value = '';
+    batchFormRef.value?.resetForm();
+  };
+
+  const handleDrawerCancel = () => {
+    fieldFormRef.value?.resetFields();
+    showDrawer.value = false;
+    resetForm();
+  };
+
+  // 保存
+  const confirmHandler = async (isContinue: boolean) => {
+    try {
+      drawerLoading.value = true;
+      fieldForm.value.scene = route.query.type;
+      fieldForm.value = {
+        ...fieldForm.value,
+        scopeId: appStore.currentOrgId,
+        type: fieldType.value,
+      };
+      // 如果选择是日期或者数值
+      if (selectFormat.value) {
+        fieldForm.value.type = selectFormat.value;
+      }
+      // 如果选择是成员（单选||多选）
+      if (isMultipleSelectMember.value) {
+        fieldForm.value.type = isMultipleSelectMember.value ? 'MULTIPLE_MEMBER' : 'MEMBER';
+      }
+      // 如果选择是日期或者是数值
+      if (selectFormat.value) {
+        fieldForm.value.type = selectFormat.value;
+      }
+
+      // 处理参数
+      const { id, name, options, scopeId, scene, type, remark } = fieldForm.value;
+      const params: AddOrUpdateField = { name, options, scopeId, scene, type, remark };
+      if (isEdit) {
+        params.id = id;
+      }
+      await addOrUpdateOrdField(params);
+      Message.success(isEdit ? t('common.addSuccess') : t('common.updateSuccess'));
+      if (!isContinue) {
+        handleDrawerCancel();
+      }
+      resetForm();
+      emit('success');
+    } catch (error) {
+      console.log(error);
+    } finally {
+      drawerLoading.value = false;
+    }
+  };
+
+  // 新增 || 保存并继续添加
+  const handleDrawerConfirm = (isContinue: boolean) => {
+    fieldFormRef.value?.validate(async (errors: Record<string, ValidatedError> | undefined) => {
+      if (!errors) {
+        if (showOptionsSelect) {
+          fieldForm.value.options = (batchFormRef.value?.getFormResult() || []).map((item: any) => {
+            return {
+              ...item,
+              value: getGenerateId(),
+            };
+          });
+        }
+        confirmHandler(isContinue);
+      }
+    });
+  };
+
+  // 字段类型列表选项
+  const fieldOptions = ref([
+    {
+      id: 'TEXTAREA',
+      label: t('system.orgTemplate.textarea'),
+      value: TemplateIconEnum.TEXTAREA,
+    },
+    {
+      id: 'INPUT',
+      label: t('system.orgTemplate.input'),
+      value: TemplateIconEnum.INPUT,
+    },
+    {
+      id: 'RADIO',
+      label: t('system.orgTemplate.radio'),
+      value: TemplateIconEnum.RADIO,
+    },
+    {
+      id: 'CHECKBOX',
+      label: t('system.orgTemplate.checkbox'),
+      value: TemplateIconEnum.CHECKBOX,
+    },
+    {
+      id: 'SELECT',
+      label: t('system.orgTemplate.select'),
+      value: TemplateIconEnum.SELECT,
+    },
+    {
+      id: 'MULTIPLE_SELECT',
+      label: t('system.orgTemplate.multipleSelect'),
+      value: TemplateIconEnum.MULTIPLE_SELECT,
+    },
+    {
+      id: 'MEMBER',
+      label: t('system.orgTemplate.member'),
+      value: TemplateIconEnum.MEMBER,
+    },
+    {
+      id: 'DATE',
+      label: t('system.orgTemplate.date'),
+      value: TemplateIconEnum.DATE,
+    },
+    {
+      id: 'NUMBER',
+      label: t('system.orgTemplate.number'),
+      value: TemplateIconEnum.NUMBER,
+    },
+    {
+      id: 'MULTIPLE_INPUT',
+      label: t('system.orgTemplate.multipleInput'),
+      value: TemplateIconEnum.MULTIPLE_INPUT,
+    },
+  ]);
+
+  const fieldDefaultValues = ref([]);
+
+  // 获取字段选项详情
+  const getFieldDetail = async (id: string) => {
+    try {
+      const fieldDetail = await getOrdFieldDetail(id);
+      fieldDefaultValues.value = fieldDetail.options.map((item: any) => {
+        return {
+          ...item,
+        };
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  // 处理特殊情况编辑回显
+  const getSpecialHandler = (itemType: string): string => {
+    switch (itemType) {
+      case 'INT':
+        selectFormat.value = itemType;
+        return 'NUMBER';
+      case 'FLOAT':
+        selectFormat.value = itemType;
+        return 'NUMBER';
+      case 'MULTIPLE_MEMBER':
+        return 'MEMBER';
+      case 'DATETIME':
+        selectFormat.value = itemType;
+        return 'DATE';
+      default:
+        return itemType;
+    }
+  };
+
+  // 编辑
+  const isEditHandler = (item: AddOrUpdateField) => {
+    showDrawer.value = true;
+    isMultipleSelectMember.value = item.type === 'MULTIPLE_MEMBER';
+    if (isEdit && item.id) {
+      getFieldDetail(item.id);
+      fieldForm.value = {
+        ...item,
+        type: getSpecialHandler(item.type),
+      };
+      fieldType.value = getSpecialHandler(item.type);
+    }
+  };
+
+  // 字段类型改变回调
+  const fieldChangeHandler = () => {
+    optionsModels.value = [{ ...onlyOptions.value }];
+    fieldDefaultValues.value = [];
+  };
+
+  watch(
+    () => showDrawer.value,
+    (val) => {
+      emit('update:visible', val);
+    }
+  );
+
+  watch(
+    () => props.visible,
+    (val) => {
+      showDrawer.value = val;
+    }
+  );
+
+  defineExpose({
+    isEditHandler,
+  });
+</script>
+
+<style scoped></style>

frontend/src/views/setting/organization/template/components/fieldSetting.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+
+// 字段类型-日期
+const dateOptions = ref([
+  {
+    label: dayjs().format('YYYY/MM/DD'),
+    value: 'DATE',
+  },
+  {
+    label: dayjs().format('YYYY/MM/DD HH:mm:ss'),
+    value: 'DATETIME',
+  },
+]);
+
+// 字段类型- 数字
+const numberTypeOptions = ref([
+  {
+    label: '整数',
+    value: 'INT',
+  },
+  {
+    label: '保留小数',
+    value: 'FLOAT',
+  },
+]);
+
+export const getFieldType = (selectFieldType: string) => {
+  switch (selectFieldType) {
+    case 'DATE':
+      return dateOptions.value;
+    case 'NUMBER':
+      return numberTypeOptions.value;
+    default:
+      break;
+  }
+};
+
+export default {};

frontend/src/views/setting/organization/template/components/fieldSetting.vue

@@ -0,0 +1,278 @@
+<template>
+  <MsCard :has-breadcrumb="true" simple>
+    <a-alert class="mb-6" type="warning">{{ t('system.orgTemplate.enableDescription') }}</a-alert>
+    <div class="mb-4 flex items-center justify-between">
+      <span v-if="isEnable" class="font-medium">{{ t('system.orgTemplate.fieldList') }}</span>
+      <a-button v-else type="primary" :disabled="false" @click="fieldHandler('add')">
+        {{ t('system.orgTemplate.addField') }}
+      </a-button>
+      <a-input-search
+        v-model:model-value="keyword"
+        :placeholder="t('system.orgTemplate.searchTip')"
+        class="w-[230px]"
+        allow-clear
+        @search="searchFiled"
+        @press-enter="searchFiled"
+      ></a-input-search>
+    </div>
+    <MsBaseTable v-bind="propsRes" ref="tableRef" v-on="propsEvent">
+      <template #name="{ record }">
+        <MsIcon v-if="getIconType(record.type).type !== 'system'" :type="getIconType(record.type).iconName" size="16" />
+        <span class="ml-2">{{ record.name }}</span>
+        <span v-if="record.internal" class="system-flag">{{ t('system.orgTemplate.isSystem') }}</span>
+      </template>
+      <template #operation="{ record }">
+        <div class="flex flex-row flex-nowrap">
+          <MsButton class="!mr-0" @click="fieldHandler('edit', record)">{{ t('system.orgTemplate.edit') }}</MsButton>
+          <a-divider v-if="!record.internal" direction="vertical" />
+          <MsTableMoreAction
+            v-if="!record.internal"
+            :list="moreActions"
+            @select="(item) => handleMoreActionSelect(item, record)"
+          />
+        </div>
+      </template>
+      <template #fieldType="{ record }">
+        <span>{{ getIconType(record.type)['type'] }}</span>
+      </template>
+    </MsBaseTable>
+    <EditFieldDrawer ref="fieldDrawerRef" v-model:visible="showDrawer" @success="successHandler" />
+  </MsCard>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  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 MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import { 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 EditFieldDrawer from './editFieldDrawer.vue';
+
+  import { deleteOrdField, getFieldList } from '@/api/modules/setting/template';
+  import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
+  import { useAppStore, useTableStore } from '@/store';
+  import { characterLimit } from '@/utils';
+
+  import type { AddOrUpdateField } from '@/models/setting/template';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+  import { TemplateIconEnum } from '@/enums/templateEnum';
+
+  const { t } = useI18n();
+  const tableStore = useTableStore();
+  const appStore = useAppStore();
+  const route = useRoute();
+  const { openModal } = useModal();
+
+  const currentOrd = appStore.currentOrgId;
+
+  const fieldColumns: MsTableColumn = [
+    {
+      title: 'system.orgTemplate.name',
+      slotName: 'name',
+      dataIndex: 'name',
+      width: 300,
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'system.orgTemplate.columnFieldType',
+      dataIndex: 'type',
+      slotName: 'fieldType',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'system.orgTemplate.columnFieldDescription',
+      dataIndex: 'remark',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'system.orgTemplate.columnFieldUpdatedTime',
+      dataIndex: 'updateTime',
+      showDrag: true,
+      showInTable: true,
+    },
+    {
+      title: 'system.orgTemplate.operation',
+      slotName: 'operation',
+      fixed: 'right',
+      width: 200,
+      showInTable: true,
+      showDrag: false,
+    },
+  ];
+
+  tableStore.initColumn(TableKeyEnum.ORGANIZATION_TEMPLATE, fieldColumns, 'drawer');
+
+  const { propsRes, propsEvent, loadList, setLoadListParams, setProps } = useTable(getFieldList, {
+    tableKey: TableKeyEnum.ORGANIZATION_TEMPLATE,
+    scroll: { x: '1000px' },
+    selectable: false,
+    noDisable: true,
+    size: 'default',
+    showSetting: true,
+    showPagination: false,
+    heightUsed: 380,
+  });
+
+  const keyword = ref('');
+
+  // 查询字段
+  const searchFiled = async () => {
+    try {
+      const totalData = await getFieldList({ organizationId: currentOrd, scene: route.query.type });
+      const filterData = totalData.filter((item: AddOrUpdateField) => item.name.includes(keyword.value));
+      setProps({ data: filterData });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const fetchData = async () => {
+    const scene = route.query.type;
+    setLoadListParams({ organizationId: currentOrd, scene });
+    await loadList();
+  };
+
+  const tableRef = ref();
+  const isEnable = ref<boolean>(false); // 开始默认未启用
+
+  // 切换模版是否启用展示操作列
+  const isEnableOperation = () => {
+    if (isEnable.value) {
+      const noOperationColumn = fieldColumns.slice(0, -1);
+      tableStore.setColumns(TableKeyEnum.ORGANIZATION_TEMPLATE, noOperationColumn, 'drawer');
+      tableRef.value.initColumn();
+    } else {
+      tableStore.setColumns(TableKeyEnum.ORGANIZATION_TEMPLATE, fieldColumns, 'drawer');
+      tableRef.value.initColumn();
+    }
+  };
+
+  // 获取当前字段类型
+  const getIconType = (iconType: string) => {
+    switch (iconType) {
+      case 'INPUT':
+        return { iconName: TemplateIconEnum.INPUT, type: t('system.orgTemplate.input') };
+      case 'TEXTAREA':
+        return { iconName: TemplateIconEnum.TEXTAREA, type: t('system.orgTemplate.textarea') };
+      case 'SELECT':
+        return { iconName: TemplateIconEnum.SELECT, type: t('system.orgTemplate.select') };
+      case 'MULTIPLE_SELECT':
+        return { iconName: TemplateIconEnum.MULTIPLE_SELECT, type: t('system.orgTemplate.multipleSelect') };
+      case 'RADIO':
+        return { iconName: TemplateIconEnum.RADIO, type: t('system.orgTemplate.radio') };
+      case 'CHECKBOX':
+        return { iconName: TemplateIconEnum.CHECKBOX, type: t('system.orgTemplate.checkbox') };
+      case 'MEMBER':
+        return { iconName: TemplateIconEnum.MEMBER, type: t('system.orgTemplate.member') };
+      case 'MULTIPLE_MEMBER':
+        return { iconName: TemplateIconEnum.MULTIPLE_MEMBER, type: t('system.orgTemplate.multipleMember') };
+      case 'DATE':
+        return { iconName: TemplateIconEnum.DATE, type: t('system.orgTemplate.date') };
+      case 'DATETIME':
+        return { iconName: TemplateIconEnum.DATE, type: t('system.orgTemplate.dateTime') };
+      case 'INT':
+        return { iconName: TemplateIconEnum.NUMBER, type: t('system.orgTemplate.number') };
+      case 'FLOAT':
+        return { iconName: TemplateIconEnum.NUMBER, type: t('system.orgTemplate.number') };
+      case 'MULTIPLE_INPUT':
+        return { iconName: TemplateIconEnum.MULTIPLE_INPUT, type: t('system.orgTemplate.multipleInput') };
+      default:
+        return { type: 'system', iconName: '' };
+    }
+  };
+
+  const moreActions: ActionsItem[] = [
+    {
+      label: 'system.userGroup.delete',
+      danger: true,
+      eventTag: 'delete',
+    },
+  ];
+
+  // 删除字段
+  const handlerDelete = (record: AddOrUpdateField) => {
+    openModal({
+      type: 'error',
+      title: t('system.orgTemplate.deleteTitle', { name: characterLimit(record.name) }),
+      content: t('system.userGroup.beforeDeleteUserGroup'),
+      okText: t('system.userGroup.confirmDelete'),
+      cancelText: t('system.userGroup.cancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      onBeforeOk: async () => {
+        try {
+          if (record.id) await deleteOrdField(record.id);
+          Message.success(t('system.user.deleteUserSuccess'));
+          loadList();
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
+  };
+
+  // 更多操作
+  const handleMoreActionSelect = (item: ActionsItem, record: AddOrUpdateField) => {
+    if (item.eventTag === 'delete') {
+      handlerDelete(record);
+    }
+  };
+
+  const showDrawer = ref<boolean>(false);
+
+  const fieldDrawerRef = ref();
+  const fieldHandler = (type: string, record?: AddOrUpdateField) => {
+    showDrawer.value = true;
+    if (type === 'edit' && record) fieldDrawerRef.value.isEditHandler(record);
+  };
+
+  const successHandler = () => {
+    loadList();
+  };
+
+  const templateList = ref([
+    {
+      value: 'FUNCTIONAL',
+      name: 'system.orgTemplate.caseTemplates',
+    },
+    { value: 'API', name: 'system.orgTemplate.APITemplates' },
+    { value: 'UI', name: 'system.orgTemplate.UITemplates' },
+    { value: 'TEST_PLAN', name: 'system.orgTemplate.testPlanTemplates' },
+    { value: 'BUG', name: 'system.orgTemplate.defectTemplates' },
+  ]);
+
+  // 更新面包屑根据不同的模版
+  const updateBreadcrumbList = () => {
+    const { breadcrumbList } = appStore;
+    const breadTitle = templateList.value.find((item) => item.value === route.query.type);
+    if (breadTitle) {
+      breadcrumbList[0].locale = breadTitle.name;
+      appStore.setBreadcrumbList(breadcrumbList);
+    }
+  };
+
+  onMounted(() => {
+    fetchData();
+    isEnableOperation();
+    updateBreadcrumbList();
+  });
+</script>
+
+<style scoped lang="less">
+  .system-flag {
+    background: var(--color-text-n8);
+    @apply ml-2 rounded p-1 text-xs;
+  }
+</style>

frontend/src/views/setting/organization/template/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <MsCard simple>
+    <div style="display: flex !important" class="flex h-[100%] flex-col overflow-hidden">
+      <a-alert v-if="isShowTip" class="mb-4 py-3">
+        <div class="flex items-start justify-between">
+          <span class="w-[80%]">{{ t('system.orgTemplate.templateDescription') }}</span>
+          <span class="cursor-pointer text-[var(--color-text-2)]" @click="noRemindHandler">{{
+            t('system.orgTemplate.noReminders')
+          }}</span>
+        </div>
+      </a-alert>
+      <MsCardList
+        mode="static"
+        :card-min-width="360"
+        class="flex-1"
+        :shadow-limit="50"
+        :list="cardList"
+        :is-proportional="false"
+        :gap="16"
+        padding-bottom-space="16px"
+      >
+        <template #item="{ item, index }">
+          <TemplateItem :card-item="item" :index="index" />
+        </template>
+      </MsCardList>
+    </div>
+  </MsCard>
+</template>
+
+<script setup lang="ts">
+  /**
+   * @description 系统设置--组织--模版
+   */
+  import { onMounted, ref } from 'vue';
+
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsCardList from '@/components/business/ms-card-list/index.vue';
+  import TemplateItem from '@/components/business/ms-template-card/index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+  import useVisit from '@/hooks/useVisit';
+
+  const { t } = useI18n();
+
+  const cardList = ref([
+    {
+      id: 1001,
+      value: 'FUNCTIONAL',
+      name: t('system.orgTemplate.caseTemplates'),
+    },
+    { id: 1002, value: 'API', name: t('system.orgTemplate.APITemplates') },
+    { id: 1003, value: 'UI', name: t('system.orgTemplate.UITemplates') },
+    { id: 1004, value: 'TEST_PLAN', name: t('system.orgTemplate.testPlanTemplates') },
+    { id: 1005, value: 'BUG', name: t('system.orgTemplate.defectTemplates') },
+  ]);
+
+  const visitedKey = 'notRemind';
+  const { addVisited } = useVisit(visitedKey);
+  const { getIsVisited } = useVisit(visitedKey);
+
+  const isShowTip = ref<boolean>(true);
+  const noRemindHandler = () => {
+    isShowTip.value = false;
+    addVisited();
+  };
+
+  // 不再提醒
+  const doCheckIsTip = () => {
+    isShowTip.value = !getIsVisited();
+  };
+
+  onMounted(() => {
+    doCheckIsTip();
+  });
+</script>
+
+<style scoped lang="less"></style>

frontend/src/views/setting/organization/template/locale/en-US.ts

@@ -0,0 +1,60 @@
+export default {
+  'system.orgTemplate.searchTip': 'Search by name',
+  'system.orgTemplate.name': 'name',
+  'system.orgTemplate.columnFieldType': 'Field Type',
+  'system.orgTemplate.columnFieldDescription': 'Field Description',
+  'system.orgTemplate.columnFieldSystemField': 'System Field',
+  'system.orgTemplate.columnFieldUpdatedTime': 'Updated Time',
+  'system.orgTemplate.operation': 'operation',
+  'system.orgTemplate.delete': 'delete',
+  'system.orgTemplate.edit': 'edit',
+  'system.orgTemplate.save': 'save',
+  'system.orgTemplate.templateDescription':
+    'The template configuration contains the combination configuration of the collaboration type and the transaction type. It can be applied to multiple projects to facilitate unified management and organization of project collaboration and workflow',
+  'system.orgTemplate.noReminders': 'No reminders',
+  'system.orgTemplate.caseTemplates': 'UseCase templates',
+  'system.orgTemplate.APITemplates': 'API template',
+  'system.orgTemplate.UITemplates': 'UI template',
+  'system.orgTemplate.testPlanTemplates': 'TestPlan template',
+  'system.orgTemplate.defectTemplates': 'Defect template',
+  'system.orgTemplate.enabledTemplates': 'enabled',
+  'system.orgTemplate.fieldSetting': 'Setting',
+  'system.orgTemplate.TemplateManagement': 'Management',
+  'system.orgTemplate.workflowSetup': 'Workflow',
+  'system.orgTemplate.enable': 'Enable',
+  'system.orgTemplate.update': 'Update',
+  'system.orgTemplate.addField': 'Add Field',
+  'system.orgTemplate.enableDescription': 'The project template is enabled. Field Settings are inoperable',
+  'system.orgTemplate.isSystem': 'System',
+  'system.orgTemplate.fieldList': 'Field list',
+  'system.orgTemplate.addOptions': 'Add an option',
+  'system.orgTemplate.deleteTip':
+    'This field has been used in the template. After it is deleted, data will be lost. Exercise caution when performing this operation.',
+  'system.orgTemplate.deleteTitle': 'Are you sure to delete {name}?',
+  'system.orgTemplate.input': 'input',
+  'system.orgTemplate.textarea': 'textarea',
+  'system.orgTemplate.select': 'select',
+  'system.orgTemplate.multipleSelect': 'Multiple Select',
+  'system.orgTemplate.radio': 'radio',
+  'system.orgTemplate.checkbox': 'checkbox',
+  'system.orgTemplate.member': 'member',
+  'system.orgTemplate.multipleMember': 'Multiple Member',
+  'system.orgTemplate.date': 'date',
+  'system.orgTemplate.dateTime': 'Date Time',
+  'system.orgTemplate.number': 'number',
+  'system.orgTemplate.multipleInput': 'Multiple Input',
+  'system.orgTemplate.fieldName': 'Field name',
+  'system.orgTemplate.fieldNameRules': 'The field name cannot be empty',
+  'system.orgTemplate.fieldNamePlaceholder': 'Please enter a field name',
+  'system.orgTemplate.description': 'Description',
+  'system.orgTemplate.resDescription': 'Describe the resource pool',
+  'system.orgTemplate.fieldType': 'Field type',
+  'system.orgTemplate.fieldTypePlaceholder': 'Please select a field type',
+  'system.orgTemplate.allowMultiMember': 'Allows multiple members to be added',
+  'system.orgTemplate.optionContent': 'Option content',
+  'system.orgTemplate.optionContentRules': 'The option content cannot be empty',
+  'system.orgTemplate.numberFormat': 'Number format',
+  'system.orgTemplate.dateFormat': 'Date format',
+  'system.orgTemplate.formatPlaceholder': 'Please select a format',
+  'system.orgTemplate.optionsPlaceholder': 'Please enter options',
+};

frontend/src/views/setting/organization/template/locale/zh-CN.ts

@@ -0,0 +1,59 @@
+export default {
+  'system.orgTemplate.searchTip': '通过名称搜索',
+  'system.orgTemplate.name': '字段名称',
+  'system.orgTemplate.columnFieldType': '字段类型',
+  'system.orgTemplate.columnFieldDescription': '字段描述',
+  'system.orgTemplate.columnFieldSystemField': '系统字段',
+  'system.orgTemplate.columnFieldUpdatedTime': '更新时间',
+  'system.orgTemplate.operation': '操作',
+  'system.orgTemplate.delete': '删除',
+  'system.orgTemplate.edit': '编辑',
+  'system.orgTemplate.save': '保存',
+  'system.orgTemplate.templateDescription':
+    '模版配置包含协作类型和事项类型组合配置。可应用于多个项目中，方便统一管理组织项目协作方式和工作流',
+  'system.orgTemplate.noReminders': '不再提醒',
+  'system.orgTemplate.caseTemplates': '用例模版',
+  'system.orgTemplate.APITemplates': '接口模版',
+  'system.orgTemplate.UITemplates': 'UI 模版',
+  'system.orgTemplate.testPlanTemplates': '测试计划模版',
+  'system.orgTemplate.defectTemplates': '缺陷模版',
+  'system.orgTemplate.enabledTemplates': '已启用项目模版',
+  'system.orgTemplate.fieldSetting': '字段设置',
+  'system.orgTemplate.TemplateManagement': '模版管理',
+  'system.orgTemplate.workflowSetup': '工作流设置',
+  'system.orgTemplate.enable': '启用项目模版',
+  'system.orgTemplate.update': '更新',
+  'system.orgTemplate.addField': '新增字段',
+  'system.orgTemplate.enableDescription': '已启用项目模版，字段设置不可操作',
+  'system.orgTemplate.isSystem': '系统',
+  'system.orgTemplate.fieldList': '字段列表',
+  'system.orgTemplate.addOptions': '添加一个选项',
+  'system.orgTemplate.deleteTip': '该字段在模版中已使用，删除后数据将会丢失，请谨慎操作！',
+  'system.orgTemplate.deleteTitle': '确认删除 {name} 吗？',
+  'system.orgTemplate.input': '输入框',
+  'system.orgTemplate.textarea': '文本',
+  'system.orgTemplate.select': '单选下拉框',
+  'system.orgTemplate.multipleSelect': '多选下拉框',
+  'system.orgTemplate.radio': '单选',
+  'system.orgTemplate.checkbox': '复选框',
+  'system.orgTemplate.member': '成员',
+  'system.orgTemplate.multipleMember': '成员多选',
+  'system.orgTemplate.date': '日期',
+  'system.orgTemplate.dateTime': '日期时间',
+  'system.orgTemplate.number': '数字',
+  'system.orgTemplate.multipleInput': '多值输入框',
+  'system.orgTemplate.fieldName': '字段名称',
+  'system.orgTemplate.fieldNameRules': '字段名称不能为空',
+  'system.orgTemplate.fieldNamePlaceholder': '请输入字段名称',
+  'system.orgTemplate.description': '描述',
+  'system.orgTemplate.resDescription': '请对该资源池进行描述',
+  'system.orgTemplate.fieldType': '字段类型',
+  'system.orgTemplate.fieldTypePlaceholder': '请选择字段类型',
+  'system.orgTemplate.allowMultiMember': '允许添加多个成员',
+  'system.orgTemplate.optionContent': '选项内容',
+  'system.orgTemplate.optionContentRules': '选项内容不能为空',
+  'system.orgTemplate.numberFormat': '数字格式',
+  'system.orgTemplate.dateFormat': '日期格式',
+  'system.orgTemplate.formatPlaceholder': '请选择格式',
+  'system.orgTemplate.optionsPlaceholder': '请输入选项',
+};

frontend/src/views/setting/system/pluginManager/components/tableExpand.vue

@@ -12,11 +12,6 @@
         <span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="emit('MessageEvent', record, item)">{{
           item.name
         }}</span>
-        <span
-          class="ml-[150px] cursor-pointer text-[rgb(var(--primary-5))]"
-          @click="emit('MessageEvent', record, item)"
-          >{{ item.name }}</span
-        >
       </div>
     </div>
   </a-scrollbar>
@@ -55,6 +50,9 @@
     line-height: 54px;
     border-bottom: 1px solid var(--color-text-n8);
     @apply flex items-center align-middle leading-6;
+    &:last-of-type {
+      border-bottom: none;
+    }
   }
   .ms-self:hover {
     background: var(--color-fill-1);