Skip to content

Y
yd-csf-h5
Commit 6c1d2f6d by Sweet Zhang
Options

主题颜色修改

parent 50de254e
Showing with 403 additions and 391 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
src/App.vue
...@@ -19,9 +19,10 @@ const hideTabBar = computed(() => route.path === '/auth/callback') ...@@ -19,9 +19,10 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
<template> <template>
<div class="min-h-screen bg-slate-50 text-slate-900"> <div class="min-h-screen bg-slate-50 text-slate-900">
<header class="sticky top-0 z-20 border-b border-slate-200/70 bg-white/80 backdrop-blur-lg"> <div class="h-[3px] bg-brand-600"></div>
<header class="sticky top-0 z-20 border-b border-silver-200/70 bg-white/80 backdrop-blur-lg">
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3"> <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
<div class="text-[15px] font-semibold tracking-tight">{{ t('app.title') }}</div> <div class="text-[15px] font-semibold tracking-tight text-brand-700">{{ t('app.title') }}</div>
<LoginBadge /> <LoginBadge />
</div> </div>
</header> </header>
...@@ -32,7 +33,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback') ...@@ -32,7 +33,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
<nav <nav
v-if="!hideTabBar" v-if="!hideTabBar"
class="fixed inset-x-0 bottom-0 z-20 border-t border-slate-200/70 bg-white/90 pb-safe backdrop-blur-lg" class="fixed inset-x-0 bottom-0 z-20 border-t border-silver-200/70 bg-white/90 pb-safe backdrop-blur-lg"
> >
<div class="mx-auto grid max-w-3xl grid-cols-4 px-2 py-1.5"> <div class="mx-auto grid max-w-3xl grid-cols-4 px-2 py-1.5">
<RouterLink <RouterLink
...@@ -40,7 +41,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback') ...@@ -40,7 +41,7 @@ const hideTabBar = computed(() => route.path === '/auth/callback')
:key="tab.name" :key="tab.name"
:to="tab.path" :to="tab.path"
class="flex flex-col items-center rounded-xl py-2 text-xs font-medium transition-colors" class="flex flex-col items-center rounded-xl py-2 text-xs font-medium transition-colors"
:class="route.path === tab.path ? 'text-brand-700' : 'text-slate-500 hover:text-slate-700'" :class="route.path === tab.path ? 'text-brand-700' : 'text-silver-500 hover:text-silver-700'"
> >
<span <span
class="rounded-full px-3 py-1 transition-colors" class="rounded-full px-3 py-1 transition-colors"
......
src/components/common/Button.vue
...@@ -10,7 +10,7 @@ defineProps<{ ...@@ -10,7 +10,7 @@ defineProps<{
class="rounded-full px-4 py-2 text-sm font-medium transition-all hover:brightness-[0.98] active:scale-[0.98] disabled:opacity-50" class="rounded-full px-4 py-2 text-sm font-medium transition-all hover:brightness-[0.98] active:scale-[0.98] disabled:opacity-50"
:class="{ :class="{
'bg-brand-600 text-white shadow-sm': variant === 'primary', 'bg-brand-600 text-white shadow-sm': variant === 'primary',
'bg-slate-100 text-slate-700 hover:bg-slate-200': variant === 'secondary' || !variant, 'bg-silver-100 text-silver-700 hover:bg-silver-200': variant === 'secondary' || !variant,
'text-brand-600': variant === 'ghost' 'text-brand-600': variant === 'ghost'
}" }"
:disabled="disabled" :disabled="disabled"
......
src/components/common/Skeleton.vue
<template> <template>
<div class="space-y-3 animate-pulse"> <div class="space-y-3 animate-pulse">
<div class="h-24 rounded-2xl border border-slate-100 bg-slate-100/80"></div> <div class="h-24 rounded-2xl border border-silver-100 bg-silver-100/80"></div>
<div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div> <div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
<div class="h-[72px] rounded-2xl border border-slate-100 bg-slate-100/80"></div> <div class="h-[72px] rounded-2xl border border-silver-100 bg-silver-100/80"></div>
</div> </div>
</template> </template>
src/components/feature/CustomerCard.vue
...@@ -19,7 +19,7 @@ function toneOf(stage: CustomerStage): 'success' | 'warning' | 'neutral' | 'dang ...@@ -19,7 +19,7 @@ function toneOf(stage: CustomerStage): 'success' | 'warning' | 'neutral' | 'dang
</script> </script>
<template> <template>
<div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card"> <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
<div class="truncate text-sm font-medium tracking-tight text-slate-900">{{ customer.name }}</div> <div class="truncate text-sm font-medium tracking-tight text-slate-900">{{ customer.name }}</div>
<Badge :tone="toneOf(customer.stage)">{{ t(`customerStage.${customer.stage}`) }}</Badge> <Badge :tone="toneOf(customer.stage)">{{ t(`customerStage.${customer.stage}`) }}</Badge>
......
src/components/feature/LoginBadge.vue
...@@ -20,7 +20,7 @@ function toggleLocale() { ...@@ -20,7 +20,7 @@ function toggleLocale() {
<template> <template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-200" class="rounded-full bg-silver-100 px-2.5 py-1 text-xs font-medium text-silver-600 transition-colors hover:bg-silver-200"
@click="toggleLocale" @click="toggleLocale"
> >
{{ isHant ? t('lang.zhHans') : t('lang.zhHant') }} {{ isHant ? t('lang.zhHans') : t('lang.zhHant') }}
......
src/components/feature/MetricCard.vue
...@@ -9,10 +9,11 @@ defineProps<{ ...@@ -9,10 +9,11 @@ defineProps<{
<template> <template>
<div <div
class="rounded-2xl border border-slate-200/80 bg-white shadow-card transition-shadow hover:shadow-soft" class="rounded-2xl border border-silver-200 bg-white shadow-card transition-shadow hover:shadow-soft"
:class="feature ? 'p-5' : 'p-4'" :class="feature ? 'overflow-hidden p-5' : 'border-silver-200 p-4'"
> >
<div class="text-xs text-slate-500">{{ label }}</div> <div v-if="feature" class="-mx-5 -mt-5 mb-4 h-1 bg-brand-600"></div>
<div class="text-xs text-silver-500">{{ label }}</div>
<!-- 金额无空格不可断行，字号随屏宽伸缩，防止小屏（小程序 web-view）溢出卡片 --> <!-- 金额无空格不可断行，字号随屏宽伸缩，防止小屏（小程序 web-view）溢出卡片 -->
<div <div
class="tnum mt-2 font-semibold tracking-tight text-slate-900" class="tnum mt-2 font-semibold tracking-tight text-slate-900"
......
src/components/feature/PipelineCard.vue
...@@ -11,14 +11,14 @@ const { t } = useI18n() ...@@ -11,14 +11,14 @@ const { t } = useI18n()
/** 失效/保留不应当作待发金额：配色按语义状态分流 */ /** 失效/保留不应当作待发金额：配色按语义状态分流 */
function statusClass(status: PipelineItem['status']): string { function statusClass(status: PipelineItem['status']): string {
if (status === 'LAPSED') return 'text-rose-600' if (status === 'LAPSED') return 'text-brand-600'
if (status === 'RETAINED') return 'text-slate-500' if (status === 'RETAINED') return 'text-slate-500'
return 'text-amber-600' return 'text-amber-600'
} }
</script> </script>
<template> <template>
<div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card"> <div class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<div class="text-sm font-medium tracking-tight">{{ item.policyNo }}</div> <div class="text-sm font-medium tracking-tight">{{ item.policyNo }}</div>
......
src/components/feature/PolicyCard.vue
...@@ -16,7 +16,7 @@ const { t } = useI18n() ...@@ -16,7 +16,7 @@ const { t } = useI18n()
<template> <template>
<button <button
class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]" class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
@click="emit('select', policy.policyNo)" @click="emit('select', policy.policyNo)"
> >
<div> <div>
......
src/components/feature/StatementDetail.vue
...@@ -12,38 +12,38 @@ const { t } = useI18n() ...@@ -12,38 +12,38 @@ const { t } = useI18n()
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card"> <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="grid grid-cols-2 gap-3 text-sm"> <div class="grid grid-cols-2 gap-3 text-sm">
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.gross') }}</div> <div class="text-xs text-silver-500">{{ t('statement.gross') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.grossAmount) }}</div> <div class="tnum mt-1 font-medium">{{ formatHkd(detail.grossAmount) }}</div>
</div> </div>
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.mpf') }}</div> <div class="text-xs text-silver-500">{{ t('statement.mpf') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.mpfAmount) }}</div> <div class="tnum mt-1 font-medium">{{ formatHkd(detail.mpfAmount) }}</div>
</div> </div>
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.adjustment') }}</div> <div class="text-xs text-silver-500">{{ t('statement.adjustment') }}</div>
<div class="tnum mt-1 font-medium">{{ formatHkd(detail.adjustmentAmount) }}</div> <div class="tnum mt-1 font-medium">{{ formatHkd(detail.adjustmentAmount) }}</div>
</div> </div>
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.net') }}</div> <div class="text-xs text-silver-500">{{ t('statement.net') }}</div>
<div class="tnum mt-1 font-semibold">{{ formatHkd(detail.netAmount) }}</div> <div class="tnum mt-1 font-semibold text-brand-700">{{ formatHkd(detail.netAmount) }}</div>
</div> </div>
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.payDate') }}</div> <div class="text-xs text-silver-500">{{ t('statement.payDate') }}</div>
<div class="mt-1">{{ detail.payDate }}</div> <div class="mt-1">{{ detail.payDate }}</div>
</div> </div>
<div> <div>
<div class="text-xs text-slate-500">{{ t('statement.bankTail') }}</div> <div class="text-xs text-silver-500">{{ t('statement.bankTail') }}</div>
<div class="mt-1">{{ detail.bankTail }}</div> <div class="mt-1">{{ detail.bankTail }}</div>
</div> </div>
</div> </div>
</section> </section>
<section class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card"> <section class="rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div class="mb-3 text-sm font-medium">{{ t('statement.amount') }}</div> <div class="mb-3 text-sm font-medium">{{ t('statement.amount') }}</div>
<div v-for="item in detail.items" :key="item.id" class="border-b border-slate-100 py-3 last:border-0"> <div v-for="item in detail.items" :key="item.id" class="border-b border-silver-100 py-3 last:border-0">
<div class="flex items-center justify-between text-sm"> <div class="flex items-center justify-between text-sm">
<span>{{ item.customerName }}</span> <span>{{ item.customerName }}</span>
<span class="tnum font-medium">{{ formatDetailMoney(item.originalAmount, item.originalCurrency) }}</span> <span class="tnum font-medium">{{ formatDetailMoney(item.originalAmount, item.originalCurrency) }}</span>
......
src/components/feature/StatementList.vue
...@@ -19,7 +19,7 @@ const { t } = useI18n() ...@@ -19,7 +19,7 @@ const { t } = useI18n()
<button <button
v-for="statement in statements" v-for="statement in statements"
:key="statement.id" :key="statement.id"
class="flex w-full items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 text-left shadow-card transition-all hover:border-slate-300 hover:shadow-soft active:scale-[0.99]" class="flex w-full items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 text-left shadow-card transition-all hover:border-silver-300 hover:shadow-soft active:scale-[0.99]"
@click="emit('select', statement.id)" @click="emit('select', statement.id)"
> >
<div> <div>
......
src/components/feature/TodoCard.vue
...@@ -33,7 +33,7 @@ function markDone() { ...@@ -33,7 +33,7 @@ function markDone() {
</script> </script>
<template> <template>
<div class="flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card"> <div class="flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card">
<div> <div>
<div class="text-sm font-medium tracking-tight">{{ typeLabel }}</div> <div class="text-sm font-medium tracking-tight">{{ typeLabel }}</div>
<div class="mt-1 text-xs text-slate-500">{{ todo.customerName }} · {{ todo.policyNo }}</div> <div class="mt-1 text-xs text-slate-500">{{ todo.customerName }} · {{ todo.policyNo }}</div>
......
src/style.css
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
} }
:focus-visible { :focus-visible {
outline: 2px solid rgb(99 102 241 / 0.55); outline: 2px solid rgb(206 14 45 / 0.45);
outline-offset: 2px; outline-offset: 2px;
} }
} }
......
src/views/HomeView.vue
...@@ -64,7 +64,7 @@ onMounted(load) ...@@ -64,7 +64,7 @@ onMounted(load)
<router-link <router-link
v-if="metrics" v-if="metrics"
to="/customers" to="/customers"
class="mt-3 flex items-center justify-between rounded-2xl border border-slate-200/80 bg-white p-4 shadow-card transition-shadow hover:shadow-soft" class="mt-3 flex items-center justify-between rounded-2xl border border-silver-200 bg-white p-4 shadow-card transition-shadow hover:shadow-soft"
> >
<div> <div>
<div class="text-xs text-slate-500">{{ t('metric.myCustomers') }}</div> <div class="text-xs text-slate-500">{{ t('metric.myCustomers') }}</div>
...@@ -79,7 +79,7 @@ onMounted(load) ...@@ -79,7 +79,7 @@ onMounted(load)
</router-link> </router-link>
<section class="mt-7"> <section class="mt-7">
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('dashboard.actions') }}</h2> <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('dashboard.actions') }}</h2>
<div class="mb-3 flex flex-wrap gap-2 text-xs text-slate-500"> <div class="mb-3 flex flex-wrap gap-2 text-xs text-slate-500">
<span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.renewal') }} {{ countByType.renewal }}</span> <span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.renewal') }} {{ countByType.renewal }}</span>
<span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.lapse') }} {{ countByType.lapse }}</span> <span class="rounded-full bg-slate-100 px-2.5 py-1">{{ t('todo.lapse') }} {{ countByType.lapse }}</span>
...@@ -87,7 +87,7 @@ onMounted(load) ...@@ -87,7 +87,7 @@ onMounted(load)
</div> </div>
<div class="space-y-3"> <div class="space-y-3">
<TodoCard v-for="todo in todos" :key="todo.id" :todo="todo" /> <TodoCard v-for="todo in todos" :key="todo.id" :todo="todo" />
<div class="rounded-2xl border border-dashed border-slate-200 bg-white/60 p-4"> <div class="rounded-2xl border border-dashed border-silver-200 bg-white/60 p-4">
<div class="text-sm font-medium">{{ t('todo.claim') }}</div> <div class="text-sm font-medium">{{ t('todo.claim') }}</div>
<div class="mt-1 text-xs text-slate-400">{{ t('todo.claimPlaceholder') }}</div> <div class="mt-1 text-xs text-slate-400">{{ t('todo.claimPlaceholder') }}</div>
</div> </div>
......
src/views/PipelineView.vue
...@@ -53,14 +53,14 @@ onMounted(load) ...@@ -53,14 +53,14 @@ onMounted(load)
v-model="policyQuery" v-model="policyQuery"
type="search" type="search"
:placeholder="t('pipeline.filterPolicyPlaceholder')" :placeholder="t('pipeline.filterPolicyPlaceholder')"
class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-brand-200" class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors placeholder:text-silver-400 focus:border-brand-200"
> >
</label> </label>
<label class="block"> <label class="block">
<span class="mb-1 block text-xs text-slate-500">{{ t('pipeline.filterMonth') }}</span> <span class="mb-1 block text-xs text-slate-500">{{ t('pipeline.filterMonth') }}</span>
<select <select
v-model="selectedMonth" v-model="selectedMonth"
class="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200" class="w-full rounded-xl border border-silver-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-brand-200"
> >
<option value="">{{ t('pipeline.allMonths') }}</option> <option value="">{{ t('pipeline.allMonths') }}</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}</option> <option v-for="month in months" :key="month" :value="month">{{ month }}</option>
......
src/views/PoliciesView.vue
...@@ -44,14 +44,14 @@ onMounted(load) ...@@ -44,14 +44,14 @@ onMounted(load)
<ApiLoader :loading="loading" :error="error" :empty="!loading && !error && policies.length === 0" @retry="load"> <ApiLoader :loading="loading" :error="error" :empty="!loading && !error && policies.length === 0" @retry="load">
<div class="space-y-6"> <div class="space-y-6">
<section> <section>
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inforce') }}</h2> <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inforce') }}</h2>
<div class="space-y-3"> <div class="space-y-3">
<PolicyCard v-for="policy in inforce" :key="policy.policyNo" :policy="policy" @select="openCommissions" /> <PolicyCard v-for="policy in inforce" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
</div> </div>
</section> </section>
<section v-if="inactive.length"> <section v-if="inactive.length">
<h2 class="mb-3 text-[13px] font-semibold tracking-wide text-slate-700">{{ t('policies.inactive') }}</h2> <h2 class="mb-3 text-[13px] font-semibold tracking-wide text-silver-600">{{ t('policies.inactive') }}</h2>
<div class="space-y-3"> <div class="space-y-3">
<PolicyCard v-for="policy in inactive" :key="policy.policyNo" :policy="policy" @select="openCommissions" /> <PolicyCard v-for="policy in inactive" :key="policy.policyNo" :policy="policy" @select="openCommissions" />
</div> </div>
......
tailwind.config.js
...@@ -19,16 +19,26 @@ export default { ...@@ -19,16 +19,26 @@ export default {
}, },
colors: { colors: {
brand: { brand: {
50: '#eef2ff', 50: '#FEF0F1',
100: '#e0e7ff', 100: '#FDDDE1',
200: '#c7d2fe', 200: '#FBBAC3',
500: '#6366f1', 500: '#CE0E2D',
600: '#4f46e5', 600: '#B60C28',
700: '#4338ca' 700: '#8E0A1F'
},
silver: {
50: '#F7F7F7',
100: '#E8E8E8',
200: '#D4D4D4',
300: '#B8B8B8',
400: '#A0A0A0',
500: '#898989',
600: '#6F6F6F',
700: '#575757'
}, },
success: '#059669', success: '#059669',
warning: '#d97706', warning: '#d97706',
danger: '#dc2626' danger: '#CE0E2D'
}, },
boxShadow: { boxShadow: {
card: '0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05)', card: '0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05)',
......
vite.config.ts
...@@ -13,8 +13,9 @@ export default defineConfig({ ...@@ -13,8 +13,9 @@ export default defineConfig({
proxy: { proxy: {
// 后端 context-path 即 /csf/api，代理时不 rewrite // 后端 context-path 即 /csf/api，代理时不 rewrite
'/csf/api': { '/csf/api': {
target: 'http://localhost:9202', target: 'http://center.zuihuibi.cn',
changeOrigin: true changeOrigin: true,
secure: false,
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment