yanjie/eskin-data-analysis
9
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

first commit

Browse Source
This commit is contained in:
lennlouisgeek
2026-04-16 01:55:55 +08:00
commit ccfc77b734
18 changed files with 30087 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.gitignore vendored Normal file
View File

@@ -0,0 +1,9 @@
# Generated by Cargo
# will have compiled files and executables
/target
.DS_Store
# These are backup files generated by rustfmt
**/*.rs.bk
/.idea
/.vscode

265
AGENTS.md Normal file
View File

@@ -0,0 +1,265 @@
You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone
Provide concise code examples with detailed descriptions
# Dioxus Dependency
You can add Dioxus to your `Cargo.toml` like this:
```toml
[dependencies]
dioxus = { version = "0.7.1" }
[features]
default = ["web", "webview", "server"]
web = ["dioxus/web"]
webview = ["dioxus/desktop"]
server = ["dioxus/server"]
```
# Launching your application
You need to create a main function that sets up the Dioxus runtime and mounts your root component.
```rust
use dioxus::prelude::*;
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
rsx! { "Hello, Dioxus!" }
}
```
Then serve with `dx serve`:
```sh
curl -sSL http://dioxus.dev/install.sh | sh
dx serve
```
# UI with RSX
```rust
rsx! {
div {
class: "container", // Attribute
color: "red", // Inline styles
width: if condition { "100%" }, // Conditional attributes
"Hello, Dioxus!"
}
// Prefer loops over iterators
for i in 0..5 {
div { "{i}" } // use elements or components directly in loops
}
if condition {
div { "Condition is true!" } // use elements or components directly in conditionals
}
{children} // Expressions are wrapped in brace
{(0..5).map(|i| rsx! { span { "Item {i}" } })} // Iterators must be wrapped in braces
}
```
# Assets
The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project.
```rust
rsx! {
img {
src: asset!("/assets/image.png"),
alt: "An image",
}
}
```
## Styles
The `document::Stylesheet` component will inject the stylesheet into the `<head>` of the document
```rust
rsx! {
document::Stylesheet {
href: asset!("/assets/styles.css"),
}
}
```
# Components
Components are the building blocks of apps
* Component are functions annotated with the `#[component]` macro.
* The function name must start with a capital letter or contain an underscore.
* A component re-renders only under two conditions:
1. Its props change (as determined by `PartialEq`).
2. An internal reactive state it depends on is updated.
```rust
#[component]
fn Input(mut value: Signal<String>) -> Element {
rsx! {
input {
value,
oninput: move |e| {
*value.write() = e.value();
},
onkeydown: move |e| {
if e.key() == Key::Enter {
value.write().clear();
}
},
}
}
}
```
Each component accepts function arguments (props)
* Props must be owned values, not references. Use `String` and `Vec<T>` instead of `&str` or `&[T]`.
* Props must implement `PartialEq` and `Clone`.
* To make props reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` props will automatically re-run when the prop changes.
# State
A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun.
## Local State
The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value.
Use `use_memo` to create a memoized value that recalculates when its dependencies change. Memos are useful for expensive calculations that you don't want to repeat unnecessarily.
```rust
#[component]
fn Counter() -> Element {
let mut count = use_signal(|| 0);
let mut doubled = use_memo(move || count() * 2); // doubled will re-run when count changes because it reads the signal
rsx! {
h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal
h2 { "Doubled: {doubled}" }
button {
onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter
"Increment"
}
button {
onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal
"Increment with with_mut"
}
}
}
```
## Context API
The Context API allows you to share state down the component tree. A parent provides the state using `use_context_provider`, and any child can access it with `use_context`
```rust
#[component]
fn App() -> Element {
let mut theme = use_signal(|| "light".to_string());
use_context_provider(|| theme); // Provide a type to children
rsx! { Child {} }
}
#[component]
fn Child() -> Element {
let theme = use_context::<Signal<String>>(); // Consume the same type
rsx! {
div {
"Current theme: {theme}"
}
}
}
```
# Async
For state that depends on an asynchronous operation (like a network request), Dioxus provides a hook called `use_resource`. This hook manages the lifecycle of the async task and provides the result to your component.
* The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated
* The `Resource` object returned can be in several states when read:
1. `None` if the resource is still loading
2. `Some(value)` if the resource has successfully loaded
```rust
let mut dog = use_resource(move || async move {
// api request
});
match dog() {
Some(dog_info) => rsx! { Dog { dog_info } },
None => rsx! { "Loading..." },
}
```
# Routing
All possible routes are defined in a single Rust `enum` that derives `Routable`. Each variant represents a route and is annotated with `#[route("/path")]`. Dynamic Segments can capture parts of the URL path as parameters by using `:name` in the route string. These become fields in the enum variant.
The `Router<Route> {}` component is the entry point that manages rendering the correct component for the current URL.
You can use the `#[layout(NavBar)]` to create a layout shared between pages and place an `Outlet<Route> {}` inside your layout component. The child routes will be rendered in the outlet.
```rust
#[derive(Routable, Clone, PartialEq)]
enum Route {
#[layout(NavBar)] // This will use NavBar as the layout for all routes
#[route("/")]
Home {},
#[route("/blog/:id")] // Dynamic segment
BlogPost { id: i32 },
}
#[component]
fn NavBar() -> Element {
rsx! {
a { href: "/", "Home" }
Outlet<Route> {} // Renders Home or BlogPost
}
}
#[component]
fn App() -> Element {
rsx! { Router::<Route> {} }
}
```
```toml
dioxus = { version = "0.7.1", features = ["router"] }
```
# Fullstack
Fullstack enables server rendering and ipc calls. It uses Cargo features (`server` and a client feature like `web`) to split the code into a server and client binaries.
```toml
dioxus = { version = "0.7.1", features = ["fullstack"] }
```
## Server Functions
Use the `#[post]` / `#[get]` macros to define an `async` function that will only run on the server. On the server, this macro generates an API endpoint. On the client, it generates a function that makes an HTTP request to that endpoint.
```rust
#[post("/api/double/:path/&query")]
async fn double_server(number: i32, path: String, query: i32) -> Result<i32, ServerFnError> {
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
Ok(number * 2)
}
```
## Hydration
Hydration is the process of making a server-rendered HTML page interactive on the client. The server sends the initial HTML, and then the client-side runs, attaches event listeners, and takes control of future rendering.
### Errors
The initial UI rendered by the component on the client must be identical to the UI rendered on the server.
* Use the `use_server_future` hook instead of `use_resource`. It runs the future on the server, serializes the result, and sends it to the client, ensuring the client has the data immediately for its first render.
* Any code that relies on browser-specific APIs (like accessing `localStorage`) must be run *after* hydration. Place this code inside a `use_effect` hook.

7488
Cargo.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
Cargo.toml Normal file
View File

@@ -0,0 +1,19 @@
[package]
name = "eskin-data-analysis"
version = "0.1.0"
authors = ["lennlouisgeek <lennlouisgeek@gmail.com>"]
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
dioxus = { version = "0.7.1", features = ["router"] }
futures = "0.3.32"
polars = { version="0.53.0", features = ["lazy", "csv"] }
rfd = { version = "0.17.2" }
[features]
default = ["desktop"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]

21
Dioxus.toml Normal file
View File

@@ -0,0 +1,21 @@
[application]
[web.app]
# HTML title tag content
title = "eskin-data-analysis"
# include `assets` in web platform
[web.resource]
# Additional CSS style files
style = []
# Additional JavaScript files
script = []
[web.resource.dev]
# Javascript code file
# serve: [dev-server] only
script = []

28
README.md Normal file
View File

@@ -0,0 +1,28 @@
# Development
Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
```
project/
├─ assets/ # Any assets that are used by the app should be placed here
├─ src/
│ ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
```
### Serving Your App
Run the following command in the root of your project to start developing with the default platform:
```bash
dx serve
```
To run for a different platform, use the `--platform platform` flag. E.g.
```bash
dx serve --platform desktop
```

21564
assets/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

20
assets/header.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

46
assets/main.css Normal file
View File

@@ -0,0 +1,46 @@
/* App-wide styling */
body {
background-color: #0f1116;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
#hero {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#links {
width: 400px;
text-align: left;
font-size: x-large;
color: white;
display: flex;
flex-direction: column;
}
#links a {
color: white;
text-decoration: none;
margin-top: 20px;
margin: 10px 0px;
border: white 1px solid;
border-radius: 5px;
padding: 10px;
}
#links a:hover {
background-color: #1f1f1f;
cursor: pointer;
}
#header {
max-width: 1200px;
}

