feat: add selected audience profile csv export

This commit is contained in:
admin123 2026-05-18 16:59:05 +08:00
parent 03c2fe0cc7
commit 66bc49d498
17 changed files with 1458 additions and 16 deletions

View File

@ -0,0 +1,332 @@
# Market Audience Profile Export Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Add a selected-creators-only `导出画像CSV` flow that exports current market columns plus detail-page "连接用户" audience profile distributions.
**Architecture:** Keep the existing CSV export untouched and add a separate profile export path. The content controller reuses current selection and market row hydration, loads one selected creator profile at a time through a focused detail-page profile client, then writes a separate CSV with structured audience columns.
**Tech Stack:** TypeScript, Chrome MV3 content scripts, Xingtu authenticated pages, Vitest, jsdom, tsup
---
## File Map
- Modify: `src/background/auth/controller.ts`
- Keep token-readable auth state behavior from the previous fix.
- Modify: `src/background/auth/state.ts`
- Keep logged-out `lastError` support from the previous fix.
- Modify: `tests/background-auth-controller.test.ts`
- Keep token-expired regression coverage.
- Modify: `src/content/market/auth-gate.ts`
- Render expired-login text when auth state carries a token-expired error.
- Modify: `src/content/index.ts`
- Pass auth failure text into the market auth gate if needed.
- Modify: `src/content/market/plugin-toolbar.ts`
- Add a `导出画像CSV` button and handler.
- Create: `src/content/market/audience-profile-types.ts`
- Define normalized distribution and export-row types.
- Create: `src/content/market/audience-profile-client.ts`
- Load one creator detail page and extract normalized audience profile data.
- Create: `src/content/market/audience-profile-csv.ts`
- Build CSV columns from market records plus profile distributions.
- Modify: `src/content/market/index.ts`
- Add selected-only profile export flow and serial profile loading.
- Test: `tests/market-auth-gating.test.ts`
- Verify expired-login text.
- Test: `tests/plugin-toolbar.test.ts`
- Verify new toolbar button wiring.
- Test: `tests/audience-profile-csv.test.ts`
- Verify structured CSV column expansion.
- Test: `tests/audience-profile-client.test.ts`
- Verify parser behavior against representative detail-page payload/state shapes.
- Modify: `tests/market-content-entry.test.ts`
- Verify selected-only export behavior and failure handling.
## Task 1: Expired Login Message
**Files:**
- Modify: `src/content/market/auth-gate.ts`
- Modify: `src/content/index.ts`
- Test: `tests/market-auth-gating.test.ts`
- [ ] **Step 1: Write the failing auth gate test**
Add a test where `sendAuthMessage` returns:
```ts
{
ok: true,
type: "auth:state",
value: {
isAuthenticated: false,
lastError: "Token 已过期"
}
}
```
Assert the page shows `登录已过期,请重新登录`.
- [ ] **Step 2: Run the failing test**
Run:
```bash
npm test -- tests/market-auth-gating.test.ts
```
Expected: FAIL because the gate only renders `请先登录插件`.
- [ ] **Step 3: Implement minimal auth gate text support**
Update `renderMarketAuthGate` to accept an optional message string and render it instead of the default title. Update `bootContentScript` to pass `登录已过期,请重新登录` when `lastError` contains `token` or `过期`.
- [ ] **Step 4: Verify**
Run:
```bash
npm test -- tests/market-auth-gating.test.ts tests/popup-entry.test.ts
```
Expected: PASS.
## Task 2: Toolbar Button
**Files:**
- Modify: `src/content/market/plugin-toolbar.ts`
- Test: `tests/plugin-toolbar.test.ts`
- [ ] **Step 1: Write failing toolbar tests**
Create tests that:
- render the toolbar
- assert a button with text `导出画像CSV` exists
- click it and assert `onExportAudienceProfile` was called
- assert `setToolbarBusyState` disables the new button
- [ ] **Step 2: Run the failing tests**
Run:
```bash
npm test -- tests/plugin-toolbar.test.ts
```
Expected: FAIL because the button and handler do not exist.
- [ ] **Step 3: Implement toolbar support**
Add `onExportAudienceProfile` to `PluginToolbarHandlers`, add `audienceProfileExportButton` to `PluginToolbarDom`, render the new button, wire click handling, and include it in busy-state disabling.
- [ ] **Step 4: Verify**
Run:
```bash
npm test -- tests/plugin-toolbar.test.ts tests/market-content-entry.test.ts
```
Expected: PASS.
## Task 3: Profile CSV Builder
**Files:**
- Create: `src/content/market/audience-profile-types.ts`
- Create: `src/content/market/audience-profile-csv.ts`
- Test: `tests/audience-profile-csv.test.ts`
- [ ] **Step 1: Write failing CSV tests**
Define a sample market record and sample profile:
```ts
const profile = {
status: "success",
gender: [
{ label: "男性", value: "40.6%" },
{ label: "女性", value: "59.4%" }
],
age: [{ label: "18-23", value: "28.6%" }],
province: [{ label: "广东", value: "15%" }],
regionTop: [{ label: "北京", value: "15%" }],
cityTier: [{ label: "一线", value: "20%" }],
interestTop: [{ label: "亲子", value: "18%" }],
crowd: [{ label: "精致妈妈", value: "12%" }]
};
```
Assert the CSV contains separate headers like `连接用户-男性占比`, `省份-广东占比`, `地域TOP1名称`, `地域TOP1占比`.
- [ ] **Step 2: Run the failing tests**
Run:
```bash
npm test -- tests/audience-profile-csv.test.ts
```
Expected: FAIL because the files do not exist.
- [ ] **Step 3: Implement CSV builder**
Create:
- `AudienceProfileDistributionItem`
- `AudienceProfileResult`
- `buildAudienceProfileCsv(records, profilesByAuthorId)`
Reuse `escapeCsvCell` and existing base/rate/backend metric column conventions. Add `画像抓取状态`.
- [ ] **Step 4: Verify**
Run:
```bash
npm test -- tests/audience-profile-csv.test.ts tests/csv-exporter.test.ts
```
Expected: PASS.
## Task 4: Detail Profile Client and Parser
**Files:**
- Create: `src/content/market/audience-profile-client.ts`
- Test: `tests/audience-profile-client.test.ts`
- [ ] **Step 1: Use a logged-in browser to identify the real data source**
Run a Playwright probe against an authenticated `https://xingtu.cn/ad/creator/author-homepage/douyin-video/<authorId>` page. Capture only `/gw/api/...` JSON responses and page Vue/ECharts state. Record representative payload/state samples in the test file as small fixtures.
- [ ] **Step 2: Write failing parser tests**
Use the captured fixture to assert the parser returns normalized arrays for gender, age, province, region top 10, city tier, interest top 10, and crowd.
- [ ] **Step 3: Run the failing tests**
Run:
```bash
npm test -- tests/audience-profile-client.test.ts
```
Expected: FAIL because the client/parser does not exist.
- [ ] **Step 4: Implement parser and client**
Implement a small parser first. Then implement the client with injectable dependencies:
```ts
createAudienceProfileClient({
fetchDetailPage?: (authorId: string) => Promise<unknown>;
readProfileFromPage?: (authorId: string) => Promise<unknown>;
})
```
Prefer parsed API JSON. Fall back to page state when API JSON is unavailable.
- [ ] **Step 5: Verify**
Run:
```bash
npm test -- tests/audience-profile-client.test.ts
```
Expected: PASS.
## Task 5: Controller Export Flow
**Files:**
- Modify: `src/content/market/index.ts`
- Test: `tests/market-content-entry.test.ts`
- [ ] **Step 1: Write failing selected-only export tests**
Add tests that:
- select one of two visible rows
- click `导出画像CSV`
- assert only the selected author profile is requested
- assert `onCsvReady` receives a CSV containing profile columns
- [ ] **Step 2: Write failing no-selection test**
Assert clicking `导出画像CSV` with no selected rows sets status to `请先勾选需要导出画像的达人` and makes no profile requests.
- [ ] **Step 3: Write failing partial-failure test**
Mock two selected profiles where one succeeds and one fails. Assert CSV is still generated with one success row and one `画像抓取状态=失败` row.
- [ ] **Step 4: Run failing tests**
Run:
```bash
npm test -- tests/market-content-entry.test.ts
```
Expected: FAIL because the controller has no profile export flow.
- [ ] **Step 5: Implement controller flow**
Add an injected option `loadAudienceProfile?: (record: MarketRecord) => Promise<AudienceProfileResult>`. Add handler:
- sync selected state from DOM
- reject empty selection
- hydrate current-page selected records
- load profiles serially
- cache successful results by author ID
- build profile CSV
- call `onCsvReady`
- update toolbar progress/status
- [ ] **Step 6: Verify**
Run:
```bash
npm test -- tests/market-content-entry.test.ts tests/audience-profile-csv.test.ts tests/plugin-toolbar.test.ts
```
Expected: PASS.
## Task 6: Full Verification
**Files:**
- Modify only if failures identify necessary scoped fixes.
- [ ] **Step 1: Run focused suite**
Run:
```bash
npm test -- tests/market-auth-gating.test.ts tests/plugin-toolbar.test.ts tests/audience-profile-csv.test.ts tests/audience-profile-client.test.ts tests/market-content-entry.test.ts
```
Expected: PASS.
- [ ] **Step 2: Run all tests**
Run:
```bash
npm test
```
Expected: PASS.
- [ ] **Step 3: Run build**
Run:
```bash
npm run build
```
Expected: PASS.
- [ ] **Step 4: Manual logged-in browser verification**
Load the built extension in Chrome, select one or two market creators, click `导出画像CSV`, and verify the downloaded CSV contains structured profile columns with detail-page data.

