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 },
src/pages/finance/reports/index.tsx
+1 -1
View File
@@ -170,7 +170,7 @@ export default defineComponent({
value={range.value}
onUpdate:value={(val: string) => handleRangeChange(val)}
options={[...RANGE_OPTIONS]}
style={{ width: 120 }}
style={{ width: '120px' }}
/>
</div>
src/pages/finance/wallet/model/useWalletModel.ts
+13 -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';
// ============================================================
@@ -22,11 +23,11 @@ export const TRANSACTION_STATUS_OPTIONS = [
{ value: '已解冻', label: '已解冻' },
] as const;
/** 明细状态映射（用于表格 Tag 渲染） */
const TRANSACTION_STATUS_MAP: Record<string, { label: string; color: string }> = {
正常: { label: '正常', color: 'blue' },
冻结中: { label: '冻结中', color: 'orange' },
已解冻: { label: '已解冻', color: 'green' },
/** 明细状态映射（用于表格 StatusTag 渲染） */
const TRANSACTION_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
正常: { label: '正常', tone: 'primary' },
冻结中: { label: '冻结中', tone: 'orange' },
已解冻: { label: '已解冻', tone: 'success' },
};
// ============================================================
@@ -319,10 +320,13 @@ export function useWalletModel() {
}
};
/** 渲染交易状态 Tag */
/** 渲染交易状态 StatusTag */
const renderTransactionStatus = (status: string) => {
const info = TRANSACTION_STATUS_MAP[status] || { label: status || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = TRANSACTION_STATUS_MAP[status] || {
label: status || '-',
tone: 'default' as const,
};
return h(StatusTag, { label: info.label, tone: info.tone });
};
return {
src/pages/system/roles/model/useRoleModel.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';
// ============================================================
@@ -132,9 +133,9 @@ const MOCK_USERS: Record<string, any[]> = {
// ============================================================
// 状态文本/颜色映射
// ============================================================
const STATUS_MAP: Record<string, { label: string; color: string }> = {
active: { label: '正常', color: 'green' },
disabled: { label: '禁用', color: 'red' },
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
active: { label: '正常', tone: 'success' },
disabled: { label: '禁用', tone: 'danger' },
};
// ============================================================
@@ -288,10 +289,10 @@ export function useRoleModel() {
/** 根据 roleId 获取该角色下的用户列表 */
const getRoleUsers = (roleId: string) => MOCK_USERS[roleId] || [];
/** 状态 Tag 渲染 */
/** 状态 StatusTag 渲染 */
const renderStatus = (status: string) => {
const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
};
return {
src/pages/system/users/model/useUserModel.ts
+15 -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';
// ============================================================
@@ -19,17 +20,17 @@ export const USER_STATUS_OPTIONS = [
{ value: 'disabled', label: '禁用' },
] as const;
/** 角色文本/颜色映射（表格渲染） */
const ROLE_MAP: Record<string, { label: string; color: string }> = {
admin: { label: '管理员', color: 'blue' },
operator: { label: '运营人员', color: 'cyan' },
auditor: { label: '审核人员', color: 'purple' },
/** 角色文本/色调映射（表格渲染） */
const ROLE_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
admin: { label: '管理员', tone: 'primary' },
operator: { label: '运营人员', tone: 'cyan' },
auditor: { label: '审核人员', tone: 'purple' },
};
/** 状态文本/颜色映射 */
const STATUS_MAP: Record<string, { label: string; color: string }> = {
active: { label: '正常', color: 'green' },
disabled: { label: '禁用', color: 'red' },
/** 状态文本/色调映射 */
const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
active: { label: '正常', tone: 'success' },
disabled: { label: '禁用', tone: 'danger' },
};
// ============================================================
@@ -103,10 +104,9 @@ export function useUserModel() {
dataIndex: 'role',
key: 'role',
width: 120,
align: 'center' as const,
customRender: ({ text }: { text: string }) => {
const info = ROLE_MAP[text] || { label: text || '-', color: 'default' };
return h(Tag, { color: info.color }, () => info.label);
const info = ROLE_MAP[text] || { label: text || '-', tone: 'default' as const };
return h(StatusTag, { label: info.label, tone: info.tone });
},
},
{
@@ -116,8 +116,8 @@ export function useUserModel() {
width: 100,
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: 'createTime', key: 'createTime', width: 180 },