From 8f62f65c0b548fbea5c8a7d096b72e7a61a4b17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E5=BA=86=E6=B3=B0?=
 <12369755+htcloud1@user.noreply.gitee.com>
Date: Tue, 18 Aug 2026 22:43:33 +0800
Subject: [PATCH] =?UTF-8?q?style(meeting-new):=20=E4=B8=A5=E6=A0=BC?=
 =?UTF-8?q?=E6=8C=89=20People.vue=20=E6=A0=87=E5=87=86=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=20(=E7=AC=AC=E4=BA=8C=E8=BD=AE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按 /style-alignment skill 重新对齐:
- 用 el-form + el-form-item (skill form 页标准, 不另起 div.form-actions)
- 用 el-button type=primary (Element Plus 默认主题, 不覆盖 CSS)
- 用 el-input / el-date-picker (替代 raw input[type=text], Element Plus 风格统一)
- 删自定义 .btn / .btn-primary / .btn-default / .form-row / .form-label / .form-input CSS
- 删自定义 2 列 grid 布局 (prototype 特定, 跟项目标准不符)
- 11 项全用 el-form-item 包裹 (label 无冒号)
- 底部按钮直接 <el-form-item> 包裹 (skill 标准)
- 单 page-card + max-width: 1200px (form 页 skill 标准)
- 保留 红字提示 .hint-text + 只读值 .form-value 业务专属 CSS
- 保留 el-form :rules 校验 (替代手动 if 判断)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 ry-vue3/src/views/manager/MeetingNew.vue | 248 ++++++-----------------
 1 file changed, 63 insertions(+), 185 deletions(-)

diff --git a/ry-vue3/src/views/manager/MeetingNew.vue b/ry-vue3/src/views/manager/MeetingNew.vue
index 1631866..0018054 100644
--- a/ry-vue3/src/views/manager/MeetingNew.vue
+++ b/ry-vue3/src/views/manager/MeetingNew.vue
@@ -1,85 +1,61 @@
 <template>
   <div class="page-card manager-meeting-new">
-    <!-- 面包屑 (skill: 首页 / 分类 / 当前页) -->
+    <!-- 面包屑 -->
     <div class="breadcrumb">首页 / 会议管理 / 新建会议</div>
 
-    <!-- 红字提示 (业务规则, 跟原型一致) -->
+    <!-- 红字提示 (业务规则) -->
     <p class="hint-text">*会议名称默认为项目名称,不可修改</p>
 
-    <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>
+    <!-- 整张 el-form (skill form 页标准: el-form 包裹所有 el-form-item, 不另起 form-actions) -->
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+      <!-- 左列 6 项只读快照 (来自 biz_project 派生) -->
+      <el-form-item label="项目编号">
+        <span class="form-value code">{{ snap.projectNo }}</span>
+      </el-form-item>
+      <el-form-item label="项目名称">
+        <span class="form-value">{{ snap.projectName }}</span>
+      </el-form-item>
+      <el-form-item label="总场次/总期数">
+        <span class="form-value">{{ snap.totalSessions }}</span>
+      </el-form-item>
+      <el-form-item label="支持单位">
+        <span class="form-value">{{ snap.sponsorOrgName }}</span>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <span class="form-value">{{ snap.createTime }}</span>
+      </el-form-item>
+      <el-form-item label="创建人员">
+        <span class="form-value">{{ snap.createBy }}</span>
+      </el-form-item>
 
-        <!-- 右列 (原型 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>
+      <!-- 右列 5 项: 1 只读 + 4 输入 -->
+      <el-form-item label="会议名称">
+        <span class="form-value">{{ form.meetingName }}</span>
+      </el-form-item>
+      <el-form-item label="期数" prop="periodNo">
+        <el-input v-model="form.periodNo" placeholder="请输入期数" />
+      </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" placeholder="选择开始时间" />
+      </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" placeholder="选择结束时间" />
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
 
-      <!-- 底部按钮 -->
-      <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>
+      <!-- 底部按钮 (skill: 直接用 el-form-item 包裹, 不另起 div.form-actions) -->
+      <el-form-item>
+        <el-button type="primary" @click="onSave">保存</el-button>
+        <el-button @click="goBack">取消</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script setup>
-import { reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { bizAdd, bizGet } from '@/api/public'
 import { ElMessage } from 'element-plus'
@@ -87,8 +63,9 @@ import { ElMessage } from 'element-plus'
 const route = useRoute()
 const router = useRouter()
 const preselectProjectId = route.query.projectId || ''
+const formRef = ref(null)
 
-// 项目只读快照 (左列 6 项 + 右列"会议名称"默认)
+// 项目只读快照 (左列 6 项)
 const snap = reactive({
   projectNo: '',
   projectName: '',
@@ -98,9 +75,9 @@ const snap = reactive({
   createBy: ''
 })
 
-// 表单 (右列 5 项: meetingName 只读 + periodNo/startTime/endTime/remark 输入)
+// 表单 (右列 5 项: meetingName 只读 + 4 输入)
 const form = reactive({
-  projectId: preselectProjectId ? Number(preselectProjectId) : null, // 提交时拼到 body
+  projectId: preselectProjectId ? Number(preselectProjectId) : null,
   projectNo: '',
   projectName: '',
   meetingName: '',
@@ -110,10 +87,14 @@ const form = reactive({
   remark: ''
 })
 
+const rules = {
+  periodNo: [{ required: true, message: '请输入期数', trigger: 'blur' }],
+  startTime: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }],
+  endTime: [{ required: true, message: '请选择会议结束时间', trigger: 'change' }]
+}
+
 async function onSave() {
-  if (!form.periodNo) { ElMessage.warning('请输入期数'); return }
-  if (!form.startTime) { ElMessage.warning('请选择会议开始时间'); return }
-  if (!form.endTime) { ElMessage.warning('请选择会议结束时间'); return }
+  try { await formRef.value.validate() } catch (e) { return }
   try {
     await bizAdd('meeting', {
       projectId: form.projectId,
@@ -139,14 +120,13 @@ onMounted(async () => {
   try {
     const r = await bizGet('project', preselectProjectId)
     const d = (r && r.data) || {}
-    // 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 || ''
@@ -155,20 +135,21 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* === 整页面板 (skill 标准: 单 page-card, form 页 max-width 1200px) === */
+/* === 整页面板 (skill: form 页 page-card 设 max-width: 1200px) === */
 .manager-meeting-new {
   max-width: 1200px;
   margin: 0 auto;
   padding: 16px;
 }
 
+/* 面包屑 (跟 executor/People.vue 一致) */
 .breadcrumb {
   font-size: 13px;
   color: #8c8c8c;
   margin-bottom: 12px;
 }
 
-/* 红字提示 (skill: 业务规则, 用 .hint-text) */
+/* 红字提示 (skill .hint-list 风格: 白底 + 灰边 + 8px 圆角 + 红字) */
 .hint-text {
   background: #fff;
   border: 1px solid #f0f0f0;
@@ -180,117 +161,14 @@ onMounted(async () => {
   line-height: 1.8;
 }
 
-/* 表单容器 (跟原型 .card 一致, 不是嵌套 page-card) */
-.card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 32px 40px;
-  border: 1px solid #f0f0f0;
-}
-
-/* 2 列布局 (跟原型 .form-grid 一致, grid-auto-flow: column 让左 6 右 5 对齐) */
-.form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-flow: column;
-  grid-template-rows: repeat(6, auto);
-  gap: 20px 32px;
-  max-width: 900px;
-}
-
-.form-row {
-  display: flex;
-  align-items: center;
-}
-
-/* skill 标准: label-width 120px */
-.form-label {
-  flex: 0 0 120px;
-  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: var(--brand-primary);
-  box-shadow: 0 0 0 3px rgba(30, 58, 138, 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;
-}
-
+/* 只读值样式 (跟 el-form-item 的 input 同高, 让布局对齐) */
 .form-value {
-  flex: 1;
   font-size: 14px;
-  color: #1a1a1a;
+  color: #333;
   line-height: 32px;
 }
 .form-value.code {
   font-family: ui-monospace, "Courier New", monospace;
   color: var(--brand-primary);
 }
-
-/* 按钮区 (跟原型一致, 用 .btn 自定义风格, 主色改用 var(--brand-primary)) */
-.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: var(--brand-primary);
-  color: #fff;
-  border-color: var(--brand-primary);
-}
-.btn-primary:hover {
-  background: var(--brand-primary-deep);
-  border-color: var(--brand-primary-deep);
-}
-.btn-default {
-  background: #fff;
-  color: #333;
-  border-color: #797979;
-}
-.btn-default:hover {
-  border-color: var(--brand-primary);
-  color: var(--brand-primary);
-}
-
-@media (max-width: 768px) {
-  .manager-meeting-new { padding: 16px; }
-  .card { padding: 16px; }
-  .form-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
-  .form-actions { flex-direction: column; }
-  .btn { width: 100%; }
-}
 </style>
\ No newline at end of file