uni-oaview 1.0.0

package/README.md

@@ -0,0 +1 @@
+本组件项目不能直接运行，查看效果下载 https://gitlab.mockuai.com/FrontToClient/mk-uview

package/components/logs/console.vue

@@ -0,0 +1,38 @@
+<template>
+  <view
+    class="log-item"
+    v-for="log in consoleLogs"
+    style="font-size: 10px; width: calc(100vw - 16px); word-break: break-all"
+  >
+    {{ log }}
+  </view>
+</template>
+<script lang="ts" setup>
+  import { onBeforeUnmount, ref } from 'vue';
+  import { consoleSubject, getConsoleLogs } from 'uniapp-log-sdk';
+  const logConvert = (items) =>
+    items.reduce((prev, current, index) => {
+      try {
+        prev +=
+          typeof current === 'object'
+            ? JSON.stringify(current)
+            : current + '' + (index === items.length - 1 ? '' : ',');
+      } catch (e) {
+        prev + current;
+      }
+      return prev;
+    }, '');
+  const consoleLogs = ref<string[]>(getConsoleLogs().map(logConvert));
+  const stop = consoleSubject.subscribe((data: any) => {
+    consoleLogs.value = data.map(logConvert);
+  });
+  onBeforeUnmount(() => {
+    stop?.unsubscribe();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .log-item:nth-of-type(odd) {
+    background-color: #eee;
+  }
+</style>

package/components/logs/error.vue

@@ -0,0 +1,27 @@
+<template>
+  <view
+    class="log-item"
+    v-for="log in errorLogs"
+    :key="log.toString()"
+    style="font-size: 10px; width: calc(100vw - 16px); word-break: break-all"
+  >
+    {{ JSON.stringify(log) }}
+  </view>
+</template>
+<script lang="ts" setup>
+  import { ref, onBeforeUnmount } from 'vue';
+  import { errorSubject, getErrorLogs } from 'uniapp-log-sdk';
+  const errorLogs = ref<Record<string, any>[]>([...new Set(getErrorLogs()?.map((item) => item.join(';')))]);
+  const stop = errorSubject.subscribe((data: Record<string, any>[]) => {
+    errorLogs.value = [...new Set(data?.map((item) => item.join(';')))];
+  });
+  onBeforeUnmount(() => {
+    stop?.unsubscribe();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .log-item {
+    color: red;
+  }
+</style>

package/components/logs/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <u-popup v-if="show" :show="show" @close="() => (show = false)" @open="() => (show = true)">
+    <view style="height: 1000rpx">
+      <u-subsection :list="list" :current="current" @change="(index) => (current = index)"></u-subsection>
+      <view style="height: calc(100% - 48px); overflow-y: auto; padding: 8px">
+        <template v-if="current === 0">
+          <Console />
+        </template>
+        <template v-if="current === 1">
+          <Network />
+        </template>
+        <template v-if="current === 2">
+          <NativeEvent />
+        </template>
+        <template v-if="current === 3">
+          <Error />
+        </template>
+        <template v-if="current === 4">
+          <Storage />
+        </template>
+        <template v-if="current === 5">
+          <System />
+        </template>
+      </view>
+    </view>
+  </u-popup>
+  <view
+    v-if="isShowDebugButton"
+    @click="openDebug"
+    class="debug-button"
+    :style="{
+      bottom: bottom + 'px',
+      right: right + 'px',
+    }"
+    @touchstart="start"
+    @touchmove="move"
+  >
+    <image style="width: 40rpx; height: 40rpx" src="@/static/icon/debug.svg" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import Network from './network.vue';
+  import NativeEvent from './native-event.vue';
+  import Error from './error.vue';
+  import Storage from './storage.vue';
+  import Console from './console.vue';
+  import System from './system.vue';
+  const whiteUrls = ['http://192.168.12.175:6174', 'http://192.168.10.11:6174'];
+  const show = ref(false);
+  const isShowDebugButton = ref(whiteUrls.includes(uni.getStorageSync('baseUrl')));
+  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system']);
+  const current = ref(0);
+  const openDebug = () => {
+    show.value = true;
+  };
+  uni.$once('show-debug-button', () => {
+    isShowDebugButton.value = true;
+  });
+  const bottom = ref(200);
+  const right = ref(10);
+  let pageX, pageY;
+  const start = (e) => {
+    let page = e.changedTouches[0];
+    pageX = page.pageX;
+    pageY = page.pageY;
+  };
+  const move = (e) => {
+    let page = e.changedTouches[0];
+    let x = page.pageX - pageX;
+    let y = page.pageY - pageY;
+    pageX = page.pageX;
+    pageY = page.pageY;
+    right.value = right.value - x;
+    bottom.value = bottom.value - y;
+  };
+</script>
+
+<style lang="scss" scoped>
+  .debug-button {
+    width: 80rpx;
+    height: 80rpx;
+    position: fixed;
+    z-index: 1000;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    background-color: white;
+  }
+</style>

package/components/logs/native-event.vue

@@ -0,0 +1,45 @@
+<template>
+  <u-collapse>
+    <u-collapse-item v-for="log in nativeEventLogs" :title="getTitle(log)" :key="log.key">
+      <view style="font-size: 10px">
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">发送数据：</text>
+          {{ JSON.stringify(log.params) }}
+        </view>
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">接收数据：</text>
+          {{ JSON.stringify(log.response) }}
+        </view>
+      </view>
+    </u-collapse-item>
+  </u-collapse>
+</template>
+<script lang="ts" setup>
+  import { ref, onBeforeUnmount } from 'vue';
+  import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
+  const nativeEventLogs = ref<Record<string, any>[]>(getNativeEventLogs());
+  const stop = nativeEventSubject.subscribe((data) => {
+    nativeEventLogs.value = data;
+  });
+  const getTitle = (log: any) => {
+    const { startTime, endTime, key } = log;
+    if (startTime && endTime) {
+      return `${key}；${(endTime - startTime) / 1000}s`;
+    }
+    return key;
+  };
+  onBeforeUnmount(() => {
+    stop?.unsubscribe();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .u-collapse-content {
+    font-size: 12px;
+  }
+  ::v-deep {
+    .u-cell__title-text {
+      font-size: 10px;
+    }
+  }
+</style>

package/components/logs/network.vue

@@ -0,0 +1,64 @@
+<template>
+  <u-collapse>
+    <u-collapse-item
+      v-for="log in networkLogs"
+      :title="getTitle(log)"
+      :key="log.request.url + log.response?.data?.errno"
+      :class="{ 'u-collapse-item-failed': log.response?.statusCode !== 200 || log.response?.data?.errno !== 0 }"
+    >
+      <view style="font-size: 10px">
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">状态码：</text>
+          {{ log.request.method }} {{ log.response?.statusCode }}
+        </view>
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">请求头：</text>
+          {{ JSON.stringify(log.request.header) }}
+        </view>
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">请求参数：</text>
+          {{ JSON.stringify(log.request.data) }}
+        </view>
+        <view style="word-break: break-all">
+          <text style="font-weight: bolder">响应数据：</text>
+          {{ JSON.stringify(log.response) }}
+        </view>
+      </view>
+    </u-collapse-item>
+  </u-collapse>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onBeforeUnmount } from 'vue';
+  import { networkSubject, getNetworkLogs } from 'uniapp-log-sdk';
+  const networkLogs = ref<{ request: any; response: any; startTime; endTime }[]>(getNetworkLogs());
+  const stop = networkSubject.subscribe((data) => {
+    networkLogs.value = data;
+  });
+  const getTitle = (log: any) => {
+    const { startTime, endTime, request } = log;
+    if (startTime && endTime) {
+      return `${request.url}；${(endTime - startTime) / 1000}s`;
+    }
+    return request.url;
+  };
+  onBeforeUnmount(() => {
+    stop?.unsubscribe();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .u-collapse-content {
+    font-size: 12px;
+  }
+  ::v-deep {
+    .u-cell__title-text {
+      font-size: 10px;
+    }
+    .u-collapse-item-failed {
+      .u-cell__title-text {
+        color: red !important;
+      }
+    }
+  }
+</style>

package/components/logs/storage.vue

@@ -0,0 +1,34 @@
+<template>
+  <u-collapse>
+    <u-collapse-item v-for="log in storageLogs" :title="log.key" :key="log.key">
+      <text style="font-size: 10px; word-break: break-all">
+        {{ log.data }}
+      </text>
+    </u-collapse-item>
+  </u-collapse>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  const storageLogs = ref<Record<string, any>[]>([]);
+  uni.getStorageInfo({
+    success: function (res) {
+      res.keys?.forEach((key) => {
+        storageLogs.value.push({
+          key,
+          data: JSON.stringify(uni.getStorageSync(key)),
+        });
+      });
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .u-collapse-content {
+    font-size: 12px;
+  }
+  ::v-deep {
+    .u-cell__title-text {
+      font-size: 10px;
+    }
+  }
+</style>

package/components/logs/system.vue

@@ -0,0 +1,17 @@
+<template>
+  <view class="system">
+    <view>小程序版本：{{ appVersion }}</view>
+    <view>小程序名称：{{ appName }}</view>
+    <view>手机型号：{{ deviceBrand }}</view>
+    <view>手机系统版本：{{ osVersion }}</view>
+  </view>
+</template>
+<script lang="ts" setup>
+  const { appVersion, appName, osVersion, deviceBrand } = uni.getSystemInfoSync() as any;
+</script>
+
+<style lang="scss" scoped>
+  .system {
+    font-size: 12px;
+  }
+</style>

package/components/oa-page/oa-page.vue

@@ -0,0 +1,42 @@
+<template>
+  <Logs />
+  <view @click="clickHandler">
+    <slot />
+  </view>
+</template>
+<script lang="ts" setup>
+  import Logs from '../logs/index.vue';
+  let isLock = false;
+  setTimeout(function () {
+    isLock = true;
+  }, 10000);
+  const secretArray: number[] = [];
+  const secret = '1314';
+  const createSecretFunction = (count: number) => {
+    let clickCount = 0;
+    let timer = null as any;
+    return () => {
+      clickCount++;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (clickCount === count) {
+          secretArray.push(count);
+          if (secretArray.join('') === secret) {
+            uni.$emit('show-debug-button');
+          }
+        } else {
+          clickCount = 0;
+        }
+      }, 1000);
+    };
+  };
+  const functions = [1, 3, 4].map(createSecretFunction);
+  const clickHandler = () => {
+    if (isLock) {
+      return;
+    }
+    functions.forEach((f) => {
+      f();
+    });
+  };
+</script>

package/components/oa-skeleton/oa-skeleton.scss

@@ -0,0 +1,52 @@
+$bg-color: white;
+$row-height: 32rpx;
+$row-margin-top: 32rpx;
+
+.skeleton {
+  display: flex;
+  padding: 32rpx 0;
+}
+.skeleton-avatar {
+  flex-shrink: 0;
+  background: $bg-color;
+  margin-right: 16rpx;
+}
+.skeleton-avatar.round {
+  border-radius: 50%;
+}
+
+.skeleton-content {
+  width: 100%;
+}
+
+.skeleton-title {
+  background-color: $bg-color;
+  height: $row-height;
+}
+
+.skeleton-title + .skeleton-rows {
+  margin-top: $row-margin-top;
+}
+.skeleton-row-item {
+  background-color: $bg-color;
+  height: $row-height;
+}
+.skeleton-row-item:not(:first-child) {
+  margin-top: $row-margin-top;
+}
+
+.skeleton.animate {
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+
+@keyframes skeleton-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/components/oa-skeleton/oa-skeleton.vue

@@ -0,0 +1,73 @@
+<template>
+  <view>
+    <!-- 为了解决H5中v-if导致样式失效的问题，故使用v-show -->
+    <view v-show="loading">
+      <view class="skeleton" :class="{ animate: animate }">
+        <view
+          v-if="displayAvatar"
+          class="skeleton-avatar"
+          :class="[displayAvatarShape]"
+          :style="{ width: displayAvatarSize, height: displayAvatarSize }"
+        ></view>
+        <view class="skeleton-content">
+          <view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth, height: rowHeight }"></view>
+          <view class="skeleton-rows">
+            <view
+              v-for="(item, index) in rowList"
+              :key="index"
+              class="skeleton-row-item"
+              :style="{ width: item.width, height: rowHeight }"
+            ></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-show="!loading"><slot></slot></view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import { computed, PropType } from 'vue';
+  const DEFAULT_ROW_WIDTH = '100%';
+  const DEFAULT_LAST_ROW_WIDTH = '100%';
+
+  const props = defineProps({
+    loading: Boolean,
+    showAvatar: Boolean,
+    avatarSize: String,
+    showTitle: Boolean,
+    titleWidth: {
+      type: String,
+      default: '40%',
+    },
+    row: {
+      type: Number,
+      default: 5,
+    },
+    rowHeight: {
+      type: String,
+      default: '80rpx',
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    avatarShape: {
+      type: String as PropType<'square' | 'round'>,
+      default: '',
+    },
+  });
+  const rowList = computed(() => {
+    const arr: Array<any> = [];
+    for (let i = 0; i < props.row; i++) {
+      arr.push({ width: i === props.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH });
+    }
+    return arr;
+  });
+  props.avatarSize;
+  const displayAvatar = computed(() => props.avatarShape || props.showAvatar || props.avatarSize);
+  const displayAvatarShape = computed(() => props.avatarShape || 'round');
+  const displayAvatarSize = computed(() => props.avatarSize || '100rpx');
+</script>
+
+<style lang="scss" scoped src="./oa-skeleton.scss"></style>

package/components/oa-skeleton/skeleton.scss

@@ -0,0 +1,52 @@
+$bg-color: white;
+$row-height: 32rpx;
+$row-margin-top: 32rpx;
+
+.skeleton {
+  display: flex;
+  padding: 32rpx;
+}
+.skeleton-avatar {
+  flex-shrink: 0;
+  background: $bg-color;
+  margin-right: 16rpx;
+}
+.skeleton-avatar.round {
+  border-radius: 50%;
+}
+
+.skeleton-content {
+  width: 100%;
+}
+
+.skeleton-title {
+  background-color: $bg-color;
+  height: $row-height;
+}
+
+.skeleton-title + .skeleton-rows {
+  margin-top: $row-margin-top;
+}
+.skeleton-row-item {
+  background-color: $bg-color;
+  height: $row-height;
+}
+.skeleton-row-item:not(:first-child) {
+  margin-top: $row-margin-top;
+}
+
+.skeleton.animate {
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+
+@keyframes skeleton-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/components/oa-skeleton/skeleton.vue

@@ -0,0 +1,104 @@
+<template>
+  <view>
+    <!-- 为了解决H5中v-if导致样式失效的问题，故使用v-show -->
+    <view v-show="loading">
+      <view class="skeleton" :class="{ animate: animate }">
+        <view
+          v-if="displayAvatar"
+          class="skeleton-avatar"
+          :class="[displayAvatarShape]"
+          :style="{ width: displayAvatarSize, height: displayAvatarSize }"
+        ></view>
+        <view class="skeleton-content">
+          <view v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth, height: rowHeight }"></view>
+          <view class="skeleton-rows">
+            <view
+              v-for="(item, index) in rowList"
+              :key="index"
+              class="skeleton-row-item"
+              :style="{ width: item.width, height: rowHeight }"
+            ></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view v-show="!loading"><slot></slot></view>
+  </view>
+</template>
+
+<script lang="ts">
+  import { computed } from '@mk/composition-api';
+  import Vue from 'vue';
+
+  const DEFAULT_ROW_WIDTH = '100%';
+  const DEFAULT_LAST_ROW_WIDTH = '60%';
+
+  export default Vue.extend({
+    props: {
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      /** 是否展示图片 */
+      showAvatar: {
+        type: Boolean,
+        default: false,
+      },
+      /** 展示图片的尺寸 */
+      avatarSize: {
+        type: String,
+        default: '',
+      },
+      /** 图片的形状 */
+      avatarShape: {
+        type: String,
+        default: '', // square | round
+      },
+      /** 是否展示标题条 */
+      showTitle: {
+        type: Boolean,
+        default: false,
+      },
+      /** 标题条的宽度 */
+      titleWidth: {
+        type: String,
+        default: '40%',
+      },
+      /** 需要展示几行 */
+      row: {
+        type: Number,
+        default: 3,
+      },
+      /** 行高 */
+      rowHeight: {
+        type: String,
+        default: '32rpx',
+      },
+      /** 是否展示动画 */
+      animate: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    setup(props: any) {
+      const rowList = computed(() => {
+        const arr: Array<any> = [];
+        for (let i = 0; i < props.row; i++) {
+          arr.push({ width: i === props.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH });
+        }
+        return arr;
+      });
+      const displayAvatar = computed(() => props.avatarShape || props.showAvatar || props.avatarSize);
+      const displayAvatarShape = computed(() => props.avatarShape || 'round');
+      const displayAvatarSize = computed(() => props.avatarSize || '100rpx');
+      return {
+        rowList,
+        displayAvatar,
+        displayAvatarShape,
+        displayAvatarSize,
+      };
+    },
+  });
+</script>
+
+<style lang="scss" scoped src="./skeleton.scss"></style>

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    install: (Vue: any) => void;
+};
+
+export { _default as default };

package/dist/index.umd.mini.js

@@ -0,0 +1,16 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["UNI-OAVIEW"] = {}));
+})(this, (function (exports) { 'use strict';
+
+  var install = function install(Vue) {};
+  var index = {
+    install: install
+  };
+
+  exports["default"] = index;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "uni-oaview",
+  "version": "1.0.0",
+  "description": "uniapp小程序组件库",
+  "main": "dist/index.umd.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "components"
+  ],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "dev": "rimraf dist typings && tsc --emitDeclarationOnly && cross-env NODE_ENV=development rollup -c --watch",
+    "build": "rimraf dist typings && tsc --emitDeclarationOnly && cross-env NODE_ENV=production rollup -c",
+    "prepublish": "npm run build"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "cross-env": "^7.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.26.11",
+    "rollup-plugin-alias": "^2.2.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-clean": "^1.0.0",
+    "rollup-plugin-dts": "^1.4.13",
+    "rollup-plugin-eslint": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "typescript": "^4.0.2"
+  },
+  "dependencies": {
+    "uniapp-log-sdk": "^1.1.1"
+  }
+}