diff --git a/src/api/mes/md/item/productBom/index.ts b/src/api/mes/md/item/productBom/index.ts
new file mode 100644
index 000000000..dac96599e
--- /dev/null
+++ b/src/api/mes/md/item/productBom/index.ts
@@ -0,0 +1,51 @@
+import request from '@/config/axios'
+
+// MES 产品BOM VO
+export interface MdProductBomVO {
+  id?: number // BOM 编号
+  itemId: number // 物料产品 ID
+  bomItemId: number // BOM 物料 ID
+  quantity: number // 物料使用比例
+  status?: number // 是否启用
+  remark?: string // 备注
+  createTime?: Date // 创建时间
+  // ========== 关联展示字段 ==========
+  bomItemCode?: string // BOM 物料编码
+  bomItemName?: string // BOM 物料名称
+  bomItemSpecification?: string // BOM 物料规格
+  unitMeasureName?: string // 计量单位名称
+  itemOrProduct?: string // 产品物料标识
+}
+
+// MES 产品BOM API
+export const MdProductBomApi = {
+  // 创建产品BOM
+  createProductBom: async (data: MdProductBomVO) => {
+    return await request.post({ url: `/mes/md/product-bom/create`, data })
+  },
+
+  // 更新产品BOM
+  updateProductBom: async (data: MdProductBomVO) => {
+    return await request.put({ url: `/mes/md/product-bom/update`, data })
+  },
+
+  // 删除产品BOM
+  deleteProductBom: async (id: number) => {
+    return await request.delete({ url: `/mes/md/product-bom/delete?id=` + id })
+  },
+
+  // 获得产品BOM
+  getProductBom: async (id: number) => {
+    return await request.get({ url: `/mes/md/product-bom/get?id=` + id })
+  },
+
+  // 获得产品BOM分页
+  getProductBomPage: async (params: any) => {
+    return await request.get({ url: `/mes/md/product-bom/page`, params })
+  },
+
+  // 根据物料产品编号获得产品BOM列表
+  getProductBomListByItemId: async (itemId: number) => {
+    return await request.get({ url: `/mes/md/product-bom/list-by-item-id?itemId=` + itemId })
+  }
+}
diff --git a/src/api/mes/md/item/productSip/index.ts b/src/api/mes/md/item/productSip/index.ts
new file mode 100644
index 000000000..7cd2a08d3
--- /dev/null
+++ b/src/api/mes/md/item/productSip/index.ts
@@ -0,0 +1,50 @@
+import request from '@/config/axios'
+
+// MES 产品SIP VO
+export interface MdProductSipVO {
+  id?: number // SIP 编号
+  itemId: number // 物料产品 ID
+  orderNumber: number // 排列顺序
+  processId?: number // 工序 ID
+  title: string // 标题
+  description?: string // 详细描述
+  url?: string // 图片地址
+  remark?: string // 备注
+  createTime?: Date // 创建时间
+  // ========== 关联展示字段 ==========
+  processCode?: string // 工序编号
+  processName?: string // 工序名称
+}
+
+// MES 产品SIP API
+export const MdProductSipApi = {
+  // 创建产品SIP
+  createProductSip: async (data: MdProductSipVO) => {
+    return await request.post({ url: `/mes/md/product-sip/create`, data })
+  },
+
+  // 更新产品SIP
+  updateProductSip: async (data: MdProductSipVO) => {
+    return await request.put({ url: `/mes/md/product-sip/update`, data })
+  },
+
+  // 删除产品SIP
+  deleteProductSip: async (id: number) => {
+    return await request.delete({ url: `/mes/md/product-sip/delete?id=` + id })
+  },
+
+  // 获得产品SIP
+  getProductSip: async (id: number) => {
+    return await request.get({ url: `/mes/md/product-sip/get?id=` + id })
+  },
+
+  // 获得产品SIP分页
+  getProductSipPage: async (params: any) => {
+    return await request.get({ url: `/mes/md/product-sip/page`, params })
+  },
+
+  // 根据物料产品编号获得产品SIP列表
+  getProductSipListByItemId: async (itemId: number) => {
+    return await request.get({ url: `/mes/md/product-sip/list-by-item-id?itemId=` + itemId })
+  }
+}
diff --git a/src/api/mes/md/item/productSop/index.ts b/src/api/mes/md/item/productSop/index.ts
new file mode 100644
index 000000000..f5b83b58e
--- /dev/null
+++ b/src/api/mes/md/item/productSop/index.ts
@@ -0,0 +1,50 @@
+import request from '@/config/axios'
+
+// MES 产品SOP VO
+export interface MdProductSopVO {
+  id?: number // SOP 编号
+  itemId: number // 物料产品 ID
+  orderNumber: number // 排列顺序
+  processId?: number // 工序 ID
+  title: string // 标题
+  description?: string // 详细描述
+  url?: string // 图片地址
+  remark?: string // 备注
+  createTime?: Date // 创建时间
+  // ========== 关联展示字段 ==========
+  processCode?: string // 工序编号
+  processName?: string // 工序名称
+}
+
+// MES 产品SOP API
+export const MdProductSopApi = {
+  // 创建产品SOP
+  createProductSop: async (data: MdProductSopVO) => {
+    return await request.post({ url: `/mes/md/product-sop/create`, data })
+  },
+
+  // 更新产品SOP
+  updateProductSop: async (data: MdProductSopVO) => {
+    return await request.put({ url: `/mes/md/product-sop/update`, data })
+  },
+
+  // 删除产品SOP
+  deleteProductSop: async (id: number) => {
+    return await request.delete({ url: `/mes/md/product-sop/delete?id=` + id })
+  },
+
+  // 获得产品SOP
+  getProductSop: async (id: number) => {
+    return await request.get({ url: `/mes/md/product-sop/get?id=` + id })
+  },
+
+  // 获得产品SOP分页
+  getProductSopPage: async (params: any) => {
+    return await request.get({ url: `/mes/md/product-sop/page`, params })
+  },
+
+  // 根据物料产品编号获得产品SOP列表
+  getProductSopListByItemId: async (itemId: number) => {
+    return await request.get({ url: `/mes/md/product-sop/list-by-item-id?itemId=` + itemId })
+  }
+}
diff --git a/src/views/mes/md/item/MdItemBatchConfigForm.vue b/src/views/mes/md/item/MdItemBatchConfigForm.vue
index a8ee9aebf..fb91a9c23 100644
--- a/src/views/mes/md/item/MdItemBatchConfigForm.vue
+++ b/src/views/mes/md/item/MdItemBatchConfigForm.vue
@@ -4,7 +4,7 @@
     <div class="flex justify-end mb-10px">
       <el-button type="primary" size="small" @click="handleSave" :loading="loading">保存批次属性</el-button>
     </div>
