@a2simcode/ui 0.0.46 → 0.0.48

package/docs/examples/utils/cipher.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="utils-demo">
+    <h3>加密工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. AES加密/解密</h4>
+      <div class="demo-content">
+        <j-input v-model="plainText" placeholder="输入明文" style="width: 300px" />
+        <j-input v-model="aesKey" placeholder="输入密钥" style="width: 300px; margin-top: 10px" />
+        <div style="margin-top: 10px">
+          <j-button label="AES加密" type="primary" @click="doAesEncrypt" />
+          <j-button label="AES解密" @click="doAesDecrypt" />
+        </div>
+        <p>加密结果: {{ encryptedText }}</p>
+        <p>解密结果: {{ decryptedText }}</p>
+        <p style="color: #67c23a">💡 AES加密适用于敏感数据传输</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. Base64编码/解码</h4>
+      <div class="demo-content">
+        <j-input v-model="base64Text" placeholder="输入文本" style="width: 300px" />
+        <div style="margin-top: 10px">
+          <j-button label="Base64编码" type="primary" @click="doBase64Encode" />
+          <j-button label="Base64解码" @click="doBase64Decode" />
+        </div>
+        <p>编码结果: {{ base64Encoded }}</p>
+        <p>解码结果: {{ base64Decoded }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>3. MD5哈希</h4>
+      <div class="demo-content">
+        <j-input v-model="md5Text" placeholder="输入文本" style="width: 300px" />
+        <j-button label="生成MD5" style="margin-top: 10px" type="primary" @click="doMd5Hash" />
+        <p>MD5: {{ md5Hash }}</p>
+        <p style="color: #67c23a">💡 常用于密码加密存储</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>4. SHA256哈希</h4>
+      <div class="demo-content">
+        <j-input v-model="sha256Text" placeholder="输入文本" style="width: 300px" />
+        <j-button
+          label="生成SHA256"
+          type="primary"
+          style="margin-top: 10px"
+          @click="doSha256Hash"
+        />
+        <p>SHA256: {{ sha256Hash }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>5. SHA512哈希</h4>
+      <div class="demo-content">
+        <j-input v-model="sha512Text" placeholder="输入文本" style="width: 300px" />
+        <j-button
+          label="生成SHA512"
+          type="primary"
+          style="margin-top: 10px"
+          @click="doSha512Hash"
+        />
+        <p style="word-break: break-all">SHA512: {{ sha512Hash }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { EncryptionFactory, HashingFactory } from '@/core'
+
+// AES加密
+const plainText = ref('Hello World')
+const aesKey = ref('my-secret-key-123')
+const encryptedText = ref('')
+const decryptedText = ref('')
+
+const doAesEncrypt = () => {
+  const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
+  encryptedText.value = aes.encrypt(plainText.value)
+}
+
+const doAesDecrypt = () => {
+  if (encryptedText.value) {
+    const aes = EncryptionFactory.createAesEncryption({ key: aesKey.value })
+    decryptedText.value = aes.decrypt(encryptedText.value)
+  }
+}
+
+// Base64编码
+const base64Text = ref('Hello World')
+const base64Encoded = ref('')
+const base64Decoded = ref('')
+
+const doBase64Encode = () => {
+  const base64 = EncryptionFactory.createBase64Encryption()
+  base64Encoded.value = base64.encrypt(base64Text.value)
+}
+
+const doBase64Decode = () => {
+  if (base64Encoded.value) {
+    const base64 = EncryptionFactory.createBase64Encryption()
+    base64Decoded.value = base64.decrypt(base64Encoded.value)
+  }
+}
+
+// MD5哈希
+const md5Text = ref('password123')
+const md5Hash = ref('')
+
+const doMd5Hash = () => {
+  const md5 = HashingFactory.createMD5Hashing()
+  md5Hash.value = md5.hash(md5Text.value)
+}
+
+// SHA256哈希
+const sha256Text = ref('Hello World')
+const sha256Hash = ref('')
+
+const doSha256Hash = () => {
+  const sha256 = HashingFactory.createSHA256Hashing()
+  sha256Hash.value = sha256.hash(sha256Text.value)
+}
+
+// SHA512哈希
+const sha512Text = ref('Hello World')
+const sha512Hash = ref('')
+
+const doSha512Hash = () => {
+  const sha512 = HashingFactory.createSHA512Hashing()
+  sha512Hash.value = sha512.hash(sha512Text.value)
+}
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/common.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="utils-demo">
+    <h3>通用工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. deepClone - 深拷贝对象</h4>
+      <div class="demo-content">
+        <p>原始对象: {{ JSON.stringify(originalObj) }}</p>
+        <p>深拷贝后: {{ JSON.stringify(clonedObj) }}</p>
+        <j-button label="修改拷贝对象" @click="modifyCloned" />
+        <p style="color: #67c23a">💡 修改拷贝对象不会影响原始对象</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. buildUUID - 生成UUID</h4>
+      <div class="demo-content">
+        <p>UUID: {{ uuid }}</p>
+        <j-button label="生成新UUID" @click="generateUUID" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>3. buildShortUUID - 生成短UUID</h4>
+      <div class="demo-content">
+        <p>短UUID: {{ shortUUID }}</p>
+        <j-button label="生成新短UUID" @click="generateShortUUID" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>4. set - 通过路径设置对象属性</h4>
+      <div class="demo-content">
+        <p>对象: {{ JSON.stringify(pathObj) }}</p>
+        <j-button label="设置 user.profile.name = 'Alice'" @click="setByPath" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>5. pagination - 数组分页</h4>
+      <div class="demo-content">
+        <p>数据总数: {{ dataList.length }}</p>
+        <p>当前页: {{ currentPage }}, 每页: {{ pageSize }}</p>
+        <p>当前页数据: {{ JSON.stringify(currentPageData) }}</p>
+        <j-button label="下一页" @click="nextPage" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>6. numberToChinese - 数字转中文</h4>
+      <div class="demo-content">
+        <j-input v-model="numberInput" placeholder="输入数字" style="width: 200px" />
+        <p>中文: {{ chineseNumber }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>7. numberToThousandSeparator - 千分位分隔符</h4>
+      <div class="demo-content">
+        <j-input v-model="thousandInput" placeholder="输入数字" style="width: 200px" />
+        <p>格式化: {{ formattedNumber }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import {
+  deepClone,
+  buildUUID,
+  buildShortUUID,
+  set,
+  pagination,
+  numberToChinese,
+  numberToThousandSeparator,
+} from '@/core'
+
+// 深拷贝示例
+const originalObj = ref({ name: '张三', age: 25, hobbies: ['读书', '运动'] })
+const clonedObj = ref(deepClone(originalObj.value))
+
+const modifyCloned = () => {
+  clonedObj.value.name = '李四'
+  clonedObj.value.hobbies.push('音乐')
+}
+
+// UUID示例
+const uuid = ref(buildUUID())
+const generateUUID = () => {
+  uuid.value = buildUUID()
+}
+
+// 短UUID示例
+const shortUUID = ref(buildShortUUID('prefix'))
+const generateShortUUID = () => {
+  shortUUID.value = buildShortUUID('prefix')
+}
+
+// 路径设置示例
+const pathObj = ref({ user: {} })
+const setByPath = () => {
+  set(pathObj.value, 'user.profile.name', 'Alice')
+  set(pathObj.value, 'user.age', 30)
+}
+
+// 分页示例
+const dataList = ref(Array.from({ length: 50 }, (_, i) => `项目${i + 1}`))
+const currentPage = ref(1)
+const pageSize = ref(5)
+const currentPageData = computed(() => {
+  return pagination(currentPage.value, pageSize.value, dataList.value)
+})
+const nextPage = () => {
+  if (currentPage.value * pageSize.value < dataList.value.length) {
+    currentPage.value++
+  }
+}
+
+// 数字转中文示例
+const numberInput = ref('12345.67')
+const chineseNumber = computed(() => {
+  return numberToChinese(numberInput.value)
+})
+
+// 千分位分隔符示例
+const thousandInput = ref('1234567.89')
+const formattedNumber = computed(() => {
+  return numberToThousandSeparator(thousandInput.value)
+})
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/date.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="utils-demo">
+    <h3>日期工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. formatToDateTime - 格式化为日期时间</h4>
+      <div class="demo-content">
+        <p>当前时间: {{ formatToDateTime(currentDate) }}</p>
+        <p>自定义格式: {{ formatToDateTime(currentDate, 'YYYY年MM月DD日 HH:mm:ss') }}</p>
+        <j-button label="更新时间" @click="updateTime" />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. formatToDate - 格式化为日期</h4>
+      <div class="demo-content">
+        <p>当前日期: {{ formatToDate(currentDate) }}</p>
+        <p>自定义格式: {{ formatToDate(currentDate, 'YYYY/MM/DD') }}</p>
+        <p style="color: #67c23a">💡 常用于日期选择器的值格式化</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { formatToDateTime, formatToDate } from '@/core'
+
+const currentDate = ref(new Date())
+
+const updateTime = () => {
+  currentDate.value = new Date()
+}
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/dom.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="utils-demo">
+    <h3>DOM工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>fullScreenLoading - 全屏加载</h4>
+      <div class="demo-content">
+        <j-button label="显示全屏加载" type="primary" @click="showLoading" />
+        <j-button label="隐藏全屏加载" @click="hideLoading" />
+        <p style="color: #67c23a">💡 点击按钮查看全屏加载效果,3秒后自动关闭</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { fullScreenLoading } from '@/core'
+
+const showLoading = () => {
+  fullScreenLoading(true)
+  // 3秒后自动关闭
+  setTimeout(() => {
+    fullScreenLoading(false)
+  }, 3000)
+}
+
+const hideLoading = () => {
+  fullScreenLoading(false)
+}
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>

package/docs/examples/utils/is.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="utils-demo">
+    <h3>类型判断工具方法示例</h3>
+
+    <div class="demo-section">
+      <h4>1. isArray - 判断是否为数组</h4>
+      <div class="demo-content">
+        <p>测试值: {{ JSON.stringify(testArray) }}</p>
+        <p>是否为数组: {{ isArray(testArray) ? '是' : '否' }}</p>
+        <p>测试值: {{ testString }}</p>
+        <p>是否为数组: {{ isArray(testString) ? '是' : '否' }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>2. isObject - 判断是否为对象</h4>
+      <div class="demo-content">
+        <p>测试值: {{ JSON.stringify(testObj) }}</p>
+        <p>是否为对象: {{ isObject(testObj) ? '是' : '否' }}</p>
+        <p>测试值: {{ testNull }}</p>
+        <p>是否为对象: {{ isObject(testNull) ? '是' : '否' }}</p>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h4>3. isNullOrEmpty - 判断是否为空</h4>
+      <div class="demo-content">
+        <p>null: {{ isNullOrEmpty(null) ? '是空' : '不是空' }}</p>
+        <p>undefined: {{ isNullOrEmpty(undefined) ? '是空' : '不是空' }}</p>
+        <p>'': {{ isNullOrEmpty('') ? '是空' : '不是空' }}</p>
+        <p>[]: {{ isNullOrEmpty([]) ? '是空' : '不是空' }}</p>
+        <p>{}: {{ isNullOrEmpty({}) ? '是空' : '不是空' }}</p>
+        <p>'hello': {{ isNullOrEmpty('hello') ? '是空' : '不是空' }}</p>
+        <p style="color: #67c23a">💡 可用于表单验证,判断值是否有效</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { isArray, isObject, isNullOrEmpty } from '@/core'
+
+const testArray = ref([1, 2, 3])
+const testString = ref('hello')
+const testObj = ref({ name: '测试' })
+const testNull = ref(null)
+</script>
+
+<style scoped>
+.utils-demo {
+  padding: 20px;
+}
+.demo-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+.demo-section h4 {
+  margin-top: 0;
+  color: #409eff;
+}
+.demo-content {
+  margin-top: 10px;
+}
+.demo-content p {
+  margin: 8px 0;
+}
+</style>