+
handleSliderChange('min', +e.target.value)}
+ onMouseUp={handleMouseUp}
+ onTouchEnd={handleMouseUp}
+ className='thumb thumb--left'
+ style={{ zIndex: minValIndex > discreteValues.length - 3 ? 5 : 4 }}
+ />
+
handleSliderChange('max', +e.target.value)}
+ onMouseUp={handleMouseUp}
+ onTouchEnd={handleMouseUp}
+ className='thumb thumb--right'
+ />
+
+
+
+
+ {/* 添加离散标记点 */}
+
+ {discreteValues.map((_, index) => (
+
= minValIndex && index <= maxValIndex ? 'active' : ''}`}
+ style={{ left: `${getPercent(index)}%` }}
+ />
+ ))}
+
+
+
+ {marks.map((mark, index) => (
+ {mark}
+ ))}
+
+ {/* 显示当前选中的值 */}
+ {/*
+
+ {formatValue(discreteValues[minValIndex])}
+
+
+ {formatValue(discreteValues[maxValIndex])}
+
+
*/}
+
+ );
+}
diff --git a/src/main.jsx b/src/main.jsx
index 4b0e5e2..9d6d39f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-import '../src/styles/custom-theme.scss';
+import './styles/global.scss';
import './index.css';
import App from './App.jsx';
diff --git a/src/pages/Database.jsx b/src/pages/Database.jsx
new file mode 100644
index 0000000..2aa575c
--- /dev/null
+++ b/src/pages/Database.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import DatabaseFilter from '../components/DatabaseFilter';
+import DatabaseList from '../components/DatabaseList';
+import { Link } from 'react-router-dom';
+export default function Database({ path }) {
+ return (
+
+
+
Creator Database
+
{path}
+
+ );
+}
diff --git a/src/router/index.jsx b/src/router/index.jsx
index 171e2cf..ab85bab 100644
--- a/src/router/index.jsx
+++ b/src/router/index.jsx
@@ -1,6 +1,7 @@
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from '../pages/Home';
-import BootstrapLayout from '../components/Layout';
+import Database from '../pages/Database';
+import MainLayout from '../components/MainLayout';
// Routes configuration object
const routes = [
@@ -17,19 +18,19 @@ const routes = [
children: [
{
path: '',
- element:
,
+ element:
,
},
{
path: 'tiktok',
- element:
,
+ element:
,
},
{
path: 'instagram',
- element:
,
+ element:
,
},
{
path: 'youtube',
- element:
,
+ element:
,
},
],
},
@@ -59,7 +60,7 @@ const routes = [
const router = createBrowserRouter([
{
path: '/',
- element:
,
+ element:
,
children: routes,
},
]);
diff --git a/src/styles/DatabaseFilter.scss b/src/styles/DatabaseFilter.scss
new file mode 100644
index 0000000..57c9a90
--- /dev/null
+++ b/src/styles/DatabaseFilter.scss
@@ -0,0 +1,106 @@
+@import './custom-theme.scss';
+
+.filter-card {
+ border-radius: 12px;
+ border: none;
+ overflow: hidden;
+ background-color: #fff;
+
+ .card-body {
+ padding: 1.5rem;
+
+ .filter-item {
+ display: flex;
+ align-items: flex-start;
+ margin-bottom: 1.5rem;
+
+ .filter-title {
+ width: 170px;
+ margin: 0;
+ color: $gray-500;
+ }
+
+ .filter-options {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ flex: 1;
+
+ &.filter-views {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 1rem;
+ .range-input {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .input-group {
+ flex: 1;
+ max-width: 150px;
+ }
+
+ span {
+ padding: 0 5px;
+ color: $gray-600;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ h3 {
+ font-weight: 600;
+ font-size: 1.5rem;
+ color: $dark;
+ }
+
+ h5 {
+ font-weight: 500;
+ font-size: 1rem;
+ color: $dark;
+ }
+
+ .btn-light {
+ background-color: #f5f5f5;
+ border-color: transparent;
+ color: $gray-800;
+ font-size: 0.875rem;
+
+ &:hover {
+ border-color: transparent;
+ background-color: #eee;
+ color: $primary;
+ }
+ }
+
+ .btn-primary {
+ font-size: 0.875rem;
+ font-weight: 500;
+ }
+
+ .form-control {
+ border-color: #e2e8f0;
+
+ &:focus {
+ border-color: $primary;
+ box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+ }
+ }
+
+ .input-group-text {
+ background-color: #f8f9fa;
+ border-color: #e2e8f0;
+ }
+}
+
+// 圆角标签样式
+.rounded-pill {
+ padding: 0.375rem 1rem;
+ transition: all 0.2s ease;
+
+ &.btn-primary {
+ box-shadow: 0 2px 5px rgba($primary, 0.3);
+ }
+}
\ No newline at end of file
diff --git a/src/styles/RangeSlider.scss b/src/styles/RangeSlider.scss
new file mode 100644
index 0000000..59ef848
--- /dev/null
+++ b/src/styles/RangeSlider.scss
@@ -0,0 +1,214 @@
+@import './custom-theme.scss';
+
+$primary: #6366f1; // 使用与主题一致的颜色
+
+.range-slider {
+ width: 70%;
+ position: relative;
+ padding: 0.5rem 10px 0;
+
+ .range-slider-marks {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ font-size: 0.75rem;
+ color: #6c757d;
+ position: absolute;
+ width: 100%;
+ left: 10px;
+ }
+
+ .slider-container {
+ position: relative;
+ width: 100%;
+ height: 50px;
+ }
+
+ .slider {
+ position: relative;
+ width: 100%;
+ height: 5px;
+
+ &__track {
+ position: absolute;
+ width: 100%;
+ height: 5px;
+ border-radius: 3px;
+ background-color: #e9ecef;
+ }
+
+ &__range {
+ position: absolute;
+ height: 5px;
+ border-radius: 3px;
+ background-color: #6366f1;
+ }
+
+ &__steps {
+ position: absolute;
+ width: 100%;
+ height: 5px;
+
+ .slider__step {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background-color: #e9ecef;
+ top: -2.5px;
+ margin-left: -5px;
+ z-index: 1;
+ border: 1px solid #adb5bd;
+ transition: all 0.2s ease;
+
+ &.active {
+ background-color: #6366f1;
+ border-color: #6366f1;
+ transform: scale(1.2);
+ }
+ }
+ }
+
+ &__values {
+ position: absolute;
+ width: 100%;
+ top: 25px;
+
+ .slider__value-left,
+ .slider__value-right {
+ position: absolute;
+ transform: translateX(-50%);
+ font-size: 0.75rem;
+ color: white;
+ background-color: #6366f1;
+ padding: 2px 6px;
+ border-radius: 10px;
+ white-space: nowrap;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s ease;
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid #6366f1;
+ }
+ }
+ }
+ }
+
+ .thumb {
+ position: absolute;
+ height: 0;
+ width: 100%;
+ outline: none;
+ z-index: 3;
+ appearance: none;
+ pointer-events: none;
+ left: 0;
+
+ &::-webkit-slider-thumb {
+ appearance: none;
+ pointer-events: all;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: white;
+ border: 2px solid #6366f1;
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: #6366f1;
+ transform: scale(1.1);
+ }
+
+ &:active {
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+ transform: scale(1.15);
+ }
+ }
+
+ &::-moz-range-thumb {
+ appearance: none;
+ pointer-events: all;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: white;
+ border: 2px solid #6366f1;
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ transition: all 0.2s ease;
+
+ &:hover {
+ background-color: #6366f1;
+ transform: scale(1.1);
+ }
+
+ &:active {
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+ transform: scale(1.15);
+ }
+ }
+ }
+}
+
+/* Removing the default appearance */
+.thumb,
+.thumb::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.thumb {
+ pointer-events: none;
+ position: absolute;
+ height: 0;
+ width: 100%;
+ outline: none;
+}
+
+.thumb--left {
+ z-index: 3;
+}
+
+.thumb--right {
+ z-index: 4;
+}
+
+/* For Chrome browsers */
+.thumb::-webkit-slider-thumb {
+ background-color: #fff;
+ border: 2px solid $primary;
+ border-radius: 50%;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+ margin-top: 4px;
+ pointer-events: all;
+ position: relative;
+}
+
+/* For Firefox browsers */
+.thumb::-moz-range-thumb {
+ background-color: #fff;
+ border: 2px solid $primary;
+ border-radius: 50%;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+ height: 20px;
+ width: 20px;
+ margin-top: 4px;
+ pointer-events: all;
+ position: relative;
+}
diff --git a/src/styles/custom-theme.scss b/src/styles/custom-theme.scss
index 7e8859e..106009f 100644
--- a/src/styles/custom-theme.scss
+++ b/src/styles/custom-theme.scss
@@ -29,6 +29,27 @@ $box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
// 导入Bootstrap
@import 'bootstrap/scss/bootstrap';
+:root {
+ --bs-breadcrumb-font-size: 1.5rem;
+ --bs-body-color: #171A1FFF;
+ --bs-btn-color: white;
+ --bs-btn-hover-color: white;
+
+}
+
+.btn-primary {
+ --bs-btn-color: white !important;
+ --bs-btn-hover-color: white !important;
+}
+
+
#root {
background-color: #f5f3ff;
}
+
+a {
+ text-decoration: none !important;
+ &:hover {
+ text-decoration: none !important;
+ }
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..58e25d0
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,7 @@
+@import 'custom-theme.scss';
+
+.breadcrumb {
+ a {
+ color: var(--bs-body-color) !important;
+ }
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index ca81003..36627b6 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -103,7 +103,7 @@
// Adjust main content when sidebar is present
.main-content {
- padding: 1rem;
+ padding: 1.5rem;
margin: 1rem;
margin-left: 220px;
height: 100vh;