git hooks test

src/assets/icons/index.ts

@@ -1,12 +1,5 @@
-import type { App } from 'vue'
-import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件
-
 const req: any = require.context('./svg', false, /\.svg$/)
 const requireAll: any = (requireContext: any) => {
   requireContext.keys().map(requireContext)
 }
 requireAll(req)
-
-export function setupSvgIcon(app: App<Element>): void {
-  app.component('SvgIcon', SvgIcon)
-}

src/components/Backtop/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-backtop
+    target=".main__wrap--content .el-scrollbar__wrap"
+    :bottom="100"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Backtop'
+})
+</script>
+
+<style>
+</style>

src/components/UserInfo/index.vue

@@ -2,7 +2,7 @@
   <el-dropdown class="avatar-container" trigger="hover">
     <div>
       <div class="avatar-wrapper">
-        <img :src="require('@/assets/img/avatar.gif')" class="user-avatar">
+        <img :src="require('@/assets/img/avatar.png')" class="user-avatar">
         <span class="name-item">管理员</span>
       </div>
     </div>

src/components/index.ts

@@ -1,12 +1,16 @@
 import type { App } from 'vue'
+import SvgIcon from './SvgIcon/index.vue'// svg组件
 import Dialog from './Dialog/index.vue'// Dialog组件
 import ComTable from './Table/index.vue'// Table组件
 import ComSearch from './Search/index.vue'// Search组件
 import ComDetail from './Detail/index.vue'// Detail组件
 
+import '@/assets/icons' // 引入svg图标
+
 export function setupGlobCom(app: App<Element>): void {
   app.component('ComDialog', Dialog)
   app.component('ComTable', ComTable)
   app.component('ComSearch', ComSearch)
   app.component('ComDetail', ComDetail)
+  app.component('SvgIcon', SvgIcon)
 }

src/libs/element.config.ts

@@ -15,4 +15,4 @@ const elementConfig: ConfigElement = {
   zIndex: 2000
 }
 
-export default elementConfig
+export default elementConfig 

src/libs/types.d.ts

@@ -4,4 +4,4 @@
 export interface ConfigElement {
   zIndex: number
   size: 'medium' | 'small' | 'mini'
-}
+}

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

@@ -64,11 +64,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
+    <backtop v-if="showBackTop" />
   </div>
 </template>
 
