更新记录

1.0.5（2026-09-08） 下载此版本

• 新增消息中心：BlueNavBar、SegmentTabs、EmptyState、MessageCenterPage、MessageDetailPage
• Demo：tpl-message-center / tpl-message-detail；首页「消息」快捷入口已对接

平台兼容性

uni-app(3.8.3)

kordar-uni-tpl

从 vehicle/h5 抽取的 uni-app 常用业务页面模板，供后续业务项目复用。

来源对照

安装

模块位于 uni_modules/kordar-uni-tpl，依赖 kordar-ui / kordar-store / kordar-request / kordar-adapters。

快速开始

交管风格登录

<script setup lang="ts">
import { TrafficLoginPage, useLogin } from '@/uni_modules/kordar-uni-tpl'
import { $toast } from '@/uni_modules/kordar-ui'

const { submitting, formData, submit } = useLogin({
  homePageUrl: '/pages/demos/tpl-home',
  loginPageUrl: '/pages/demos/tpl-login-traffic',
  loginRequest: async (payload) => {
    // 对接业务登录 API
    return { ok: true, data: { token: 'xxx', user: { id: 1, username: payload.username } } }
  },
  onSuccess: () => $toast.success('登录成功'),
})
</script>

<template>
  <TrafficLoginPage
    v-model="formData"
    :submitting="submitting"
    @submit="submit"
    @forgot="() => {}"
    @register="() => {}"
    @digital-id="() => {}"
  />
</template>

登录页

<script setup lang="ts">
import { LoginPageShell, LoginForm, useLogin } from '@/uni_modules/kordar-uni-tpl'
import { $toast } from '@/uni_modules/kordar-ui'

const { submitting, formData, submit } = useLogin({
  homePageUrl: '/pages/index/index',
  loginPageUrl: '/pages/login/login',
  loginRequest: async (payload) => {
    // 对接 kordar-request 或业务 API
    return { ok: true, data: { token: 'xxx', user: { id: 1, username: payload.username } } }
  },
  onSuccess: () => $toast.success('登录成功'),
})

async function onSubmit() {
  if (!formData.username || !formData.password) {
    $toast.warning('请填写账号密码')
    return
  }
  await submit()
}
</script>

<template>
  <LoginPageShell title="业务系统">
    <LoginForm v-model="formData" :submitting="submitting" @submit="onSubmit" />
  </LoginPageShell>
</template>

卡片列表 + 分页

<script setup lang="ts">
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import {
  ListPageHeader,
  CardList,
  CardListItem,
  StatusTag,
  usePagedList,
  pickText,
} from '@/uni_modules/kordar-uni-tpl'

const { loading, items, total, handlePullDownRefresh, handleReachBottom } = usePagedList({
  fetch: async ({ page, pageSize }) => ({
    ok: true,
    list: [{ id: page, title: `item-${page}` }],
    total: 20,
  }),
})

onPullDownRefresh(handlePullDownRefresh)
onReachBottom(handleReachBottom)
</script>

<template>
  <view class="kordar-tpl-page">
    <ListPageHeader title-prefix="列表示例" :total="total" />
    <CardList :loading="loading">
      <CardListItem v-for="(item, idx) in items" :key="item.id" :alt="idx % 2 === 1">
        <view class="kordar-tpl-row kordar-tpl-row--head">
          <text class="kordar-tpl-row__title">{{ pickText(item.title) }}</text>
          <StatusTag text="正常" type="success" />
        </view>
      </CardListItem>
    </CardList>
  </view>
</template>

<style src="@/uni_modules/kordar-uni-tpl/styles/page.scss"></style>

九宫格菜单

<script setup lang="ts">
import { MenuGrid, type MenuGridItem } from '@/uni_modules/kordar-uni-tpl'

const items: MenuGridItem[] = [
  { text: '预约', url: '/pages/reserve/form', icon: '预' },
  { text: '列表', url: '/pages/reserve/list', permission: ['/app/list'] },
]

function can(permissions?: string[]) {
  // 对接权限系统
  return true
}
</script>

<template>
  <MenuGrid title="服务" :items="items" :can="can" />
</template>

个人中心（交管「我的」）

<script setup lang="ts">
import {
  ProfilePage,
  type ProfileMenuItem,
  type RaisedTabBarItem,
} from '@/uni_modules/kordar-uni-tpl'

const menuItems: ProfileMenuItem[] = [
  { text: '我的信息', icon: '信', group: 1 },
  { text: '账号与安全', icon: '安', group: 1 },
  { text: '咨询反馈', icon: '馈', group: 2 },
  { text: '设置', icon: '设', group: 3 },
]

const tabItems: RaisedTabBarItem[] = [
  { text: '首页', icon: '⌂', url: '/pages/demos/tpl-home' },
  { text: '网办大厅', icon: '办', raised: true },
  { text: '我的', icon: '我' },
]
</script>

<template>
  <ProfilePage
    display-name="孔德辉"
    subtitle="6222***********013"
    :menu-items="menuItems"
    :tab-items="tabItems"
    tab-active="我的"
  />
</template>

旧版头像 Hero 仍可通过 ProfileHero / ProfileHighlightRow 单独组合使用；ProfileMenu 传 variant="card" 可恢复彩色圆底图标。

消息中心

<script setup lang="ts">
import { ref } from 'vue'
import { MessageCenterPage, type MessageItem } from '@/uni_modules/kordar-uni-tpl'

const activeTab = ref('service')
const items: MessageItem[] = [
  {
    id: 1,
    category: 'service',
    title: '考试预约规则',
    content: '考试预约规则',
    time: '2026-09-03 13:39',
    url: '/pages/demos/tpl-message-detail?id=1',
  },
]
</script>

<template>
  <MessageCenterPage v-model:active-tab="activeTab" :items="items" />
</template>

交管风格首页

<script setup lang="ts">
import {
  HomePage,
  type HomeQuickActionItem,
  type HomeTodoItem,
  type ServiceIconItem,
  type HomeArticleItem,
  type RaisedTabBarItem,
} from '@/uni_modules/kordar-uni-tpl'

const quickActions: HomeQuickActionItem[] = [
  { text: '陕AGY5886', icon: '车' },
  { text: '驾驶证', icon: '证' },
]
const todoItem: HomeTodoItem = { title: '摩托车考试', description: '您可预约参加摩托车考试。' }
const serviceItems: ServiceIconItem[] = [
  { text: '新车上牌', icon: '牌', iconBg: '#e8f8ef', iconColor: '#19be6b' },
  { text: '更多', icon: '⋯', url: '/pages/demos/tpl-service-center' },
]
const newsItems: HomeArticleItem[] = [
  { title: '资讯标题', date: '2026-08-20', url: '/pages/demos/tpl-info-list' },
]
const tabItems: RaisedTabBarItem[] = [
  { text: '首页', icon: '⌂' },
  { text: '网办大厅', icon: '办', raised: true },
  { text: '我的', icon: '我' },
]
</script>

<template>
  <HomePage
    :quick-actions="quickActions"
    :todo-count="1"
    :todo-item="todoItem"
    :service-items="serviceItems"
    news-extra="甘肃省 张掖"
    :news-items="newsItems"
    :tab-items="tabItems"
  />
</template>

演示

运行 npm run dev:h5，首页 Templates 分类下可查看各组件演示（含 Home / Service Center / Info List）。