(servicecomb-fence) branch master updated: 调用链展示组件语法切换v3

[liubao]

This is an automated email from the ASF dual-hosted git repository.

liubao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/servicecomb-fence.git


The following commit(s) were added to refs/heads/master by this push:
     new 3b47ba9  调用链展示组件语法切换v3
3b47ba9 is described below

commit 3b47ba9adf3bccd4e7f965b960597992cb27f3e5
Author: tianxin <tianxin930...@163.com>
AuthorDate: Wed May 29 02:03:13 2024 -0700

    调用链展示组件语法切换v3
---
 .../static/admin/src/components/navbar/index.vue   |  2 +-
 .../board/home/components/call-chain-list.vue      | 49 +++++++++-------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git 
a/admin-website/src/main/resources/static/admin/src/components/navbar/index.vue 
b/admin-website/src/main/resources/static/admin/src/components/navbar/index.vue
index c8d5d79..e6f65d8 100644
--- 
a/admin-website/src/main/resources/static/admin/src/components/navbar/index.vue
+++ 
b/admin-website/src/main/resources/static/admin/src/components/navbar/index.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { UserHead as TinyUserHead, Modal } from '@opentiny/vue';
+  import { UserHead as TinyUserHead } from '@opentiny/vue';
   import {
     IconCheckOut,
   } from '@opentiny/vue-icon';
diff --git 
a/admin-website/src/main/resources/static/admin/src/views/board/home/components/call-chain-list.vue
 
b/admin-website/src/main/resources/static/admin/src/views/board/home/components/call-chain-list.vue
index f5a6e25..8a56504 100644
--- 
a/admin-website/src/main/resources/static/admin/src/views/board/home/components/call-chain-list.vue
+++ 
b/admin-website/src/main/resources/static/admin/src/views/board/home/components/call-chain-list.vue
@@ -1,7 +1,7 @@
 <template>
-  <tiny-grid resizable seq-serial :data="mockData" 
@toolbar-button-click="toolbarButtonClickEvent">
+  <tiny-grid resizable seq-serial :data="state.mockData" 
@toolbar-button-click="toolbarButtonClickEvent">
     <template #toolbar>
-      <tiny-grid-toolbar :buttons="toolbarButtons"> </tiny-grid-toolbar>
+      <tiny-grid-toolbar :buttons="state.toolbarButtons"> </tiny-grid-toolbar>
     </template>
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column width="60"></tiny-grid-column>
@@ -15,7 +15,6 @@
               <div>
                 {{ data.row.tags['http.status_code'] }}
               </div>
-
             </template>
           </tiny-grid-column>
           <tiny-grid-column field="timestamp" 
title="timestamp"></tiny-grid-column>
@@ -36,37 +35,27 @@
   </tiny-grid>
 </template>
 
-<script lang="jsx">
-import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, GridToolbar as 
TinyGridToolbar } from '@opentiny/vue'
 import mock from './mock.json'
 
-export default {
-  components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
-    TinyGridToolbar: GridToolbar
-  },
-  data() {
-    return {
-      toolbarButtons: [
-        {
-          code: 'clearRowExpand',
-          name: '手动清空展开行状态'
-        }
-      ],
-      mockData: mock,
+const state = reactive({
+  mockData: mock,
+  toolbarButtons: [
+    {
+      code: 'clearRowExpand',
+      name: '手动清空展开行状态'
     }
-  },
-  methods: {
-    toolbarButtonClickEvent({ code, $grid }) {
-      // eslint-disable-next-line default-case
-      switch (code) {
-        case 'clearRowExpand': {
-          $grid.clearRowExpand()
-          break
-        }
-      }
+  ],
+})
+const toolbarButtonClickEvent = ({ code, $grid }) => {
+  switch (code) {
+    case 'clearRowExpand': {
+      $grid.clearRowExpand()
+      break
     }
+    default: break;
   }
 }
 </script>