uni-oaview 1.0.22 → 1.0.23

package/components/oa-single-select/oa-single-select.vue

@@ -10,7 +10,9 @@
         <view class="search-box-item">
           <picker-view :indicator-style="indicatorStyle" :value="indexList" @change="bindChange" class="picker-view">
             <picker-view-column>
-              <view class="item" v-for="(item, index) in columns" :key="index">{{ item[labelKey ?? 'label'] }}</view>
+              <slot :columns="columns">
+                <view class="item" v-for="(item, index) in columns" :key="index">{{ item[labelKey ?? 'label'] }}</view>
+              </slot>
             </picker-view-column>
           </picker-view>
         </view>

package/components/oa-vconsole/awesome-display-info.vue

@@ -1,6 +1,17 @@
 <template>
-  <view></view>
+  <rich-text
+    :nodes="formatJson(log)"
+    :selectable="true"
+    style="font-size: 10px; word-break: break-all; white-space: pre-wrap"
+  ></rich-text>
 </template>
 
-<script lang="ts" setup></script>
-<style scoped lang="scss"></style>
+<script lang="ts" setup>
+  import { formatJson } from './utils';
+  defineProps({
+    log: {
+      type: [Object, String, Boolean, Number, Array],
+      required: true,
+    },
+  });
+</script>

package/components/oa-vconsole/console.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
   import { onBeforeUnmount, ref } from 'vue';
   import { consoleSubject, getConsoleLogs } from 'uniapp-log-sdk';
