minitest2.0 0.0.0

package/src/views/articles/index.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import {
+  extractTextFromHtml,
+  formatArticleDate,
+  queryArticles,
+  type Article,
+} from '@/api/announcement'
+
+defineOptions({ name: 'ArticleListPage' })
+
+const router = useRouter()
+const articles = ref<Article[]>([])
+const keyword = ref('')
+const loading = ref(false)
+const loadError = ref(false)
+
+const filteredArticles = computed(() => {
+  const key = keyword.value.trim().toLowerCase()
+
+  if (!key) {
+    return articles.value
+  }
+
+  return articles.value.filter((article) => {
+    const searchableText = `${article.title} ${extractTextFromHtml(article.content)}`
+
+    return searchableText.toLowerCase().includes(key)
+  })
+})
+
+const emptyDescription = computed(() => {
+  if (loadError.value) return '公告加载失败'
+
+  return keyword.value.trim() ? '未找到匹配公告' : '暂无公告'
+})
+
+onMounted(() => {
+  loadArticles()
+})
+
+async function loadArticles() {
+  loading.value = true
+  loadError.value = false
+
+  try {
+    articles.value = await queryArticles()
+  } catch (error) {
+    console.error('[公告] 列表加载失败', error)
+    loadError.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+function openPublish() {
+  router.push('/articles/new')
+}
+
+function openDetail(article: Article) {
+  router.push(`/articles/${article.id}`)
+}
+
+function openEdit(article: Article) {
+  router.push(`/articles/${article.id}/edit`)
+}
+</script>
+
+<template>
+  <main class="article-list-page">
+    <header class="article-hero">
+      <div class="hero-copy">
+        <p>Announcement Center</p>
+        <h2>公告中心</h2>
+        <span>{{ articles.length }} 篇内容</span>
+      </div>
+      <van-button size="small" type="danger" icon="plus" @click="openPublish">发布</van-button>
+    </header>
+
+    <section class="search-section">
+      <van-search v-model="keyword" shape="round" placeholder="搜索标题或正文" />
+    </section>
+
+    <section v-if="loading" class="state-section">
+      <van-loading vertical>加载中...</van-loading>
+    </section>
+
+    <section v-else-if="filteredArticles.length" class="article-list" aria-label="公告列表">
+      <article
+        v-for="article in filteredArticles"
+        :key="article.id"
+        class="article-card"
+        tabindex="0"
+        role="button"
+        @click="openDetail(article)"
+        @keydown.enter="openDetail(article)"
+      >
+        <div class="article-card-main">
+          <h2>{{ article.title }}</h2>
+          <div class="article-meta">
+            <span><van-icon name="clock-o" />{{ formatArticleDate(article.updatedAt) }}</span>
+            <span><van-icon name="manager-o" />{{ article.author }}</span>
+          </div>
+        </div>
+        <button
+          class="article-edit-btn"
+          type="button"
+          aria-label="编辑公告"
+          @click.stop="openEdit(article)"
+        >
+          <van-icon name="edit" />
+        </button>
+      </article>
+    </section>
+
+    <van-empty v-else image="search" :description="emptyDescription">
+      <van-button v-if="loadError" round type="danger" icon="replay" @click="loadArticles">
+        重试
+      </van-button>
+      <van-button v-else round type="danger" icon="plus" @click="openPublish">发布公告</van-button>
+    </van-empty>
+  </main>
+</template>
+
+<style scoped>
+.article-list-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 14px 11px 86px;
+  color: #171b20;
+  background:
+    radial-gradient(circle at 12% 0%, rgba(242, 47, 61, 0.11), transparent 118px),
+    linear-gradient(180deg, #fffafa 0%, #f7f8fa 38%, #f7f8fa 100%);
+  box-sizing: border-box;
+}
+
+.article-hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 96px;
+  padding: 18px 16px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #ffffff 0%, #fff4f5 100%);
+  box-shadow: 0 8px 24px rgba(23, 27, 32, 0.06);
+  box-sizing: border-box;
+}
+
+.hero-copy {
+  min-width: 0;
+}
+
+.hero-copy p,
+.hero-copy h2 {
+  margin: 0;
+}
+
+.hero-copy p {
+  color: #f22f3d;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.hero-copy h2 {
+  margin-top: 6px;
+  color: #171b20;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.18;
+}
+
+.hero-copy span {
+  display: block;
+  margin-top: 7px;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.article-hero :deep(.van-button) {
+  flex: 0 0 auto;
+  min-width: 78px;
+  border: 0;
+  background: linear-gradient(135deg, #f22f3d 0%, #ff6069 100%);
+  box-shadow: 0 8px 16px rgba(242, 47, 61, 0.22);
+}
+
+.search-section {
+  margin-top: 12px;
+}
+
+.search-section :deep(.van-search) {
+  padding: 0;
+  background: transparent;
+}
+
+.search-section :deep(.van-search__content) {
+  background: #ffffff;
+  border: 1px solid #eef0f3;
+}
+
+.article-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.state-section {
+  display: flex;
+  justify-content: center;
+  padding-top: 96px;
+}
+
+.article-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 15px 14px;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 5px 16px rgba(23, 27, 32, 0.04);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.article-card:active {
+  transform: scale(0.995);
+}
+
+.article-card-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.article-card h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 17px;
+  font-weight: 750;
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  margin-top: 10px;
+  color: #8a929f;
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.article-meta span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.article-edit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border: 1px solid #ffe0e3;
+  border-radius: 50%;
+  color: #f22f3d;
+  font-size: 16px;
+  background: #fff6f7;
+  cursor: pointer;
+}
+
+.article-edit-btn:active {
+  background: #ffecee;
+}
+
+:deep(.van-empty) {
+  padding-top: 80px;
+}
+
+:deep(.van-empty .van-button) {
+  min-width: 122px;
+}
+</style>

package/src/views/clearing-detail/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <main class="page">
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+.page-body {
+  padding: 24px 0;
+}
+.placeholder {
+  text-align: center;
+  color: #969799;
+  font-size: 14px;
+  padding-top: 120px;
+}
+</style>

package/src/views/dashboard/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({ name: 'DashboardPage' })
+</script>
+
+<template>
+  <main class="dashboard-page"></main>
+</template>
+
+<style scoped>
+.dashboard-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  background: #f7f8fa;
+  box-sizing: border-box;
+}
+</style>

package/src/views/foreign-position/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <main class="page">
+    <section class="page-body">
+      <p class="placeholder">页面建设中…</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 0 11px;
+  background: #f7f8fa;
+}
+.page-body {
+  padding: 24px 0;
+}
+.placeholder {
+  text-align: center;
+  color: #969799;
+  font-size: 14px;
+  padding-top: 120px;
+}
+</style>

