From 595f3fb2bb5d5e648e0704b6d2cf4e4f11da2eb4 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 10 May 2024 22:53:28 +0800
Subject: [PATCH 01/20] Use i18n in router.

---
 .sonarlint/connectedMode.json         |  4 +++
 .vscode/extensions.json               |  2 +-
 src/components/User.vue               | 50 ++++++++++++++++++++++++---
 src/components/layout/EBreadCrumb.vue |  6 ++--
 src/components/layout/EMenu.vue       |  6 ++--
 src/lang/en.js                        |  7 +++-
 src/lang/zh.js                        |  5 +++
 src/router/index.js                   |  6 ++--
 8 files changed, 72 insertions(+), 14 deletions(-)
 create mode 100644 .sonarlint/connectedMode.json

diff --git a/.sonarlint/connectedMode.json b/.sonarlint/connectedMode.json
new file mode 100644
index 0000000..b01b014
--- /dev/null
+++ b/.sonarlint/connectedMode.json
@@ -0,0 +1,4 @@
+{
+    "sonarCloudOrganization": "sunquakes",
+    "projectKey": "sunquakes_electron-kits"
+}
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c0a6e5a..427af50 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": ["Vue.vscode-typescript-vue-plugin"]
 }
diff --git a/src/components/User.vue b/src/components/User.vue
index cf20f7f..b178dc9 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,9 +1,49 @@
 <template>
-  User
+  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 'calc(100vh - 360px)' }">
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'operation'">
+        <a>action</a>
+      </template>
+    </template>
+  </a-table>
 </template>
 
-<script setup>
-</script>
+<script lang="ts" setup>
+import type { TableColumnsType } from 'ant-design-vue'
+const columns: TableColumnsType = [
+  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
+  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
+  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
+  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
+  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
+  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
+  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
+  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
+  { title: 'Column 8', dataIndex: 'address', key: '8' },
+  {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 100
+  }
+]
+
+interface DataItem {
+  key: number
+  name: string
+  age: number
+  address: string
+}
 
