+
@@ -17,7 +17,7 @@ export default function Database({ path }) {
{path === 'youtube' &&
YouTube
}
-
-
+
+
);
}
diff --git a/src/pages/PrivateCreator.jsx b/src/pages/PrivateCreator.jsx
index f87d371..f20ba87 100644
--- a/src/pages/PrivateCreator.jsx
+++ b/src/pages/PrivateCreator.jsx
@@ -2,24 +2,23 @@ import React from 'react';
import SearchBar from '../components/SearchBar';
import { Button } from 'react-bootstrap';
import DatabaseFilter from '../components/DatabaseFilter';
-import CreatorList from '../components/CreatorList';
+import PrivateCreatorList from '../components/PrivateCreatorList';
export default function PrivateCreator({ path }) {
-
return (
-
-
-
-
-
-
-
Private Creators
- {path === 'tiktok' &&
TikTok
}
- {path === 'instagram' &&
Instagram
}
- {path === 'youtube' &&
YouTube
}
-
+
+
+
+
+
+
+
Private Creators
+ {path === 'tiktok' &&
TikTok
}
+ {path === 'instagram' &&
Instagram
}
+ {path === 'youtube' &&
YouTube
}
+
+
+
+
);
}
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..50fac2c
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,61 @@
+import axios from 'axios';
+
+const api = axios.create({
+ baseURL: '/api',
+ withCredentials: true, // Include cookies if needed
+});
+
+api.interceptors.request.use(
+ (config) => {
+ const token = sessionStorage.getItem('token') || '03d9163150a8bfbbee2a33c4444237f337a35278';
+ if (token) {
+ config.headers.Authorization = `Token ${token}`;
+ }
+ return config;
+ },
+ (error) => {
+ console.error('Request error:', error);
+ return Promise.reject(error);
+ }
+);
+
+api.interceptors.response.use(
+ (response) => {
+ return response;
+ },
+ (error) => {
+ return Promise.reject(error);
+ }
+);
+
+const get = async (url, params) => {
+ const response = await api.get(url, params);
+ return response.data;
+};
+
+const post = async (url, data) => {
+ const response = await api.post(url, data);
+ return response.data;
+};
+
+const put = async (url, data) => {
+ const response = await api.put(url, data);
+ return response.data;
+};
+
+const del = async (url) => {
+ const response = await api.delete(url);
+ return response.data;
+};
+
+const upload = async (url, data) => {
+ const response = await api.post(url, data, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ });
+ return response.data;
+};
+
+
+export default { get, post, put, del, upload };
diff --git a/src/store/slices/creatorsSlice.js b/src/store/slices/creatorsSlice.js
index 302be93..76c3ea4 100644
--- a/src/store/slices/creatorsSlice.js
+++ b/src/store/slices/creatorsSlice.js
@@ -1,4 +1,5 @@
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import api from '../../services/api';
const mockVideos = [
{
id: 1,
@@ -32,12 +33,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=1',
category: 'Phones & Electronics',
- ecommerceLevel: 'L2',
- exposureLevel: 'KOC-1',
+ e_commerce_level: 'L2',
+ exposure_level: 'KOC-1',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: true,
hasTiktok: true,
verified: true,
@@ -49,12 +50,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=2',
category: 'Womenswear & Underwear',
- ecommerceLevel: 'L3',
- exposureLevel: 'KOL-3',
+ e_commerce_level: 'L3',
+ exposure_level: 'KOL-3',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: false,
hasTiktok: true,
verified: false,
@@ -66,12 +67,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=3',
category: 'Sports & Outdoor',
- ecommerceLevel: 'L4',
- exposureLevel: 'KOC-2',
+ e_commerce_level: 'L4',
+ exposure_level: 'KOC-2',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: true,
hasTiktok: true,
verified: false,
@@ -83,12 +84,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=4',
category: 'Food & Beverage',
- ecommerceLevel: 'L1',
- exposureLevel: 'KOC-2',
+ e_commerce_level: 'L1',
+ exposure_level: 'KOC-2',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: true,
hasTiktok: true,
hasInstagram: true,
@@ -102,12 +103,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=5',
category: 'Health',
- ecommerceLevel: 'L5',
- exposureLevel: 'KOL-2',
+ e_commerce_level: 'L5',
+ exposure_level: 'KOL-2',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: false,
hasTiktok: true,
hasInstagram: true,
@@ -121,12 +122,12 @@ export const mockCreators = [
name: 'name',
avatar: 'https://api.dicebear.com/7.x/micah/svg?seed=6',
category: 'Kitchenware',
- ecommerceLevel: 'New tag',
- exposureLevel: 'New tag',
+ e_commerce_level: 'New tag',
+ exposure_level: 'New tag',
followers: '162.2k',
gmv: '$534.1k',
soldPercentage: '18.1%',
- avgViews: '1.9k',
+ avg_video_views: '1.9k',
hasEcommerce: true,
hasTiktok: true,
hasInstagram: true,
@@ -138,66 +139,110 @@ export const mockCreators = [
];
// 模拟API获取数据的异步Thunk
-export const fetchCreators = createAsyncThunk('creators/fetchCreators', async ({ path }, { getState }) => {
- // 模拟API调用延迟
- await new Promise((resolve) => setTimeout(resolve, 500));
+// export const fetchCreators = createAsyncThunk('creators/fetchCreators', async ({ path }, { getState }) => {
+// // 模拟API调用延迟
+// await new Promise((resolve) => setTimeout(resolve, 500));
- // 获取当前的筛选条件
- const state = getState();
- const filters = state.filters;
+// // 获取当前的筛选条件
+// const state = getState();
+// const filters = state.filters;
- // 应用筛选逻辑（实际项目中可能在服务器端进行）
- let filteredCreators = [...mockCreators];
+// // 应用筛选逻辑（实际项目中可能在服务器端进行）
+// let filteredCreators = [...mockCreators];
- // 如果有选定的类别，进行筛选
- if (filters.category.length > 0) {
- filteredCreators = filteredCreators.filter((creator) => filters.category.includes(creator.category));
- }
+// // 如果有选定的类别，进行筛选
+// if (filters.category.length > 0) {
+// filteredCreators = filteredCreators.filter((creator) => filters.category.includes(creator.category));
+// }
- // 如果有选定的电商评级，进行筛选
- if (filters.ecommerceRatings.length > 0) {
- filteredCreators = filteredCreators.filter((creator) =>
- filters.ecommerceRatings.includes(creator.ecommerceLevel)
- );
- }
+// // 如果有选定的电商评级，进行筛选
+// if (filters.ecommerceRatings.length > 0) {
+// filteredCreators = filteredCreators.filter((creator) =>
+// filters.ecommerceRatings.includes(creator.e_commerce_level)
+// );
+// }
- // 如果有选定的曝光评级，进行筛选
- if (filters.exposureRatings.length > 0) {
- filteredCreators = filteredCreators.filter((creator) =>
- filters.exposureRatings.includes(creator.exposureLevel)
- );
- }
+// // 如果有选定的曝光评级，进行筛选
+// if (filters.exposureRatings.length > 0) {
+// filteredCreators = filteredCreators.filter((creator) =>
+// filters.exposureRatings.includes(creator.exposure_level)
+// );
+// }
- // 筛选观看量范围
- if (filters.viewsRange.length === 2) {
- const minViews = filters.viewsRange[0];
- const maxViews = filters.viewsRange[1];
+// // 筛选观看量范围
+// if (filters.viewsRange.length === 2) {
+// const minViews = filters.viewsRange[0];
+// const maxViews = filters.viewsRange[1];
- filteredCreators = filteredCreators.filter((creator) => {
- // 将带k的字符串转换为数字
- const viewsStr = creator.avgViews;
- let views = parseFloat(viewsStr);
- if (viewsStr.includes('k')) {
- views *= 1000;
- } else if (viewsStr.includes('M')) {
- views *= 1000000;
- }
+// filteredCreators = filteredCreators.filter((creator) => {
+// // 将带k的字符串转换为数字
+// const viewsStr = creator.avg_video_views;
+// let views = parseFloat(viewsStr);
+// if (viewsStr.includes('k')) {
+// views *= 1000;
+// } else if (viewsStr.includes('M')) {
+// views *= 1000000;
+// }
- return views >= minViews && views <= maxViews;
- });
- }
+// return views >= minViews && views <= maxViews;
+// });
+// }
- return filteredCreators;
-});
+// return filteredCreators;
+// });
const initialState = {
- creators: [],
+ publicCreators: [],
+ privateCreators: [],
+ publicTiktokCreators: [],
+ publicInstagramCreators: [],
+ publicYoutubeCreators: [],
+ privateTiktokCreators: [],
+ privateInstagramCreators: [],
+ privateYoutubeCreators: [],
status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
error: null,
selectedCreators: [],
selectedCreator: null,
+ pagination: {
+ current_page: 1,
+ total_pages: 0,
+ total_count: 0,
+ has_next: false,
+ has_prev: false,
+ },
+ hasMore: true,
+ isLoadingMore: false,
};
+export const fetchCreators = createAsyncThunk('creators/fetchCreators', async ({ path, page = 1 }, { getState }) => {
+ const state = getState();
+ const filters = state.filters;
+
+ const response = await api.get(`/daren_detail/public/creators`, { params: { page } });
+ return response;
+});
+
+export const fetchPrivateCreators = createAsyncThunk(
+ 'creators/fetchPrivateCreators',
+ async ({ path, page = 1 }, { getState }) => {
+ const state = getState();
+ const filters = state.filters;
+
+ const queryParams = { pool_id: 1, page };
+ const response = await api.get(`/daren_detail/private/pools/creators`, { params: queryParams });
+ return response;
+ }
+);
+
+export const fetchCreatorDetail = createAsyncThunk(
+ 'creators/fetchCreatorDetail',
+ async ({ creatorId }, { getState }) => {
+ const response = await api.get(`/daren_detail/creators/${creatorId}`);
+ return response;
+ }
+);
+
const creatorsSlice = createSlice({
name: 'creators',
initialState,
@@ -218,32 +263,92 @@ const creatorsSlice = createSlice({
clearCreatorSelection: (state) => {
state.selectedCreators = [];
},
- selectCreator: (state, action) => {
- const id = action.payload;
- state.selectedCreator = state.creators.find((creator) => creator.id.toString() === id.toString());
- },
clearCreator: (state) => {
state.selectedCreator = null;
},
+ resetCreators: (state) => {
+ state.publicCreators = [];
+ state.privateCreators = [];
+ state.pagination = initialState.pagination;
+ state.hasMore = true;
+ state.isLoadingMore = false;
+ },
},
extraReducers: (builder) => {
builder
.addCase(fetchCreators.pending, (state) => {
- state.status = 'loading';
+ if (state.creators.length === 0) {
+ state.status = 'loading';
+ } else {
+ state.isLoadingMore = true;
+ }
})
.addCase(fetchCreators.fulfilled, (state, action) => {
state.status = 'succeeded';
- state.creators = action.payload;
+ state.isLoadingMore = false;
+ const { data, pagination } = action.payload;
+
+ if (pagination.current_page === 1) {
+ state.publicCreators = data;
+ } else {
+ state.publicCreators = [...state.publicCreators, ...data];
+ }
+ state.pagination = pagination;
+ state.hasMore = pagination.has_next;
})
.addCase(fetchCreators.rejected, (state, action) => {
- console.log(action);
+ state.status = 'failed';
+ state.isLoadingMore = false;
+ state.error = action.error.message;
+ })
+ .addCase(fetchPrivateCreators.pending, (state) => {
+ if (state.creators?.length === 0) {
+ state.status = 'loading';
+ } else {
+ state.isLoadingMore = true;
+ }
+ })
+ .addCase(fetchPrivateCreators.fulfilled, (state, action) => {
+ state.status = 'succeeded';
+ state.isLoadingMore = false;
+ const { data, pagination } = action.payload;
+
+ if (pagination.current_page === 1) {
+ state.privateCreators = data;
+ } else {
+ state.privateCreators = [...state.privateCreators, ...data];
+ }
+ state.pagination = pagination;
+ state.hasMore = pagination.has_next;
+ })
+ .addCase(fetchPrivateCreators.rejected, (state, action) => {
+ console.log('fetchPrivateCreators.rejected', action);
+ state.status = 'failed';
+ state.isLoadingMore = false;
+ state.error = action.error.message;
+ })
+ .addCase(fetchCreatorDetail.pending, (state) => {
+ state.status = 'loading';
+ })
+ .addCase(fetchCreatorDetail.fulfilled, (state, action) => {
+ state.status = 'succeeded';
+ const { data, pagination } = action.payload;
+ state.selectedCreator = data;
+ })
+ .addCase(fetchCreatorDetail.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
},
});
-export const { toggleCreatorSelection, selectAllCreators, clearCreatorSelection, selectCreator, clearCreator } =
- creatorsSlice.actions;
+export const {
+ toggleCreatorSelection,
+ selectAllCreators,
+ clearCreatorSelection,
+ clearCreator,
+ setCreators,
+ resetCreators,
+} = creatorsSlice.actions;
export default creatorsSlice.reducer;
diff --git a/src/styles/CreatorDiscovery.scss b/src/styles/CreatorDiscovery.scss
index 802f161..504d786 100644
--- a/src/styles/CreatorDiscovery.scss
+++ b/src/styles/CreatorDiscovery.scss
@@ -53,6 +53,9 @@
}
.creator-detail-page {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: 1rem;
.creator-info-detail-container {
display: flex;
flex-direction: row;
@@ -78,6 +81,7 @@
height: 115px;
border-radius: 50%;
overflow: hidden;
+ background-color: $secondary-200;
}
.creator-info-right {
display: flex;
@@ -108,6 +112,28 @@
.creator-info-value {
}
}
+ .category-info {
+ .creator-info-value {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: 0.5rem;
+ }
+ }
+ .collab-info {
+ .creator-info-value {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: 0.5rem;
+ }
+ }
+ .badge {
+ padding: 6px 8px;
+ border-radius: 12px;
+ color: $neutral-600;
+ background-color: $neutral-200;
+ font-size: 0.875rem;
+ font-weight: 500;
+ }
}
.creator-info-3 {
display: flex;
@@ -117,6 +143,7 @@
display: flex;
flex-flow: row nowrap;
color: $neutral-900;
+ align-items: center;
gap: 0.5rem;
.creator-info-label {
@@ -202,10 +229,10 @@
color: $neutral-900;
margin-bottom: 1rem;
}
- // canvas {
- // max-width: 260px;
- // max-height: 260px;
- // }
+ canvas {
+ max-width: 280px;
+ max-height: 200px;
+ }
}
}
}
@@ -267,6 +294,8 @@
flex-flow: column nowrap;
justify-content: space-between;
canvas {
+ max-width: 280px;
+ max-height: 200px;
}
}
}
@@ -290,7 +319,7 @@
display: flex;
flex-flow: column nowrap;
gap: 0.5rem;
- font-size: .875rem;
+ font-size: 0.875rem;
.video-title {
font-weight: 700;
text-overflow: ellipsis;
@@ -312,7 +341,6 @@
align-items: center;
}
}
-
}
}
}
diff --git a/src/styles/DatabaseList.scss b/src/styles/DatabaseList.scss
index fcb1d00..b30be13 100644
--- a/src/styles/DatabaseList.scss
+++ b/src/styles/DatabaseList.scss
@@ -3,17 +3,28 @@
// 导入变量
@import './variables';
+.database-page {
+ height: 100%;
+ position: relative;
+}
+.private-creator-page {
+ height: 100%;
+ position: relative;
+}
.creator-database-table {
+ height: 100%;
+ position: relative;
+
.creator-cell {
.creator-avatar {
position: relative;
- width: 36px;
- height: 36px;
margin-right: 12px;
+ flex-shrink: 0;
img {
- width: 100%;
- height: 100%;
+ display: block;
+ width: 36px;
+ height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e2e8f0;
@@ -37,7 +48,8 @@
.creator-name {
font-weight: 700;
- color: #090909
+ color: #090909;
+ white-space: nowrap;
}
}
@@ -132,4 +144,22 @@
color: #000000;
}
}
+
+ .table-container {
+ position: relative;
+ max-height: calc(100% - 455px); // Adjust this value based on your layout
+ overflow-y: auto;
+
+ .sticky-header {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ background: white;
+
+ th {
+ background: white;
+ border-bottom: 2px solid #dee2e6;
+ }
+ }
+ }
}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 52d8502..598c310 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -31,4 +31,11 @@
.btn {
display: inline-flex !important;
align-items: center;
+}
+.back-button {
+ width: max-content;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 2062263..7283c26 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -151,6 +151,7 @@
transition: all 0.3s ease;
background: #f8f9fa;
border-radius: 8px;
+ overflow: hidden;
}
// Collapsed sidebar adjustments
diff --git a/vite.config.js b/vite.config.js
index 531f180..484893d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,26 +1,37 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
// https://vite.dev/config/
-export default defineConfig({
- plugins: [react()],
- resolve: {
- alias: {
- '@': path.resolve(__dirname, './src'),
- },
- },
- css: {
- preprocessorOptions: {
- scss: {
- quietDeps: true,
- outputStyle: 'compressed',
+export default defineConfig(({ mode }) => {
+ const env = loadEnv(mode, process.cwd());
+ return {
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
},
},
- devSourcemap: false,
- },
- build: {
- cssCodeSplit: false,
- minify: true,
- },
+ css: {
+ preprocessorOptions: {
+ scss: {
+ quietDeps: true,
+ outputStyle: 'compressed',
+ },
+ },
+ devSourcemap: false,
+ },
+ build: {
+ cssCodeSplit: false,
+ minify: true,
+ },
+ server: {
+ proxy: {
+ '/api': {
+ target: env.VITE_API_URL || 'http://81.69.223.133:8008',
+ changeOrigin: true,
+ },
+ },
+ },
+ };
});
+ {creator.status && }
+