oxy-uni-ui 2.1.1 → 2.1.2

package/devTools/page/components/listItem/vuexList.vue

@@ -0,0 +1,599 @@
+<template>
+  <view class="vuexList">
+    <view
+      v-if="!isLoaded"
+      class="dataLoading"
+    >
+      <text class="status">加载中</text>
+    </view>
+
+    <view
+      v-else-if="isEmpty"
+      class="dataLoading"
+    >
+      <text class="status">暂无状态数据</text>
+    </view>
+
+    <template v-else>
+      <view
+        v-for="(item, index) in stateRows"
+        :key="`${item.key}_${index}`"
+        class="stateRow"
+        @click="openValueViewer(item)"
+      >
+        <view class="section keySection">
+          <text class="sectionLabel">KEY</text>
+          <view class="keyContentRow">
+            <text class="keyText">{{ item.key }}</text>
+            <view
+              class="detailBtn"
+              @click.stop="openValueViewer(item)"
+            >
+              <text class="detailBtnText">查看详情</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="sectionDivider" />
+
+        <view class="section valueSection">
+          <text class="sectionLabel">VALUE</text>
+          <text class="sectionText valueText">{{ item.preview }}</text>
+        </view>
+      </view>
+    </template>
+
+    <view
+      v-if="valueViewer.show"
+      class="valueViewerMask"
+      @click="closeValueViewer"
+    >
+      <view
+        class="valueViewerCard"
+        @click.stop
+      >
+        <view class="viewerHead">
+          <text class="viewerTitle">键值详情</text>
+          <text
+            class="viewerClose"
+            @click.stop="closeValueViewer"
+          >
+            ×
+          </text>
+        </view>
+
+        <view class="viewerSection">
+          <view class="viewerKeyRow">
+            <text class="sectionLabel">KEY</text>
+            <text class="viewerKey">{{ valueViewer.key }}</text>
+          </view>
+        </view>
+
+        <view class="viewerSection">
+          <text class="sectionLabel">VALUE</text>
+          <scroll-view
+            scroll-y
+            class="viewerBody"
+          >
+            <text class="viewerText">{{ valueViewer.fullText }}</text>
+          </scroll-view>
+        </view>
+
+        <view class="viewerActions">
+          <view
+            class="viewerBtn"
+            @click.stop="copyViewerValue"
+          >
+            <text class="viewerBtnText">复制</text>
+          </view>
+
+          <view
+            v-if="valueViewer.canEdit"
+            class="viewerBtn"
+            @click.stop="editViewerValue"
+          >
+            <text class="viewerBtnText">编辑</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import devUi from "../../../core/libs/devUi.js";
+
+function isPrimitiveEditable(value) {
+  const vType = typeof value;
+  return value === null || vType === "string" || vType === "number" || vType === "boolean" || vType === "undefined";
+}
+
+export default {
+  props: {
+    /**
+     * 全局变量类型
+     */
+    stateType: {
+      type: String,
+      default: "vuex",
+    },
+  },
+  data() {
+    return {
+      isLoaded: false,
+      isEmpty: false,
+      stateRows: [],
+      loadToken: 0,
+      maxPreviewLength: 120,
+      valueViewer: {
+        show: false,
+        key: "",
+        fullText: "",
+        path: [],
+        canEdit: false,
+      },
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  beforeUnmount() {
+    this.loadToken += 1;
+    uni.$emit("devTools_valueViewer_hide");
+  },
+  beforeDestroy() {
+    this.loadToken += 1;
+    uni.$emit("devTools_valueViewer_hide");
+  },
+  watch: {
+    stateType() {
+      this.getData();
+    },
+  },
+  methods: {
+    /**
+     * 加载数据
+     */
+    async getData() {
+      const loadToken = ++this.loadToken;
+      this.isLoaded = false;
+      this.isEmpty = false;
+
+      const snapshot = this.getStateSnapshot();
+      if (loadToken !== this.loadToken) {
+        return false;
+      }
+
+      this.stateRows = this.buildStateRows(snapshot);
+      this.isEmpty = this.stateRows.length === 0;
+      this.isLoaded = true;
+      this.closeValueViewer();
+      return true;
+    },
+    getStateSnapshot() {
+      let data = {};
+      if (this.stateType == "vuex") {
+        try {
+          data = JSON.parse(JSON.stringify(this.$store.state));
+        } catch (error) {}
+      } else if (this.stateType == "pinia") {
+        try {
+          if (uni.Pinia) {
+            data = JSON.parse(JSON.stringify(uni.Pinia.getActivePinia().state.value));
+          } else if (this.$pinia) {
+            data = JSON.parse(JSON.stringify(this.$pinia.state.value));
+          }
+        } catch (error) {}
+      } else if (this.stateType == "globalData") {
+        try {
+          data = JSON.parse(JSON.stringify(getApp().globalData));
+        } catch (error) {}
+      }
+      return data;
+    },
+    getMutableStateRoot() {
+      if (this.stateType == "vuex") {
+        return this.$store ? this.$store.state : null;
+      }
+      if (this.stateType == "pinia") {
+        if (uni.Pinia) {
+          return uni.Pinia.getActivePinia().state.value;
+        }
+        if (this.$pinia) {
+          return this.$pinia.state.value;
+        }
+        return null;
+      }
+      if (this.stateType == "globalData") {
+        try {
+          return getApp().globalData;
+        } catch (error) {
+          return null;
+        }
+      }
+      return null;
+    },
+    buildStateRows(data) {
+      if (!data || typeof data != "object") {
+        return [];
+      }
+
+      const keys = Reflect.ownKeys(data).filter((key) => typeof key != "symbol");
+      return keys.map((key) => {
+        const value = data[key];
+        const fullText = this.stringifyValue(value, true);
+        return {
+          key: String(key),
+          path: [key],
+          value,
+          fullText,
+          preview: this.getPreviewText(fullText),
+          canEdit: isPrimitiveEditable(value),
+        };
+      });
+    },
+    getPreviewText(fullText) {
+      const singleLine = String(fullText || "")
+        .replace(/\s+/g, " ")
+        .trim();
+      if (singleLine.length <= this.maxPreviewLength) {
+        return singleLine;
+      }
+      return `${singleLine.slice(0, this.maxPreviewLength)}...`;
+    },
+    stringifyValue(data, pretty = false) {
+      try {
+        if (data === undefined) return "undefined";
+        if (data === null) return "null";
+        if (typeof data == "boolean") return data ? "true" : "false";
+        if (typeof data == "number") {
+          if (Number.isFinite(data)) return String(data);
+          return isNaN(data) ? "NaN" : "Infinity";
+        }
+        if (typeof data == "string") return data;
+        if (typeof data == "object") return JSON.stringify(data, null, pretty ? 2 : 0);
+        return data.toString();
+      } catch (error) {
+        return "尝试解析失败！" + error;
+      }
+    },
+    openValueViewer(item) {
+      uni.$emit("devTools_valueViewer_show");
+      this.valueViewer = {
+        show: true,
+        key: item.key,
+        fullText: item.fullText,
+        path: item.path || [],
+        canEdit: item.canEdit === true,
+      };
+    },
+    closeValueViewer() {
+      if (this.valueViewer.show) {
+        uni.$emit("devTools_valueViewer_hide");
+      }
+      this.valueViewer = {
+        ...this.valueViewer,
+        show: false,
+      };
+    },
+    copyViewerValue() {
+      if (!this.valueViewer.show) {
+        return;
+      }
+      this.copyToClipboard(this.buildCopyText(this.valueViewer.key, this.valueViewer.fullText));
+    },
+    copyToClipboard(data) {
+      uni.setClipboardData({
+        data,
+        success: () => {
+          devUi.showToast({
+            icon: "success",
+            title: "复制成功",
+          });
+        },
+      });
+    },
+    buildCopyText(key, valueText) {
+      return `KEY: ${key}\nVALUE:\n${valueText}`;
+    },
+    editViewerValue() {
+      if (!this.valueViewer.show || !this.valueViewer.canEdit) {
+        return;
+      }
+      const row = this.stateRows.find((x) => x.key === this.valueViewer.key);
+      if (!row) {
+        this.closeValueViewer();
+        return;
+      }
+      this.closeValueViewer();
+      this.editStateValue(row);
+    },
+    getValueByPath(root, path) {
+      let cursor = root;
+      for (let i = 0; i < path.length; i++) {
+        if (!cursor || typeof cursor != "object") {
+          return undefined;
+        }
+        cursor = cursor[path[i]];
+      }
+      return cursor;
+    },
+    setValueByPath(root, path, val) {
+      if (!root || typeof root != "object" || !Array.isArray(path) || path.length == 0) {
+        return false;
+      }
+      let cursor = root;
+      for (let i = 0; i < path.length - 1; i++) {
+        if (!cursor || typeof cursor != "object") {
+          return false;
+        }
+        cursor = cursor[path[i]];
+      }
+
+      if (!cursor || typeof cursor != "object") {
+        return false;
+      }
+
+      const lastKey = path[path.length - 1];
+      if (this.$set) {
+        this.$set(cursor, lastKey, val);
+      } else {
+        cursor[lastKey] = val;
+      }
+      return true;
+    },
+    editStateValue(item) {
+      const root = this.getMutableStateRoot();
+      if (!root || !item || !item.path || item.path.length == 0) {
+        this.getData();
+        return;
+      }
+
+      const oldValue = this.getValueByPath(root, item.path);
+      const oldType = typeof oldValue;
+      const isBool = oldType == "boolean";
+
+      let value = oldValue;
+      if (isBool) {
+        value = value ? "true" : "false";
+      } else if (value === undefined || value === null) {
+        value = "";
+      } else {
+        value = String(value);
+      }
+
+      uni.$emit("devTools_showEditDialog", {
+        title: item.key,
+        value,
+      });
+
+      uni.$on("devTools_editDialogClose", () => {
+        uni.$off("devTools_editDialogSaveSuccess");
+        uni.$off("devTools_editDialogClose");
+      });
+
+      uni.$on("devTools_editDialogSaveSuccess", (val) => {
+        uni.$off("devTools_editDialogSaveSuccess");
+        uni.$off("devTools_editDialogClose");
+
+        if (isBool && (val == "true" || val == "false")) {
+          val = val == "true";
+        }
+
+        this.setValueByPath(root, item.path, val);
+        this.getData();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.vuexList {
+  padding: 16rpx 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dataLoading {
+  width: 100%;
+  box-sizing: border-box;
+  height: 220rpx;
+  margin: 10rpx 0;
+  border-radius: 16rpx;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  background: #f8fafc;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .status {
+    font-size: 24rpx;
+    color: #64748b;
+    line-height: 34rpx;
+  }
+}
+
+.stateRow {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: #fff;
+  margin: 0 0 12rpx;
+  padding: 14rpx 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.sectionLabel {
+  font-size: 18rpx;
+  line-height: 24rpx;
+  color: #94a3b8;
+  letter-spacing: 1rpx;
+  text-transform: uppercase;
+}
+
+.sectionText {
+  margin-top: 6rpx;
+  word-break: break-all;
+}
+
+.keyText {
+  flex: 1;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #0f172a;
+  font-weight: 500;
+  word-break: break-all;
+  padding-right: 12rpx;
+}
+
+.keyContentRow {
+  margin-top: 6rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.detailBtn {
+  height: 44rpx;
+  padding: 0 14rpx;
+  border-radius: 22rpx;
+  border: 1px solid rgba(59, 130, 246, 0.26);
+  background: #eff6ff;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.detailBtnText {
+  font-size: 20rpx;
+  line-height: 28rpx;
+  color: #2563eb;
+}
+
+.sectionDivider {
+  margin: 10rpx 0;
+  height: 1px;
+  background: rgba(148, 163, 184, 0.22);
+}
+
+.valueText {
+  font-size: 22rpx;
+  line-height: 30rpx;
+  color: #334155;
+}
+
+.valueViewerMask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: var(--devtools-panel-top, 40vh);
+  bottom: 0;
+  background: rgba(15, 23, 42, 0.45);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.valueViewerCard {
+  width: 700rpx;
+  max-height: calc(var(--devtools-panel-height, 60vh) - 40rpx);
+  border-radius: 16rpx;
+  background: #fff;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  padding: 14rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewerHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.viewerTitle {
+  flex: 1;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #0f172a;
+  font-weight: 500;
+}
+
+.viewerClose {
+  width: 44rpx;
+  text-align: center;
+  font-size: 42rpx;
+  line-height: 32rpx;
+  color: #64748b;
+}
+
+.viewerSection {
+  margin-top: 12rpx;
+}
+
+.viewerKey {
+  margin-left: 10rpx;
+  font-size: 22rpx;
+  line-height: 32rpx;
+  color: #0f172a;
+  word-break: break-all;
+}
+
+.viewerKeyRow {
+  margin-top: 6rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.viewerBody {
+  margin-top: 8rpx;
+  height: 560rpx;
+  padding: 10rpx;
+  background: #f8fafc;
+  border-radius: 10rpx;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+}
+
+.viewerText {
+  font-size: 22rpx;
+  line-height: 32rpx;
+  color: #334155;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.viewerActions {
+  margin-top: 12rpx;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.viewerBtn {
+  min-width: 108rpx;
+  height: 56rpx;
+  border-radius: 10rpx;
+  background: #f1f5f9;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8rpx;
+}
+
+.viewerBtnText {
+  font-size: 22rpx;
+  color: #334155;
+}
+</style>