From 92c4a535a3e9b38346f5bb4e0e809f9d5f62bd6d Mon Sep 17 00:00:00 2001
From: TianyangZhang <zty18395607196@163.com>
Date: Fri, 22 May 2026 10:17:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(wf):=20=E9=87=8D=E6=9E=84=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E6=B5=81=E7=A8=8B=E5=AF=B9=E8=AF=9D=E6=A1=86=E4=B8=8E?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E8=A1=A8=E5=8D=95=E7=BB=93=E6=9E=84?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 选择流程对话框 (myticket.vue): 左侧分类导航(图标+计数+滚动联动) + 右侧响应式卡片网格, 卡片按 14 个流程智能匹配图标, 支持关键词搜索
- 工作流侧栏 (ticketd.vue): 重写为双卡片设计, 基本信息 + 自绘时间线审批历史 (按节点类型上绿/红/灰色, suggestion 按节点色填充)
- 全局结构化样式 (pages.scss): 抽屉内 el-form 卡片化 + 单列输入框最大宽度限制 (460/720px, 不影响 el-row/el-col 网格) + sticky 底部操作栏 + 抽屉头部渐变背景
- 专利表单 (patent_form.vue): 重构为 el-row 两栏网格, 技术状态从原有 el-col 拼接改为 auto-fit 响应式卡片网格 (选"是"自动展开上传, 卡片高亮), 技术文件改为 3 栏紧凑布局
- 14 个流程表单 (合同变更/人员调岗/用人需求/人员交接/离职/维修/资产入库/档案借阅/印章/宣传/会议预定/用车/平台/供应商/论文): 添加 wf-form-section 分区头, 移除冗余内联 padding 以适配全局卡片样式

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/style/pages.scss                 | 139 ++++++++
 src/views/asm/assetlogin_form.vue    |   9 +-
 src/views/em/repair_form.vue         |  29 +-
 src/views/hrm/contract_form.vue      |  11 +-
 src/views/hrm/empcontract_form.vue   |   5 +-
 src/views/hrm/empjoin_form.vue       |   5 +-
 src/views/hrm/empneed_form.vue       |   5 +-
 src/views/hrm/resignation_form.vue   |   5 +-
 src/views/hrm/transfer_form.vue      |   5 +-
 src/views/ofm/borrowfile_form.vue    |   6 +-
 src/views/ofm/mroombooking_form.vue  |  10 +-
 src/views/ofm/publicity_form.vue     |  12 +-
 src/views/ofm/seal_form.vue          |   4 +
 src/views/ofm/vehicle_form.vue       |   9 +-
 src/views/pum/supplieraudit_form.vue |   9 +-
 src/views/srm/paperse_form.vue       |   6 +
 src/views/srm/patent_form.vue        | 257 +++++++++-----
 src/views/srm/plat_form.vue          |   4 +
 src/views/wf/myticket.vue            | 460 ++++++++++++++++++++++++-
 src/views/wf/ticketd.vue             | 486 +++++++++++++++++++++------
 20 files changed, 1262 insertions(+), 214 deletions(-)

diff --git a/src/style/pages.scss b/src/style/pages.scss
index 564c8cae..906b4ce3 100644
--- a/src/style/pages.scss
+++ b/src/style/pages.scss
@@ -42,3 +42,142 @@
 .common-main .yzm .el-button {margin-left: 10px;}
 .common-main .link {color: var(--el-color-primary);cursor: pointer;}
 .common-main .link:hover {color: var(--el-color-primary-light-3);}
+
+/* ============================================================
+ * 工作流表单结构化样式
+ * 抽屉内打开的所有 *_form.vue 流程表单统一布局规范
+ * - 主区: el-main > el-form 内容卡片化、分组分区
+ * - 底部: 操作按钮 sticky 底栏
+ * - 侧栏: 提升与正文的视觉区分
+ * ============================================================ */
+.el-drawer__body {
+	.el-container {
+		height: 100%;
+		background: var(--el-fill-color-light);
+	}
+
+	.el-main {
+		padding: 18px 20px 0 20px;
+		overflow-y: auto;
+		position: relative;
+	}
+
+	/* 表单卡片化 */
+	.el-main > .el-form {
+		background: var(--el-bg-color);
+		border: 1px solid var(--el-border-color-lighter);
+		border-radius: 12px;
+		padding: 22px 26px 8px 22px;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+		margin-bottom: 76px; /* 给 sticky footer 让位 */
+		max-width: 1240px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.el-main > .el-form .el-form-item {
+		margin-bottom: 18px;
+	}
+	.el-main > .el-form .el-form-item__label {
+		font-weight: 500;
+		color: var(--el-text-color-regular);
+	}
+
+	/* 关键：除非显式 grid（el-row/el-col）或表格类输入，单列 form-item 内容控件不拉满 */
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-input,
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-input-number,
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-select,
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-cascader,
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-date-editor:not(.el-date-editor--datetimerange):not(.el-date-editor--daterange) {
+		max-width: 460px;
+		width: 100%;
+	}
+	/* textarea 单独放宽，便于书写多行 */
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-input.el-input--textarea,
+	.el-main > .el-form > .el-form-item .el-form-item__content > .el-textarea {
+		max-width: 720px;
+	}
+	/* 复选/单选组保持自然宽度 */
+
+	/* 复用：表单内分区标题 */
+	.wf-form-section {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 6px 0 14px;
+		padding-bottom: 8px;
+		border-bottom: 1px solid var(--el-border-color-lighter);
+	}
+	.wf-form-section::before {
+		content: "";
+		width: 3px;
+		height: 14px;
+		border-radius: 2px;
+		background: var(--el-color-primary);
+	}
+	.wf-form-section > .title {
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--el-text-color-primary);
+		letter-spacing: 0.4px;
+	}
+	.wf-form-section > .desc {
+		font-size: 12px;
+		color: var(--el-text-color-secondary);
+		margin-left: auto;
+	}
+
+	/* sticky 底部操作栏 */
+	.el-main > .el-footer,
+	.el-main > .el-form + .el-footer,
+	.el-main > .el-form .el-footer {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: auto !important;
+		padding: 12px 22px;
+		background: var(--el-bg-color);
+		border-top: 1px solid var(--el-border-color-lighter);
+		box-shadow: 0 -4px 16px -10px rgba(0, 0, 0, 0.15);
+		display: flex;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		gap: 8px;
+		z-index: 5;
+		margin: 0 -20px -18px;
+	}
+	.el-main > .el-footer .el-button + .el-button,
+	.el-main > .el-form + .el-footer .el-button + .el-button {
+		margin-left: 0;
+	}
+
+	/* 右侧审批栏 */
+	.el-aside {
+		background: var(--el-fill-color-light);
+		border-left: 1px solid var(--el-border-color-lighter);
+		padding: 14px 10px 14px 14px;
+		overflow-y: auto;
+	}
+}
+
+/* ============================================================
+ * 抽屉头部美化（所有工单详情）
+ * ============================================================ */
+.el-drawer__header {
+	padding: 14px 22px !important;
+	margin-bottom: 0 !important;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	background: linear-gradient(
+		180deg,
+		var(--el-bg-color) 0%,
+		var(--el-fill-color-light) 100%
+	);
+}
+.el-drawer__header > h4 {
+	font-size: 16px !important;
+	font-weight: 600;
+	letter-spacing: 0.4px;
+	margin: 0;
+}
+
diff --git a/src/views/asm/assetlogin_form.vue b/src/views/asm/assetlogin_form.vue
index 3131940f..c1dd4387 100644
--- a/src/views/asm/assetlogin_form.vue
+++ b/src/views/asm/assetlogin_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="110px" :model="formData" style="padding: 20px;">
+            <el-form label-width="110px" :model="formData">
+                <div class="wf-form-section">
+                    <span class="title">入库基本信息</span>
+                </div>
                 <el-form-item label="创建时间" v-if="localMode !== 'add'">
                     {{ formData.create_time }}
                 </el-form-item>
@@ -36,6 +39,10 @@
                         :disabled="localMode !== 'add'"
                     ></el-date-picker>
                 </el-form-item>
