verce-vue-test 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
   "type": "module",
   "scripts": {

package/src/router/index.ts

@@ -64,7 +64,7 @@ const router = createRouter({
       path: '/executive-management',
       name: 'executiveManagement',
       meta: { fullscreen: true },
-      component: () => import('../views/ExecutiveManagementView.vue'),
+      component: () => import('../views/ExecutiveManagementView/index.vue'),
     },
   ],
 })

package/src/views/{ExecutiveManagementView.vue → ExecutiveManagementView/index.vue}

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import ExecutiveAccountPanel from '@/components/executive/ExecutiveAccountPanel.vue'
-import ExecutiveReliablePanel from '@/components/executive/ExecutiveReliablePanel.vue'
-import ExecutiveWarningOverview from '@/components/executive/ExecutiveWarningOverview.vue'
-import ExecutiveWarningTablePanel from '@/components/executive/ExecutiveWarningTablePanel.vue'
-import '@/assets/executive-management.css'
+import ExecutiveAccountPanel from './components/ExecutiveAccountPanel.vue'
+import ExecutiveReliablePanel from './components/ExecutiveReliablePanel.vue'
+import ExecutiveWarningOverview from './components/ExecutiveWarningOverview.vue'
+import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.vue'
+import './executive-management.css'
 </script>
 
 <template>

package/src/views/PositionForecastExecutionView.vue

@@ -6,6 +6,10 @@
  *   展示当前登录用户的待处理任务概览（统计面板），
  *   并提供快速进入各业务操作（预报填报、修改、复核确认、异常反馈）的入口。
  *
+ * 页面结构：
+ *   - 统计面板：五等分统计项，匹配设计图的分隔线和数字排版
+ *   - 快速入口：四张业务卡片，匹配设计图的图标、标题、描述和按钮
+ *
  * 数据来源：
  *   目前 taskStats 和 quickEntries 为本地静态数据，
  *   后续替换为接口请求时只需改动数据源，模板无需修改。
@@ -17,7 +21,7 @@ import {
   CircleCheckFilled,   // 复核确认：圆圈对勾
   Document,            // 预报填报：文档
   RefreshRight,        // 修改：向右刷新箭头
-  WarningFilled,       // 异常反馈：实心警告三角
+  WarnTriangleFilled,  // 异常反馈：实心警告三角
 } from '@element-plus/icons-vue'
 
 // ---- 类型定义 ----