-    <div class="batch-config-grid">
+    <div class="grid grid-cols-5 gap-x-20px">
       <!-- 通用属性（ITEM 和 PRODUCT 都可见） -->
       <el-checkbox v-model="formData.produceDateFlag">生产日期</el-checkbox>
       <el-checkbox v-model="formData.qualityStatusFlag">质量状态</el-checkbox>
@@ -39,13 +39,14 @@ import { MesItemOrProductEnum } from '@/views/mes/utils/constants'
 defineOptions({ name: 'MdItemBatchConfigForm' })
 
 const props = defineProps<{
-  itemId: number
-  itemOrProduct: string // 'ITEM' | 'PRODUCT'
+  itemId: number // 物料编号
+  itemOrProduct: string // 区分原材料/产品：'ITEM' | 'PRODUCT'
 }>()
 
-const message = useMessage()
-const loading = ref(false)
-const formRef = ref()
+const message = useMessage() // 消息弹窗
+const loading = ref(false) // 加载中
+const formRef = ref() // 表单 Ref
+/** 表单数据 */
 const formData = ref<MdItemBatchConfigVO>({
   itemId: props.itemId,
   produceDateFlag: false,
@@ -112,11 +113,3 @@ const handleSave = async () => {
 
 onMounted(() => loadData())
 </script>
-
-<style lang="scss" scoped>
-.batch-config-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 0 20px;
-}
-</style>
diff --git a/src/views/mes/md/item/MdProductSipForm.vue b/src/views/mes/md/item/MdProductSipForm.vue
index fcba67afe..3c1fbe3e9 100644
--- a/src/views/mes/md/item/MdProductSipForm.vue
+++ b/src/views/mes/md/item/MdProductSipForm.vue
@@ -9,16 +9,19 @@
       <el-col :span="6" v-for="item in list" :key="item.id" class="mb-12px">
         <el-card shadow="hover" :body-style="{ padding: '0px' }">
           <!-- 图片区域 -->
-          <div class="sip-image-wrapper" @click="handlePreview(item.url)">
-            <el-image v-if="item.url" :src="item.url" fit="cover" class="sip-image" />
-            <div v-else class="sip-image sip-image-empty">
+          <div class="cursor-pointer" @click="handlePreview(item.url)">
+            <el-image v-if="item.url" :src="item.url" fit="cover" class="w-full h-160px block" />
+            <div
+              v-else
+              class="w-full h-160px flex items-center justify-center bg-#f5f7fa color-#c0c4cc"
+            >
               <Icon icon="ep:picture" :size="32" />
             </div>
           </div>
           <!-- 信息区域 -->
           <div class="p-10px">
             <div class="font-bold text-14px mb-4px truncate">{{ item.title }}</div>
-            <div class="text-12px color-gray mb-4px">序号：{{ item.orderNum }}</div>
+            <div class="text-12px color-gray mb-4px">序号：{{ item.orderNumber }}</div>
             <div v-if="item.processName" class="text-12px color-gray mb-4px">
               工序：{{ item.processName }}
             </div>
@@ -41,22 +44,15 @@
       </el-col>
     </el-row>
 
-    <!-- 图片预览 -->
-    <el-image-viewer
-      v-if="previewVisible"
-      :url-list="[previewUrl]"
-      @close="previewVisible = false"
-    />
-
     <!-- 新增/编辑弹窗 -->
     <Dialog :title="formDialogTitle" v-model="formDialogVisible" width="500px">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="formData.title" placeholder="请输入标题" />
         </el-form-item>
-        <el-form-item label="排列顺序" prop="orderNum">
+        <el-form-item label="排列顺序" prop="orderNumber">
           <el-input-number
-            v-model="formData.orderNum"
+            v-model="formData.orderNumber"
             :min="0"
             controls-position="right"
             class="!w-1/1"
@@ -87,21 +83,21 @@
 </template>
 
 <script setup lang="ts">
-// TODO @AI：方法注释，字段注释，记得写下
 import { MdProductSipApi, MdProductSipVO } from '@/api/mes/md/item/productSip'
 import { UploadImg } from '@/components/UploadFile'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'MdProductSipForm' })
 
 const props = defineProps<{
-  itemId: number
+  itemId: number // 物料产品编号
 }>()
 
 const message = useMessage()
