verce-vue-test 0.0.22 → 0.0.23

package/package.json

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

package/src/App.vue

@@ -93,6 +93,10 @@ function toggleCollapse() {
             <el-icon><Bell /></el-icon>
             <span>通知公告</span>
           </el-menu-item>
+          <el-menu-item index="/placeholder">
+            <el-icon><Document /></el-icon>
+            <span>占位符页面</span>
+          </el-menu-item>
           <el-menu-item index="/about">
             <el-icon><InfoFilled /></el-icon>
             <span>关于</span>

package/src/components/LoginSuccessNotification.vue

@@ -92,7 +92,7 @@ withDefaults(
 
 <style scoped>
 :global(.el-notification.login-success-notification) {
-  right: 24px;
+  right: 12px;
   left: auto;
   width: min(380px, calc(100vw - 32px));
   max-height: calc(100vh - 48px);
@@ -325,7 +325,7 @@ withDefaults(
 
 @media (max-width: 900px) {
   :global(.el-notification.login-success-notification) {
-    right: 16px;
+    right: 10px;
     width: min(380px, calc(100vw - 32px));
     padding: 18px 16px 16px;
     border-radius: 16px;

package/src/router/index.ts

@@ -82,6 +82,11 @@ const router = createRouter({
       name: 'noticeDetail',
       component: () => import('../views/NoticeDetailView.vue'),
     },
+    {
+      path: '/placeholder',
+      name: 'placeholder',
+      component: () => import('../views/PlaceholderView.vue'),
+    },
   ],
 })
 

package/src/views/ExecutiveManagementView/components/ExecutiveAccountPanel.vue

@@ -148,8 +148,8 @@ onUnmounted(() => {
   --blue: #1267f2;
   --line: #dce4ef;
   min-width: 0;
-  height: calc(100vh - 190px);
-  min-height: 700px;
+  height: clamp(520px, 58vh, 640px);
+  min-height: 520px;
   padding: 14px;
   display: flex;
   flex-direction: column;
@@ -403,14 +403,17 @@ em {
 @media (max-width: 1200px) {
   .account-board {
     height: auto;
+    min-height: 0;
   }
 
   .account-layout {
     grid-template-columns: 1fr;
+    grid-template-rows: auto;
   }
 
   .metric-box {
-    min-height: 253px;
+    height: auto;
+    min-height: 230px;
   }
 }
 
@@ -434,5 +437,56 @@ em {
   .quota-list {
     right: 16px;
   }
+
+  .ring,
+  .pie {
+    left: 32%;
+    width: min(46%, 220px);
+    height: min(66%, 220px);
+  }
+
+  .balance-copy,
+  .quota-list {
+    top: 54%;
+    width: 128px;
+  }
+
+  .balance-copy strong {
+    margin: 10px 0 16px 20px;
+    font-size: 28px;
+  }
+
+  .quota-list {
+    gap: 10px;
+  }
+
+  .balance-copy p,
+  .quota-list li {
+    gap: 8px;
+    font-size: 14px;
+  }
+
+  .pie-foot {
+    left: 40px;
+    right: 150px;
+    bottom: 22px;
+    flex-wrap: wrap;
+    gap: 8px 18px;
+  }
+
+  .progress-box {
+    height: 146px;
+  }
+
+  .progress-box > b {
+    left: 122px;
+    top: 55px;
+    font-size: 30px;
+  }
+
+  .progress-line,
+  .scale-row {
+    left: 222px;
+  }
 }
 </style>

package/src/views/ExecutiveManagementView/components/ExecutiveReliablePanel.vue

@@ -146,8 +146,8 @@ onUnmounted(() => {
   --blue: #1267f2;
   --line: #dce4ef;
   min-width: 0;
-  height: calc(100vh - 190px);
-  min-height: 700px;
+  height: clamp(520px, 58vh, 640px);
+  min-height: 520px;
   padding: 14px;
   display: flex;
   flex-direction: column;
@@ -344,14 +344,17 @@ onUnmounted(() => {
 @media (max-width: 1200px) {
   .reliable-board {
     height: auto;
+    min-height: 0;
   }
 
   .reliable-layout {
     grid-template-columns: 1fr;
+    grid-template-rows: auto;
   }
 
   .metric-box {
-    min-height: 253px;
+    height: auto;
+    min-height: 230px;
   }
 
   .mini-strip {
@@ -385,7 +388,11 @@ onUnmounted(() => {
   }
 
   .mini-strip {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .mini-strip > div:nth-child(2n) {
+    border-right: 0;
   }
 }
 </style>

package/src/views/ExecutiveManagementView/components/ExecutiveWarningOverview.vue

@@ -154,8 +154,8 @@ onUnmounted(() => {
   --blue: #1267f2;
   --line: #dce4ef;
   min-width: 0;
-  height: calc(100vh - 190px);
-  min-height: 700px;
+  height: clamp(520px, 58vh, 640px);
+  min-height: 520px;
   padding: 14px;
   display: flex;
   flex-direction: column;
@@ -305,14 +305,17 @@ em {
 @media (max-width: 1200px) {
   .warning-board {
     height: auto;
+    min-height: 0;
   }
 
   .warning-layout {
     grid-template-columns: 1fr;
+    grid-template-rows: auto;
   }
 
   .chart-box {
-    min-height: 253px;
+    height: auto;
+    min-height: 230px;
   }
 
   .stat-strip {
@@ -342,7 +345,11 @@ em {
   }
 
   .stat-strip {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .stat-strip > div:nth-child(2n) {
+    border-right: 0;
   }
 }
 </style>

package/src/views/ExecutiveManagementView/components/ExecutiveWarningTablePanel.vue

@@ -70,8 +70,8 @@ const rows = [
   --blue: #1267f2;
   --line: #dce4ef;
   min-width: 0;
-  height: calc(100vh - 190px);
-  min-height: 700px;
+  height: clamp(520px, 58vh, 640px);
+  min-height: 520px;
   padding: 14px 14px 17px;
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -199,6 +199,7 @@ const rows = [
 @media (max-width: 1200px) {
   .table-board {
     height: auto;
+    min-height: 520px;
   }
 }
 

package/src/views/ExecutiveManagementView/index.vue

@@ -61,7 +61,7 @@ import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.
 .dashboard-grid {
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   padding: 0 31px 39px;
 }
@@ -77,6 +77,7 @@ import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.
   }
 
   .dashboard-grid {
+    grid-template-columns: 1fr;
     padding-right: 24px;
     padding-left: 24px;
   }

package/src/views/PlaceholderView.vue

@@ -0,0 +1,501 @@
+<template>
+  <div class="data-entry-page">
+    <!-- 快捷入口 -->
+    <section class="quick-nav">
+      <button type="button" class="quick-nav-item active">
+        <el-icon class="quick-nav-icon">
+          <Coin />
+        </el-icon>
+        <span>未来现金流数据导入</span>
+      </button>
+
+      <button type="button" class="quick-nav-item">
+        <el-icon class="quick-nav-icon">
+          <PieChart />
+        </el-icon>
+        <span>仪表盘数据导入</span>
+      </button>
+
+      <button type="button" class="quick-nav-item">
+        <el-icon class="quick-nav-icon">
+          <TrendCharts />
+        </el-icon>
+        <span>SHIBOR数据导入</span>
+      </button>
+
+      <button type="button" class="quick-nav-item">
+        <el-icon class="quick-nav-icon">
+          <Histogram />
+        </el-icon>
+        <span>同业资产负债数据导入</span>
+      </button>
+    </section>
+
+    <!-- 表单区域 -->
+    <section class="form-grid">
+      <!-- 同业资产负债数据录入 -->
+      <el-card shadow="hover" class="entry-card">
+        <template #header>
+          <div class="card-header">
+            <div class="card-title-wrap">
+              <div class="card-icon">
+                <el-icon><OfficeBuilding /></el-icon>
+              </div>
+              <span class="card-title">同业资产负债数据录入</span>
+            </div>
+          </div>
+        </template>
+
+        <el-form
+          ref="interbankFormRef"
+          :model="interbankForm"
+          :rules="interbankRules"
+          label-width="150px"
+          class="entry-form"
+        >
+          <el-form-item label="数据日期" prop="date">
+            <el-date-picker
+              v-model="interbankForm.date"
+              type="date"
+              placeholder="请选择日期"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </el-form-item>
+
+          <el-form-item label="同业负债占比" prop="liabilityRatio">
+            <el-input v-model="interbankForm.liabilityRatio" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="同业活期存款余额" prop="depositBalance">
+            <el-input v-model="interbankForm.depositBalance" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="interbankForm.remark"
+              type="textarea"
+              :rows="5"
+              maxlength="500"
+              show-word-limit
+              placeholder="请输入备注内容"
+            />
+          </el-form-item>
+
+          <el-form-item label="说明" prop="description">
+            <el-input
+              v-model="interbankForm.description"
+              type="textarea"
+              :rows="5"
+              maxlength="500"
+              show-word-limit
+              placeholder="请输入说明内容"
+            />
+          </el-form-item>
+
+          <div class="form-footer">
+            <el-button type="primary" size="large" class="submit-btn" @click="submitInterbank">
+              <el-icon><Promotion /></el-icon>
+              提交
+            </el-button>
+          </div>
+        </el-form>
+      </el-card>
+
+      <!-- 仪表盘数据录入 -->
+      <el-card shadow="hover" class="entry-card">
+        <template #header>
+          <div class="card-header">
+            <div class="card-title-wrap">
+              <div class="card-icon">
+                <el-icon><PieChart /></el-icon>
+              </div>
+              <span class="card-title">仪表盘数据录入</span>
+            </div>
+          </div>
+        </template>
+
+        <el-form
+          ref="dashboardFormRef"
+          :model="dashboardForm"
+          :rules="dashboardRules"
+          label-width="150px"
+          class="entry-form"
+        >
+          <el-form-item label="流动性比例" prop="liquidityRatio">
+            <el-input v-model="dashboardForm.liquidityRatio" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="流动性覆盖率" prop="coverageRatio">
+            <el-input v-model="dashboardForm.coverageRatio" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="净稳定资金比例" prop="stableCapitalRatio">
+            <el-input v-model="dashboardForm.stableCapitalRatio" placeholder="请输入" />
+          </el-form-item>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="dashboardForm.remark"
+              type="textarea"
+              :rows="5"
+              maxlength="500"
+              show-word-limit
+              placeholder="请输入备注内容"
+            />
+          </el-form-item>
+
+          <el-form-item label="说明" prop="description">
+            <el-input
+              v-model="dashboardForm.description"
+              type="textarea"
+              :rows="5"
+              maxlength="500"
+              show-word-limit
+              placeholder="请输入说明内容"
+            />
+          </el-form-item>
+
+          <div class="form-footer">
+            <el-button type="primary" size="large" class="submit-btn" @click="submitDashboard">
+              <el-icon><Promotion /></el-icon>
+              提交
+            </el-button>
+          </div>
+        </el-form>
+      </el-card>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import {
+  Promotion,
+  OfficeBuilding,
+  PieChart,
+  Histogram,
+  TrendCharts,
+  Coin
+} from '@element-plus/icons-vue'
+
+interface InterbankForm {
+  date: string
+  liabilityRatio: string
+  depositBalance: string
+  remark: string
+  description: string
+}
+
+interface DashboardForm {
+  liquidityRatio: string
+  coverageRatio: string
+  stableCapitalRatio: string
+  remark: string
+  description: string
+}
+
+const interbankFormRef = ref<FormInstance>()
+const dashboardFormRef = ref<FormInstance>()
+
+const interbankForm = ref<InterbankForm>({
+  date: '',
+  liabilityRatio: '',
+  depositBalance: '',
+  remark: '',
+  description: ''
+})
+
+const dashboardForm = ref<DashboardForm>({
+  liquidityRatio: '',
+  coverageRatio: '',
+  stableCapitalRatio: '',
+  remark: '',
+  description: ''
+})
+
+const interbankRules: FormRules<InterbankForm> = {
+  date: [{ required: true, message: '请选择数据日期', trigger: 'change' }],
+  liabilityRatio: [{ required: true, message: '请输入同业负债占比', trigger: 'blur' }],
+  depositBalance: [{ required: true, message: '请输入同业活期存款余额', trigger: 'blur' }]
+}
+
+const dashboardRules: FormRules<DashboardForm> = {
+  liquidityRatio: [{ required: true, message: '请输入流动性比例', trigger: 'blur' }],
+  coverageRatio: [{ required: true, message: '请输入流动性覆盖率', trigger: 'blur' }],
+  stableCapitalRatio: [{ required: true, message: '请输入净稳定资金比例', trigger: 'blur' }]
+}
+
+async function submitInterbank() {
+  if (!interbankFormRef.value) return
+
+  await interbankFormRef.value.validate((valid) => {
+    if (!valid) return
+    console.log('同业资产负债数据提交：', interbankForm.value)
+    ElMessage.success('同业资产负债数据提交成功')
+  })
+}
+
+async function submitDashboard() {
+  if (!dashboardFormRef.value) return
+
+  await dashboardFormRef.value.validate((valid) => {
+    if (!valid) return
+    console.log('仪表盘数据提交：', dashboardForm.value)
+    ElMessage.success('仪表盘数据提交成功')
+  })
+}
+</script>
+
+<style scoped>
+.data-entry-page {
+  min-height: 100vh;
+  padding: 24px;
+  background:
+    radial-gradient(circle at top right, rgba(64, 158, 255, 0.08), transparent 22%),
+    linear-gradient(180deg, #f5f7fb 0%, #eef3fb 100%);
+  box-sizing: border-box;
+}
+
+.hero-section {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28px 32px;
+  border-radius: 24px;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);
+  box-shadow: 0 10px 30px rgba(15, 35, 95, 0.06);
+  margin-bottom: 20px;
+}
+
+.hero-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  z-index: 1;
+}
+
+.hero-icon {
+  width: 58px;
+  height: 58px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #2f63ff 0%, #5a8cff 100%);
+  color: #fff;
+  font-size: 28px;
+  box-shadow: 0 12px 24px rgba(47, 99, 255, 0.28);
+}
+
+.page-title {
+  margin: 0 0 8px;
+  font-size: 34px;
+  font-weight: 700;
+  color: #1f2a44;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 15px;
+  color: #7b88a1;
+}
+
+.hero-decoration {
+  position: absolute;
+  right: -50px;
+  top: -50px;
+  width: 280px;
+  height: 180px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(64, 158, 255, 0.15), transparent 65%);
+}
+
+.quick-nav {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 18px;
+  margin-bottom: 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 8px 24px rgba(15, 35, 95, 0.06);
+}
+
+.quick-nav-item {
+  height: 64px;
+  border-radius: 16px;
+  border: 1px solid #e7edf7;
+  background: #fff;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 0;
+  color: #334155;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.quick-nav-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(47, 99, 255, 0.12);
+}
+
+.quick-nav-item.active {
+  color: #fff;
+  border-color: transparent;
+  background: linear-gradient(135deg, #2f63ff 0%, #3d7eff 100%);
+  box-shadow: 0 12px 24px rgba(47, 99, 255, 0.24);
+}
+
+.quick-nav-icon {
+  font-size: 18px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.entry-card {
+  border: none;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow: 0 12px 28px rgba(15, 35, 95, 0.06);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.card-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #e9f1ff 0%, #dfeaff 100%);
+  color: #2f63ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2a44;
+}
+
+.entry-form {
+  padding-top: 8px;
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 600;
+  color: #334155;
+  white-space: nowrap;
+}
+
+:deep(.el-input__wrapper),
+:deep(.el-textarea__inner) {
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px #d5ddea inset;
+}
+
+:deep(.el-input__wrapper:hover),
+:deep(.el-textarea__inner:hover) {
+  box-shadow: 0 0 0 1px #b8c4d8 inset;
+}
+
+:deep(.el-input__wrapper.is-focus),
+:deep(.el-textarea__inner:focus) {
+  box-shadow: 0 0 0 1px #2f63ff inset;
+}
+
+.form-footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+  padding-top: 10px;
+}
+
+.submit-btn {
+  min-width: 180px;
+  height: 46px;
+  border-radius: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #2f63ff 0%, #3d7eff 100%);
+  border: none;
+  box-shadow: 0 12px 20px rgba(47, 99, 255, 0.18);
+}
+
+.submit-btn:hover {
+  opacity: 0.95;
+}
+
+@media (max-width: 1200px) {
+  .quick-nav {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .data-entry-page {
+    padding: 16px;
+  }
+
+  .hero-section {
+    padding: 22px 18px;
+  }
+
+  .page-title {
+    font-size: 26px;
+  }
+
+  .quick-nav {
+    grid-template-columns: 1fr;
+  }
+
+  .quick-nav-item {
+    justify-content: flex-start;
+    padding: 0 18px;
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+
+  :deep(.el-form-item__label) {
+    width: 100% !important;
+    margin-bottom: 8px;
+    text-align: left;
+  }
+
+  :deep(.el-form-item__content) {
+    margin-left: 0 !important;
+  }
+}
+</style>