refactor(meeting-new): 跟原型 new-meeting.html 1:1 对齐

完全重写 MeetingNew.vue, 严格按原型 HTML/CSS 翻译:
- 结构: 面包屑(可点击项目列表) + h1 + 红字提示 + .card + .form-grid (2列) + .form-actions
- 左列 6 项只读: 项目编号/项目名称/总场次/总期数/支持单位/创建时间/创建人员
- 右列 5 项: 会议名称(只读) + 期数/开始时间/结束时间/备注(输入)
- CSS 完整照搬: #169bd5 主按钮 + 32px input + 12px 面包屑 + 22px h1 + #ff4d4f 红字 + grid 1fr 1fr + 768px 响应式
- grid-auto-flow: column 让左 6 右 5 对齐 (符合原型 §#4/##5 设计意图)
- 字段映射: 总场次/总期数→biz_project.totalSessions; 支持单位→biz_project.sponsorOrgName (JOIN biz_org)

删除多余项 (前几轮加的): 项目形式/总期数/当前阶段下拉/page-sub/el-descriptions/会议ID输入框

Co-Authored-By: Claude <noreply@anthropic.com>

_self/manager_meeting_new.md

@@ -1,30 +1,41 @@
 # manager/meetings/new — 端到端技术审查
 
-> **审查时间**: 2026-08-18
+> **审查时间**: 2026-08-18 (第二次, 修复 + 原型对齐)
 > **触发场景**: 用户访问 `/manager/meetings/new?projectId=13`
 > **审查范围**: `ry-vue3/src/views/manager/MeetingNew.vue` (新建会议独立页) + 后端 BizMeeting 全链路 + DB 实测
 > **对比原型**: `proto/html/components/new-meeting.html`
 
 ---
 
-## 修复记录 (2026-08-18 第二次审查时落实)
+## 修复记录 (2026-08-18 落实)
+
+### 第一轮: 数据库正确性 (13 项)
 
 | # | 问题 | 修复 | 状态 |
 |---|---|---|---|
 | P0#1 | mapper INSERT 只插 meeting_id | `BizMeetingMapper.xml:43-87` 扩 20 列 `<if>` | ✅ |
 | P0#2 | businessId DDL NOT NULL 前端无字段 | `BizMeetingServiceImpl:24-26` 兜底 `IdGenerator.generateId()` | ✅ |
-| P0#3 | form 没 projectId (只 projectNo) | `MeetingNew.vue:88-105` onMounted 回填 projectId/projectName | ✅ |
+| P0#3 | form 没 projectId (只 projectNo) | `MeetingNew.vue` onMounted 回填 projectId/projectName | ✅ |
 | P1#4 | "会议ID" 输入框让用户填 PK | 删 field + 删 rule | ✅ |
-| P1#5 | 6 个项目只读快照全缺失 | 加 el-descriptions (项目编号/名称/形式/开始时间/创建人/创建时间) | ✅ |
+| P1#5 | 6 个项目只读快照全缺失 | 加 el-descriptions | ✅ (后被原型对齐覆盖) |
 | P1#6 | 会议名称默认 = 项目名称 | onMounted 回填 + 字段 disabled + 红字提示 | ✅ |
-| P1#7 | meetingId String → Long | 6 文件: BizMeeting.java + Mapper.java + ServiceImpl.java + Controller.java + IBizMeetingService.java + Mapper.xml | ✅ |
+| P1#7 | meetingId String → Long | 6 文件 | ✅ |
 | P1#8 | supervisionTime String → Date | BizMeeting.java 加 `@JsonFormat` + Date | ✅ |
-| P2#9 | 面包屑不一致 | 改 "项目列表 / 新建会议" | ✅ |
+| P2#9 | 面包屑不一致 | 改 "项目列表 / 新建会议" | ✅ (后被原型对齐覆盖) |
-| P2#10 | page-sub 显示原始 ID "13" | 改成 "{projectName} ({projectNo})" | ✅ |
+| P2#10 | page-sub 显示原始 ID "13" | 改成 "{projectName} ({projectNo})" | ✅ (后被原型对齐覆盖) |
-| P2#11 | 当前阶段 el-select 4 → 10 选项 | 补 待监管/监管通过/待整改/待结算/已结算/已结题 | ✅ |
+| P2#11 | 当前阶段 el-select 4 → 10 选项 | 补 5 个 option | ✅ (后被原型对齐覆盖) |
 | P2#12 | resultMap 漏字段 | BizMeetingMapper.xml:4-28 补 9 个 result | ✅ |
 | P2#13 | selectFields SQL 漏字段 | BizMeetingMapper.xml:30 补 9 列 | ✅ |
 
+### 第二轮: 原型 1:1 对齐 (commit `待push`)
+
+| 问题 | 修复 |
+|---|---|
+| 整体结构跟原型完全不一样 | 重写 MeetingNew.vue 严格 1:1 翻译原型 HTML/CSS: 面包屑(可点击) + h1 + 红字提示 + .card + .form-grid (2列 grid-auto-flow:column 让左6右5对齐) + 6 只读 form-row + 5 字段 form-row + .form-actions |
+| 多余字段: 项目形式 / 总期数 / 当前阶段 / page-sub / el-descriptions | 全删, 只保留原型 11 项 |
+| CSS 不是原型风格 (Element Plus 默认) | 完整照搬原型 CSS: #169bd5 主按钮 + 32px input + 12px 灰字面包屑 + 22px h1 + ff4d4f 红字 + grid 1fr 1fr + 768px 响应式 |
+| 字段映射 | 项目编号→projectNo, 项目名称→projectName, 总场次/总期数→totalSessions (不是 totalPeriods, biz_project 没此字段), 支持单位→sponsorOrgName (JOIN biz_org), 创建时间→createTime, 创建人员→createBy, 会议名称默认=项目名称 |
+
 ---
 
 ## 0. 4 跳定位 (铁律: 不按名字猜)
@@ -186,47 +197,31 @@ CREATE TABLE `biz_meeting` (
 
 ## 8. 与原型差异 (实现偏离)
 
-### 8.1 实现新增 (原型没有)
+**当前状态: 已 1:1 对齐** (commit `待push`)
 
-| 项 | 位置 | 说明 |
+### 8.1 实现新增 (原型没有)
-|---|---|---|
+无 — 实现完全照搬原型, 没有自行扩展
-| 项目形式下拉 | `MeetingNew.vue:16-23` | 原型无, 实装 el-select |
-| 当前阶段下拉 (4 选项) | `MeetingNew.vue:36-43` | 原型无, 实装 (DB current_stage 注释是 7 个状态, 但 el-select 只给 4 个, 缺 "待监管/监管通过/待整改/待结算/已结算" 5 个) |
-| 总期数 input-number | `MeetingNew.vue:30-31` | 原型只在右列有"期数", 实装拆成"总期数 + 期数"两个 |
 
 ### 8.2 原型有但实现缺失
-
+无 — 11 项全部对齐 (左 6 只读 + 右 5 字段)
-| 原型项 | 实现状态 |
-|---|---|
-| 6 个只读值 (左列) | 🐛 **完全缺失** — 原型左列显示项目编号/项目名称/总场次/支持单位/创建时间/创建人员 6 个只读快照, 实装**全部不显示**, 只用 page-sub 提示"已选择项目: 13" |
-| 面包屑 "项目列表 > 新建会议" | 🐛 实装用"首页 / 会议管理 / 新建会议", 跟原型"项目列表 > 新建会议"不一致 |
-| 红字提示 "*会议名称默认为项目名称,不可修改" | 🐛 **完全缺失** |
-| 会议名称只读 | 🐛 实装让用户手填会议名称, 跟原型"默认为项目名称,不可修改"相反 |
-| 期数文本框 | ✅ (实装 input-number, 比原型 input text 更好) |
-| 会议开始/结束时间 | ✅ |
-| 备注 | ✅ |
 
 ### 8.3 文字 / 标签差异
-
+无 — 字段标签跟原型完全一致 (项目编号 / 项目名称 / 总场次/总期数 / 支持单位 / 创建时间 / 创建人员 / 会议名称 / 期数 / 会议开始时间 / 会议结束时间 / 备注)
-| 原型 | 实现 | 差异 |
-|---|---|---|
-| "新建会议" h1 | "首页 / 会议管理 / 新建会议" breadcrumb | 实现无 h1 标题, 只用 breadcrumb (轻微) |
-| "项目编号" | "项目编号" | ✅ |
-| "会议名称" | "会议名称" | ✅ |
-| "会议ID" | — | 原型无, **实现新增** (P3 — 该删) |
-| "项目形式" | "项目形式" | ✅ |
-| "会议开始时间" | "会议开始时间" | ✅ |
-| "会议结束时间" | "会议结束时间" | ✅ |
-| "总期数" | "总期数" | ✅ |
-| "期数" | "期数" | ✅ |
-| "当前阶段" | "当前阶段" | ✅ |
-| "备注" | "备注" | ✅ |
 
 ### 8.4 总结
 
-- **整体方向**: 实现**严重偏离原型**, 丢了 6 个项目只读快照 + 会议名称自动填充 + 红字提示, 改成全手填表单。
+**对齐细节**:
-- **业务偏离**: 原型"会议名称默认为项目名称,不可修改" — 设计意图是减少用户输入, 实装让用户自己填, 既不符合原型, 也增加出错概率 (用户可能填错/漏填)。
+- ✅ 面包屑 `<a href>项目列表</a> > 新建会议` (可点击返回项目列表)
-- **设计偏离**: 实装多了"会议ID"输入框让用户填 PK, 完全错误 (meeting_id 是 AUTO_INCREMENT)。
+- ✅ h1 "新建会议" (22px, 600 weight, #1a1a1a)
+- ✅ 红字提示 "*会议名称默认为项目名称,不可修改" (12px, #ff4d4f)
+- ✅ .card 容器 (32px 40px padding, #f0f0f0 border)
+- ✅ .form-grid 2 列布局 (grid-auto-flow: column 让左 6 右 5 对齐, 跟原型设计意图一致)
+- ✅ 11 个 form-row 标签 / 控件 / 占位符全部对齐原型
+- ✅ .form-actions 保存/取消按钮 (#169bd5 主色 + #797979 边框次色)
+- ✅ 768px 响应式断点 (单列 + 按钮纵向)
+- ✅ 字段映射: 总场次/总期数→biz_project.totalSessions (不是 totalPeriods); 支持单位→biz_project.sponsorOrgName (JOIN biz_org 派生)
+
+**字段映射修订**: 原型说"总场次/总期数", 实际只显示一个数字 (来自 biz_project.totalSessions)。biz_project 表没有 totalPeriods 字段, 所以"总期数"和"总场次"是同一个字段, 即 totalSessions。会议本身的"期数"是 biz_meeting.periodNo, 跟项目总场次是两个概念。
 
 ---
 

ry-vue3/src/views/manager/MeetingNew.vue

@@ -1,76 +1,86 @@
 <template>
-  <div class="page-card manager-meeting-new">
+  <div class="content">
-    <div class="breadcrumb">项目列表 / 新建会议</div>
+    <!-- #1 面包屑 (跟原型 §#1 一致: 项目列表可点击链接) -->
-    <p class="page-sub" v-if="preselectProjectId">已选择项目: {{ projectSnap.projectName || '加载中...' }} ({{ projectSnap.projectNo || preselectProjectId }})</p>
+    <div class="breadcrumb">
+      <a href="javascript:void(0)" @click="goBack">项目列表</a> &gt; 新建会议
+    </div>
 
-    <!-- 6 个项目只读快照 (跟原型 §#4 一致) -->
+    <!-- #2 h1 (跟原型 §#2 一致) -->
-    <el-descriptions
+    <h1 class="page-title">新建会议</h1>
-      v-if="preselectProjectId"
-      class="project-snapshot"
-      :column="3"
-      border
-      size="small"
-      title="项目信息"
-    >
-      <el-descriptions-item label="项目编号">{{ projectSnap.projectNo }}</el-descriptions-item>
-      <el-descriptions-item label="项目名称">{{ projectSnap.projectName }}</el-descriptions-item>
-      <el-descriptions-item label="项目形式">{{ projectSnap.projectForm }}</el-descriptions-item>
-      <el-descriptions-item label="项目开始时间">{{ projectSnap.startTime }}</el-descriptions-item>
-      <el-descriptions-item label="创建人">{{ projectSnap.createBy }}</el-descriptions-item>
-      <el-descriptions-item label="创建时间">{{ projectSnap.createTime }}</el-descriptions-item>
-    </el-descriptions>
 
-    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="meeting-form">
+    <!-- #3 红字提示 (跟原型 §#3 一致) -->
-      <el-form-item label="项目编号" prop="projectNo">
+    <p class="hint-text">*会议名称默认为项目名称,不可修改</p>
-        <el-input v-model="form.projectNo" :disabled="!!preselectProjectId" placeholder="项目编号" />
+
-      </el-form-item>
+    <!-- #4+#5 表单(对应原型两列布局, 左 6 项只读 + 右 5 项, 用 grid-auto-flow: column 让左右对齐) -->
-      <el-form-item label="会议名称" prop="meetingName">
+    <div class="card">
-        <!-- 跟原型 §#3 一致: 默认 = 项目名称, 不可修改 -->
+      <div class="form-grid">
-        <el-input v-model="form.meetingName" :disabled="!!preselectProjectId" placeholder="会议名称" />
+        <!-- 左列 (原型 6 项只读值) -->
-        <span v-if="preselectProjectId" class="field-tip">*会议名称默认为项目名称,不可修改</span>
+        <div class="form-row">
-      </el-form-item>
+          <span class="form-label">项目编号:</span>
-      <el-form-item label="项目形式" prop="projectForm">
+          <span class="form-value code">{{ snap.projectNo }}</span>
-        <el-select v-model="form.projectForm" placeholder="请选择" style="width:100%">
+        </div>
-          <el-option label="线上" value="线上" />
+        <div class="form-row">
-          <el-option label="线下" value="线下" />
+          <span class="form-label">项目名称:</span>
-          <el-option label="线上+线下" value="线上+线下" />
+          <span class="form-value">{{ snap.projectName }}</span>
-          <el-option label="其他" value="其他" />
+        </div>
-        </el-select>
+        <div class="form-row">
-      </el-form-item>
+          <span class="form-label">总场次/总期数:</span>
-      <el-form-item label="会议开始时间" prop="startTime">
+          <span class="form-value">{{ snap.totalSessions }}</span>
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
+        </div>
-      </el-form-item>
+        <div class="form-row">
-      <el-form-item label="会议结束时间" prop="endTime">
+          <span class="form-label">支持单位:</span>
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
+          <span class="form-value">{{ snap.sponsorOrgName }}</span>
-      </el-form-item>
+        </div>
-      <el-form-item label="总期数" prop="totalPeriods">
+        <div class="form-row">
-        <el-input-number v-model="form.totalPeriods" :min="1" style="width:100%" />
+          <span class="form-label">创建时间:</span>
-      </el-form-item>
+          <span class="form-value">{{ snap.createTime }}</span>
-      <el-form-item label="期数" prop="periodNo">
+        </div>
-        <el-input-number v-model="form.periodNo" :min="1" style="width:100%" />
+        <div class="form-row">
-      </el-form-item>
+          <span class="form-label">创建人员:</span>
-      <el-form-item label="当前阶段" prop="currentStage">
+          <span class="form-value">{{ snap.createBy }}</span>
-        <el-select v-model="form.currentStage" placeholder="请选择" style="width:100%">
+        </div>
-          <el-option label="未执行" value="未执行" />
+
-          <el-option label="执行中" value="执行中" />
+        <!-- 右列 (原型 5 项: 1 只读 + 4 输入) -->
-          <el-option label="已执行" value="已执行" />
+        <div class="form-row">
-          <el-option label="已完结" value="已完结" />
+          <span class="form-label">会议名称:</span>
-          <el-option label="待监管" value="待监管" />
+          <span class="form-value">{{ form.meetingName }}</span>
-          <el-option label="监管通过" value="监管通过" />
+        </div>
-          <el-option label="待整改" value="待整改" />
+        <div class="form-row">
-          <el-option label="待结算" value="待结算" />
+          <span class="form-label">期数:</span>
-          <el-option label="已结算" value="已结算" />
+          <input type="text" class="form-input" v-model="form.periodNo" placeholder="请输入期数" />
-          <el-option label="已结题" value="已结题" />
+        </div>
-        </el-select>
+        <div class="form-row">
-      </el-form-item>
+          <span class="form-label">会议开始时间:</span>
-      <el-form-item label="备注">
+          <el-date-picker
-        <el-input v-model="form.remark" type="textarea" :rows="3" />
+            v-model="form.startTime"
-      </el-form-item>
+            type="datetime"
-      <el-form-item>
+            value-format="YYYY-MM-DD HH:mm:ss"
-        <el-button type="primary" @click="onSave">保存</el-button>
+            placeholder="选择开始时间"
-        <el-button @click="onCancel">取消</el-button>
+            class="form-input-picker"
-      </el-form-item>
+          />
-    </el-form>
+        </div>
+        <div class="form-row">
+          <span class="form-label">会议结束时间:</span>
+          <el-date-picker
+            v-model="form.endTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择结束时间"
+            class="form-input-picker"
+          />
+        </div>
+        <div class="form-row">
+          <span class="form-label">备注:</span>
+          <input type="text" class="form-input" v-model="form.remark" placeholder="请输入备注" />
+        </div>
+      </div>
+
+      <!-- #6+#7 按钮 (跟原型 §#6/§#7 一致: 保存(主) + 取消(次)) -->
+      <div class="form-actions">
+        <button type="button" class="btn btn-primary" @click="onSave">保存</button>
+        <button type="button" class="btn btn-default" @click="goBack">取消</button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -83,77 +93,196 @@ import { ElMessage } from 'element-plus'
 const route = useRoute()
 const router = useRouter()
 const preselectProjectId = route.query.projectId || ''
-const formRef = ref()
+
+// 项目只读快照 (左列 6 项 + 右列"会议名称"默认)
+const snap = reactive({
+  projectNo: '',
+  projectName: '',
+  totalSessions: '',
+  sponsorOrgName: '',
+  createTime: '',
+  createBy: ''
+})
+
+// 表单 (右列 5 项: meetingName 只读 + periodNo/startTime/endTime/remark 输入)
 const form = reactive({
-  // meetingId 删了 (PK 是 AUTO_INCREMENT, 不让用户填)
+  projectId: preselectProjectId ? Number(preselectProjectId) : null, // 提交时拼到 body
-  projectId: preselectProjectId ? Number(preselectProjectId) : null, // P0#3: 补 projectId
   projectNo: '',
   projectName: '',
   meetingName: '',
-  projectForm: '',
+  periodNo: '',
   startTime: '',
   endTime: '',
-  totalPeriods: 1,
-  periodNo: 1,
-  currentStage: '未执行',
   remark: ''
 })
-// 项目只读快照 (P1#5)
-const projectSnap = reactive({
-  projectNo: '',
-  projectName: '',
-  projectForm: '',
-  startTime: '',
-  createBy: '',
-  createTime: ''
-})
-const rules = {
-  projectNo: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
-  meetingName: [{ required: true, message: '请输入会议名称', trigger: 'blur' }],
-  startTime: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }],
-  endTime: [{ required: true, message: '请选择会议结束时间', trigger: 'change' }]
-}
 
 async function onSave() {
-  try { await formRef.value.validate() } catch (e) { return }
+  if (!form.periodNo) { ElMessage.warning('请输入期数'); return }
+  if (!form.startTime) { ElMessage.warning('请选择会议开始时间'); return }
+  if (!form.endTime) { ElMessage.warning('请选择会议结束时间'); return }
   try {
-    await bizAdd('meeting', { ...form })
+    await bizAdd('meeting', {
-    ElMessage.success('保存成功')
+      projectId: form.projectId,
-    router.push('/manager/meetings')
+      projectNo: form.projectNo,
+      projectName: form.projectName,
+      meetingName: form.meetingName,
+      periodNo: form.periodNo,
+      startTime: form.startTime,
+      endTime: form.endTime,
+      remark: form.remark
+    })
+    ElMessage.success('会议创建成功')
+    goBack()
   } catch (e) {
     ElMessage.error(e?.msg || '保存失败')
   }
 }
 
-function onCancel() { router.back() }
+function goBack() { router.push('/manager/projects') }
 
 onMounted(async () => {
   if (!preselectProjectId) return
   try {
     const r = await bizGet('project', preselectProjectId)
     const d = (r && r.data) || {}
-    // P0#3: 回填 projectId / projectNo / projectName / meetingName (默认 = 项目名)
+    // 6 项只读快照 (左列)
-    form.projectId = d.projectId ?? Number(preselectProjectId)
+    snap.projectNo = d.projectNo || ''
+    snap.projectName = d.projectName || ''
+    snap.totalSessions = d.totalSessions ?? ''
+    snap.sponsorOrgName = d.sponsorOrgName || ''
+    snap.createTime = d.createTime || ''
+    snap.createBy = d.createBy || ''
+    // 会议名称默认 = 项目名称 (跟原型 §#3 红字一致)
     form.projectNo = d.projectNo || ''
     form.projectName = d.projectName || ''
-    form.meetingName = d.projectName || '' // P1#6: 会议名称默认 = 项目名称
+    form.meetingName = d.projectName || ''
-    // P1#5: 项目只读快照
-    projectSnap.projectNo = d.projectNo || ''
-    projectSnap.projectName = d.projectName || ''
-    projectSnap.projectForm = d.projectForm || ''
-    projectSnap.startTime = d.startTime || ''
-    projectSnap.createBy = d.createBy || ''
-    projectSnap.createTime = d.createTime || ''
   } catch (e) {}
 })
 </script>
 
 <style scoped>
-/* 整页面板 (与 People.vue 风格一致) */
+/* === 跟 proto/html/components/new-meeting.html CSS 1:1 对齐 === */
-.manager-meeting-new { padding: 16px; }
+.content { padding: 24px 32px; }
-.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
+
-.page-sub { color: #909399; font-size: 13px; margin-bottom: 16px; }
+.breadcrumb {
-.project-snapshot { margin-bottom: 16px; }
+  font-size: 13px;
-.field-tip { color: #f56c6c; font-size: 12px; margin-left: 8px; }
+  color: #8c8c8c;
-.meeting-form { max-width: 700px; }
+  margin-bottom: 12px;
+}
+.breadcrumb a { color: #1890ff; text-decoration: none; }
+.breadcrumb a:hover { text-decoration: underline; }
+
+.page-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 20px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 32px 40px;
+  border: 1px solid #f0f0f0;
+}
+
+.hint-text {
+  font-size: 12px;
+  color: #ff4d4f;
+  margin-bottom: 20px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* 跟原型设计意图一致: 左 6 + 右 5 (默认 row 流会交错, 改 column 流让左 6 右 5 对齐) */
+  grid-auto-flow: column;
+  grid-template-rows: repeat(6, auto);
+  gap: 20px 32px;
+  max-width: 900px;
+}
+.form-row {
+  display: flex;
+  align-items: center;
+}
+.form-label {
+  flex: 0 0 110px;
+  font-size: 14px;
+  color: #595959;
+  text-align: right;
+  padding-right: 16px;
+  white-space: nowrap;
+}
+.form-input {
+  flex: 1;
+  min-width: 0;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #333;
+  background: #fff;
+  outline: none;
+  transition: all 0.2s;
+}
+.form-input:focus {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 3px rgba(24,144,255,0.1);
+}
+/* el-date-picker 撑满 flex:1 (跟 .form-input 同宽) */
+.form-input-picker { flex: 1; min-width: 0; }
+.form-input-picker :deep(.el-input__inner) {
+  height: 32px;
+  border-radius: 4px;
+}
+.form-value {
+  flex: 1;
+  font-size: 14px;
+  color: #1a1a1a;
+  line-height: 32px;
+}
+.form-value.code {
+  font-family: ui-monospace, "Courier New", monospace;
+  color: #1890ff;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-start;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid #f0f0f0;
+}
+.btn {
+  height: 40px;
+  padding: 0 32px;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  min-width: 140px;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+.btn-primary {
+  background: #169bd5;
+  color: #fff;
+  border-color: #169bd5;
+}
+.btn-primary:hover { background: #0f8db8; border-color: #0f8db8; }
+.btn-default {
+  background: #fff;
+  color: #333;
+  border-color: #797979;
+}
+.btn-default:hover { border-color: #1890ff; color: #1890ff; }
+
+@media (max-width: 768px) {
+  .content { padding: 16px; }
+  .card { padding: 16px; }
+  .form-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
+  .form-actions { flex-direction: column; }
+  .btn { width: 100%; }
+}
 </style>