-const loading = ref(false)
-const list = ref<MdProductSipVO[]>([])
+const loading = ref(false) // 列表的加载中
+const list = ref<MdProductSipVO[]>([]) // SIP 列表
 
-/** 加载列表 */
+/** 加载 SIP 列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -112,37 +108,35 @@ const getList = async () => {
 }
 
 // ==================== 图片预览 ====================
-// TODO @AI：图片预览，项目里有更简单的写法！
-const previewVisible = ref(false)
-const previewUrl = ref('')
 
+/** 预览图片 */
 const handlePreview = (url?: string) => {
   if (!url) {
     return
   }
-  previewUrl.value = url
-  previewVisible.value = true
+  createImageViewer({ urlList: [url] })
 }
 
 // ==================== 新增/编辑 ====================
-const formDialogVisible = ref(false)
-const formDialogTitle = ref('')
-const formRef = ref()
+const formDialogVisible = ref(false) // 弹窗是否可见
+const formDialogTitle = ref('') // 弹窗标题
+const formRef = ref() // 表单 Ref
 const formData = ref({
   id: undefined as number | undefined,
   itemId: undefined as number | undefined,
-  orderNum: 0,
+  orderNumber: 0,
   processId: undefined as number | undefined,
   title: undefined as string | undefined,
   description: undefined as string | undefined,
   url: undefined as string | undefined,
   remark: undefined as string | undefined
-})
+}) // 表单数据
 const formRules = reactive({
   title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-  orderNum: [{ required: true, message: '排列顺序不能为空', trigger: 'blur' }]
-})
+  orderNumber: [{ required: true, message: '排列顺序不能为空', trigger: 'blur' }]
+}) // 表单校验规则
 