package/src/views/home/index.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts" name="HomePage">
+import { healthCheckApi } from '@/api/health'
+
+type HomeFeature = {
+  title: string[]
+  image: string
+  route: string
+}
+
+defineOptions({ name: 'HomePage' })
+
+const bannerImage = `${import.meta.env.BASE_URL}images/img.png`
+
+const router = useRouter()
+
+onMounted(() => {
+  healthCheckApi()
+    .then((res) => {
+      console.log('[首页] 健康检查成功', res)
+    })
+    .catch((error) => {
+      console.error('[首页] 健康检查失败', error)
+    })
+})
+
+const features: HomeFeature[] = [
+  {
+    title: ['人民币头寸', '预报及查询'],
+    image: `${import.meta.env.BASE_URL}images/f5876785-b927-4347-ba19-999114240649.png`,
+    route: '/rmb-position',
+  },
+  {
+    title: ['外币头寸', '预报及查询'],
+    image: `${import.meta.env.BASE_URL}images/12a73787-86a9-4891-a65f-66104746f6a8.png`,
+    route: '/foreign-position',
+  },
+  {
+    title: ['人行头寸', '余额查询'],
+    image: `${import.meta.env.BASE_URL}images/73fef1e4-0fd0-4a1a-9b8b-a70a5b6acbbc.png`,
+    route: '/pbc-position',
+  },
+  {
+    title: ['头寸匡算'],
+    image: `${import.meta.env.BASE_URL}images/ea745a10-42aa-4f44-8d7f-3ab02cc0adcd.png`,
+    route: '/position-estimate',
+  },
+  {
+    title: ['人民币净借记', '可用额度管理'],
+    image: `${import.meta.env.BASE_URL}images/5798d7aa-ba8b-4605-8079-58b35495ac55.png`,
+    route: '/net-debit',
+  },
+  {
+    title: ['人民币小额网银', '清算场次明细'],
+    image: `${import.meta.env.BASE_URL}images/c3dbbd9d-be56-490e-b9f4-6ee17ebefffc.png`,
+    route: '/clearing-detail',
+  },
+  {
+    title: ['预警信息'],
+    image: `${import.meta.env.BASE_URL}images/bc685b4c-0cca-4a79-924c-a8ee10e6f8eb.png`,
+    route: '/warning',
+  },
+]
+</script>
+
+<template>
+  <main class="home-page">
+    <section class="banner-section" aria-label="欢迎登录头寸管理系统">
+      <img class="banner-image" :src="bannerImage" alt="欢迎登录头寸管理系统" />
+    </section>
+
+    <section class="feature-section">
+      <div class="section-title">
+        <span class="section-title-mark"></span>
+        <h2>常用功能</h2>
+      </div>
+
+      <div class="feature-grid">
+        <button
+          v-for="item in features"
+          :key="item.title.join('')"
+          class="feature-card"
+          type="button"
+          @click="router.push(item.route)"
+        >
+          <span class="feature-title">
+            <span v-for="line in item.title" :key="line">{{ line }}</span>
+          </span>
+          <span class="feature-arrow" aria-hidden="true"><van-icon name="arrow" /></span>
+          <img class="feature-image" :src="item.image" :alt="item.title.join('')" />
+        </button>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.home-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 7px 11px 16px;
+  color: #171b20;
+  background:
+    radial-gradient(circle at 50% 12%, rgba(255, 245, 245, 0.88), transparent 124px),
+    #ffffff;
+  box-sizing: border-box;
+}
+
+.feature-card {
+  border: 0;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+  appearance: none;
+}
+
+.banner-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 9px;
+}
+
+.feature-section {
+  margin-top: 18px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  margin-bottom: 11px;
+  padding-left: 2px;
+}
+
+.section-title-mark {
+  width: 5px;
+  height: 16px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #ff1826 0%, #ff4854 100%);
+}
+
+.section-title h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.feature-card {
+  position: relative;
+  height: 104px;
+  overflow: hidden;
+  text-align: left;
+  border: 1px solid #ffdfe1;
+  border-radius: 9px;
+  background:
+    radial-gradient(circle at 78% 74%, rgba(255, 225, 225, 0.52), transparent 58px),
+    linear-gradient(135deg, #fff4f4 0%, #ffffff 52%, #fffafa 100%);
+  box-shadow: 0 4px 14px rgba(250, 70, 78, 0.035);
+}
+
+.feature-title {
+  position: absolute;
+  top: 16px;
+  left: 12px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: 104px;
+  padding: 0;
+  color: #15191d;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.42;
+  word-break: keep-all;
+}
+
+.feature-arrow {
+  position: absolute;
+  left: 12px;
+  bottom: 20px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ff3443 0%, #ff5b62 100%);
+  color: #ffffff;
+  font-size: 11px;
+}
+
+.feature-image {
+  position: absolute;
+  right: -4px;
+  bottom: -7px;
+  width: 94px;
+  height: 94px;
+  object-fit: contain;
+  pointer-events: none;
+}
+</style>