oxy-uni-ui 2.1.1 → 2.1.2

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

@@ -0,0 +1,623 @@
+<template>
+  <view class="storageList">
+    <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 storageList" :key="`${item.key}_${index}`" class="storageRow" @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 class="viewerBtn" @click.stop="editViewerValue">
+            <text class="viewerBtnText">编辑</text>
+          </view>
+
+          <view class="viewerBtn danger" @click.stop="deleteViewerValue">
+            <text class="viewerBtnText">删除</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// #ifdef MP
+import devCache from '../../../core/libs/devCache'
+// #endif
+import devUi from '../../../core/libs/devUi.js'
+
+export default {
+  data() {
+    return {
+      isLoaded: false,
+      isEmpty: false,
+      storageType: 'localStorage',
+      storageList: [],
+      maxPreviewLength: 120,
+      loadToken: 0,
+      valueViewer: {
+        show: false,
+        key: '',
+        fullText: ''
+      }
+    }
+  },
+  beforeUnmount() {
+    this.loadToken += 1
+    uni.$emit('devTools_valueViewer_hide')
+  },
+  methods: {
+    async getData(storageType) {
+      const currentToken = ++this.loadToken
+      this.isLoaded = false
+      this.storageType = storageType || this.storageType || 'localStorage'
+      const activeStorageType = this.storageType
+      const data = {}
+
+      // #ifdef APP-PLUS
+      const keys = plus.storage.getAllKeys()
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i]
+        if (key.indexOf('devTools_') === 0) {
+          continue
+        }
+        data[key] = uni.getStorageSync(key)
+      }
+      // #endif
+
+      // #ifdef H5
+      if (activeStorageType === 'localStorage') {
+        for (let i = 0; i < localStorage.length; i++) {
+          const key = localStorage.key(i)
+          if (!key || key.indexOf('devTools_') === 0) {
+            continue
+          }
+          data[key] = localStorage.getItem(key)
+        }
+      } else if (activeStorageType === 'sessionStorage') {
+        for (let i = 0; i < sessionStorage.length; i++) {
+          const key = sessionStorage.key(i)
+          if (!key || key.indexOf('devTools_') === 0) {
+            continue
+          }
+          data[key] = sessionStorage.getItem(key)
+        }
+      } else if (activeStorageType === 'cookie') {
+        document.cookie.split(';').forEach((cookieStr) => {
+          if (!cookieStr || cookieStr.trim() === '') {
+            return
+          }
+          const [name, value] = cookieStr.trim().split('=')
+          if (!name) {
+            return
+          }
+          let parsedKey = name
+          let parsedValue = value || ''
+          try {
+            parsedKey = decodeURIComponent(name)
+            parsedValue = decodeURIComponent(value || '')
+          } catch (error) {}
+          data[parsedKey] = parsedValue
+        })
+      }
+      // #endif
+
+      // #ifdef MP
+      let keyList = devCache.get('storage')
+      if (!keyList) {
+        keyList = []
+      }
+      for (let i = 0; i < keyList.length; i++) {
+        const key = keyList[i]
+        if (key.indexOf('devTools_') === 0) {
+          continue
+        }
+        data[key] = uni.getStorageSync(key)
+      }
+      // #endif
+
+      if (currentToken !== this.loadToken) {
+        return
+      }
+
+      this.storageList = this.buildStorageList(data)
+      this.isEmpty = this.storageList.length === 0
+      this.isLoaded = true
+      this.closeValueViewer()
+    },
+
+    buildStorageList(data) {
+      const keys = Object.keys(data || {})
+      return keys.map((key) => {
+        const fullText = this.formatStorageValue(data[key])
+        return {
+          key,
+          fullText,
+          preview: this.getPreviewText(fullText)
+        }
+      })
+    },
+
+    formatStorageValue(value) {
+      if (typeof value === 'string') {
+        return value
+      }
+      if (value === undefined) {
+        return 'undefined'
+      }
+      if (value === null) {
+        return 'null'
+      }
+      if (typeof value === 'boolean') {
+        return value ? 'true' : 'false'
+      }
+      if (typeof value === 'object') {
+        try {
+          return JSON.stringify(value, null, 2)
+        } catch (error) {
+          return String(value)
+        }
+      }
+      return String(value)
+    },
+
+    getPreviewText(fullText) {
+      const singleLine = fullText.replace(/\s+/g, ' ').trim()
+      if (singleLine.length <= this.maxPreviewLength) {
+        return singleLine
+      }
+      return `${singleLine.slice(0, this.maxPreviewLength)}...`
+    },
+
+    openValueViewer(item) {
+      uni.$emit('devTools_valueViewer_show')
+      this.valueViewer = {
+        show: true,
+        key: item.key,
+        fullText: item.fullText
+      }
+    },
+
+    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() {
+      const row = this.storageList.find((x) => x.key === this.valueViewer.key)
+      if (!row) {
+        this.closeValueViewer()
+        return
+      }
+      this.closeValueViewer()
+      this.editItemValue(row)
+    },
+
+    deleteViewerValue() {
+      const row = this.storageList.find((x) => x.key === this.valueViewer.key)
+      if (!row) {
+        this.closeValueViewer()
+        return
+      }
+      this.closeValueViewer()
+      this.deleteItem(row)
+    },
+
+    deleteItem(item) {
+      const key = item.key
+
+      // #ifdef H5
+      if (this.storageType === 'localStorage') {
+        localStorage.removeItem(key)
+      } else if (this.storageType === 'sessionStorage') {
+        sessionStorage.removeItem(key)
+      } else if (this.storageType === 'cookie') {
+        document.cookie = `${encodeURIComponent(key)}=;expires=${new Date(Date.now() - 1000).toUTCString()};path=/`
+      }
+      // #endif
+
+      // #ifndef H5
+      uni.removeStorageSync(key)
+      // #endif
+
+      devUi.showToast({
+        title: '删除成功!',
+        icon: 'success'
+      })
+
+      if (this.storageType === 'cookie') {
+        setTimeout(() => {
+          this.getData()
+        }, 1200)
+      } else {
+        this.getData()
+      }
+    },
+
+    editItemValue(item) {
+      const key = item.key
+      let value = this.getItemRawValue(key)
+
+      if (typeof value === 'object' && value !== null) {
+        value = JSON.stringify(value)
+      } else if (value === false) {
+        value = 'false'
+      } else if (value === true) {
+        value = 'true'
+      } else if (value === undefined || value === null) {
+        value = ''
+      } else {
+        value = String(value)
+      }
+
+      uni.$emit('devTools_showEditDialog', {
+        title: `key:${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')
+
+        const oldValue = this.getItemRawValue(key)
+        if (oldValue === false || oldValue === true) {
+          if (val === 'true' || val === 'false') {
+            val = val === 'true'
+          }
+        }
+
+        // #ifdef H5
+        if (this.storageType === 'localStorage') {
+          localStorage.setItem(key, val)
+        } else if (this.storageType === 'sessionStorage') {
+          sessionStorage.setItem(key, val)
+        } else if (this.storageType === 'cookie') {
+          const cookieKey = encodeURIComponent(key)
+          const cookieVal = encodeURIComponent(val)
+          const cookie = `${cookieKey}=${cookieVal}; path=/; expires=${new Date(new Date().getTime() + 86400 * 1000 * 365).toGMTString()}`
+          document.cookie = cookie
+        }
+        // #endif
+
+        // #ifndef H5
+        uni.setStorageSync(key, val)
+        // #endif
+
+        devUi.showToast({
+          icon: 'success',
+          title: '保存成功'
+        })
+
+        setTimeout(() => {
+          this.getData()
+        }, 300)
+      })
+    },
+
+    getItemRawValue(key) {
+      // #ifdef H5
+      if (this.storageType === 'localStorage') {
+        return localStorage.getItem(key)
+      }
+      if (this.storageType === 'sessionStorage') {
+        return sessionStorage.getItem(key)
+      }
+      if (this.storageType === 'cookie') {
+        let cookieValue = ''
+        document.cookie.split(';').forEach((cookieStr) => {
+          const [name, value] = cookieStr.trim().split('=')
+          if (!name) {
+            return
+          }
+          let parsedName = name
+          let parsedValue = value || ''
+          try {
+            parsedName = decodeURIComponent(name)
+            parsedValue = decodeURIComponent(value || '')
+          } catch (error) {}
+          if (parsedName === key) {
+            cookieValue = parsedValue
+          }
+        })
+        return cookieValue
+      }
+      // #endif
+
+      return uni.getStorageSync(key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.storageList {
+  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;
+  }
+}
+
+.storageRow {
+  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;
+  gap: 14rpx;
+}
+
+.viewerTitle {
+  flex: 1;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  color: #0f172a;
+  font-weight: 500;
+}
+
+.viewerClose {
+  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;
+  gap: 8rpx;
+}
+
+.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;
+
+  &.danger {
+    background: #fef2f2;
+    border-color: rgba(220, 38, 38, 0.25);
+  }
+}
+
+.viewerBtnText {
+  font-size: 22rpx;
+  color: #334155;
+}
+</style>