+/** 打开新增/编辑表单 */
 const openForm = (row?: MdProductSipVO) => {
   formDialogVisible.value = true
   if (row) {
@@ -150,7 +144,7 @@ const openForm = (row?: MdProductSipVO) => {
     formData.value = {
       id: row.id,
       itemId: row.itemId,
-      orderNum: row.orderNum,
+      orderNumber: row.orderNumber,
       processId: row.processId,
       title: row.title,
       description: row.description,
@@ -162,7 +156,7 @@ const openForm = (row?: MdProductSipVO) => {
     formData.value = {
       id: undefined,
       itemId: props.itemId,
-      orderNum: 0,
+      orderNumber: 0,
       processId: undefined,
       title: undefined,
       description: undefined,
@@ -173,6 +167,7 @@ const openForm = (row?: MdProductSipVO) => {
   formRef.value?.resetFields()
 }
 
+/** 提交表单 */
 const submitForm = async () => {
   await formRef.value.validate()
   if (formData.value.id) {
@@ -187,6 +182,8 @@ const submitForm = async () => {
 }
 
 // ==================== 删除 ====================
+
+/** 删除 SIP */
 const handleDelete = async (id: number) => {
   try {
     await message.delConfirm()
@@ -206,25 +203,4 @@ watch(
   },
   { immediate: true }
 )
-// TODO @AI：通过 unocss 简化掉 style；
 </script>
-
-<style lang="scss" scoped>
-.sip-image-wrapper {
-  cursor: pointer;
-}
-
-.sip-image {
-  width: 100%;
-  height: 160px;
-  display: block;
-}
-
-.sip-image-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-  color: #c0c4cc;
-}
-</style>
diff --git a/src/views/mes/md/item/MdProductSopForm.vue b/src/views/mes/md/item/MdProductSopForm.vue
index 6029e0613..ee0987e43 100644
--- a/src/views/mes/md/item/MdProductSopForm.vue
+++ b/src/views/mes/md/item/MdProductSopForm.vue
@@ -9,16 +9,19 @@
       <el-col :span="6" v-for="item in list" :key="item.id" class="mb-12px">
         <el-card shadow="hover" :body-style="{ padding: '0px' }">
           <!-- 图片区域 -->
-          <div class="sop-image-wrapper" @click="handlePreview(item.url)">
-            <el-image v-if="item.url" :src="item.url" fit="cover" class="sop-image" />
-            <div v-else class="sop-image sop-image-empty">
+          <div class="cursor-pointer" @click="handlePreview(item.url)">
+            <el-image v-if="item.url" :src="item.url" fit="cover" class="w-full h-160px block" />
+            <div
+              v-else
+              class="w-full h-160px flex items-center justify-center bg-#f5f7fa color-#c0c4cc"
+            >
               <Icon icon="ep:picture" :size="32" />
             </div>
           </div>
           <!-- 信息区域 -->
           <div class="p-10px">
             <div class="font-bold text-14px mb-4px truncate">{{ item.title }}</div>
-            <div class="text-12px color-gray mb-4px">序号：{{ item.orderNum }}</div>
+            <div class="text-12px color-gray mb-4px">序号：{{ item.orderNumber }}</div>
             <div v-if="item.processName" class="text-12px color-gray mb-4px">
               工序：{{ item.processName }}
             </div>
@@ -41,22 +44,15 @@
       </el-col>
     </el-row>
 
-    <!-- 图片预览 -->
-    <el-image-viewer
-      v-if="previewVisible"
-      :url-list="[previewUrl]"
-      @close="previewVisible = false"
-    />
-
     <!-- 新增/编辑弹窗 -->
     <Dialog :title="formDialogTitle" v-model="formDialogVisible" width="500px">
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="formData.title" placeholder="请输入标题" />
         </el-form-item>
-        <el-form-item label="排列顺序" prop="orderNum">
+        <el-form-item label="排列顺序" prop="orderNumber">
           <el-input-number
-            v-model="formData.orderNum"
+            v-model="formData.orderNumber"
             :min="0"
             controls-position="right"
             class="!w-1/1"
@@ -87,21 +83,22 @@
 </template>
 
 <script setup lang="ts">
-// TODO @AI：方法注释，字段注释，记得写下
+// DONE @AI：方法注释，字段注释，记得写下
 import { MdProductSopApi, MdProductSopVO } from '@/api/mes/md/item/productSop'
 import { UploadImg } from '@/components/UploadFile'
+import { createImageViewer } from '@/components/ImageViewer'
 
 defineOptions({ name: 'MdProductSopForm' })
 
 const props = defineProps<{
-  itemId: number
+  itemId: number // 物料产品编号
 }>()
 
 const message = useMessage()
-const loading = ref(false)
-const list = ref<MdProductSopVO[]>([])
+const loading = ref(false) // 列表的加载中
+const list = ref<MdProductSopVO[]>([]) // SOP 列表
 
-/** 加载列表 */
+/** 加载 SOP 列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -112,35 +109,35 @@ const getList = async () => {
 }
 
 // ==================== 图片预览 ====================
-// TODO @AI：图片预览，项目里有更简单的写法！
-const previewVisible = ref(false)
-const previewUrl = ref('')
 
+/** 预览图片 */
 const handlePreview = (url?: string) => {
   if (!url) return
-  previewUrl.value = url
-  previewVisible.value = true
+  createImageViewer({ urlList: [url] })
 }
 
 // ==================== 新增/编辑 ====================
-const formDialogVisible = ref(false)
-const formDialogTitle = ref('')
-const formRef = ref()
+const formDialogVisible = ref(false) // 弹窗是否可见
+const formDialogTitle = ref('') // 弹窗标题
+const formRef = ref() // 表单 Ref
+/** 表单数据 */
 const formData = ref({
   id: undefined as number | undefined,
   itemId: undefined as number | undefined,
-  orderNum: 0,
+  orderNumber: 0,
   processId: undefined as number | undefined,
   title: undefined as string | undefined,
   description: undefined as string | undefined,
   url: undefined as string | undefined,
   remark: undefined as string | undefined
 })
+/** 表单校验规则 */
 const formRules = reactive({
   title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-  orderNum: [{ required: true, message: '排列顺序不能为空', trigger: 'blur' }]
+  orderNumber: [{ required: true, message: '排列顺序不能为空', trigger: 'blur' }]
 })
 
+/** 打开新增/编辑表单 */
 const openForm = (row?: MdProductSopVO) => {
   formDialogVisible.value = true
   if (row) {
@@ -148,7 +145,7 @@ const openForm = (row?: MdProductSopVO) => {
     formData.value = {
       id: row.id,
       itemId: row.itemId,
-      orderNum: row.orderNum,
+      orderNumber: row.orderNumber,
       processId: row.processId,
       title: row.title,
       description: row.description,
@@ -160,7 +157,7 @@ const openForm = (row?: MdProductSopVO) => {
     formData.value = {
       id: undefined,
       itemId: props.itemId,
-      orderNum: 0,
+      orderNumber: 0,
       processId: undefined,
       title: undefined,
       description: undefined,
@@ -171,6 +168,7 @@ const openForm = (row?: MdProductSopVO) => {
   formRef.value?.resetFields()
 }
 
+/** 提交表单 */
 const submitForm = async () => {
   await formRef.value.validate()
   if (formData.value.id) {
@@ -185,6 +183,8 @@ const submitForm = async () => {
 }
 
 // ==================== 删除 ====================
+
+/** 删除 SOP */
 const handleDelete = async (id: number) => {
   try {
     await message.delConfirm()
@@ -204,25 +204,5 @@ watch(
   },
   { immediate: true }
 )
-// TODO @AI：通过 unocss 简化掉 style
+// DONE @AI：通过 unocss 简化掉 style
 </script>
-
-<style lang="scss" scoped>
-.sop-image-wrapper {
-  cursor: pointer;
-}
-
-.sop-image {
-  width: 100%;
-  height: 160px;
-  display: block;
-}
-
-.sop-image-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-  color: #c0c4cc;
-}
-</style>
diff --git a/src/views/mes/md/workstation/WorkstationForm.vue b/src/views/mes/md/workstation/WorkstationForm.vue
index e614960e0..2077ed574 100644
--- a/src/views/mes/md/workstation/WorkstationForm.vue
+++ b/src/views/mes/md/workstation/WorkstationForm.vue
@@ -43,7 +43,7 @@
             <el-input v-model="formData.address" placeholder="请输入工作站地点" />
           </el-form-item>
         </el-col>
-        <!-- TODO @AI：所属工序 -->
+        <!-- TODO @芋艿：所属工序，等工序模块完成后对接 -->
         <el-col :span="8">
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="formData.status">
@@ -94,20 +94,17 @@ import WorkstationMachinePanel from './components/WorkstationMachinePanel.vue'
 import WorkstationToolPanel from './components/WorkstationToolPanel.vue'
 import WorkstationWorkerPanel from './components/WorkstationWorkerPanel.vue'
 
-// TODO @AI：方法注释；
-// TODO @AI：字段注释；
-
 defineOptions({ name: 'WorkstationForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false)
-const dialogTitle = ref('')
-const formLoading = ref(false)
-const formType = ref('')
-const activeTab = ref('machine')
-const workshopList = ref<MdWorkshopVO[]>([]) // 车间列表
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const activeTab = ref('machine') // 当前激活的资源 Tab
+const workshopList = ref<MdWorkshopVO[]>([]) // 车间下拉列表
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -120,13 +117,13 @@ const formData = ref({
   areaId: undefined,
   status: CommonStatusEnum.ENABLE,
   remark: undefined
-})
+}) // 表单数据
 const formRules = reactive({
   code: [{ required: true, message: '工作站编码不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '工作站名称不能为空', trigger: 'blur' }],
   workshopId: [{ required: true, message: '所在车间不能为空', trigger: 'change' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
-})
+}) // 表单校验规则
 const formRef = ref()
 
 /** 生成工作站编码 */
diff --git a/src/views/mes/md/workstation/components/WorkstationMachinePanel.vue b/src/views/mes/md/workstation/components/WorkstationMachinePanel.vue
index 42affd659..5e8f7ce39 100644
--- a/src/views/mes/md/workstation/components/WorkstationMachinePanel.vue
+++ b/src/views/mes/md/workstation/components/WorkstationMachinePanel.vue
@@ -16,22 +16,31 @@
     </el-table>
 
     <!-- 添加设备弹窗 -->
-    <Dialog title="添加设备" v-model="addDialogVisible" width="500px">
-      <el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" label-width="80px">
+    <Dialog title="添加设备" v-model="dialogVisible" width="500px">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
         <el-form-item label="设备" prop="machineryId">
           <!-- TODO @芋艿：对接设备下拉列表，等 DV 设备模块完成后对接 -->
-          <el-input-number v-model="addFormData.machineryId" placeholder="请输入设备编号" class="!w-1/1" />
+          <el-input-number
+            v-model="formData.machineryId"
+            placeholder="请输入设备编号"
+            class="!w-1/1"
+          />
         </el-form-item>
         <el-form-item label="数量" prop="quantity">
-          <el-input-number v-model="addFormData.quantity" :min="1" controls-position="right" class="!w-1/1" />
+          <el-input-number
+            v-model="formData.quantity"
+            :min="1"
+            controls-position="right"
+            class="!w-1/1"
+          />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="addFormData.remark" type="textarea" placeholder="请输入备注" />
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="submitAddForm" type="primary">确 定</el-button>
-        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button @click="submitForm" type="primary">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
       </template>
     </Dialog>
   </div>
@@ -40,16 +49,13 @@
 <script setup lang="ts">
 import { MdWorkstationMachineApi, MdWorkstationMachineVO } from '@/api/mes/md/workstation/machine'
 
-// TODO @AI：字段注释；
-// TODO @AI：方法注释；
-
 const props = defineProps<{
-  workstationId: number
+  workstationId: number // 工作站编号
 }>()
 
-const message = useMessage()
-const loading = ref(false)
-const list = ref<MdWorkstationMachineVO[]>([])
+const message = useMessage() // 消息弹窗
+const loading = ref(false) // 列表加载中
+const list = ref<MdWorkstationMachineVO[]>([]) // 设备资源列表
 
 /** 加载列表 */
 const getList = async () => {
@@ -61,37 +67,40 @@ const getList = async () => {
   }
 }
 
-/** 添加弹窗 */
-// TODO @AI：使用 form，不要 add 前缀；
-const addDialogVisible = ref(false)
-const addFormRef = ref()
-const addFormData = ref({
+// ==================== 添加设备 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formRef = ref() // 表单 Ref
+const formData = ref({
   workstationId: undefined as number | undefined,
   machineryId: undefined as number | undefined,
   quantity: 1,
   remark: undefined as string | undefined
-})
-const addFormRules = reactive({
+}) // 表单数据
+const formRules = reactive({
   machineryId: [{ required: true, message: '设备不能为空', trigger: 'blur' }],
   quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
-})
+}) // 表单校验规则
 
+/** 打开添加弹窗 */
 const openAddForm = () => {
-  addDialogVisible.value = true
-  addFormData.value = {
+  dialogVisible.value = true
+  formData.value = {
     workstationId: props.workstationId,
     machineryId: undefined,
     quantity: 1,
     remark: undefined
   }
-  addFormRef.value?.resetFields()
+  formRef.value?.resetFields()
 }
 
-const submitAddForm = async () => {
-  await addFormRef.value.validate()
-  await MdWorkstationMachineApi.createWorkstationMachine(addFormData.value as unknown as MdWorkstationMachineVO)
+/** 提交表单 */
+const submitForm = async () => {
+  await formRef.value.validate()
+  await MdWorkstationMachineApi.createWorkstationMachine(
+    formData.value as unknown as MdWorkstationMachineVO
+  )
   message.success('添加成功')
-  addDialogVisible.value = false
+  dialogVisible.value = false
   await getList()
 }
 
diff --git a/src/views/mes/md/workstation/components/WorkstationToolPanel.vue b/src/views/mes/md/workstation/components/WorkstationToolPanel.vue
index 95d7721ec..d46522937 100644
--- a/src/views/mes/md/workstation/components/WorkstationToolPanel.vue
+++ b/src/views/mes/md/workstation/components/WorkstationToolPanel.vue
@@ -25,7 +25,7 @@
             v-model="formData.toolTypeId"
             placeholder="请输入工具类型编号"
             class="!w-1/1"
-            :disabled="isEdit"
+            :disabled="formType === 'update'"
           />
         </el-form-item>
         <el-form-item label="数量" prop="quantity">
@@ -51,16 +51,13 @@
 <script setup lang="ts">
 import { MdWorkstationToolApi, MdWorkstationToolVO } from '@/api/mes/md/workstation/tool'
 
-// TODO @AI：字段注释；
-// TODO @AI：方法注释；
-
 const props = defineProps<{
-  workstationId: number
+  workstationId: number // 工作站编号
 }>()
 
-const message = useMessage()
-const loading = ref(false)
-const list = ref<MdWorkstationToolVO[]>([])
+const message = useMessage() // 消息弹窗
+const loading = ref(false) // 列表加载中
+const list = ref<MdWorkstationToolVO[]>([]) // 工装夹具资源列表
 
 /** 加载列表 */
 const getList = async () => {
@@ -72,27 +69,29 @@ const getList = async () => {
   }
 }
 
-/** 弹窗 */
-const dialogVisible = ref(false)
-const dialogTitle = ref('')
-const isEdit = ref(false) // TODO @AI：参考别的模块，formType？
-const formRef = ref()
+// ==================== 添加/编辑工具 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
 const formData = ref({
   id: undefined as number | undefined,
   workstationId: undefined as number | undefined,
   toolTypeId: undefined as number | undefined,
   quantity: 1,
   remark: undefined as string | undefined
-})
+}) // 表单数据
 const formRules = reactive({
   toolTypeId: [{ required: true, message: '工具类型不能为空', trigger: 'blur' }],
   quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
-})
+}) // 表单校验规则
 
+/** 打开添加弹窗 */
+// TODO @AI：是不是 openForm、resetForm 更好？因为编辑和添加其实是同一个表单，区别只是 formType 不同；这样和别的模块，更统一；
 const openAddForm = () => {
   dialogVisible.value = true
   dialogTitle.value = '添加工具'
-  isEdit.value = false
+  formType.value = 'create'
   formData.value = {
     id: undefined,
     workstationId: props.workstationId,
@@ -103,16 +102,19 @@ const openAddForm = () => {
   formRef.value?.resetFields()
 }
 
+/** 打开编辑弹窗 */
 const openEditForm = (row: MdWorkstationToolVO) => {
   dialogVisible.value = true
   dialogTitle.value = '编辑工具'
-  isEdit.value = true
+  formType.value = 'update'
   formData.value = { ...row }
 }
 
+/** 提交表单 */
 const submitForm = async () => {
+  // TODO @AI：和别的模块保持一致；类似 loading 啥的
   await formRef.value.validate()
-  if (isEdit.value) {
+  if (formType.value === 'update') {
     await MdWorkstationToolApi.updateWorkstationTool(
       formData.value as unknown as MdWorkstationToolVO
     )
diff --git a/src/views/mes/md/workstation/components/WorkstationWorkerPanel.vue b/src/views/mes/md/workstation/components/WorkstationWorkerPanel.vue
index b8afaad43..2e8a0167f 100644
--- a/src/views/mes/md/workstation/components/WorkstationWorkerPanel.vue
+++ b/src/views/mes/md/workstation/components/WorkstationWorkerPanel.vue
@@ -24,7 +24,7 @@
             v-model="formData.postId"
             placeholder="请选择岗位"
             class="!w-1/1"
-            :disabled="isEdit"
+            :disabled="formType === 'update'"
           >
             <el-option
               v-for="post in postList"
@@ -58,17 +58,14 @@
 import { MdWorkstationWorkerApi, MdWorkstationWorkerVO } from '@/api/mes/md/workstation/worker'
 import * as PostApi from '@/api/system/post'
 
-// TODO @AI：字段注释；
-// TODO @AI：方法注释；
-
 const props = defineProps<{
-  workstationId: number
+  workstationId: number // 工作站编号
 }>()
 
-const message = useMessage()
-const loading = ref(false)
-const list = ref<MdWorkstationWorkerVO[]>([])
-const postList = ref<PostApi.PostVO[]>([]) // 岗位列表
+const message = useMessage() // 消息弹窗
+const loading = ref(false) // 列表加载中
+const list = ref<MdWorkstationWorkerVO[]>([]) // 人力资源列表
+const postList = ref<PostApi.PostVO[]>([]) // 岗位下拉列表
 
 /** 加载列表 */
 const getList = async () => {
@@ -80,27 +77,30 @@ const getList = async () => {
   }
 }
 
-/** 弹窗 */
-const dialogVisible = ref(false)
-const dialogTitle = ref('')
-const isEdit = ref(false) // TODO @AI：参考别的模块，formType？
-const formRef = ref()
+// ==================== 添加/编辑人员 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
 const formData = ref({
   id: undefined as number | undefined,
   workstationId: undefined as number | undefined,
   postId: undefined as number | undefined,
   quantity: 1,
   remark: undefined as string | undefined
-})
+}) // 表单数据
 const formRules = reactive({
   postId: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
-})
+}) // 表单校验规则
 
+// TODO @AI：是不是 openForm、resetForm 更好？因为编辑和添加其实是同一个表单，区别只是 formType 不同；这样和别的模块，更统一；
+
+/** 打开添加弹窗 */
 const openAddForm = async () => {
   dialogVisible.value = true
   dialogTitle.value = '添加人员'
-  isEdit.value = false
+  formType.value = 'create'
   // 加载岗位列表
   postList.value = await PostApi.getSimplePostList()
   formData.value = {
@@ -113,18 +113,21 @@ const openAddForm = async () => {
   formRef.value?.resetFields()
 }
 
+/** 打开编辑弹窗 */
 const openEditForm = async (row: MdWorkstationWorkerVO) => {
   dialogVisible.value = true
   dialogTitle.value = '编辑人员'
-  isEdit.value = true
+  formType.value = 'update'
   // 加载岗位列表
   postList.value = await PostApi.getSimplePostList()
   formData.value = { ...row }
 }
 
+/** 提交表单 */
 const submitForm = async () => {
+  // TODO @AI：和别的模块保持一致；类似 loading 啥的
   await formRef.value.validate()
-  if (isEdit.value) {
+  if (formType.value === 'update') {
     await MdWorkstationWorkerApi.updateWorkstationWorker(
       formData.value as unknown as MdWorkstationWorkerVO
     )
diff --git a/src/views/mes/md/workstation/index.vue b/src/views/mes/md/workstation/index.vue
index 57aa45231..3da3565ae 100644
--- a/src/views/mes/md/workstation/index.vue
+++ b/src/views/mes/md/workstation/index.vue
@@ -84,7 +84,7 @@
       <el-table-column label="工作站名称" align="center" prop="name" width="150" />
       <el-table-column label="工作站地点" align="center" prop="address" width="150" />
       <el-table-column label="所在车间" align="center" prop="workshopName" width="120" />
-      <!-- TODO @AI：所属工序 -->
+      <!-- TODO @芋艿：所属工序，等工序模块完成后对接 -->
       <el-table-column label="状态" align="center" prop="status" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />