Merge branch 'hutu'

Author: lpya

package.json

@@ -2,43 +2,47 @@
   "name": "my-vue-app",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite  --mode development",
+    "dev": "vite --mode development",
     "build": "vite build  --mode production",
     "preview": "vite preview"
   },
   "dependencies": {
     "axios": "^0.24.0",
     "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.6",
-    "element-resize-detector": "^1.2.4",
     "js-cookie": "^3.0.1",
     "nprogress": "^0.2.0",
     "screenfull": "^6.0.0",
+    "sortablejs": "^1.14.0",
     "throttle-debounce": "^3.0.1",
     "vue": "^3.2.25",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@types/element-resize-detector": "^1.1.3",
     "@types/js-cookie": "^3.0.1",
+    "@types/mockjs": "^1.0.5",
     "@types/node": "^16.11.13",
     "@types/nprogress": "^0.2.0",
+    "@types/sortablejs": "^1.10.7",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "@vitejs/plugin-vue": "^2.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.4.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
+    "mockjs": "^1.1.0",
     "node-sass": "^7.0.0",
     "prettier": "^2.5.1",
     "sass": "^1.45.0",
     "sass-loader": "^12.4.0",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",
+    "vite-plugin-mock": "^2.9.6",
     "vue-tsc": "^0.29.8"
   }
 }

src/api/article.ts

@@ -0,0 +1,5 @@
+import { request } from '@/utils/http'
+//获取文章列表
+export const getArticleList = (params?: object): Promise<any> => {
+  return request(`/api/article/list`, params, 'get')
+}

src/api/test.ts

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3001982 */
-  src: url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.woff2?t=1640829544328') format('woff2'),
-       url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.woff?t=1640829544328') format('woff'),
-       url('//at.alicdn.com/t/font_3001982_h7w46xo0a5b.ttf?t=1640829544328') format('truetype');
+  src: url('//at.alicdn.com/t/font_3001982_uhnuq53veud.woff2?t=1642063257007') format('woff2'),
+       url('//at.alicdn.com/t/font_3001982_uhnuq53veud.woff?t=1642063257007') format('woff'),
+       url('//at.alicdn.com/t/font_3001982_uhnuq53veud.ttf?t=1642063257007') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-drag:before {
+  content: "\e842";
+}
+
+.icon-folder:before {
+  content: "\e7d1";
+}
+
+.icon-table:before {
+  content: "\e7de";
+}
+
+.icon-align-left:before {
+  content: "\e7f5";
+}
+
 .icon-caret-up:before {
   content: "\e8ed";
 }

src/assets/iconfont/iconfont.scss

@@ -3,7 +3,7 @@
  * @Author: hutu
  * @Date: 2021-12-30 10:32:19
  * @LastEditors: hutu
- * @LastEditTime: 2022-01-11 08:50:29
+ * @LastEditTime: 2022-01-11 09:39:24
 -->
 <template>
   <div :id="prop.id" :style="{ width: prop.width, height: prop.height }"></div>
@@ -84,6 +84,9 @@ const mounted = () => {
 const beforeDestroy = () => {
   destroyResizeEvent()
   destroySidebarResizeEvent()
+  if (chart.value) {
+    chart.value.dispose()
+  }
 }
 
 let firstFlag = false //首次渲染

src/components/EchartInit/Index.vue

@@ -50,6 +50,37 @@ export interface IThemeStyles {
   subMenuBg: string //子菜单栏背景颜色
   subMenuHover: string //子菜单栏悬浮颜色
 }
+export interface IPromise {
+  code: number
+  data: {
+    items?: []
+    total: number
+  }
+  message: string
+}
+/**
+ * 文章列表
+ */
+export interface IArticleList {
+  id: number
+  title: string
+  author: string
+  type: string
+  status: string
+  pageviews: number
+  created_at: string
+}
+/**
+ * 文章列表查询
+ */
+export interface IArticleListQuery {
+  type: string
+  title: string
+  page?: number
+  limit?: number
+  sort: string
+}
+
 /**
  * 引入echarts
  */
@@ -61,3 +92,8 @@ import { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/char
 import { TitleComponentOption, TooltipComponentOption, GridComponentOption } from 'echarts/components'
 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 export type IEchartsOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | PieSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption>
+
+/**
+ * 字典
+ */
+export type IDictionary<T> = { [key: string]: T }

src/interface/index.ts

@@ -6,7 +6,7 @@ import '@/styles/index.scss' //全局样式
 import '@/assets/iconfont/iconfont.scss'
 const app = createApp(App)
 
-import { ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar } from 'element-plus'
+import { ElTag, ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar, ElTable, ElTableColumn } from 'element-plus'
 import 'element-plus/theme-chalk/index.css'
 app.use(ElButton)
 app.use(ElMenu)
@@ -23,9 +23,12 @@ app.use(ElDropdownItem)
 app.use(ElRow)
 app.use(ElCol)
 app.use(ElScrollbar)
-
+app.use(ElTable)
+app.use(ElTableColumn)
+app.use(ElTag)
 import './permission'
 
+import './mock/index'
 app.use(router)
 app.use(store)
 app.mount('#app')

src/main.ts

@@ -0,0 +1,52 @@
+/*
+ * @Description:文章
+ * @Author: hutu
+ * @Date: 2022-01-12 09:29:52
+ * @LastEditors: hutu
+ * @LastEditTime: 2022-01-13 10:06:00
+ */
+import * as Mock from 'mockjs'
+import { IArticleList, IArticleListQuery } from '@/interface'
+
+const List: IArticleList[] = []
+const count = 100
+for (let i = 0; i < count; i++) {
+  List.push(
+    Mock.mock({
+      id: '@increment',
+      title: '@title(5, 10)',
+      author: '@first',
+      'type|1': ['vue', 'Laravel', 'react', 'thinkphp'],
+      'status|1': ['published', 'draft'],
+      pageviews: '@integer(300, 5000)',
+      created_at: '@datetime'
+    })
+  )
+}
+
+export const article = [
+  {
+    url: '/api/article/list',
+    type: 'get',
+    response: (config: { body: IArticleListQuery }) => {
+      const { type, title, page = 1, limit = 20, sort } = config.body
+      let mockList = List.filter((item) => {
+        if (type && item.type !== type) return false
+        if (title && item.title.indexOf(title) < 0) return false
+        return true
+      })
+
+      if (sort === '-id') {
+        mockList = mockList.reverse()
+      }
+      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+      return {
+        code: 10000,
+        data: {
+          total: mockList.length,
+          items: pageList
+        }
+      }
+    }
+  }
+]

src/mock/article.ts

@@ -0,0 +1,46 @@
+import Mock from 'mockjs'
+import { article } from './article'
+import { param2Obj } from './utils'
+
+type IOptions = {
+  url: string
+  type: string
+  body: string
+}
+const mocks = [...article]
+
+function mockXHR() {
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function () {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+  // : { (config: any): { code: number; data: { total: number; items: any[] } }; (arg0: { method: string; body: any; query: IDictionary<string> }): any }
+  function XHR2ExpressReqWrap(respond) {
+    return function (options: IOptions) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+mockXHR()

src/mock/index.ts

@@ -0,0 +1,31 @@
+/*
+ * @Description:
+ * @Author: hutu
+ * @Date: 2022-01-12 14:16:11
+ * @LastEditors: hutu
+ * @LastEditTime: 2022-01-12 14:18:12
+ */
+import { IDictionary } from '@/interface'
+
+/**
+ * @desc: 获取url上的参数
+ * @param {string} url 请求路径
+ * @return {object}
+ */
+export function param2Obj(url: string) {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  if (!search) {
+    return {}
+  }
+  const obj: IDictionary<string> = {}
+  const searchArr = search.split('&')
+  searchArr.forEach((v) => {
+    const index = v.indexOf('=')
+    if (index !== -1) {
+      const name = v.substring(0, index)
+      const val = v.substring(index + 1, v.length)
+      obj[name] = val
+    }
+  })
+  return obj
+}