cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: tag样式优化

Browse Source
This commit is contained in:
ZhuRui
2026-07-28 16:42:10 +08:00
parent 28e339a048
commit 3d6aa6026c
14 changed files with 264 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/events/banner/index.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ function renderBodyCell({
);
}
// 跳转类型列：彩色 Tag
// 跳转类型列：StatusTag
if (column.dataIndex === 'jumpType') {
return renderJumpType(text);
}
src/pages/events/banner/model/useBannerModel.ts
+19 -20
View File
@@ -1,5 +1,6 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message, Tag } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
@@ -21,18 +22,18 @@ export const JUMP_TYPE_OPTIONS = [
{ value: 'none', label: '无链接' },
] as const;
/** 跳转类型映射（用于表格 Tag 渲染） */
const JUMP_TYPE_MAP: Record<string, { label: string; color: string }> = {
event_detail: { label: '赛事详情页', color: 'blue' },
miniprogram_page: { label: '小程序页面', color: 'cyan' },
custom_link: { label: '自定义链接', color: 'purple' },
none: { label: '无链接', color: 'default' },
/** 跳转类型映射（用于表格 StatusTag 渲染） */
const JUMP_TYPE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
event_detail: { label: '赛事详情页', tone: 'primary' },
miniprogram_page: { label: '小程序页面', tone: 'cyan' },
custom_link: { label: '自定义链接', tone: 'purple' },
none: { label: '无链接', tone: 'default' },
};
/** Banner 状态映射 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
enabled: { label: '启用中', color: 'green' },
disabled: { label: '已禁用', color: 'default' },
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone; dimmed?: boolean }> = {
enabled: { label: '启用中', tone: 'success' },
disabled: { label: '已禁用', tone: 'default', dimmed: true },
};
/** 关联赛事选项（mock） */
@@ -153,7 +154,6 @@ export function useBannerModel() {
dataIndex: 'jumpType',
key: 'jumpType',
width: 120,
align: 'center' as const,
},
{ title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
{ title: '所属区域', key: 'region', width: 140 },
@@ -282,18 +282,17 @@ export function useBannerModel() {
// ===== 供页面 bodyCell 使用的渲染工具 =====
const renderJumpType = (type: string) => {
const info = JUMP_TYPE_MAP[type] || { label: type || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = JUMP_TYPE_MAP[type] || { label: type || '-', tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
};
const renderStatus = (status: string) => {
const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
const tagProps: any = { color: info.color };
// 已禁用状态添加半透明样式
if (status === 'disabled') {
tagProps.style = { opacity: 0.5 };
}
return h(Tag, tagProps, () => info.label);
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
return h(StatusTag, {
label: info.label,
tone: info.tone,
dimmed: info.dimmed,
});
};
return {
src/pages/events/list/model/useEventListModel.ts
+11 -9
View File
@@ -1,5 +1,6 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message, Tag } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
@@ -67,12 +68,12 @@ const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
}));
/** 状态标签映射 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
pending: { label: '待审核', color: 'gold' },
enrolling: { label: '报名中', color: 'blue' },
deleted: { label: '已删除', color: 'red' },
removed: { label: '已下架', color: 'orange' },
rejected: { label: '审核不通过', color: 'volcano' },
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
pending: { label: '待审核', tone: 'warning' },
enrolling: { label: '报名中', tone: 'primary' },
deleted: { label: '已删除', tone: 'neutral' },
removed: { label: '已下架', tone: 'orange' },
rejected: { label: '审核不通过', tone: 'danger' },
};
// ============================================================
@@ -169,9 +170,10 @@ export function useEventListModel() {
dataIndex: 'status',
key: 'status',
width: 90,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = STATUS_MAP[text] || { label: text, color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = STATUS_MAP[text] || { label: text, tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{ title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
src/pages/events/orders/components/OrderDetailModal.tsx
+7 -6
View File
@@ -1,5 +1,6 @@
import { defineComponent, ref, computed } from 'vue';
import { Modal, Table, Button, Tag, Pagination, Image, Space } from 'ant-design-vue';
import { Modal, Table, Button, Pagination, Image, Space } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import styles from './OrderDetailModal.module.less';
interface OrderDetailModalProps {
@@ -69,9 +70,9 @@ const PLAYER_COLUMNS = [
},
];
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
success: { label: '退款成功', color: 'green' },
failed: { label: '退款失败', color: 'red' },
const REFUND_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
success: { label: '退款成功', tone: 'success' },
failed: { label: '退款失败', tone: 'danger' },
};
export default defineComponent({
@@ -203,14 +204,14 @@ export default defineComponent({
{pagedRefunds.value.map((r, idx) => {
const statusInfo = REFUND_STATUS_MAP[r.status] || {
label: '-',
color: 'default',
tone: 'default' as const,
};
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
return (
<div key={r.key} class={styles.refundCard}>
<div class={styles.refundCardHeader}>
<span class={styles.refundIndex}>第{realIdx}次退款</span>
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
<StatusTag label={statusInfo.label} tone={statusInfo.tone} />
</div>
<div class={styles.refundCardBody}>
<div class={styles.refundCol}>
src/pages/events/orders/model/useOrderModel.ts
+16 -15
View File
@@ -1,5 +1,6 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message, Tag } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
@@ -22,18 +23,18 @@ export const REFUND_STATUS_OPTIONS = [
{ value: 'refund_failed', label: '退款失败' },
] as const;
/** 订单状态 Tag 映射 */
const ORDER_STATUS_MAP: Record<string, { label: string; color: string }> = {
paid: { label: '已支付', color: 'green' },
partial_refund: { label: '部分退款', color: 'orange' },
full_refund: { label: '全部退款', color: 'blue' },
closed: { label: '已关闭', color: 'default' },
/** 订单状态 StatusTag 映射 */
const ORDER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
paid: { label: '已支付', tone: 'success' },
partial_refund: { label: '部分退款', tone: 'orange' },
full_refund: { label: '全部退款', tone: 'primary' },
closed: { label: '已关闭', tone: 'default' },
};
/** 退款状态 Tag 映射 */
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
refund_success: { label: '退款成功', color: 'green' },
refund_failed: { label: '退款失败', color: 'red' },
/** 退款状态 StatusTag 映射 */
const REFUND_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
refund_success: { label: '退款成功', tone: 'success' },
refund_failed: { label: '退款失败', tone: 'danger' },
};
// ============================================================
@@ -254,8 +255,8 @@ export function useOrderModel() {
width: 100,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = ORDER_STATUS_MAP[text] || { label: text || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = ORDER_STATUS_MAP[text] || { label: text || '-', tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{
@@ -266,8 +267,8 @@ export function useOrderModel() {
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
if (!text) return h('span', '-');
const info = REFUND_STATUS_MAP[text] || { label: text, color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = REFUND_STATUS_MAP[text] || { label: text, tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
];
src/pages/events/users/model/useUserModel.ts
+8 -7
View File
@@ -1,5 +1,6 @@
import { computed, reactive, toRef, Ref, h } from 'vue';
import { message, Tag } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { StatusTag, type StatusTagTone } from '@/components';
import { useState, useDebounce, useThrottleFn } from '@/hooks';
// ============================================================
@@ -13,10 +14,10 @@ export const USER_STATUS_OPTIONS = [
{ value: 'disabled', label: '禁用' },
] as const;
/** 用户状态 Tag 映射 */
const USER_STATUS_MAP: Record<string, { label: string; color: string }> = {
active: { label: '正常', color: 'green' },
disabled: { label: '禁用', color: 'red' },
/** 用户状态 StatusTag 映射 */
const USER_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
active: { label: '正常', tone: 'success' },
disabled: { label: '禁用', tone: 'danger' },
};
// ============================================================
@@ -94,8 +95,8 @@ export function useUserModel() {
width: 90,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = USER_STATUS_MAP[text] || { label: text, color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = USER_STATUS_MAP[text] || { label: text, tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{ title: '登录时间', dataIndex: 'loginTime', key: 'loginTime', width: 170 },