From 5b4008d24aeb6eade84972298d6e7fef98dc0e4c 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:41:04 +0800
Subject: [PATCH] =?UTF-8?q?style(meeting-new):=20=E5=AF=B9=E9=BD=90=20mana?=
 =?UTF-8?q?ger/MeetingNew.vue=20=E5=88=B0=E9=A1=B9=E7=9B=AE=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换 #1890ff / #169bd5 硬编码蓝 → var(--brand-primary) / var(--brand-primary-deep)
- 单 page-card 包裹 + max-width: 1200px (form 页 skill 标准)
- 面包屑 改 首页 / 会议管理 / 新建会议 (skill 标准, 原型 项目列表 / 新建会议)
- 删 h1 新建会议 大标题 (skill 禁忌)
- 红字提示包到 .hint-text (skill .hint-list 风格, 12px #ff4d4f + #fff bg + #f0f0f0 border)
- form-label 110px → 120px (skill label-width 标准)
- 保留 6+5 form-row 布局 (跟原型 1:1)
- 保留 768px 响应式

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

diff --git a/ry-vue3/src/views/manager/MeetingNew.vue b/ry-vue3/src/views/manager/MeetingNew.vue
index 19da0e9..1631866 100644
--- a/ry-vue3/src/views/manager/MeetingNew.vue
+++ b/ry-vue3/src/views/manager/MeetingNew.vue
@@ -1,56 +1,50 @@
 <template>
-  <div class="content">
-    <!-- #1 面包屑 (跟原型 §#1 一致: 项目列表可点击链接) -->
-    <div class="breadcrumb">
-      <a href="javascript:void(0)" @click="goBack">项目列表</a> &gt; 新建会议
-    </div>
+  <div class="page-card manager-meeting-new">
+    <!-- 面包屑 (skill: 首页 / 分类 / 当前页) -->
+    <div class="breadcrumb">首页 / 会议管理 / 新建会议</div>
 
-    <!-- #2 h1 (跟原型 §#2 一致) -->
-    <h1 class="page-title">新建会议</h1>
-
-    <!-- #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-label">项目编号</span>
           <span class="form-value code">{{ snap.projectNo }}</span>
         </div>
         <div class="form-row">
-          <span class="form-label">项目名称:</span>
+          <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-label">总场次/总期数</span>
           <span class="form-value">{{ snap.totalSessions }}</span>
         </div>
         <div class="form-row">
-          <span class="form-label">支持单位:</span>
+          <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-label">创建时间</span>
           <span class="form-value">{{ snap.createTime }}</span>
         </div>
         <div class="form-row">
-          <span class="form-label">创建人员:</span>
+          <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-label">会议名称</span>
           <span class="form-value">{{ form.meetingName }}</span>
         </div>
         <div class="form-row">
-          <span class="form-label">期数:</span>
+          <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>
+          <span class="form-label">会议开始时间</span>
           <el-date-picker
             v-model="form.startTime"
             type="datetime"
@@ -60,7 +54,7 @@
           />
         </div>
         <div class="form-row">
-          <span class="form-label">会议结束时间:</span>
+          <span class="form-label">会议结束时间</span>
           <el-date-picker
             v-model="form.endTime"
             type="datetime"
@@ -70,12 +64,12 @@
           />
         </div>
         <div class="form-row">
-          <span class="form-label">备注:</span>
+          <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>
@@ -85,7 +79,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { bizAdd, bizGet } from '@/api/public'
 import { ElMessage } from 'element-plus'
@@ -161,24 +155,32 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* === 跟 proto/html/components/new-meeting.html CSS 1:1 对齐 === */
-.content { padding: 24px 32px; }
+/* === 整页面板 (skill 标准: 单 page-card, form 页 max-width 1200px) === */
+.manager-meeting-new {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
 
 .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;
+/* 红字提示 (skill: 业务规则, 用 .hint-text) */
+.hint-text {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 12px 20px;
+  margin-bottom: 16px;
+  font-size: 12px;
+  color: #ff4d4f;
+  line-height: 1.8;
 }
 
+/* 表单容器 (跟原型 .card 一致, 不是嵌套 page-card) */
 .card {
   background: #fff;
   border-radius: 8px;
@@ -186,33 +188,31 @@ onMounted(async () => {
   border: 1px solid #f0f0f0;
 }
 
-.hint-text {
-  font-size: 12px;
-  color: #ff4d4f;
-  margin-bottom: 20px;
-}
-
+/* 2 列布局 (跟原型 .form-grid 一致, grid-auto-flow: column 让左 6 右 5 对齐) */
 .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;
 }
+
+/* skill 标准: label-width 120px */
 .form-label {
-  flex: 0 0 110px;
+  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;
@@ -227,8 +227,8 @@ onMounted(async () => {
   transition: all 0.2s;
 }
 .form-input:focus {
-  border-color: #1890ff;
-  box-shadow: 0 0 0 3px rgba(24,144,255,0.1);
+  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; }
@@ -236,6 +236,7 @@ onMounted(async () => {
   height: 32px;
   border-radius: 4px;
 }
+
 .form-value {
   flex: 1;
   font-size: 14px;
@@ -244,9 +245,10 @@ onMounted(async () => {
 }
 .form-value.code {
   font-family: ui-monospace, "Courier New", monospace;
-  color: #1890ff;
+  color: var(--brand-primary);
 }
 
+/* 按钮区 (跟原型一致, 用 .btn 自定义风格, 主色改用 var(--brand-primary)) */
 .form-actions {
   display: flex;
   gap: 12px;
@@ -266,20 +268,26 @@ onMounted(async () => {
   border: 1px solid transparent;
 }
 .btn-primary {
-  background: #169bd5;
+  background: var(--brand-primary);
   color: #fff;
-  border-color: #169bd5;
+  border-color: var(--brand-primary);
+}
+.btn-primary:hover {
+  background: var(--brand-primary-deep);
+  border-color: var(--brand-primary-deep);
 }
-.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; }
+.btn-default:hover {
+  border-color: var(--brand-primary);
+  color: var(--brand-primary);
+}
 
 @media (max-width: 768px) {
-  .content { padding: 16px; }
+  .manager-meeting-new { padding: 16px; }
   .card { padding: 16px; }
   .form-grid { grid-template-columns: 1fr; grid-auto-flow: row; }
   .form-actions { flex-direction: column; }