+                <div class="wf-form-section">
+                    <span class="title">入库明细</span>
+                    <span class="desc">逐项录入资产</span>
+                </div>
                 <el-form-item label="入库明细" required>
                     <sc-form-table
                     v-model="formData.items"
diff --git a/src/views/em/repair_form.vue b/src/views/em/repair_form.vue
index d3a1bf1b..a6f25ba2 100644
--- a/src/views/em/repair_form.vue
+++ b/src/views/em/repair_form.vue
@@ -1,7 +1,11 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="110px" :model="formData" style="padding: 20px;">
+            <el-form label-width="110px" :model="formData">
+                <div class="wf-form-section">
+                    <span class="title">报修信息</span>
+                    <span class="desc" v-if="localMode === 'add'">填写设备及报修事由</span>
+                </div>
                 <el-form-item label="创建时间" v-if="localMode !== 'add'">
                     {{ formData.create_time }}
                 </el-form-item>
@@ -28,28 +32,32 @@
                         :readonly="localMode === 'show'"
                     ></el-input>
                 </el-form-item>
-                <el-form-item label="故障分类" required v-if="localMode != 'add'">
+                <template v-if="localMode != 'add'">
+                <div class="wf-form-section">
+                    <span class="title">分派与维修</span>
+                </div>
+                <el-form-item label="故障分类" required>
                     <el-select
                         v-model="ticket_data.fault_cate"
                         placeholder="请选择故障分类"
-                        v-if="formData.ticket && formData.ticket_.state_.name == '条保负责人分派'" 
+                        v-if="formData.ticket && formData.ticket_.state_.name == '条保负责人分派'"
                     >
                         <el-option label="机械" value="机械"></el-option>
                         <el-option label="电气" value="电气"></el-option>
                     </el-select>
                     <span v-else>{{ formData.fault_cate }}</span>
                 </el-form-item>
-                <el-form-item label="维修人" required v-if="localMode != 'add'">
-                    <xtSelect :apiObj="$API.system.user.list" 
+                <el-form-item label="维修人" required>
+                    <xtSelect :apiObj="$API.system.user.list"
                     v-if="formData.ticket && formData.ticket_.state_.name == '条保负责人分派'" v-model="ticket_data.repair_user">
                             <el-table-column prop="name" label="姓名"></el-table-column>
                             <el-table-column prop="belong_dept_name" label="部门"></el-table-column>
                     </xtSelect>
                     <span v-else>{{ formData.repair_user_name }}</span>
                 </el-form-item>
-                <el-form-item label="维修开始时间" required v-if="localMode != 'add'">
+                <el-form-item label="维修开始时间" required>
                     <el-date-picker
-                        v-if="formData.ticket && formData.ticket_.state_.name == '维修人员处理'" 
+                        v-if="formData.ticket && formData.ticket_.state_.name == '维修人员处理'"
                         v-model="ticket_data.repair_start_time"
                         type="datetime"
                         placeholder="请选择维修开始时间"
@@ -57,12 +65,12 @@
                     ></el-date-picker>
                     <span v-else>{{ formData.repair_start_time }}</span>
                 </el-form-item>
-                <el-form-item label="维修工时" required v-if="localMode != 'add'">
-                    <el-input-number v-model="ticket_data.repair_duration" :min="0" :precision="1" 
+                <el-form-item label="维修工时" required>
+                    <el-input-number v-model="ticket_data.repair_duration" :min="0" :precision="1"
                     v-if="formData.ticket && formData.ticket_.state_.name == '维修人员处理'" ></el-input-number>
                     <span v-else>{{ formData.repair_duration }}</span>
                 </el-form-item>
-                <el-form-item label="维修描述" required v-if="localMode != 'add'">
+                <el-form-item label="维修描述" required>
                     <el-input
                         type="textarea"
                         :rows="3"
@@ -72,6 +80,7 @@
                     ></el-input>
                     <span v-else>{{ formData.repair_description }}</span>
                 </el-form-item>
+                </template>
             </el-form>
                     <el-footer>
             <el-button type="danger"
diff --git a/src/views/hrm/contract_form.vue b/src/views/hrm/contract_form.vue
index 9d1ea8df..5063a069 100644
--- a/src/views/hrm/contract_form.vue
+++ b/src/views/hrm/contract_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="130px" :model="formData" style="padding: 20px;" :disabled="localMode === 'show'">
+            <el-form label-width="130px" :model="formData" :disabled="localMode === 'show'">
+                <div class="wf-form-section">
+                    <span class="title">员工信息</span>
+                </div>
                 <el-form-item label="员工信息" required>
                     <xtSelect
                         v-model="formData.employee"
@@ -57,6 +60,9 @@
                 </el-form-item>
                 </el-col>
             </el-row>
+            <div class="wf-form-section">
+                <span class="title">调岗信息</span>
+            </div>
             <el-form-item label="原部门" required>
                     <el-cascader
                         v-model="formData.original_dept"
@@ -127,6 +133,9 @@
                 <el-form-item label="调岗原因">
                     <el-input v-model="formData.reason" type="textarea" :rows="2" style="width: 300px;"/>
                 </el-form-item>
+                <div class="wf-form-section">
+                    <span class="title">薪资调整</span>
+                </div>
                 <el-form-item label="原岗位薪资">
                     <el-input-number
                         v-model="formData.original_slary" 
diff --git a/src/views/hrm/empcontract_form.vue b/src/views/hrm/empcontract_form.vue
index 71365535..8214f402 100644
--- a/src/views/hrm/empcontract_form.vue
+++ b/src/views/hrm/empcontract_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="120px" :model="formData" style="padding: 20px;" :disabled="localMode === 'show'">
+            <el-form label-width="120px" :model="formData" :disabled="localMode === 'show'">
+                <div class="wf-form-section">
+                    <span class="title">合同变更</span>
+                </div>
                 <el-form-item label="申请部门" required>
                     <el-cascader
                         v-model="formData.dept_need"
diff --git a/src/views/hrm/empjoin_form.vue b/src/views/hrm/empjoin_form.vue
index 3ac84a7f..814ff0c7 100644
--- a/src/views/hrm/empjoin_form.vue
+++ b/src/views/hrm/empjoin_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="80px" :model="formData" style="padding: 20px;" :disabled="localMode === 'show'">
+            <el-form label-width="80px" :model="formData" :disabled="localMode === 'show'">
+                <div class="wf-form-section">
+                    <span class="title">人员交接</span>
+                </div>
                 <el-form-item label="需求部门" required>
                     <el-cascader
                         v-model="formData.dept_need"
diff --git a/src/views/hrm/empneed_form.vue b/src/views/hrm/empneed_form.vue
index ffbf9319..61ce2033 100644
--- a/src/views/hrm/empneed_form.vue
+++ b/src/views/hrm/empneed_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="130px" :model="formData" style="padding: 20px;" :disabled="localMode === 'show'">
+            <el-form label-width="130px" :model="formData" :disabled="localMode === 'show'">
+                <div class="wf-form-section">
+                    <span class="title">用人需求</span>
+                </div>
                 <el-form-item label="需求部门" required>
                     <el-cascader
                         v-model="formData.dept_need"
diff --git a/src/views/hrm/resignation_form.vue b/src/views/hrm/resignation_form.vue
index c86e4af5..daa710e2 100644
--- a/src/views/hrm/resignation_form.vue
+++ b/src/views/hrm/resignation_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="80px" :model="formData" style="padding: 20px;">
+            <el-form label-width="80px" :model="formData">
+                <div class="wf-form-section">
+                    <span class="title">离职申请</span>
+                </div>
                 <el-form-item label="员工信息" required>
                     <xtSelect
                         v-model="formData.employee"
diff --git a/src/views/hrm/transfer_form.vue b/src/views/hrm/transfer_form.vue
index 9d1ea8df..417dbc8a 100644
--- a/src/views/hrm/transfer_form.vue
+++ b/src/views/hrm/transfer_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="130px" :model="formData" style="padding: 20px;" :disabled="localMode === 'show'">
+            <el-form label-width="130px" :model="formData" :disabled="localMode === 'show'">
+                <div class="wf-form-section">
+                    <span class="title">员工信息</span>
+                </div>
                 <el-form-item label="员工信息" required>
                     <xtSelect
                         v-model="formData.employee"
