diff --git a/src/components/ClickableTag/index.vue b/src/components/ClickableTag/index.vue index 8fe6817..1961923 100644 --- a/src/components/ClickableTag/index.vue +++ b/src/components/ClickableTag/index.vue @@ -2,7 +2,8 @@ (), { @@ -50,7 +52,8 @@ const props = withDefaults(defineProps(), { size: 'default', leftIcon: undefined, middleIcon: undefined, - rightIcon: undefined + rightIcon: undefined, + width: undefined }) // 获取实际的右侧图标:未传值时使用默认图标,传 null 则不显示 @@ -97,7 +100,6 @@ export default { } } } - .middle-icon { animation: pulse 1.5s ease-in-out infinite; } diff --git a/src/components/DetailPopover/README.md b/src/components/DetailPopover/README.md new file mode 100644 index 0000000..417cb2a --- /dev/null +++ b/src/components/DetailPopover/README.md @@ -0,0 +1,162 @@ +# DetailPopover 详情弹窗组件 + +一个通用的详情弹窗组件,用于展示结构化的详情信息。 + +## 功能特性 + +- ✅ 自定义标题和标题图标 +- ✅ 支持多个详情项(label + content) +- ✅ 支持横向/纵向布局 +- ✅ 支持自定义内容(插槽或组件) +- ✅ 支持标签图标 +- ✅ 支持内容区域自定义样式类 + +## Props + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----|------|------|-------|--------| +| title | 标题 | string | - | '' | +| titleIcon | 标题图标组件 | Component | - | undefined | +| items | 详情项列表 | DetailItem[] | - | [] | +| placement | 弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | right | +| width | Popover 宽度 | string \| number | - | 300 | +| trigger | 触发方式 | string | click/focus/hover/contextmenu | click | +| popperClass | Popover 自定义类名 | string | - | '' | + +## DetailItem 接口 + +```typescript +interface DetailItem { + label?: string // 标签文本 + content?: string | number // 内容文本 + labelIcon?: Component // 标签图标 + layout?: 'horizontal' | 'vertical' // 布局方向,默认 vertical + contentClass?: string // 内容区域的自定义类名 + component?: Component // 自定义组件 + componentProps?: Record // 自定义组件的 props +} +``` + +## Slots + +| 插槽名 | 说明 | 参数 | +|--------|------|------| +| reference | 触发元素 | - | +| content-{index} | 自定义第 index 项的内容 | { item: DetailItem } | +| custom-content | 自定义内容(显示在所有详情项之后) | - | + +## 使用示例 + +### 基础用法 + +```vue + + + +``` + +### 横向布局 + +```vue + + + +``` + +### 使用插槽自定义内容 + +```vue + + + + + + + + + +``` + +### 使用标签图标 + +```vue + + + +``` + +## 样式自定义 + +可以通过 `contentClass` 为内容区域添加自定义样式类: + +```vue + + + + + +``` diff --git a/src/components/DetailPopover/index.vue b/src/components/DetailPopover/index.vue new file mode 100644 index 0000000..e227ac3 --- /dev/null +++ b/src/components/DetailPopover/index.vue @@ -0,0 +1,185 @@ + + + + + + + diff --git a/src/config/global.ts b/src/config/global.ts index dd8dbc0..9079377 100644 --- a/src/config/global.ts +++ b/src/config/global.ts @@ -62,12 +62,6 @@ export const PUSHED_STATUS_LIST = [ { label: "已推送", value: "1" ,type: "success"}, ]; -// 数据来源 (使用字典 recruit_data_source) -export const DATA_SOURCE_LIST = [ - { label: "学校", value: "0" }, - { label: "市平台", value: "1" } -]; - // 录取通知书发放状态 export const NOTICE_SEND_STATUS_LIST = [ { label: "未发放", value: "0" }, @@ -123,6 +117,13 @@ export const NEW_CITY_MATERIAL_STATUS_LIST = [ { label: "已上传", value: "1" }, ]; +// 异动审核状态 +export const TURNOVER_AUDIT_STATUS_LIST = [ + { label: "待审核", value: "1" ,type: "warning", icon: "Clock"}, + { label: "驳回", value: "2" ,type: "danger", icon: "CircleClose"}, + { label: "通过", value: "3" ,type: "success", icon: "CircleCheck"} +]; + /** * 根据值从状态列表中获取配置项 * @param statusList 状态列表 diff --git a/src/views/recruit/newstucheckin/index.vue b/src/views/recruit/newstucheckin/index.vue index 61914ab..6a903c6 100644 --- a/src/views/recruit/newstucheckin/index.vue +++ b/src/views/recruit/newstucheckin/index.vue @@ -1,20 +1,3 @@ - -