oxy-uni-ui 2.1.1 → 2.1.2

package/devTools/components/DevToolsUiHost.vue

@@ -0,0 +1,589 @@
+<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/devTools/config.js

@@ -0,0 +1,55 @@
+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;