diff --git a/src/views/ofm/borrowfile_form.vue b/src/views/ofm/borrowfile_form.vue
index 4b1098e5..76d6b342 100644
--- a/src/views/ofm/borrowfile_form.vue
+++ b/src/views/ofm/borrowfile_form.vue
@@ -7,7 +7,11 @@
             ref="addForm"
             label-width="100px"
             label-position="left"
-            > 
+            >
+            <div class="wf-form-section">
+                <span class="title">档案借阅申请</span>
+                <span class="desc">填写档案、用途与时间</span>
+            </div>
             <el-form-item label="档案名称" prop="borrow_file">
                 <xtSelect
                   :apiObj="apiObjM2"
diff --git a/src/views/ofm/mroombooking_form.vue b/src/views/ofm/mroombooking_form.vue
index b0b2cd8f..7ed5e3c2 100644
--- a/src/views/ofm/mroombooking_form.vue
+++ b/src/views/ofm/mroombooking_form.vue
@@ -6,7 +6,11 @@
         :rules="rules"
         ref="addForm"
         label-width="100px"
-      > 
+      >
+        <div class="wf-form-section">
+          <span class="title">会议基本信息</span>
+          <span class="desc">填写会议名称、会议室、参会人员等</span>
+        </div>
         <el-row>
           <el-col :span="12">
             <el-form-item label="会议名称" prop="title">
@@ -57,6 +61,10 @@
               </el-form-item>
           </el-col> -->
         </el-row>
+        <div class="wf-form-section">
+          <span class="title">选择会议时间段</span>
+          <span class="desc">点击空闲时段进行预定</span>
+        </div>
          <el-row>
           <div v-for="(item,$index) in timesList" :key="item.value">
             <div v-if="item.sloted" class="timeBlock slotedTimeBlock" @click="slotMessage">{{ item.label }}</div>
diff --git a/src/views/ofm/publicity_form.vue b/src/views/ofm/publicity_form.vue
index 3802da61..bd64a88b 100644
--- a/src/views/ofm/publicity_form.vue
+++ b/src/views/ofm/publicity_form.vue
@@ -7,7 +7,11 @@
             :rules="rules"
             ref="addForm"
             label-position="left"
-            > 
+            >
+            <div class="wf-form-section">
+                <span class="title">稿件信息</span>
+                <span class="desc">标题、文件及作者</span>
+            </div>
             <el-form-item label="送审稿件标题" prop="title">
                 <el-input v-model="addForm.title" clearable :disabled="localMode ==='show'"></el-input>
             </el-form-item>
@@ -28,6 +32,9 @@
             <el-form-item label="部室/研究院" prop="pub_dept">
                 <el-input v-model="addForm.pub_dept" clearable :disabled="localMode ==='show'"></el-input>
             </el-form-item>
+            <div class="wf-form-section">
+                <span class="title">涉密与内容</span>
+            </div>
             <el-form-item label="第一撰稿人涉密等级" prop="level">
                 <el-radio-group v-model="addForm.level" :disabled="localMode ==='show'">
                 <el-radio label="重要"></el-radio>
@@ -52,6 +59,9 @@
             <el-form-item label="宣传报道目的" prop="report_purpose">
                 <el-input v-model="addForm.report_purpose" clearable :disabled="localMode ==='show'"></el-input>
             </el-form-item>
+            <div class="wf-form-section">
+                <span class="title">宣传渠道</span>
+            </div>
             <el-form-item label="宣传渠道" prop="channel">
                 <el-checkbox-group v-model="addForm.channel" :disabled="localMode ==='show'">
                 <el-checkbox label="互联网"></el-checkbox>
diff --git a/src/views/ofm/seal_form.vue b/src/views/ofm/seal_form.vue
index 018f1b0a..8e98b27c 100644
--- a/src/views/ofm/seal_form.vue
+++ b/src/views/ofm/seal_form.vue
@@ -2,6 +2,10 @@
   <el-container>
     <el-main>
       <el-form :model="localForm" label-width="100px" label-position="left" :rules="rules">
+      <div class="wf-form-section">
+        <span class="title">印章使用申请</span>
+        <span class="desc">填写文件信息与印章类型</span>
+      </div>
       <el-form-item label="文件名称" prop="filename">
           <el-input v-model="localForm.filename" clearable :disabled="localMode ==='show'"></el-input>
       </el-form-item>
diff --git a/src/views/ofm/vehicle_form.vue b/src/views/ofm/vehicle_form.vue
index a33e1d93..ad7317fb 100644
--- a/src/views/ofm/vehicle_form.vue
+++ b/src/views/ofm/vehicle_form.vue
@@ -6,7 +6,11 @@
         :rules="rules"
         ref="addForm"
         label-width="100px"
-      > 
+      >
+        <div class="wf-form-section">
+          <span class="title">用车需求</span>
+          <span class="desc">填写用车事由、目的地及车辆</span>
+        </div>
         <el-row>
           <el-col :span="12">
             <el-form-item label="用车事由" prop="reason">
@@ -76,6 +80,9 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <div class="wf-form-section">
+          <span class="title">选择用车时段</span>
+        </div>
          <el-row>
           <div v-for="(item,$index) in timesList" :key="item.value">
             <div v-if="item.sloted" class="timeBlock slotedTimeBlock" @click="slotMessage">{{ item.label }}</div>
diff --git a/src/views/pum/supplieraudit_form.vue b/src/views/pum/supplieraudit_form.vue
index 6159c73f..829c0ca9 100644
--- a/src/views/pum/supplieraudit_form.vue
+++ b/src/views/pum/supplieraudit_form.vue
@@ -1,7 +1,10 @@
 <template>
     <el-container>
         <el-main class="nopadding">
-            <el-form label-width="100px" :model="formData" style="padding: 20px;">
+            <el-form label-width="100px" :model="formData">
+                <div class="wf-form-section">
+                    <span class="title">供应商信息</span>
+                </div>
                 <el-form-item label="供应商名称" required>
                     <el-input v-model="formData.name" placeholder="请输入供应商名称" :readonly="localMode === 'show'"></el-input>
                 </el-form-item>
@@ -11,6 +14,10 @@
                 <el-form-item label="物料名称" required>
                     <el-input v-model="formData.material_name" :readonly="localMode === 'show'"></el-input>
                 </el-form-item>
+                <div class="wf-form-section">
+                    <span class="title">资质文件</span>
+                    <span class="desc">上传调查表、营业执照、质量证书</span>
+                </div>
                 <el-form-item label="调查表" required>
                     <sc-upload-filed
                         v-model="formData.survery_form"
diff --git a/src/views/srm/paperse_form.vue b/src/views/srm/paperse_form.vue
index 79085e0a..af8bc423 100644
--- a/src/views/srm/paperse_form.vue
+++ b/src/views/srm/paperse_form.vue
@@ -2,6 +2,9 @@
   <el-container>
     <el-main>
       <el-form :model="localForm" label-width="150px" label-position="left" :rules="rules">
+      <div class="wf-form-section">
+        <span class="title">论文基本信息</span>
+      </div>
       <el-form-item label="拟发表论文名称" prop="paper_name">
           <el-input v-model="localForm.paper_name" clearable :disabled="localMode ==='show'"></el-input>
       </el-form-item>
@@ -14,6 +17,9 @@
       <el-form-item label="作者" prop="author" >
           <el-input v-model="localForm.author" clearable ></el-input>
       </el-form-item>
+        <div class="wf-form-section">
+          <span class="title">发表详情</span>
+        </div>
         <el-form-item label="拟发表文章类型" prop="paper_type">
             <el-select v-model="localForm.paper_type" placeholder="请选择拟发表文章类型" :disabled="localMode ==='show'">
                 <el-option label="研究论文" value="research"></el-option>
diff --git a/src/views/srm/patent_form.vue b/src/views/srm/patent_form.vue
index f2d7a96b..d7fa5648 100644
--- a/src/views/srm/patent_form.vue
+++ b/src/views/srm/patent_form.vue
@@ -1,91 +1,133 @@
 <template>
   <el-container>
     <el-main>
