feat: ✨ 首页基础布局和整合uCharts

2024-11-21 22:41:45 +08:00
parent ac3dd56add
commit 8971488bc7
21 changed files with 14316 additions and 459 deletions
--- a/src/components/qiun-data-charts/license.md
+++ b/src/components/qiun-data-charts/license.md
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
--- a/src/components/qiun-data-charts/qiun-data-charts.vue
+++ b/src/components/qiun-data-charts/qiun-data-charts.vue
--- a/src/components/qiun-error/qiun-error.vue
+++ b/src/components/qiun-error/qiun-error.vue
--- a/src/components/qiun-loading/loading1.vue
+++ b/src/components/qiun-loading/loading1.vue
@@ -0,0 +1,158 @@
+<template>
+  <view class="container loading1">
+    <view class="shape shape1" />
+    <view class="shape shape2" />
+    <view class="shape shape3" />
+    <view class="shape shape4" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "loading1",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped="true">
+.container {
+  position: relative;
+  width: 30px;
+  height: 30px;
+}
+.container.loading1 {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890ff;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91cb74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #fac858;
+}
+.container .shape.shape4 {
+  right: 0;
+  bottom: 0;
+  background-color: #ee6666;
+}
+
+.loading1 .shape1 {
+  -webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
+  animation: animation1shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, 16px);
+    transform: translate(16px, 16px);
+  }
+}
+
+@keyframes animation1shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, 16px);
+    transform: translate(16px, 16px);
+  }
+}
+.loading1 .shape2 {
+  -webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
+  animation: animation1shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, 16px);
+    transform: translate(-16px, 16px);
+  }
+}
+
+@keyframes animation1shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, 16px);
+    transform: translate(-16px, 16px);
+  }
+}
+.loading1 .shape3 {
+  -webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
+  animation: animation1shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, -16px);
+    transform: translate(16px, -16px);
+  }
+}
+
+@keyframes animation1shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(16px, -16px);
+    transform: translate(16px, -16px);
+  }
+}
+.loading1 .shape4 {
+  -webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
+  animation: animation1shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation1shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, -16px);
+    transform: translate(-16px, -16px);
+  }
+}
+
+@keyframes animation1shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-16px, -16px);
+    transform: translate(-16px, -16px);
+  }
+}
+</style>
--- a/src/components/qiun-loading/loading2.vue
+++ b/src/components/qiun-loading/loading2.vue
@@ -0,0 +1,164 @@
+<template>
+  <view class="container loading2">
+    <view class="shape shape1" />
+    <view class="shape shape2" />
+    <view class="shape shape3" />
+    <view class="shape shape4" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "loading2",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped="true">
+.container {
+  position: relative;
+  width: 30px;
+  height: 30px;
+}
+
+.container.loading2 {
+  -webkit-transform: rotate(10deg);
+  transform: rotate(10deg);
+  -webkit-animation: rotation 1s infinite;
+  animation: rotation 1s infinite;
+}
+.container.loading2 .shape {
+  border-radius: 5px;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890ff;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91cb74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #fac858;
+}
+.container .shape.shape4 {
+  right: 0;
+  bottom: 0;
+  background-color: #ee6666;
+}
+
+.loading2 .shape1 {
+  -webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
+  animation: animation2shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, 20px);
+    transform: translate(20px, 20px);
+  }
+}
+
+@keyframes animation2shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, 20px);
+    transform: translate(20px, 20px);
+  }
+}
+.loading2 .shape2 {
+  -webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
+  animation: animation2shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, 20px);
+    transform: translate(-20px, 20px);
+  }
+}
+
+@keyframes animation2shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, 20px);
+    transform: translate(-20px, 20px);
+  }
+}
+.loading2 .shape3 {
+  -webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
+  animation: animation2shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, -20px);
+    transform: translate(20px, -20px);
+  }
+}
+
+@keyframes animation2shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(20px, -20px);
+    transform: translate(20px, -20px);
+  }
+}
+.loading2 .shape4 {
+  -webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
+  animation: animation2shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation2shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, -20px);
+    transform: translate(-20px, -20px);
+  }
+}
+
+@keyframes animation2shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-20px, -20px);
+    transform: translate(-20px, -20px);
+  }
+}
+</style>
--- a/src/components/qiun-loading/loading3.vue
+++ b/src/components/qiun-loading/loading3.vue
@@ -0,0 +1,171 @@
+<template>
+  <view class="container loading3">
+    <view class="shape shape1" />
+    <view class="shape shape2" />
+    <view class="shape shape3" />
+    <view class="shape shape4" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "loading3",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped="true">
+.container {
+  position: relative;
+  width: 30px;
+  height: 30px;
+}
+
+.container.loading3 {
+  -webkit-animation: rotation 1s infinite;
+  animation: rotation 1s infinite;
+}
+.container.loading3 .shape1 {
+  border-top-left-radius: 10px;
+}
+.container.loading3 .shape2 {
+  border-top-right-radius: 10px;
+}
+.container.loading3 .shape3 {
+  border-bottom-left-radius: 10px;
+}
+.container.loading3 .shape4 {
+  border-bottom-right-radius: 10px;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890ff;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91cb74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #fac858;
+}
+.container .shape.shape4 {
+  right: 0;
+  bottom: 0;
+  background-color: #ee6666;
+}
+
+.loading3 .shape1 {
+  -webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
+  animation: animation3shape1 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, 5px);
+    transform: translate(5px, 5px);
+  }
+}
+
+@keyframes animation3shape1 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, 5px);
+    transform: translate(5px, 5px);
+  }
+}
+.loading3 .shape2 {
+  -webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
+  animation: animation3shape2 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, 5px);
+    transform: translate(-5px, 5px);
+  }
+}
+
+@keyframes animation3shape2 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, 5px);
+    transform: translate(-5px, 5px);
+  }
+}
+.loading3 .shape3 {
+  -webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
+  animation: animation3shape3 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, -5px);
+    transform: translate(5px, -5px);
+  }
+}
+
+@keyframes animation3shape3 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(5px, -5px);
+    transform: translate(5px, -5px);
+  }
+}
+.loading3 .shape4 {
+  -webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
+  animation: animation3shape4 0.5s ease 0s infinite alternate;
+}
+
+@-webkit-keyframes animation3shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, -5px);
+    transform: translate(-5px, -5px);
+  }
+}
+
+@keyframes animation3shape4 {
+  from {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  to {
+    -webkit-transform: translate(-5px, -5px);
+    transform: translate(-5px, -5px);
+  }
+}
+</style>
--- a/src/components/qiun-loading/loading4.vue
+++ b/src/components/qiun-loading/loading4.vue
@@ -0,0 +1,219 @@
+<template>
+  <view class="container loading5">
+    <view class="shape shape1" />
+    <view class="shape shape2" />
+    <view class="shape shape3" />
+    <view class="shape shape4" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "loading5",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped="true">
+.container {
+  position: relative;
+  width: 30px;
+  height: 30px;
+}
+
+.container.loading5 .shape {
+  width: 15px;
+  height: 15px;
+}
+
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890ff;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91cb74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #fac858;
+}
+.container .shape.shape4 {
+  right: 0;
+  bottom: 0;
+  background-color: #ee6666;
+}
+
+.loading5 .shape1 {
+  animation: animation5shape1 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 15px);
+    transform: translate(0, 15px);
+  }
+  50% {
+    -webkit-transform: translate(15px, 15px);
+    transform: translate(15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(15px, 0);
+    transform: translate(15px, 0);
+  }
+}
+
+@keyframes animation5shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 15px);
+    transform: translate(0, 15px);
+  }
+  50% {
+    -webkit-transform: translate(15px, 15px);
+    transform: translate(15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(15px, 0);
+    transform: translate(15px, 0);
+  }
+}
+.loading5 .shape2 {
+  animation: animation5shape2 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-15px, 0);
+    transform: translate(-15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-15px, 15px);
+    transform: translate(-15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(0, 15px);
+    transform: translate(0, 15px);
+  }
+}
+
+@keyframes animation5shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-15px, 0);
+    transform: translate(-15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-15px, 15px);
+    transform: translate(-15px, 15px);
+  }
+  75% {
+    -webkit-transform: translate(0, 15px);
+    transform: translate(0, 15px);
+  }
+}
+.loading5 .shape3 {
+  animation: animation5shape3 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(15px, 0);
+    transform: translate(15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(15px, -15px);
+    transform: translate(15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(0, -15px);
+    transform: translate(0, -15px);
+  }
+}
+
+@keyframes animation5shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(15px, 0);
+    transform: translate(15px, 0);
+  }
+  50% {
+    -webkit-transform: translate(15px, -15px);
+    transform: translate(15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(0, -15px);
+    transform: translate(0, -15px);
+  }
+}
+.loading5 .shape4 {
+  animation: animation5shape4 2s ease 0s infinite reverse;
+}
+
+@-webkit-keyframes animation5shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -15px);
+    transform: translate(0, -15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px, -15px);
+    transform: translate(-15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(-15px, 0);
+    transform: translate(-15px, 0);
+  }
+}
+
+@keyframes animation5shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -15px);
+    transform: translate(0, -15px);
+  }
+  50% {
+    -webkit-transform: translate(-15px, -15px);
+    transform: translate(-15px, -15px);
+  }
+  75% {
+    -webkit-transform: translate(-15px, 0);
+    transform: translate(-15px, 0);
+  }
+}
+</style>
--- a/src/components/qiun-loading/loading5.vue
+++ b/src/components/qiun-loading/loading5.vue
@@ -0,0 +1,226 @@
+<template>
+  <view class="container loading6">
+    <view class="shape shape1" />
+    <view class="shape shape2" />
+    <view class="shape shape3" />
+    <view class="shape shape4" />
+  </view>
+</template>
+
+<script>
+export default {
+  name: "loading6",
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped="true">
+.container {
+  position: relative;
+  width: 30px;
+  height: 30px;
+}
+
+.container.loading6 {
+  -webkit-animation: rotation 1s infinite;
+  animation: rotation 1s infinite;
+}
+.container.loading6 .shape {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+.container .shape {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.container .shape.shape1 {
+  left: 0;
+  background-color: #1890ff;
+}
+.container .shape.shape2 {
+  right: 0;
+  background-color: #91cb74;
+}
+.container .shape.shape3 {
+  bottom: 0;
+  background-color: #fac858;
+}
+.container .shape.shape4 {
+  right: 0;
+  bottom: 0;
+  background-color: #ee6666;
+}
+
+.loading6 .shape1 {
+  -webkit-animation: animation6shape1 2s linear 0s infinite normal;
+  animation: animation6shape1 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 18px);
+    transform: translate(0, 18px);
+  }
+  50% {
+    -webkit-transform: translate(18px, 18px);
+    transform: translate(18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(18px, 0);
+    transform: translate(18px, 0);
+  }
+}
+
+@keyframes animation6shape1 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, 18px);
+    transform: translate(0, 18px);
+  }
+  50% {
+    -webkit-transform: translate(18px, 18px);
+    transform: translate(18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(18px, 0);
+    transform: translate(18px, 0);
+  }
+}
+.loading6 .shape2 {
+  -webkit-animation: animation6shape2 2s linear 0s infinite normal;
+  animation: animation6shape2 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-18px, 0);
+    transform: translate(-18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-18px, 18px);
+    transform: translate(-18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(0, 18px);
+    transform: translate(0, 18px);
+  }
+}
+
+@keyframes animation6shape2 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(-18px, 0);
+    transform: translate(-18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(-18px, 18px);
+    transform: translate(-18px, 18px);
+  }
+  75% {
+    -webkit-transform: translate(0, 18px);
+    transform: translate(0, 18px);
+  }
+}
+.loading6 .shape3 {
+  -webkit-animation: animation6shape3 2s linear 0s infinite normal;
+  animation: animation6shape3 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(18px, 0);
+    transform: translate(18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(18px, -18px);
+    transform: translate(18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(0, -18px);
+    transform: translate(0, -18px);
+  }
+}
+
+@keyframes animation6shape3 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(18px, 0);
+    transform: translate(18px, 0);
+  }
+  50% {
+    -webkit-transform: translate(18px, -18px);
+    transform: translate(18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(0, -18px);
+    transform: translate(0, -18px);
+  }
+}
+.loading6 .shape4 {
+  -webkit-animation: animation6shape4 2s linear 0s infinite normal;
+  animation: animation6shape4 2s linear 0s infinite normal;
+}
+
+@-webkit-keyframes animation6shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -18px);
+    transform: translate(0, -18px);
+  }
+  50% {
+    -webkit-transform: translate(-18px, -18px);
+    transform: translate(-18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(-18px, 0);
+    transform: translate(-18px, 0);
+  }
+}
+
+@keyframes animation6shape4 {
+  0% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  25% {
+    -webkit-transform: translate(0, -18px);
+    transform: translate(0, -18px);
+  }
+  50% {
+    -webkit-transform: translate(-18px, -18px);
+    transform: translate(-18px, -18px);
+  }
+  75% {
+    -webkit-transform: translate(-18px, 0);
+    transform: translate(-18px, 0);
+  }
+}
+</style>
--- a/src/components/qiun-loading/qiun-loading.vue
+++ b/src/components/qiun-loading/qiun-loading.vue
@@ -0,0 +1,32 @@
+<template>
+  <view>
+    <Loading1 v-if="loadingType == 1" />
+    <Loading2 v-if="loadingType == 2" />
+    <Loading3 v-if="loadingType == 3" />
+    <Loading4 v-if="loadingType == 4" />
+    <Loading5 v-if="loadingType == 5" />
+  </view>
+</template>
+
+<script>
+import Loading1 from "./loading1.vue";
+import Loading2 from "./loading2.vue";
+import Loading3 from "./loading3.vue";
+import Loading4 from "./loading4.vue";
+import Loading5 from "./loading5.vue";
+export default {
+  name: "qiun-loading",
+  components: { Loading1, Loading2, Loading3, Loading4, Loading5 },
+  props: {
+    loadingType: {
+      type: Number,
+      default: 2,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style></style>
--- a/src/components/u-charts/config-echarts.js
+++ b/src/components/u-charts/config-echarts.js
@@ -0,0 +1,444 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+
+// 通用配置项
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = [
+  "#1890FF",
+  "#91CB74",
+  "#FAC858",
+  "#EE6666",
+  "#73C0DE",
+  "#3CA272",
+  "#FC8452",
+  "#9A60B4",
+  "#ea7ccc",
+];
+
+const cfe = {
+  //demotype为自定义图表类型
+  type: [
+    "pie",
+    "ring",
+    "rose",
+    "funnel",
+    "line",
+    "column",
+    "area",
+    "radar",
+    "gauge",
+    "candle",
+    "demotype",
+  ],
+  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
+  categories: ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
+  //instance为实例变量承载属性，option为eopts承载属性，不要删除
+  instance: {},
+  option: {},
+  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+  formatter: {
+    tooltipDemo1: function (res) {
+      let result = "";
+      for (let i in res) {
+        if (i == 0) {
+          result += res[i].axisValueLabel + "年销售额";
+        }
+        let value = "--";
+        if (res[i].data !== null) {
+          value = res[i].data;
+        }
+        // #ifdef H5
+        result += "\n" + res[i].seriesName + "：" + value + " 万元";
+        // #endif
+
+        // #ifdef APP-PLUS
+        result += "<br/>" + res[i].marker + res[i].seriesName + "：" + value + " 万元";
+        // #endif
+      }
+      return result;
+    },
+    legendFormat: function (name) {
+      return "自定义图例+" + name;
+    },
+    yAxisFormatDemo: function (value, index) {
+      return value + "元";
+    },
+    seriesFormatDemo: function (res) {
+      return res.name + "年" + res.value + "元";
+    },
+  },
+  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
+  demotype: {
+    color: color,
+    //在这里填写echarts的option即可
+  },
+  //下面是自定义配置，请添加项目所需的通用配置
+  column: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    grid: {
+      top: 30,
+      bottom: 50,
+      right: 15,
+      left: 40,
+    },
+    legend: {
+      bottom: "left",
+    },
+    toolbox: {
+      show: false,
+    },
+    xAxis: {
+      type: "category",
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+      boundaryGap: true,
+      data: [],
+    },
+    yAxis: {
+      type: "value",
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+    },
+    seriesTemplate: {
+      name: "",
+      type: "bar",
+      data: [],
+      barwidth: 20,
+      label: {
+        show: true,
+        color: "#666666",
+        position: "top",
+      },
+    },
+  },
+  line: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    grid: {
+      top: 30,
+      bottom: 50,
+      right: 15,
+      left: 40,
+    },
+    legend: {
+      bottom: "left",
+    },
+    toolbox: {
+      show: false,
+    },
+    xAxis: {
+      type: "category",
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+      boundaryGap: true,
+      data: [],
+    },
+    yAxis: {
+      type: "value",
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+    },
+    seriesTemplate: {
+      name: "",
+      type: "line",
+      data: [],
+      barwidth: 20,
+      label: {
+        show: true,
+        color: "#666666",
+        position: "top",
+      },
+    },
+  },
+  area: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    grid: {
+      top: 30,
+      bottom: 50,
+      right: 15,
+      left: 40,
+    },
+    legend: {
+      bottom: "left",
+    },
+    toolbox: {
+      show: false,
+    },
+    xAxis: {
+      type: "category",
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+      boundaryGap: true,
+      data: [],
+    },
+    yAxis: {
+      type: "value",
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#666666",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#CCCCCC",
+        },
+      },
+    },
+    seriesTemplate: {
+      name: "",
+      type: "line",
+      data: [],
+      areaStyle: {},
+      label: {
+        show: true,
+        color: "#666666",
+        position: "top",
+      },
+    },
+  },
+  pie: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "item",
+    },
+    grid: {
+      top: 40,
+      bottom: 30,
+      right: 15,
+      left: 15,
+    },
+    legend: {
+      bottom: "left",
+    },
+    seriesTemplate: {
+      name: "",
+      type: "pie",
+      data: [],
+      radius: "50%",
+      label: {
+        show: true,
+        color: "#666666",
+        position: "top",
+      },
+    },
+  },
+  ring: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "item",
+    },
+    grid: {
+      top: 40,
+      bottom: 30,
+      right: 15,
+      left: 15,
+    },
+    legend: {
+      bottom: "left",
+    },
+    seriesTemplate: {
+      name: "",
+      type: "pie",
+      data: [],
+      radius: ["40%", "70%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        color: "#666666",
+        position: "top",
+      },
+      labelLine: {
+        show: true,
+      },
+    },
+  },
+  rose: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      top: "bottom",
+    },
+    seriesTemplate: {
+      name: "",
+      type: "pie",
+      data: [],
+      radius: "55%",
+      center: ["50%", "50%"],
+      roseType: "area",
+    },
+  },
+  funnel: {
+    color: color,
+    title: {
+      text: "",
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{b} : {c}%",
+    },
+    legend: {
+      top: "bottom",
+    },
+    seriesTemplate: {
+      name: "",
+      type: "funnel",
+      left: "10%",
+      top: 60,
+      bottom: 60,
+      width: "80%",
+      min: 0,
+      max: 100,
+      minSize: "0%",
+      maxSize: "100%",
+      sort: "descending",
+      gap: 2,
+      label: {
+        show: true,
+        position: "inside",
+      },
+      labelLine: {
+        length: 10,
+        lineStyle: {
+          width: 1,
+          type: "solid",
+        },
+      },
+      itemStyle: {
+        bordercolor: "#fff",
+        borderwidth: 1,
+      },
+      emphasis: {
+        label: {
+          fontSize: 20,
+        },
+      },
+      data: [],
+    },
+  },
+  gauge: {
+    color: color,
+    tooltip: {
+      formatter: "{a} <br/>{b} : {c}%",
+    },
+    seriesTemplate: {
+      name: "业务指标",
+      type: "gauge",
+      detail: { formatter: "{value}%" },
+      data: [{ value: 50, name: "完成率" }],
+    },
+  },
+  candle: {
+    xAxis: {
+      data: [],
+    },
+    yAxis: {},
+    color: color,
+    title: {
+      text: "",
+    },
+    dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: [0, 1],
+        start: 10,
+        end: 100,
+      },
+      {
+        show: true,
+        xAxisIndex: [0, 1],
+        type: "slider",
+        bottom: 10,
+        start: 10,
+        end: 100,
+      },
+    ],
+    seriesTemplate: {
+      name: "",
+      type: "k",
+      data: [],
+    },
+  },
+};
+
+export default cfe;
--- a/src/components/u-charts/config-ucharts.js
+++ b/src/components/u-charts/config-ucharts.js
@@ -0,0 +1,676 @@
+/*
+ * uCharts®
+ * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
+ * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
+ * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+ * 复制使用请保留本段注释，感谢支持开源！
+ *
+ * uCharts®官方网站
+ * https://www.uCharts.cn
+ *
+ * 开源地址:
+ * https://gitee.com/uCharts/uCharts
+ *
+ * uni-app插件市场地址：
+ * http://ext.dcloud.net.cn/plugin?id=271
+ *
+ */
+
+// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
+const color = [
+  "#1890FF",
+  "#91CB74",
+  "#FAC858",
+  "#EE6666",
+  "#73C0DE",
+  "#3CA272",
+  "#FC8452",
+  "#9A60B4",
+  "#ea7ccc",
+];
+
+//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
+const formatDateTime = (timeStamp, returnType) => {
+  var date = new Date();
+  date.setTime(timeStamp * 1000);
+  var y = date.getFullYear();
+  var m = date.getMonth() + 1;
+  m = m < 10 ? "0" + m : m;
+  var d = date.getDate();
+  d = d < 10 ? "0" + d : d;
+  var h = date.getHours();
+  h = h < 10 ? "0" + h : h;
+  var minute = date.getMinutes();
+  var second = date.getSeconds();
+  minute = minute < 10 ? "0" + minute : minute;
+  second = second < 10 ? "0" + second : second;
+  if (returnType == "full") {
+    return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
+  }
+  if (returnType == "y-m-d") {
+    return y + "-" + m + "-" + d;
+  }
+  if (returnType == "h:m") {
+    return h + ":" + minute;
+  }
+  if (returnType == "h:m:s") {
+    return h + ":" + minute + ":" + second;
+  }
+  return [y, m, d, h, minute, second];
+};
+
+const cfu = {
+  //demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
+  type: [
+    "pie",
+    "ring",
+    "rose",
+    "word",
+    "funnel",
+    "map",
+    "arcbar",
+    "line",
+    "column",
+    "mount",
+    "bar",
+    "area",
+    "radar",
+    "gauge",
+    "candle",
+    "mix",
+    "tline",
+    "tarea",
+    "scatter",
+    "bubble",
+    "demotype",
+  ],
+  range: [
+    "饼状图",
+    "圆环图",
+    "玫瑰图",
+    "词云图",
+    "漏斗图",
+    "地图",
+    "圆弧进度条",
+    "折线图",
+    "柱状图",
+    "山峰图",
+    "条状图",
+    "区域图",
+    "雷达图",
+    "仪表盘",
+    "K线图",
+    "混合图",
+    "时间轴折线",
+    "时间轴区域",
+    "散点图",
+    "气泡图",
+    "自定义类型",
+  ],
+  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
+  //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
+  categories: [
+    "line",
+    "column",
+    "mount",
+    "bar",
+    "area",
+    "radar",
+    "gauge",
+    "candle",
+    "mix",
+    "demotype",
+  ],
+  //instance为实例变量承载属性，不要删除
+  instance: {},
+  //option为opts及eopts承载属性，不要删除
+  option: {},
+  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
+  formatter: {
+    yAxisDemo1: function (val, index, opts) {
+      return val + "元";
+    },
+    yAxisDemo2: function (val, index, opts) {
+      return val.toFixed(2);
+    },
+    xAxisDemo1: function (val, index, opts) {
+      return val + "年";
+    },
+    xAxisDemo2: function (val, index, opts) {
+      return formatDateTime(val, "h:m");
+    },
+    seriesDemo1: function (val, index, series, opts) {
+      return val + "元";
+    },
+    tooltipDemo1: function (item, category, index, opts) {
+      if (index == 0) {
+        return "随便用" + item.data + "年";
+      } else {
+        return "其他我没改" + item.data + "天";
+      }
+    },
+    pieDemo: function (val, index, series, opts) {
+      if (index !== undefined) {
+        return series[index].name + "：" + series[index].data + "元";
+      }
+    },
+  },
+  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
+  demotype: {
+    //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
+    type: "line",
+    color: color,
+    padding: [15, 10, 0, 15],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      gridType: "dash",
+      dashLength: 2,
+    },
+    legend: {},
+    extra: {
+      line: {
+        type: "curve",
+        width: 2,
+      },
+    },
+  },
+  //下面是自定义配置，请添加项目所需的通用配置
+  pie: {
+    type: "pie",
+    color: color,
+    padding: [5, 5, 5, 5],
+    extra: {
+      pie: {
+        activeOpacity: 0.5,
+        activeRadius: 10,
+        offsetAngle: 0,
+        labelWidth: 15,
+        border: true,
+        borderWidth: 3,
+        borderColor: "#FFFFFF",
+      },
+    },
+  },
+  ring: {
+    type: "ring",
+    color: color,
+    padding: [5, 5, 5, 5],
+    rotate: false,
+    dataLabel: true,
+    legend: {
+      show: true,
+      position: "right",
+      lineHeight: 25,
+    },
+    title: {
+      name: "收益率",
+      fontSize: 15,
+      color: "#666666",
+    },
+    subtitle: {
+      name: "70%",
+      fontSize: 25,
+      color: "#7cb5ec",
+    },
+    extra: {
+      ring: {
+        ringWidth: 30,
+        activeOpacity: 0.5,
+        activeRadius: 10,
+        offsetAngle: 0,
+        labelWidth: 15,
+        border: true,
+        borderWidth: 3,
+        borderColor: "#FFFFFF",
+      },
+    },
+  },
+  rose: {
+    type: "rose",
+    color: color,
+    padding: [5, 5, 5, 5],
+    legend: {
+      show: true,
+      position: "left",
+      lineHeight: 25,
+    },
+    extra: {
+      rose: {
+        type: "area",
+        minRadius: 50,
+        activeOpacity: 0.5,
+        activeRadius: 10,
+        offsetAngle: 0,
+        labelWidth: 15,
+        border: false,
+        borderWidth: 2,
+        borderColor: "#FFFFFF",
+      },
+    },
+  },
+  word: {
+    type: "word",
+    color: color,
+    extra: {
+      word: {
+        type: "normal",
+        autoColors: false,
+      },
+    },
+  },
+  funnel: {
+    type: "funnel",
+    color: color,
+    padding: [15, 15, 0, 15],
+    extra: {
+      funnel: {
+        activeOpacity: 0.3,
+        activeWidth: 10,
+        border: true,
+        borderWidth: 2,
+        borderColor: "#FFFFFF",
+        fillOpacity: 1,
+        labelAlign: "right",
+      },
+    },
+  },
+  map: {
+    type: "map",
+    color: color,
+    padding: [0, 0, 0, 0],
+    dataLabel: true,
+    extra: {
+      map: {
+        border: true,
+        borderWidth: 1,
+        borderColor: "#666666",
+        fillOpacity: 0.6,
+        activeBorderColor: "#F04864",
+        activeFillColor: "#FACC14",
+        activeFillOpacity: 1,
+      },
+    },
+  },
+  arcbar: {
+    type: "arcbar",
+    color: color,
+    title: {
+      name: "百分比",
+      fontSize: 25,
+      color: "#00FF00",
+    },
+    subtitle: {
+      name: "默认标题",
+      fontSize: 15,
+      color: "#666666",
+    },
+    extra: {
+      arcbar: {
+        type: "default",
+        width: 12,
+        backgroundColor: "#E9E9E9",
+        startAngle: 0.75,
+        endAngle: 0.25,
+        gap: 2,
+      },
+    },
+  },
+  line: {
+    type: "line",
+    color: color,
+    padding: [15, 10, 0, 15],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      gridType: "dash",
+      dashLength: 2,
+    },
+    legend: {},
+    extra: {
+      line: {
+        type: "straight",
+        width: 2,
+        activeType: "hollow",
+      },
+    },
+  },
+  tline: {
+    type: "line",
+    color: color,
+    padding: [15, 10, 0, 15],
+    xAxis: {
+      disableGrid: false,
+      boundaryGap: "justify",
+    },
+    yAxis: {
+      gridType: "dash",
+      dashLength: 2,
+      data: [
+        {
+          min: 0,
+          max: 80,
+        },
+      ],
+    },
+    legend: {},
+    extra: {
+      line: {
+        type: "curve",
+        width: 2,
+        activeType: "hollow",
+      },
+    },
+  },
+  tarea: {
+    type: "area",
+    color: color,
+    padding: [15, 10, 0, 15],
+    xAxis: {
+      disableGrid: true,
+      boundaryGap: "justify",
+    },
+    yAxis: {
+      gridType: "dash",
+      dashLength: 2,
+      data: [
+        {
+          min: 0,
+          max: 80,
+        },
+      ],
+    },
+    legend: {},
+    extra: {
+      area: {
+        type: "curve",
+        opacity: 0.2,
+        addLine: true,
+        width: 2,
+        gradient: true,
+        activeType: "hollow",
+      },
+    },
+  },
+  column: {
+    type: "column",
+    color: color,
+    padding: [15, 15, 0, 5],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      data: [{ min: 0 }],
+    },
+    legend: {},
+    extra: {
+      column: {
+        type: "group",
+        width: 30,
+        activeBgColor: "#000000",
+        activeBgOpacity: 0.08,
+      },
+    },
+  },
+  mount: {
+    type: "mount",
+    color: color,
+    padding: [15, 15, 0, 5],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      data: [{ min: 0 }],
+    },
+    legend: {},
+    extra: {
+      mount: {
+        type: "mount",
+        widthRatio: 1.5,
+      },
+    },
+  },
+  bar: {
+    type: "bar",
+    color: color,
+    padding: [15, 30, 0, 5],
+    xAxis: {
+      boundaryGap: "justify",
+      disableGrid: false,
+      min: 0,
+      axisLine: false,
+    },
+    yAxis: {},
+    legend: {},
+    extra: {
+      bar: {
+        type: "group",
+        width: 30,
+        meterBorde: 1,
+        meterFillColor: "#FFFFFF",
+        activeBgColor: "#000000",
+        activeBgOpacity: 0.08,
+      },
+    },
+  },
+  area: {
+    type: "area",
+    color: color,
+    padding: [15, 15, 0, 15],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      gridType: "dash",
+      dashLength: 2,
+    },
+    legend: {},
+    extra: {
+      area: {
+        type: "straight",
+        opacity: 0.2,
+        addLine: true,
+        width: 2,
+        gradient: false,
+        activeType: "hollow",
+      },
+    },
+  },
+  radar: {
+    type: "radar",
+    color: color,
+    padding: [5, 5, 5, 5],
+    dataLabel: false,
+    legend: {
+      show: true,
+      position: "right",
+      lineHeight: 25,
+    },
+    extra: {
+      radar: {
+        gridType: "radar",
+        gridColor: "#CCCCCC",
+        gridCount: 3,
+        opacity: 0.2,
+        max: 200,
+        labelShow: true,
+      },
+    },
+  },
+  gauge: {
+    type: "gauge",
+    color: color,
+    title: {
+      name: "66Km/H",
+      fontSize: 25,
+      color: "#2fc25b",
+      offsetY: 50,
+    },
+    subtitle: {
+      name: "实时速度",
+      fontSize: 15,
+      color: "#1890ff",
+      offsetY: -50,
+    },
+    extra: {
+      gauge: {
+        type: "default",
+        width: 30,
+        labelColor: "#666666",
+        startAngle: 0.75,
+        endAngle: 0.25,
+        startNumber: 0,
+        endNumber: 100,
+        labelFormat: "",
+        splitLine: {
+          fixRadius: 0,
+          splitNumber: 10,
+          width: 30,
+          color: "#FFFFFF",
+          childNumber: 5,
+          childWidth: 12,
+        },
+        pointer: {
+          width: 24,
+          color: "auto",
+        },
+      },
+    },
+  },
+  candle: {
+    type: "candle",
+    color: color,
+    padding: [15, 15, 0, 15],
+    enableScroll: true,
+    enableMarkLine: true,
+    dataLabel: false,
+    xAxis: {
+      labelCount: 4,
+      itemCount: 40,
+      disableGrid: true,
+      gridColor: "#CCCCCC",
+      gridType: "solid",
+      dashLength: 4,
+      scrollShow: true,
+      scrollAlign: "left",
+      scrollColor: "#A6A6A6",
+      scrollBackgroundColor: "#EFEBEF",
+    },
+    yAxis: {},
+    legend: {},
+    extra: {
+      candle: {
+        color: {
+          upLine: "#f04864",
+          upFill: "#f04864",
+          downLine: "#2fc25b",
+          downFill: "#2fc25b",
+        },
+        average: {
+          show: true,
+          name: ["MA5", "MA10", "MA30"],
+          day: [5, 10, 20],
+          color: ["#1890ff", "#2fc25b", "#facc14"],
+        },
+      },
+      markLine: {
+        type: "dash",
+        dashLength: 5,
+        data: [
+          {
+            value: 2150,
+            lineColor: "#f04864",
+            showLabel: true,
+          },
+          {
+            value: 2350,
+            lineColor: "#f04864",
+            showLabel: true,
+          },
+        ],
+      },
+    },
+  },
+  mix: {
+    type: "mix",
+    color: color,
+    padding: [15, 15, 0, 15],
+    xAxis: {
+      disableGrid: true,
+    },
+    yAxis: {
+      disabled: false,
+      disableGrid: false,
+      splitNumber: 5,
+      gridType: "dash",
+      dashLength: 4,
+      gridColor: "#CCCCCC",
+      padding: 10,
+      showTitle: true,
+      data: [],
+    },
+    legend: {},
+    extra: {
+      mix: {
+        column: {
+          width: 20,
+        },
+      },
+    },
+  },
+  scatter: {
+    type: "scatter",
+    color: color,
+    padding: [15, 15, 0, 15],
+    dataLabel: false,
+    xAxis: {
+      disableGrid: false,
+      gridType: "dash",
+      splitNumber: 5,
+      boundaryGap: "justify",
+      min: 0,
+    },
+    yAxis: {
+      disableGrid: false,
+      gridType: "dash",
+    },
+    legend: {},
+    extra: {
+      scatter: {},
+    },
+  },
+  bubble: {
+    type: "bubble",
+    color: color,
+    padding: [15, 15, 0, 15],
+    xAxis: {
+      disableGrid: false,
+      gridType: "dash",
+      splitNumber: 5,
+      boundaryGap: "justify",
+      min: 0,
+      max: 250,
+    },
+    yAxis: {
+      disableGrid: false,
+      gridType: "dash",
+      data: [
+        {
+          min: 0,
+          max: 150,
+        },
+      ],
+    },
+    legend: {},
+    extra: {
+      bubble: {
+        border: 2,
+        opacity: 0.5,
+      },
+    },
+  },
+};
+
+export default cfu;
--- a/src/components/u-charts/license.md
+++ b/src/components/u-charts/license.md
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
--- a/src/components/u-charts/readme.md
+++ b/src/components/u-charts/readme.md
@@ -0,0 +1,6 @@
+# uCharts JSSDK说明
+
+1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`120kb`。
+2、如果120kb的体积仍需压缩，请手到uCharts官网通过在线定制选择您需要的图表。
+3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
+4、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
--- a/src/components/u-charts/u-charts.js
+++ b/src/components/u-charts/u-charts.js
--- a/src/components/u-charts/u-charts.min.js
+++ b/src/components/u-charts/u-charts.min.js
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,36 +1,192 @@
 <template>