-  const logConvert = (items) =>
+  const logConvert = (items: any[]) =>
     items.reduce((prev, current, index) => {
       try {
         prev +=

package/components/oa-vconsole/native-event.vue

@@ -1,21 +1,22 @@
 <template>
-  <u-collapse>
-    <u-collapse-item v-for="log in nativeEventLogs" :title="getTitle(log)" :key="log.key">
+  <uni-collapse>
+    <uni-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 style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" style="font-weight: bolder">发送数据：</text>
+          <awesome-display-info :log="log.params" />
         </view>
-        <view style="word-break: break-all">
-          <text style="font-weight: bolder">接收数据：</text>
-          {{ JSON.stringify(log.response) }}
+        <view style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" style="font-weight: bolder">接收数据：</text>
+          <awesome-display-info :log="log.response" />
         </view>
       </view>
-    </u-collapse-item>
-  </u-collapse>
+    </uni-collapse-item>
+  </uni-collapse>
 </template>
 <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.vue';
   import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
   const nativeEventLogs = ref<Record<string, any>[]>(getNativeEventLogs());
   const stop = nativeEventSubject.subscribe((data) => {
@@ -34,12 +35,18 @@
 </script>
 
 <style lang="scss" scoped>
-  .u-collapse-content {
+  .uni-collapse-content {
     font-size: 12px;
   }
   ::v-deep {
-    .u-cell__title-text {
+    .uni-collapse-item__title-text {
+      white-space: normal !important; /* 允许文本换行 */
+      overflow: visible !important; /* 显示溢出的文本 */
+      text-overflow: clip !important; /* 不显示省略标记(...) */
+      line-height: normal !important; /* 重置行高 */
+      word-break: break-all !important; /* 允许单词内换行 */
       font-size: 10px;
+      font-weight: normal;
     }
   }
 </style>

package/components/oa-vconsole/network.vue

@@ -1,37 +1,38 @@
 <template>
-  <u-collapse>
-    <u-collapse-item
+  <uni-collapse>
+    <uni-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 }"
+      :class="{ 'uni-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>
+        <view style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" 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 style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" style="font-weight: bolder">请求头：</text>
+          <awesome-display-info :log="log.request.header" />
         </view>
-        <view style="word-break: break-all">
-          <text style="font-weight: bolder">请求参数：</text>
-          {{ JSON.stringify(log.request.data) }}
+        <view style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" style="font-weight: bolder">请求参数：</text>
+          <awesome-display-info :log="log.request.data" />
         </view>
-        <view style="word-break: break-all">
-          <text style="font-weight: bolder">响应数据：</text>
-          {{ JSON.stringify(log.response) }}
+        <view style="word-break: break-all; padding: 0 15px">
+          <text :selectable="true" style="font-weight: bolder">响应数据：</text>
+          <awesome-display-info :log="log.response" />
         </view>
       </view>
-    </u-collapse-item>
-  </u-collapse>
+    </uni-collapse-item>
+  </uni-collapse>
 </template>
 
 <script lang="ts" setup>
   import { ref, onBeforeUnmount } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.vue';
   import { networkSubject, getNetworkLogs } from 'uniapp-log-sdk';
-  const networkLogs = ref<{ request: any; response: any; startTime; endTime }[]>(getNetworkLogs());
+  const networkLogs = ref<{ request: any; response: any; startTime: number; endTime: number }[]>(getNetworkLogs());
   const stop = networkSubject.subscribe((data) => {
     networkLogs.value = data;
   });
@@ -48,15 +49,21 @@
 </script>
 
 <style lang="scss" scoped>
-  .u-collapse-content {
+  .uni-collapse-content {
     font-size: 12px;
   }
   ::v-deep {
-    .u-cell__title-text {
+    .uni-collapse-item__title-text {
+      white-space: normal !important; /* 允许文本换行 */
+      overflow: visible !important; /* 显示溢出的文本 */
+      text-overflow: clip !important; /* 不显示省略标记(...) */
+      line-height: normal !important; /* 重置行高 */
+      word-break: break-all !important; /* 允许单词内换行 */
       font-size: 10px;
+      font-weight: normal;
     }
-    .u-collapse-item-failed {
-      .u-cell__title-text {
+    .uni-collapse-item-failed {
+      .uni-collapse-item__title-text {
         color: red !important;
       }
     }

package/components/oa-vconsole/oa-vconsole.vue

@@ -1,7 +1,12 @@
 <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>
+  <uni-popup ref="popupRef" v-if="isShowDebugButton" background-color="#fff">
+    <view style="height: 500px; background-color: white; width: 100vw">
+      <uni-segmented-control
+        styleType="text"
+        :values="list"
+        :current="current"
+        @clickItem="(e:any) => (current = e.currentIndex)"
+      ></uni-segmented-control>
       <view style="height: calc(100% - 48px); overflow-y: auto; padding: 8px">
         <template v-if="current === 0">
           <Console />
@@ -23,7 +28,7 @@
         </template>
       </view>
     </view>
-  </u-popup>
+  </uni-popup>
   <view
     v-if="isShowDebugButton"
     @click="openDebug"
@@ -54,25 +59,26 @@
     'http://test-oa.ge.cn:6174',
   ];
   const show = ref(false);
+  const popupRef = ref();
   const baseUrl = uni.getStorageSync('baseUrl');
   const isShowDebugButton = ref(whiteUrls.some((url) => url.includes(baseUrl)) || !!uni.getStorageSync('isDebug'));
   const list = ref(['console', 'network', 'event', 'error', 'storage', 'system']);
   const current = ref(0);
   const openDebug = () => {
-    show.value = true;
+    popupRef.value?.open('bottom');
   };
   uni.$once('show-debug-button', () => {
     isShowDebugButton.value = true;
   });
   const bottom = ref(200);
   const right = ref(10);
-  let pageX, pageY;
-  const start = (e) => {
+  let pageX: number, pageY: number;
+  const start = (e: any) => {
     let page = e.changedTouches[0];
     pageX = page.pageX;
     pageY = page.pageY;
   };
-  const move = (e) => {
+  const move = (e: any) => {
     let page = e.changedTouches[0];
     let x = page.pageX - pageX;
     let y = page.pageY - pageY;

package/components/oa-vconsole/storage.vue

@@ -1,21 +1,22 @@
 <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>
+  <uni-collapse>
+    <uni-collapse-item v-for="log in storageLogs" :title="log.key" :key="log.key">
+      <view style="padding: 5px 15px">
+        <awesome-display-info :log="log.data" />
+      </view>
+    </uni-collapse-item>
+  </uni-collapse>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.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)),
+          data: uni.getStorageSync(key),
         });
       });
     },
@@ -23,12 +24,18 @@
 </script>
 
 <style lang="scss" scoped>
-  .u-collapse-content {
+  .uni-collapse-content {
     font-size: 12px;
   }
   ::v-deep {
-    .u-cell__title-text {
+    .uni-collapse-item__title-text {
+      white-space: normal !important; /* 允许文本换行 */
+      overflow: visible !important; /* 显示溢出的文本 */
+      text-overflow: clip !important; /* 不显示省略标记(...) */
+      line-height: normal !important; /* 重置行高 */
+      word-break: break-all !important; /* 允许单词内换行 */
       font-size: 10px;
+      font-weight: normal;
     }
   }
 </style>

package/components/oa-vconsole/utils.ts

@@ -1,41 +1,59 @@
-interface JsonObject {
-  [key: string]: JsonValue;
-}
+export const formatJson = (data: any, indent = 0) => {
+  const indentStr = ' '.repeat(indent);
 
-type JsonValue = JsonObject | JsonArray | string | number | boolean | null;
-
-type JsonArray = Array<JsonValue>;
-
-export function formatJson(obj: JsonValue, indent: string = ''): string {
-  let output = '';
-
-  if (Array.isArray(obj)) {
-    output += '[\n';
-    const lastIndex = obj.length - 1;
-
-    obj.forEach((value, index) => {
-      const isLast = index === lastIndex;
-      const formattedValue = formatJson(value, indent + '  ');
-      output += `${indent}  ${formattedValue}${isLast ? '' : ','}\n`;
-    });
+  // 防止死循环，限制最大递归深度
+  if (indent > 100) {
+    return [{ type: 'text', text: 'Error: Maximum recursion depth exceeded.' }];
+  }
 
-    output += `${indent}]`;
-  } else if (typeof obj === 'object' && obj !== null) {
-    output += '{\n';
-    const keys = Object.keys(obj);
-    const lastIndex = keys.length - 1;
+  if (Array.isArray(data)) {
+    return formatArray(data, indent, indentStr);
+  } else if (typeof data === 'object' && data !== null) {
+    return formatObject(data, indent, indentStr);
+  } else {
+    return formatPrimitive(data);
+  }
+};
 
-    keys.forEach((key, index) => {
-      const value = obj[key];
-      const isLast = index === lastIndex;
-      const formattedValue = formatJson(value, indent + '  ');
-      output += `${indent}  "${key}": ${formattedValue}${isLast ? '' : ','}\n`;
-    });
+const formatArray = (data: any[], indent: number, indentStr: string) => {
+  if (data.length === 0) {
+    return [{ type: 'text', text: '[]' }];
+  }
 
-    output += `${indent}}`;
+  let formatted = [{ type: 'text', text: '[\n' }];
+  data.forEach((item, index) => {
+    formatted.push({ type: 'text', text: indentStr + ' '.repeat(2) });
+    formatted.push(...formatJson(item, indent + 2));
+    if (index < data.length - 1) {
+      formatted.push({ type: 'text', text: ',\n' });
+    } else {
+      formatted.push({ type: 'text', text: '\n' });
+    }
+  });
+  formatted.push({ type: 'text', text: indentStr + ']' });
+
+  return formatted;
+};
+
+const formatObject = (data: Record<string, any>, indent: number, indentStr: string) => {
+  let formatted = [{ type: 'text', text: '{\n' }];
+  const keys = Object.keys(data);
+  keys.forEach((key, index) => {
+    formatted.push({ type: 'text', text: indentStr + ' '.repeat(2) + key + ': ' });
+    formatted.push(...formatJson(data[key], indent + 2));
+    if (index < keys.length - 1) {
+      formatted.push({ type: 'text', text: ',\n' });
+    }
+  });
+  formatted.push({ type: 'text', text: '\n' + indentStr + '}' });
+
+  return formatted;
+};
+
+const formatPrimitive = (data: any) => {
+  if (typeof data === 'string') {
+    return [{ type: 'text', text: `"${data}"` }];
   } else {
-    output += JSON.stringify(obj);
+    return [{ type: 'text', text: String(data) }];
   }
-
-  return output;
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "uniapp小程序组件库",
   "main": "dist/index.umd.js",
   "typings": "dist/index.d.ts",