@a2simcode/ui 0.0.46 → 0.0.47

package/docs/examples/collapse/basic.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="collapse-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-collapse v-model="activeNames1">
+        <el-collapse-item title="一致性 Consistency" name="1">
+          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+          <div>
+            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="反馈 Feedback" name="2">
+          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+        </el-collapse-item>
+        <el-collapse-item title="效率 Efficiency" name="3">
+          <div>简化流程：设计简洁直观的操作流程；</div>
+          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+        </el-collapse-item>
+        <el-collapse-item title="可控 Controllability" name="4">
+          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+        </el-collapse-item>
+      </j-collapse>
+    </div>
+
+    <div class="demo-item">
+      <p>手风琴效果</p>
+      <j-collapse v-model="activeName2" accordion>
+        <el-collapse-item title="一致性 Consistency" name="1">
+          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+          <div>
+            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="反馈 Feedback" name="2">
+          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+        </el-collapse-item>
+        <el-collapse-item title="效率 Efficiency" name="3">
+          <div>简化流程：设计简洁直观的操作流程；</div>
+          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+        </el-collapse-item>
+        <el-collapse-item title="可控 Controllability" name="4">
+          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+        </el-collapse-item>
+      </j-collapse>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames1 = ref(['1'])
+const activeName2 = ref('1')
+</script>
+
+<style scoped>
+.collapse-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.demo-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/docs/examples/comp/basic.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <j-comp type="j-button" :config="{ type: 'primary', label: '我是通过 JComp 渲染的按钮' }" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/comp/collapse.vue

@@ -0,0 +1,38 @@
+<template>
+  <j-comp
+    type="j-collapse"
+    :children="[
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/comp/tabs.vue

@@ -0,0 +1,38 @@
+<template>
+  <j-comp
+    type="j-tabs"
+    :children="[
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/count/basic.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="count-demo">
+    <div class="demo-item">
+      <p>基础计算 (1000 + 200):</p>
+      <j-count :format-json="formJSON" />
+    </div>
+
+    <div class="demo-item">
+      <p>千分位展示:</p>
+      <j-count :format-json="formJSON" thousand-separator />
+    </div>
+
+    <div class="demo-item">
+      <p>人民币大写:</p>
+      <j-count :format-json="formJSON" is-chinese />
+    </div>
+
+    <div class="demo-item">
+      <p>保留两位小数:</p>
+      <j-count :format-json="formJSON" :decimal="2" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+
+// 模拟表单提供者，因为 Count 组件内部依赖注入
+provide('jd_form_provide', {
+  getValue: (id: string) => {
+    const mockData: Record<string, number> = {
+      price: 1250.5,
+      quantity: 3,
+    }
+    return mockData[id] || 0
+  },
+})
+
+const formJSON =
+  '[{"value":1,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":"+","type":"num"},{"value":2,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"}]'
+</script>
+
+<style scoped>
+.count-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+}
+</style>

package/docs/examples/count-up/basic.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="count-up-demo">
+    <div class="demo-item">
+      <p>基础用法（0-1000）:</p>
+      <j-count-up :end-value="1000" />
+    </div>
+
+    <div class="demo-item">
+      <p>自定义起始值和小数位:</p>
+      <j-count-up :start-value="0" :end-value="99.99" :decimals="2" />
+    </div>
+
+    <div class="demo-item">
+      <p>自定义动画时间:</p>
+      <j-count-up :end-value="5000" :duration="5" />
+    </div>
+
+    <div class="demo-item">
+      <p>禁用动画（直接显示值）:</p>
+      <j-count-up :end-value="2024" :animation="false" />
+    </div>
+
+    <div class="demo-item">
+      <p>带回调的动画:</p>
+      <j-count-up :end-value="100" :callback="handleAnimationEnd" />
+      <p v-if="callbackMessage" style="color: var(--j-color-success); margin-top: 8px">
+        {{ callbackMessage }}
+      </p>
+    </div>
+
+    <div class="demo-item">
+      <p>动态更新值:</p>
+      <div style="display: flex; gap: 10px; align-items: center">
+        <j-count-up ref="countUpRef" :end-value="currentValue" :duration="1" />
+        <button @click="updateValue(500)">更新到500</button>
+        <button @click="updateValue(1500)">更新到1500</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const countUpRef = ref()
+const currentValue = ref(0)
+const callbackMessage = ref('')
+
+const handleAnimationEnd = (countUp: any) => {
+  callbackMessage.value = `动画完成！最终值为: ${countUp.endVal}`
+  setTimeout(() => {
+    callbackMessage.value = ''
+  }, 3000)
+}
+
+const updateValue = (newValue: number) => {
+  currentValue.value = newValue
+}
+</script>
+
+<style scoped>
+.count-up-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+}
+
+button {
+  padding: 6px 12px;
+  border: 1px solid var(--j-color-border);
+  border-radius: 4px;
+  background-color: var(--j-color-bg-primary);
+  color: var(--j-color-text-1);
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 12px;
+}
+
+button:hover {
+  border-color: var(--j-color-primary);
+  color: var(--j-color-primary);
+}
+</style>