225
assets/tailwind.css Normal file
View File

@@ -0,0 +1,225 @@
/*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--spacing: 0.25rem;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
@layer utilities {
.visible {
visibility: visible;
}
.relative {
position: relative;
}
.container {
width: 100%;
@media (width >= 40rem) {
max-width: 40rem;
}
@media (width >= 48rem) {
max-width: 48rem;
}
@media (width >= 64rem) {
max-width: 64rem;
}
@media (width >= 80rem) {
max-width: 80rem;
}
@media (width >= 96rem) {
max-width: 96rem;
}
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.pt-0 {
padding-top: calc(var(--spacing) * 0);
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
}
}
}

8
clippy.toml Normal file
View File

@@ -0,0 +1,8 @@
await-holding-invalid-types = [
"generational_box::GenerationalRef",
{ path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
"generational_box::GenerationalRefMut",
{ path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
"dioxus_signals::WriteLock",
{ path = "dioxus_signals::WriteLock", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
]

197
src/components/filters_rate_threshold.rs Normal file
View File

@@ -0,0 +1,197 @@
use dioxus::{Ok, html::{div, script::r#async, text}, prelude::*};
use dioxus::prelude::*;
use crate::guide_router::Route;
use rfd::AsyncFileDialog;
use polars::prelude::*;
const RATE_LABELS: [i32; 11] = [60, 160, 260, 360, 460, 560, 660, 860, 1060, 1560, 2060];
#[derive(Clone, Copy)]
pub struct FilterRateThresholdState {
pub thresholds: Signal<Vec<f32>>,
}
#[component]
pub fn FilterRateThreshold() -> Element {
let mut state = use_context::<FilterRateThresholdState>();
let mut navigator = use_navigator();
rsx! {
div { class: "section",
div { class: "container",
div { class: "card",
div { class: "card-header",
p { class: "card-header-title", "过滤阈值配置" }
}
div { class: "card-content",
p { class: "subtitle is-6 has-text-grey",
"支持手动输入、CSV 导入，后续可扩展其他输入方式。"
}
// 手动输入
div { class: "box",
h2 { class: "title is-6 mb-4", "手动输入" }
div { class: "columns is-multiline",
for (index , label) in RATE_LABELS.iter().enumerate() {
div { class: "column is-half",
ThresholdField { label: *label, index }
}
}
}
}
// 数据导入
div { class: "box",
h2 { class: "title is-6 mb-4", "数据导入" }
div { class: "buttons",
button {
class: "button is-primary",
onclick: move |_| {
load_csv_data(&mut state.thresholds);
},
span { class: "icon",
i { class: "fas fa-file-import" }
}
span { "导入 CSV" }
}
button {
class: "button is-link is-light",
onclick: move |_| {
paste_data(state.thresholds);
},
"批量粘贴"
}
button {
class: "button is-light",
onclick: move |_| {
navigator.go_back();
}, // navigator.go_back();, // back();,
"返回"
}
}
}
// 当前预览
div { class: "box",
h2 { class: "title is-6 mb-4", "当前预览" }
div { class: "content",
ul {
for (index , label) in RATE_LABELS.iter().enumerate() {
li {
strong { "{label}: " }
"{state.thresholds.read()[index]}"
}
}
}
}
}
}
}
}
}
}
}
#[component]
pub fn ThresholdField(label: i32, index: usize) -> Element {
let mut state = use_context::<FilterRateThresholdState>();
rsx! {
div { class: "field",
label { class: "label", "{label}" }
div { class: "control",
input {
class: "input is-info",
r#type: "text",
placeholder: "输入阈值",
value: "{state.thresholds.read()[index]}",
oninput: move |evt| {
// state.thresholds.write()[index] = evt as i32;
if let Ok(v) = evt.value().parse::<f32>() {
state.thresholds.write()[index] = v;
}
},
}
}
}
}
}
#[derive(Debug, Clone)]
struct SmoothRateConfig {
thresholds: Vec<f32>,
rates: Vec<f32>,
file_path: Vec<String>,
}
impl Default for SmoothRateConfig {
fn default() -> Self {
SmoothRateConfig { thresholds: Vec::new(), rates: Vec::new(), file_path: Vec::new() }
}
}
impl SmoothRateConfig {
fn new(ths: Vec<f32>, files: Vec<String>) -> Self {
if ths.len() != 11 {
return SmoothRateConfig::default();
}
let rates = ths.chunks(2)
.map(|ck| ck[1] - ck[0]).collect::<Vec<f32>>();
SmoothRateConfig { thresholds: ths, rates, file_path: files }
}
fn analysis_file_once(file: &str) -> PolarsResult<()> {
let df = LazyCsvReader::new(file.into())
.with_has_header(true)
.finish()?
.collect()?;
let df = df.with_column(
(1..=84).map(|i| {
let name = format!("channel{}", i);
})
)
}
fn analysis_col_once(name: &str, thresholds: &[f32], rates: &[f32]) -> Expr {
}
}
fn load_csv_data(thresholds: &mut Signal<Vec<f32>>) {
let task = rfd::AsyncFileDialog::new()
.add_filter("CSV", &["csv"])
.pick_files();
execute(async {
let file_handles = task.await;
if let Some(files) = file_handles {
for file in files {
let path = file.path();
}
}
});
}
fn paste_data(thresholds: Signal<Vec<f32>>) {
todo!()
}
use std::{fs::FileTimes, future::Future};
#[cfg(not(target_arch = "wasm32"))]
fn execute<F: Future<Output = ()> + Send + 'static>(f: F) {
// this is stupid... use any executor of your choice instead
std::thread::spawn(move || futures::executor::block_on(f));
}
#[cfg(target_arch = "wasm32")]
fn execute<F: Future<Output = ()> + 'static>(f: F) {
wasm_bindgen_futures::spawn_local(f);
}

134
src/components/main_page.rs Normal file
View File

@@ -0,0 +1,134 @@
use dioxus::prelude::*;
use crate::guide_router::Route;
#[component]
pub fn MainPage() -> Element {
rsx! {
div { class: "main-page",
// 顶部欢迎区
section { class: "hero is-light",
div { class: "hero-body",
div { class: "container",
h1 { class: "title is-3", "数据处理工具" }
p { class: "subtitle is-6 has-text-grey",
"请选择一个功能模块进入。后续可扩展更多输入方式、分析页面和配置页面。"
}
}
}
}
// 功能卡片区
section { class: "section",
div { class: "container",
div { class: "columns is-multiline",
FeatureCard {
title: "阈值清洗",
subtitle: "配置过滤阈值、手动输入参数、调整分段规则。",
button_text: "进入页面",
button_class: "button is-primary",
// on_click: move || {
// // 这里你自己接路由
// println!("go to threshold page");
// },
to: Route::FilterRateThreshold,
// Outlet::<Route> {}
}
// FeatureCard {
// title: "数据导入",
// subtitle: "从 CSV 或其他来源导入数据，后续可扩展批量粘贴和模板导入。",
// button_text: "进入页面",
// button_class: "button is-link",
// on_click: move || {
// println!("go to import page");
// },
// }
// FeatureCard {
// title: "结果分析",
// subtitle: "查看过滤结果、统计信息和图表分析。",
// button_text: "进入页面",
// button_class: "button is-info",
// on_click: move || {
// println!("go to analysis page");
// },
// }
// FeatureCard {
// title: "模板管理",
// subtitle: "保存和复用常用参数模板，减少重复配置。",
// button_text: "进入页面",
// button_class: "button is-warning",
// on_click: move || {
// println!("go to template page");
// },
// }
// FeatureCard {
// title: "系统设置",
// subtitle: "统一管理默认参数、界面选项和运行配置。",
// button_text: "进入页面",
// button_class: "button is-dark",
// on_click: move || {
// println!("go to settings page");
// },
// }
// FeatureCard {
// title: "帮助说明",
// subtitle: "查看输入格式说明、参数定义和使用文档。",
// button_text: "进入页面",
// button_class: "button is-light",
// on_click: move || {
// println!("go to help page");
// },
// }
}
}
}
// 底部说明区
section { class: "section pt-0",
div { class: "container",
div { class: "notification is-light",
p { class: "has-text-grey",
"建议从“阈值配置”或“数据导入”开始。主页仅作为导航入口，具体路由逻辑可在外层统一处理。"
}
}
}
}
}
}
}
#[derive(Props, Clone, PartialEq)]
pub struct FeatureCardProps {
title: String,
subtitle: String,
button_text: String,
button_class: String,
to: Route,
}
#[component]
fn FeatureCard(props: FeatureCardProps) -> Element {
rsx! {
div { class: "column is-4",
div { class: "card",
div { class: "card-content",
h2 { class: "title is-5", "{props.title}" }
p { class: "has-text-grey", "{props.subtitle}" }
}
footer { class: "card-footer",
div { class: "card-footer-item",
Link {
to: props.to.clone(),
class: "{props.button_class}",
"{props.button_text}"
}
}
}
}
}
}
}

2
src/components/mod.rs Normal file
View File

@@ -0,0 +1,2 @@
pub mod filters_rate_threshold;
pub mod main_page;

12
src/guide_router.rs Normal file
View File

@@ -0,0 +1,12 @@
use crate::components::{main_page::MainPage,
filters_rate_threshold::FilterRateThreshold,
};
use dioxus::prelude::*;
#[derive(Routable, Clone, PartialEq)]
pub enum Route {
#[route("/")]
MainPage,
#[route("/filter_rate_threshold")]
FilterRateThreshold,
}

48
src/main.rs Normal file
View File

@@ -0,0 +1,48 @@
pub mod components;
pub mod guide_router;
use dioxus::{html::{div, text}, prelude::*};
use dioxus::prelude::*;
const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/bulma.css");
const HEADER_SVG: Asset = asset!("/assets/header.svg");
use crate::components::filters_rate_threshold::{FilterRateThreshold, FilterRateThresholdState};
use crate::guide_router::Route;
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
let thresholds = use_signal(|| vec![0.0; 11]);
use_context_provider(|| FilterRateThresholdState { thresholds });
rsx! {
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "stylesheet", href: MAIN_CSS }
// // Hero {}
// FilterRateThreshold {}
Router::<Route> {}
}
}
#[component]
pub fn Hero() -> Element {
rsx! {
div { id: "hero",
img { src: HEADER_SVG, id: "header" }
div { id: "links",
a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus",
"💫 VSCode Extension"
}
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
}
}
}
}

1
tailwind.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";