diff --git a/web/src/utils/doc.js b/web/src/utils/doc.js
new file mode 100644
index 0000000000000000000000000000000000000000..afa0903fa597f818fe8f7349ca4ff04c0b131297
--- /dev/null
+++ b/web/src/utils/doc.js
@@ -0,0 +1,3 @@
+export const toDoc = (url)=>{
+        window.open(url, '_blank')
+}
diff --git a/web/src/view/init/index.vue b/web/src/view/init/index.vue
index 88839f57ac41f9b51da3522f2644f047a8f4b7ee..710afa1d9c2b7323229a6176e625834e4697b576 100644
--- a/web/src/view/init/index.vue
+++ b/web/src/view/init/index.vue
@@ -7,7 +7,7 @@
           <div class="font-sans text-4xl font-bold text-center mb-4">GIN-VUE-ADMIN</div>
           <p class="text-gray-600 mb-2">初始化须知</p>
           <p class="text-gray-600 mb-2">1.您需有用一定的VUE和GOLANG基础</p>
-          <p class="text-gray-600 mb-2">2.请您确认是否已经阅读过<a class="text-blue-600 font-bold" href="https://www.gin-vue-admin.com">官方文档</a></p>
+          <p class="text-gray-600 mb-2">2.请您确认是否已经阅读过<a class="text-blue-600 font-bold" href="https://www.gin-vue-admin.com" target="_blank">官方文档</a> <a class="text-blue-600 font-bold" href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=2" target="_blank">初始化视频</a></p>
           <p class="text-gray-600 mb-2">3.请您确认是否了解后续的配置流程</p>
           <p class="text-gray-600 mb-2">4.如果您使用mysql数据库，请确认数据库引擎为<span class="text-red-600 font-bold text-3xl ml-2 ">innoDB</span></p>
           <p class="text-gray-600 mb-2">注：开发组不为文档中书写过的内容提供无偿服务</p>
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index c0bd5f650f085bfc591655d088e871738f18245c..a73487572972eec18ff1e0ae52f6623fb9848300 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -29,7 +29,10 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
+        <div class="gva-btn-list flex items-center gap-3">
+          <el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
+          <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
+        </div>
         <el-popover v-model="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
           <div style="text-align: right; margin-top: 8px;">
