@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/echarts/basic.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" @click="handleClick" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: 'ECharts 基础示例',
+  },
+  tooltip: {},
+  xAxis: {
+    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+})
+
+const handleClick = (params: any) => {
+  console.log('点击了图表', params)
+}
+</script>

package/docs/examples/echarts/dynamic.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <j-button label="更新数据" style="margin-bottom: 16px" @click="updateData" />
+    <div style="width: 100%; height: 400px">
+      <j-echarts :option="option" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '动态数据更新',
+  },
+  tooltip: {},
+  xAxis: {
+    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+  },
+  yAxis: {},
+  series: [
+    {
+      name: '销量',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20],
+    },
+  ],
+})
+
+const updateData = () => {
+  option.value = {
+    ...option.value,
+    series: [
+      {
+        name: '销量',
+        type: 'bar',
+        data: option.value.series[0].data.map(() => Math.floor(Math.random() * 100)),
+      },
+    ],
+  }
+}
+</script>

package/docs/examples/echarts/line.vue

@@ -0,0 +1,46 @@
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '折线图示例',
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  legend: {
+    data: ['邮件营销', '联盟广告', '视频广告'],
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: '邮件营销',
+      type: 'line',
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      name: '联盟广告',
+      type: 'line',
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+    {
+      name: '视频广告',
+      type: 'line',
+      data: [150, 232, 201, 154, 190, 330, 410],
+    },
+  ],
+})
+</script>

package/docs/examples/echarts/pie.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="width: 100%; height: 400px">
+    <j-echarts :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const option = ref({
+  title: {
+    text: '饼图示例',
+    left: 'center',
+  },
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+  },
+  series: [
+    {
+      name: '访问来源',
+      type: 'pie',
+      radius: '50%',
+      data: [
+        { value: 1048, name: '搜索引擎' },
+        { value: 735, name: '直接访问' },
+        { value: 580, name: '邮件营销' },
+        { value: 484, name: '联盟广告' },
+        { value: 300, name: '视频广告' },
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    },
+  ],
+})
+</script>