package/docs/examples/data-panel/basic.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="data-panel-demo">
+    <div class="demo-item">
+      <p>基础用法 - 带标题的面板:</p>
+      <j-data-panel title="数据面板">
+        <div style="padding: 16px">
+          <p>这是一个数据展示面板</p>
+          <p>可以在其中放置任何内容</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>无标题面板:</p>
+      <j-data-panel>
+        <div style="padding: 16px">
+          <p>没有标题的面板</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>带标题右侧内容:</p>
+      <j-data-panel title="用户数据">
+        <template #titleRight>
+          <j-button icon="mdi:refresh"></j-button>
+        </template>
+        <div style="padding: 16px">
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                用户总数
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-primary)">
+                1,234
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                活跃用户
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-success)">
+                856
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                待审核
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-warning)">
+                45
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                异常
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-danger)">12</div>
+            </div>
+          </div>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>多个面板并排显示:</p>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+        <j-data-panel title="收入统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-primary)">
+              ¥ 128,500
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月收入
+            </div>
+          </div>
+        </j-data-panel>
+        <j-data-panel title="支出统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-danger)">
+              ¥ 32,100
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月支出
+            </div>
+          </div>
+        </j-data-panel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.data-panel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+</style>

package/docs/examples/dialog/basic.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="基础弹窗"
+      :width="600"
+      :height="400"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是一个基础的弹窗示例。</p>
+        <p>弹窗支持拖拽、缩放等功能。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+</script>

package/docs/examples/dialog/custom-buttons.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="自定义按钮弹窗"
+      :width="600"
+      :height="400"
+      :has-save-btn="false"
+      :buttons="buttons"
+    >
+      <div style="padding: 16px">
+        <p>这个弹窗使用了自定义按钮配置。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+
+const buttons = [
+  {
+    prop: 'confirm',
+    label: '确认',
+    type: 'primary',
+    click: () => {
+      ElMessage.success('点击了确认按钮')
+      visible.value = false
+    },
+  },
+  {
+    prop: 'delete',
+    label: '删除',
+    danger: true,
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+]
+</script>

package/docs/examples/dialog/fullscreen.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <j-button label="可全屏弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="全屏弹窗"
+      :show-full-screen-btn="true"
+      :width="600"
+      :height="400"
+    >
+      <div style="padding: 16px">
+        <p>点击右上角的全屏按钮可以切换全屏显示。</p>
+        <p>全屏状态下可以再次点击退出全屏。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog/no-mask.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-button label="无遮罩弹窗" @click="visible = true" />
+    <j-dialog v-model:visible="visible" title="无遮罩弹窗" :width="500" :height="350" :mask="false">
+      <div style="padding: 16px">
+        <p>这个弹窗没有遮罩层。</p>
+        <p>你可以与页面其他内容进行交互。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog/size.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="display: flex; gap: 8px">
+    <j-button label="小弹窗" @click="showDialog('small')" />
+    <j-button label="中等弹窗" @click="showDialog('medium')" />
+    <j-button label="大弹窗" @click="showDialog('large')" />
+    <j-dialog v-model:visible="visible" :title="title" :width="width" :height="height">
+      <div style="padding: 16px">
+        <p>当前弹窗尺寸：{{ title }}</p>
+        <p>宽度：{{ width }}px</p>
+        <p>高度：{{ height }}px</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const title = ref('')
+const width = ref(600)
+const height = ref(400)
+
+const showDialog = (size: string) => {
+  switch (size) {
+    case 'small':
+      title.value = '小弹窗'
+      width.value = 400
+      height.value = 300
+      break
+    case 'medium':
+      title.value = '中等弹窗'
+      width.value = 600
+      height.value = 400
+      break
+    case 'large':
+      title.value = '大弹窗'
+      width.value = 900
+      height.value = 600
+      break
+  }
+  visible.value = true
+}
+</script>

package/docs/examples/dialog/steps.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <j-button label="步骤弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      v-model:step-active="stepActive"
+      title="分步骤表单"
+      :width="700"
+      :height="450"
+      :is-step="true"
+      :steps="steps"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+    >
+      <div style="padding: 16px">
+        <div v-if="stepActive === 0">
+          <h3>步骤一：基本信息</h3>
+          <p>请填写基本信息...</p>
+        </div>
+        <div v-if="stepActive === 1">
+          <h3>步骤二：详细配置</h3>
+          <p>请完成详细配置...</p>
+        </div>
+        <div v-if="stepActive === 2">
+          <h3>步骤三：确认提交</h3>
+          <p>请确认信息后提交...</p>
+        </div>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+const stepActive = ref(0)
+const steps = ['基本信息', '详细配置', '确认提交']
+
+const validateSteps = async (step: number) => {
+  // 模拟校验
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  ElMessage.success(`步骤 ${step + 1} 校验通过`)
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    ElMessage.success('提交成功')
+    visible.value = false
+    stepActive.value = 0
+  }, 1000)
+}
+</script>

package/docs/examples/dialog-full/basic.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <j-button label="打开全屏弹窗" @click="visible = true" />
+    <j-dialog-full v-model:visible="visible" title="全屏弹窗" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 24px">
+        <p>这是一个全屏弹窗示例。</p>
+        <p>全屏弹窗占据整个屏幕,适用于复杂的表单或大量内容展示。</p>
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+</script>