@@ -154,6 +157,8 @@ import { toSQLLine } from '@/utils/stringFun'
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import {VideoCameraFilled} from "@element-plus/icons-vue";
+import { toDoc } from '@/utils/doc'
 
 const methodFilter = (value) => {
   const target = methodOptions.value.filter(item => item.value === value)[0]
diff --git a/web/src/view/superAdmin/authority/authority.vue b/web/src/view/superAdmin/authority/authority.vue
index f0bfde91f1829ee501942e9cc350321a7a200789..0f0ac5fdc27d1eedb0b00ad55a5ee0590d9676a8 100644
--- a/web/src/view/superAdmin/authority/authority.vue
+++ b/web/src/view/superAdmin/authority/authority.vue
@@ -2,8 +2,9 @@
   <div class="authority">
     <warning-bar title="注：右上角头像下拉可切换角色" />
     <div class="gva-table-box">
-      <div class="gva-btn-list">
+      <div class="gva-btn-list flex items-center gap-3">
         <el-button type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
+        <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=8&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
       <el-table
         :data="tableData"
@@ -115,6 +116,8 @@ import WarningBar from '@/components/warningBar/warningBar.vue'
 
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import {toDoc} from "@/utils/doc";
+import {VideoCameraFilled} from "@element-plus/icons-vue";
 
 const mustUint = (rule, value, callback) => {
   if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index 19d0214f811462c5c2b66b3129cc5f1e930976ce..48df04150b95e8cca23e838d2d6f4d5bfa54c94f 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -36,13 +36,14 @@
       </el-form>
     </div>
     <div class="gva-table-box">
-      <div class="gva-btn-list">
+      <div class="gva-btn-list flex items-center gap-3">
         <el-button
 
           type="primary"
           icon="plus"
           @click="openDialog"
         >新增</el-button>
+        <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=12&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
       <el-table
         ref="multipleTable"
@@ -218,6 +219,8 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { formatBoolean, formatDate } from '@/utils/format'
+import {toDoc} from "@/utils/doc";
+import {VideoCameraFilled} from "@element-plus/icons-vue";
 
 const router = useRouter()
 
diff --git a/web/src/view/superAdmin/menu/menu.vue b/web/src/view/superAdmin/menu/menu.vue
index c325b8573554d4ac8830ff9ce8b4e48e30e5b4ae..fb9eb8ce38fdd649b57c3b032029057def129f26 100644
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
     <div class="gva-table-box">
-      <div class="gva-btn-list">
+      <div class="gva-btn-list flex items-center gap-3">
         <el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
+        <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT/?p=4&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
 
       <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
@@ -162,11 +163,14 @@
         </el-form-item>
       </el-form>
       <div>
-        <el-button
-          type="primary"
-          icon="edit"
-          @click="addParameter(form)"
-        >新增菜单参数</el-button>
+        <div class="flex items-center gap-2">
+          <el-button
+            type="primary"
+            icon="edit"
+            @click="addParameter(form)"
+          >新增菜单参数</el-button>
+          <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=9&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
+        </div>
         <el-table :data="form.parameters" style="width: 100%;margin-top: 12px;">
           <el-table-column align="left" prop="type" label="参数类型" width="180">
             <template #default="scope">
@@ -204,12 +208,18 @@
           </el-table-column>
         </el-table>
 
-        <el-button
-          style="margin-top:12px"
-          type="primary"
-          icon="edit"
-          @click="addBtn(form)"
-        >新增可控按钮</el-button>
+        <div class="flex items-center gap-2 mt-3">
+          <el-button
+              type="primary"
+              icon="edit"
+              @click="addBtn(form)"
+          >新增可控按钮
+          </el-button>
+          <el-icon class="cursor-pointer" @click="toDoc('https://www.gin-vue-admin.com/guide/web/button-auth.html')"><QuestionFilled /></el-icon>
+          <el-icon  class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=11&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
+        </div>
+
+
         <el-table :data="form.menuBtn" style="width: 100%;margin-top: 12px;">
           <el-table-column align="left" prop="name" label="按钮名称" width="180">
             <template #default="scope">
@@ -262,6 +272,9 @@ import WarningBar from '@/components/warningBar/warningBar.vue'
 import { canRemoveAuthorityBtnApi } from '@/api/authorityBtn'
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import {QuestionFilled, VideoCameraFilled} from "@element-plus/icons-vue";
+
+import { toDoc } from '@/utils/doc'
 
 const rules = reactive({
   path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
diff --git a/web/src/view/systemTools/autoPkg/autoPkg.vue b/web/src/view/systemTools/autoPkg/autoPkg.vue
index fc3e59e1572b36995135fe343de01b7c1d0522bd..907e1fb418ed1d13d3b36406f2e673f7c4aca080 100644
--- a/web/src/view/systemTools/autoPkg/autoPkg.vue
+++ b/web/src/view/systemTools/autoPkg/autoPkg.vue
@@ -2,8 +2,9 @@
   <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">
+      <div class="gva-btn-list gap-3 flex items-center">
         <el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
+        <el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=3&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
       </div>
       <el-table :data="tableData">
         <el-table-column align="left" label="id" width="60" prop="ID" />
@@ -64,6 +65,8 @@ import {
 import { ref } from 'vue'
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import {toDoc} from "@/utils/doc";
+import {VideoCameraFilled} from "@element-plus/icons-vue";
 
 const form = ref({
   packageName: '',
diff --git a/web/src/view/systemTools/autoPlug/autoPlug.vue b/web/src/view/systemTools/autoPlug/autoPlug.vue
index 7f42dbea545ae08ccf36d8bb2649211b69b045a7..ce17aeec2f7928f8ef3e96c8112c446c48a5ddfc 100644
--- a/web/src/view/systemTools/autoPlug/autoPlug.vue
+++ b/web/src/view/systemTools/autoPlug/autoPlug.vue
@@ -94,6 +94,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="createPlug">创建</el-button>
+          <el-icon class="cursor-pointer ml-3" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=13&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
         </el-form-item>
       </el-form>
 
@@ -106,13 +107,14 @@ import { toUpperCase } from '@/utils/stringFun'
 
 import {
   Plus,
-  Minus
+  Minus, VideoCameraFilled
 } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import { createPlugApi } from '@/api/autoCode.js'
 
 import { reactive } from 'vue'
+import {toDoc} from "@/utils/doc";
 
 const form = reactive({
   plugName: '',