@@ -86,6 +82,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'Classic',
   components: {
@@ -97,7 +94,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

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

@@ -85,11 +85,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
+    <backtop v-if="showBackTop" />
   </div>
 </template>
 
@@ -107,6 +103,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'LeftTop',
   components: {
@@ -118,7 +115,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

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

@@ -72,11 +72,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
+    <backtop v-if="showBackTop" />
   </div>
 </template>
 
@@ -94,6 +90,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'Top',
   components: {
@@ -105,7 +102,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

src/pages/index/main.ts

@@ -23,8 +23,6 @@ import './permission' // 路由守卫
 
 import { setupElement } from '@/libs/element' // element UI
 
-import { setupSvgIcon } from '@/assets/icons' // svg图标
-
 import { setupGlobCom } from '@/components' // 全局公用组件
 
 import { setupDirectives } from '@/directives' // 自定义指令
@@ -43,8 +41,6 @@ setupStore(app) // 引入状态管理
 
 setupElement(app) // 引入element组件
 
-setupSvgIcon(app) // 全局注册svgIcon组件
-
 setupGlobCom(app) // 注册全局公用组件
 
 setupDirectives(app) // 注册全局自定义指令

src/pages/index/router/index.ts

@@ -90,7 +90,7 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
     meta: {},
     children: [
       {
-        path: 'http://192.168.169.57/ue/2019/doc/vue-standard/dist/',
+        path: 'http://8.133.179.48:4000/dist-doc/',
         meta: { title: '文档', icon: 'documentation' }
       }
     ]

src/pages/index/views/table-demo/test/index.ts

@@ -1,3 +0,0 @@
-import Table from './table2'
-
-export default Table

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

@@ -1,18 +0,0 @@
-<template>
-  <c-table />
-</template>
-
-<script>
-import CTable from './table.vue'
-export default {
-  components: {
-    CTable
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style>
-</style>

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

@@ -1,181 +0,0 @@
-<template>
-  <a-table :data-source="data" :columns="columns">
-    <template #filterDropdown="{ setSelectedfields, selectedfields, confirm, clearFilters, column }">
-      <div style="padding: 8px">
-        <a-input
-          :ref="c => (searchInput = c)"
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedfields[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedfields(e.target.value ? [e.target.value] : [])"
-          @pressEnter="handleSearch(selectedfields, confirm, column.dataIndex)"
-        />
-        <el-button
-          type="primary"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="handleSearch(selectedfields, confirm, column.dataIndex)"
-        >
-          <template #icon><SearchOutlined /></template>
-          Search
-        </el-button>
-        <el-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
-          Reset
-        </el-button>
-      </div>
-    </template>
-    <template #filterIcon="filtered">
-      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
-    </template>
-    <template #customRender="{ text, record, index, column }">
-      <span v-if="searchText && searchedColumn === column.dataIndex">
-        <template
-          v-for="(fragment, i) in text
-            .toString()
-            .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
-        >
-          <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" class="highlight">
-            {{ fragment }}
-          </mark>
-          <template v-else>{{ fragment }}</template>
-        </template>
-      </span>
-      <template v-else>
-        {{ text }}
-      </template>
-    </template>
-  </a-table>
-</template>
-
-<script>
-import { SearchOutlined } from '@ant-design/icons-vue';
-const data = [
-  {
-    field: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    field: '2',
-    name: 'Joe Black',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    field: '3',
-    name: 'Jim Green',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    field: '4',
-    name: 'Jim Red',
-    age: 32,
-    address: 'London No. 2 Lake Park',
-  },
-];
-
-export default {
-  components: {
-    SearchOutlined,
-  },
-  data() {
-    return {
-      data,
-      searchText: '',
-      searchInput: null,
-      searchedColumn: '',
-      columns: [
-        {
-          title: 'Name',
-          dataIndex: 'name',
-          field: 'name',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.name
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                console.log(this.searchInput);
-                this.searchInput.focus();
-              }, 0);
-            }
-          },
-        },
-        {
-          title: 'Age',
-          dataIndex: 'age',
-          field: 'age',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.age
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                this.searchInput.focus();
-              });
-            }
-          },
-        },
-        {
-          title: 'Address',
-          dataIndex: 'address',
-          field: 'address',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.address
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                this.searchInput.focus();
-              });
-            }
-          },
-        },
-      ],
-    };
-  },
-  methods: {
-    handleSearch(selectedfields, confirm, dataIndex) {
-      confirm();
-      console.log(selectedfields[0]);
-      this.searchText = selectedfields[0];
-      this.searchedColumn = dataIndex;
-      this.$forceUpdate();
-    },
-
-    handleReset(clearFilters) {
-      clearFilters();
-      this.searchText = '';
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-::v-deep.highlight {
-  background-color: rgb(255, 192, 105);
-  padding: 0px;
-}
-</style>

src/pages/index/views/table-demo/test/table2.tsx

@@ -1,58 +0,0 @@
-import { Table } from 'ant-design-vue'
-import { defineComponent } from 'vue'
-
-const columns = [
-  {
-    dataIndex: 'name',
-    field: 'name',
-    // slots: { title: 'customTitle', customRender: 'name' }
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    field: 'age'
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    field: 'address'
-  }
-]
-
-const data = [
-  {
-    field: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer']
-  },
-  {
-    field: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser']
-  },
-  {
-    field: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher']
-  }
-]
-
-export default defineComponent({
-  name: 'Test',
-  setup() {
-    return () => {
-      return (
-        <Table columns={columns} dataSource={data} v-slots={{
-          title: () => (<div>哈哈</div>)
-        }}>
-        </Table>
-      )
-    }
-  }
-})