rust/dx-admin-template
1
0
Fork 0
mirror of https://github.com/mztlive/dx-admin-template.git synced 2025-12-22 21:59:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix bug

Browse Source
This commit is contained in:
tommy
2025-11-05 17:09:20 +08:00
parent 7b53288c76
commit 09e96859d6
5 changed files with 152 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
assets/styling/admin.css
View File

@@ -252,6 +252,56 @@
gap: 12px; gap: 12px;
} }
.orders-date-trigger {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0.55rem 0.9rem;
border-radius: calc(var(--radius) - 1px);
border: 1px solid hsl(var(--border));
background-color: hsl(var(--background));
color: hsl(var(--foreground));
box-shadow: inset 0 1px 0 hsl(var(--background));
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
font-size: 0.95rem;
}
.orders-date-trigger:hover {
border-color: hsl(var(--ring));
background-color: hsl(var(--muted));
}
.orders-date-trigger-text {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orders-date-trigger-icon {
font-size: 0.95rem;
opacity: 0.7;
}
.orders-date-popover {
padding: 12px;
min-width: 320px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.orders-date-actions {
display: flex;
justify-content: flex-end;
}
.orders-empty { .orders-empty {
padding: 60px 20px; padding: 60px 20px;
text-align: center; text-align: center;

3
assets/styling/shadcn.css
View File

@@ -1376,7 +1376,8 @@
.ui-date-range-calendars { .ui-date-range-calendars {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); min-width: 460px;
grid-template-columns: repeat(2, minmax(220px, 1fr));
} }
.ui-date-range-calendars > .ui-date-range-calendar { .ui-date-range-calendars > .ui-date-range-calendar {

37
src/components/ui/popover.rs
View File

@@ -13,20 +13,43 @@ pub fn Popover(
class: "ui-popover-trigger", class: "ui-popover-trigger",
style: "position: relative; display: inline-flex; align-items: center;", style: "position: relative; display: inline-flex; align-items: center;",
onmousedown: move |_| open.set(!open()), onmousedown: move |_| open.set(!open()),
tabindex: 0,
onfocusout: move |_| open.set(false),
{trigger} {trigger}
if open() { if open() {
div {
style: "position: fixed; inset: 0; z-index: 40; background: transparent; pointer-events: auto;",
onmousedown: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
onwheel: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
ontouchmove: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
}
div { div {
class: "ui-popover", class: "ui-popover",
"data-placement": placement.clone(), "data-placement": placement.clone(),
style: match placement.as_str() { style: match placement.as_str() {
"top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem);", "top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem); z-index: 50;",
"bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);", "bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem); z-index: 50;",
"left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%);", "left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%); z-index: 50;",
"right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%);", "right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%); z-index: 50;",
_ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);" _ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem); z-index: 50;"
}, },
onmousedown: move |event| event.stop_propagation(),
onclick: move |event| event.stop_propagation(), onclick: move |event| event.stop_propagation(),
{content} {content}
} }

23
src/components/ui/select.rs
View File

@@ -44,10 +44,25 @@ pub fn Select(
div { div {
class: "ui-select", class: "ui-select",
"data-disabled": disabled, "data-disabled": disabled,
onfocusout: { if open() {
let mut signal = open.clone(); div {
move |_| signal.set(false) style: "position: fixed; inset: 0; z-index: 20; background: transparent;",
}, onmousedown: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
ontouchstart: {
let mut open_signal = open.clone();
move |event| {
event.stop_propagation();
open_signal.set(false);
}
},
}
}
button { button {
class: "ui-select-trigger", class: "ui-select-trigger",
"data-open": if open() { "true" } else { "false" }, "data-open": if open() { "true" } else { "false" },

58
src/views/orders.rs
View File

@@ -1,8 +1,8 @@
use crate::components::ui::{ use crate::components::ui::{
Avatar, Badge, BadgeVariant, Button, ButtonSize, ButtonVariant, Card, CardContent, Avatar, Badge, BadgeVariant, Button, ButtonSize, ButtonVariant, Card, CardContent,
CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRange, DateRangePicker, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRange, DateRangePicker,
Input, Label, Pagination, Select, SelectOption, Slider, Switch, Table, TableBody, TableCell, Input, Label, Pagination, Popover, Select, SelectOption, Slider, Switch, Table, TableBody,
TableHead, TableHeader, TableRow, ToggleGroup, ToggleGroupItem, ToggleGroupMode, TableCell, TableHead, TableHeader, TableRow, ToggleGroup, ToggleGroupItem, ToggleGroupMode,
}; };
use chrono::NaiveDate; use chrono::NaiveDate;
use dioxus::prelude::*; use dioxus::prelude::*;
@@ -551,6 +551,23 @@ pub fn Orders() -> Element {
let min_total_value = min_total(); let min_total_value = min_total();
let flagged_only_value = flagged_only(); let flagged_only_value = flagged_only();
let date_range_selected = date_range(); let date_range_selected = date_range();
let date_range_label = date_range_selected
.map(|range| {
let start = range.start.format("%Y-%m-%d");
let end = range.end.format("%Y-%m-%d");
if range.start == range.end {
format!("{}", start)
} else {
format!("{} → {}", start, end)
}
})
.unwrap_or_else(|| "选择日期范围".to_string());
let date_range_helper = date_range_selected
.map(|range| {
let span = (range.end - range.start).num_days().abs() + 1;
format!("覆盖 {} 天，点击可修改", span)
})
.unwrap_or_else(|| "未限制下单日期".to_string());
let pipeline_values = pipeline(); let pipeline_values = pipeline();
let pipeline_value = pipeline_values let pipeline_value = pipeline_values
.first() .first()
@@ -822,13 +839,40 @@ pub fn Orders() -> Element {
} }
div { class: "ui-stack", style: "gap: 0.5rem;", div { class: "ui-stack", style: "gap: 0.5rem;",
Label { "下单日期" } Label { "下单日期" }
DateRangePicker { Popover {
value: date_range.clone(), placement: "bottom".to_string(),
on_change: { trigger: rsx! {
let mut setter = date_range.clone(); button {
move |range: Option<DateRange>| setter.set(range) class: "orders-date-trigger",
r#type: "button",
span { class: "orders-date-trigger-text", "{date_range_label}" }
span { class: "orders-date-trigger-icon", "📅" }
}
},
content: rsx! {
div { class: "orders-date-popover",
DateRangePicker {
value: date_range.clone(),
on_change: {
let mut setter = date_range.clone();
move |range: Option<DateRange>| setter.set(range)
},
}
div { class: "orders-date-actions",
Button {
variant: ButtonVariant::Ghost,
size: ButtonSize::Sm,
on_click: {
let mut setter = date_range.clone();
move |_| setter.set(None)
},
"清除日期"
}
}
}
}, },
} }
span { class: "ui-field-helper", "{date_range_helper}" }
} }
div { class: "ui-stack", style: "gap: 0.5rem;", div { class: "ui-stack", style: "gap: 0.5rem;",
Label { "订单金额 (¥)" } Label { "订单金额 (¥)" }