oxy-uni-ui 2.1.1 → 2.1.2

package/oxy-dev-tools/page/components/listItem/vuexList.vue

@@ -0,0 +1,559 @@
+<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')
+  },
+  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>