移除 VueRouteButton 组件

添加 ToolButton 组件
修改 logo

Author: SmallRuralDog

config/admin.php

@@ -8,8 +8,6 @@
     'loginDesc' => '开箱即用的 Laravel 后台扩展',
 
 
-    'loginLogo' => 'https://file.iviewui.com/admin-pro-dist/img/logo.7b8cc895.png',
-    'logoDark' => 'https://file.iviewui.com/admin-pro-dist/img/logo-dark.ab519d9f.png',
     'logo' => 'https://file.iviewui.com/admin-pro-dist/img/logo.7b8cc895.png',
 
     'copyright' => 'Copyright © 2020 小土狗',
@@ -24,7 +22,6 @@
         ]
     ],
 
-    'logo-mini' => 'https://file.iviewui.com/admin-pro-dist/img/logo-small.4a34a883.png',
 
     'bootstrap' => app_path('Admin/bootstrap.php'),
 

docs/components.md

@@ -149,15 +149,17 @@ $grid->actions(function (Grid\Actions $actions) {
 
 ### 工具栏组件
 
-#### VueRouteButton
+#### ToolButton
 
-用于跳转到其他页面的操作
+可用于vue路由导航，异步请求，连接跳转 操作
 
 ```php
-VueRouteButton::make("/adv/loc", "广告位管理")->type("text")
+Grid\Tools\ToolButton::make("同步粉丝")
+    ->handler("request") // 类型 request|route|link
+    ->uri("") //路径
 ```
 
-
+其他属性可参考 `el-button`
 
 ## 表单组件
 

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=16f9cb98a45761e057b8",
+    "/app.js": "/app.js?id=7bccd6d48bd0882ab721",
     "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
     "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

public/mix-manifest.json

@@ -96,9 +96,9 @@ Vue.component('VueRouteAction', VueRouteAction);
 
 //Tools
 import GridCreateButton from './components/widgets/Tools/Create'
-import VueRouteButton from './components/widgets/Tools/VueRouteButton'
+import ToolButton from './components/widgets/Tools/ToolButton'
 Vue.component('GridCreateButton', GridCreateButton);
-Vue.component('VueRouteButton', VueRouteButton);
+Vue.component('ToolButton', ToolButton);
 
 
 //Widget

resources/js/components.js

@@ -7,12 +7,13 @@
       <div class="page-account-top">
         <div class="page-account-top-logo">
           <img :src="page_data.logo" alt="logo" />
+          <h1>{{page_data.name}}</h1>
         </div>
 
         <div class="page-account-top-desc">{{ page_data.desc }}</div>
       </div>
       <div class="login-form">
-        <el-form ref="formValidate" :model="form" :rules="ruleValidate">
+        <el-form ref="formValidate" :model="form" :rules="ruleValidate" size="medium">
           <el-form-item prop="username">
             <el-input
               autofocus
@@ -131,7 +132,14 @@ export default {
     padding: 32px 0;
     text-align: center;
   }
-
+  .page-account-top-logo{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    h1{
+      font-weight: 100;
+    }
+  }
   .page-account-top-logo img {
     height: 75px;
   }

resources/js/components/Login.vue

@@ -8,12 +8,8 @@
         :width="isCollapsed ? '64px' : '200px'"
       >
         <div class="content-side-logo">
-          <template v-if="!isCollapsed">
-            <img :src="page_data.logo" v-if="!isDark" />
-            <img :src="page_data.logoDark" v-else />
-          </template>
-
-          <img :src="page_data.logoMini" v-else />
+          <img :src="page_data.logo" />
+          <h1 v-if="!isCollapsed">{{ page_data.name }}</h1>
         </div>
         <el-scrollbar wrap-class="scrollbar-wrapper">
           <el-menu
@@ -313,6 +309,17 @@ $header-bar-height: 55px;
       object-fit: cover;
       vertical-align: middle;
     }
+    h1 {
+      display: inline-block;
+      margin: 0 0 0 5px;
+      color: #666;
+      font-weight: 600;
+      font-size: 20px;
+      vertical-align: middle;
+      animation: fade-in;
+      animation-duration: 0.3s;
+    }
+
   }
   .el-scrollbar {
     flex: 1;
@@ -338,6 +345,11 @@ $header-bar-height: 55px;
 .side-dark {
   background: #1d1e23;
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  .content-side-logo {
+    h1 {
+      color: #ffffff;
+    }
+  }
 }
 .layout-header-bar {
   width: 100%;

resources/js/components/Root.vue

@@ -29,7 +29,7 @@
             v-for="(component, index) in attrs.toolbars.right"
             :key="component.componentName + index"
             :is="component.componentName"
-            :attr="component"
+            :attrs="component"
           />
           <el-divider
             direction="vertical"

resources/js/components/grid/Table.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-button
+    :type="attrs.type"
+    :size="attrs.size"
+    :plain="attrs.plain"
+    :round="attrs.round"
+    :circle="attrs.circle"
+    :disabled="attrs.disabled"
+    :icon="attrs.icon"
+    :autofocus="attrs.autofocus"
+    :loading="loading"
+    class="mr-10"
+    @click="onClick"
+    >{{ attrs.content }}</el-button
+  >
+</template>
+<script>
+export default {
+  props: {
+    attrs: Object
+  },
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    onClick() {
+      switch (this.attrs.handler) {
+        case "route":
+          this.$route.push(this.attrs.uri);
+          break;
+        case "link":
+          window.location.href = this.attrs.uri;
+          break;
+        case "request":
+          this.onRequest(this.attrs.uri);
+          break;
+        default:
+          this.$Message.warning("响应类型未定义");
+          break;
+      }
+    },
+    onRequest(uri) {
+      this.loading = true;
+      this.$http
+        .get(uri)
+        .then(res => {
+          if (res.code == 200) {
+  
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    }
+  }
+};
+</script>