-      <el-form :model="localForm" label-width="150px" label-position="left" :rules="rules">
-      <el-form-item label="拟申请专利名称" prop="name">
-          <el-input v-model="localForm.name" clearable :disabled="localMode ==='show'"></el-input>
-      </el-form-item>
-      <el-form-item label="申请部门" prop="organization">
-          <el-input v-model="localForm.organization" clearable :disabled="localMode ==='show'"></el-input>
-      </el-form-item>
-      <el-form-item label="发明人（设计人）" 
-        prop="author" 
-        >
-          <el-input v-model="localForm.author" clearable ></el-input>
-      </el-form-item>
-        <el-form-item label="专利类型" prop="type">
+      <el-form :model="localForm" label-width="130px" label-position="left" :rules="rules">
+      <div class="wf-form-section">
+        <span class="title">专利基本信息</span>
+        <span class="desc">名称、申请部门、发明人</span>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="拟申请专利名称" prop="name">
+            <el-input v-model="localForm.name" clearable :disabled="localMode ==='show'" placeholder="请输入专利名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="申请部门" prop="organization">
+            <el-input v-model="localForm.organization" clearable :disabled="localMode ==='show'" placeholder="请输入申请部门"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="发明人（设计人）" prop="author">
+            <el-input v-model="localForm.author" clearable placeholder="多人请用顿号分隔"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <div class="wf-form-section">
+        <span class="title">申请详情</span>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="专利类型" prop="type">
             <el-select v-model="localForm.type" placeholder="请选择专利类型" :disabled="localMode ==='show'">
-                <el-option label="发明专利" value="invention"></el-option>
-                <el-option label="实用新型专利" value="utility"></el-option>
-                <el-option label="外观设计专利" value="design"></el-option>
+              <el-option label="发明专利" value="invention"></el-option>
+              <el-option label="实用新型专利" value="utility"></el-option>
+              <el-option label="外观设计专利" value="design"></el-option>
             </el-select>
-        </el-form-item>
-        <el-form-item label="是否公开" prop="is_public">
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否公开" prop="is_public">
             <el-radio-group v-model="localForm.is_public" :disabled="localMode ==='show'">
-                <el-radio :label="true">是</el-radio>
-                <el-radio :label="false">否</el-radio>
+              <el-radio :label="true">是</el-radio>
+              <el-radio :label="false">否</el-radio>
             </el-radio-group>
-        </el-form-item>
-      <el-form-item label="拟申请地域" prop="area">
-        <el-radio-group v-model="localForm.area" :disabled="localMode ==='show'">
-          <el-radio label="国内申请" value="Domestic"></el-radio>
-          <el-radio label="国外申请" value="Foreign"></el-radio>
-          <el-radio label="PCT申请" value="PCT"></el-radio>
-        </el-radio-group>
-          <el-input
-                v-if="localForm.area && (localForm.area.includes('Foreign') || localForm.area.includes('PCT'))"
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="拟申请地域" prop="area">
+            <el-radio-group v-model="localForm.area" :disabled="localMode ==='show'">
+              <el-radio label="国内申请" value="Domestic"></el-radio>
+              <el-radio label="国外申请" value="Foreign"></el-radio>
+              <el-radio label="PCT申请" value="PCT"></el-radio>
+            </el-radio-group>
+            <el-input
+              v-if="localForm.area && (localForm.area.includes('Foreign') || localForm.area.includes('PCT'))"
               v-model="localForm.other_area"
-              placeholder = "请输入申请的国家"
-              size = "small"
-              style="margin-top: 10;"
+              placeholder="请输入申请的国家"
+              size="small"
+              style="margin-top: 8px; max-width: 320px;"
               :disabled="localMode ==='show'"
             ></el-input>
-        </el-form-item>
-        <el-form-item label="技术状态" prop="tech_status">
-        <el-row>
-            <el-col :span="12" v-for="(item, index) in localForm.tech_status || []" :key="index">
-                <div class="class-row">
-                <span>{{ item.name }}</span>
-                <el-radio-group v-model="item.status" @change="handleStatusChange(item)" style="margin-left: 20px;" :disabled="localMode ==='show'">
-                    <el-radio label="是">是</el-radio>
-                    <el-radio label="否">否</el-radio>
-                </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <div class="wf-form-section">
+        <span class="title">技术状态与文件</span>
+      </div>
+      <el-form-item label="技术状态" prop="tech_status" class="patent-tech-status">
+        <div class="patent-tech-grid">
+          <div
+            v-for="(item, index) in localForm.tech_status || []"
+            :key="index"
+            class="patent-tech-item"
+            :class="{ 'is-yes': item.status === '是' }"
+          >
+            <div class="patent-tech-item__row">
+              <span class="patent-tech-item__label">{{ item.name }}</span>
+              <el-radio-group
+                v-model="item.status"
+                @change="handleStatusChange(item)"
+                :disabled="localMode ==='show'"
+                size="small"
+              >
+                <el-radio label="是">是</el-radio>
+                <el-radio label="否">否</el-radio>
+              </el-radio-group>
             </div>
-            <div v-if="item.status === '是'" class="upload-section">
-                 <sc-upload-file
-                     multiple
-                    :limit="1"
-                    :accept="['.xlsx', '.xls','.pdf','.docx', '.doc', '.jpg', '.png', '.jpeg']"
-                    @success = "(res)=>fileUPSuccess(res, item)"
-                    :disabled="localMode ==='show'"
-                    >
-                    <el-button type="primary" size="small" icon="el-icon-upload"> </el-button>
-                </sc-upload-file>
-                <div v-if="item.file && localMode ==='show'" class="file-list">
+            <div v-if="item.status === '是'" class="patent-tech-item__upload">
+              <sc-upload-file
+                multiple
+                :limit="1"
+                :accept="['.xlsx', '.xls','.pdf','.docx', '.doc', '.jpg', '.png', '.jpeg']"
+                @success="(res)=>fileUPSuccess(res, item)"
+                :disabled="localMode ==='show'"
+              >
+                <el-button type="primary" size="small" plain>
+                  <el-icon><Upload /></el-icon><span style="margin-left:4px">上传证明</span>
+                </el-button>
+              </sc-upload-file>
+              <div v-if="item.file && localMode ==='show'" class="file-list">
                 <el-link type="primary" :href="item.file" target="_blank">
-                    {{ item.file.split('/').pop() }}
+                  {{ item.file.split('/').pop() }}
                 </el-link>
               </div>
             </div>
-            </el-col>
-        </el-row>
-        </el-form-item>
-        <el-form-item label="技术文件" prop="tech_file">
-            <div class="file-item" v-for="(item, index) in localForm.tech_file  || []" :key="index">
-                <el-checkbox class="file-checkbox" v-model="item.checked" @change="handleCheckChange(item)" :disabled="localMode ==='show'">
-                    {{ item.name }}
-                </el-checkbox>
-                <el-input 
-                    class="page-input" 
-                    v-model="item.pages" 
-                    placeholder="页数" 
-                    :disabled="!item.checked || localMode ==='show'"
-                    type="number"
-                    min="0">
-                    <template v-slot:append>页</template>
-                </el-input>
-            </div>
-        </el-form-item>  
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="技术文件" prop="tech_file">
+        <div class="patent-tech-files">
+          <div class="patent-file-item" v-for="(item, index) in localForm.tech_file  || []" :key="index">
+            <el-checkbox v-model="item.checked" @change="handleCheckChange(item)" :disabled="localMode ==='show'">
+              {{ item.name }}
+            </el-checkbox>
+            <el-input
+              class="patent-file-pages"
+              v-model="item.pages"
+              placeholder="页数"
+              :disabled="!item.checked || localMode ==='show'"
+              type="number"
+              min="0"
+              size="small"
+            >
+              <template v-slot:append>页</template>
+            </el-input>
+          </div>
+        </div>
+      </el-form-item>
       </el-form>
     <el-footer>
           <ticketd_b
@@ -114,6 +156,7 @@
 <script>
 import ticketd_b from "@/views/wf/ticketd_b.vue";
 import ticketd from '@/views/wf/ticketd.vue'
