verce-vue-test 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.12",
+  "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

@@ -1,13 +1,46 @@
 <script setup lang="ts">
+/**
+ * 头寸预报 - 执行页面
+ *
+ * 页面职责：
+ *   展示当前登录用户的待处理任务概览（统计面板），
+ *   并提供快速进入各业务操作（预报填报、修改、复核确认、异常反馈）的入口。
+ *
+ * 页面结构：
+ *   - 统计面板：五等分统计项，匹配设计图的分隔线和数字排版
+ *   - 快速入口：四张业务卡片，匹配设计图的图标、标题、描述和按钮
+ *
+ * 数据来源：
+ *   目前 taskStats 和 quickEntries 为本地静态数据，
+ *   后续替换为接口请求时只需改动数据源，模板无需修改。
+ */
+
+// ---- 图标导入 ----
+// 从 Element Plus 图标库引入四个业务语义图标，分别对应四种任务类型
 import {
-  CircleCheckFilled,
-  Document,
-  RefreshRight,
-  WarningFilled,
+  CircleCheckFilled,   // 复核确认：圆圈对勾
+  Document,            // 预报填报：文档
+  RefreshRight,        // 修改：向右刷新箭头
+  WarnTriangleFilled,  // 异常反馈：实心警告三角
 } from '@element-plus/icons-vue'
 
+// ---- 类型定义 ----
+
+/**
+ * 色调枚举，决定元素的强调色。
+ * 与 CSS 中 .is-blue / .is-green / .is-orange / .is-red 类一一对应，
+ * 最终映射到 --tone CSS 变量，驱动图标、数字、按钮的颜色。
+ */
 type Tone = 'blue' | 'green' | 'orange' | 'red'
 
+/**
+ * 统计面板单条数据结构
+ * @property label  - 统计项名称（如"全部待处理"）
+ * @property value  - 数值（如 12）
+ * @property unit   - 数值单位（如"条"）
+ * @property tone   - 强调色，决定数字和图标的颜色
+ * @property icon   - 图标组件，可选；第一个"全部待处理"项无图标
+ */
 interface TaskStat {
   label: string
   value: number
@@ -16,6 +49,14 @@ interface TaskStat {
   icon?: unknown
 }
 
+/**
+ * 快速入口卡片数据结构
+ * @property title  - 卡片标题（如"预报填报"）
+ * @property desc   - 业务描述（如"填写头寸预报数据"）
+ * @property button - 按钮文案（如"立即填报"）
+ * @property tone   - 强调色，决定图标背景和按钮颜色
+ * @property icon   - 图标组件
+ */
 interface EntryAction {
   title: string
   desc: string
@@ -24,30 +65,73 @@ interface EntryAction {
   icon: unknown
 }
 
+// ---- 数据 ----
+
+/**
+ * 待处理任务统计数据
+ * 第一项"全部待处理"是汇总值，无独立图标（模板中通过 v-if 控制）；
+ * 其余四项分别对应四个业务模块，图标和色调一一配对。
+ */
 const taskStats: TaskStat[] = [
   { label: '全部待处理', value: 12, unit: '条', tone: 'blue' },
-  { 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: 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: WarnTriangleFilled },
 ]
 
+/**
+ * 快速入口卡片数据
+ * 四个卡片与统计面板的四项业务一一对应，色调保持一致，
+ * 确保用户在视觉上能将统计数字与入口卡片关联起来。
+ */
 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: 'blue',   icon: Document },
+  { title: '修改',     desc: '修改已填报预报数据',   button: '立即处理', tone: 'green',  icon: RefreshRight },
+  { title: '复核确认', desc: '复核并确认预报数据',   button: '立即处理', tone: 'orange', icon: CircleCheckFilled },
+  { title: '异常反馈', desc: '处理预报异常反馈',     button: '立即处理', tone: 'red',    icon: WarnTriangleFilled },
 ]
 </script>
 
+<!--
+  模板结构说明
+  ===========
+  <main>                       ─ 页面根容器，承载背景和设计变量
+    <section.execution-content>─ 内容区，限制最大宽度并居中
+      <div.intro-block>        ─ 任务标题和说明
+      <section.stats-panel>    ─ 五列统计面板
+      <section.quick-section>  ─ 四列快速入口
+
+  无障碍说明：
+  - 统计面板和快速入口区均使用 aria-label 标注用途
+  - 图标容器使用 aria-hidden="true"，避免屏幕阅读器重复朗读
+-->
 <template>
+  <!-- 页面根容器：承载背景渐变和 CSS 设计变量 -->
   <main class="forecast-execution-page">
+    <!-- 内容区：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>
 
+      <!--
+        待处理任务统计面板
+        布局方案：
+        - 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
           v-for="(item, index) in taskStats"
