Merge pull request #19 from sunquakes/development

Dashboard and chart.

README.md

@@ -13,6 +13,12 @@ English | [🇨🇳 中文](https://github.com/sunquakes/electron-kits/blob/main
   <img alt="electron-kits" src="https://img.shields.io/github/v/release/sunquakes/electron-kits">
 </p>
 
+## Preview
+
+<p align="center">
+  <img src="https://ekits.sunquakes.com/images/electron-kits.gif" alt="preview">
+</p>
+
 ## Documentation
 
 Visit [ekits.sunquakes.com](https://ekits.sunquakes.com).
@@ -39,6 +45,12 @@ yarn
 yarn build
 ```
 
+### Test
+
+```bash
+yarn test
+
 ## License
 
 [Apache-2.0 license](https://github.com/sunquakes/electron-kits/blob/main/LICENSE)
+```

README_ZH.md

@@ -13,6 +13,12 @@
   <img alt="electron-kits" src="https://img.shields.io/github/v/release/sunquakes/electron-kits">
 </p>
 
+## 预览
+
+<p align="center">
+  <img src="https://ekits.sunquakes.com/images/electron-kits.gif" alt="预览">
+</p>
+
 ## 文档
 
 访问 [ekits.sunquakes.com](https://ekits.sunquakes.com).

docs/docs/guide/getting-started.md

@@ -7,6 +7,12 @@ title: Getting Started
 
 `Electron Kits` is a kits combine by `Electron`, `Vue 3`, `Anti Design` and `SQLite3`.
 
+## Preview
+
+<p align="center">
+  <img src="https://ekits.sunquakes.com/images/electron-kits.gif" alt="preview">
+</p>
+
 ## Quick Start
 
 ### Installing

docs/docs/guide/sqlite3.md

@@ -31,7 +31,7 @@ save('table_name', { content: 'Hello World!' }).then((id) => {
 
 ```js
 import { remove } from '../src/db/sqlite3'
-remove('table_name', [id, 1]).then((err) => {
+remove('table_name', [[id, 1]]).then((err) => {
   console.log(err)
 })
 ```

docs/docs/zh/guide/getting-started.md

@@ -7,6 +7,12 @@ title: 快速开始
 
 `Electron Kits` 是包含 `Electron`， `Vue 3`， `Anti Design` 和 `SQLite3` 套件。
 
+## 预览
+
+<p align="center">
+  <img src="https://ekits.sunquakes.com/images/electron-kits.gif" alt="预览">
+</p>
+
 ## 快速开始
 
 ### 安装

docs/docs/zh/guide/sqlite3.md

@@ -31,7 +31,7 @@ save('table_name', { content: 'Hello World!' }).then((id) => {
 
 ```js
 import { remove } from '../src/db/sqlite3'
-remove('table_name', [id, 1]).then((err) => {
+remove('table_name', [[id, 1]]).then((err) => {
   console.log(err)
 })
 ```

src/api/bar.json

@@ -0,0 +1,9 @@
+{
+  "xAxis": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  "series": [
+    {
+      "data": [120, 200, 150, 80, 70, 110, 130],
+      "type": "bar"
+    }
+  ]
+}

src/api/line.json

@@ -0,0 +1,36 @@
+{
+  "xAxis": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  "legend": ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
+  "series": [
+    {
+      "name": "Email",
+      "type": "line",
+      "stack": "Total",
+      "data": [120, 132, 101, 134, 90, 230, 210]
+    },
+    {
+      "name": "Union Ads",
+      "type": "line",
+      "stack": "Total",
+      "data": [220, 182, 191, 234, 290, 330, 310]
+    },
+    {
+      "name": "Video Ads",
+      "type": "line",
+      "stack": "Total",
+      "data": [150, 232, 201, 154, 190, 330, 410]
+    },
+    {
+      "name": "Direct",
+      "type": "line",
+      "stack": "Total",
+      "data": [320, 332, 301, 334, 390, 330, 320]
+    },
+    {
+      "name": "Search Engine",
+      "type": "line",
+      "stack": "Total",
+      "data": [820, 932, 901, 934, 1290, 1330, 1320]
+    }
+  ]
+}

src/api/pie.json

@@ -0,0 +1,7 @@
+[
+  { "value": 1048, "name": "Search Engine" },
+  { "value": 735, "name": "Direct" },
+  { "value": 580, "name": "Email" },
+  { "value": 484, "name": "Union Ads" },
+  { "value": 300, "name": "Video Ads" }
+]

src/api/user.d.ts

@@ -1,14 +1,16 @@
-export async function pageList(
+export function pageList(
   current: number,
   pageSize: number,
   where: string[][],
   orderBy: string
 ): Promise<any>
 
-export async function login(username: string, password: string): Promise<any>
+export function login(username: string, password: string): Promise<any>
 
-export async function del(where: string[][]): Promise<any>
+export function del(where: string[][]): Promise<any>
 
-export async function edit(id: number, data: any): Promise<any>
+export function edit(id: number, data: any): Promise<any>
 
-export async function add(data: any): Promise<any>
+export function add(data: any): Promise<any>
+
+export function doCount(data: any): Promise<number>

src/api/user.ts

@@ -1,4 +1,4 @@
-import { page, getOne, remove, save, updateById } from '../db/sqlite3'
+import { page, getOne, remove, save, updateById, count } from '../db/sqlite3'
 import CryptoJS from 'crypto-js'
 import { datetime } from '../utils/date'
 
@@ -41,3 +41,7 @@ export async function add(data: any): Promise<any> {
   data.create_time = datetime(new Date())
   return await save(TABLE_NAME, data)
 }
+
+export async function doCount(where?: any[][]): Promise<any> {
+  return count(TABLE_NAME, where)
+}

src/components/Chart.vue

@@ -0,0 +1,24 @@
+<template>
+  <a-row>
+    <a-col class="chart-container" :span="12"><Pie :data="pieData" /></a-col>
+    <a-col class="chart-container" :span="12"><Bar :data="barData" /></a-col>
+  </a-row>
+  <a-row>
+    <a-col class="chart-container" :span="24"><Line :data="lineData" /></a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+import Pie from './chart/Pie.vue'
+import Bar from './chart/Bar.vue'
+import Line from './chart/Line.vue'
+import pieData from '../api/pie.json'
+import barData from '../api/bar.json'
+import lineData from '../api/line.json'
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  height: 25vw;
+}
+</style>

src/components/Dashboard.vue

@@ -0,0 +1,68 @@
+<template>
+  <a-row>
+    <a-col :span="12">
+      <a-statistic title="Active Users" :value="userCount" style="margin-right: 50px" />
+    </a-col>
+    <a-col :span="12">
+      <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
+    </a-col>
+  </a-row>
+  <a-row>
+    <a-col :span="24">
+      <a-collapse v-model:activeKey="activeKey">
+        <a-collapse-panel key="1" header="This is panel header 1">
+          <p>
+            A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be
+            found as a welcome guest in many households across the world.
+          </p>
+        </a-collapse-panel>
+        <a-collapse-panel key="2" header="This is panel header 2">
+          <p>
+            A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be
+            found as a welcome guest in many households across the world.
+          </p>
+        </a-collapse-panel>
+        <a-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
+          <p>
+            A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be
+            found as a welcome guest in many households across the world.
+          </p>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-col>
+  </a-row>
+  <a-row>
+    <a-col :span="24">
+      <a-alert message="Success Tips" type="success" show-icon />
+    </a-col>
+    <a-col :span="24">
+      <a-alert message="Informational Notes" type="info" show-icon />
+    </a-col>
+    <a-col :span="24">
+      <a-alert message="Warning" type="warning" show-icon />
+    </a-col>
+    <a-col :span="24">
+      <a-alert message="Error" type="error" show-icon />
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+import { doCount } from '../api/user'
+import { ref, onMounted } from 'vue'
+
+const userCount = ref<number>(0)
+const activeKey = ref(['1'])
+onMounted(async () => {
+  userCount.value = await doCount()
+})
+</script>
+
+<style lang="scss" scoped>
+.ant-row {
+  padding: 8px 0;
+}
+.ant-col {
+  margin: 4px 0;
+}
+</style>

src/components/Login.vue

@@ -31,13 +31,13 @@
 
         <a-form-item>
           <a-form-item name="remember" no-style>
-            <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+            <a-checkbox v-model:checked="formState.remember">{{ t('login.remember_me') }}</a-checkbox>
           </a-form-item>
-          <a class="login-form-forgot" href="">Forgot password</a>
+          <a class="login-form-forgot" href="">{{ t('login.forgot_password') }}</a>
         </a-form-item>
 
         <a-form-item>
-          <a-button type="primary" html-type="submit" class="login-form-button"> Log in </a-button>
+          <a-button type="primary" html-type="submit" class="login-form-button">{{ t('login.submit') }}</a-button>
           Or
           <a href="">register now!</a>
         </a-form-item>

src/components/chart/Bar.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="chart-container" :id="id"></div>
+</template>
+
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'bar-container'
+  },
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+onMounted(() => {
+  init()
+})
+
+const init = () => {
+  const chartDom = document.getElementById(props.id)
+  const chart = echarts.init(chartDom)
+  window.addEventListener('resize', function () {
+    chart.resize()
+  })
+
+  const option = {
+    grid: {
+      top: '10%',
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: props.data.xAxis
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: props.data.series
+  }
+
+  option && chart.setOption(option)
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>