@a2simcode/ui 0.0.306 → 0.0.307

package/docs/examples/utils/cipher.vue

@@ -1,160 +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>
+<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

@@ -1,153 +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>
+<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>