+import { Upload } from "@element-plus/icons-vue";
 export default {
   props: {
     mode: { 
@@ -125,7 +168,7 @@ export default {
 			  default: null
 		  },
     },
-  components: {ticketd, ticketd_b},
+  components: {ticketd, ticketd_b, Upload},
   data() {
     return {
       ticket_data: {},
@@ -225,4 +268,68 @@ export default {
   },
 };
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* 技术状态网格 */
+.patent-tech-status :deep(.el-form-item__content) {
+    display: block;
+    width: 100%;
+    line-height: 1.4;
+}
+.patent-tech-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 12px;
+    width: 100%;
+}
+.patent-tech-item {
+    border: 1px solid var(--el-border-color-lighter);
+    background: var(--el-fill-color-light);
+    border-radius: 8px;
+    padding: 10px 12px;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.patent-tech-item.is-yes {
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-5);
+}
+.patent-tech-item__row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+.patent-tech-item__label {
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+}
+.patent-tech-item__upload {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--el-border-color);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.file-list {
+    font-size: 12px;
+}
+
+/* 技术文件列表 */
+.patent-tech-files {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 10px 24px;
+    width: 100%;
+}
+.patent-file-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.patent-file-pages {
+    max-width: 110px;
+}
+</style>
diff --git a/src/views/srm/plat_form.vue b/src/views/srm/plat_form.vue
index 3343b8dc..3033586a 100644
--- a/src/views/srm/plat_form.vue
+++ b/src/views/srm/plat_form.vue
@@ -2,6 +2,10 @@
   <el-container>
     <el-main>
       <el-form :model="localForm" label-width="150px" label-position="left" :rules="rules">
+      <div class="wf-form-section">
+        <span class="title">平台审批</span>
+        <span class="desc">填写平台名称、申请部门及日期</span>
+      </div>
       <el-form-item label="名称" prop="name">
           <el-input v-model="localForm.name" clearable :disabled="localMode ==='show'"></el-input>
       </el-form-item>
diff --git a/src/views/wf/myticket.vue b/src/views/wf/myticket.vue
index b53c69da..9157b0f5 100644
--- a/src/views/wf/myticket.vue
+++ b/src/views/wf/myticket.vue
@@ -141,31 +141,140 @@
 			@success="handleSuccess"></component>
 		</el-drawer>
 	</el-container>
-	<el-dialog v-model="dialogVisible" title="选择流程">
-			<div v-for="group in wfOptions" :key="group.category" class="category-group">
-            <h3 style="margin: 16px 0 8px 0; color: #606266;">{{ group.category }}</h3>
-            <el-card
-                v-for="item in group.items"
-                :key="item.id"
-                :body-style="{ padding: '10px', cursor: 'pointer' }"
-                style="width: 180px; display: inline-block; margin: 4px; background-color: #f5f7fa;"
-                shadow="hover"
-                @click="startTicket(item)"
-            >
-                {{ item.name }}
-            </el-card>
-        </div>
+	<el-dialog
+		v-model="dialogVisible"
+		title="选择流程"
+		width="960px"
+		top="6vh"
+		class="wf-picker-dialog"
+		:close-on-click-modal="false"
+		destroy-on-close
+	>
+		<div class="wf-picker">
+			<aside class="wf-picker__aside">
+				<div class="wf-picker__search">
+					<el-input
+						v-model="wfKeyword"
+						placeholder="搜索流程"
+						clearable
+						:prefix-icon="Search"
+					/>
+				</div>
+				<nav class="wf-picker__nav">
+					<a
+						v-for="group in filteredWfOptions"
+						:key="group.category"
+						class="wf-picker__nav-item"
+						:class="{ active: activeCategory === group.category }"
+						@click="scrollToCategory(group.category)"
+					>
+						<el-icon class="wf-picker__nav-icon">
+							<component :is="categoryIcon(group.category)" />
+						</el-icon>
+						<span class="wf-picker__nav-text">{{ group.category }}</span>
+						<span class="wf-picker__nav-count">{{ group.items.length }}</span>
+					</a>
+				</nav>
+			</aside>
+
+			<section ref="wfScroll" class="wf-picker__body" @scroll="onPickerScroll">
+				<template v-if="filteredWfOptions.length">
+					<div
+						v-for="group in filteredWfOptions"
+						:key="group.category"
+						class="wf-picker__group"
+						:data-category="group.category"
+						:ref="el => setGroupRef(group.category, el)"
+					>
+						<header class="wf-picker__group-header">
+							<el-icon class="wf-picker__group-icon">
+								<component :is="categoryIcon(group.category)" />
+							</el-icon>
+							<h3 class="wf-picker__group-title">{{ group.category }}</h3>
+							<span class="wf-picker__group-divider"></span>
+							<span class="wf-picker__group-meta">{{ group.items.length }} 项</span>
+						</header>
+						<div class="wf-picker__grid">
+							<button
+								v-for="item in group.items"
+								:key="item.id"
+								type="button"
+								class="wf-picker__card"
+								@click="startTicket(item)"
+							>
+								<span class="wf-picker__card-icon">
+									<el-icon><component :is="itemIcon(item.name, group.category)" /></el-icon>
+								</span>
+								<span class="wf-picker__card-name">{{ item.name }}</span>
+								<span class="wf-picker__card-arrow">
+									<el-icon><ArrowRight /></el-icon>
+								</span>
+							</button>
+						</div>
+					</div>
+				</template>
+				<el-empty v-else description="未找到匹配的流程" :image-size="80" />
+			</section>
+		</div>
 	</el-dialog>
 </template>
 
 <script>
 import { defineAsyncComponent, markRaw } from 'vue'; // 异步组件加载
 import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
+import {
+	Search, ArrowRight,
+	UserFilled, SwitchButton, CircleClose,
+	Tools, Box, Postcard, Promotion, ChatLineRound,
+	Van, Monitor, OfficeBuilding, Document, Briefcase, ShoppingCart,
+	Cpu, Files, Grid, Tickets
+} from "@element-plus/icons-vue";
+
+const CATEGORY_ICON_MAP = {
+	"人事": UserFilled,
+	"设备": Tools,
+	"固资": Box,
+	"行政": Briefcase,
+	"科研": Cpu,
+	"采购": ShoppingCart,
+	"未分组": Grid,
+};
+
+const ITEM_ICON_RULES = [
+	[/合同|协议/, Document],
+	[/调岗|调动|交接/, SwitchButton],
+	[/用人|招聘|入职/, UserFilled],
+	[/离职|辞职/, CircleClose],
+	[/维修|检修|故障/, Tools],
+	[/入库|出库|盘点|资产/, Box],
+	[/档案|文件|借阅/, Files],
+	[/印章|盖章/, Postcard],
+	[/宣传|报道|发布/, Promotion],
+	[/会议|预定/, ChatLineRound],
+	[/用车|车辆|出行/, Van],
+	[/平台|系统|监控/, Monitor],
+	[/供应商|采购|订单/, OfficeBuilding],
+	[/请假|加班|考勤/, Tickets],
+	[/审批|报销|申请/, Document],
+];
+
 export default {
 	name: "myticket",
+	components: {
+		Search, ArrowRight,
+		UserFilled, SwitchButton, CircleClose,
+		Tools, Box, Postcard, Promotion, ChatLineRound,
+		Van, Monitor, OfficeBuilding, Document, Briefcase, ShoppingCart,
+		Cpu, Files, Grid, Tickets
+	},
 	data() {
 		return {
+			Search: markRaw(Search),
+			ArrowRight: markRaw(ArrowRight),
 			actStateEnum, interveneTypeEnum,
+			wfKeyword: "",
+			activeCategory: "",
+			wfGroupRefs: {},
 			drawerName: "工单详情",
 			drawer: false,
 			tvalue: "待办",
@@ -217,7 +326,65 @@ export default {
 		}
 		this.getWfOptions();
 	},
+	computed: {
+		filteredWfOptions() {
+			const kw = (this.wfKeyword || "").trim().toLowerCase();
+			if (!kw) return this.wfOptions;
+			return this.wfOptions
+				.map(g => ({
+					category: g.category,
+					items: g.items.filter(it =>
+						(it.name || "").toLowerCase().includes(kw) ||
+						(g.category || "").toLowerCase().includes(kw)
+					)
+				}))
+				.filter(g => g.items.length);
+		},
+	},
+	watch: {
+		dialogVisible(v) {
+			if (v) {
+				this.wfKeyword = "";
+				this.$nextTick(() => {
+					this.activeCategory = this.filteredWfOptions[0]?.category || "";
+				});
+			}
+		},
+	},
 	methods: {
+		categoryIcon(cate) {
+			return CATEGORY_ICON_MAP[cate] || Grid;
+		},
+		itemIcon(name, cate) {
+			for (const [re, icon] of ITEM_ICON_RULES) {
+				if (re.test(name)) return icon;
+			}
+			return CATEGORY_ICON_MAP[cate] || Document;
+		},
+		setGroupRef(category, el) {
+			if (el) this.wfGroupRefs[category] = el;
+		},
+		scrollToCategory(category) {
+			const el = this.wfGroupRefs[category];
+			const scroller = this.$refs.wfScroll;
+			if (!el || !scroller) return;
+			this.activeCategory = category;
+			scroller.scrollTo({
+				top: el.offsetTop - 8,
+				behavior: "smooth",
+			});
+		},
+		onPickerScroll() {
+			const scroller = this.$refs.wfScroll;
+			if (!scroller) return;
+			const top = scroller.scrollTop;
+			let current = this.filteredWfOptions[0]?.category || "";
+			for (const g of this.filteredWfOptions) {
+				const el = this.wfGroupRefs[g.category];
+				if (el && el.offsetTop - 24 <= top) current = g.category;
+			}
+			if (current !== this.activeCategory) this.activeCategory = current;
+		},
 		async getWfOptions() {
 			let permissions = this.$TOOL.data.get("PERMISSIONS");
 			let userInfo = this.$TOOL.data.get("USER_INFO");
@@ -303,4 +470,267 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+/* ===== 选择流程对话框 ===== */
+:deep(.wf-picker-dialog) {
+	border-radius: 14px;
+	overflow: hidden;
+}
+:deep(.wf-picker-dialog .el-dialog__header) {
+	padding: 18px 24px;
+	margin-right: 0;
+	border-bottom: 1px solid var(--el-border-color-lighter);
+	background: linear-gradient(
+		180deg,
+		var(--el-fill-color-blank) 0%,
+		var(--el-fill-color-light) 100%
+	);
+}
+:deep(.wf-picker-dialog .el-dialog__title) {
+	font-size: 16px;
+	font-weight: 600;
+	letter-spacing: 0.5px;
+}
+:deep(.wf-picker-dialog .el-dialog__body) {
+	padding: 0;
+}
+
+.wf-picker {
+	display: flex;
+	height: 66vh;
+	min-height: 440px;
+	max-height: 640px;
+	background: var(--el-bg-color);
+}
+
+/* 左侧分类导航 */
+.wf-picker__aside {
+	width: 200px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid var(--el-border-color-lighter);
+	background: var(--el-fill-color-light);
+}
+.wf-picker__search {
+	padding: 14px 12px 10px;
+}
+.wf-picker__nav {
+	flex: 1;
+	overflow-y: auto;
+	padding: 4px 8px 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.wf-picker__nav-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 9px 12px;
+	border-radius: 8px;
+	font-size: 13.5px;
+	color: var(--el-text-color-regular);
+	cursor: pointer;
+	user-select: none;
+	transition:
+		background-color 0.18s ease,
+		color 0.18s ease,
+		transform 0.18s ease;
+	position: relative;
+}
+.wf-picker__nav-item::before {
+	content: "";
+	position: absolute;
+	left: 4px;
+	top: 50%;
+	transform: translateY(-50%) scaleY(0);
+	width: 3px;
+	height: 18px;
+	background: var(--el-color-primary);
+	border-radius: 2px;
+	transition: transform 0.2s ease;
+}
+.wf-picker__nav-item:hover {
+	background: var(--el-fill-color);
+	color: var(--el-text-color-primary);
+}
+.wf-picker__nav-item.active {
+	background: var(--el-color-primary-light-9);
+	color: var(--el-color-primary);
+	font-weight: 600;
+}
+.wf-picker__nav-item.active::before {
+	transform: translateY(-50%) scaleY(1);
+}
+.wf-picker__nav-icon {
+	font-size: 16px;
+	flex-shrink: 0;
+}
+.wf-picker__nav-text {
+	flex: 1;
+}
+.wf-picker__nav-count {
+	font-size: 12px;
+	padding: 1px 7px;
+	border-radius: 10px;
+	background: var(--el-fill-color-darker);
+	color: var(--el-text-color-secondary);
+	font-weight: 500;
+}
+.wf-picker__nav-item.active .wf-picker__nav-count {
+	background: var(--el-color-primary);
+	color: #fff;
+}
+
+/* 右侧主体 */
+.wf-picker__body {
+	flex: 1;
+	overflow-y: auto;
+	padding: 18px 24px 24px;
+	scroll-behavior: smooth;
+}
+.wf-picker__group + .wf-picker__group {
+	margin-top: 22px;
+}
+.wf-picker__group-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 12px;
+	padding-bottom: 8px;
+}
+.wf-picker__group-icon {
+	color: var(--el-color-primary);
+	font-size: 16px;
+}
+.wf-picker__group-title {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--el-text-color-primary);
+	margin: 0;
+	letter-spacing: 0.4px;
+}
+.wf-picker__group-divider {
+	flex: 1;
+	height: 1px;
+	background: linear-gradient(
+		to right,
+		var(--el-border-color-lighter),
+		transparent
+	);
+}
+.wf-picker__group-meta {
+	font-size: 12px;
+	color: var(--el-text-color-secondary);
+}
+
+/* 卡片网格 */
+.wf-picker__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+	gap: 10px;
+}
+.wf-picker__card {
+	all: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 14px;
+	border-radius: 10px;
+	background: var(--el-bg-color);
+	border: 1px solid var(--el-border-color-lighter);
+	transition:
+		border-color 0.18s ease,
+		box-shadow 0.18s ease,
+		transform 0.18s ease,
+		background-color 0.18s ease;
+	position: relative;
+	overflow: hidden;
+}
+.wf-picker__card::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 3px;
+	background: var(--el-color-primary);
+	transform: scaleY(0);
+	transform-origin: center;
+	transition: transform 0.2s ease;
+}
+.wf-picker__card:hover {
+	border-color: var(--el-color-primary-light-5);
+	box-shadow: 0 6px 16px -10px var(--el-color-primary);
+	transform: translateY(-1px);
+	background: var(--el-color-primary-light-9);
+}
+.wf-picker__card:hover::before {
+	transform: scaleY(1);
+}
+.wf-picker__card:active {
+	transform: translateY(0);
+}
+.wf-picker__card-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	flex-shrink: 0;
+	border-radius: 8px;
+	background: var(--el-color-primary-light-9);
+	color: var(--el-color-primary);
+	font-size: 16px;
+	transition: background-color 0.18s ease, color 0.18s ease;
+}
+.wf-picker__card:hover .wf-picker__card-icon {
+	background: var(--el-color-primary);
+	color: #fff;
+}
+.wf-picker__card-name {
+	flex: 1;
+	font-size: 13.5px;
+	color: var(--el-text-color-primary);
+	font-weight: 500;
+	line-height: 1.4;
+	text-align: left;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.wf-picker__card-arrow {
+	color: var(--el-text-color-placeholder);
+	font-size: 14px;
+	opacity: 0;
+	transform: translateX(-4px);
+	transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
+}
+.wf-picker__card:hover .wf-picker__card-arrow {
+	color: var(--el-color-primary);
+	opacity: 1;
+	transform: translateX(0);
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+	:deep(.wf-picker-dialog) {
+		--el-dialog-width: 92vw !important;
+	}
+	.wf-picker {
+		height: 72vh;
+	}
+	.wf-picker__aside {
+		width: 140px;
+	}
+	.wf-picker__nav-text {
+		font-size: 13px;
+	}
+	.wf-picker__body {
+		padding: 14px 14px 20px;
+	}
+}
+</style>
diff --git a/src/views/wf/ticketd.vue b/src/views/wf/ticketd.vue
index 982a097b..c5fcd797 100644
--- a/src/views/wf/ticketd.vue
+++ b/src/views/wf/ticketd.vue
@@ -1,139 +1,191 @@
 <template>
-    <el-collapse v-model="activeNames" style="padding-left: 2px; padding-right: 2px;">
-        <el-collapse-item title="基本信息" name="1">
-            <el-descriptions :column="1">
-                <el-descriptions-item>
-                    <span style="color:darkblue;margin-right: 4px;">({{ ticketDetail.sn }})</span>{{ ticketDetail.title
-                    }}
-                </el-descriptions-item>
-                <el-descriptions-item label="提交人:">
-                    {{ ticketDetail.create_by_name }}
-                </el-descriptions-item>
-                <el-descriptions-item label="当前:">
-                    <el-tag type="info" effect="plain">{{ ticketDetail.state_.name }}</el-tag>
-                    <el-tag :type="actStateEnum[ticketDetail.act_state]?.type" effect="plain">
-                        {{ actStateEnum[ticketDetail.act_state]?.text }}
-                    </el-tag>
-                </el-descriptions-item>
-                <el-descriptions-item label="可处理人:"
-                    v-if="ticketDetail.participant_type == 2 || ticketDetail.participant_type == 1">
-                    <span v-for="item in ticketDetail.participant_" :key="item.id">{{ item.name }}/</span>
-                </el-descriptions-item>
-                <el-descriptions-item label="操作:">
-                    <el-button v-if="ticketDetail.state_.enable_retreat && isOwn" type="danger" size="small"
-                        @click="handleRetreat">撤回</el-button>
-                </el-descriptions-item>
-            </el-descriptions>
-        </el-collapse-item>
-        <el-collapse-item title="审批历史" name="2">
-            <div style="padding:1px"><el-timeline>
-                    <el-timeline-item v-for="item in ticketLog" :key="item.id" :timestamp="item.create_time"
-                        :color="getColor(item)">
-                        <div>
-                            <strong>{{ item.state_?.name || "未知状态" }}</strong>
-                        </div>
-                        <div>
-                            <span v-if="item.intervene_type != 0"><el-tag
-                                    :type="interveneTypeEnum[item.intervene_type]?.type" effect="plain">
-                                    {{ interveneTypeEnum[item.intervene_type]?.text }}
-                                </el-tag></span>
-                            <span v-if="item.transition_"
-                                :style="{ color: item.transition_.attribute_type === 1 ? '#67C23A' : '#F56C6C' }">
-                                {{ item.transition_.name }}
-                            </span>
-                            <span v-if="item.participant_">-{{ item.participant_.name }}</span>
-                        </div>
-                        <div v-if="item.suggestion">
-                            <el-tooltip v-if="item.suggestion.length > 20" class="box-item" effect="dark"
-                                :content="item.suggestion" placement="top">
-                                <span>{{ item.suggestion.slice(0, 20) + "..." }}</span>
-                            </el-tooltip>
-                            <span v-else>
-                                {{ item.suggestion }}
-                            </span>
-                        </div>
-                    </el-timeline-item>
-                </el-timeline></div>
+    <div class="wf-side">
+        <!-- 工单基本信息卡 -->
+        <section class="wf-side__card">
+            <header class="wf-side__card-header">
+                <span class="wf-side__card-bar"></span>
+                <h4 class="wf-side__card-title">基本信息</h4>
+                <el-tag
+                    v-if="ticketDetail.act_state !== undefined"
+                    :type="actStateEnum[ticketDetail.act_state]?.type"
+                    effect="dark"
+                    size="small"
+                    round
+                >{{ actStateEnum[ticketDetail.act_state]?.text }}</el-tag>
+            </header>
 
-        </el-collapse-item>
-    </el-collapse>
-    <el-dialog :title="dialogTitle" v-model="dialogVisible">
-        <el-input v-model="suggestion" type="textarea" :rows="2"></el-input>
-        <template #footer>
-            <el-button @click="dialogVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogConfirm()">确 定</el-button>
-        </template>
-    </el-dialog>
+            <div class="wf-side__sn-row" v-if="ticketDetail.sn">
+                <span class="wf-side__sn-tag">{{ ticketDetail.sn }}</span>
+                <span class="wf-side__sn-title" :title="ticketDetail.title">{{ ticketDetail.title }}</span>
+            </div>
+
+            <dl class="wf-side__kv">
+                <div class="wf-side__kv-row">
+                    <dt>提交人</dt>
+                    <dd>{{ ticketDetail.create_by_name || '—' }}</dd>
+                </div>
+                <div class="wf-side__kv-row">
+                    <dt>当前节点</dt>
+                    <dd>
+                        <el-tag type="info" effect="plain" size="small">{{ ticketDetail.state_?.name || '—' }}</el-tag>
+                    </dd>
+                </div>
+                <div
+                    class="wf-side__kv-row"
+                    v-if="ticketDetail.participant_type == 2 || ticketDetail.participant_type == 1"
+                >
+                    <dt>可处理人</dt>
+                    <dd class="wf-side__participants">
+                        <span
+                            v-for="item in ticketDetail.participant_"
+                            :key="item.id"
+                            class="wf-side__chip"
+                        >{{ item.name }}</span>
+                    </dd>
+                </div>
+            </dl>
+
+            <div class="wf-side__actions" v-if="ticketDetail.state_?.enable_retreat && isOwn">
+                <el-button type="danger" size="small" plain @click="handleRetreat">
+                    <el-icon><RefreshLeft /></el-icon><span style="margin-left:4px">撤回</span>
+                </el-button>
+            </div>
+        </section>
+
+        <!-- 审批历史卡 -->
+        <section class="wf-side__card wf-side__card--history">
+            <header class="wf-side__card-header">
+                <span class="wf-side__card-bar"></span>
+                <h4 class="wf-side__card-title">审批历史</h4>
+                <span class="wf-side__count" v-if="ticketLog.length">{{ ticketLog.length }}</span>
+            </header>
+
+            <div class="wf-side__timeline" v-if="ticketLog.length">
+                <div
+                    v-for="(item, idx) in ticketLog"
+                    :key="item.id"
+                    class="wf-side__tl-item"
+                    :class="`is-${kindOf(item)}`"
+                >
+                    <div class="wf-side__tl-rail">
+                        <span class="wf-side__tl-dot"></span>
+                        <span v-if="idx !== ticketLog.length - 1" class="wf-side__tl-line"></span>
+                    </div>
+                    <div class="wf-side__tl-body">
+                        <div class="wf-side__tl-head">
+                            <strong class="wf-side__tl-state">{{ item.state_?.name || '未知状态' }}</strong>
+                            <span class="wf-side__tl-time">{{ shortTime(item.create_time) }}</span>
+                        </div>
+                        <div class="wf-side__tl-meta">
+                            <el-tag
+                                v-if="item.intervene_type != 0"
+                                :type="interveneTypeEnum[item.intervene_type]?.type"
+                                effect="plain"
+                                size="small"
+                            >{{ interveneTypeEnum[item.intervene_type]?.text }}</el-tag>
+                            <span
+                                v-if="item.transition_"
+                                class="wf-side__tl-transition"
+                                :class="{
+                                    'is-approve': item.transition_.attribute_type === 1,
+                                    'is-reject': item.transition_.attribute_type === 2
+                                }"
+                            >{{ item.transition_.name }}</span>
+                            <span v-if="item.participant_" class="wf-side__tl-user">· {{ item.participant_.name }}</span>
+                        </div>
+                        <div class="wf-side__tl-suggestion" v-if="item.suggestion">
+                            <el-tooltip
+                                v-if="item.suggestion.length > 28"
+                                effect="dark"
+                                :content="item.suggestion"
+                                placement="top"
+                            >
+                                <span>{{ item.suggestion.slice(0, 28) + '…' }}</span>
+                            </el-tooltip>
+                            <span v-else>{{ item.suggestion }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <el-empty v-else description="暂无审批记录" :image-size="60" />
+        </section>
+
+        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="420px">
+            <el-input v-model="suggestion" type="textarea" :rows="3" placeholder="请输入说明" />
+            <template #footer>
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="dialogConfirm()">确定</el-button>
+            </template>
+        </el-dialog>
+    </div>
 </template>
+
 <script setup>
 import { ref, defineProps, onMounted, watch } from "vue";
 import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
+import { RefreshLeft } from "@element-plus/icons-vue";
 import API from '@/api';
 import TOOL from "@/utils/tool.js";
+
 const props = defineProps({
     ticket_data: { type: Object, default: null },
     ticket_: { type: Object, default: null, required: true },
 });
-const currentUser = ref(TOOL.data.get("USER_INFO").id)
+const currentUser = ref(TOOL.data.get("USER_INFO").id);
 const isOwn = ref(false);
-const activeNames = ref(['1', '2']);
-const ticketDetail = ref({
-    state_: {}
-});
+const ticketDetail = ref({ state_: {} });
 const ticketLog = ref([]);
 const ticketId = ref(null);
+
 onMounted(() => {
-    // 立即处理初始值
     if (props.ticket_ && props.ticket_.id) {
-        ticketId.value = props.ticket_.id
-        getTicketDetail()
-        getTicketLog()
+        ticketId.value = props.ticket_.id;
+        getTicketDetail();
+        getTicketLog();
     }
-    
-    // 同时监听后续变化
     watch(
         () => props.ticket_,
         async (newVal) => {
             if (newVal && Object.keys(newVal).length > 0) {
-                ticketId.value = newVal.id
-                getTicketDetail()
-                getTicketLog()
+                ticketId.value = newVal.id;
+                getTicketDetail();
+                getTicketLog();
             }
         },
         { deep: true }
-    )
+    );
 });
+
 const emit = defineEmits(['success']);
 const refreshTicket = async () => {
-    isOwn.value = false
-    ticketLog.value = []
-    activeNames.value = ['1', '2'] // 根据需要恢复初始展开项
-    getTicketDetail()
-    getTicketLog()
-    emit('success')
-}
+    isOwn.value = false;
+    ticketLog.value = [];
+    getTicketDetail();
+    getTicketLog();
+    emit('success');
+};
 
 const getTicketDetail = () => {
     API.wf.ticket.ticketItem.req(ticketId.value).then(res => {
         ticketDetail.value = res;
-        const isCreator = res.create_by === currentUser.value
-        if (isCreator) {
-        isOwn.value = true
-        }
+        if (res.create_by === currentUser.value) isOwn.value = true;
     });
 };
 
