diff --git a/components.d.ts b/components.d.ts index 6560a2a..7c502dc 100644 --- a/components.d.ts +++ b/components.d.ts @@ -12,8 +12,12 @@ export {} declare module 'vue' { export interface GlobalComponents { AgentApplyProgress: typeof import('./src/components/AgentApplyProgress.vue')['default'] + AgentApplyProgressPanel: typeof import('./src/components/AgentApplyProgressPanel.vue')['default'] AgentChatJobList: typeof import('./src/components/AgentChatJobList.vue')['default'] + AgentJobPreviewPanel: typeof import('./src/components/AgentJobPreviewPanel.vue')['default'] AgentMatchJobAdd: typeof import('./src/components/AgentMatchJobAdd.vue')['default'] + AgentPendingJobListPanel: typeof import('./src/components/AgentPendingJobListPanel.vue')['default'] + AgentSettingPanel: typeof import('./src/components/AgentSettingPanel.vue')['default'] AgentSettingsPanel: typeof import('./src/components/AgentSettingsPanel.vue')['default'] AgentSetupWizard: typeof import('./src/components/AgentSetupWizard.vue')['default'] AgentTaskListDropdown: typeof import('./src/components/AgentTaskListDropdown.vue')['default'] diff --git a/src/api/jobs.ts b/src/api/jobs.ts index f8febdd..94e036e 100644 --- a/src/api/jobs.ts +++ b/src/api/jobs.ts @@ -206,6 +206,8 @@ export interface ApplyListParams { pageSize?: number /** 投递状态筛选(0=已投递 1=面试中 2=有Offer 3=未通过 4=已结束) */ status?: number | null + /** 搜索关键词 */ + keyword?: string } /** @@ -217,6 +219,7 @@ export function fetchApplyList(params: ApplyListParams = {}) { pageNum: params.pageNum ?? 1, pageSize: params.pageSize ?? 10, ...(params.status !== null && params.status !== undefined ? { status: params.status } : {}), + ...(params.keyword ? { keyword: params.keyword } : {}), }) } diff --git a/src/assets/styles/components/agent-apply-progress-panel.scss b/src/assets/styles/components/agent-apply-progress-panel.scss new file mode 100644 index 0000000..9370911 --- /dev/null +++ b/src/assets/styles/components/agent-apply-progress-panel.scss @@ -0,0 +1,266 @@ +@use '../variables' as *; + +/* 申请进度面板样式 */ +.agent-apply-progress-panel { + display: flex; + flex-direction: column; + height: 100%; + background: $bg-white; + border-radius: 0.2rem; + overflow: hidden; + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.16rem 0.2rem; + } + + &__title { + font-size: 0.16rem; + font-weight: 600; + color: $text-dark; + } + + /* 关闭按钮 */ + &__close-btn { + width: 0.28rem; + height: 0.28rem; + border: none; + background: none; + cursor: pointer; + padding: 0; + + svg { + width: 100%; + height: 100%; + } + } + + /* 筛选栏 */ + &__filter { + display: flex; + align-items: center; + gap: 0.1rem; + padding: 0 0.2rem 0.14rem; + } + + /* 下拉选择容器 */ + &__select-wrap { + flex-shrink: 0; + } + + &__select { + padding: 0.08rem 0.12rem; + border: 1px solid $border-color; + border-radius: 0.06rem; + font-size: 0.13rem; + color: $text-dark; + background: $bg-white; + cursor: pointer; + outline: none; + min-width: 1rem; + + &:focus { + border-color: $accent; + } + } + + /* 搜索框 */ + &__search { + flex: 1; + padding: 0.08rem 0.12rem; + border: 1px solid $border-color; + border-radius: 0.06rem; + font-size: 0.13rem; + color: $text-dark; + outline: none; + + &::placeholder { + color: $text-light; + } + + &:focus { + border-color: $accent; + } + } + + /* 列表区域(可滚动) */ + &__list { + flex: 1; + overflow-y: auto; + padding: 0 0.2rem 0.2rem; + } + + /* 单个岗位项 */ + &__item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.14rem 0.16rem; + background: $bg-main; + border-radius: 0.12rem; + margin-bottom: 0.1rem; + + &:last-child { + margin-bottom: 0; + } + } + + /* 左侧信息区域 */ + &__info { + display: flex; + align-items: center; + gap: 0.12rem; + flex: 1; + min-width: 0; + } + + /* 公司 Logo */ + &__logo { + width: 0.4rem; + height: 0.4rem; + border-radius: 0.08rem; + background: $bg-middle; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + svg { + width: 0.22rem; + height: 0.22rem; + color: $text-middle; + } + } + + /* 岗位详情 */ + &__detail { + min-width: 0; + } + + &__company { + font-size: 0.13rem; + font-weight: 500; + color: $text-dark; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__position { + font-size: 0.12rem; + color: $text-middle; + margin-top: 0.02rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* 标签 */ + &__tags { + display: flex; + gap: 0.06rem; + margin-top: 0.06rem; + flex-wrap: wrap; + } + + &__tag { + font-size: 0.11rem; + color: $text-middle; + background: $bg-white; + padding: 0.02rem 0.08rem; + border-radius: 0.04rem; + } + + /* 右侧区域 */ + &__right { + display: flex; + align-items: center; + gap: 0.1rem; + flex-shrink: 0; + } + + /* 匹配度环 */ + &__score { + position: relative; + width: 0.4rem; + height: 0.4rem; + } + + &__ring { + width: 100%; + height: 100%; + } + + &__score-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 0.1rem; + font-weight: 600; + color: $text-dark; + } + + /* 状态下拉 */ + &__status-select { + padding: 0.05rem 0.1rem; + border: 1px solid $border-color; + border-radius: 0.04rem; + font-size: 0.12rem; + color: $text-dark; + background: $bg-white; + cursor: pointer; + outline: none; + + &:focus { + border-color: $accent; + } + } + + /* 删除按钮 */ + &__delete-btn { + width: 0.2rem; + height: 0.2rem; + border: none; + background: none; + cursor: pointer; + padding: 0; + flex-shrink: 0; + + svg { + width: 100%; + height: 100%; + } + + &:hover svg circle { + fill: $danger; + } + } + + /* 加载中 */ + &__loading { + text-align: center; + padding: 0.16rem 0; + font-size: 0.12rem; + color: $text-light; + } + + /* 暂无更多数据 */ + &__no-more { + text-align: center; + padding: 0.16rem 0; + font-size: 0.12rem; + color: $text-light; + } + + /* 空状态 */ + &__empty { + text-align: center; + padding: 0.4rem 0; + font-size: 0.13rem; + color: $text-light; + } +} diff --git a/src/assets/styles/components/agent-chat-job-list.scss b/src/assets/styles/components/agent-chat-job-list.scss index 9d3cf0e..0be9f87 100644 --- a/src/assets/styles/components/agent-chat-job-list.scss +++ b/src/assets/styles/components/agent-chat-job-list.scss @@ -25,6 +25,7 @@ border-radius: 0.1rem; padding: 0.14rem 0.16rem; margin-bottom: 0.08rem; + cursor: pointer; &:last-of-type { margin-bottom: 0; diff --git a/src/assets/styles/components/agent-job-preview-panel.scss b/src/assets/styles/components/agent-job-preview-panel.scss new file mode 100644 index 0000000..9f71349 --- /dev/null +++ b/src/assets/styles/components/agent-job-preview-panel.scss @@ -0,0 +1,222 @@ +@use '../variables' as *; + +/* Agent岗位预览面板样式 */ +.agent-job-preview-panel { + display: flex; + flex-direction: column; + height: 100%; + background: $bg-white; + border-radius: 0.2rem; + overflow: hidden; + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.16rem 0.2rem; + border-bottom: 1px solid $border-color; + } + + /* 返回按钮 */ + &__back { + display: flex; + align-items: center; + gap: 0.06rem; + cursor: pointer; + font-size: 0.15rem; + font-weight: 500; + color: $text-dark; + } + + &__back-icon { + width: 0.16rem; + height: 0.16rem; + } + + /* 添加按钮 */ + &__add-btn { + padding: 0.06rem 0.16rem; + background: $btn-dark; + color: $bg-white; + border: none; + border-radius: 0.06rem; + font-size: 0.13rem; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: $btn-dark-hover; + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + /* 移出按钮 */ + &__remove-btn { + padding: 0.06rem 0.16rem; + background: $bg-white; + color: $text-middle; + border: 1px solid $border-color; + border-radius: 0.06rem; + font-size: 0.13rem; + cursor: pointer; + transition: background 0.2s, color 0.2s; + + &:hover { + background: $bg-main; + color: $danger; + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } + + /* 内容区域(可滚动) */ + &__body { + flex: 1; + overflow-y: auto; + padding: 0.2rem; + } + + /* 岗位卡片 */ + &__card { + background: $bg-main; + border-radius: 0.12rem; + padding: 0.2rem; + margin-bottom: 0.16rem; + } + + &__card-top { + display: flex; + justify-content: space-between; + align-items: flex-start; + } + + &__card-left { + flex: 1; + min-width: 0; + } + + /* 公司行 */ + &__company-row { + display: flex; + align-items: center; + gap: 0.08rem; + margin-bottom: 0.08rem; + } + + &__company-icon { + width: 0.28rem; + height: 0.28rem; + border-radius: 0.06rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: $bg-middle; + flex-shrink: 0; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + svg { + width: 0.18rem; + height: 0.18rem; + color: $text-middle; + } + } + + &__company-name { + font-size: 0.14rem; + font-weight: 500; + color: $text-dark; + } + + &__time { + font-size: 0.12rem; + color: $text-light; + margin-left: 0.06rem; + } + + /* 岗位标题 */ + &__job-title { + font-size: 0.17rem; + font-weight: 600; + color: $text-dark; + margin: 0.06rem 0 0.1rem; + } + + /* 元信息 */ + &__meta { + display: flex; + align-items: center; + gap: 0.16rem; + flex-wrap: wrap; + } + + &__meta-item { + display: flex; + align-items: center; + gap: 0.04rem; + font-size: 0.12rem; + color: $text-middle; + } + + &__meta-icon { + width: 0.14rem; + height: 0.14rem; + flex-shrink: 0; + } + + /* 匹配度环 */ + &__match { + position: relative; + width: 0.6rem; + height: 0.6rem; + flex-shrink: 0; + } + + &__ring-svg { + width: 100%; + height: 100%; + } + + &__match-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 0.13rem; + font-weight: 600; + color: $text-dark; + } + + /* 内容段落 */ + &__section { + margin-bottom: 0.2rem; + } + + &__section-title { + font-size: 0.14rem; + font-weight: 600; + color: $text-dark; + margin-bottom: 0.1rem; + } + + &__section-content { + font-size: 0.13rem; + color: $text-middle; + line-height: 1.8; + white-space: pre-wrap; + word-break: break-word; + } +} diff --git a/src/assets/styles/components/agent-match-job-add.scss b/src/assets/styles/components/agent-match-job-add.scss index a1e29f5..ef0bdd9 100644 --- a/src/assets/styles/components/agent-match-job-add.scss +++ b/src/assets/styles/components/agent-match-job-add.scss @@ -110,6 +110,7 @@ gap: 0.12rem; flex: 1; min-width: 0; + cursor: pointer; } // 公司 Logo diff --git a/src/assets/styles/components/agent-pending-job-list-panel.scss b/src/assets/styles/components/agent-pending-job-list-panel.scss new file mode 100644 index 0000000..fe1d30f --- /dev/null +++ b/src/assets/styles/components/agent-pending-job-list-panel.scss @@ -0,0 +1,203 @@ +@use '../variables' as *; + +/* 待投递岗位列表面板样式 */ +.agent-pending-job-list-panel { + display: flex; + flex-direction: column; + height: 100%; + background: $bg-white; + border-radius: 0.2rem; + overflow: hidden; + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.16rem 0.2rem; + } + + &__title { + font-size: 0.16rem; + font-weight: 600; + color: $text-dark; + } + + /* 关闭按钮 */ + &__close-btn { + width: 0.28rem; + height: 0.28rem; + border: none; + background: none; + cursor: pointer; + padding: 0; + + svg { + width: 100%; + height: 100%; + } + } + + /* 列表区域(可滚动) */ + &__list { + flex: 1; + overflow-y: auto; + padding: 0 0.2rem 0.2rem; + } + + /* 单个岗位项 */ + &__item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.14rem 0.16rem; + background: $bg-main; + border-radius: 0.12rem; + margin-bottom: 0.1rem; + + &:last-child { + margin-bottom: 0; + } + } + + /* 左侧信息区域 */ + &__info { + display: flex; + align-items: center; + gap: 0.12rem; + flex: 1; + min-width: 0; + } + + /* 公司 Logo */ + &__logo { + width: 0.4rem; + height: 0.4rem; + border-radius: 0.08rem; + background: $bg-middle; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + svg { + width: 0.22rem; + height: 0.22rem; + color: $text-middle; + } + } + + /* 岗位详情 */ + &__detail { + min-width: 0; + } + + &__company { + font-size: 0.13rem; + font-weight: 500; + color: $text-dark; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &__position { + font-size: 0.12rem; + color: $text-middle; + margin-top: 0.02rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* 标签 */ + &__tags { + display: flex; + gap: 0.06rem; + margin-top: 0.06rem; + flex-wrap: wrap; + } + + &__tag { + font-size: 0.11rem; + color: $text-middle; + background: $bg-white; + padding: 0.02rem 0.08rem; + border-radius: 0.04rem; + } + + /* 右侧区域 */ + &__right { + display: flex; + align-items: center; + gap: 0.14rem; + flex-shrink: 0; + } + + /* 匹配度环 */ + &__score { + position: relative; + width: 0.4rem; + height: 0.4rem; + } + + &__ring { + width: 100%; + height: 100%; + } + + &__score-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 0.1rem; + font-weight: 600; + color: $text-dark; + } + + /* 移出按钮 */ + &__remove-btn { + padding: 0.06rem 0.16rem; + background: $text-dark; + color: $bg-white; + border: none; + border-radius: 0.2rem; + font-size: 0.12rem; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { + opacity: 0.85; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + } + + /* 加载中 */ + &__loading { + text-align: center; + padding: 0.16rem 0; + font-size: 0.12rem; + color: $text-light; + } + + /* 暂无更多数据 */ + &__no-more { + text-align: center; + padding: 0.16rem 0; + font-size: 0.12rem; + color: $text-light; + } + + /* 空状态 */ + &__empty { + text-align: center; + padding: 0.4rem 0; + font-size: 0.13rem; + color: $text-light; + } +} diff --git a/src/assets/styles/components/agent-setting-panel.scss b/src/assets/styles/components/agent-setting-panel.scss new file mode 100644 index 0000000..9b52c1b --- /dev/null +++ b/src/assets/styles/components/agent-setting-panel.scss @@ -0,0 +1,202 @@ +@use '../variables' as *; + +/* Agent设置面板样式 */ +.agent-setting-panel { + display: flex; + flex-direction: column; + height: 100%; + background: $bg-white; + border-radius: 0.2rem; + overflow: hidden; + + /* 顶部标题栏 */ + &__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.16rem 0.2rem; + border-bottom: 1px solid $border-color; + } + + &__title { + font-size: 0.16rem; + font-weight: 600; + color: $text-dark; + } + + /* 关闭按钮 */ + &__close-btn { + width: 0.28rem; + height: 0.28rem; + border: none; + background: none; + cursor: pointer; + padding: 0; + + svg { + width: 100%; + height: 100%; + } + } + + /* 内容区域(可滚动) */ + &__body { + flex: 1; + overflow-y: auto; + padding: 0.2rem; + } + + /* ========== 设置项区块 ========== */ + &__section { + margin-bottom: 0.2rem; + border-bottom: 1px solid $border-color; + padding-bottom: 0.16rem; + + &:last-child { + border-bottom: none; + margin-bottom: 0; + } + } + + /* 区块标题行 */ + &__section-header { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + padding: 0.04rem 0; + } + + /* 区块标题 */ + &__section-title { + font-size: 0.15rem; + font-weight: 600; + color: $text-dark; + } + + /* 编辑按钮区域(文字 + 箭头) */ + &__section-action { + display: flex; + align-items: center; + gap: 0.04rem; + } + + &__section-action-text { + font-size: 0.12rem; + color: $accent; + } + + /* 方向箭头 */ + &__arrow { + width: 0.14rem; + height: 0.14rem; + color: $accent; + transition: transform 0.25s ease; + } + + /* 展开时箭头朝上 */ + &__arrow--up { + transform: rotate(180deg); + } + + /* 收起时的简要信息预览 */ + &__section-summary { + margin-top: 0.1rem; + font-size: 0.12rem; + color: $text-middle; + line-height: 1.6; + } + + &__section-empty { + color: $text-light; + font-style: italic; + } + + /* 展开时的内容区域 */ + &__section-content { + margin-top: 0.14rem; + } + + /* ========== 求职目标标签 ========== */ + &__goal-tags { + display: flex; + flex-wrap: wrap; + gap: 0.08rem; + margin-top: 0.1rem; + } + + &__goal-tag { + display: inline-block; + padding: 0.04rem 0.12rem; + background: $theme-color; + border: 1px solid $accent; + border-radius: 0.14rem; + font-size: 0.12rem; + color: $accent; + } + + /* 编辑图标 */ + &__edit-icon { + width: 0.13rem; + height: 0.13rem; + color: $accent; + } + + /* ========== 浏览器插件 ========== */ + &__browser-btns { + display: flex; + flex-wrap: wrap; + gap: 0.1rem; + margin-top: 0.12rem; + } + + &__browser-btn { + padding: 0.08rem 0.18rem; + background: $bg-white; + border: 1px solid $border-color; + border-radius: 0.08rem; + font-size: 0.13rem; + color: $text-dark; + cursor: pointer; + transition: border-color 0.2s, background 0.2s; + + &:hover { + border-color: $accent; + background: $theme-color; + } + } + + &__download-wrap { + margin-top: 0.16rem; + text-align: center; + } + + &__download-btn { + padding: 0.1rem 0.4rem; + background: $gradient-bg; + color: $bg-white; + border: none; + border-radius: 0.24rem; + font-size: 0.14rem; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { + opacity: 0.9; + } + } + + /* 浏览器安装指引弹窗图片 */ + &__guide-slide { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + + img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + } +} diff --git a/src/assets/styles/pages/agent.scss b/src/assets/styles/pages/agent.scss index cc331dd..2f3dbfe 100644 --- a/src/assets/styles/pages/agent.scss +++ b/src/assets/styles/pages/agent.scss @@ -246,11 +246,40 @@ // ==================== 第2步:确认目标 ==================== + // 返回上一步按钮 — 位于每步容器左上角 + &__back-btn { + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + gap: 0.04rem; + padding: 0.06rem 0.12rem; + background: transparent; + border: none; + color: $text-middle; + font-size: 0.13rem; + cursor: pointer; + border-radius: 0.04rem; + transition: color 0.2s ease, background 0.2s ease; + + &:hover { + color: $text-dark; + background: $bg-middle; + } + + svg { + flex-shrink: 0; + } + } + // 第2步整体容器 &__step2 { width: 100%; max-width: 7rem; margin: 0 auto; + position: relative; + padding-top: 0.36rem; } // 对话区域 @@ -578,6 +607,8 @@ gap: 0.24rem; align-items: flex-start; width: 100%; + position: relative; + padding-top: 0.36rem; } // 右侧表单包裹 @@ -1085,7 +1116,7 @@ // 工具按钮 &__tool-btn { - width: 0.28rem; + width: 0.38rem; height: 0.28rem; border: none; background: transparent; @@ -1097,6 +1128,8 @@ color: $text-middle; border-radius: 0.06rem; transition: all 0.2s ease; + font-weight: 600; + svg { width: 0.18rem; diff --git a/src/components/AgentApplyProgressPanel.vue b/src/components/AgentApplyProgressPanel.vue new file mode 100644 index 0000000..a4709ac --- /dev/null +++ b/src/components/AgentApplyProgressPanel.vue @@ -0,0 +1,254 @@ + + + + + diff --git a/src/components/AgentChatJobList.vue b/src/components/AgentChatJobList.vue index cba5566..42dbacb 100644 --- a/src/components/AgentChatJobList.vue +++ b/src/components/AgentChatJobList.vue @@ -10,6 +10,7 @@ :key="job.id" class="agent-chat-job-list__item" v-if="displayJobs.length>0" + @click="handleClickJob(job)" >
@@ -79,6 +80,8 @@ const props = defineProps<{ const emit = defineEmits<{ /** 点击查看全部岗位 */ (e: 'viewAll'): void + /** 点击岗位查看详情 */ + (e: 'clickJob', job: AgentRecommendJob): void }>() /** 只显示前3个岗位 */ @@ -88,6 +91,11 @@ const displayJobs = computed(() => props.jobs.slice(0, 3)) function handleViewAll() { emit('viewAll') } + +/** 点击岗位 — 通知父组件打开岗位预览 */ +function handleClickJob(job: AgentRecommendJob) { + emit('clickJob', job) +} diff --git a/src/components/AgentMatchJobAdd.vue b/src/components/AgentMatchJobAdd.vue index b05a55b..ba04fe2 100644 --- a/src/components/AgentMatchJobAdd.vue +++ b/src/components/AgentMatchJobAdd.vue @@ -27,7 +27,7 @@ class="agent-match-job-add__item" > -
+