feat(dataview): support refresh button, fix #79

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 {

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,

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)

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>

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>({

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": {