-<style scoped>
-</style>//
+const list: DataItem[] = []
+for (let i = 0; i < 100; i++) {
+  list.push({
+    key: i,
+    name: `Edrward ${i}`,
+    age: 32,
+    address: `London Park no. ${i}`
+  })
+}
+const data = list
+</script>
diff --git a/src/components/layout/EBreadCrumb.vue b/src/components/layout/EBreadCrumb.vue
index 546c26d..c5e3ad4 100644
--- a/src/components/layout/EBreadCrumb.vue
+++ b/src/components/layout/EBreadCrumb.vue
@@ -10,6 +10,8 @@
 <script lang="ts" setup>
 import { watch, defineModel } from 'vue'
 import router from '../../router'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 
 interface Route {
   path: string
@@ -22,11 +24,11 @@ interface Route {
 
 const list = router.options.routes
 
-const getMenu = (list: RouteRecord[], name: string): Route[] => {
+const getMenu = (list: RouteRecord[], name: string): Route[] | undefined => {
   let breadcrumb = []
   for (let item of list) {
     if (item.meta != undefined && item.meta.isMenu) {
-      breadcrumb.push({ path: item.path, breadcrumbName: item.meta.title })
+      breadcrumb.push({ path: item.path, breadcrumbName: t(item.meta.title) })
       if (item.name == name) {
         return breadcrumb
       }
diff --git a/src/components/layout/EMenu.vue b/src/components/layout/EMenu.vue
index 6a8765b..32f9e2b 100644
--- a/src/components/layout/EMenu.vue
+++ b/src/components/layout/EMenu.vue
@@ -11,6 +11,8 @@
 <script lang="ts" setup>
 import { reactive, watch, h, defineModel } from 'vue'
 import router from '../../router'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 
 const model = defineModel({ required: true })
 
@@ -42,9 +44,9 @@ const getMenu = (list: RouteRecord[]) => {
     if (item.meta != undefined && item.meta.isMenu) {
       let menuItem
       if (item.children != undefined && item.children.length > 0) {
-        menuItem = getItem(item.meta.title, item.name, h(item.meta.icon), getMenu(item.children))
+        menuItem = getItem(t(item.meta.title), item.name, h(item.meta.icon), getMenu(item.children))
       } else {
-        menuItem = getItem(item.meta.title, item.name, h(item.meta.icon))
+        menuItem = getItem(t(item.meta.title), item.name, h(item.meta.icon))
       }
       menu.push(menuItem)
     }
diff --git a/src/lang/en.js b/src/lang/en.js
index bb6d792..18763b6 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,6 +1,11 @@
 export default {
+  menu: {
+    dashboard: 'Dashboard',
+    system: 'System',
+    system_user: 'User'
+  },
   line_one: 'I love three things in this world,',
   line_two: 'the sun, the moon and you.',
   line_three: 'The sun for the day, the moon for the night,',
-  line_four: 'and you forever.',
+  line_four: 'and you forever.'
 }
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 3594046..0625d95 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,4 +1,9 @@
 export default {
+  menu: {
+    dashboard: '首页',
+    system: '系统管理',
+    system_user: '系统用户'
+  },
   line_one: '浮世三千，吾爱有三，',
   line_two: '日，月与卿。',
   line_three: '日为朝，月为暮，',
diff --git a/src/router/index.js b/src/router/index.js
index f55b017..91729d1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,17 +21,17 @@ const routes = [
         name: 'Dashboard',
         path: '/dashboard',
         component: StrayBirds,
-        meta: { isMenu: true, title: '首页', icon: DashboardOutlined }
+        meta: { isMenu: true, title: 'menu.dashboard', icon: DashboardOutlined }
       },
       {
         name: 'System',
         path: '/system',
-        meta: { isMenu: true, title: '系统管理', icon: SettingOutlined },
+        meta: { isMenu: true, title: 'menu.system', icon: SettingOutlined },
         children: [
           {
             name: 'User',
             path: '/user',
-            meta: { isMenu: true, title: '系统用户' },
+            meta: { isMenu: true, title: 'menu.system_user' },
             component: User 
           }
         ]

From 3d51027a6c65d15cc50a2543d22247d90d3c3bd4 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Mon, 13 May 2024 20:34:41 +0800
Subject: [PATCH 02/20] Add login and check login status.

---
 main.js                               |  4 +++-
 src/api/user.js                       |  5 ++++
 src/components/ELayout.vue            | 21 +++++++++++++++--
 src/components/ELogin.vue             | 24 +++++++++----------
 src/components/User.vue               |  4 ++++
 src/components/layout/EBreadCrumb.vue | 17 ++++++++++----
 src/components/layout/EHeader.vue     | 22 +++++++++++++++++-
 src/components/layout/EMenu.vue       | 33 +++++++++++++++++++++------
 src/db/sqlite3.js                     | 25 +++++++++++++-------
 src/lang/en.js                        |  6 +++++
 src/lang/zh.js                        |  6 +++++
 vite.config.js                        |  3 +++
 12 files changed, 134 insertions(+), 36 deletions(-)
 create mode 100644 src/api/user.js

diff --git a/main.js b/main.js
index 7261473..4c7ee06 100644
--- a/main.js
+++ b/main.js
@@ -1,9 +1,11 @@
-const { app, BrowserWindow, globalShortcut, Menu } = require('electron')
+const { app, BrowserWindow, globalShortcut, Menu, ipcRenderer } = require('electron')
 const path = require('path')
 
 const NODE_ENV = process.env.NODE_ENV
 console.log('NODE_ENV', NODE_ENV)
 
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+
 function createWindow() {
   const win = new BrowserWindow({
     width: 800,
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..1597e46
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,5 @@
+import { execute, save, list, getOne, updateById, remove } from '../db/sqlite3'
+
+export function getList() {
+  return list('user')
+}
diff --git a/src/components/ELayout.vue b/src/components/ELayout.vue
index 08aac75..f7f182f 100644
--- a/src/components/ELayout.vue
+++ b/src/components/ELayout.vue
@@ -1,6 +1,6 @@
 <template>
   <a-layout style="min-height: 100vh">
-    <a-layout-sider v-model:collapsed="collapsed" collapsible @collapse="collapse">
+    <a-layout-sider v-model:collapsed="collapsed" collapsible>
       <ELogo :collapsed="collapsed"></ELogo>
       <EMenu v-model="currentMenu"></EMenu>
     </a-layout-sider>
@@ -23,10 +23,27 @@ import EBreadCrumb from './layout/EBreadCrumb.vue'
 import EMenu from './layout/EMenu.vue'
 import EHeader from './layout/EHeader.vue'
 import EFooter from './layout/EFooter.vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { options } from '../db/sqlite3'
+
+import { useRouter } from 'vue-router'
 
 const collapsed = ref<boolean>(false)
 const currentMenu = ref<string>('Dashboard')
+
+// Get the current router object
+const router = useRouter()
+
+// Permission
+options.before = (resolve, reject) => {
+  const user = localStorage.getItem('user')
+  const currentRoute = computed(() => router.currentRoute.value)
+  console.log('currentRoute', currentRoute.value)
+  if (!user) {
+    router.push({ name: 'Login' })
+    reject('No permission.')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ELogin.vue b/src/components/ELogin.vue
index 6599f75..3a56d78 100644
--- a/src/components/ELogin.vue
+++ b/src/components/ELogin.vue
@@ -10,11 +10,10 @@
         @finishFailed="onFinishFailed"
       >
         <a-form-item
-          label="Username"
           name="username"
-          :rules="[{ required: true, message: 'Please input your username!' }]"
+          :rules="[{ required: true, message: t('login.username_required') }]"
         >
-          <a-input v-model:value="formState.username">
+          <a-input :placeholder="t('login.username')" v-model:value="formState.username">
             <template #prefix>
               <UserOutlined class="site-form-item-icon" />
             </template>
@@ -22,11 +21,10 @@
         </a-form-item>
 
         <a-form-item
-          label="Password"
           name="password"
-          :rules="[{ required: true, message: 'Please input your password!' }]"
+          :rules="[{ required: true, message: t('login.password_required') }]"
         >
-          <a-input-password v-model:value="formState.password">
+          <a-input-password :placeholder="t('login.password')" v-model:value="formState.password">
             <template #prefix>
               <LockOutlined class="site-form-item-icon" />
             </template>
@@ -41,13 +39,7 @@
         </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"> Log in </a-button>
           Or
           <a href="">register now!</a>
         </a-form-item>
@@ -59,6 +51,11 @@
 <script lang="ts" setup>
 import { reactive, computed } from 'vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import router from '../router'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({ useScope: 'global' })
+
 interface FormState {
   username: string
   password: string
@@ -70,6 +67,7 @@ const formState = reactive<FormState>({
   remember: true
 })
 const onFinish = (values: any) => {
+  router.push({ path: '/' })
   console.log('Success:', values)
 }
 
diff --git a/src/components/User.vue b/src/components/User.vue
index b178dc9..baac7fc 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -10,6 +10,10 @@
 
 <script lang="ts" setup>
 import type { TableColumnsType } from 'ant-design-vue'
+import { getList } from '../api/user'
+
+getList()
+
 const columns: TableColumnsType = [
   { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
   { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
diff --git a/src/components/layout/EBreadCrumb.vue b/src/components/layout/EBreadCrumb.vue
index c5e3ad4..c46d8eb 100644
--- a/src/components/layout/EBreadCrumb.vue
+++ b/src/components/layout/EBreadCrumb.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, defineModel } from 'vue'
+import { watch, defineModel, ref } from 'vue'
 import router from '../../router'
 import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 
 interface Route {
   path: string
@@ -46,11 +46,20 @@ const getMenu = (list: RouteRecord[], name: string): Route[] | undefined => {
 
 const model = defineModel({ required: true })
 
-let items = getMenu(list, model.value)
+const items = ref<Route[]>()
+items.value = getMenu(list, model.value)
+
+watch(
+  () => locale.value,
+  (_val) => {
+    items.value = getMenu(list, model.value)
+  }
+)
+
 watch(
   () => model.value,
   (_val) => {
-    items = getMenu(list, model.value)
+    items.value = getMenu(list, model.value)
   }
 )
 </script>
diff --git a/src/components/layout/EHeader.vue b/src/components/layout/EHeader.vue
index 7f08275..f63ec48 100644
--- a/src/components/layout/EHeader.vue
+++ b/src/components/layout/EHeader.vue
@@ -5,7 +5,6 @@
       class="site-page-header"
       sub-title="This is a subtitle"
       :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
-      :breadcrumb="{ routes }"
     >
       <template #tags>
         <a-tag color="blue">Running</a-tag>
@@ -13,6 +12,11 @@
       <template #extra>
         <a-button key="3">Operation</a-button>
         <a-button key="2">Operation</a-button>
+        <a-select
+          v-model:value="locale"
+          style="width: 90px"
+          :options="langOptions"
+        ></a-select>
         <a-dropdown key="more">
           <a-button :style="{ border: 'none', padding: 0 }">
             <EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
@@ -31,6 +35,22 @@
 
 <script lang="ts" setup>
 import { EllipsisOutlined } from '@ant-design/icons-vue'
+import type { SelectProps } from 'ant-design-vue'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n({ useScope: 'global' })
+
+const langOptions = ref<SelectProps['options']>([
+  {
+    value: 'en',
+    label: 'English'
+  },
+  {
+    value: 'zh',
+    label: '中文'
+  }
+])
 
 const logout = () => {
   console.log('logout')
diff --git a/src/components/layout/EMenu.vue b/src/components/layout/EMenu.vue
index 32f9e2b..c762d87 100644
--- a/src/components/layout/EMenu.vue
+++ b/src/components/layout/EMenu.vue
@@ -9,10 +9,10 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch, h, defineModel } from 'vue'
+import { reactive, watch, ref, h, defineModel } from 'vue'
 import router from '../../router'
 import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 
 const model = defineModel({ required: true })
 
@@ -44,11 +44,22 @@ const getMenu = (list: RouteRecord[]) => {
     if (item.meta != undefined && item.meta.isMenu) {
       let menuItem
       if (item.children != undefined && item.children.length > 0) {
-        menuItem = getItem(t(item.meta.title), item.name, h(item.meta.icon), getMenu(item.children))
+        menuItem = getItem(
+          t(item.meta.title),
+          item.name,
+          item?.meta?.icon ? h(item.meta.icon) : null,
+          getMenu(item.children)
+        )
       } else {
-        menuItem = getItem(t(item.meta.title), item.name, h(item.meta.icon))
+        menuItem = getItem(
+          t(item.meta.title),
+          item.name,
+          item?.meta?.icon ? h(item.meta.icon) : null
+        )
+      }
+      if (menuItem != undefined) {
+        menu.push(menuItem)
       }
-      menu.push(menuItem)
     }
   }
   // Get the children if there is no menu.
@@ -70,12 +81,20 @@ const getMenuChildren = (list: RouteRecord[]) => {
 
 watch(
   () => state.selectedKeys,
-  (_val, oldVal) => {
+  (_val) => {
     console.log('_val', _val)
   }
 )
 
-const items = getMenu(list)
+const items = ref<ItemType[]>()
+items.value = getMenu(list)
+
+watch(
+  () => locale.value,
+  (_val) => {
+    items.value = getMenu(list)
+  }
+)
 
 router.push({ name: model.value })
 
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index 64e32d5..29639ae 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -1,21 +1,30 @@
 const path = require('path')
 const sqlite3 = require('sqlite3').verbose()
 const dbFile = path.join(process.resourcesPath || '', 'sqlite3.db')
-let db
+
+export const options = { db: undefined, before: undefined, after: undefined }
 
 const getDb = () => {
-  return new Promise((resolve) => {
-    if (db !== undefined) {
-      resolve(db)
+  return new Promise((resolve, reject) => {
+    if (options.before != undefined && typeof options.before == 'function') {
+      options.before(resolve, reject)
+    }
+    if (options.db !== undefined) {
+      resolve(options.db)
     } else {
-      db = new sqlite3.Database(dbFile, (err) => {
+      options.db = new sqlite3.Database(dbFile, (err) => {
         if (err !== null) {
-          db = new sqlite3.Database(':memory:')
-          resolve(db)
+          options.db = new sqlite3.Database(':memory:')
+          resolve(options.db)
         }
       })
-      resolve(db)
+      resolve(options.db)
+    }
+  }).then((res) => {
+    if (options.after != undefined && typeof options.after == 'function') {
+      options.after(resolve, reject)
     }
+    return res
   })
 }
 
diff --git a/src/lang/en.js b/src/lang/en.js
index 18763b6..cc34128 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -4,6 +4,12 @@ export default {
     system: 'System',
     system_user: 'User'
   },
+  login: {
+    username: 'Username',
+    password: 'Password',
+    username_required: 'Please input your username!',
+    password_required: 'Please input your password!'
+  },
   line_one: 'I love three things in this world,',
   line_two: 'the sun, the moon and you.',
   line_three: 'The sun for the day, the moon for the night,',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 0625d95..824f4f0 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -4,6 +4,12 @@ export default {
     system: '系统管理',
     system_user: '系统用户'
   },
+  login: {
+    username: '用户名',
+    password: '密码',
+    username_required: '请输入用户名！',
+    password_required: '请输入密码！'
+  },
   line_one: '浮世三千，吾爱有三，',
   line_two: '日，月与卿。',
   line_three: '日为朝，月为暮，',
diff --git a/vite.config.js b/vite.config.js
index 598e203..66c27a6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,4 +8,7 @@ export default defineConfig({
   ssr: {
     external: ['mock-aws-s3', 'aws-sdk', 'nock', 'argon2']
   },
+  define: {
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
+  }
 })

From d073a4ec2e70375e5c9a96f1c8007076a88b8490 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Tue, 14 May 2024 22:01:25 +0800
Subject: [PATCH 03/20] Db init and add user list.

---
 src/components/ELayout.vue |   8 +-
 src/components/User.vue    |  42 +++----
 src/db/init.js             |  20 ++++
 src/db/sqlite3.js          | 235 +++++++++++++++----------------------
 src/main.js                |   4 +
 5 files changed, 138 insertions(+), 171 deletions(-)
 create mode 100644 src/db/init.js

diff --git a/src/components/ELayout.vue b/src/components/ELayout.vue
index f7f182f..9cefed3 100644
--- a/src/components/ELayout.vue
+++ b/src/components/ELayout.vue
@@ -39,10 +39,10 @@ options.before = (resolve, reject) => {
   const user = localStorage.getItem('user')
   const currentRoute = computed(() => router.currentRoute.value)
   console.log('currentRoute', currentRoute.value)
-  if (!user) {
-    router.push({ name: 'Login' })
-    reject('No permission.')
-  }
+  // if (!user) {
+  //   router.push({ name: 'Login' })
+  //   reject(new Error('No permission.'))
+  // }
 }
 </script>
 
diff --git a/src/components/User.vue b/src/components/User.vue
index baac7fc..55d1c34 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 'calc(100vh - 360px)' }">
+  <a-table :columns="columns" :data-source="list" :scroll="{ x: '100%', y: 'calc(100vh - 360px)' }">
     <template #bodyCell="{ column }">
       <template v-if="column.key === 'operation'">
         <a>action</a>
@@ -9,22 +9,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted } from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
 import { getList } from '../api/user'
 
-getList()
-
 const columns: TableColumnsType = [
-  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
-  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
-  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
-  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
-  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
-  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
-  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
-  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
-  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
-  { title: 'Column 8', dataIndex: 'address', key: '8' },
+  { title: 'ID', width: 50, dataIndex: 'id', key: 'id', fixed: 'left' },
+  { title: 'Username', width: 100, dataIndex: 'username', key: 'username', fixed: 'left' },
+  { title: 'Create Time', width: 100, dataIndex: 'create_time', key: 'create_time', fixed: 'left' },
+  { title: 'Update Time', width: 100, dataIndex: 'update_time', key: 'update_time', fixed: 'left' },
   {
     title: 'Action',
     key: 'operation',
@@ -34,20 +27,15 @@ const columns: TableColumnsType = [
 ]
 
 interface DataItem {
-  key: number
-  name: string
-  age: number
-  address: string
+  id: number
+  username: string
+  state: number
+  create_time: string
+  update_time: string
 }
 
-const list: DataItem[] = []
-for (let i = 0; i < 100; i++) {
-  list.push({
-    key: i,
-    name: `Edrward ${i}`,
-    age: 32,
-    address: `London Park no. ${i}`
-  })
-}
-const data = list
+const list = ref<DataItem[]>([])
+onMounted(async () => {
+  list.value = await getList()
+})
 </script>
diff --git a/src/db/init.js b/src/db/init.js
new file mode 100644
index 0000000..46f0305
--- /dev/null
+++ b/src/db/init.js
@@ -0,0 +1,20 @@
+import { execute } from './sqlite3'
+
+export function init() {
+  const createTableSql = `CREATE TABLE IF NOT EXISTS user (
+                            id Integer PRIMARY KEY AUTOINCREMENT,
+                            username VARCHAR(255) NOT NULL DEFAULT "",
+                            password VARCHAR(255) NOT NULL DEFAULT "",
+                            state Integer NOT NULL DEFAULT 0,
+                            create_time DATETIME,
+                            update_time DATETIME
+                          );`
+  execute(createTableSql)
+
+  const createUniqueIndexSql = `CREATE UNIQUE INDEX IF NOT EXISTS "idx_user_username" ON "user" ("username");`
+  execute(createUniqueIndexSql)
+
+  // Insert a user record, the username is `admin`, the password is `admin`.
+  const insertSql = `INSERT INTO user (username, password, state, create_time, update_time) VALUES ('admin', '21232f297a57a5a743894a0e4a801fc3', 1, CURRENT_TIMESTAMP, null);`
+  execute(insertSql)
+}
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index 29639ae..4580596 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -4,8 +4,8 @@ const dbFile = path.join(process.resourcesPath || '', 'sqlite3.db')
 
 export const options = { db: undefined, before: undefined, after: undefined }
 
-const getDb = () => {
-  return new Promise((resolve, reject) => {
+const getDb = async () => {
+  const res = await new Promise((resolve, reject) => {
     if (options.before != undefined && typeof options.before == 'function') {
       options.before(resolve, reject)
     }
@@ -15,34 +15,35 @@ const getDb = () => {
       options.db = new sqlite3.Database(dbFile, (err) => {
         if (err !== null) {
           options.db = new sqlite3.Database(':memory:')
-          resolve(options.db)
+          if (options.after != undefined && typeof options.after == 'function') {
+            options.after(resolve, reject)
+          }
+          return resolve(options.db)
         }
       })
       resolve(options.db)
     }
-  }).then((res) => {
-    if (options.after != undefined && typeof options.after == 'function') {
-      options.after(resolve, reject)
-    }
-    return res
   })
+  if (options.after != undefined && typeof options.after == 'function') {
+    options.after(resolve, reject)
+  }
+  return res
 }
 
-export function execute(sql) {
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.exec(sql, function (err) {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve()
-        }
-      })
+export async function execute(sql) {
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.exec(sql, function (err) {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve()
+      }
     })
   })
 }
 
-export function save(tableName, data) {
+export async function save(tableName, data) {
   let fieldArray = []
   let valueArray = []
   for (let key in data) {
@@ -56,20 +57,19 @@ export function save(tableName, data) {
   let fields = '(' + fieldArray.join(',') + ')'
   let values = '(' + valueArray.join(',') + ')'
   let sql = `INSERT INTO ${tableName} ${fields} VALUES ${values}`
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.run(sql, function (err) {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve(this.lastID)
-        }
-      })
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.run(sql, function (err) {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(this.lastID)
+      }
     })
   })
 }
 
-export function updateById(tableName, id, data) {
+export async function updateById(tableName, id, data) {
   let fieldArray = []
   for (let key in data) {
     let value = data[key]
@@ -80,46 +80,22 @@ export function updateById(tableName, id, data) {
   }
   let fields = fieldArray.join(',')
   let sql = `UPDATE ${tableName} SET ${fields} WHERE id = ${id}`
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.run(sql, function (err) {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve(this.lastID)
-        }
-      })
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.run(sql, function (err) {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(this.lastID)
+      }
     })
   })
 }
 
-export function list(tableName, where, orderBy, offset, limit) {
+export async function list(tableName, where, orderBy, offset, limit) {
   let sql = `SELECT * FROM ${tableName}`
   if (where) {
-    let whereArray = []
-    for (let item of where) {
-      if (!(item instanceof Array)) continue
-      if (item.length === 2) {
-        let field = item[0]
-        let value = item[1]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} = ${value}`)
-      } else if (item.length === 3) {
-        let field = item[0]
-        let symbol = item[1]
-        let value = item[2]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} ${symbol} ${value}`)
-      }
-    }
-    if (whereArray.length > 0) {
-      let where = whereArray.join(' AND ')
-      sql = `${sql} WHERE ${where}`
-    }
+    sql = parseWhere(sql, where)
   }
   if (orderBy) {
     sql = `${sql} ORDER BY ${orderBy}`
@@ -127,97 +103,76 @@ export function list(tableName, where, orderBy, offset, limit) {
   if (offset !== undefined && limit !== undefined) {
     sql = `${sql} LIMIT ${offset}, ${limit}`
   }
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.all(sql, (err, rows) => {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve(rows)
-        }
-      })
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.all(sql, (err, rows) => {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(rows)
+      }
     })
   })
 }
 
-export function getOne(tableName, where) {
-  let sql = `SELECT * FROM ${tableName}`
-  if (where) {
-    let whereArray = []
-    for (let item of where) {
-      if (!(item instanceof Array)) continue
-      if (item.length === 2) {
-        let field = item[0]
-        let value = item[1]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} = ${value}`)
-      } else if (item.length === 3) {
-        let field = item[0]
-        let symbol = item[1]
-        let value = item[2]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} ${symbol} ${value}`)
+function parseWhere(sql, where) {
+  let whereArray = []
+  for (let item of where) {
+    if (!(item instanceof Array)) continue
+    if (item.length === 2) {
+      let field = item[0]
+      let value = item[1]
+      if (typeof value === 'string') {
+        value = `'${value}'`
       }
-    }
-    if (whereArray.length > 0) {
-      let where = whereArray.join(' AND ')
-      sql = `${sql} WHERE ${where}`
+      whereArray.push(`${field} = ${value}`)
+    } else if (item.length === 3) {
+      let field = item[0]
+      let symbol = item[1]
+      let value = item[2]
+      if (typeof value === 'string') {
+        value = `'${value}'`
+      }
+      whereArray.push(`${field} ${symbol} ${value}`)
     }
   }
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.get(sql, (err, row) => {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve(row)
-        }
-      })
+  if (whereArray.length > 0) {
+    let where = whereArray.join(' AND ')
+    sql = `${sql} WHERE ${where}`
+  }
+  return sql
+}
+
+export async function getOne(tableName, where) {
+  let sql = `SELECT * FROM ${tableName}`
+  if (where) {
+    sql = parseWhere(sql, where)
+  }
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.get(sql, (err, row) => {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(row)
+      }
     })
   })
 }
 
-export function remove(tableName, where) {
+export async function remove(tableName, where) {
   let sql = `DELETE FROM ${tableName}`
   if (where) {
-    let whereArray = []
-    for (let item of where) {
-      if (!(item instanceof Array)) continue
-      if (item.length === 2) {
-        let field = item[0]
-        let value = item[1]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} = ${value}`)
-      } else if (item.length === 3) {
-        let field = item[0]
-        let symbol = item[1]
-        let value = item[2]
-        if (typeof value === 'string') {
-          value = `'${value}'`
-        }
-        whereArray.push(`${field} ${symbol} ${value}`)
-      }
-    }
-    if (whereArray.length > 0) {
-      let where = whereArray.join(' AND ')
-      sql = `${sql} WHERE ${where}`
-    }
+    sql = parseWhere(sql, where)
   }
-  return getDb().then((db) => {
-    return new Promise((resolve, reject) => {
-      db.get(sql, (err, row) => {
-        if (err != null) {
-          reject(err)
-        } else {
-          resolve(row)
-        }
-      })
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.get(sql, (err, row) => {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(row)
+      }
     })
   })
 }
diff --git a/src/main.js b/src/main.js
index 49e74c3..2f63228 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,5 +5,9 @@ import router from './router'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import i18n from './i18n'
+import { init } from './db/init'
+
+// Init db.
+init()
 
 createApp(App).use(router).use(Antd).use(i18n).mount('#app')

From 95fb89f64ab39832a912015d6695f4c998e87478 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Wed, 15 May 2024 22:44:40 +0800
Subject: [PATCH 04/20] Login validate.

---
 package.json               |  1 +
 src/api/user.js            | 15 ++++++++++++-
 src/components/ELayout.vue | 10 ++++-----
 src/components/ELogin.vue  | 43 ++++++++++++++++++++++++++++++++++----
 src/lang/en.js             |  4 +++-
 src/lang/zh.js             |  6 ++++--
 yarn.lock                  |  5 +++++
 7 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 663224f..2393273 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "ant-design-vue": "^4.2.0",
+    "crypto-js": "^4.2.0",
     "sqlite3": "^5.1.6",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",
diff --git a/src/api/user.js b/src/api/user.js
index 1597e46..ad6b016 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,5 +1,18 @@
 import { execute, save, list, getOne, updateById, remove } from '../db/sqlite3'
+import CryptoJS from 'crypto-js'
 
-export function getList() {
+export async function getList() {
   return list('user')
 }
+
+export async function login(username, password) {
+  const user = await getOne('user', [['username', username]])
+  if (!user) {
+    return new Error('login.username_not_exist')
+  }
+  const passwordMd5 = CryptoJS.MD5(password).toString()
+  if (passwordMd5 !== user.password) {
+    return new Error('login.wrong_password')
+  }
+  return user
+}
diff --git a/src/components/ELayout.vue b/src/components/ELayout.vue
index 9cefed3..42490c2 100644
--- a/src/components/ELayout.vue
+++ b/src/components/ELayout.vue
@@ -38,11 +38,11 @@ const router = useRouter()
 options.before = (resolve, reject) => {
   const user = localStorage.getItem('user')
   const currentRoute = computed(() => router.currentRoute.value)
-  console.log('currentRoute', currentRoute.value)
-  // if (!user) {
-  //   router.push({ name: 'Login' })
-  //   reject(new Error('No permission.'))
-  // }
+  console.log('currentRoute', currentRoute.value.name, !['Login'].includes(currentRoute.value.name))
+  if (!user && !['Login'].includes(currentRoute.value.name)) {
+    router.push({ name: 'Login' })
+    reject(new Error('No permission.'))
+  }
 }
 </script>
 
diff --git a/src/components/ELogin.vue b/src/components/ELogin.vue
index 3a56d78..67ef286 100644
--- a/src/components/ELogin.vue
+++ b/src/components/ELogin.vue
@@ -12,6 +12,8 @@
         <a-form-item
           name="username"
           :rules="[{ required: true, message: t('login.username_required') }]"
+          :validateStatus="usernameError ? 'error' : ''"
+          :help="usernameError"
         >
           <a-input :placeholder="t('login.username')" v-model:value="formState.username">
             <template #prefix>
@@ -23,6 +25,8 @@
         <a-form-item
           name="password"
           :rules="[{ required: true, message: t('login.password_required') }]"
+          :validateStatus="passwordError ? 'error' : ''"
+          :help="passwordError"
         >
           <a-input-password :placeholder="t('login.password')" v-model:value="formState.password">
             <template #prefix>
@@ -49,10 +53,11 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, computed } from 'vue'
+import { reactive, computed, watch, ref } from 'vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import router from '../router'
 import { useI18n } from 'vue-i18n'
+import { login } from '../api/user'
 
 const { t } = useI18n({ useScope: 'global' })
 
@@ -66,9 +71,39 @@ const formState = reactive<FormState>({
   password: '',
   remember: true
 })
-const onFinish = (values: any) => {
-  router.push({ path: '/' })
-  console.log('Success:', values)
+
+watch(
+  () => formState.username,
+  (_val) => {
+    usernameError.value = ''
+  }
+)
+
+watch(
+  () => formState.password,
+  (_val) => {
+    passwordError.value = ''
+  }
+)
+
+const usernameError = ref('')
+const passwordError = ref('')
+
+const onFinish = async (values: any) => {
+  const user = await login(formState.username, formState.password)
+  if (user instanceof Error) {
+    if (user.message === 'login.username_not_exist') {
+      usernameError.value = t(user.message)
+      return
+    }
+    if (user.message === 'login.wrong_password') {
+      passwordError.value = t(user.message)
+      return
+    }
+  } else {
+    router.push({ path: '/' })
+    console.log('Success:', values)
+  }
 }
 
 const onFinishFailed = (errorInfo: any) => {
diff --git a/src/lang/en.js b/src/lang/en.js
index cc34128..807ae1e 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -8,7 +8,9 @@ export default {
     username: 'Username',
     password: 'Password',
     username_required: 'Please input your username!',
-    password_required: 'Please input your password!'
+    password_required: 'Please input your password!',
+    username_not_exist: 'Username does not exist!',
+    wrong_password: 'Wrong password!'
   },
   line_one: 'I love three things in this world,',
   line_two: 'the sun, the moon and you.',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 824f4f0..da08658 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -8,10 +8,12 @@ export default {
     username: '用户名',
     password: '密码',
     username_required: '请输入用户名！',
-    password_required: '请输入密码！'
+    password_required: '请输入密码！',
+    username_not_exist: '用户名不存在！',
+    wrong_password: '密码错误！'
   },
   line_one: '浮世三千，吾爱有三，',
   line_two: '日，月与卿。',
   line_three: '日为朝，月为暮，',
-  line_four: '卿为朝朝暮暮。',
+  line_four: '卿为朝朝暮暮。'
 }
diff --git a/yarn.lock b/yarn.lock
index f0fbb30..c72136b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2574,6 +2574,11 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
 csstype@^3.1.1, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"

From b1b3eb7580f9d1002474083a08071d6c343c3dd9 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Thu, 16 May 2024 20:29:42 +0800
Subject: [PATCH 05/20] Storage the login state.

---
 package.json                      |  3 ++-
 src/components/ELayout.vue        | 11 +++++++----
 src/components/ELogin.vue         |  3 +++
 src/components/layout/EHeader.vue | 14 ++++++++------
 src/main.js                       |  3 ++-
 src/store/index.js                | 27 +++++++++++++++++++++++++++
 yarn.lock                         | 17 ++++++++++++-----
 7 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 src/store/index.js

diff --git a/package.json b/package.json
index 2393273..9653ab6 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "sqlite3": "^5.1.6",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
diff --git a/src/components/ELayout.vue b/src/components/ELayout.vue
index 42490c2..1d435f8 100644
--- a/src/components/ELayout.vue
+++ b/src/components/ELayout.vue
@@ -27,19 +27,22 @@ import { ref, computed } from 'vue'
 import { options } from '../db/sqlite3'
 
 import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 const collapsed = ref<boolean>(false)
 const currentMenu = ref<string>('Dashboard')
 
 // Get the current router object
 const router = useRouter()
+const store = useStore()
 
 // Permission
 options.before = (resolve, reject) => {
-  const user = localStorage.getItem('user')
-  const currentRoute = computed(() => router.currentRoute.value)
-  console.log('currentRoute', currentRoute.value.name, !['Login'].includes(currentRoute.value.name))
-  if (!user && !['Login'].includes(currentRoute.value.name)) {
+  const user = store.getters.user
+  console.log('user', user)
+  const currentRoute = router.currentRoute.value
+  if (!user && !['Login'].includes(currentRoute.name)) {
+    // Route to the login page.
     router.push({ name: 'Login' })
     reject(new Error('No permission.'))
   }
diff --git a/src/components/ELogin.vue b/src/components/ELogin.vue
index 67ef286..d98a625 100644
--- a/src/components/ELogin.vue
+++ b/src/components/ELogin.vue
@@ -58,8 +58,10 @@ import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import router from '../router'
 import { useI18n } from 'vue-i18n'
 import { login } from '../api/user'
+import { useStore } from 'vuex'
 
 const { t } = useI18n({ useScope: 'global' })
+const store = useStore()
 
 interface FormState {
   username: string
@@ -101,6 +103,7 @@ const onFinish = async (values: any) => {
       return
     }
   } else {
+    store.dispatch('setUser', user)
     router.push({ path: '/' })
     console.log('Success:', values)
   }
diff --git a/src/components/layout/EHeader.vue b/src/components/layout/EHeader.vue
index f63ec48..b3bcc1d 100644
--- a/src/components/layout/EHeader.vue
+++ b/src/components/layout/EHeader.vue
@@ -12,11 +12,7 @@
       <template #extra>
         <a-button key="3">Operation</a-button>
         <a-button key="2">Operation</a-button>
-        <a-select
-          v-model:value="locale"
-          style="width: 90px"
-          :options="langOptions"
-        ></a-select>
+        <a-select v-model:value="locale" style="width: 90px" :options="langOptions"></a-select>
         <a-dropdown key="more">
           <a-button :style="{ border: 'none', padding: 0 }">
             <EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
@@ -38,8 +34,12 @@ import { EllipsisOutlined } from '@ant-design/icons-vue'
 import type { SelectProps } from 'ant-design-vue'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 
 const { locale } = useI18n({ useScope: 'global' })
+const router = useRouter()
+const store = useStore()
 
 const langOptions = ref<SelectProps['options']>([
   {
@@ -53,7 +53,9 @@ const langOptions = ref<SelectProps['options']>([
 ])
 
 const logout = () => {
-  console.log('logout')
+  // Remove login user info and route to the login page.
+  store.dispatch('removeUser')
+  router.push({ name: 'Login' })
 }
 const profile = () => {
   console.log('profile')
diff --git a/src/main.js b/src/main.js
index 2f63228..959d21e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'
 import i18n from './i18n'
@@ -10,4 +11,4 @@ import { init } from './db/init'
 // Init db.
 init()
 
-createApp(App).use(router).use(Antd).use(i18n).mount('#app')
+createApp(App).use(router).use(store).use(Antd).use(i18n).mount('#app')
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..ac8269b
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,27 @@
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state() {
+    return {
+      user: null
+    }
+  },
+  mutations: {
+    setUser(state, user) {
+      state.user = user
+    }
+  },
+  actions: {
+    setUser({ commit }, user) {
+      commit('setUser', user)
+    },
+    removeUser({ commit }) {
+      commit('setUser', null)
+    }
+  },
+  getters: {
+    user: (state) => state.user
+  }
+})
+
+export default store
diff --git a/yarn.lock b/yarn.lock
index c72136b..882b4d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1754,16 +1754,16 @@
     "@vue/compiler-dom" "3.4.27"
     "@vue/shared" "3.4.27"
 
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.1":
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
+  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
+
 "@vue/devtools-api@^6.5.0":
   version "6.5.1"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
   integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
 
-"@vue/devtools-api@^6.5.1":
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
-  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
-
 "@vue/reactivity@3.4.27":
   version "3.4.27"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.27.tgz#6ece72331bf719953f5eaa95ec60b2b8d49e3791"
@@ -5369,6 +5369,13 @@ vue@^3.4.27:
     "@vue/server-renderer" "3.4.27"
     "@vue/shared" "3.4.27"
 
+vuex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 walker@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"

From d301f7b1c92a2421dca50ec69a503f2621d995d2 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Thu, 16 May 2024 21:53:18 +0800
Subject: [PATCH 06/20] User list and remove.

---
 src/api/user.js                   |  6 +++++-
 src/components/User.vue           | 29 +++++++++++++++++++++++++----
 src/components/layout/EHeader.vue | 23 +++++++++++++++++------
 src/lang/en.js                    | 14 ++++++++++++++
 src/lang/zh.js                    | 14 ++++++++++++++
 5 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index ad6b016..cb1d321 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,7 +1,7 @@
 import { execute, save, list, getOne, updateById, remove } from '../db/sqlite3'
 import CryptoJS from 'crypto-js'
 
-export async function getList() {
+export async function userList() {
   return list('user')
 }
 
@@ -16,3 +16,7 @@ export async function login(username, password) {
   }
   return user
 }
+
+export async function userRemove(where) {
+  return remove('user', where)
+}
\ No newline at end of file
diff --git a/src/components/User.vue b/src/components/User.vue
index 55d1c34..985ddbf 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,8 +1,17 @@
 <template>
   <a-table :columns="columns" :data-source="list" :scroll="{ x: '100%', y: 'calc(100vh - 360px)' }">
-    <template #bodyCell="{ column }">
+    <template #bodyCell="{ column, record }">
       <template v-if="column.key === 'operation'">
-        <a>action</a>
+        <a href="#">{{ t('action.edit') }}</a>
+        <a-divider type="vertical" />
+        <a-popconfirm
+          :title="t('confirm.delete')"
+          :ok-text="t('button.ok')"
+          :cancel-text="t('button.no')"
+          @confirm="deleteConfirm(record)"
+        >
+          <a href="#">{{ t('action.delete') }}</a>
+        </a-popconfirm>
       </template>
     </template>
   </a-table>
@@ -11,7 +20,10 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
-import { getList } from '../api/user'
+import { userList, userRemove } from '../api/user'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({ useScope: 'global' })
 
 const columns: TableColumnsType = [
   { title: 'ID', width: 50, dataIndex: 'id', key: 'id', fixed: 'left' },
@@ -36,6 +48,15 @@ interface DataItem {
 
 const list = ref<DataItem[]>([])
 onMounted(async () => {
-  list.value = await getList()
+  handleList()
 })
+
+const handleList = async () => {
+  list.value = await userList()
+}
+
+const deleteConfirm = async (record) => {
+  await userRemove([['id', record.id]])
+  handleList()
+}
 </script>
diff --git a/src/components/layout/EHeader.vue b/src/components/layout/EHeader.vue
index b3bcc1d..21c392a 100644
--- a/src/components/layout/EHeader.vue
+++ b/src/components/layout/EHeader.vue
@@ -27,19 +27,22 @@
       </template>
     </a-page-header>
   </a-layout-header>
+  <contextHolder />
 </template>
 
 <script lang="ts" setup>
-import { EllipsisOutlined } from '@ant-design/icons-vue'
+import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import type { SelectProps } from 'ant-design-vue'
-import { ref } from 'vue'
+import { ref, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
+import { Modal } from 'ant-design-vue'
 
-const { locale } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
 const router = useRouter()
 const store = useStore()
+const [modal, contextHolder] = Modal.useModal()
 
 const langOptions = ref<SelectProps['options']>([
   {
@@ -53,10 +56,18 @@ const langOptions = ref<SelectProps['options']>([
 ])
 
 const logout = () => {
-  // Remove login user info and route to the login page.
-  store.dispatch('removeUser')
-  router.push({ name: 'Login' })
+  console.log(2)
+  modal.confirm({
+    title: t('logout.confirm'),
+    icon: h(ExclamationCircleOutlined),
+    onOk() {
+      // Remove login user info and route to the login page.
+      store.dispatch('removeUser')
+      router.push({ name: 'Login' })
+    }
+  })
 }
+
 const profile = () => {
   console.log('profile')
 }
diff --git a/src/lang/en.js b/src/lang/en.js
index 807ae1e..5b38b55 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,4 +1,15 @@
 export default {
+  action: {
+    delete: 'Delete',
+    edit: 'Edit'
+  },
+  button: {
+    ok: 'Ok',
+    no: 'No',
+  },
+  confirm: {
+    delete: 'Are you sure delete this record?'
+  },
   menu: {
     dashboard: 'Dashboard',
     system: 'System',
@@ -12,6 +23,9 @@ export default {
     username_not_exist: 'Username does not exist!',
     wrong_password: 'Wrong password!'
   },
+  logout: {
+    confirm: 'Do you want to logout?'
+  },
   line_one: 'I love three things in this world,',
   line_two: 'the sun, the moon and you.',
   line_three: 'The sun for the day, the moon for the night,',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index da08658..793af42 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,4 +1,15 @@
 export default {
+  action: {
+    delete: '删除',
+    edit: '编辑'
+  },
+  button: {
+    ok: '是',
+    no: '否',
+  },
+  confirm: {
+    delete: '确定删除这条记录？'
+  },
   menu: {
     dashboard: '首页',
     system: '系统管理',
@@ -12,6 +23,9 @@ export default {
     username_not_exist: '用户名不存在！',
     wrong_password: '密码错误！'
   },
+  logout: {
+    confirm: '确定退出登录？'
+  },
   line_one: '浮世三千，吾爱有三，',
   line_two: '日，月与卿。',
   line_three: '日为朝，月为暮，',

From 293a19939e3b464699282163aaa33977bef08305 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 17 May 2024 19:49:03 +0800
Subject: [PATCH 07/20] Fixed code not standard.

---
 src/api/user.js                 |  2 +-
 src/components/ELayout.vue      |  2 +-
 src/components/layout/EMenu.vue | 33 ++++++++++++++++++---------------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/api/user.js b/src/api/user.js
index cb1d321..1c4ed12 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,4 +1,4 @@
-import { execute, save, list, getOne, updateById, remove } from '../db/sqlite3'
+import { list, getOne, remove } from '../db/sqlite3'
 import CryptoJS from 'crypto-js'
 
 export async function userList() {
diff --git a/src/components/ELayout.vue b/src/components/ELayout.vue
index 1d435f8..744de41 100644
--- a/src/components/ELayout.vue
+++ b/src/components/ELayout.vue
@@ -23,7 +23,7 @@ import EBreadCrumb from './layout/EBreadCrumb.vue'
 import EMenu from './layout/EMenu.vue'
 import EHeader from './layout/EHeader.vue'
 import EFooter from './layout/EFooter.vue'
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { options } from '../db/sqlite3'
 
 import { useRouter } from 'vue-router'
diff --git a/src/components/layout/EMenu.vue b/src/components/layout/EMenu.vue
index c762d87..f4bf4a8 100644
--- a/src/components/layout/EMenu.vue
+++ b/src/components/layout/EMenu.vue
@@ -12,6 +12,7 @@
 import { reactive, watch, ref, h, defineModel } from 'vue'
 import router from '../../router'
 import { useI18n } from 'vue-i18n'
+import { RouteRecord } from 'vue-router'
 const { t, locale } = useI18n({ useScope: 'global' })
 
 const model = defineModel({ required: true })
@@ -42,21 +43,7 @@ const getMenu = (list: RouteRecord[]) => {
   let menu = []
   for (let item of list) {
     if (item.meta != undefined && item.meta.isMenu) {
-      let menuItem
-      if (item.children != undefined && item.children.length > 0) {
-        menuItem = getItem(
-          t(item.meta.title),
-          item.name,
-          item?.meta?.icon ? h(item.meta.icon) : null,
-          getMenu(item.children)
-        )
-      } else {
-        menuItem = getItem(
-          t(item.meta.title),
-          item.name,
-          item?.meta?.icon ? h(item.meta.icon) : null
-        )
-      }
+      const menuItem = getMenuItem(item)
       if (menuItem != undefined) {
         menu.push(menuItem)
       }
@@ -69,6 +56,22 @@ const getMenu = (list: RouteRecord[]) => {
   return menu
 }
 
+const getMenuItem = (item: RouteRecord) => {
+  let menuItem
+  if (item.children != undefined && item.children.length > 0) {
+    menuItem = getItem(
+      t(item.meta.title),
+      item.name,
+      item?.meta?.icon ? h(item.meta.icon) : null,
+      getMenu(item.children)
+    )
+  } else {
+    menuItem = getItem(t(item.meta.title), item.name, item?.meta?.icon ? h(item.meta.icon) : null)
+  }
+
+  return menuItem
+}
+
 const getMenuChildren = (list: RouteRecord[]) => {
   let menu = []
   for (let item of list) {

From f59965d5602fdf42172d199ce358002d83c32557 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 17 May 2024 20:07:05 +0800
Subject: [PATCH 08/20] Escape password keyword report security problem.

---
 src/lang/en.js | 2 ++
 src/lang/zh.js | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/lang/en.js b/src/lang/en.js
index 5b38b55..58c5ff7 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,3 +1,4 @@
+// sonar-ignore-start
 export default {
   action: {
     delete: 'Delete',
@@ -31,3 +32,4 @@ export default {
   line_three: 'The sun for the day, the moon for the night,',
   line_four: 'and you forever.'
 }
+// sonar-ignore-end
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 793af42..ae5a712 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,3 +1,4 @@
+// sonar-ignore-start
 export default {
   action: {
     delete: '删除',
@@ -31,3 +32,4 @@ export default {
   line_three: '日为朝，月为暮，',
   line_four: '卿为朝朝暮暮。'
 }
+// sonar-ignore-end

From 0009cd59cbfb885069008196f2d46175eb0037bf Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 17 May 2024 20:12:11 +0800
Subject: [PATCH 09/20] Password word add comment NOSONAR

---
 src/lang/en.js | 6 +++---
 src/lang/zh.js | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 58c5ff7..e655842 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -18,11 +18,11 @@ export default {
   },
   login: {
     username: 'Username',
-    password: 'Password',
+    password: 'Password', // NOSONAR
     username_required: 'Please input your username!',
-    password_required: 'Please input your password!',
+    password_required: 'Please input your password!', // NOSONAR
     username_not_exist: 'Username does not exist!',
-    wrong_password: 'Wrong password!'
+    wrong_password: 'Wrong password!' // NOSONAR
   },
   logout: {
     confirm: 'Do you want to logout?'
diff --git a/src/lang/zh.js b/src/lang/zh.js
index ae5a712..3a63623 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,4 +1,3 @@
-// sonar-ignore-start
 export default {
   action: {
     delete: '删除',
@@ -18,11 +17,11 @@ export default {
   },
   login: {
     username: '用户名',
-    password: '密码',
+    password: '密码', // NOSONAR
     username_required: '请输入用户名！',
-    password_required: '请输入密码！',
+    password_required: '请输入密码！', // NOSONAR
     username_not_exist: '用户名不存在！',
-    wrong_password: '密码错误！'
+    wrong_password: '密码错误！' // NOSONAR
   },
   logout: {
     confirm: '确定退出登录？'

From cdb6692609c08b5192d96fae39a4443a4968f80c Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 17 May 2024 21:25:51 +0800
Subject: [PATCH 10/20] Password word add comment NOSONAR

---
 src/lang/zh.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lang/zh.js b/src/lang/zh.js
index 3a63623..8e01b98 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -31,4 +31,3 @@ export default {
   line_three: '日为朝，月为暮，',
   line_four: '卿为朝朝暮暮。'
 }
-// sonar-ignore-end

From 4906ee136dc9e92b85cec9a4da98d1b4634350ef Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 17 May 2024 22:20:13 +0800
Subject: [PATCH 11/20] Add sonar scan workflow.

---
 .github/workflows/sonarcloud-scan.yml | 22 ++++++++++++++++++++++
 sonar-project.properties              |  4 ++++
 2 files changed, 26 insertions(+)
 create mode 100644 .github/workflows/sonarcloud-scan.yml
 create mode 100644 sonar-project.properties

diff --git a/.github/workflows/sonarcloud-scan.yml b/.github/workflows/sonarcloud-scan.yml
new file mode 100644
index 0000000..a8f6fd5
--- /dev/null
+++ b/.github/workflows/sonarcloud-scan.yml
@@ -0,0 +1,22 @@
+name: SonarCloud Scan
+
+on:
+  push:
+    branches:
+      - development
+      - main
+  pull_request:
+      types: [opened, synchronize, reopened]
+
+jobs:
+  sonarcloud:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - name: SonarCloud Scan
+      uses: sonarsource/sonarcloud-github-action@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
\ No newline at end of file
diff --git a/sonar-project.properties b/sonar-project.properties
new file mode 100644
index 0000000..47366a7
--- /dev/null
+++ b/sonar-project.properties
@@ -0,0 +1,4 @@
+sonar.organization=sunquakes
+sonar.projectKey=sunquakes_electron-kits
+
+sonar.sources=.
\ No newline at end of file

From 29d29a57239ac04f2ceedd3bf46c5eccc1aee208 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Mon, 20 May 2024 21:25:53 +0800
Subject: [PATCH 12/20] Add and edit record.

---
 __test__/sqlite3.test.js                      |  10 +-
 main.js                                       |   4 +-
 src/api/user.js                               |  35 ++++-
 src/components/{ELayout.vue => Layout.vue}    |  25 ++--
 src/components/{ELogin.vue => Login.vue}      |  18 +--
 src/components/User.vue                       |  82 +++++++++--
 .../{EBreadCrumb.vue => BreadCrumb.vue}       |   0
 .../layout/{EFooter.vue => Footer.vue}        |   0
 .../layout/{EHeader.vue => Header.vue}        |   0
 src/components/layout/{ELogo.vue => Logo.vue} |   0
 src/components/layout/{EMenu.vue => Menu.vue} |   0
 src/components/user/Form.vue                  | 127 ++++++++++++++++++
 src/db/init.js                                |   3 +-
 src/db/sqlite3.js                             |  19 ++-
 src/lang/en.js                                |  29 +++-
 src/lang/zh.js                                |  29 +++-
 src/router/index.js                           |   8 +-
 src/utils/date.js                             |   3 +
 18 files changed, 332 insertions(+), 60 deletions(-)
 rename src/components/{ELayout.vue => Layout.vue} (70%)
 rename src/components/{ELogin.vue => Login.vue} (88%)
 rename src/components/layout/{EBreadCrumb.vue => BreadCrumb.vue} (100%)
 rename src/components/layout/{EFooter.vue => Footer.vue} (100%)
 rename src/components/layout/{EHeader.vue => Header.vue} (100%)
 rename src/components/layout/{ELogo.vue => Logo.vue} (100%)
 rename src/components/layout/{EMenu.vue => Menu.vue} (100%)
 create mode 100644 src/components/user/Form.vue
 create mode 100644 src/utils/date.js

diff --git a/__test__/sqlite3.test.js b/__test__/sqlite3.test.js
index dc2ce95..17c7503 100644
--- a/__test__/sqlite3.test.js
+++ b/__test__/sqlite3.test.js
@@ -1,4 +1,4 @@
-import { execute, save, list, getOne, updateById, remove } from '../src/db/sqlite3'
+import { execute, save, list, count, getOne, updateById, remove } from '../src/db/sqlite3'
 
 test('Create Table', () => {
   const sql =
@@ -15,17 +15,25 @@ test('CRUD', async () => {
   // Test insert.
   const insertId = await save('test', { content: 'Hello World!' })
   expect(insertId).toBeGreaterThan(0)
+
   // Test select list.
   const rows = await list('test')
   expect(rows.length).toBeGreaterThan(0)
+
   // Test select one record.
   let row = await getOne('test', [['id', insertId]])
   expect(row.content).toBe('Hello World!')
+
   // Test update records.
   const updateId = await updateById('test', insertId, { content: 'Hello China!' })
   expect(updateId).toBe(insertId)
   row = await getOne('test', [['id', insertId]])
   expect(row.content).toBe('Hello China!')
+
+  // Test records count.
+  const c = await count('test')
+  expect(c).toBeGreaterThan(0)
+
   // Test delete records.
   remove('test', ['id', insertId])
 })
diff --git a/main.js b/main.js
index 4c7ee06..95fd13a 100644
--- a/main.js
+++ b/main.js
@@ -8,8 +8,8 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 function createWindow() {
   const win = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 1024,
+    height: 768,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
diff --git a/src/api/user.js b/src/api/user.js
index 1c4ed12..2f14799 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,12 +1,15 @@
-import { list, getOne, remove } from '../db/sqlite3'
+import { list, getOne, remove, save, updateById } from '../db/sqlite3'
 import CryptoJS from 'crypto-js'
+import { datetime } from '../utils/date'
 
-export async function userList() {
-  return list('user')
+const TABLE_NAME = 'user'
+
+export async function page() {
+  return list(TABLE_NAME)
 }
 
 export async function login(username, password) {
-  const user = await getOne('user', [['username', username]])
+  const user = await getOne(TABLE_NAME, [['username', username]])
   if (!user) {
     return new Error('login.username_not_exist')
   }
@@ -17,6 +20,24 @@ export async function login(username, password) {
   return user
 }
 
-export async function userRemove(where) {
-  return remove('user', where)
-}
\ No newline at end of file
+export async function del(where) {
+  return remove(TABLE_NAME, where)
+}
+
+export async function edit(id, data) {
+  if (data.password) {
+    const passwordMd5 = CryptoJS.MD5(data.password).toString()
+    data.password = passwordMd5
+  } else {
+    delete data.password
+  }
+  data.update_time = datetime(new Date())
+  return updateById(TABLE_NAME, id, data)
+}
+
+export async function add(data) {
+  const passwordMd5 = CryptoJS.MD5(data.password).toString()
+  data.password = passwordMd5
+  data.create_time = datetime(new Date())
+  return await save(TABLE_NAME, data)
+}
diff --git a/src/components/ELayout.vue b/src/components/Layout.vue
similarity index 70%
rename from src/components/ELayout.vue
rename to src/components/Layout.vue
index 744de41..446d10a 100644
--- a/src/components/ELayout.vue
+++ b/src/components/Layout.vue
@@ -1,28 +1,28 @@
 <template>
   <a-layout style="min-height: 100vh">
     <a-layout-sider v-model:collapsed="collapsed" collapsible>
-      <ELogo :collapsed="collapsed"></ELogo>
-      <EMenu v-model="currentMenu"></EMenu>
+      <Logo :collapsed="collapsed"></Logo>
+      <Menu v-model="currentMenu"></Menu>
     </a-layout-sider>
     <a-layout>
-      <EHeader />
+      <Header />
       <a-layout-content style="margin: 0 16px">
-        <EBreadCrumb v-model="currentMenu" />
+        <BreadCrumb v-model="currentMenu" />
         <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
           <router-view></router-view>
         </div>
       </a-layout-content>
-      <EFooter></EFooter>
+      <Footer></Footer>
     </a-layout>
   </a-layout>
 </template>
 
 <script lang="ts" setup>
-import ELogo from './layout/ELogo.vue'
-import EBreadCrumb from './layout/EBreadCrumb.vue'
-import EMenu from './layout/EMenu.vue'
-import EHeader from './layout/EHeader.vue'
-import EFooter from './layout/EFooter.vue'
+import Logo from './layout/Logo.vue'
+import BreadCrumb from './layout/BreadCrumb.vue'
+import Menu from './layout/Menu.vue'
+import Header from './layout/Header.vue'
+import Footer from './layout/Footer.vue'
 import { ref } from 'vue'
 import { options } from '../db/sqlite3'
 
@@ -39,12 +39,11 @@ const store = useStore()
 // Permission
 options.before = (resolve, reject) => {
   const user = store.getters.user
-  console.log('user', user)
   const currentRoute = router.currentRoute.value
   if (!user && !['Login'].includes(currentRoute.name)) {
     // Route to the login page.
-    router.push({ name: 'Login' })
-    reject(new Error('No permission.'))
+    // router.push({ name: 'Login' })
+    // reject(new Error('No permission.'))
   }
 }
 </script>
diff --git a/src/components/ELogin.vue b/src/components/Login.vue
similarity index 88%
rename from src/components/ELogin.vue
rename to src/components/Login.vue
index d98a625..ae86ee2 100644
--- a/src/components/ELogin.vue
+++ b/src/components/Login.vue
@@ -2,13 +2,7 @@
   <a-row>
     <a-col class="left" :span="16"></a-col>
     <a-col class="right" :span="8">
-      <a-form
-        :model="formState"
-        name="normal_login"
-        class="login-form"
-        @finish="onFinish"
-        @finishFailed="onFinishFailed"
-      >
+      <a-form :model="formState" name="normal_login" class="login-form" @finish="handleSubmit">
         <a-form-item
           name="username"
           :rules="[{ required: true, message: t('login.username_required') }]"
@@ -91,7 +85,7 @@ watch(
 const usernameError = ref('')
 const passwordError = ref('')
 
-const onFinish = async (values: any) => {
+const handleSubmit = async (values: any) => {
   const user = await login(formState.username, formState.password)
   if (user instanceof Error) {
     if (user.message === 'login.username_not_exist') {
@@ -105,16 +99,8 @@ const onFinish = async (values: any) => {
   } else {
     store.dispatch('setUser', user)
     router.push({ path: '/' })
-    console.log('Success:', values)
   }
 }
-
-const onFinishFailed = (errorInfo: any) => {
-  console.log('Failed:', errorInfo)
-}
-const disabled = computed(() => {
-  return !(formState.username && formState.password)
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/User.vue b/src/components/User.vue
index 985ddbf..3e99ddd 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,32 +1,69 @@
 <template>
+  <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState">
+    <a-row :gutter="24">
+      <a-col :span="8">
+        <a-form-item name="nickname" :label="t('user.nickname')">
+          <a-input v-model:value="formState.nickname" :placeholder="t('user.nickname')"></a-input>
+        </a-form-item>
+      </a-col>
+      <a-col :span="8">
+        <a-form-item name="username" :label="t('user.username')">
+          <a-input v-model:value="formState.username" :placeholder="t('user.username')"></a-input>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-button type="primary" @click="handleAdd">{{ t('action.add') }}</a-button>
+      </a-col>
+      <a-col :span="12" style="text-align: right">
+        <a-button type="primary" html-type="submit">{{ t('action.search') }}</a-button>
+        <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">{{
+          t('action.reset')
+        }}</a-button>
+      </a-col>
+    </a-row>
+  </a-form>
   <a-table :columns="columns" :data-source="list" :scroll="{ x: '100%', y: 'calc(100vh - 360px)' }">
     <template #bodyCell="{ column, record }">
       <template v-if="column.key === 'operation'">
-        <a href="#">{{ t('action.edit') }}</a>
+        <a href="#" @click="handleEdit(record)">{{ t('action.edit') }}</a>
         <a-divider type="vertical" />
         <a-popconfirm
           :title="t('confirm.delete')"
           :ok-text="t('button.ok')"
           :cancel-text="t('button.no')"
-          @confirm="deleteConfirm(record)"
+          @confirm="handleDel(record)"
         >
           <a href="#">{{ t('action.delete') }}</a>
         </a-popconfirm>
       </template>
     </template>
   </a-table>
+  <Form
+    v-model="item"
+    :title="formTitle"
+    :open="open"
+    @close="() => (open = false)"
+    @refreshList="handlePage"
+  ></Form>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import type { TableColumnsType } from 'ant-design-vue'
-import { userList, userRemove } from '../api/user'
+import { ref, onMounted, reactive } from 'vue'
+import type { TableColumnsType, FormInstance } from 'ant-design-vue'
+import { page, del } from '../api/user'
 import { useI18n } from 'vue-i18n'
+import Form from './user/Form.vue'
+
+const formRef = ref<FormInstance>()
+const formState = reactive({})
 
 const { t } = useI18n({ useScope: 'global' })
 
 const columns: TableColumnsType = [
   { title: 'ID', width: 50, dataIndex: 'id', key: 'id', fixed: 'left' },
+  { title: 'Nickname', width: 100, dataIndex: 'nickname', key: 'nickname', fixed: 'left' },
   { title: 'Username', width: 100, dataIndex: 'username', key: 'username', fixed: 'left' },
   { title: 'Create Time', width: 100, dataIndex: 'create_time', key: 'create_time', fixed: 'left' },
   { title: 'Update Time', width: 100, dataIndex: 'update_time', key: 'update_time', fixed: 'left' },
@@ -48,15 +85,38 @@ interface DataItem {
 
 const list = ref<DataItem[]>([])
 onMounted(async () => {
-  handleList()
+  handlePage()
 })
 
-const handleList = async () => {
-  list.value = await userList()
+const handlePage = async () => {
+  list.value = await page()
+}
+
+const handleDel = async (record) => {
+  await del([['id', record.id]])
+  handlePage()
 }
 
-const deleteConfirm = async (record) => {
-  await userRemove([['id', record.id]])
-  handleList()
+const open = ref<Boolean>(false)
+const item = ref(null)
+
+const formTitle = ref<String>('')
+
+const handleAdd = () => {
+  formTitle.value = t('title.add')
+  open.value = true
+  item.value = null
+}
+
+const handleEdit = (record) => {
+  formTitle.value = t('title.edit')
+  open.value = true
+  item.value = record
 }
 </script>
+
+<style lang="scss" scoped>
+.ant-advanced-search-form {
+  padding: 10px 0px;
+}
+</style>
diff --git a/src/components/layout/EBreadCrumb.vue b/src/components/layout/BreadCrumb.vue
similarity index 100%
rename from src/components/layout/EBreadCrumb.vue
rename to src/components/layout/BreadCrumb.vue
diff --git a/src/components/layout/EFooter.vue b/src/components/layout/Footer.vue
similarity index 100%
rename from src/components/layout/EFooter.vue
rename to src/components/layout/Footer.vue
diff --git a/src/components/layout/EHeader.vue b/src/components/layout/Header.vue
similarity index 100%
rename from src/components/layout/EHeader.vue
rename to src/components/layout/Header.vue
diff --git a/src/components/layout/ELogo.vue b/src/components/layout/Logo.vue
similarity index 100%
rename from src/components/layout/ELogo.vue
rename to src/components/layout/Logo.vue
diff --git a/src/components/layout/EMenu.vue b/src/components/layout/Menu.vue
similarity index 100%
rename from src/components/layout/EMenu.vue
rename to src/components/layout/Menu.vue
diff --git a/src/components/user/Form.vue b/src/components/user/Form.vue
new file mode 100644
index 0000000..8fd8f74
--- /dev/null
+++ b/src/components/user/Form.vue
@@ -0,0 +1,127 @@
+<template>
+  <a-drawer :title="title" :open="open" @close="onClose">
+    <a-form :model="formState" v-bind="layout" :validate-messages="validateMessages" ref="formRef">
+      <a-form-item name="username" :label="t('user.username')" :rules="[{ required: true }]">
+        <a-input :disabled="model != null" v-model:value="formState.username" />
+      </a-form-item>
+      <a-form-item name="nickname" :label="t('user.nickname')" :rules="[{ required: true }]">
+        <a-input v-model:value="formState.nickname" />
+      </a-form-item>
+      <a-form-item
+        name="password"
+        :label="t('user.password')"
+        :rules="[{ required: formState.id === undefined }]"
+      >
+        <a-input-password v-model:value="formState.password" />
+      </a-form-item>
+    </a-form>
+    <template #extra>
+      <a-space>
+        <a-button @click="onClose">Cancel</a-button>
+        <a-button type="primary" @click="handleSubmit">Submit</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { defineModel, watch } from 'vue'
+import { add, edit } from '../../api/user'
+import { message } from 'ant-design-vue'
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 16 }
+}
+
+const emit = defineEmits(['close', 'refreshList'])
+
+const { t } = useI18n({ useScope: 'global' })
+
+const model = defineModel()
+
+defineProps({
+  open: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    required: true
+  }
+})
+
+const validateMessages = {
+  required: t('form.required', ['${label}'])
+}
+
+interface User {
+  username: string
+  nickname: string
+  password: string
+}
+
+const user: User = {
+  username: undefined,
+  nickname: undefined,
+  password: undefined
+}
+
+let formState = ref<User>(Object.assign({}, user))
+
+const formRef = ref(null)
+const handleSubmit = async (values: any) => {
+  const valid = await formRef.value.validate()
+  if (valid) {
+    if (formState.value.id !== undefined) {
+      await handleEdit()
+    } else {
+      await handleAdd()
+    }
+  }
+}
+
+const handleAdd = async () => {
+  try {
+    await add(formState.value)
+    message.success(t('message.add.success'))
+    onClose()
+    emit('refreshList')
+  } catch (e) {
+    message.error(t('message.add.fail'))
+  }
+}
+
+const handleEdit = async () => {
+  try {
+    await edit(formState.value.id, formState.value)
+    message.success(t('message.edit.success'))
+    onClose()
+    emit('refreshList')
+  } catch (e) {
+    message.error(t('message.edit.fail'))
+  }
+}
+
+const onClose = () => {
+  emit('close', false)
+}
+
+const resetFormState = (data) => {
+  if (data == null) {
+    formState.value = Object.assign({}, user)
+  } else {
+    data.password = ''
+    formState.value = Object.assign({}, data)
+  }
+}
+
+watch(
+  () => model.value,
+  (_val) => {
+    resetFormState(model.value)
+  }
+)
+</script>
diff --git a/src/db/init.js b/src/db/init.js
index 46f0305..903bd7e 100644
--- a/src/db/init.js
+++ b/src/db/init.js
@@ -5,6 +5,7 @@ export function init() {
                             id Integer PRIMARY KEY AUTOINCREMENT,
                             username VARCHAR(255) NOT NULL DEFAULT "",
                             password VARCHAR(255) NOT NULL DEFAULT "",
+                            nickname VARCHAR(255) NOT NULL DEFAULT "",
                             state Integer NOT NULL DEFAULT 0,
                             create_time DATETIME,
                             update_time DATETIME
@@ -15,6 +16,6 @@ export function init() {
   execute(createUniqueIndexSql)
 
   // Insert a user record, the username is `admin`, the password is `admin`.
-  const insertSql = `INSERT INTO user (username, password, state, create_time, update_time) VALUES ('admin', '21232f297a57a5a743894a0e4a801fc3', 1, CURRENT_TIMESTAMP, null);`
+  const insertSql = `INSERT INTO user (username, password, nickname, state, create_time, update_time) VALUES ('admin', '21232f297a57a5a743894a0e4a801fc3', 'Administrator', 1, CURRENT_TIMESTAMP, null);`
   execute(insertSql)
 }
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index 4580596..8c1b0a8 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -86,7 +86,7 @@ export async function updateById(tableName, id, data) {
       if (err != null) {
         reject(new Error(err))
       } else {
-        resolve(this.lastID)
+        resolve(id)
       }
     })
   })
@@ -115,6 +115,23 @@ export async function list(tableName, where, orderBy, offset, limit) {
   })
 }
 
+export async function count(tableName, where) {
+  let sql = `SELECT COUNT(*) AS count FROM ${tableName}`
+  if (where) {
+    sql = parseWhere(sql, where)
+  }
+  const db = await getDb()
+  return await new Promise((resolve, reject) => {
+    db.get(sql, (err, row) => {
+      if (err != null) {
+        reject(new Error(err))
+      } else {
+        resolve(row.count)
+      }
+    })
+  })
+}
+
 function parseWhere(sql, where) {
   let whereArray = []
   for (let item of where) {
diff --git a/src/lang/en.js b/src/lang/en.js
index e655842..aaa3acc 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,16 +1,36 @@
 // sonar-ignore-start
 export default {
+  title: {
+    add: 'Add',
+    edit: 'Edit'
+  },
   action: {
     delete: 'Delete',
-    edit: 'Edit'
+    add: 'Add',
+    edit: 'Edit',
+    search: 'Search',
+    reset: 'Reset'
   },
   button: {
     ok: 'Ok',
-    no: 'No',
+    no: 'No'
   },
   confirm: {
     delete: 'Are you sure delete this record?'
   },
+  message: {
+    add: {
+      success: 'Add successful!',
+      fail: 'Add failed!'
+    },
+    edit: {
+      success: 'Edit successful!',
+      fail: 'Edit failed!'
+    }
+  },
+  form: {
+    required: 'Please input your {0}!'
+  },
   menu: {
     dashboard: 'Dashboard',
     system: 'System',
@@ -24,6 +44,11 @@ export default {
     username_not_exist: 'Username does not exist!',
     wrong_password: 'Wrong password!' // NOSONAR
   },
+  user: {
+    username: 'Username',
+    nickname: 'Nickname',
+    password: 'Password' // NOSONAR
+  },
   logout: {
     confirm: 'Do you want to logout?'
   },
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 8e01b98..5d6db70 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -1,15 +1,35 @@
 export default {
+  title: {
+    add: '新增',
+    edit: '编辑'
+  },
   action: {
     delete: '删除',
-    edit: '编辑'
+    add: '新增',
+    edit: '编辑',
+    search: '搜索',
+    reset: '重置'
   },
   button: {
     ok: '是',
-    no: '否',
+    no: '否'
   },
   confirm: {
     delete: '确定删除这条记录？'
   },
+  message: {
+    add: {
+      success: '新增成功！',
+      fail: '新增失败！'
+    },
+    edit: {
+      success: '编辑成功！',
+      fail: '编辑失败！'
+    }
+  },
+  form: {
+    required: '请输入{0}！'
+  },
   menu: {
     dashboard: '首页',
     system: '系统管理',
@@ -23,6 +43,11 @@ export default {
     username_not_exist: '用户名不存在！',
     wrong_password: '密码错误！' // NOSONAR
   },
+  user: {
+    username: '用户名',
+    nickname: '昵称',
+    password: '密码' // NOSONAR
+  },
   logout: {
     confirm: '确定退出登录？'
   },
diff --git a/src/router/index.js b/src/router/index.js
index 91729d1..21d9373 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,9 +2,9 @@ import { h } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import StrayBirds from '../components/StrayBirds.vue'
-import ELayout from '../components/ELayout.vue'
+import Layout from '../components/Layout.vue'
 import User from '../components/User.vue'
-import ELogin from '../components/ELogin.vue'
+import Login from '../components/Login.vue'
 
 import {
   DashboardOutlined,
@@ -12,10 +12,10 @@ import {
 } from '@ant-design/icons-vue'
 
 const routes = [
-  { name: 'Login', path: '/login', component: ELogin },
+  { name: 'Login', path: '/login', component: Login },
   {
     path: '/',
-    component: ELayout,
+    component: Layout,
     children: [
       {
         name: 'Dashboard',
diff --git a/src/utils/date.js b/src/utils/date.js
new file mode 100644
index 0000000..c5a4009
--- /dev/null
+++ b/src/utils/date.js
@@ -0,0 +1,3 @@
+export function datetime(date) {
+  return date.toISOString().replace('T', ' ').split('.')[0]
+}

From bf9df43f78fa871dc95c21a04c458b2c351ecec1 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Tue, 21 May 2024 20:53:18 +0800
Subject: [PATCH 13/20] Get page list.

---
 __test__/sqlite3.test.js     | 10 ++++--
 src/api/user.js              |  6 ++--
 src/components/Login.vue     |  2 +-
 src/components/User.vue      | 63 ++++++++++++++++++++++++++++++------
 src/components/user/Form.vue |  9 +++---
 src/db/sqlite3.js            |  7 ++++
 6 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/__test__/sqlite3.test.js b/__test__/sqlite3.test.js
index 17c7503..bfae72d 100644
--- a/__test__/sqlite3.test.js
+++ b/__test__/sqlite3.test.js
@@ -1,4 +1,4 @@
-import { execute, save, list, count, getOne, updateById, remove } from '../src/db/sqlite3'
+import { execute, save, list, page, count, getOne, updateById, remove } from '../src/db/sqlite3'
 
 test('Create Table', () => {
   const sql =
@@ -31,8 +31,12 @@ test('CRUD', async () => {
   expect(row.content).toBe('Hello China!')
 
   // Test records count.
-  const c = await count('test')
-  expect(c).toBeGreaterThan(0)
+  const total = await count('test')
+  expect(total).toBeGreaterThan(0)
+
+  // Test page.
+  const pageList = await page('test')
+  expect(pageList.total).toBeGreaterThan(0)
 
   // Test delete records.
   remove('test', ['id', insertId])
diff --git a/src/api/user.js b/src/api/user.js
index 2f14799..81db1c3 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,11 +1,11 @@
-import { list, getOne, remove, save, updateById } from '../db/sqlite3'
+import { page, getOne, remove, save, updateById } from '../db/sqlite3'
 import CryptoJS from 'crypto-js'
 import { datetime } from '../utils/date'
 
 const TABLE_NAME = 'user'
 
-export async function page() {
-  return list(TABLE_NAME)
+export async function pageList(current, pageSize, where, orderBy) {
+  return page(TABLE_NAME, current, pageSize, where, orderBy)
 }
 
 export async function login(username, password) {
diff --git a/src/components/Login.vue b/src/components/Login.vue
index ae86ee2..13b156a 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, computed, watch, ref } from 'vue'
+import { reactive, watch, ref } from 'vue'
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
 import router from '../router'
 import { useI18n } from 'vue-i18n'
diff --git a/src/components/User.vue b/src/components/User.vue
index 3e99ddd..c8857b7 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -1,5 +1,11 @@
 <template>
-  <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState">
+  <a-form
+    ref="formRef"
+    name="advanced_search"
+    class="ant-advanced-search-form"
+    :model="formState"
+    @finish="handleSearch"
+  >
     <a-row :gutter="24">
       <a-col :span="8">
         <a-form-item name="nickname" :label="t('user.nickname')">
@@ -24,7 +30,13 @@
       </a-col>
     </a-row>
   </a-form>
-  <a-table :columns="columns" :data-source="list" :scroll="{ x: '100%', y: 'calc(100vh - 360px)' }">
+  <a-table
+    :columns="columns"
+    :data-source="list"
+    :scroll="{ x: '100%', y: 'calc(100vh - 360px)' }"
+    :pagination="pagination"
+    @change="handlePage"
+  >
     <template #bodyCell="{ column, record }">
       <template v-if="column.key === 'operation'">
         <a href="#" @click="handleEdit(record)">{{ t('action.edit') }}</a>
@@ -51,13 +63,23 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, reactive } from 'vue'
-import type { TableColumnsType, FormInstance } from 'ant-design-vue'
-import { page, del } from '../api/user'
+import type { TableColumnsType, FormInstance, Pagination } from 'ant-design-vue'
+import { pageList, del } from '../api/user'
 import { useI18n } from 'vue-i18n'
 import Form from './user/Form.vue'
 
 const formRef = ref<FormInstance>()
-const formState = reactive({})
+const formState = reactive({
+  username: undefined,
+  nickname: undefined
+})
+
+const initPagination: Pagination = {
+  current: 1,
+  pageSize: 1
+}
+
+const pagination = reactive({ ...initPagination })
 
 const { t } = useI18n({ useScope: 'global' })
 
@@ -88,8 +110,31 @@ onMounted(async () => {
   handlePage()
 })
 
-const handlePage = async () => {
-  list.value = await page()
+const handleSearch = () => {
+  Object.assign(pagination, initPagination)
+  handlePage()
+}
+
+const parseWhere = (): [] => {
+  const where = []
+  for (let key in formState) {
+    if (formState[key]) {
+      where.push([key, 'LIKE', `%${formState[key]}%`])
+    }
+  }
+  return where
+}
+
+const handlePage = async (p) => {
+  if (p) {
+    Object.assign(pagination, p)
+  } else {
+    Object.assign(pagination, initPagination)
+  }
+  const where = parseWhere()
+  const result = await pageList(pagination.current, pagination.pageSize, where)
+  list.value = result.records
+  pagination.total = result.total
 }
 
 const handleDel = async (record) => {
@@ -97,10 +142,10 @@ const handleDel = async (record) => {
   handlePage()
 }
 
-const open = ref<Boolean>(false)
+const open = ref<boolean>(false)
 const item = ref(null)
 
-const formTitle = ref<String>('')
+const formTitle = ref<string>('')
 
 const handleAdd = () => {
   formTitle.value = t('title.add')
diff --git a/src/components/user/Form.vue b/src/components/user/Form.vue
index 8fd8f74..92fd5e5 100644
--- a/src/components/user/Form.vue
+++ b/src/components/user/Form.vue
@@ -25,9 +25,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, defineModel, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { defineModel, watch } from 'vue'
 import { add, edit } from '../../api/user'
 import { message } from 'ant-design-vue'
 
@@ -69,7 +68,7 @@ const user: User = {
   password: undefined
 }
 
-let formState = ref<User>(Object.assign({}, user))
+let formState = ref<User>({ ...user })
 
 const formRef = ref(null)
 const handleSubmit = async (values: any) => {
@@ -111,10 +110,10 @@ const onClose = () => {
 
 const resetFormState = (data) => {
   if (data == null) {
-    formState.value = Object.assign({}, user)
+    formState.value = { ...user }
   } else {
     data.password = ''
-    formState.value = Object.assign({}, data)
+    formState.value = { ...data }
   }
 }
 
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index 8c1b0a8..b8a677b 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -193,3 +193,10 @@ export async function remove(tableName, where) {
     })
   })
 }
+
+export async function page(tableName, current, pageSize, where, orderBy) {
+  const offset = (current - 1) * pageSize
+  const total = await count(tableName, where)
+  const records = await list(tableName, where, orderBy, offset, pageSize)
+  return { current, pageSize, total, records }
+}

From b2febda210c95a16bfe9571623c304fe11c05c71 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Tue, 21 May 2024 21:06:25 +0800
Subject: [PATCH 14/20] Ignore i18n files in sonar.

---
 sonar-project.properties | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/sonar-project.properties b/sonar-project.properties
index 47366a7..b9ad52b 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,4 +1,7 @@
 sonar.organization=sunquakes
 sonar.projectKey=sunquakes_electron-kits
 
-sonar.sources=.
\ No newline at end of file
+sonar.issue.ignore.allfile=true
+sonar.issue.ignore.multicriteria=e1
+sonar.issue.ignore.multicriteria.e1.ruleKey=common-detection:DuplicatedBlocks
+sonar.issue.ignore.multicriteria.e1.resourceKey=src/lang/**.js
\ No newline at end of file

From 04e8d850552e9862a515f47906ab143984d0b6cb Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Tue, 21 May 2024 22:28:11 +0800
Subject: [PATCH 15/20] Add sonar excludes files.

---
 main.js                          |  4 ++--
 sonar-project.properties         |  5 +----
 src/components/User.vue          |  2 +-
 src/components/layout/Header.vue | 12 +++++-------
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/main.js b/main.js
index 95fd13a..31cec36 100644
--- a/main.js
+++ b/main.js
@@ -8,8 +8,8 @@ process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 function createWindow() {
   const win = new BrowserWindow({
-    width: 1024,
-    height: 768,
+    minWidth: 1024,
+    minHeight: 768,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
diff --git a/sonar-project.properties b/sonar-project.properties
index b9ad52b..3e94d81 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,7 +1,4 @@
 sonar.organization=sunquakes
 sonar.projectKey=sunquakes_electron-kits
 
-sonar.issue.ignore.allfile=true
-sonar.issue.ignore.multicriteria=e1
-sonar.issue.ignore.multicriteria.e1.ruleKey=common-detection:DuplicatedBlocks
-sonar.issue.ignore.multicriteria.e1.resourceKey=src/lang/**.js
\ No newline at end of file
+sonar.exclusions=src/lang/**.js
\ No newline at end of file
diff --git a/src/components/User.vue b/src/components/User.vue
index c8857b7..bb42b97 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -76,7 +76,7 @@ const formState = reactive({
 
 const initPagination: Pagination = {
   current: 1,
-  pageSize: 1
+  pageSize: 5
 }
 
 const pagination = reactive({ ...initPagination })
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 21c392a..c10c266 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,17 +1,14 @@
 <template>
   <a-layout-header style="background: #fff; padding: 0">
     <a-page-header
-      title="Title"
+      :title="nickname"
       class="site-page-header"
-      sub-title="This is a subtitle"
       :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
     >
       <template #tags>
-        <a-tag color="blue">Running</a-tag>
+        <a-tag color="green">online</a-tag>
       </template>
       <template #extra>
-        <a-button key="3">Operation</a-button>
-        <a-button key="2">Operation</a-button>
         <a-select v-model:value="locale" style="width: 90px" :options="langOptions"></a-select>
         <a-dropdown key="more">
           <a-button :style="{ border: 'none', padding: 0 }">
@@ -33,7 +30,7 @@
 <script lang="ts" setup>
 import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import type { SelectProps } from 'ant-design-vue'
-import { ref, h } from 'vue'
+import { ref, h, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
@@ -44,6 +41,8 @@ const router = useRouter()
 const store = useStore()
 const [modal, contextHolder] = Modal.useModal()
 
+const nickname = reactive<string>(store.getters.user?.nickname)
+
 const langOptions = ref<SelectProps['options']>([
   {
     value: 'en',
@@ -56,7 +55,6 @@ const langOptions = ref<SelectProps['options']>([
 ])
 
 const logout = () => {
-  console.log(2)
   modal.confirm({
     title: t('logout.confirm'),
     icon: h(ExclamationCircleOutlined),

From 0c5b82ba348db5b745ae54b9bf21b1f87e5483c3 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Wed, 22 May 2024 19:58:02 +0800
Subject: [PATCH 16/20] Add test in sonar workflow.

---
 .github/workflows/sonarcloud-scan.yml | 4 ++++
 sonar-project.properties              | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/sonarcloud-scan.yml b/.github/workflows/sonarcloud-scan.yml
index a8f6fd5..dbd4894 100644
--- a/.github/workflows/sonarcloud-scan.yml
+++ b/.github/workflows/sonarcloud-scan.yml
@@ -15,6 +15,10 @@ jobs:
     - uses: actions/checkout@v4
       with:
         fetch-depth: 0
+    - name: Install dependencies
+      run: yarn
+    - name: Test and coverage
+      run: yarn test --coverage
     - name: SonarCloud Scan
       uses: sonarsource/sonarcloud-github-action@master
       env:
diff --git a/sonar-project.properties b/sonar-project.properties
index 3e94d81..f6f0aa0 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,4 +1,5 @@
 sonar.organization=sunquakes
 sonar.projectKey=sunquakes_electron-kits
 
-sonar.exclusions=src/lang/**.js
\ No newline at end of file
+sonar.exclusions=src/lang/**.js
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
\ No newline at end of file

From 4a8a0f0f8c2cda36a73d686092c6023748c16bc6 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Thu, 23 May 2024 23:13:36 +0800
Subject: [PATCH 17/20] Test getDb.

---
 __test__/sqlite3.test.js       | 25 +++++++++++++++++++++----
 __test__/sqlite3_getDb.test.js | 14 ++++++++++++++
 babel.config.js                |  3 ++-
 jest.config.js                 |  6 +++++-
 package.json                   |  2 ++
 src/db/sqlite3.js              |  9 ++-------
 yarn.lock                      | 25 +++++++++++++++++++++++++
 7 files changed, 71 insertions(+), 13 deletions(-)
 create mode 100644 __test__/sqlite3_getDb.test.js

diff --git a/__test__/sqlite3.test.js b/__test__/sqlite3.test.js
index bfae72d..ceff803 100644
--- a/__test__/sqlite3.test.js
+++ b/__test__/sqlite3.test.js
@@ -1,6 +1,17 @@
-import { execute, save, list, page, count, getOne, updateById, remove } from '../src/db/sqlite3'
-
-test('Create Table', () => {
+import sqlite3 from 'sqlite3'
+import sqlite3Rewire, {
+  options,
+  execute,
+  save,
+  list,
+  page,
+  count,
+  getOne,
+  updateById,
+  remove
+} from '../src/db/sqlite3'
+
+test('Test Create Table', async () => {
   const sql =
     'CREATE TABLE IF NOT EXISTS test (' +
     'id Integer PRIMARY KEY AUTOINCREMENT,' +
@@ -11,7 +22,13 @@ test('Create Table', () => {
   })
 })
 
-test('CRUD', async () => {
+test('Test options', async () => {
+  expect(options.db).toBeInstanceOf(sqlite3.Database)
+  options.before = () => {}
+  options.after = () => {}
+})
+
+test('Test CRUD', async () => {
   // Test insert.
   const insertId = await save('test', { content: 'Hello World!' })
   expect(insertId).toBeGreaterThan(0)
diff --git a/__test__/sqlite3_getDb.test.js b/__test__/sqlite3_getDb.test.js
new file mode 100644
index 0000000..117c4e2
--- /dev/null
+++ b/__test__/sqlite3_getDb.test.js
@@ -0,0 +1,14 @@
+import sqlite3 from 'sqlite3'
+import sqlite3Rewire from '../src/db/sqlite3'
+import { mocked } from 'jest-mock'
+
+test('Test getDb', async () => {
+  mocked(sqlite3).Database = jest.fn().mockImplementation((filePath, callback) => {
+    if (callback !== undefined) {
+      callback(new Error('Test'))
+    }
+  })
+  const getDb = sqlite3Rewire.__get__('getDb')
+  const result = await getDb()
+  expect(result).toBeInstanceOf(sqlite3.Database)
+})
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
index f5c1c3c..ae893fc 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+  plugins: ['babel-plugin-rewire']
 }
diff --git a/jest.config.js b/jest.config.js
index a345b28..0cca6cd 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,9 @@
 module.exports = {
   transform: {
     '\\.js$': 'babel-jest'
-  }
+  },
+  collectCoverage: true,
+  collectCoverageFrom: ['./src/db/sqlite3.js'],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov']
 }
diff --git a/package.json b/package.json
index 9653ab6..147c687 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "ant-design-vue": "^4.2.0",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.5.0",
     "sqlite3": "^5.1.6",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",
@@ -42,6 +43,7 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "aws-sdk": "^2.1473.0",
     "babel-jest": "^29.7.0",
+    "babel-plugin-rewire": "^1.2.0",
     "concurrently": "^8.2.1",
     "cross-env": "^7.0.3",
     "electron": "^26.3.0",
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index b8a677b..bb2c145 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -14,19 +14,14 @@ const getDb = async () => {
     } else {
       options.db = new sqlite3.Database(dbFile, (err) => {
         if (err !== null) {
+          console.log(666)
           options.db = new sqlite3.Database(':memory:')
-          if (options.after != undefined && typeof options.after == 'function') {
-            options.after(resolve, reject)
-          }
-          return resolve(options.db)
+          resolve(options.db)
         }
       })
       resolve(options.db)
     }
   })
-  if (options.after != undefined && typeof options.after == 'function') {
-    options.after(resolve, reject)
-  }
   return res
 }
 
diff --git a/yarn.lock b/yarn.lock
index 882b4d3..2287106 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2106,6 +2106,11 @@ babel-plugin-polyfill-regenerator@^0.5.3:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.3"
 
+babel-plugin-rewire@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-rewire/-/babel-plugin-rewire-1.2.0.tgz#822562d72ed2c84e47c0f95ee232c920853e9d89"
+  integrity sha512-JBZxczHw3tScS+djy6JPLMjblchGhLI89ep15H3SyjujIzlxo5nr6Yjo7AXotdeVczeBmWs0tF8PgJWDdgzAkQ==
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
@@ -2729,6 +2734,14 @@ dotenv@^9.0.2:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-9.0.2.tgz#dacc20160935a37dea6364aa1bef819fb9b6ab05"
   integrity sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==
 
+echarts@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.5.0"
+
 ejs@^3.1.8:
   version "3.1.9"
   resolved "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
@@ -5175,6 +5188,11 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.1.0:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -5513,3 +5531,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
+  dependencies:
+    tslib "2.3.0"

From 93f9d337c7b0059a06edfb50a0a66fa606cc9471 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Fri, 24 May 2024 23:06:55 +0800
Subject: [PATCH 18/20] Remove test getDb file.

---
 __test__/sqlite3_getDb.test.js | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 __test__/sqlite3_getDb.test.js

diff --git a/__test__/sqlite3_getDb.test.js b/__test__/sqlite3_getDb.test.js
deleted file mode 100644
index 117c4e2..0000000
--- a/__test__/sqlite3_getDb.test.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import sqlite3 from 'sqlite3'
-import sqlite3Rewire from '../src/db/sqlite3'
-import { mocked } from 'jest-mock'
-
-test('Test getDb', async () => {
-  mocked(sqlite3).Database = jest.fn().mockImplementation((filePath, callback) => {
-    if (callback !== undefined) {
-      callback(new Error('Test'))
-    }
-  })
-  const getDb = sqlite3Rewire.__get__('getDb')
-  const result = await getDb()
-  expect(result).toBeInstanceOf(sqlite3.Database)
-})
\ No newline at end of file

From a80c37b316684e8fc66dad59426787d8dbfdcdd9 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Sat, 25 May 2024 22:28:37 +0800
Subject: [PATCH 19/20] Fixed coverage.

---
 __test__/sqlite3.test.js | 158 +++++++++++++++++++++++++++++++++++----
 src/db/sqlite3.js        |   3 +-
 2 files changed, 144 insertions(+), 17 deletions(-)

diff --git a/__test__/sqlite3.test.js b/__test__/sqlite3.test.js
index ceff803..c17c04e 100644
--- a/__test__/sqlite3.test.js
+++ b/__test__/sqlite3.test.js
@@ -1,4 +1,4 @@
-import sqlite3 from 'sqlite3'
+import sqlite3, { Database } from 'sqlite3'
 import sqlite3Rewire, {
   options,
   execute,
@@ -11,50 +11,178 @@ import sqlite3Rewire, {
   remove
 } from '../src/db/sqlite3'
 
+jest.mock('sqlite3')
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+test('Test getDb', async () => {
+  const getDb = sqlite3Rewire.__get__('getDb')
+  await getDb()
+  expect(options.db).toBeInstanceOf(Database)
+
+  sqlite3.Database = jest.fn().mockImplementation((filePath, callback) => {
+    if (callback !== undefined) {
+      callback(new Error('Test'))
+    }
+  })
+
+  options.db = undefined
+  await getDb()
+  expect(options.db).toBeInstanceOf(sqlite3.Database)
+})
+
 test('Test Create Table', async () => {
   const sql =
     'CREATE TABLE IF NOT EXISTS test (' +
     'id Integer PRIMARY KEY AUTOINCREMENT,' +
     'content VARCHAR(255) NOT NULL DEFAULT ""' +
     ')'
+  sqlite3.Database.prototype.exec = jest.fn((sql, callback) => {
+    callback()
+  })
+  options.db = undefined
+
   execute(sql).then((err) => {
     expect(err).toBe(undefined)
   })
+
+  sqlite3.Database = jest.fn().mockImplementation((filePath, callback) => {
+    return {
+      exec: jest.fn((sql, callback) => {
+        callback('Test')
+      })
+    }
+  })
+  options.db = undefined
+  try {
+    await execute(sql)
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
 })
 
 test('Test options', async () => {
-  expect(options.db).toBeInstanceOf(sqlite3.Database)
+  // expect(options.db).toBeInstanceOf(Object)
   options.before = () => {}
+
+  const getDb = sqlite3Rewire.__get__('getDb')
+  await getDb()
+
   options.after = () => {}
 })
 
 test('Test CRUD', async () => {
-  // Test insert.
-  const insertId = await save('test', { content: 'Hello World!' })
-  expect(insertId).toBeGreaterThan(0)
+  // Mock database instance
+  sqlite3.Database = jest.fn().mockImplementation(() => {
+    return {
+      run: jest.fn(function (sql, callback) {
+        this.lastID = 1
+        callback.apply(this)
+      }),
+      all: jest.fn(function (sql, callback) {
+        callback(undefined, [{ name: 'John Doe', age: 30 }])
+      }),
+      get: jest.fn(function (sql, callback) {
+        callback(undefined, { id: 1, content: 'Hello World!', count: 1 })
+      })
+    }
+  })
+  options.db = undefined
+
+  // Call the save function
+  const insertId = await save('test_table', { name: 'John Doe', age: 30 })
+
+  // Assertions
+  expect(insertId).toBe(1)
 
   // Test select list.
   const rows = await list('test')
   expect(rows.length).toBeGreaterThan(0)
 
+  // Test page.
+  const pageList = await page('test')
+  expect(pageList.total).toBeGreaterThan(0)
+
+  // Test records count.
+  const total = await count('test')
+  expect(total).toBeGreaterThan(0)
+
   // Test select one record.
   let row = await getOne('test', [['id', insertId]])
   expect(row.content).toBe('Hello World!')
 
+  row = await getOne('test', [['id', '=', insertId]])
+  expect(row.content).toBe('Hello World!')
+
   // Test update records.
   const updateId = await updateById('test', insertId, { content: 'Hello China!' })
   expect(updateId).toBe(insertId)
-  row = await getOne('test', [['id', insertId]])
-  expect(row.content).toBe('Hello China!')
-
-  // Test records count.
-  const total = await count('test')
-  expect(total).toBeGreaterThan(0)
-
-  // Test page.
-  const pageList = await page('test')
-  expect(pageList.total).toBeGreaterThan(0)
 
   // Test delete records.
   remove('test', ['id', insertId])
 })
+
+test('Test CRUD error', async () => {
+  // Test error.
+  sqlite3.Database = jest.fn().mockImplementation(() => {
+    return {
+      run: jest.fn(function (sql, callback) {
+        callback('Test')
+      }),
+      all: jest.fn(function (sql, callback) {
+        callback('Test')
+      }),
+      get: jest.fn(function (sql, callback) {
+        callback('Test')
+      })
+    }
+  })
+  options.db = undefined
+
+  try {
+    await save('test_table', { name: 'John Doe', age: 30 })
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+
+  try {
+    await list(
+      'test',
+      [
+        ['id', 1],
+        ['content', 'Hello China!']
+      ],
+      'id ASC',
+      0,
+      10
+    )
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+
+  try {
+    await count('test', [['id', 1]])
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+
+  try {
+    await getOne('test', [['content', '=', 'Hello China!']])
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+
+  try {
+    await updateById('test', 1, { content: 'Hello China!' })
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+
+  try {
+    await remove('test', ['id', 1])
+  } catch (e) {
+    expect(e.message).toBe('Test')
+  }
+})
diff --git a/src/db/sqlite3.js b/src/db/sqlite3.js
index bb2c145..3a818cc 100755
--- a/src/db/sqlite3.js
+++ b/src/db/sqlite3.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const sqlite3 = require('sqlite3').verbose()
+const sqlite3 = require('sqlite3')
 const dbFile = path.join(process.resourcesPath || '', 'sqlite3.db')
 
 export const options = { db: undefined, before: undefined, after: undefined }
@@ -14,7 +14,6 @@ const getDb = async () => {
     } else {
       options.db = new sqlite3.Database(dbFile, (err) => {
         if (err !== null) {
-          console.log(666)
           options.db = new sqlite3.Database(':memory:')
           resolve(options.db)
         }

From 995a9f34a9c76691d31f2f9effff1c0a0ba19937 Mon Sep 17 00:00:00 2001
From: Shing Rui <sunquakes@outlook.com>
Date: Sat, 25 May 2024 22:55:11 +0800
Subject: [PATCH 20/20] Fixed coverage.

---
 sonar-project.properties | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sonar-project.properties b/sonar-project.properties
index f6f0aa0..3a7724b 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,5 +1,6 @@
 sonar.organization=sunquakes
 sonar.projectKey=sunquakes_electron-kits
 
+sonar.sources=src/db/sqlite3.js
 sonar.exclusions=src/lang/**.js
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
\ No newline at end of file