@@ -55,22 +139,23 @@ const quickEntries: EntryAction[] = [
           class="stat-item"
           :class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
         >
-          <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>
 
       <section class="quick-section" aria-label="快速进入">
-        <h2>快速进入</h2>
+        <h2 class="section-title">快速进入</h2>
 
         <div class="entry-grid">
           <article
@@ -80,74 +165,101 @@ const quickEntries: EntryAction[] = [
             :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>
-
-            <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>
+
     </section>
   </main>
 </template>
 
 <style scoped>
+/* ============================================================
+   头寸预报 - 执行页面样式
+   结构：内容区 → 任务简介 → 统计面板 → 快速入口
+   色彩系统：通过 --tone 变量驱动图标、数字和按钮的强调色。
+   ============================================================ */
+
+/* ---- 页面根容器 ----
+   定义全局设计变量（调色板）、背景渐变和基础排版。
+   overflow-x: hidden 防止 el-row 负 margin 导致水平滚动条。 */
 .forecast-execution-page {
-  --ink: #0a1020;
-  --muted: #4a5568;
-  --line: #dde3ee;
-  --blue: #2563dc;
-  --blue-strong: #1f5bd8;
-  --green: #18a970;
-  --orange: #f47a00;
-  --red: #e93442;
+  --ink: #0a1020;       /* 主文字色：深蓝黑，用于标题和正文 */
+  --muted: #4a5568;     /* 次要文字色：灰色，用于描述性文字 */
+  --line: #dde3ee;      /* 边框/分割线色：淡蓝灰 */
+  --blue: #2563dc;      /* 蓝色强调色：用于"预报填报" */
+  --green: #18a970;     /* 绿色强调色：用于"修改" */
+  --orange: #f47a00;    /* 橙色强调色：用于"复核确认" */
+  --red: #e93442;       /* 红色强调色：用于"异常反馈" */
   width: 100%;
   min-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   color: var(--ink);
+  /* 双层背景：左上角蓝色光晕 + 整体浅蓝渐变，营造轻盈科技感 */
   background:
     radial-gradient(circle at 34% 12%, rgba(77, 139, 255, .09), transparent 32%),
     linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
   font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
 
+/* ---- 内容区 ----
+   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;
 }
 
+/* ---- 任务简介块 ----
+   el-text 替代了原生 h2/p，仅保留间距和标题字重。 */
 .intro-block {
-  margin-bottom: 24px;
+  margin-bottom: 28px;
+}
+
+/* 页面标题：el-text 渲染为 h2，额外设置 Extra Bold 字重 */
+.page-title {
+  display: block;
+  margin-bottom: 18px;
+  color: #091225;
+  font-size: 30px;
+  line-height: 1;
+  font-weight: 800 !important;
 }
 
-.intro-block h2,
-.quick-section h2 {
+.intro-desc {
   margin: 0;
-  font-size: 24px;
-  line-height: 1.2;
-  font-weight: 800;
-  letter-spacing: 0;
+  color: #3f4a5c;
+  font-size: 18px;
+  line-height: 1.4;
 }
 
-.intro-block p {
-  margin: 14px 0 0;
-  color: var(--muted);
-  font-size: 16px;
-  line-height: 1.45;
+/* 区块标题：快速入口标题，同样 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;
+  align-items: center;
+  margin-bottom: 44px;
   padding: 30px 0;
   border: 1px solid var(--line);
   border-radius: 10px;
@@ -155,95 +267,94 @@ const quickEntries: EntryAction[] = [
   box-shadow: 0 10px 24px rgba(29, 52, 88, .11);
 }
 
+/* ---- 单个统计项 ----
+   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-item + .stat-item {
-  border-left: 1px solid var(--line);
+.stat-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+  color: #070b13;
 }
 
-.stat-copy h3 {
-  margin: 6px 0 18px;
-  font-size: 16px;
-  line-height: 1.2;
-  font-weight: 750;
+.stat-total-label {
+  align-self: center;
+}
+
+/* 统计标签文字（如"全部待处理"）：700 字重，不换行 */
+.stat-label {
+  color: #05070d;
+  font-size: 18px;
+  font-weight: 800;
   white-space: nowrap;
 }
 
-.stat-copy p {
-  margin: 0;
+.stat-number-row {
+  align-self: end;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 14px;
   color: var(--tone);
-  line-height: 1;
-  white-space: nowrap;
 }
 
-.stat-copy strong {
+.stat-number {
   font-size: 50px;
   font-weight: 800;
-  letter-spacing: 0;
+  line-height: .95;
 }
 
-.stat-copy span {
-  margin-left: 10px;
-  font-size: 16px;
-  font-weight: 700;
+.stat-unit {
+  font-size: 18px;
+  font-weight: 800;
 }
 
+/* ---- 统计图标 ----
+   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;
-}
-
-.is-blue {
-  --tone: var(--blue);
-}
-
-.is-green {
-  --tone: var(--green);
-}
-
-.is-orange {
-  --tone: var(--orange);
-}
-
-.is-red {
-  --tone: var(--red);
+  margin-top: 2px;
 }
 
-.quick-section h2 {
-  margin-bottom: 20px;
-}
+/* ---- 色调工具类 ----
+   将全局调色板变量映射到 --tone 局部变量，
+   使子元素（图标、数字、按钮）通过 var(--tone) 自动继承色调。 */
+.is-blue   { --tone: var(--blue); }
+.is-green  { --tone: var(--green); }
+.is-orange { --tone: var(--orange); }
+.is-red    { --tone: var(--red); }
 
 .entry-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
+  gap: 24px;
 }
 
 .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);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .86);
+  box-shadow: 0 8px 18px rgba(21, 39, 68, .05);
+  text-align: center;
 }
 
 .entry-icon {
@@ -255,67 +366,75 @@ const quickEntries: EntryAction[] = [
   border-radius: 18px;
   color: var(--tone);
   background: color-mix(in srgb, var(--tone) 11%, #fff);
-  font-size: 46px;
 }
 
-.entry-card h3 {
-  margin: 18px 0 10px;
-  font-size: 22px;
-  line-height: 1.2;
-  font-weight: 800;
-  letter-spacing: 0;
+/* 入口卡片标题：el-text 渲染，额外设置 Extra Bold */
+.entry-title {
+  margin: 24px 0 14px;
+  color: #030713;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 800 !important;
 }
 
-.entry-card p {
-  min-height: 24px;
-  margin: 0 0 20px;
-  color: var(--muted);
-  font-size: 15px;
-  line-height: 1.55;
-  text-align: center;
+.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;
 
-.entry-button:hover,
-.entry-button:focus {
-  background: color-mix(in srgb, var(--tone) 88%, #000);
+  &:hover,
+  &:focus {
+    background: color-mix(in srgb, var(--tone) 88%, #000);
+  }
 }
 
-@media (max-width: 1180px) {
+/* ============================================================
+   响应式：平板 / 小桌面（≤ 992px）
+   el-col 的 sm="12" 自动切换为 2 列布局；
+   统计项分隔线逻辑从"相邻项之间"改为"偶数列左侧 + 行间横线"。
+   ============================================================ */
+@media (max-width: 992px) {
   .execution-content {
     padding-inline: 24px;
   }
 
   .stats-panel {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding: 20px 0;
+    padding: 0;
   }
 
   .stat-item {
     justify-content: flex-start;
-    padding: 24px 32px;
-  }
-
-  .stat-item + .stat-item {
-    border-left: 0;
-  }
-
-  .stat-item:nth-child(2n) {
-    border-left: 1px solid var(--line);
-  }
-
-  .stat-item:nth-child(n + 3) {
-    border-top: 1px solid var(--line);
+    padding: 28px;
+
+    /* 移除桌面版的相邻分隔线 */
+    & + & {
+      border-left: 0;
+    }
+
+    /* 偶数列左侧加分隔线（2 列网格的视觉分隔） */
+    &:nth-child(2n) {
+      border-left: 1px solid var(--line);
+    }
+
+    /* 第 3 个及之后的项加顶部分隔线（区分上下两行） */
+    &:nth-child(n + 3) {
+      border-top: 1px solid var(--line);
+    }
   }
 
   .entry-grid {
@@ -323,19 +442,22 @@ const quickEntries: EntryAction[] = [
   }
 }
 
-@media (max-width: 720px) {
+/* ============================================================
+   响应式：手机（≤ 768px）
+   el-col 的 xs="24" 自动切换为单列布局；
+   统计项分隔线改为纯水平，字号缩小。
+   ============================================================ */
+@media (max-width: 768px) {
   .execution-content {
     padding: 24px 16px;
   }
 
-  .intro-block h2,
-  .quick-section h2 {
-    font-size: 20px;
+  .page-title {
+    font-size: 28px;
   }
 
-  .intro-block p {
-    margin-top: 10px;
-    font-size: 14px;
+  .section-title {
+    font-size: 26px;
   }
 
   .stats-panel,
@@ -343,23 +465,25 @@ const quickEntries: EntryAction[] = [
     grid-template-columns: 1fr;
   }
 
+  /* 统计项：移除所有竖线，改为纯水平分隔线（首项除外） */
   .stat-item,
   .stat-item:nth-child(2n),
   .stat-item:nth-child(n + 3) {
     border-left: 0;
     border-top: 1px solid var(--line);
-  }
 
-  .stat-item:first-child {
-    border-top: 0;
+    &:first-child {
+      border-top: 0;
+    }
   }
 
-  .stat-copy strong {
-    font-size: 42px;
+  /* 大号数字缩小，避免在窄屏溢出 */
+  .stat-number {
+    font-size: 48px;
   }
 
   .entry-card {
-    min-height: 288px;
+    min-height: 340px;
   }
 }
 </style>