@@ -73,7 +77,7 @@ const taskStats: TaskStat[] = [
   { label: '预报填报',   value: 5,  unit: '条', tone: 'blue',   icon: Document },
   { label: '修改',       value: 3,  unit: '条', tone: 'green',  icon: RefreshRight },
   { label: '复核确认',   value: 2,  unit: '条', tone: 'orange', icon: CircleCheckFilled },
-  { label: '异常反馈',   value: 2,  unit: '条', tone: 'red',    icon: WarningFilled },
+  { label: '异常反馈',   value: 2,  unit: '条', tone: 'red',    icon: WarnTriangleFilled },
 ]
 
 /**
@@ -85,50 +89,48 @@ const quickEntries: EntryAction[] = [
   { title: '预报填报', desc: '填写头寸预报数据',     button: '立即填报', tone: 'blue',   icon: Document },
   { title: '修改',     desc: '修改已填报预报数据',   button: '立即处理', tone: 'green',  icon: RefreshRight },
   { title: '复核确认', desc: '复核并确认预报数据',   button: '立即处理', tone: 'orange', icon: CircleCheckFilled },
-  { title: '异常反馈', desc: '处理预报异常反馈',     button: '立即处理', tone: 'red',    icon: WarningFilled },
+  { title: '异常反馈', desc: '处理预报异常反馈',     button: '立即处理', tone: 'red',    icon: WarnTriangleFilled },
 ]
 </script>
 
 <!--
   模板结构说明
   ===========
-  <main>  ─ 页面根容器，应用全屏背景和设计变量
-    <section.execution-content>  ─ 内容区，限制最大宽度并居中
-      <div.intro-block>         ─ 标题 + 说明文字
-      <section.stats-panel>     ─ 待处理任务统计面板（5 列网格）
-        <article.stat-item>     ─ 单条统计项，循环渲染 taskStats
-          <div.stat-icon>       ─ 业务图标（第一项无图标，v-if 控制）
-          <div.stat-copy>       ─ 标签 + 数值 + 单位
-      <section.quick-section>   ─ 快速入口区
-        <div.entry-grid>        ─ 入口卡片网格（4 列）
-          <article.entry-card>  ─ 单张入口卡片，循环渲染 quickEntries
-            <div.entry-icon>    ─ 卡片图标
-            <h3>                ─ 卡片标题
-            <p>                 ─ 业务描述
-            <el-button>         ─ 操作按钮
+  <main>                       ─ 页面根容器，承载背景和设计变量
+    <section.execution-content>─ 内容区，限制最大宽度并居中
+      <div.intro-block>        ─ 任务标题和说明
+      <section.stats-panel>    ─ 五列统计面板
+      <section.quick-section>  ─ 四列快速入口
 
   无障碍说明：
   - 统计面板和快速入口区均使用 aria-label 标注用途
   - 图标容器使用 aria-hidden="true"，避免屏幕阅读器重复朗读
 -->
 <template>
-  <!-- 页面根容器：.forecast-execution-page 承载背景和 CSS 变量 -->
+  <!-- 页面根容器：承载背景渐变和 CSS 设计变量 -->
   <main class="forecast-execution-page">
-
-    <!-- 内容区：限制最大宽度 1428px，水平居中 -->
+    <!-- 内容区：max-width 1428px，水平居中 -->
     <section class="execution-content">
 
-      <!-- 任务简介块：页面标题和引导文案 -->
+      <!--
+        任务简介块
+        el-text 替代原生 h2/p，统一使用 Element Plus 排版体系：
+        - type="primary" 显示主题色标题
+        - size="large" 设置 20px 字号
+        - tag="h2" 渲染为 h2 标签，保持语义
+      -->
       <div class="intro-block">
-        <h2>待处理任务</h2>
-        <p>您有待处理的业务任务，请及时处理</p>
+        <el-text tag="h2" size="large" class="page-title">待处理任务</el-text>
+        <p class="intro-desc">您有待处理的业务任务，请及时处理</p>
       </div>
 
       <!--
         待处理任务统计面板
-        - 使用 grid 5 列布局，每列展示一个统计项
-        - v-for 遍历 taskStats，:key 用 label 保证唯一性
-        - :class 动态绑定色调类（is-blue 等）和汇总标记（is-total）
+        布局方案：
+        - el-row + el-col 替代原 CSS Grid 5 列布局
+        - :gutter="20" 在列间添加 20px 间距（列两侧各 10px padding）
+        - 桌面: span=5（约 5 列）  平板: span=12（2 列）  手机: span=24（1 列）
+        - el-statistic 替代手写数字/标签，自带数字排版
       -->
       <section class="stats-panel" aria-label="待处理任务统计">
         <article
@@ -137,34 +139,23 @@ const quickEntries: EntryAction[] = [
           class="stat-item"
           :class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
         >
-          <!--
-            统计图标
-            - v-if="item.icon"：第一项"全部待处理"无图标，此处留空
-            - aria-hidden="true"：装饰性图标，屏幕阅读器忽略
-            - <component :is>：动态渲染 Element Plus 图标组件
-          -->
-          <div v-if="item.icon" class="stat-icon" aria-hidden="true">
-            <el-icon><component :is="item.icon" /></el-icon>
+          <div v-if="item.icon" class="stat-heading">
+            <div class="stat-icon" aria-hidden="true">
+              <el-icon :size="46"><component :is="item.icon" /></el-icon>
+            </div>
+            <span class="stat-label">{{ item.label }}</span>
           </div>
+          <span v-else class="stat-label stat-total-label">{{ item.label }}</span>
 
-          <!-- 统计文案区：标签 + 数值 + 单位 -->
-          <div class="stat-copy">
-            <h3>{{ item.label }}</h3>
-            <p>
-              <strong>{{ item.value }}</strong>
-              <span>{{ item.unit }}</span>
-            </p>
+          <div class="stat-number-row">
+            <strong class="stat-number">{{ item.value }}</strong>
+            <span class="stat-unit">{{ item.unit }}</span>
           </div>
         </article>
       </section>
 
-      <!--
-        快速入口区
-        - grid 4 列布局，每列一张业务入口卡片
-        - 与统计面板色调保持一致，便于用户建立视觉关联
-      -->
       <section class="quick-section" aria-label="快速进入">
-        <h2>快速进入</h2>
+        <h2 class="section-title">快速进入</h2>
 
         <div class="entry-grid">
           <article
@@ -173,23 +164,12 @@ const quickEntries: EntryAction[] = [
             class="entry-card"
             :class="`is-${entry.tone}`"
           >
-            <!-- 卡片图标：纯装饰，屏幕阅读器忽略 -->
             <div class="entry-icon" aria-hidden="true">
-              <el-icon><component :is="entry.icon" /></el-icon>
+              <el-icon :size="58"><component :is="entry.icon" /></el-icon>
             </div>
-
-            <!-- 卡片内容：标题 + 业务描述 -->
-            <h3>{{ entry.title }}</h3>
-            <p>{{ entry.desc }}</p>
-
-            <!--
-              操作按钮
-              - type="primary" 使用 Element Plus 主色（实际颜色由 CSS --tone 覆盖）
-              - 点击事件待后续接入路由跳转或业务逻辑
-            -->
-            <el-button class="entry-button" type="primary">
-              {{ entry.button }}
-            </el-button>
+            <h3 class="entry-title">{{ entry.title }}</h3>
+            <p class="entry-desc">{{ entry.desc }}</p>
+            <button class="entry-button" type="button">{{ entry.button }}</button>
           </article>
         </div>
       </section>
@@ -201,16 +181,13 @@ const quickEntries: EntryAction[] = [
 <style scoped>
 /* ============================================================
    头寸预报 - 执行页面样式
-   结构：页面根容器 → 内容区 → 任务简介 → 统计面板 → 快速入口
-   色彩系统：通过 --tone 变量驱动单个条目/卡片的强调色，
-            由 .is-blue / .is-green / .is-orange / .is-red 类设置。
-   响应式断点：1180px（平板/小桌面）、720px（手机）
+   结构：内容区 → 任务简介 → 统计面板 → 快速入口
+   色彩系统：通过 --tone 变量驱动图标、数字和按钮的强调色。
    ============================================================ */
 
 /* ---- 页面根容器 ----
    定义全局设计变量（调色板）、背景渐变和基础排版。
-   overflow-x: hidden 防止水平滚动条出现；
-   overflow-y: auto 确保内容超出视口时可纵向滚动。 */
+   overflow-x: hidden 防止 el-row 负 margin 导致水平滚动条。 */
 .forecast-execution-page {
   --ink: #0a1020;       /* 主文字色：深蓝黑，用于标题和正文 */
   --muted: #4a5568;     /* 次要文字色：灰色，用于描述性文字 */
@@ -233,46 +210,57 @@ const quickEntries: EntryAction[] = [
 
 /* ---- 内容区 ----
    max-width 限制最大宽度，margin: 0 auto 实现水平居中；
-   上下内边距拉开与页面边缘的距离。 */
+   上下内边距拉开与页面边缘的距离。
+   el-col 自带 padding（由 el-row gutter 控制），无需额外 gap。 */
 .execution-content {
-  max-width: 1428px;
+  max-width: 1536px;
   margin: 0 auto;
-  padding: 36px 58px 42px;
+  padding: 36px 58px 36px;
 }
 
 /* ---- 任务简介块 ----
-   包含标题和说明文字，与下方统计面板保持 24px 间距。
-   使用 CSS nesting，h2 和 p 的选择器均相对 .intro-block 声明。 */
+   el-text 替代了原生 h2/p，仅保留间距和标题字重。 */
 .intro-block {
-  margin-bottom: 24px;
+  margin-bottom: 28px;
+}
 
-  /* h2 同时作用于简介区标题和快速入口区标题（统一字号/字重） */
-  & h2,
-  .quick-section h2 {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 800;   /* 800 = Extra Bold，视觉上足够醒目 */
-  }
+/* 页面标题：el-text 渲染为 h2，额外设置 Extra Bold 字重 */
+.page-title {
+  display: block;
+  margin-bottom: 18px;
+  color: #091225;
+  font-size: 30px;
+  line-height: 1;
+  font-weight: 800 !important;
+}
 
-  /* 说明段落：使用 --muted 色降低视觉优先级 */
-  & p {
-    margin-top: 14px;
-    color: var(--muted);
-    font-size: 16px;
-    line-height: 1.45;
-  }
+.intro-desc {
+  margin: 0;
+  color: #3f4a5c;
+  font-size: 18px;
+  line-height: 1.4;
 }
 
-/* ---- 统计面板（待处理任务统计） ----
-   5 列等宽网格布局，每列展示一个统计项。
-   padding-block: 30px 是 padding-top/bottom 的逻辑属性简写；
-   半透明白色背景 + 阴影制造浮层质感。 */
+/* 区块标题：快速入口标题，同样 Extra Bold */
+.section-title {
+  display: block;
+  margin-bottom: 24px;
+  color: #070b13;
+  font-size: 26px;
+  line-height: 1;
+  font-weight: 800 !important;
+}
+
+/* ---- 统计面板 ----
+   保留面板容器样式（背景、边框、阴影），内部栅格由 el-row 接管。
+   overflow-x: hidden 包含 el-row 的负 margin，防止溢出。 */
 .stats-panel {
+  min-height: 188px;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  min-height: 188px;
-  margin-bottom: 34px;
-  padding-block: 30px;
+  align-items: center;
+  margin-bottom: 44px;
+  padding: 30px 0;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: rgba(255, 255, 255, .9);
@@ -280,134 +268,95 @@ const quickEntries: EntryAction[] = [
 }
 
 /* ---- 单个统计项 ----
-   flex 布局使图标和文案水平对齐；
-   min-width: 0 防止 flex 子项溢出网格单元格；
-   & + & 是 CSS nesting 写法，等价于 .stat-item + .stat-item，
-   表示"紧跟在同级元素后面的统计项"添加左侧分隔线。 */
+   el-col 自带 gutter padding，仅需 flex 对齐和分隔线。
+   & + & 选择器：相邻统计项之间显示左侧分隔线（桌面端）。 */
 .stat-item {
-  position: relative;
-  min-width: 0;
-  display: flex;
-  align-items: flex-start;
+  min-height: 118px;
+  display: grid;
+  grid-template-rows: 42px 62px;
+  align-content: center;
   justify-content: center;
-  gap: 14px;
-  padding: 4px 22px 0;
+  justify-items: center;
+  padding: 0 28px;
 
   & + & {
     border-left: 1px solid var(--line);
   }
 }
 
-/* ---- 统计文案区（标签 + 数值） ---- */
-.stat-copy {
-  /* 标签文字（如"全部待处理"）：稍小字号，加粗，不换行 */
-  & h3 {
-    margin: 6px 0 18px;
-    font-size: 16px;
-    font-weight: 700;
-    white-space: nowrap;
-  }
+.stat-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  color: #070b13;
+}
 
-  /* 数值行：使用 --tone 变量继承当前条目的强调色 */
-  & p {
-    margin: 0;
-    color: var(--tone);
-    line-height: 1;
-    white-space: nowrap;   /* 防止数值和单位换行 */
-  }
+.stat-total-label {
+  align-self: center;
+}
 
-  /* 大号数字：50px Extra Bold，视觉重心 */
-  & strong {
-    font-size: 50px;
-    font-weight: 800;
-  }
+/* 统计标签文字（如"全部待处理"）：700 字重，不换行 */
+.stat-label {
+  color: #05070d;
+  font-size: 18px;
+  font-weight: 800;
+  white-space: nowrap;
+}
 
-  /* 单位文字（如"条"）：与数字保持 10px 间距 */
-  & span {
-    margin-left: 10px;
-    font-size: 16px;
-    font-weight: 700;
-  }
+.stat-number-row {
+  align-self: end;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 14px;
+  color: var(--tone);
+}
+
+.stat-number {
+  font-size: 50px;
+  font-weight: 800;
+  line-height: .95;
+}
+
+.stat-unit {
+  font-size: 18px;
+  font-weight: 800;
 }
 
 /* ---- 统计图标 ----
-   38x38 的固定尺寸容器，flex 居中对齐图标；
-   flex: 0 0 auto 防止图标被压缩。
-   颜色继承 --tone 变量。 */
+   el-icon 提供 :size prop，仅需颜色继承和 flex 防压缩。 */
 .stat-icon {
-  width: 38px;
-  height: 38px;
   flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 2px;
   color: var(--tone);
-  font-size: 34px;
+  margin-top: 2px;
 }
 
 /* ---- 色调工具类 ----
    将全局调色板变量映射到 --tone 局部变量，
-   使子元素（图标、数字、按钮）通过 var(--tone) 自动继承当前色调。
-   每个类只有一条声明，用单行写法节省空间。 */
+   使子元素（图标、数字、按钮）通过 var(--tone) 自动继承色调。 */
 .is-blue   { --tone: var(--blue); }
 .is-green  { --tone: var(--green); }
 .is-orange { --tone: var(--orange); }
 .is-red    { --tone: var(--red); }
 
-/* ---- 快速入口区 ---- */
-.quick-section {
-  & h2 {
-    margin-bottom: 20px;   /* 标题与卡片网格的间距 */
-  }
-}
-
-/* ---- 入口卡片网格 ----
-   4 列等宽布局，18px 间距，适配四个业务入口。 */
 .entry-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
+  gap: 24px;
 }
 
-/* ---- 单张入口卡片 ----
-   纵向 flex 布局，align-items: center 使内容水平居中；
-   min-height 保证卡片高度一致；
-   半透明白色背景 + 柔和阴影营造卡片浮层效果。
-   子元素 h3/p 使用 nesting 直接嵌套声明。 */
 .entry-card {
-  min-height: 316px;
+  min-height: 330px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 30px 24px 28px;
+  padding: 34px 34px 34px;
   border: 1px solid var(--line);
-  border-radius: 9px;
-  background: rgba(255, 255, 255, .78);
-  box-shadow: 0 8px 20px rgba(23, 42, 75, .05);
-
-  /* 卡片标题（如"预报填报"）：22px，Extra Bold */
-  & h3 {
-    margin: 18px 0 10px;
-    font-size: 22px;
-    font-weight: 800;
-  }
-
-  /* 卡片描述文字：居中对齐，最小高度保证布局稳定 */
-  & p {
-    min-height: 24px;
-    margin: 0 0 20px;
-    color: var(--muted);
-    font-size: 15px;
-    line-height: 1.55;
-    text-align: center;
-  }
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .86);
+  box-shadow: 0 8px 18px rgba(21, 39, 68, .05);
+  text-align: center;
 }
 
-/* ---- 入口卡片图标 ----
-   88x88 大图标容器，18px 圆角；
-   背景色使用 color-mix 将当前色调与白色按 11:89 混合，
-   得到一个极淡的同色系底色，突出图标但不抢眼。 */
 .entry-icon {
   width: 88px;
   height: 88px;
@@ -417,22 +366,35 @@ const quickEntries: EntryAction[] = [
   border-radius: 18px;
   color: var(--tone);
   background: color-mix(in srgb, var(--tone) 11%, #fff);
-  font-size: 46px;
 }
 
-/* ---- 入口卡片按钮 ----
-   margin-top: auto 将按钮推至卡片底部（flex column 布局下生效）；
-   背景色直接使用 --tone 变量；
-   hover/focus 时用 color-mix 将色调加深 12%，给出交互反馈。 */
+/* 入口卡片标题：el-text 渲染，额外设置 Extra Bold */
+.entry-title {
+  margin: 24px 0 14px;
+  color: #030713;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 800 !important;
+}
+
+.entry-desc {
+  margin: 0;
+  color: #4a5568;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
 .entry-button {
   width: 180px;
-  height: 44px;
+  height: 46px;
   margin-top: auto;
   border: 0;
   border-radius: 7px;
   background: var(--tone);
-  font-size: 18px;
+  color: #fff;
+  font-size: 17px;
   font-weight: 700;
+  cursor: pointer;
 
   &:hover,
   &:focus {
@@ -441,23 +403,23 @@ const quickEntries: EntryAction[] = [
 }
 
 /* ============================================================
-   响应式：平板 / 小桌面（≤ 1180px）
-   统计面板改为 2 列，入口卡片改为 2 列；
-   统计项左侧对齐，分隔线逻辑从"相邻项之间"改为"偶数列左侧"。
+   响应式：平板 / 小桌面（≤ 992px）
+   el-col 的 sm="12" 自动切换为 2 列布局；
+   统计项分隔线逻辑从"相邻项之间"改为"偶数列左侧 + 行间横线"。
    ============================================================ */
-@media (max-width: 1180px) {
+@media (max-width: 992px) {
   .execution-content {
-    padding-inline: 24px;   /* 逻辑属性：左右内边距 */
+    padding-inline: 24px;
   }
 
   .stats-panel {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding-block: 20px;
+    padding: 0;
   }
 
   .stat-item {
-    justify-content: flex-start;   /* 左对齐，更紧凑 */
-    padding: 24px 32px;
+    justify-content: flex-start;
+    padding: 28px;
 
     /* 移除桌面版的相邻分隔线 */
     & + & {
@@ -481,36 +443,29 @@ const quickEntries: EntryAction[] = [
 }
 
 /* ============================================================
-   响应式：手机（≤ 720px）
-   所有网格改为单列，字号缩小，统计项分隔线改为纯水平。
+   响应式：手机（≤ 768px）
+   el-col 的 xs="24" 自动切换为单列布局；
+   统计项分隔线改为纯水平，字号缩小。
    ============================================================ */
-@media (max-width: 720px) {
+@media (max-width: 768px) {
   .execution-content {
     padding: 24px 16px;
   }
 
-  /* 标题和说明文字缩小 */
-  .intro-block {
-    & h2,
-    .quick-section h2 {
-      font-size: 20px;
-    }
+  .page-title {
+    font-size: 28px;
+  }
 
-    & p {
-      margin-top: 10px;
-      font-size: 14px;
-    }
+  .section-title {
+    font-size: 26px;
   }
 
-  /* 统计面板和入口卡片均为单列 */
   .stats-panel,
   .entry-grid {
     grid-template-columns: 1fr;
   }
 
-  /* 统计项：移除竖线，改为纯水平分隔线；
-     同时覆盖桌面和平板的所有分隔线规则；
-     :first-child 例外：第一项不需要顶部分隔线。 */
+  /* 统计项：移除所有竖线，改为纯水平分隔线（首项除外） */
   .stat-item,
   .stat-item:nth-child(2n),
   .stat-item:nth-child(n + 3) {
@@ -523,13 +478,12 @@ const quickEntries: EntryAction[] = [
   }
 
   /* 大号数字缩小，避免在窄屏溢出 */
-  .stat-copy strong {
-    font-size: 42px;
+  .stat-number {
+    font-size: 48px;
   }
 
-  /* 卡片最小高度降低，减少纵向空间占用 */
   .entry-card {
-    min-height: 288px;
+    min-height: 340px;
   }
 }
 </style>