package/docs/examples/editor/basic.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <j-editor v-model:value="content" height="300" placeholder="请输入内容..." />
+    <div style="margin-top: 20px;">
+      <h3>Content:</h3>
+      <div>{{ content }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const content = ref('<p>Hello <b>SimCode UI</b>!</p>')
+</script>

package/docs/examples/form/basic.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+    <div style="margin-top: 16px; padding-left: 100px">
+      <j-button type="primary" label="提交" @click="handleSubmit"></j-button>
+      <j-button style="margin-left: 8px" label="重置" @click="handleReset"></j-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const formRef = ref()
+
+const formConfig = reactive({
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+})
+
+const schema = [
+  {
+    type: 'j-input',
+    config: {
+      label: '用户名',
+      field: 'username',
+      placeholder: '请输入用户名',
+      rule: [{ required: true, message: '请输入用户名' }],
+    },
+  },
+  {
+    type: 'j-input',
+    config: {
+      label: '邮箱',
+      field: 'email',
+      placeholder: '请输入邮箱',
+      rule: [
+        { required: true, message: '请输入邮箱' },
+        { type: 'email', message: '请输入正确的邮箱格式' },
+      ],
+    },
+  },
+  {
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      field: 'age',
+      placeholder: '请输入年龄',
+      min: 0,
+      max: 150,
+    },
+  },
+  {
+    type: 'j-select',
+    config: {
+      label: '选择器',
+      field: 'select',
+      placeholder: '请选择',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+  },
+  {
+    type: 'j-radio',
+    config: {
+      label: '单选框',
+      field: 'radio',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+  },
+  {
+    type: 'j-checkbox',
+    config: {
+      label: '多选框',
+      field: 'checkbox',
+      options: [
+        { label: '选项1', value: '1' },
+        { label: '选项2', value: '2' },
+      ],
+    },
+  },
+  {
+    type: 'j-switch',
+    config: {
+      label: '开关',
+      field: 'switch',
+    },
+  },
+  {
+    type: 'j-slider',
+    config: {
+      label: '滑块',
+      field: 'slider',
+    },
+  },
+  {
+    type: 'j-rate',
+    config: {
+      label: '评分',
+      field: 'rate',
+    },
+  },
+  {
+    type: 'j-cascader-select',
+    config: {
+      label: '级联选择',
+      field: 'cascader',
+      options: [
+        {
+          label: '指南',
+          value: 'guide',
+          children: [
+            { label: '设计原则', value: 'design' },
+            { label: '导航', value: 'navigation' },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    type: 'j-input-tag',
+    config: {
+      label: '标签输入',
+      field: 'tags',
+      placeholder: '请输入标签',
+    },
+  },
+  {
+    type: 'j-input-color',
+    config: {
+      label: '颜色选择',
+      field: 'color',
+      placeholder: '请选择颜色',
+    },
+  },
+  {
+    type: 'j-autocomplete',
+    config: {
+      label: '自动补全',
+      field: 'autocomplete',
+      placeholder: '请输入内容',
+      options: [
+        { value: 'Vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'React', link: 'https://github.com/facebook/react' },
+      ],
+    },
+  },
+  {
+    type: 'j-upload',
+    config: {
+      label: '上传',
+      field: 'upload',
+      placeholder: '点击上传',
+      isNotApi: true,
+    },
+  },
+  {
+    type: 'j-code-mirror',
+    config: {
+      label: '代码编辑',
+      field: 'code',
+      height: 200,
+      style: { 'margin-bottom': '18px' },
+    },
+  },
+  {
+    type: 'j-tabs',
+    config: {
+      field: 'f_Type',
+    },
+    children: [
+      {
+        config: {
+          label: '常规',
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '主机',
+              field: 'f_Server',
+            },
+          },
+        ],
+      },
+      {
+        config: {
+          label: '高级',
+        },
+        children: [
+          {
+            type: 'j-input',
+            config: {
+              label: '连接串',
+              field: 'f_DbConnection',
+            },
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const handleSubmit = async () => {
+  const valid = await formRef.value.validate()
+  if (valid) {
+    const formData = formRef.value.getFormData()
+    console.log('表单数据:', formData)
+    alert('提交成功！')
+  }
+}
+
+const handleReset = () => {
+  formRef.value.reset()
+}
+</script>

package/docs/examples/guid/basic.vue

@@ -0,0 +1,10 @@
+<template>
+  <j-guid v-model="value" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">生成的 UUID: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/guid/size.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-guid v-model="value" size="large" style="width: 300px" />
+    <j-guid v-model="value" style="width: 300px" />
+    <j-guid v-model="value" size="small" style="width: 300px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/hpanel/basic.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="hpanel-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left Slot</div>
+        </template>
+        <div class="main-content">Default Slot (Main Content)</div>
+        <template #right>
+          <div class="side-content">Right Slot</div>
+        </template>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅左侧和内容</p>
+      <j-hpanel class="custom-panel">
+        <template #left>
+          <div class="side-content">Left</div>
+        </template>
+        <div class="main-content">Main Content</div>
+      </j-hpanel>
+    </div>
+
+    <div class="demo-item">
+      <p>仅内容和右侧</p>
+      <j-hpanel class="custom-panel">
+        <div class="main-content">Main Content</div>
+        <template #right>
+          <div class="side-content">Right</div>
+        </template>
+      </j-hpanel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.hpanel-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;
+}
+
+.custom-panel {
+  border: 1px solid var(--j-color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.side-content {
+  background-color: var(--j-color-fill-2);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+}
+
+.main-content {
+  background-color: var(--j-color-bg-2);
+  padding: 12px 20px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/docs/examples/icon/basic.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" />
+    <j-icon icon="mdi:account" color="#409eff" />
+    <j-icon icon="mdi:check-circle" color="#67c23a" />
+    <j-icon icon="mdi:alert-circle" color="#f56c6c" />
+    <j-icon icon="mdi:information" color="#909399" />
+  </div>
+</template>

package/docs/examples/icon/rotate-flip.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="display: flex; gap: 20px; align-items: center; font-size: 24px">
+    <j-icon icon="mdi:send" :rotate="45" />
+    <j-icon icon="mdi:send" :rotate="90" />
+    <j-icon icon="mdi:send" :rotate="180" />
+    <j-icon icon="mdi:send" flip="horizontal" />
+    <j-icon icon="mdi:send" flip="vertical" />
+  </div>
+</template>

package/docs/examples/icon/size.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="display: flex; gap: 20px; align-items: center">
+    <j-icon icon="mdi:home" :size="16" />
+    <j-icon icon="mdi:home" :size="24" />
+    <j-icon icon="mdi:home" :size="32" />
+  </div>
+</template>

package/docs/examples/input/basic.vue

@@ -0,0 +1,10 @@
+<template>
+  <j-input v-model="value" placeholder="请输入内容" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">输入的内容: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/input/clearable.vue

@@ -0,0 +1,12 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input v-model="value1" clearable placeholder="可清除的输入框" style="width: 300px" />
+    <p v-if="value1" style="color: #606266">输入的内容: {{ value1 }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+</script>

package/docs/examples/input/disabled.vue

@@ -0,0 +1,6 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input disabled placeholder="禁用状态" style="width: 300px" />
+    <j-input readonly model-value="只读内容" style="width: 300px" />
+  </div>
+</template>

package/docs/examples/input/icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      prefix-icon="mdi:search"
+      placeholder="带前缀图标的输入框"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      suffix-icon="mdi:calendar"
+      placeholder="带后缀图标的输入框"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>

package/docs/examples/input/password.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+      style="width: 300px"
+    />
+    <p v-if="password" style="color: #606266">密码: {{ password }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const password = ref('')
+</script>

package/docs/examples/input/size.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input v-model="value" size="large" placeholder="大型输入框" style="width: 300px" />
+    <j-input v-model="value" placeholder="默认输入框" style="width: 300px" />
+    <j-input v-model="value" size="small" placeholder="小型输入框" style="width: 300px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>

package/docs/examples/input/textarea.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      type="textarea"
+      :rows="4"
+      placeholder="固定行数的文本域"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      type="textarea"
+      :autosize="{ minRows: 2, maxRows: 6 }"
+      placeholder="自适应高度的文本域"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>

package/docs/examples/input/word-limit.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <j-input
+      v-model="value1"
+      type="text"
+      :maxlength="10"
+      show-word-limit
+      placeholder="最多输入10个字符"
+      style="width: 300px"
+    />
+    <j-input
+      v-model="value2"
+      type="textarea"
+      :maxlength="20"
+      show-word-limit
+      word-limit-position="outside"
+      placeholder="字数统计在外部"
+      style="width: 300px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+</script>