minitest2.0 0.0.5 → 0.0.7

package/src/views/warning/index.vue

@@ -1,26 +1,580 @@
+<script setup lang="ts">
+defineOptions({ name: 'WarningPage' })
+
+type WarningDetail = {
+  title: string
+  status: string
+  id: string
+  time: string
+  type: string
+  source: string
+  messagePrefix: string
+  amount: string
+  messageSuffix: string
+}
+
+const warningDetail: WarningDetail = {
+  title: '净借记限额预警',
+  status: '有效',
+  id: '167749751028801',
+  time: '2026-07-07 17:33:50',
+  type: '净借记限额预警',
+  source: '头寸预警',
+  messagePrefix: '小额可用净借记限额余额低于',
+  amount: '60000亿元',
+  messageSuffix: '！',
+}
+
+const detailRows = [
+  { label: '预警ID', value: warningDetail.id, icon: 'description' },
+  { label: '预警时间', value: warningDetail.time, icon: 'clock-o' },
+  { label: '预警类型', value: warningDetail.type, icon: 'apps-o' },
+]
+</script>
+
 <template>
-  <main class="page">
-    <section class="page-body">
-      <p class="placeholder">页面建设中…</p>
+  <main class="warning-page">
+    <section class="warning-hero" aria-label="预警信息查询">
+      <div class="hero-alert" aria-hidden="true">
+        <span class="shield-mark shield-mark--large"></span>
+        <span class="alert-underline"></span>
+      </div>
+
+      <div class="hero-copy">
+        <h1>预警信息查询</h1>
+        <p>及时掌握头寸预警信息，防范资金风险</p>
+      </div>
+
+      <div class="hero-scene" aria-hidden="true">
+        <span class="bank-roof"></span>
+        <span class="bank-base"></span>
+        <span class="bank-step"></span>
+        <span class="bank-column bank-column--1"></span>
+        <span class="bank-column bank-column--2"></span>
+        <span class="bank-column bank-column--3"></span>
+        <span class="bank-column bank-column--4"></span>
+        <span class="shield-mark shield-mark--small"></span>
+      </div>
     </section>
+
+    <section class="warning-detail" aria-labelledby="warning-detail-title">
+      <div class="section-title">
+        <span class="section-title-mark"></span>
+        <h2 id="warning-detail-title">预警详情</h2>
+      </div>
+
+      <article class="warning-card" aria-label="净借记限额预警详情">
+        <header class="warning-card-header">
+          <span class="bank-badge" aria-hidden="true">
+            <van-icon name="hotel-o" />
+          </span>
+          <h3>{{ warningDetail.title }}</h3>
+          <span class="status-badge">{{ warningDetail.status }}</span>
+        </header>
+
+        <dl class="warning-fields">
+          <div v-for="row in detailRows" :key="row.label" class="warning-field-row">
+            <dt>
+              <span class="field-icon" aria-hidden="true">
+                <van-icon :name="row.icon" />
+              </span>
+              <span>{{ row.label }}</span>
+            </dt>
+            <dd>{{ row.value }}</dd>
+          </div>
+        </dl>
+
+        <section class="warning-message" aria-label="预警内容">
+          <span class="message-icon" aria-hidden="true">
+            <van-icon name="warning-o" />
+          </span>
+          <div class="message-copy">
+            <strong>{{ warningDetail.source }}</strong>
+            <p>
+              {{ warningDetail.messagePrefix }}<em>{{ warningDetail.amount }}</em
+              >{{ warningDetail.messageSuffix }}
+            </p>
+          </div>
+        </section>
+      </article>
+    </section>
+
+    <p class="end-text" aria-label="列表结束">
+      <span></span>
+      已到底，没有更多数据
+      <span></span>
+    </p>
   </main>
 </template>
 
 <style scoped>
