oxy-uni-ui 2.1.0 → 2.1.2

package/oxy-dev-tools/components/DevToolsUiHost.vue

@@ -0,0 +1,555 @@
+<template>
+  <view v-show="visible" class="devtools-ui-host">
+    <view v-if="loading.show" class="loading-mask" :class="{ passthrough: !loading.mask }">
+      <view class="loading-card">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">{{ loading.title || '加载中...' }}</text>
+      </view>
+    </view>
+
+    <view v-if="modal.show" class="modal-mask" @click="onModalMaskClick">
+      <view class="modal-card" :class="`tone-${modal.tone}`" @click.stop>
+        <view class="modal-head">
+          <view class="modal-head-dot"></view>
+          <text class="modal-title">{{ modal.title }}</text>
+        </view>
+        <text class="modal-content">{{ modal.content }}</text>
+        <view class="modal-actions">
+          <view v-if="modal.showCancel" class="modal-btn cancel" @click="closeModal(false)">
+            <text class="modal-btn-text" :style="{ color: modal.cancelColor }">{{ modal.cancelText }}</text>
+          </view>
+          <view class="modal-btn confirm" @click="closeModal(true)">
+            <text class="modal-btn-text" :style="{ color: modal.confirmColor }">{{ modal.confirmText }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="actionSheet.show" class="action-sheet-mask" @click="closeActionSheet(-1)">
+      <view class="action-sheet-wrap" @click.stop>
+        <view class="action-sheet-card">
+          <text v-if="actionSheet.title" class="action-sheet-title">
+            {{ actionSheet.title }}
+          </text>
+          <view
+            v-for="(item, index) in actionSheet.itemList"
+            :key="`${index}_${item.title}`"
+            class="action-sheet-item"
+            @click="closeActionSheet(index)"
+          >
+            <view class="action-sheet-item-content">
+              <text
+                class="action-sheet-item-text"
+                :style="{
+                  color:
+                    index === actionSheet.destructiveIndex
+                      ? '#dc2626'
+                      : index === actionSheet.selectedIndex
+                      ? actionSheet.selectedColor || '#2563eb'
+                      : actionSheet.itemColor || '#1e3a8a'
+                }"
+              >
+                {{ item.title }}
+              </text>
+              <text v-if="item.msg" class="action-sheet-item-msg">
+                {{ item.msg }}
+              </text>
+            </view>
+          </view>
+        </view>
+        <view class="action-sheet-cancel" @click="closeActionSheet(-1)">
+          <text class="action-sheet-cancel-text">{{ actionSheet.cancelText || '取消' }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view v-if="toast.show" class="toast-wrap">
+      <view class="toast-card" :class="`type-${toastType}`">
+        <view class="toast-dot"></view>
+        <text class="toast-text">{{ toast.title }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, reactive } from 'vue'
+
+const EVENT_HOST_READY = 'devTools_ui_host_ready'
+const EVENT_HOST_DESTROYED = 'devTools_ui_host_destroyed'
+const EVENT_MODAL_SHOW = 'devTools_ui_modal_show'
+const EVENT_TOAST_SHOW = 'devTools_ui_toast_show'
+const EVENT_LOADING_SHOW = 'devTools_ui_loading_show'
+const EVENT_LOADING_HIDE = 'devTools_ui_loading_hide'
+const EVENT_ACTION_SHEET_SHOW = 'devTools_ui_action_sheet_show'
+
+let toastTimer = 0
+let activeModalEvent = ''
+let activeActionSheetEvent = ''
+
+const modal = reactive({
+  show: false,
+  title: '提示',
+  content: '',
+  tone: 'default',
+  showCancel: true,
+  cancelText: '取消',
+  cancelColor: '#6b7280',
+  confirmText: '确定',
+  confirmColor: '#3b82f6'
+})
+
+const toast = reactive({
+  show: false,
+  title: '',
+  icon: 'none'
+})
+
+const loading = reactive({
+  show: false,
+  title: '加载中...',
+  mask: false
+})
+
+const actionSheet = reactive({
+  show: false,
+  title: '',
+  itemList: [],
+  itemColor: '#1e3a8a',
+  selectedIndex: -1,
+  selectedColor: '#2563eb',
+  cancelText: '取消',
+  destructiveIndex: -1
+})
+
+const visible = computed(() => modal.show || toast.show || loading.show || actionSheet.show)
+const toastType = computed(() => {
+  if (toast.icon === 'success') return 'success'
+  if (toast.icon === 'error') return 'error'
+  return 'info'
+})
+
+function openModal(payload = {}) {
+  const options = payload.options || {}
+  activeModalEvent = payload.resultEvent || ''
+  modal.show = true
+  modal.title = options.title || '提示'
+  modal.content = options.content || ''
+  modal.tone = options.tone || 'default'
+  modal.showCancel = options.showCancel !== false
+  modal.cancelText = options.cancelText || '取消'
+  modal.cancelColor = options.cancelColor || '#6b7280'
+  modal.confirmText = options.confirmText || '确定'
+  modal.confirmColor = options.confirmColor || '#3b82f6'
+}
+
+function closeModal(confirm) {
+  const res = {
+    confirm,
+    cancel: !confirm,
+    errMsg: 'showModal:ok'
+  }
+  const eventName = activeModalEvent
+  modal.show = false
+  activeModalEvent = ''
+  if (eventName) {
+    uni.$emit(eventName, res)
+    // 兼容未实现 $once 的运行时，确保 $on 监听也能及时释放
+    uni.$off(eventName)
+  }
+}
+
+function onModalMaskClick() {
+  if (!modal.showCancel) return
+  closeModal(false)
+}
+
+function openActionSheet(payload = {}) {
+  const options = payload.options || {}
+  activeActionSheetEvent = payload.resultEvent || ''
+  actionSheet.show = true
+  actionSheet.title = options.title || ''
+  actionSheet.itemList = Array.isArray(options.itemList)
+    ? options.itemList.map((item) => {
+        if (item && typeof item === 'object') {
+          return {
+            title: String(item.title || item.text || ''),
+            msg: item.msg ? String(item.msg) : ''
+          }
+        }
+        return {
+          title: String(item),
+          msg: ''
+        }
+      })
+    : []
+  actionSheet.itemColor = options.itemColor || '#1e3a8a'
+  actionSheet.selectedIndex = typeof options.selectedIndex === 'number' ? options.selectedIndex : -1
+  actionSheet.selectedColor = options.selectedColor || '#2563eb'
+  actionSheet.cancelText = options.cancelText || '取消'
+  actionSheet.destructiveIndex = typeof options.destructiveIndex === 'number' ? options.destructiveIndex : -1
+}
+
+function closeActionSheet(tapIndex = -1) {
+  const eventName = activeActionSheetEvent
+  actionSheet.show = false
+  activeActionSheetEvent = ''
+  const res = {
+    tapIndex,
+    cancel: tapIndex < 0,
+    errMsg: tapIndex < 0 ? 'showActionSheet:fail cancel' : 'showActionSheet:ok'
+  }
+  if (eventName) {
+    uni.$emit(eventName, res)
+    uni.$off(eventName)
+  }
+}
+
+function openToast(options = {}) {
+  toast.show = true
+  toast.title = options.title || ''
+  toast.icon = options.icon || 'none'
+  if (toastTimer) {
+    clearTimeout(toastTimer)
+    toastTimer = 0
+  }
+  const duration = typeof options.duration === 'number' ? options.duration : 1500
+  toastTimer = setTimeout(() => {
+    toast.show = false
+  }, Math.max(duration, 300))
+}
+
+function showLoading(options = {}) {
+  loading.show = true
+  loading.title = options.title || '加载中...'
+  loading.mask = options.mask === true
+}
+
+function hideLoading() {
+  loading.show = false
+}
+
+onMounted(() => {
+  uni.$on(EVENT_MODAL_SHOW, openModal)
+  uni.$on(EVENT_ACTION_SHEET_SHOW, openActionSheet)
+  uni.$on(EVENT_TOAST_SHOW, openToast)
+  uni.$on(EVENT_LOADING_SHOW, showLoading)
+  uni.$on(EVENT_LOADING_HIDE, hideLoading)
+  uni.$emit(EVENT_HOST_READY)
+})
+
+onBeforeUnmount(() => {
+  if (toastTimer) {
+    clearTimeout(toastTimer)
+    toastTimer = 0
+  }
+  uni.$off(EVENT_MODAL_SHOW, openModal)
+  uni.$off(EVENT_ACTION_SHEET_SHOW, openActionSheet)
+  uni.$off(EVENT_TOAST_SHOW, openToast)
+  uni.$off(EVENT_LOADING_SHOW, showLoading)
+  uni.$off(EVENT_LOADING_HIDE, hideLoading)
+  uni.$emit(EVENT_HOST_DESTROYED)
+})
+</script>
+
+<style scoped lang="scss">
+.devtools-ui-host {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+}
+
+.modal-mask,
+.loading-mask,
+.action-sheet-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.modal-mask,
+.loading-mask {
+  align-items: center;
+}
+
+.modal-mask {
+  background: rgba(15, 23, 42, 0.52);
+  backdrop-filter: blur(2px);
+}
+
+.modal-card {
+  width: 640rpx;
+  border-radius: 22rpx;
+  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 45%);
+  overflow: hidden;
+  border: 1px solid rgba(59, 130, 246, 0.28);
+  box-shadow: 0 14rpx 36rpx rgba(15, 23, 42, 0.25);
+}
+
+.modal-card.tone-warning {
+  border-color: rgba(220, 38, 38, 0.35);
+  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 45%);
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 24rpx 28rpx 4rpx;
+}
+
+.modal-head-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #3b82f6;
+  box-shadow: 0 0 0 6rpx #dbeafe;
+}
+
+.modal-card.tone-warning .modal-head-dot {
+  background: #ef4444;
+  box-shadow: 0 0 0 6rpx rgba(254, 226, 226, 0.95);
+}
+
+.modal-title {
+  display: block;
+  font-size: 30rpx;
+  line-height: 38rpx;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.modal-card.tone-warning .modal-title {
+  color: #b91c1c;
+}
+
+.modal-content {
+  display: block;
+  padding: 6rpx 28rpx 28rpx;
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #334155;
+}
+
+.modal-card.tone-warning .modal-content {
+  color: #dc2626;
+}
+
+.modal-actions {
+  display: flex;
+  border-top: 1px solid rgba(148, 163, 184, 0.28);
+  background: #f8fafc;
+}
+
+.modal-btn {
+  flex: 1;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease;
+  &:active {
+    background: rgba(59, 130, 246, 0.09);
+  }
+}
+
+.modal-btn.cancel {
+  border-right: 1px solid rgba(148, 163, 184, 0.28);
+}
+
+.modal-btn-text {
+  font-size: 28rpx;
+  line-height: 28rpx;
+  font-weight: 500;
+}
+
+.toast-wrap {
+  position: absolute;
+  left: 50%;
+  bottom: 210rpx;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.toast-card {
+  min-width: 220rpx;
+  max-width: 560rpx;
+  padding: 16rpx 24rpx;
+  border-radius: 14rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12rpx;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.22);
+}
+
+.toast-card.type-info {
+  background: rgba(15, 23, 42, 0.9);
+}
+
+.toast-card.type-success {
+  background: rgba(22, 163, 74, 0.95);
+}
+
+.toast-card.type-error {
+  background: rgba(220, 38, 38, 0.96);
+}
+
+.toast-dot {
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.toast-text {
+  display: inline-block;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #fff;
+  text-align: left;
+  word-break: break-all;
+}
+
+.loading-mask {
+  background: rgba(15, 23, 42, 0.36);
+}
+
+.action-sheet-mask {
+  background: rgba(15, 23, 42, 0.52);
+  backdrop-filter: blur(2px);
+}
+
+.action-sheet-wrap {
+  width: 710rpx;
+  margin-bottom: 26rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 14rpx;
+}
+
+.action-sheet-card {
+  border-radius: 20rpx;
+  overflow: hidden;
+  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 40%);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  box-shadow: 0 14rpx 36rpx rgba(15, 23, 42, 0.26);
+}
+
+.action-sheet-title {
+  display: block;
+  padding: 24rpx 26rpx 16rpx;
+  font-size: 22rpx;
+  line-height: 32rpx;
+  color: #64748b;
+  text-align: center;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.action-sheet-item {
+  min-height: 92rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+  &:last-child {
+    border-bottom: none;
+  }
+  &:active {
+    background: rgba(59, 130, 246, 0.08);
+  }
+}
+
+.action-sheet-item-content {
+  width: 100%;
+  padding: 14rpx 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-sheet-item-text {
+  font-size: 30rpx;
+  line-height: 38rpx;
+  font-weight: 500;
+}
+
+.action-sheet-item-msg {
+  margin-top: 6rpx;
+  font-size: 23rpx;
+  line-height: 31rpx;
+  color: #94a3b8;
+}
+
+.action-sheet-cancel {
+  height: 92rpx;
+  border-radius: 20rpx;
+  background: #fff;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:active {
+    background: #f8fafc;
+  }
+}
+
+.action-sheet-cancel-text {
+  font-size: 30rpx;
+  line-height: 38rpx;
+  color: #334155;
+  font-weight: 500;
+}
+
+.loading-mask.passthrough {
+  pointer-events: none;
+  background: transparent;
+}
+
+.loading-card {
+  width: 210rpx;
+  min-height: 176rpx;
+  padding: 24rpx 18rpx;
+  border-radius: 18rpx;
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(59, 130, 246, 0.35);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.35);
+}
+
+.loading-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(59, 130, 246, 0.25);
+  border-top-color: #60a5fa;
+  animation: spin 0.66s linear infinite;
+}
+
+.loading-text {
+  margin-top: 14rpx;
+  font-size: 23rpx;
+  line-height: 31rpx;
+  color: #e2e8f0;
+  text-align: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/oxy-dev-tools/config.js

@@ -0,0 +1,61 @@
+let config = {
+  status: true, //调试工具总开关
+  bubble: {
+    //调试弹窗气泡设置
+    status: true, // 气泡标签是否显示，生产环境建议关闭
+    text: 'DevTools', // 气泡上展示的文字
+    color: '#ffffff', // 气泡文字颜色
+    bgColor: 'rgba(250, 53, 52,0.7)' // 气泡背景颜色
+  },
+
+  // 注意： 以下配置不建议更改
+  console: {
+    //console日志配置
+    status: true, //功能总开关
+    isOutput: true, //打印的日志是否对外输出到浏览器调试界面，建议在生产环境时关闭
+    cache: {
+      status: true, //是否启用本地缓存
+      size: 512 * 1024, //缓存上限，单位byte
+      rowSize: 1024 * 4 //单条记录缓存上限，单位byte
+    }
+  },
+  uniBus: {
+    // uni event bus 监听设置
+    status: true,
+    cache: {
+      status: true,
+      size: 1024 * 512, // bus调用日志上限 byte
+      rowSize: 1024 * 10,
+      countMaxSize: 1024 * 10 // bus统计上限 byte
+    }
+  },
+  error: {
+    //报错拦截配置
+    status: true,
+    cache: {
+      status: true,
+      size: 512 * 1024,
+      rowSize: 1024 * 4
+    }
+  },
+  network: {
+    //请求拦截配置
+    status: true,
+    cache: {
+      status: true,
+      size: 512 * 1024,
+      rowSize: 1024 * 4
+    }
+  },
+  logs: {
+    //运行日志
+    status: true,
+    cache: {
+      status: true,
+      size: 512 * 1024,
+      rowSize: 1024 * 4
+    }
+  }
+}
+
+export default config