-  <view class="flex-center flex-col">
-    <image class="logo" src="/static/logo.png" />
-    <view>
-      <text class="text-blue font-bold text-lg">{{ title }}</text>
-    </view>
+  <view class="home">
+    <wd-swiper
+      v-model:current="current"
+      :list="swiperList"
+      autoplay
+      @click="handleClick"
+      @change="onChange"
+    />

-    <view class="mt-5 flex-center">
-      <text class="text-green font-bold text-lg">测试 UnoCSS</text>
-    </view>
+    <!-- 快捷导航 -->
+    <wd-grid :column="4" class="mt-2">
+      <wd-grid-item v-for="(item, index) in gridList" :key="index" use-slot>
+        <view class="p-2">
+          <image class="w-80rpx h-80rpx rounded-8rpx" :src="item.icon" />
+        </view>
+        <view class="text">{{ item.title }}</view>
+      </wd-grid-item>
+    </wd-grid>

-    <view class="mt-5 flex-center">
-      <wd-button size="small">主要按钮</wd-button>
-      <wd-button type="success" size="small">成功按钮</wd-button>
-      <wd-button type="info" size="small">信息按钮</wd-button>
-      <wd-button type="warning" size="small">警告按钮</wd-button>
-      <wd-button type="error" size="small">危险按钮</wd-button>
-    </view>
+    <!-- 通知公告 -->
+    <wd-notice-bar
+      class="mt-2"
+      text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
+      prefix="check-outline"
+      color="#34D19D"
+      background-color="#f0f9eb"
+    />
+
+    <!-- 数据统计 -->
+    <wd-grid :column="2" class="mt-2" :gutter="2">
+      <wd-grid-item
+        v-for="(item, index) in gridList"
+        :key="index"
+        use-slot
+        custom-class="custom-item"
+      >
+        <view class="flex justify-start pl-5">
+          <view class="flex-center">
+            <image class="w-80rpx h-80rpx rounded-8rpx" :src="item.icon" />
+            <view class="ml-5 text-left">
+              <view class="font-bold">{{ item.title }}</view>
+              <view class="mt-1">{{ item.count }}</view>
+            </view>
+          </view>
+        </view>
+      </wd-grid-item>
+    </wd-grid>
+
+    <wd-card>
+      <template #title>
+        <view class="flex-between">
+          <view>访问趋势</view>
+          <view>
+            <wd-radio-group
+              v-model="dataRange"
+              shape="button"
+              inline
+              @change="handleDataRangeChange"
+            >
+              <wd-radio :value="1">近7天</wd-radio>
+              <wd-radio :value="2">近30天</wd-radio>
+            </wd-radio-group>
+          </view>
+        </view>
+      </template>
+
+      <view class="charts-box">
+        <qiun-data-charts type="line" :chartData="chartData" />
+      </view>
+    </wd-card>
  </view>
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
-const title = ref("Hello YouLai APP");
+import LogAPI, { VisitTrendVO, VisitTrendQuery } from "@/api/system/log";
+
+const current = ref<number>(0);
+
+const dataRange = ref<number>(1);
+
+const swiperList = ref([
+  "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/redpanda.jpg",
+  "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/capybara.jpg",
+  "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/panda.jpg",
+  "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/moon.jpg",
+  "https://registry.npmmirror.com/wot-design-uni-assets/1.0.4/files/meng.jpg",
+]);
+
+const gridList = reactive([
+  {
+    icon: "/static/icons/user.png",
+    title: "在线用户",
+    count: 10,
+  },
+  {
+    icon: "/static/icons/role.png",
+    title: "浏览量",
+    count: 200,
+  },
+  {
+    icon: "/static/icons/dept.png",
+    title: "访客数",
+    count: 300,
+  },
+  {
+    icon: "/static/icons/dict.png",
+    title: "IP数",
+    count: 400,
+  },
+]);
+
+function handleClick(e) {
+  console.log(e);
+}
+function onChange(e) {
+  console.log(e);
+}
+
+// 图表数据
+const chartData = ref({});
+const getServerData = () => {
+  const { startDate, endDate } = calculateDateRange();
+
+  LogAPI.getVisitTrend({ startDate, endDate }).then((data) => {
+    const res = {
+      categories: data.dates,
+      series: [
+        {
+          name: "浏览量(PV)",
+          data: data.pvList,
+        },
+        {
+          name: "IP",
+          data: data.ipList,
+        },
+      ],
+    };
+    chartData.value = JSON.parse(JSON.stringify(res));
+  });
+};
+
+const handleDataRangeChange = ({ value }: { value: number }) => {
+  console.log("handleDataRangeChange", value);
+  dataRange.value = value;
+  getServerData();
+};
+
+const calculateDateRange = () => {
+  const now = new Date();
+
+  const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  const days = dataRange.value === 1 ? 7 : 30;
+  const startDate = new Date(endDate);
+  startDate.setDate(startDate.getDate() - days);
+
+  // 手动调整日期为当地时间的 23:59:59
+  const adjustDateToLocal = (date: Date) => {
+    date.setHours(23, 59, 59, 999);
+    return date;
+  };
+
+  const adjustedEndDate = adjustDateToLocal(new Date(endDate));
+  const adjustedStartDate = adjustDateToLocal(new Date(startDate));
+  const formattedStartDate = adjustedStartDate.toISOString().split("T")[0];
+  const formattedEndDate = adjustedEndDate.toISOString().split("T")[0];
+
+  return { startDate: formattedStartDate, endDate: formattedEndDate };
+};
+
+onReady(() => {
+  getServerData();
+});
 </script>