-.page {
+.warning-page {
+  width: 100%;
   max-width: 750px;
   min-height: var(--app-page-min-height, 100vh);
   margin: 0 auto;
-  padding: 0 11px;
-  background: #f7f8fa;
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
+  color: #171b20;
+  background:
+    radial-gradient(circle at 86% 8%, rgba(255, 223, 226, 0.8), transparent 94px),
+    linear-gradient(180deg, #fff6f6 0, #ffffff 178px, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+.warning-hero {
+  position: relative;
+  display: grid;
+  grid-template-columns: 78px minmax(0, 1fr);
+  min-height: 120px;
+  overflow: hidden;
+  padding: 27px 17px 18px;
+  border-top: 1px solid #ffe1e2;
+  background:
+    linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 242, 243, 0.55) 100%),
+    linear-gradient(
+      100deg,
+      rgba(255, 255, 255, 0) 0 68%,
+      rgba(255, 85, 94, 0.08) 68% 76%,
+      transparent 76%
+    );
+  box-sizing: border-box;
+}
+
+.warning-hero::after {
+  position: absolute;
+  right: -28px;
+  top: 11px;
+  width: 160px;
+  height: 98px;
+  background:
+    linear-gradient(155deg, transparent 0 42%, rgba(255, 92, 99, 0.08) 42% 54%, transparent 54%),
+    linear-gradient(24deg, transparent 0 38%, rgba(255, 92, 99, 0.08) 38% 50%, transparent 50%);
+  content: '';
+  pointer-events: none;
+}
+
+.hero-alert {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+}
+
+.shield-mark {
+  position: relative;
+  display: block;
+  clip-path: polygon(50% 0, 94% 18%, 91% 67%, 50% 100%, 9% 67%, 6% 18%);
+  background: linear-gradient(145deg, #ff5e64 0%, #ee1f2b 64%, #f7434b 100%);
+  box-shadow: 0 8px 18px rgba(238, 31, 43, 0.18);
+}
+
+.shield-mark::before {
+  position: absolute;
+  left: 50%;
+  top: 23%;
+  width: 5px;
+  height: 21px;
+  border-radius: 999px;
+  background: #ffffff;
+  content: '';
+  transform: translateX(-50%);
+}
+
+.shield-mark::after {
+  position: absolute;
+  left: 50%;
+  bottom: 22%;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ffffff;
+  content: '';
+  transform: translateX(-50%);
+}
+
+.shield-mark--large {
+  width: 34px;
+  height: 40px;
+}
+
+.alert-underline {
+  display: block;
+  width: 36px;
+  height: 4px;
+  margin-top: 18px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #ff202b 0%, #ff696e 100%);
+  box-shadow: 0 5px 12px rgba(255, 42, 50, 0.18);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  color: #181d22;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.18;
+  letter-spacing: 0;
+}
+
+.hero-copy p {
+  margin: 9px 0 0;
+  color: #73777f;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.45;
+}
+
+.hero-scene {
+  position: absolute;
+  right: 18px;
+  top: 26px;
+  z-index: 0;
+  width: 92px;
+  height: 68px;
+  opacity: 0.62;
+}
+
+.bank-roof {
+  position: absolute;
+  left: 16px;
+  top: 0;
+  width: 67px;
+  height: 20px;
+  clip-path: polygon(50% 0, 100% 72%, 100% 100%, 0 100%, 0 72%);
+  background: linear-gradient(180deg, rgba(250, 85, 94, 0.32), rgba(250, 85, 94, 0.14));
+}
+
+.bank-base,
+.bank-step {
+  position: absolute;
+  right: 0;
+  border-radius: 3px;
+  background: rgba(247, 86, 94, 0.2);
+}
+
+.bank-base {
+  bottom: 12px;
+  width: 78px;
+  height: 8px;
+}
+
+.bank-step {
+  bottom: 3px;
+  width: 92px;
+  height: 6px;
+}
+
+.bank-column {
+  position: absolute;
+  top: 25px;
+  width: 11px;
+  height: 31px;
+  border-radius: 3px 3px 0 0;
+  background: rgba(247, 86, 94, 0.18);
+}
+
+.bank-column--1 {
+  left: 25px;
+}
+
+.bank-column--2 {
+  left: 42px;
+}
+
+.bank-column--3 {
+  left: 59px;
+}
+
+.bank-column--4 {
+  left: 76px;
+}
+
+.shield-mark--small {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 31px;
+  height: 36px;
+  opacity: 0.78;
+}
+
+.shield-mark--small::before {
+  width: 4px;
+  height: 17px;
+}
+
+.shield-mark--small::after {
+  width: 6px;
+  height: 6px;
+}
+
+.warning-detail {
+  padding: 22px 17px 0;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+}
+
+.section-title-mark {
+  width: 4px;
+  height: 17px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #ff1f2b 0%, #ff4c53 100%);
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #151a20;
+  font-size: 17px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.warning-card {
+  margin-top: 18px;
+  padding: 18px 13px 15px;
+  border: 1px solid #eceef2;
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow:
+    0 13px 24px rgba(31, 37, 51, 0.08),
+    0 2px 6px rgba(31, 37, 51, 0.04);
+  box-sizing: border-box;
+}
+
+.warning-card-header {
+  display: grid;
+  grid-template-columns: 46px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 17px;
+  border-bottom: 1px dashed #e4e5e9;
 }
-.page-body {
-  padding: 24px 0;
+
+.bank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: #f23a41;
+  font-size: 25px;
+  background: #ffe7e9;
+}
+
+.warning-card-header h3 {
+  min-width: 0;
+  margin: 0;
+  color: #161b21;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 47px;
+  min-height: 31px;
+  padding: 0 9px;
+  border: 1px solid #ffb8bb;
+  border-radius: 4px;
+  color: #ed2832;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  background: #fff0f1;
+  box-sizing: border-box;
+}
+
+.warning-fields {
+  margin: 0;
+  padding: 14px 0 7px;
+}
+
+.warning-field-row {
+  display: grid;
+  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
+  align-items: center;
+  min-height: 46px;
+  column-gap: 12px;
+}
+
+.warning-field-row + .warning-field-row {
+  border-top: 1px solid #edf0f2;
+}
+
+.warning-field-row dt {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  color: #666b73;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.field-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 28px;
+  margin-right: 12px;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 17px;
+  background: linear-gradient(145deg, #aeb3bd, #858b96);
 }
-.placeholder {
-  text-align: center;
-  color: #969799;
+
+.warning-field-row dd {
+  min-width: 0;
+  margin: 0;
+  color: #131820;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.warning-message {
+  display: grid;
+  grid-template-columns: 39px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 68px;
+  margin-top: 4px;
+  padding: 14px 12px 12px;
+  border: 1px solid #ffbdc1;
+  border-radius: 7px;
+  background:
+    radial-gradient(circle at 95% 82%, rgba(255, 229, 231, 0.74), transparent 72px),
+    linear-gradient(135deg, #fffafa 0%, #fff4f4 100%);
+  box-sizing: border-box;
+}
+
+.message-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 42px;
+  color: #f23a41;
+  font-size: 29px;
+}
+
+.message-copy {
+  min-width: 0;
+}
+
+.message-copy strong {
+  display: block;
+  color: #e23239;
+  font-size: 15px;
+  font-weight: 740;
+  line-height: 1.25;
+}
+
+.message-copy p {
+  margin: 9px 0 0;
+  color: #131820;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.message-copy em {
+  color: #e42d36;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.end-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 37px 0 0;
+  color: #888d96;
   font-size: 14px;
-  padding-top: 120px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.end-text span {
+  width: 23px;
+  height: 1px;
+  background: #c8cbd1;
+}
+
+@media (max-width: 350px) {
+  .warning-hero {
+    grid-template-columns: 58px minmax(0, 1fr);
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+
+  .hero-copy h1 {
+    font-size: 22px;
+  }
+
+  .hero-scene {
+    right: 6px;
+    opacity: 0.38;
+  }
+
+  .warning-detail {
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+
+  .warning-card {
+    padding-right: 11px;
+    padding-left: 11px;
+  }
+
+  .warning-card-header {
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+    gap: 9px;
+  }
+
+  .bank-badge {
+    width: 36px;
+    height: 36px;
+    font-size: 22px;
+  }
+
+  .warning-field-row {
+    grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
+  }
+
+  .warning-field-row dt,
+  .warning-field-row dd {
+    font-size: 14px;
+  }
+
+  .field-icon {
+    margin-right: 9px;
+  }
+
+  .message-copy p {
+    font-size: 15px;
+  }
 }
 </style>

package/vite.config.ts

@@ -14,6 +14,8 @@ export default defineConfig(({ command, mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const apiBaseUrl = env.VITE_API_BASE_URL || '/api'
   const appVersion = getAppVersion(mode, command)
+  const enableVueDevTools =
+    command === 'serve' && env.VITE_ENABLE_VUE_DEVTOOLS !== 'false'
 
   return {
     base: './',
@@ -22,7 +24,7 @@ export default defineConfig(({ command, mode }) => {
     },
     plugins: [
       vue(),
-      env.VITE_ENABLE_VUE_DEVTOOLS === 'true' && vueDevTools(),
+      enableVueDevTools && vueDevTools(),
 
       // 自动导入 Vue / Vue Router / Pinia / VueUse / Vant 的 API，省去手动 import
       AutoImport({