View File

@ -0,0 +1,105 @@
# Market Audience Profile Export Design
## Goal
Add a separate CSV export for selected creators that includes the current market export fields plus audience profile data from each creator detail page's "连接用户" tab.
## User-Approved Decisions
- Add a new toolbar button named `导出画像CSV`.
- Keep the existing `导出CSV` behavior unchanged.
- Only allow the new export when at least one creator row is selected.
- Do not support "export all" for profile data in this change because detail-page data costs extra API/page loads.
- Suggested downloaded filename: `达人连接用户画像_YYYYMMDD_HHmm.csv`.
- Export profile distributions as separate structured CSV columns, not as JSON blobs.
## Data Scope
Each exported row represents one selected creator. Start with the current market CSV columns, then append audience profile columns for:
- 性别分布
- 年龄分布
- 全国省份分布
- 地域占比 TOP10
- 城市等级分布
- 兴趣分布
- 八大人群占比
Fixed distributions should become fixed columns, for example:
- `连接用户-男性占比`
- `连接用户-女性占比`
- `连接用户-18-23占比`
- `连接用户-24-30占比`
- `省份-广东占比`
- `城市等级-一线占比`
- `八大人群-精致妈妈占比`
Ranked distributions should become name/value column pairs:
- `地域TOP1名称`
- `地域TOP1占比`
- ...
- `地域TOP10名称`
- `地域TOP10占比`
- `兴趣TOP1名称`
- `兴趣TOP1占比`
- ...
- `兴趣TOP10名称`
- `兴趣TOP10占比`
Add a `画像抓取状态` column so partial failures are visible in CSV output.
## Data Acquisition
Use an on-demand detail-page probe. The implementation must first confirm the real data source from an authenticated creator detail page:
1. Prefer Xingtu `/gw/api/...` JSON responses if they expose the required profile data.
2. If the API payload is difficult to locate or unstable, read the detail page's Vue/ECharts state from the page context.
3. Avoid screen/OCR parsing and avoid relying on rendered chart pixels.
The export should process selected creators one at a time by default to respect API limits and reduce anti-abuse risk. Cache successful profile results in memory for the current page session.
## UX
Toolbar behavior:
- Add `导出画像CSV` next to the existing export actions.
- Disable the button while any export/submission action is running.
- If no creators are selected, show `请先勾选需要导出画像的达人`.
- While exporting, show progress such as `画像导出中 3/12...`.
- If plugin auth is expired, show `登录已过期,请重新登录`.
- If one creator fails, keep the row in the CSV with `画像抓取状态=失败` and leave profile columns empty.
- If all creators fail, do not download a CSV and show a failure message.
## Architecture
Add the feature as a separate export path instead of extending the existing `导出CSV` action. Reuse current selection state, market record hydration, CSV escaping, and runtime download path.
Proposed units:
- `audience-profile-client`: load and parse audience profile data for one creator detail page.
- `audience-profile-csv`: combine existing market CSV columns with profile-specific columns.
- Toolbar additions: add a button and handler for profile export.
- Controller additions: filter to selected creators, call the profile client serially, build the CSV, then reuse `onCsvReady`.
## Testing
Use TDD. Add focused tests for:
- Auth state expired detection and user-facing expired-login text.
- Toolbar renders and wires the new `导出画像CSV` button.
- New export refuses to run without selected creators.
- Profile CSV expands fixed and ranked distributions into separate columns.
- Controller exports only selected creators and fetches profiles serially.
- Failed creator profile fetches produce a failed row while successful rows still export.
Run focused tests first, then full `npm test`, then `npm run build`.
## Out of Scope
- Unselected/all-page profile export.
- Persistent cross-session profile cache.
- Visual dashboard UI for profile data.
- Changing batch submission payloads.
- OCR or screenshot-based chart extraction.

View File

@ -26,6 +26,15 @@ export function createAuthController(options: {
return createLoggedOutAuthState(config);
}
try {
await options.authClient.getAccessToken(config.apiResource);
} catch (error) {
return createLoggedOutAuthState(
config,
error instanceof Error ? error.message : String(error)
);
}
const claims = await options.authClient.getIdTokenClaims();
return createLoggedInAuthState(claims, config);
},