-<style>
-.logo {
-  width: 200rpx;
-  height: 200rpx;
-  margin-top: 200rpx;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-  margin-left: auto;
+<style setup lang="scss">
+.home {
+  padding: 0 10rpx;
+  :deep(.custom-item) {
+    height: 80px !important;
+  }
+  :deep(.wd-card) {
+    margin: 10rpx 0 !important;
+  }
+}
+
+.charts-box {
+  width: 100%;
+  height: 300px;
 }
 </style>
--- a/src/pages/work/user/index.vue
+++ b/src/pages/work/user/index.vue
@@ -19,6 +19,7 @@
      </wd-drop-menu-item>
    </wd-drop-menu>

+    <!-- 用户卡片 -->
    <wd-card v-for="item in dataList" class="user-card">
      <template #title>
        <view class="flex-between">
@@ -66,6 +67,7 @@
    <wd-loadmore v-if="total > 0" :state="state" @reload="loadmore" />
    <wd-message-box />

+    <!-- 编辑弹窗 -->
    <wd-popup v-model="dialog.visible" position="bottom">
      <wd-form ref="userFormRef" :model="formData" :rules="rules">
        <wd-cell-group border>
@@ -100,8 +102,7 @@
 <script lang="ts" setup>
 import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
 import { FormRules } from "wot-design-uni/components/wd-form/types";
-import { useMessage } from "wot-design-uni";
-import { dayjs } from "wot-design-uni";
+import { useMessage, dayjs } from "wot-design-uni";

 import UserAPI, { type UserPageQuery, UserPageVO, UserForm } from "@/api/system/user";
 import RoleAPI from "@/api/system/role";
--- a/src/static/app-plus/echarts.min.js
+++ b/src/static/app-plus/echarts.min.js
--- a/src/static/h5/echarts.min.js
+++ b/src/static/h5/echarts.min.js