From f56e5155128706380d93a1f50a729d5cf1ea00ee Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Mon, 8 May 2023 01:01:54 +0800
Subject: [PATCH] feat(dataview): support refresh button, fix #79

---
 packages/client/client/styles/index.scss          |  1 +
 plugins/dataview/client/components/data-table.vue | 12 ++++++++----
 plugins/dataview/client/icons/index.ts            |  2 ++
 plugins/dataview/client/icons/refresh.vue         |  5 +++++
 plugins/dataview/client/index.vue                 | 12 ++++++++++--
 plugins/dataview/package.json                     |  2 +-
 6 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 plugins/dataview/client/icons/refresh.vue

diff --git a/packages/client/client/styles/index.scss b/packages/client/client/styles/index.scss
index 2c03111b..0216a682 100644
--- a/packages/client/client/styles/index.scss
+++ b/packages/client/client/styles/index.scss
@@ -314,6 +314,7 @@ html.dark .el-popper.is-dark {
 .el-table__header-wrapper {
   --el-table-tr-bg-color: var(--card-bg);
   --el-table-header-bg-color: var(--bg2);
+  --el-table-row-hover-bg-color: var(--bg1);
   tr {
     td,
     th {
diff --git a/plugins/dataview/client/components/data-table.vue b/plugins/dataview/client/components/data-table.vue
index de359011..80387f05 100644
--- a/plugins/dataview/client/components/data-table.vue
+++ b/plugins/dataview/client/components/data-table.vue
@@ -10,8 +10,8 @@
       </span>
       <div class="operations">
         <span v-if="existChanges">
-          <k-button solid :disabled="!existValidChanges" @click="onSubmitChanges">应用修改</k-button>
-          <k-button solid type="error" @click="onCancelChanges">取消修改</k-button>
+          <el-button type="primary" :disabled="!existValidChanges" @click="onSubmitChanges">应用修改</el-button>
+          <el-button type="danger" @click="onCancelChanges">取消修改</el-button>
         </span>
         <span v-else>双击单元格修改数据</span>
       </div>
@@ -187,6 +187,10 @@ async function updateData() {
 }
 watchEffect(updateData)
 
+defineExpose({
+  updateData,
+})
+
 const currPage = computed({
   get: () => Math.floor(state.offset / state.pageSize) + 1,
   set: p => state.offset = (p - 1) * state.pageSize
@@ -465,7 +469,7 @@ async function onInsertRow() {
   }
 }
 .operations {
-  .k-button:last-child {
+  .el-button:last-child {
     margin-right: 0;
   }
 }
@@ -492,7 +496,7 @@ async function onInsertRow() {
   }
   .cell-changed {
     &.el-table__cell {
-      padding: 2px;
+      padding: 0 2px;
     }
 
     .cell,
diff --git a/plugins/dataview/client/icons/index.ts b/plugins/dataview/client/icons/index.ts
index 39d894f3..7f04a3b5 100644
--- a/plugins/dataview/client/icons/index.ts
+++ b/plugins/dataview/client/icons/index.ts
@@ -1,4 +1,6 @@
 import { icons } from '@koishijs/client'
 import Database from './database.vue'
+import Refresh from './refresh.vue'
 
 icons.register('database', Database)
+icons.register('refresh', Refresh)
diff --git a/plugins/dataview/client/icons/refresh.vue b/plugins/dataview/client/icons/refresh.vue
new file mode 100644
index 00000000..66a2b74b
--- /dev/null
+++ b/plugins/dataview/client/icons/refresh.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon refresh" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M496 40v160C496 213.3 485.3 224 472 224h-160C298.8 224 288 213.3 288 200s10.75-24 24-24h100.5C382.8 118.3 322.5 80 256 80C158.1 80 80 158.1 80 256s78.97 176 176 176c41.09 0 81.09-14.47 112.6-40.75c10.16-8.5 25.31-7.156 33.81 3.062c8.5 10.19 7.125 25.31-3.062 33.81c-40.16 33.44-91.17 51.77-143.5 51.77C132.4 479.9 32 379.5 32 256s100.4-223.9 223.9-223.9c79.85 0 152.4 43.46 192.1 109.1V40c0-13.25 10.75-24 24-24S496 26.75 496 40z"/>
+  </svg>
+</template>
diff --git a/plugins/dataview/client/index.vue b/plugins/dataview/client/index.vue
index 0d9d9f3e..32bf5ad9 100644
--- a/plugins/dataview/client/index.vue
+++ b/plugins/dataview/client/index.vue
@@ -5,6 +5,12 @@
       <span v-if="store.database?.size">({{ formatSize(store.database.size) }})</span>
     </template>
 
+    <template #menu>
+      <span class="menu-item" @click="table?.updateData()">
+        <k-icon class="menu-icon" name="refresh"></k-icon>
+      </span>
+    </template>
+
     <template #left>
       <el-scrollbar>
         <k-tab-group :data="store.database.tables" v-model="current"></k-tab-group>
@@ -15,14 +21,14 @@
       <k-empty v-if="!current">
         <div>在左侧选择要访问的数据表</div>
       </k-empty>
-      <table-view v-else :key="current" :name="current"></table-view>
+      <table-view v-else :key="current" :name="current" ref="table"></table-view>
     </keep-alive>
   </k-layout>
 </template>
 
 <script lang="ts" setup>
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { router, store } from '@koishijs/client'
 import { formatSize } from './utils'
@@ -32,6 +38,8 @@ function join(source: string | string[]) {
   return Array.isArray(source) ? source.join('/') : source || ''
 }
 
+const table = ref()
+
 const route = useRoute()
 
 const current = computed<string>({
diff --git a/plugins/dataview/package.json b/plugins/dataview/package.json
index f2cde99d..06df5ce0 100644
--- a/plugins/dataview/package.json
+++ b/plugins/dataview/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/plugin-dataview",
   "description": "View Database in Koishi Console",
-  "version": "2.2.6",
+  "version": "2.3.1",
   "main": "lib/index.cjs",
   "typings": "lib/index.d.ts",
   "exports": {