View File

@ -2,10 +2,12 @@ import type { AuthConfig } from "../../shared/auth-config";
import type { AuthStateValue } from "../../shared/auth-messages";
export function createLoggedOutAuthState(
config?: Pick<AuthConfig, "apiResource">
config?: Pick<AuthConfig, "apiResource">,
lastError?: string | null
): AuthStateValue {
return {
isAuthenticated: false,
lastError: lastError ?? null,
resource: config?.apiResource ?? null
};
}

View File

@ -44,7 +44,11 @@ export async function bootContentScript(
const authState = await readAuthState(sendAuthMessage);
if (!authState?.isAuthenticated) {
await waitForBodyReady(currentDocument, currentWindow);
renderMarketAuthGate(currentDocument, currentWindow);
renderMarketAuthGate(
currentDocument,
currentWindow,
isExpiredAuthState(authState) ? "登录已过期,请重新登录" : undefined
);
return {
ready: Promise.resolve()
};
@ -54,12 +58,17 @@ export async function bootContentScript(
return controllerFactory({
document: currentDocument,
onCsvReady: (csv: string) => {
onCsvReady: (csv: string, filename?: string) => {
if (filename) {
downloadCsv(currentDocument, currentWindow, csv, filename);
return;
}
if (requestCsvDownload(csv)) {
return;
}
downloadCsv(currentDocument, currentWindow, csv);
downloadCsv(currentDocument, currentWindow, csv, filename);
},
window: currentWindow
});
@ -112,7 +121,7 @@ function bootstrapContentScript() {
bootstrapContentScript();
function requestCsvDownload(csv: string): boolean {
function requestCsvDownload(csv: string, filename?: string): boolean {
const runtime = (
globalThis as typeof globalThis & {
chrome?: { runtime?: ChromeRuntimeLike };
@ -125,7 +134,7 @@ function requestCsvDownload(csv: string): boolean {
runtime.sendMessage({
csv,
filename: `star-chart-search-enhancer-${formatTimestampForFilename()}.csv`,
filename: filename ?? `star-chart-search-enhancer-${formatTimestampForFilename()}.csv`,
type: DOWNLOAD_MARKET_CSV_MESSAGE
});
return true;
@ -165,14 +174,19 @@ async function waitForBodyReady(document: Document, currentWindow: Window): Prom
});
}
function downloadCsv(document: Document, window: Window, csv: string): void {
function downloadCsv(
document: Document,
window: Window,
csv: string,
filename?: string
): void {
const blob = new Blob(["\uFEFF", csv], {
type: "text/csv;charset=utf-8"
});
const objectUrl = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = objectUrl;
link.download = `star-chart-search-enhancer-${formatTimestampForFilename()}.csv`;
link.download = filename ?? `star-chart-search-enhancer-${formatTimestampForFilename()}.csv`;
document.body.appendChild(link);
link.click();
link.remove();
@ -183,6 +197,14 @@ function formatTimestampForFilename(): string {
return new Date().toISOString().replace(/[:.]/g, "-");
}
function isExpiredAuthState(authState: AuthStateValue | null): boolean {
const lastError = authState?.lastError;
return (
typeof lastError === "string" &&
(/token/i.test(lastError) || lastError.includes("过期"))
);
}
function installMarketPageBridge(document: Document) {
if (
document.documentElement.querySelector(

View File

@ -0,0 +1,273 @@
import type { MarketRecord } from "./types";
import type {
AudienceProfileDistributionItem,
AudienceProfileResult,
AudienceProfileSuccess
} from "./audience-profile-types";
interface FetchResponseLike {
json(): Promise<unknown>;
ok: boolean;
}
type FetchLike = (
input: string,
init?: RequestInit
) => Promise<FetchResponseLike>;
interface AudienceProfileClientOptions {
baseUrl?: string;
fetchImpl?: FetchLike;
linkType?: number;
timeoutMs?: number;
}
type DistributionSection =
| "age"
| "cityTier"
| "cityTop"
| "crowd"
| "gender"
| "interest"
| "province";
const SECTION_BY_DISPLAY: Array<[RegExp, DistributionSection]> = [
[/性别/, "gender"],
[/年龄/, "age"],
[/省份|全国省份/, "province"],
[/城市分布|地域/, "cityTop"],
[/城市等级/, "cityTier"],
[/兴趣/, "interest"],
[/八大人群/, "crowd"]
];
const GENDER_LABELS: Record<string, string> = {
female: "女性",
male: "男性"
};
const AGE_ORDER = ["18-23", "24-30", "31-40", "41-50", "50+"];
const CITY_TIER_ORDER = ["一线", "新一线", "二线", "三线", "四线", "五线"];
export function createAudienceProfileClient(
options: AudienceProfileClientOptions = {}
) {
const baseUrl = options.baseUrl ?? resolveBaseUrl();
const fetchImpl = options.fetchImpl ?? defaultFetch;
const timeoutMs = options.timeoutMs ?? 8000;
const linkType = options.linkType ?? 1;
return {
async loadAudienceProfile(record: MarketRecord): Promise<AudienceProfileResult> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
try {
const response = await fetchImpl(
buildAudienceProfileUrl(record.authorId, baseUrl, linkType),
{
credentials: "include",
method: "GET",
signal: controller.signal
}
);
if (!response.ok) {
return {
failureReason: "request-failed",
status: "failed"
};
}
return mapAudienceProfileResponse(await response.json());
} catch (error) {
return {
failureReason:
error instanceof Error && error.name === "AbortError"
? "timeout"
: "request-failed",
status: "failed"
};
} finally {
clearTimeout(timeoutId);
}
}
};
}
export function buildAudienceProfileUrl(
authorId: string,
baseUrl: string,
linkType = 1
): string {
const url = new URL("/gw/api/data_sp/author_audience_distribution", baseUrl);
url.searchParams.set("o_author_id", authorId);
url.searchParams.set("platform_source", "1");
url.searchParams.set("platform_channel", "1");
url.searchParams.set("link_type", String(linkType));
return url.toString();
}
export function mapAudienceProfileResponse(
payload: unknown
): AudienceProfileResult {
if (!isRecord(payload) || !Array.isArray(payload.distributions)) {
return {
failureReason: "bad-response",
status: "failed"
};
}
const profile: AudienceProfileSuccess = {
status: "success"
};
payload.distributions.forEach((section) => {
if (!isRecord(section)) {
return;
}
const display = readString(section.type_display);
const sectionName = resolveSection(display);
if (!sectionName || !Array.isArray(section.distribution_list)) {
return;
}
profile[sectionName] = normalizeDistributionItems(
section.distribution_list,
sectionName
);
});
if (Object.keys(profile).length === 1) {
return {
failureReason: "missing-profile",
status: "failed"
};
}
return profile;
}
function normalizeDistributionItems(
rawItems: unknown[],
sectionName: DistributionSection
): AudienceProfileDistributionItem[] {
const parsedItems = rawItems
.map((item) => {
if (!isRecord(item)) {
return null;
}
const key = readString(item.distribution_key);
const value = readNumber(item.distribution_value);
if (!key || value === null) {
return null;
}
return {
label: normalizeLabel(key, sectionName),
rawLabel: key,
value
};
})
.filter((item): item is { label: string; rawLabel: string; value: number } =>
Boolean(item)
);
const total = parsedItems.reduce((sum, item) => sum + item.value, 0);
if (total <= 0) {
return [];
}
return parsedItems
.sort((left, right) => compareDistributionItems(left, right, sectionName))
.map((item) => ({
label: item.label,
value: formatPercent(item.value / total)
}));
}
function compareDistributionItems(
left: { rawLabel: string; value: number },
right: { rawLabel: string; value: number },
sectionName: DistributionSection
): number {
if (sectionName === "age") {
return orderIndex(AGE_ORDER, left.rawLabel) - orderIndex(AGE_ORDER, right.rawLabel);
}
if (sectionName === "cityTier") {
return (
orderIndex(CITY_TIER_ORDER, left.rawLabel) -
orderIndex(CITY_TIER_ORDER, right.rawLabel)
);
}
return right.value - left.value;
}
function orderIndex(order: string[], value: string): number {
const index = order.indexOf(value);
return index === -1 ? order.length : index;
}
function normalizeLabel(label: string, sectionName: DistributionSection): string {
if (sectionName === "gender") {
return GENDER_LABELS[label] ?? label;
}
if (sectionName === "cityTier" && !label.endsWith("城市")) {
return `${label}城市`;
}
return label;
}
function resolveSection(display: string | null): DistributionSection | null {
if (!display) {
return null;
}
return (
SECTION_BY_DISPLAY.find(([pattern]) => pattern.test(display))?.[1] ?? null
);
}
function formatPercent(value: number): string {
const percent = Math.round(value * 1000) / 10;
return `${Number.isInteger(percent) ? percent.toFixed(0) : percent.toFixed(1)}%`;
}
function readString(value: unknown): string | null {
return typeof value === "string" && value.trim() ? value.trim() : null;
}
function readNumber(value: unknown): number | null {
if (typeof value === "number" && Number.isFinite(value)) {
return value;
}
if (typeof value === "string" && value.trim()) {
const numericValue = Number(value);
return Number.isFinite(numericValue) ? numericValue : null;
}
return null;
}
function resolveBaseUrl(): string {
if (typeof location !== "undefined" && location.origin) {
return location.origin;
}
return "https://xingtu.cn";
}
async function defaultFetch(input: string, init?: RequestInit) {
return fetch(input, init);
}
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}

View File

@ -0,0 +1,180 @@
import { escapeCsvCell } from "../../shared/csv";
import {
buildMarketCsvColumns,
type CsvColumn
} from "./csv-exporter";
import type {
AudienceProfileDistributionItem,
AudienceProfileExportRow
} from "./audience-profile-types";
type AudienceProfileCsvColumn = {
header: string;
readValue: (row: AudienceProfileExportRow) => string;
};
const GENDER_LABELS = ["男性", "女性"];
const AGE_LABELS = ["18-23", "24-30", "31-40", "41-50", "50+"];
const PROVINCE_LABELS = [
"北京",
"天津",
"河北",
"山西",
"内蒙古",
"辽宁",
"吉林",
"黑龙江",
"上海",
"江苏",
"浙江",
"安徽",
"福建",
"江西",
"山东",
"河南",
"湖北",
"湖南",
"广东",
"广西",
"海南",
"重庆",
"四川",
"贵州",
"云南",
"西藏",
"陕西",
"甘肃",
"青海",
"宁夏",
"新疆",
"香港",
"澳门",
"台湾"
];
const CITY_TIER_LABELS = [
"一线城市",
"新一线城市",
"二线城市",
"三线城市",
"四线城市",
"五线城市"
];
const CROWD_LABELS = [
"精致妈妈",
"都市银发",
"新锐白领",
"资深中产",
"都市蓝领",
"Z世代",
"小镇中老年",
"小镇青年"
];
export function buildAudienceProfileCsv(
rows: AudienceProfileExportRow[]
): string {
const marketColumns = buildMarketCsvColumns(rows.map((row) => row.record));
const csvColumns = [
...marketColumns.map(toAudienceProfileColumn),
...buildAudienceProfileColumns()
];
const headerLine = csvColumns.map((column) => column.header).join(",");
const rowLines = rows.map((row) =>
csvColumns.map((column) => escapeCsvCell(column.readValue(row))).join(",")
);
return [headerLine, ...rowLines].join("\n");
}
function toAudienceProfileColumn(
column: CsvColumn
): AudienceProfileCsvColumn {
return {
header: column.header,
readValue: (row) => column.readValue(row.record)
};
}
function buildAudienceProfileColumns(): AudienceProfileCsvColumn[] {
return [
{
header: "画像抓取状态",
readValue: (row) => (row.profile.status === "success" ? "成功" : "失败")
},
{
header: "画像失败原因",
readValue: (row) =>
row.profile.status === "failed" ? row.profile.failureReason ?? "" : ""
},
...buildFixedDistributionColumns("连接用户", "gender", GENDER_LABELS),
...buildFixedDistributionColumns("连接用户", "age", AGE_LABELS),
...buildFixedDistributionColumns("省份", "province", PROVINCE_LABELS),
...buildRankedDistributionColumns("地域", "cityTop", 10),
...buildFixedDistributionColumns("城市等级", "cityTier", CITY_TIER_LABELS),
...buildRankedDistributionColumns("兴趣", "interest", 10),
...buildFixedDistributionColumns("八大人群", "crowd", CROWD_LABELS)
];
}
function buildFixedDistributionColumns(
prefix: string,
key: "age" | "cityTier" | "crowd" | "gender" | "province",
labels: string[]
): AudienceProfileCsvColumn[] {
return labels.map((label) => ({
header: `${prefix}-${label}占比`,
readValue: (row) => readDistributionValue(row, key, label)
}));
}
function buildRankedDistributionColumns(
prefix: string,
key: "cityTop" | "interest",
count: number
): AudienceProfileCsvColumn[] {
const columns: AudienceProfileCsvColumn[] = [];
for (let index = 0; index < count; index += 1) {
columns.push(
{
header: `${prefix}TOP${index + 1}名称`,
readValue: (row) => readDistributionItem(row, key, index)?.label ?? ""
},
{
header: `${prefix}TOP${index + 1}占比`,
readValue: (row) => readDistributionItem(row, key, index)?.value ?? ""
}
);
}
return columns;
}
function readDistributionValue(
row: AudienceProfileExportRow,
key: "age" | "cityTier" | "crowd" | "gender" | "province",
label: string
): string {
return readDistributionItems(row, key).find((item) => item.label === label)?.value ?? "";
}
function readDistributionItem(
row: AudienceProfileExportRow,
key: "cityTop" | "interest",
index: number
): AudienceProfileDistributionItem | undefined {
return readDistributionItems(row, key)[index];
}
function readDistributionItems(
row: AudienceProfileExportRow,
key:
| "age"
| "cityTier"
| "cityTop"
| "crowd"
| "gender"
| "interest"
| "province"
): AudienceProfileDistributionItem[] {
return row.profile.status === "success" ? row.profile[key] ?? [] : [];
}

View File

@ -0,0 +1,31 @@
import type { MarketRecord } from "./types";
export interface AudienceProfileDistributionItem {
label: string;
value: string;
}
export interface AudienceProfileSuccess {
age?: AudienceProfileDistributionItem[];
cityTier?: AudienceProfileDistributionItem[];
cityTop?: AudienceProfileDistributionItem[];
crowd?: AudienceProfileDistributionItem[];
gender?: AudienceProfileDistributionItem[];
interest?: AudienceProfileDistributionItem[];
province?: AudienceProfileDistributionItem[];
status: "success";
}
export interface AudienceProfileFailure {
failureReason?: string;
status: "failed";
}
export type AudienceProfileResult =
| AudienceProfileSuccess
| AudienceProfileFailure;
export interface AudienceProfileExportRow {
profile: AudienceProfileResult;
record: MarketRecord;
}

View File

@ -1,6 +1,7 @@
export function renderMarketAuthGate(
document: Document,
currentWindow: Window
currentWindow: Window,
message = "请先登录插件"
): HTMLElement {
const existingGate = document.querySelector(
'[data-market-auth-gate="root"]'
@ -13,10 +14,14 @@ export function renderMarketAuthGate(
const root = document.createElement("section");
root.dataset.marketAuthGate = "root";
root.innerHTML = `
<strong></strong>
<strong></strong>
<p></p>
<button type="button" data-market-auth-help="button"></button>
`;
const title = root.querySelector("strong");
if (title) {
title.textContent = message;
}
root
.querySelector('[data-market-auth-help="button"]')

View File

@ -2,7 +2,7 @@ import { normalizeRateDisplay } from "../../shared/rate-normalizer";
import { escapeCsvCell } from "../../shared/csv";
import type { MarketRecord } from "./types";
type CsvColumn = {
export type CsvColumn = {
header: string;
readValue: (record: MarketRecord) => string;
};
@ -75,8 +75,7 @@ const BACKEND_METRIC_COLUMNS: CsvColumn[] = [
];
export function buildMarketCsv(records: MarketRecord[]): string {
const baseColumns = buildBaseColumns(records);
const csvColumns = [...baseColumns, ...RATE_COLUMNS, ...BACKEND_METRIC_COLUMNS];
const csvColumns = buildMarketCsvColumns(records);
const headerLine = csvColumns.map((column) => column.header).join(",");
const rowLines = records.map((record) =>
csvColumns.map((column) => escapeCsvCell(column.readValue(record))).join(",")
@ -85,7 +84,12 @@ export function buildMarketCsv(records: MarketRecord[]): string {
return [headerLine, ...rowLines].join("\n");
}
function buildBaseColumns(records: MarketRecord[]): CsvColumn[] {
export function buildMarketCsvColumns(records: MarketRecord[]): CsvColumn[] {
const baseColumns = buildBaseColumns(records);
return [...baseColumns, ...RATE_COLUMNS, ...BACKEND_METRIC_COLUMNS];
}
export function buildBaseColumns(records: MarketRecord[]): CsvColumn[] {
const orderedHeaders: string[] = [];
const seenHeaders = new Set<string>();
const excludedHeaders = new Set(["代表视频"]);

View File

@ -1,4 +1,6 @@
import { buildMarketCsv } from "./csv-exporter";
import { buildAudienceProfileCsv } from "./audience-profile-csv";
import { createAudienceProfileClient } from "./audience-profile-client";
import { promptForBatchName } from "./batch-name-dialog";
import { createBatchPayload, type BatchPayload } from "./batch-payload";
import {
@ -27,6 +29,10 @@ import {
type AuthStateValue
} from "../../shared/auth-messages";
import { isBackendMetricsResponseMessage } from "../../shared/backend-metrics-messages";
import type {
AudienceProfileExportRow,
AudienceProfileResult
} from "./audience-profile-types";
import type {
BackendMetrics,
MarketApiResult,
@ -42,9 +48,11 @@ interface MutationObserverLike {
}
export interface CreateMarketControllerOptions {
buildAudienceProfileCsv?: (rows: AudienceProfileExportRow[]) => string;
buildCsv?: (records: MarketRecord[]) => string;
document: Document;
getAuthState?: () => Promise<AuthStateValue>;
loadAudienceProfile?: (record: MarketRecord) => Promise<AudienceProfileResult>;
loadAuthorMetrics?: (authorId: string) => Promise<MarketApiResult>;
searchBackendMetrics?: (starIds: string[]) => Promise<
Array<BackendMetrics & { starId: string }>
@ -52,7 +60,7 @@ export interface CreateMarketControllerOptions {
mutationObserverFactory?: (
callback: MutationCallback
) => MutationObserverLike;
onCsvReady?: (csv: string) => void;
onCsvReady?: (csv: string, filename?: string) => void;
promptBatchName?: () => Promise<string | null> | string | null;
resultStore?: ReturnType<typeof createMarketResultStore>;
submitBatch?: (payload: BatchPayload) => Promise<unknown>;
@ -61,6 +69,7 @@ export interface CreateMarketControllerOptions {
export function createMarketController(options: CreateMarketControllerOptions) {
const marketApiClient = createMarketApiClient();
const audienceProfileClient = createAudienceProfileClient();
const sendRuntimeMessage = createRuntimeMessageSender();
const resultStore = options.resultStore ?? createMarketResultStore();
const loadAuthorMetrics =
@ -69,6 +78,9 @@ export function createMarketController(options: CreateMarketControllerOptions) {
options.searchBackendMetrics ??
(hasRuntimeMessageSender() ? (starIds: string[]) => readBackendMetrics(sendRuntimeMessage, starIds) : null);
const buildCsv = options.buildCsv ?? buildMarketCsv;
const buildAudienceCsv = options.buildAudienceProfileCsv ?? buildAudienceProfileCsv;
const loadAudienceProfile =
options.loadAudienceProfile ?? audienceProfileClient.loadAudienceProfile;
const getAuthState = options.getAuthState ?? (() => readAuthState(sendRuntimeMessage));
const mutationObserverFactory =
options.mutationObserverFactory ??
@ -164,6 +176,61 @@ export function createMarketController(options: CreateMarketControllerOptions) {
setToolbarBusyState(toolbar, false);
}
},
onExportAudienceProfile: async () => {
syncSelectionStateFromDom();
if (selectedAuthorIds.size === 0) {
setToolbarExportStatus(toolbar, "请先勾选需要导出画像的达人");
return;
}
const exportTarget = readToolbarExportTarget(toolbar);
if (!exportTarget.target) {
setToolbarExportStatus(toolbar, exportTarget.error ?? "导出配置无效");
return;
}
setToolbarBusyState(toolbar, true);
try {
const selectedRecords = filterRecordsBySelectionStrict(
await exportRecords(exportTarget.target, "画像导出中", {
showDetailedProgress: false
})
);
if (selectedRecords.length === 0) {
setToolbarExportStatus(toolbar, "当前导出范围内没有选中的达人");
return;
}
const rows: AudienceProfileExportRow[] = [];
for (let index = 0; index < selectedRecords.length; index += 1) {
const record = selectedRecords[index];
setToolbarExportStatus(
toolbar,
`画像导出中 ${index + 1}/${selectedRecords.length}...`
);
const profile = await loadAudienceProfile(record);
rows.push({
profile,
record
});
}
if (rows.every((row) => row.profile.status === "failed")) {
setToolbarExportStatus(toolbar, "画像导出失败,请稍后重试");
return;
}
options.onCsvReady?.(buildAudienceCsv(rows), buildAudienceProfileFilename());
setToolbarExportStatus(toolbar, "");
} catch (error) {
setToolbarExportStatus(
toolbar,
error instanceof Error ? error.message : "画像导出失败,请稍后重试"
);
} finally {
setToolbarBusyState(toolbar, false);
}
},
onSubmitBatch: async () => {
syncSelectionStateFromDom();
const exportTarget = readToolbarExportTarget(toolbar);
@ -562,6 +629,14 @@ export function createMarketController(options: CreateMarketControllerOptions) {
return selectedRecords.length > 0 ? selectedRecords : records;
}
function filterRecordsBySelectionStrict(records: MarketRecord[]): MarketRecord[] {
if (selectedAuthorIds.size === 0) {
return [];
}
return records.filter((record) => selectedAuthorIds.has(record.authorId));
}
async function prepareCurrentPageForExport(): Promise<void> {
await runSyncCycle();
await harvestCurrentPageForExport();
@ -1270,3 +1345,12 @@ function hasRuntimeMessageSender(): boolean {
).chrome?.runtime?.sendMessage
);
}
function buildAudienceProfileFilename(date = new Date()): string {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hour = String(date.getHours()).padStart(2, "0");
const minute = String(date.getMinutes()).padStart(2, "0");
return `达人连接用户画像_${year}${month}${day}_${hour}${minute}.csv`;
}

View File

@ -5,10 +5,12 @@ import type {
export interface PluginToolbarHandlers {
onExport(): Promise<void> | void;
onExportAudienceProfile(): Promise<void> | void;
onSubmitBatch(): Promise<void> | void;
}
export interface PluginToolbarDom {
audienceProfileExportButton: HTMLButtonElement;
batchSubmitButton: HTMLButtonElement;
exportButton: HTMLButtonElement;
exportCustomPagesInput: HTMLInputElement;
@ -67,6 +69,11 @@ export function ensurePluginToolbar(
exportButton.dataset.pluginExport = "button";
exportButton.textContent = "导出CSV";
const audienceProfileExportButton = document.createElement("button");
audienceProfileExportButton.type = "button";
audienceProfileExportButton.dataset.pluginExportAudienceProfile = "button";
audienceProfileExportButton.textContent = "导出画像CSV";
const batchSubmitButton = document.createElement("button");
batchSubmitButton.type = "button";
batchSubmitButton.dataset.pluginBatchSubmit = "button";
@ -80,12 +87,14 @@ export function ensurePluginToolbar(
exportRangeSelect,
exportCustomPagesInput,
exportButton,
audienceProfileExportButton,
batchSubmitButton,
exportStatusText
);
document.body.appendChild(root);
applyNativeControlStyles(document, {
audienceProfileExportButton,
batchSubmitButton,
exportButton,
exportCustomPagesInput,
@ -96,12 +105,16 @@ export function ensurePluginToolbar(
exportButton.addEventListener("click", () => {
void handlers.onExport();
});
audienceProfileExportButton.addEventListener("click", () => {
void handlers.onExportAudienceProfile();
});
batchSubmitButton.addEventListener("click", () => {
void handlers.onSubmitBatch();
});
exportRangeSelect.addEventListener("change", () => {
syncCustomPagesInputVisibility({
batchSubmitButton,
audienceProfileExportButton,
exportButton,
exportCustomPagesInput,
exportRangeSelect,
@ -111,6 +124,7 @@ export function ensurePluginToolbar(
});
const toolbarDom = {
audienceProfileExportButton,
batchSubmitButton,
exportButton,
exportCustomPagesInput,
@ -136,6 +150,9 @@ function appendOption(
function readToolbarDom(root: HTMLElement): PluginToolbarDom {
const toolbarDom = {
audienceProfileExportButton: root.querySelector(
'[data-plugin-export-audience-profile="button"]'
) as HTMLButtonElement,
batchSubmitButton: root.querySelector(
'[data-plugin-batch-submit="button"]'
) as HTMLButtonElement,
@ -218,6 +235,7 @@ export function setToolbarBusyState(
): void {
[
toolbar.batchSubmitButton,
toolbar.audienceProfileExportButton,
toolbar.exportButton,
toolbar.exportRangeSelect,
toolbar.exportCustomPagesInput
@ -414,6 +432,7 @@ function applyToolbarRootStyles(root: HTMLElement): void {
function applyNativeControlStyles(
document: Document,
controls: {
audienceProfileExportButton: HTMLButtonElement;
batchSubmitButton: HTMLButtonElement;
exportButton: HTMLButtonElement;
exportCustomPagesInput: HTMLInputElement;
@ -430,10 +449,15 @@ function applyNativeControlStyles(
if (nativeButton) {
controls.exportButton.className = nativeButton.className;
controls.audienceProfileExportButton.className = nativeButton.className;
controls.batchSubmitButton.className = nativeButton.className;
}
[controls.exportButton, controls.batchSubmitButton].forEach((button) => {
[
controls.exportButton,
controls.audienceProfileExportButton,
controls.batchSubmitButton
].forEach((button) => {
applyPrimaryButtonStyles(button);
button.style.whiteSpace = "nowrap";
});
@ -484,12 +508,14 @@ function ensurePluginActionButtonTheme(document: Document): void {
style.id = PLUGIN_ACTION_BUTTON_STYLE_ID;
style.textContent = `
[data-plugin-export="button"]:hover:not(:disabled),
[data-plugin-export-audience-profile="button"]:hover:not(:disabled),
[data-plugin-batch-submit="button"]:hover:not(:disabled) {
background-color: #6d1627 !important;
border-color: #6d1627 !important;
}
[data-plugin-export="button"]:active:not(:disabled),
[data-plugin-export-audience-profile="button"]:active:not(:disabled),
[data-plugin-batch-submit="button"]:active:not(:disabled) {
background-color: #58111f !important;
border-color: #58111f !important;
@ -497,12 +523,14 @@ function ensurePluginActionButtonTheme(document: Document): void {
}
[data-plugin-export="button"]:focus-visible,
[data-plugin-export-audience-profile="button"]:focus-visible,
[data-plugin-batch-submit="button"]:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(127, 29, 45, 0.2) !important;
}
[data-plugin-export="button"]:disabled,
[data-plugin-export-audience-profile="button"]:disabled,
[data-plugin-batch-submit="button"]:disabled {
background-color: #c89ca4 !important;
border-color: #c89ca4 !important;

View File

@ -0,0 +1,119 @@
import { describe, expect, test, vi } from "vitest";
import {
createAudienceProfileClient,
mapAudienceProfileResponse
} from "../src/content/market/audience-profile-client";
describe("audience-profile-client", () => {
test("loads connection user audience distributions from Xingtu", async () => {
const fetchImpl = vi.fn(async () => ({
json: async () => buildAudiencePayload(),
ok: true
}));
const client = createAudienceProfileClient({
baseUrl: "https://www.xingtu.cn",
fetchImpl,
timeoutMs: 1000
});
const result = await client.loadAudienceProfile({
authorId: "7294473194298146854",
authorName: "奇奇de海洋",
status: "success"
});
expect(fetchImpl).toHaveBeenCalledWith(
"https://www.xingtu.cn/gw/api/data_sp/author_audience_distribution?o_author_id=7294473194298146854&platform_source=1&platform_channel=1&link_type=1",
expect.objectContaining({
credentials: "include",
method: "GET"
})
);
expect(result).toEqual(
expect.objectContaining({
status: "success",
gender: [
{ label: "男性", value: "71.7%" },
{ label: "女性", value: "28.3%" }
],
cityTop: expect.arrayContaining([{ label: "广州", value: "30.4%" }])
})
);
});
test("maps Xingtu audience distribution payload into named profile sections", () => {
const result = mapAudienceProfileResponse(buildAudiencePayload());
expect(result).toEqual(
expect.objectContaining({
status: "success",
age: [
{ label: "18-23", value: "20%" },
{ label: "24-30", value: "30%" },
{ label: "31-40", value: "50%" }
],
province: [
{ label: "广东", value: "60%" },
{ label: "浙江", value: "40%" }
],
cityTier: [{ label: "一线城市", value: "100%" }],
interest: [{ label: "随拍", value: "100%" }],
crowd: [{ label: "都市蓝领", value: "100%" }]
})
);
});
});
function buildAudiencePayload() {
return {
base_resp: {
status_code: 0,
status_message: ""
},
distributions: [
{
distribution_list: [
{ distribution_key: "male", distribution_value: 717 },
{ distribution_key: "female", distribution_value: 283 }
],
type_display: "性别分布"
},
{
distribution_list: [
{ distribution_key: "31-40", distribution_value: 50 },
{ distribution_key: "18-23", distribution_value: 20 },
{ distribution_key: "24-30", distribution_value: 30 }
],
type_display: "年龄分布"
},
{
distribution_list: [
{ distribution_key: "浙江", distribution_value: 40 },
{ distribution_key: "广东", distribution_value: 60 }
],
type_display: "省份分布"
},
{
distribution_list: [
{ distribution_key: "广州", distribution_value: 304 },
{ distribution_key: "北京", distribution_value: 291 },
{ distribution_key: "上海", distribution_value: 405 }
],
type_display: "城市分布"
},
{
distribution_list: [{ distribution_key: "一线", distribution_value: 1 }],
type_display: "城市等级分布"
},
{
distribution_list: [{ distribution_key: "随拍", distribution_value: 1 }],
type_display: "兴趣分布"
},
{
distribution_list: [{ distribution_key: "都市蓝领", distribution_value: 1 }],
type_display: "八大人群分布"
}
]
};
}

View File

@ -0,0 +1,72 @@
import { describe, expect, test } from "vitest";
import { buildAudienceProfileCsv } from "../src/content/market/audience-profile-csv";
import type { AudienceProfileExportRow } from "../src/content/market/audience-profile-types";
describe("audience-profile-csv", () => {
test("appends structured audience profile columns after the market export columns", () => {
const csv = buildAudienceProfileCsv([
{
profile: {
age: [{ label: "31-40", value: "50%" }],
cityTier: [{ label: "一线城市", value: "100%" }],
cityTop: [{ label: "广州", value: "30.4%" }],
crowd: [{ label: "都市蓝领", value: "100%" }],
gender: [
{ label: "男性", value: "71.7%" },
{ label: "女性", value: "28.3%" }
],
interest: [{ label: "随拍", value: "100%" }],
province: [{ label: "广东", value: "60%" }],
status: "success"
},
record: {
authorId: "123",
authorName: "达人 A",
exportFields: {
: "达人 A",
: "300w"
},
status: "success"
}
}
] satisfies AudienceProfileExportRow[]);
const [headerLine, rowLine] = csv.split("\n");
expect(headerLine).toContain("达人信息,连接用户数");
expect(headerLine).toContain("画像抓取状态");
expect(headerLine).toContain("连接用户-男性占比");
expect(headerLine).toContain("连接用户-31-40占比");
expect(headerLine).toContain("省份-广东占比");
expect(headerLine).toContain("地域TOP1名称,地域TOP1占比");
expect(headerLine).toContain("城市等级-一线城市占比");
expect(headerLine).toContain("兴趣TOP1名称,兴趣TOP1占比");
expect(headerLine).toContain("八大人群-都市蓝领占比");
expect(rowLine).toContain("成功");
expect(rowLine).toContain("71.7%");
expect(rowLine).toContain("广州,30.4%");
expect(rowLine).toContain("随拍,100%");
});
test("keeps failed profile rows and marks their failure reason", () => {
const csv = buildAudienceProfileCsv([
{
profile: {
failureReason: "request-failed",
status: "failed"
},
record: {
authorId: "123",
authorName: "达人 A",
status: "success"
}
}
] satisfies AudienceProfileExportRow[]);
const [, rowLine] = csv.split("\n");
expect(rowLine).toContain("失败");
expect(rowLine).toContain("request-failed");
});
});

View File

@ -21,6 +21,27 @@ describe("background-auth-controller", () => {
);
});
test("returns unauthenticated state when the access token cannot be read", async () => {
const controller = createAuthController({
authClient: {
getAccessToken: vi.fn(async () => {
throw new Error("token expired");
}),
getIdTokenClaims: vi.fn(),
isAuthenticated: vi.fn(async () => true),
signIn: vi.fn(),
signOut: vi.fn()
}
});
await expect(controller.getAuthState()).resolves.toEqual(
expect.objectContaining({
isAuthenticated: false,
lastError: "token expired"
})
);
});
test("delegates sign in to the auth client", async () => {
const signIn = vi.fn(async () => undefined);
const controller = createAuthController({

View File

@ -24,4 +24,24 @@ describe("market-auth-gating", () => {
expect(createMarketController).not.toHaveBeenCalled();
expect(document.body.textContent).toContain("请先登录插件");
});
test("shows an expired login message when auth state reports a token error", async () => {
document.body.innerHTML = "<div></div>";
await bootContentScript({
createMarketController: vi.fn(),
document,
sendAuthMessage: vi.fn(async () => ({
ok: true,
type: "auth:state",
value: {
isAuthenticated: false,
lastError: "token expired"
}
})),
window
});
expect(document.body.textContent).toContain("登录已过期,请重新登录");
});
});

View File

@ -209,6 +209,46 @@ describe("market-content-entry", () => {
expect(revokeObjectURL).toHaveBeenCalledWith("blob:test-url");
});
test("booted export callback can download a custom csv filename", async () => {
const createMarketController = vi.fn(() => ({
ready: Promise.resolve()
}));
let clickedDownload: { download: string; href: string } | null = null;
vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
this: HTMLAnchorElement
) {
clickedDownload = {
download: this.download,
href: this.href
};
});
window.history.replaceState({}, "", "/ad/creator/market");
Object.defineProperty(window.URL, "createObjectURL", {
configurable: true,
value: vi.fn(() => "blob:test-url")
});
Object.defineProperty(window.URL, "revokeObjectURL", {
configurable: true,
value: vi.fn()
});
const { bootContentScript } = await import("../src/content/index");
await bootContentScript({
createMarketController,
sendAuthMessage: vi.fn(async () => ({
ok: true,
type: "auth:state",
value: { isAuthenticated: true }
}))
});
const controllerOptions = createMarketController.mock.calls[0]?.[0];
controllerOptions.onCsvReady("列1,列2\n值1,值2", "达人连接用户画像_20260518_1530.csv");
expect(clickedDownload?.download).toBe("达人连接用户画像_20260518_1530.csv");
});
test("booted export callback sends the csv to extension runtime when available", async () => {
const createMarketController = vi.fn(() => ({
ready: Promise.resolve()
@ -245,6 +285,7 @@ describe("market-content-entry", () => {
expect(sendMessage).toHaveBeenCalledWith(
expect.objectContaining({
csv: "列1,列2\n值1,值2",
filename: expect.stringMatching(/^star-chart-search-enhancer-/),
type: "download-market-csv"
})
);
@ -284,6 +325,9 @@ describe("market-content-entry", () => {
expect(document.body.firstElementChild).not.toBe(toolbar);
expect(document.querySelector('[data-plugin-export-range="select"]')).not.toBeNull();
expect(document.querySelector('[data-plugin-export="button"]')).not.toBeNull();
expect(
document.querySelector('[data-plugin-export-audience-profile="button"]')
).not.toBeNull();
expect(document.querySelector('[data-plugin-batch-submit="button"]')).not.toBeNull();
expect(document.querySelector('[data-plugin-export-status="text"]')).not.toBeNull();
@ -293,10 +337,15 @@ describe("market-content-entry", () => {
const batchSubmitButton = document.querySelector(
'[data-plugin-batch-submit="button"]'
) as HTMLButtonElement | null;
const audienceProfileExportButton = document.querySelector(
'[data-plugin-export-audience-profile="button"]'
) as HTMLButtonElement | null;
expect(exportButton?.style.backgroundColor).toBe("rgb(127, 29, 45)");
expect(batchSubmitButton?.style.backgroundColor).toBe("rgb(127, 29, 45)");
expect(audienceProfileExportButton?.style.backgroundColor).toBe("rgb(127, 29, 45)");
expect(exportButton?.style.color).toBe("rgb(255, 255, 255)");
expect(batchSubmitButton?.style.color).toBe("rgb(255, 255, 255)");
expect(audienceProfileExportButton?.style.color).toBe("rgb(255, 255, 255)");
});
test("remounts the plugin action bar when the native market action row appears later", async () => {
@ -1535,6 +1584,92 @@ describe("market-content-entry", () => {
]);
});
test("audience profile export requires selected creators", async () => {
document.body.innerHTML = buildRealMarketFixture([
{ authorId: "111", authorName: "达人 A", price21To60s: "¥11,000" }
]);
const buildAudienceProfileCsv = vi.fn(() => "profile-csv");
const loadAudienceProfile = vi.fn();
const { createMarketController } = await import("../src/content/market/index");
const controller = trackController(createMarketController({
buildAudienceProfileCsv,
document,
loadAudienceProfile,
loadAuthorMetrics: async () => ({
success: false,
reason: "request-failed"
}),
onCsvReady: vi.fn(),
window
}));
await controller.ready;
setSelectValue('[data-plugin-export-range="select"]', "current");
dispatchChange('[data-plugin-export-range="select"]');
click('[data-plugin-export-audience-profile="button"]');
await flush();
expect(loadAudienceProfile).not.toHaveBeenCalled();
expect(buildAudienceProfileCsv).not.toHaveBeenCalled();
expect(
document.querySelector('[data-plugin-export-status="text"]')?.textContent
).toContain("请先勾选需要导出画像的达人");
});
test("audience profile export loads profiles only for selected creators", async () => {
document.body.innerHTML = buildRealMarketFixture([
{ authorId: "111", authorName: "达人 A", price21To60s: "¥11,000" },
{ authorId: "222", authorName: "达人 B", price21To60s: "¥22,000" }
]);
const buildAudienceProfileCsv = vi.fn(() => "profile-csv");
const loadAudienceProfile = vi.fn(async () => ({
gender: [{ label: "男性", value: "60%" }],
status: "success" as const
}));
const onCsvReady = vi.fn();
const { createMarketController } = await import("../src/content/market/index");
const controller = trackController(createMarketController({
buildAudienceProfileCsv,
document,
loadAudienceProfile,
loadAuthorMetrics: async () => ({
success: false,
reason: "request-failed"
}),
onCsvReady,
window
}));
await controller.ready;
clickSelectionCheckboxForAuthor("222");
setSelectValue('[data-plugin-export-range="select"]', "current");
dispatchChange('[data-plugin-export-range="select"]');
click('[data-plugin-export-audience-profile="button"]');
await waitForMockCall(buildAudienceProfileCsv, 40, 50);
expect(loadAudienceProfile).toHaveBeenCalledTimes(1);
expect(loadAudienceProfile).toHaveBeenCalledWith(
expect.objectContaining({ authorId: "222" })
);
expect(buildAudienceProfileCsv).toHaveBeenCalledWith([
{
profile: {
gender: [{ label: "男性", value: "60%" }],
status: "success"
},
record: expect.objectContaining({ authorId: "222" })
}
]);
expect(onCsvReady).toHaveBeenCalledWith(
"profile-csv",
expect.stringMatching(/^达人连接用户画像_\d{8}_\d{4}\.csv$/)
);
});
test(
"selected export keeps a generic loading status while exporting the default paged range",
async () => {