-
 const getTicketLog = () => {
     API.wf.ticket.ticketFlowlogs.req(ticketId.value).then(res => {
         ticketLog.value = res;
-    })
-}
+    });
+};
 
-function getColor(item) {
-    if (item.transition_?.attribute_type === 1) return "#67C23A"; // 同意 绿色
-    if (item.transition_?.attribute_type === 2) return "#F56C6C"; // 拒绝 红色
-    return "#909399"; // 默认灰色
+function kindOf(item) {
+    if (item.transition_?.attribute_type === 1) return "approve";
+    if (item.transition_?.attribute_type === 2) return "reject";
+    return "neutral";
+}
+function shortTime(ts) {
+    if (!ts) return "";
+    return ts.length >= 16 ? ts.slice(5, 16) : ts;
 }
 
 const dialogVisible = ref(false);
@@ -141,13 +193,243 @@ const dialogTitle = ref("意见/原因");
 const suggestion = ref("");
 const handleRetreat = () => {
     dialogTitle.value = "撤回原因";
+    suggestion.value = "";
     dialogVisible.value = true;
 };
 const dialogConfirm = () => {
     API.wf.ticket.ticketRetreat
-            .req(ticketId.value, {"suggestion": suggestion.value})
-            .then((res) => {
-                refreshTicket();
-            });
+        .req(ticketId.value, { "suggestion": suggestion.value })
+        .then(() => {
+            dialogVisible.value = false;
+            refreshTicket();
+        });
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.wf-side {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 6px 4px 12px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.wf-side__card {
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 10px;
+    padding: 14px 14px 12px;
+    transition: box-shadow 0.2s ease;
+}
+.wf-side__card:hover {
+    box-shadow: 0 2px 12px -8px rgba(0, 0, 0, 0.18);
+}
+.wf-side__card--history {
+    padding-bottom: 16px;
+}
+
+.wf-side__card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+.wf-side__card-bar {
+    width: 3px;
+    height: 14px;
+    border-radius: 2px;
+    background: var(--el-color-primary);
+}
+.wf-side__card-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    letter-spacing: 0.3px;
+    flex: 1;
+}
+.wf-side__count {
+    font-size: 11px;
+    color: var(--el-text-color-secondary);
+    background: var(--el-fill-color);
+    padding: 1px 7px;
+    border-radius: 8px;
+}
+
+.wf-side__sn-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed var(--el-border-color-lighter);
+}
+.wf-side__sn-tag {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11.5px;
+    padding: 2px 8px;
+    background: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
+    border-radius: 4px;
+    white-space: nowrap;
+}
+.wf-side__sn-title {
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.wf-side__kv {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.wf-side__kv-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    font-size: 13px;
+    line-height: 1.6;
+}
+.wf-side__kv-row dt {
+    width: 64px;
+    flex-shrink: 0;
+    color: var(--el-text-color-secondary);
+    font-weight: 400;
+}
+.wf-side__kv-row dd {
+    margin: 0;
+    color: var(--el-text-color-primary);
+    flex: 1;
+    word-break: break-all;
+}
+
+.wf-side__participants {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+.wf-side__chip {
+    display: inline-block;
+    padding: 1px 8px;
+    font-size: 12px;
+    background: var(--el-fill-color);
+    color: var(--el-text-color-regular);
+    border-radius: 10px;
+}
+
+.wf-side__actions {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--el-border-color-lighter);
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* ===== 时间线 ===== */
+.wf-side__timeline {
+    display: flex;
+    flex-direction: column;
+}
+.wf-side__tl-item {
+    display: flex;
+    gap: 12px;
+    position: relative;
+}
+.wf-side__tl-rail {
+    position: relative;
+    width: 12px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 6px;
+}
+.wf-side__tl-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--el-color-info);
+    box-shadow: 0 0 0 3px var(--el-fill-color);
+    z-index: 1;
+}
+.wf-side__tl-line {
+    flex: 1;
+    width: 2px;
+    background: var(--el-border-color-lighter);
+    margin-top: 2px;
+}
+.wf-side__tl-item.is-approve .wf-side__tl-dot {
+    background: var(--el-color-success);
+    box-shadow: 0 0 0 3px var(--el-color-success-light-9);
+}
+.wf-side__tl-item.is-reject .wf-side__tl-dot {
+    background: var(--el-color-danger);
+    box-shadow: 0 0 0 3px var(--el-color-danger-light-9);
+}
+
+.wf-side__tl-body {
+    flex: 1;
+    padding-bottom: 14px;
+    min-width: 0;
+}
+.wf-side__tl-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 4px;
+}
+.wf-side__tl-state {
+    font-size: 13px;
+    color: var(--el-text-color-primary);
+    font-weight: 600;
+}
+.wf-side__tl-time {
+    font-size: 11.5px;
+    color: var(--el-text-color-placeholder);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wf-side__tl-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--el-text-color-regular);
+    margin-bottom: 4px;
+}
+.wf-side__tl-transition {
+    font-weight: 500;
+}
+.wf-side__tl-transition.is-approve { color: var(--el-color-success); }
+.wf-side__tl-transition.is-reject { color: var(--el-color-danger); }
+.wf-side__tl-user {
+    color: var(--el-text-color-secondary);
+}
+.wf-side__tl-suggestion {
+    background: var(--el-fill-color-light);
+    border-left: 2px solid var(--el-border-color);
+    padding: 5px 8px;
+    border-radius: 0 6px 6px 0;
+    font-size: 12px;
+    color: var(--el-text-color-regular);
+    line-height: 1.5;
+    margin-top: 4px;
+}
+.wf-side__tl-item.is-approve .wf-side__tl-suggestion {
+    border-left-color: var(--el-color-success);
+    background: var(--el-color-success-light-9);
+}
+.wf-side__tl-item.is-reject .wf-side__tl-suggestion {
+    border-left-color: var(--el-color-danger);
+    background: var(--el-color-danger-light-9);
+}
+</style>