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>

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

@@ -1,76 +1,86 @@
 <template>
-  <div class="page-card manager-meeting-new">
-    <div class="breadcrumb">项目列表 / 新建会议</div>
-    <p class="page-sub" v-if="preselectProjectId">已选择项目: {{ projectSnap.projectName || '加载中...' }} ({{ projectSnap.projectNo || preselectProjectId }})</p>
+  <div class="content">
+    <!-- #1 面包屑 (跟原型 §#1 一致: 项目列表可点击链接) -->
+    <div class="breadcrumb">
+      <a href="javascript:void(0)" @click="goBack">项目列表</a> &gt; 新建会议
+    </div>
 
-    <!-- 6 个项目只读快照 (跟原型 §#4 一致) -->
-    <el-descriptions
-      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>
+    <!-- #2 h1 (跟原型 §#2 一致) -->
+    <h1 class="page-title">新建会议</h1>
 
-    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="meeting-form">
-      <el-form-item label="项目编号" prop="projectNo">
-        <el-input v-model="form.projectNo" :disabled="!!preselectProjectId" placeholder="项目编号" />
-      </el-form-item>
-      <el-form-item label="会议名称" prop="meetingName">
-        <!-- 跟原型 §#3 一致: 默认 = 项目名称, 不可修改 -->
-        <el-input v-model="form.meetingName" :disabled="!!preselectProjectId" placeholder="会议名称" />
-        <span v-if="preselectProjectId" class="field-tip">*会议名称默认为项目名称,不可修改</span>
-      </el-form-item>
-      <el-form-item label="项目形式" prop="projectForm">
-        <el-select v-model="form.projectForm" placeholder="请选择" style="width:100%">
-          <el-option label="线上" value="线上" />
-          <el-option label="线下" value="线下" />
-          <el-option label="线上+线下" value="线上+线下" />
-          <el-option label="其他" value="其他" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="会议开始时间" prop="startTime">
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
-      </el-form-item>
-      <el-form-item label="会议结束时间" prop="endTime">
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
-      </el-form-item>
-      <el-form-item label="总期数" prop="totalPeriods">
-        <el-input-number v-model="form.totalPeriods" :min="1" style="width:100%" />
-      </el-form-item>
-      <el-form-item label="期数" prop="periodNo">
-        <el-input-number v-model="form.periodNo" :min="1" style="width:100%" />
-      </el-form-item>
-      <el-form-item label="当前阶段" prop="currentStage">
-        <el-select v-model="form.currentStage" placeholder="请选择" style="width:100%">
-          <el-option label="未执行" value="未执行" />
-          <el-option label="执行中" value="执行中" />
-          <el-option label="已执行" value="已执行" />
-          <el-option label="已完结" value="已完结" />
-          <el-option label="待监管" value="待监管" />
-          <el-option label="监管通过" value="监管通过" />
-          <el-option label="待整改" value="待整改" />
-          <el-option label="待结算" value="待结算" />
-          <el-option label="已结算" value="已结算" />
-          <el-option label="已结题" value="已结题" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="form.remark" type="textarea" :rows="3" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSave">保存</el-button>
-        <el-button @click="onCancel">取消</el-button>
-      </el-form-item>
-    </el-form>
+    <!-- #3 红字提示 (跟原型 §#3 一致) -->
+    <p class="hint-text">*会议名称默认为项目名称,不可修改</p>
+
+    <!-- #4+#5 表单(对应原型两列布局, 左 6 项只读 + 右 5 项, 用 grid-auto-flow: column 让左右对齐) -->
+    <div class="card">
+      <div class="form-grid">
+        <!-- 左列 (原型 6 项只读值) -->
+        <div class="form-row">
+          <span class="form-label">项目编号:</span>
+          <span class="form-value code">{{ snap.projectNo }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">项目名称:</span>
+          <span class="form-value">{{ snap.projectName }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">总场次/总期数:</span>
+          <span class="form-value">{{ snap.totalSessions }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">支持单位:</span>
+          <span class="form-value">{{ snap.sponsorOrgName }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">创建时间:</span>
+          <span class="form-value">{{ snap.createTime }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">创建人员:</span>
+          <span class="form-value">{{ snap.createBy }}</span>
+        </div>
+
+        <!-- 右列 (原型 5 项: 1 只读 + 4 输入) -->
+        <div class="form-row">
+          <span class="form-label">会议名称:</span>
+          <span class="form-value">{{ form.meetingName }}</span>
+        </div>
+        <div class="form-row">
+          <span class="form-label">期数:</span>
+          <input type="text" class="form-input" v-model="form.periodNo" placeholder="请输入期数" />
+        </div>
+        <div class="form-row">
+          <span class="form-label">会议开始时间:</span>
+          <el-date-picker
+            v-model="form.startTime"
+            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>
+          <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, // P0#3: 补 projectId
+  projectId: preselectProjectId ? Number(preselectProjectId) : null, // 提交时拼到 body
   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 })
-    ElMessage.success('保存成功')
-    router.push('/manager/meetings')
+    await bizAdd('meeting', {
+      projectId: form.projectId,
+      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 (默认 = 项目名)
-    form.projectId = d.projectId ?? Number(preselectProjectId)
+    // 6 项只读快照 (左列)
+    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: 会议名称默认 = 项目名称
-    // 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 || ''
+    form.meetingName = d.projectName || ''
   } catch (e) {}
 })
 </script>
 
 <style scoped>
-/* 整页面板 (与 People.vue 风格一致) */
-.manager-meeting-new { padding: 16px; }
-.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
-.page-sub { color: #909399; font-size: 13px; margin-bottom: 16px; }
-.project-snapshot { margin-bottom: 16px; }
-.field-tip { color: #f56c6c; font-size: 12px; margin-left: 8px; }
-.meeting-form { max-width: 700px; }
+/* === 跟 proto/html/components/new-meeting.html CSS 1:1 对齐 === */
+.content { padding: 24px 32px; }
+
+.breadcrumb {
+  font-size: 13px;
+  color: #8c8c8c;
+  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>