feat: 🎸 初版完成

src/components/Dialog/index.vue

@@ -11,7 +11,9 @@
 
     <!-- 弹窗内容 -->
     <el-scrollbar class="com-dialog__content">
-      <slot />
+      <div class="content__wrap">
+        <slot />
+      </div>
     </el-scrollbar>
 
     <template v-if="slots.footer" #footer>
@@ -40,6 +42,9 @@ export default defineComponent({
 
 <style lang="less" scoped>
 .com-dialog__content {
+  .content__wrap {
+    padding-right: 10px;
+  }
   @{deep}(.el-scrollbar__wrap ) {
 		max-height: 600px; // 最大高度
 		overflow-x: hidden; // 隐藏横向滚动栏

src/components/Echart/index.vue

@@ -62,7 +62,7 @@ export default defineComponent({
         }
       }, 100);
       (window as any).addEventListener('resize', __resizeHandler)
-      sidebarElm = document.getElementsByClassName('sidebar-container-wrap')[0]
+      sidebarElm = document.getElementsByClassName('sidebar__wrap')[0]
       sidebarElm && sidebarElm.addEventListener('transitionend', sidebarResizeHandler)
     })
 

src/components/Setting/index.vue

@@ -82,6 +82,11 @@
         <el-switch v-model="greyMode" @change="setGreyMode" />
       </div>
 
+      <div class="setting__item">
+        <span>回到顶部</span>
+        <el-switch v-model="showBackTop" @change="setShowBackTop" />
+      </div>
+
       <div class="setting__item">
         <span>页面标题</span>
         <el-input v-model="title" size="mini" @change="setTitle" />
@@ -169,6 +174,11 @@ export default defineComponent({
       appStore.SetGreyMode(greyMode)
     }
 
+    const showBackTop = ref<boolean>(appStore.showBackTop)
+    function setShowBackTop(showBackTop: boolean) {
+      appStore.SetShowBackTop(showBackTop)
+    }
+
     return {
       drawer, toggleClick,
       layout, setLayout,
@@ -182,7 +192,8 @@ export default defineComponent({
       logo, setLogo,
       title, setTitle,
       logoTitle, setLogoTitle,
-      greyMode, setGreyMode
+      greyMode, setGreyMode,
+      showBackTop, setShowBackTop
     }
   }
 })

src/components/Table/components/Slot.vue

@@ -25,7 +25,7 @@ export default defineComponent({
     return h('span', _this.slots[props.slotName]({
       row: props.row,
       column: props.column,
-      index: props.index
+      $index: props.index
     }))
   }
 })

src/pages/index/axios-config/request.ts

@@ -19,7 +19,6 @@ const service: AxiosInstance = axios.create({
 // request拦截器
 service.interceptors.request.use(
   (config: AxiosRequestConfig) => {
-    console.log(config)
     if (config.method === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
       config.data = qs.stringify(config.data)
     }

src/pages/index/layout/modules/Classic.vue

@@ -63,6 +63,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -106,6 +112,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -131,7 +138,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })

src/pages/index/layout/modules/LeftTop.vue

@@ -84,6 +84,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -127,6 +133,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -152,7 +159,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })

src/pages/index/layout/modules/Top.vue

@@ -71,6 +71,12 @@
     <!-- setting -->
     <setting />
     <!-- setting -->
+
+    <el-backtop
+      v-if="showBackTop"
+      target=".main__wrap--content .el-scrollbar__wrap"
+      :bottom="100"
+    />
   </div>
 </template>
 
@@ -114,6 +120,7 @@ export default defineComponent({
     // const fixedNavbar = computed(() => appStore.fixedNavbar)
     // const fixedTags = computed(() => appStore.fixedTags)
     const fixedHeader = computed(() => appStore.fixedHeader)
+    const showBackTop = computed(() => appStore.showBackTop)
 
     const classObj = computed(() => {
       const obj = {}
@@ -139,7 +146,8 @@ export default defineComponent({
       fixedHeader,
       // fixedNavbar,
       // fixedTags,
-      setCollapsed
+      setCollapsed,
+      showBackTop
     }
   }
 })

src/pages/index/router/index.ts

@@ -510,6 +510,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     path: '/example-demo',
     component: Layout,
     name: 'ExampleDemo',
+    redirect: '/example-demo/example-dialog',
     meta: {
       alwaysShow: true,
       icon: 'example',

src/pages/index/store/modules/app.ts

@@ -16,6 +16,7 @@ export interface AppState {
   logoTitle: String
   userInfo: String
   greyMode: Boolean
+  showBackTop: Boolean
 }
 
 @Module({ dynamic: true, namespaced: true, store, name: 'app' })
@@ -34,6 +35,7 @@ class App extends VuexModule implements AppState {
   public logoTitle = 'vue-ElPlus-admin' // logo标题
   public userInfo = 'userInfo' // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
   public greyMode = false // 是否开始灰色模式，用于特殊悼念日
+  public showBackTop = true // 是否显示回到顶部
 
   @Mutation
   private SET_COLLAPSED(collapsed: boolean): void {
@@ -87,6 +89,10 @@ class App extends VuexModule implements AppState {
   private SET_GREYMODE(greyMode: boolean): void {
     this.greyMode = greyMode
   }
+  @Mutation
+  private SET_SHOWBACKTOP(showBackTop: boolean): void {
+    this.showBackTop = showBackTop
+  }
 
   @Action
   public SetCollapsed(collapsed: boolean): void {
@@ -140,6 +146,10 @@ class App extends VuexModule implements AppState {
   public SetGreyMode(greyMode: boolean): void {
     this.SET_GREYMODE(greyMode)
   }
+  @Action
+  public SetShowBackTop(showBackTop: boolean): void {
+    this.SET_SHOWBACKTOP(showBackTop)
+  }
 }
 
 export const appStore = getModule<App>(App)

src/pages/index/views/example-demo/example-dialog/index.vue

@@ -225,7 +225,7 @@ export default defineComponent({
       if (type === 'add') {
         currentChange(1)
       }
-      close()
+      toggleVisible()
       getExampleList()
     }
 

src/pages/index/views/table-demo/screen-table/index.vue

@@ -12,7 +12,7 @@
     <com-table
       ref="filterTable"
       v-loading="loading"
-      row-field="date"
+      row-key="date"
       :columns="columns"
       :data="tableData"
       :default-sort="{prop: 'date', order: 'descending'}"
@@ -70,7 +70,7 @@ export default defineComponent({
         label: '日期',
         sortable: true,
         width: '180',
-        columnfield: 'date',
+        columnKey: 'date',
         filters: [{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }],
         filterMethod: filterHandler
       },

src/pages/index/views/table-demo/tree-and-load/index.vue

@@ -11,7 +11,7 @@
       v-loading="loading"
       :columns="columns"
       :data="tableData"
-      row-field="id"
+      row-key="id"
       border
       default-expand-all
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@@ -21,7 +21,7 @@
       v-loading="loading"
       :columns="columns1"
       :data="tableData1"
-      row-field="id"
+      row-key="id"
       border
       lazy
       :load="load"