前端增加插件化示例

web/src/view/dashboard/index.vue

@@ -6,7 +6,7 @@
           <div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
           <div class="gva-top-card-left-dot">{{ weatherInfo }}</div>
           <div class="gva-top-card-left-rows">
-            <el-row v-auth="888">
+            <el-row v-auth="btnAuth.a">
               <el-col :span="8" :xs="24" :sm="8">
                 <div class="flex-center">
                   <el-icon class="dasboard-icon">
@@ -110,6 +110,10 @@ import dashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useWeatherInfo } from '@/view/dashboard/weather.js'
+
+import { useBtnAuth } from '@/utils/btnAuth'
+const btnAuth = useBtnAuth()
+
 const weatherInfo = useWeatherInfo()
 
 const toolCards = ref([

web/src/view/superAdmin/authority/authority.vue

@@ -18,31 +18,36 @@
             <el-button
               icon="setting"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="opdendrawer(scope.row)"
             >设置权限</el-button>
             <el-button
               icon="plus"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="addAuthority(scope.row.authorityId)"
             >新增子角色</el-button>
             <el-button
               icon="copy-document"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="copyAuthorityFunc(scope.row)"
             >拷贝</el-button>
             <el-button
               icon="edit"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="editAuthority(scope.row)"
             >编辑</el-button>
             <el-button
               icon="delete"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="deleteAuth(scope.row)"
             >删除</el-button>
           </template>

web/src/view/superAdmin/menu/menu.vue

@@ -37,19 +37,22 @@
           <template #default="scope">
             <el-button
               size="small"
-              type="primary" link
+              type="primary"
+              link
               icon="plus"
               @click="addMenu(scope.row.ID)"
             >添加子菜单</el-button>
             <el-button
               size="small"
-              type="primary" link
+              type="primary"
+              link
               icon="edit"
               @click="editMenu(scope.row.ID)"
             >编辑</el-button>
             <el-button
               size="small"
-              type="primary" link
+              type="primary"
+              link
               icon="delete"
               @click="deleteMenu(scope.row.ID)"
             >删除</el-button>
@@ -109,7 +112,7 @@
           />
         </el-form-item>
         <el-form-item label="文件路径" prop="component" style="width:60%">
-          <el-input v-model="form.component" autocomplete="off" />
+          <el-input v-model="form.component" autocomplete="off" placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue" @blur="fmtComponent" />
           <span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" size="small" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
         </el-form-item>
         <el-form-item label="展示名称" prop="meta.title" style="width:30%">
@@ -277,6 +280,11 @@ const addParameter = (form) => {
     value: ''
   })
 }
+
+const fmtComponent = () => {
+  form.value.component = form.value.component.replace('\\', '/')
+}
+
 // 删除参数
 const deleteParameter = (parameters, index) => {
   parameters.splice(index, 1)

web/src/view/systemTools/autoCode/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <warning-bar href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" title="此功能为开发环境使用，不建议发布到生产，具体使用效果请看视频https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" />
     <!-- 从数据库直接获取字段 -->
     <div class="gva-search-box">
       <el-collapse v-model="activeNames" style="margin-bottom:12px">
@@ -198,6 +199,7 @@ import { getDict } from '@/utils/dictionary'
 import { ref, getCurrentInstance, reactive, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import WarningBar from '@/components/warningBar/warningBar.vue'
 
 const route = useRoute()
 const router = useRouter()

web/src/view/systemTools/autoPkg/autoPkg.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <warning-bar href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" title="此功能为开发环境使用，不建议发布到生产，具体使用效果请看视频https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" />
     <div class="gva-table-box">
       <div class="gva-btn-list">
         <el-button size="small" type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
@@ -15,7 +16,8 @@
             <el-button
               icon="delete"
               size="small"
-              type="primary" link
+              type="primary"
+              link
               @click="deleteApiFunc(scope.row)"
             >删除</el-button>
           </template>