rust/r-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
Plucky
2022-10-16 18:01:49 +08:00
parent 074b21affe
commit 99f3f71461
6 changed files with 110 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/index.html vendored
View File

@@ -6,14 +6,14 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<title>Dashboard</title> <title>Dashboard</title>
<link rel="preload" href="/r-dashboard-b0c35e8e84272a79_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/r-dashboard-afab67e69775a76a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/r-dashboard-b0c35e8e84272a79.js"></head> <link rel="modulepreload" href="/r-dashboard-afab67e69775a76a.js"></head>
<body> <body>
<div id="main"></div> <div id="main"></div>
<div class="lg:hidden bg-black"></div> <div class="lg:hidden bg-black"></div>
<script type="module">import init from '/r-dashboard-b0c35e8e84272a79.js';init('/r-dashboard-b0c35e8e84272a79_bg.wasm');</script><script>(function () { <script type="module">import init from '/r-dashboard-afab67e69775a76a.js';init('/r-dashboard-afab67e69775a76a_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

22
dist/r-dashboard-b0c35e8e84272a79.js → dist/r-dashboard-afab67e69775a76a.js vendored
View File

@@ -1026,24 +1026,24 @@ imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
imports.wbg.__wbindgen_throw = function(arg0, arg1) { imports.wbg.__wbindgen_throw = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1)); throw new Error(getStringFromWasm0(arg0, arg1));
}; };
imports.wbg.__wbindgen_closure_wrapper6679 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper6804 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 726, __wbg_adapter_18); const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10290 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10415 = function(arg0, arg1, arg2) {
const ret = makeClosure(arg0, arg1, 778, __wbg_adapter_21); const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10292 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10417 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 780, __wbg_adapter_24); const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper10845 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper10970 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 888, __wbg_adapter_27); const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper11694 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper11819 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 923, __wbg_adapter_30); const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@@ -1080,7 +1080,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('r-dashboard-b0c35e8e84272a79_bg.wasm', import.meta.url); input = new URL('r-dashboard-afab67e69775a76a_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/r-dashboard-b0c35e8e84272a79_bg.wasm → dist/r-dashboard-afab67e69775a76a_bg.wasm vendored
View File

Binary file not shown.

33
dist/style.css vendored
View File

@@ -885,6 +885,14 @@ select {
margin-top: 2.5rem; margin-top: 2.5rem;
} }
.ml-8 {
margin-left: 2rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mb-3 { .mb-3 {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@@ -917,10 +925,6 @@ select {
margin-left: 1rem; margin-left: 1rem;
} }
.mt-1 {
margin-top: 0.25rem;
}
.mt-3 { .mt-3 {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
@@ -989,6 +993,10 @@ select {
height: 3rem; height: 3rem;
} }
.h-3 {
height: 0.75rem;
}
.h-48 { .h-48 {
height: 12rem; height: 12rem;
} }
@@ -997,10 +1005,6 @@ select {
height: 2.5rem; height: 2.5rem;
} }
.h-3 {
height: 0.75rem;
}
.h-4 { .h-4 {
height: 1rem; height: 1rem;
} }
@@ -1037,14 +1041,14 @@ select {
width: 3rem; width: 3rem;
} }
.w-10 {
width: 2.5rem;
}
.w-3 { .w-3 {
width: 0.75rem; width: 0.75rem;
} }
.w-10 {
width: 2.5rem;
}
.w-4 { .w-4 {
width: 1rem; width: 1rem;
} }
@@ -1087,6 +1091,11 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 { .scale-95 {
--tw-scale-x: .95; --tw-scale-x: .95;
--tw-scale-y: .95; --tw-scale-y: .95;

8
readme.md
View File

@@ -1,5 +1,9 @@
# v-dashboard ui wasm # v-dashboard ui wasm
by rust + dioxus + tailwind
by rust + dioxus + tailwindcss
参考vue项目: 参考vue项目:
https://github.com/wobsoriano/v-dashboard/ https://github.com/wobsoriano/v-dashboard/
![screenshot](static/screenshot.jpg)

92
src/components/sidebar.rs
View File

@@ -1,7 +1,7 @@
/* /*
* @Author: plucky * @Author: plucky
* @Date: 2022-10-11 18:53:17 * @Date: 2022-10-11 18:53:17
* @LastEditTime: 2022-10-15 14:17:49 * @LastEditTime: 2022-10-16 18:01:09
* @Description: * @Description:
*/ */
@@ -15,7 +15,9 @@ pub fn view(cx:Scope)->Element{
let route_name = route.last_segment().unwrap_or_default(); let route_name = route.last_segment().unwrap_or_default();
let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN); let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
let is_open = use_read(&cx,IS_SIDEBAR_OPEN); let is_sidebar_open = use_read(&cx,IS_SIDEBAR_OPEN);
let is_menu_open = use_ref(&cx,||vec![false,false]);
let highlight_class = |e:&str|{ let highlight_class = |e:&str|{
match e == route_name { match e == route_name {
@@ -27,22 +29,23 @@ pub fn view(cx:Scope)->Element{
cx.render(rsx!( cx.render(rsx!(
div{ div{
class:"flex", class:"flex",
// mask
div{ div{
// :class="isOpen ? 'block' : 'hidden'"
// @click="isOpen = false"
onclick: move |_| { onclick: move |_| {
set_sidebar_open(false); set_sidebar_open(false);
}, },
// class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden", // class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden",
class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_open {"block"} else {"hidden"}), class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
// hidden: format_args!("{}",!is_open), // hidden: format_args!("{}",!is_open),
} }
div{ div{
// :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" // :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
// class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0", // class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0",
class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}", class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}",
if !*is_open { "-translate-x-full ease-in" } else { "translate-x-0 ease-out" }), if !*is_sidebar_open { "-translate-x-full ease-in" } else { "translate-x-0 ease-out" }),
// title
div { div {
class: "flex items-center justify-center mt-8 ", class: "flex items-center justify-center mt-8 ",
div { div {
@@ -54,62 +57,95 @@ pub fn view(cx:Scope)->Element{
} }
} }
} }
// menu
nav{ nav{
class: "mt-10", class: "mt-10",
// router-link // router-link
Link{ Link{
class: highlight_class class: highlight_class("dashboard"),
("dashboard"),
//to="/dashboard" //to="/dashboard"
to: "/dashboard", to: "/dashboard",
icons::icon_2 {} icons::icon_2 {}
span{class:"mx-4","Dashboard"} span{class:"mx-4","Dashboard"}
} }
Link{ Link{
class: highlight_class class: highlight_class("ui-elements"),
("ui-elements"),
to: "/ui-elements", to: "/ui-elements",
icons::icon_3 {} icons::icon_3 {}
span{class:"mx-4","UI Elements"} span{class:"mx-4","UI Elements"}
} }
Link{ Link{
class: highlight_class class: highlight_class("tables"),
("tables"),
to: "/tables", to: "/tables",
icons::icon_4 {} icons::icon_4 {}
span{class:"mx-4","Tables"} span{class:"mx-4","Tables"}
} }
Link{ Link{
class: highlight_class class: highlight_class("forms"),
("forms"),
to: "/forms", to: "/forms",
icons::icon_5 {} icons::icon_5 {}
span{class:"mx-4","Forms"} span{class:"mx-4","Forms"}
} }
Link{ Link{
class: highlight_class class: highlight_class("cards"),
("cards"),
to: "/cards", to: "/cards",
icons::icon_6 {} icons::icon_6 {}
span{class:"mx-4","Cards"} span{class:"mx-4","Cards"}
} }
Link{ Link{
class: highlight_class class: highlight_class("modal"),
("modal"),
to: "/modal", to: "/modal",
icons::icon_7 {} icons::icon_7 {}
span{class:"mx-4","Modal"} span{class:"mx-4","Modal"}
} }
Link{ Link{
class: highlight_class class: highlight_class("blank"),
("blank"),
to: "/blank", to: "/blank",
icons::icon_8 {} icons::icon_8 {}
span{class:"mx-4","Blank"} span{class:"mx-4","Blank"}
} }
// ul{li{}}
div{
div{
class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer",
onclick: move |_| {
let mut is_menu_open = is_menu_open.write();
is_menu_open[0] = !is_menu_open[0];
},
div {
class: "flex items-center space-x-4",
icons::icon_2 {}
span {
"Test"
}
div{
class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} ,
icons::icon_up_down {}
}
}
}
div{
class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
Link{
class: highlight_class("blank"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
Link{
class: highlight_class("blank2"),
to: "/blank",
icons::icon_8 {}
span{class:"mx-4","Blank"}
}
}
}
// end
} }
@@ -263,5 +299,15 @@ mod icons{
</svg> </svg>
)) ))
} }
// #[inline_props]
pub fn icon_up_down(cx:Scope)->Element{
cx.render(html!(
<svg class="w-3 h-3"
view_box="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
</svg>
))
}
} }