@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/buttons/size.vue

@@ -0,0 +1,45 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Large:</div>
+      <j-buttons :list="buttonList" size="large" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Default:</div>
+      <j-buttons :list="buttonList" size="default" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Small:</div>
+      <j-buttons :list="buttonList" size="small" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:add',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    config: {
+      icon: 'material-symbols-light:edit-outline',
+    },
+    click: () => {
+      ElMessage.info('点击了编辑按钮')
+    },
+  },
+])
+</script>

package/docs/examples/cascader-select/basic.vue

@@ -0,0 +1,28 @@
+<template>
+  <j-cascader-select v-model="value" :options="options" 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('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/clearable.vue

@@ -0,0 +1,34 @@
+<template>
+  <j-cascader-select
+    v-model="value"
+    :options="options"
+    placeholder="支持清除"
+    style="width: 300px"
+    clearable
+  />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/disabled.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <j-cascader-select
+      v-model="value1"
+      :options="options"
+      placeholder="禁用状态"
+      style="width: 300px; margin-right: 12px"
+      disabled
+    />
+    <j-cascader-select
+      v-model="value2"
+      :options="options"
+      placeholder="只读状态"
+      style="width: 300px"
+      readonly
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('department,tech')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/filterable.vue

@@ -0,0 +1,37 @@
+<template>
+  <j-cascader-select
+    v-model="value"
+    :options="options"
+    placeholder="支持搜索"
+    style="width: 300px"
+    filterable
+  />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+      { label: '深圳', value: 'shenzhen' },
+      { label: '广州', value: 'guangzhou' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+      { label: '运营部', value: 'operation' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/methods.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div style="margin-bottom: 20px">
+      <j-cascader-select
+        ref="cascaderRef"
+        v-model="value"
+        :options="options"
+        placeholder="请选择"
+        style="width: 300px"
+      />
+    </div>
+
+    <div style="margin-top: 20px">
+      <el-button @click="handleGetChecked">获取选中节点</el-button>
+      <el-button @click="handleClear">清空选中</el-button>
+    </div>
+
+    <div
+      v-if="checkedNodes.length > 0"
+      style="margin-top: 12px; padding: 12px; background: #f0f9ff; border-radius: 4px"
+    >
+      <p style="color: #606266; margin: 0 0 8px 0"><strong>当前选中节点：</strong></p>
+      <div
+        v-for="(node, index) in checkedNodes"
+        :key="index"
+        style="color: #606266; margin-bottom: 8px"
+      >
+        <div>{{ getNodeLabel(node) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const cascaderRef = ref()
+const value = ref('')
+const checkedNodes = ref([])
+
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+
+const getNodeLabel = (node: any) => {
+  // 提取节点的关键信息，避免循环引用
+  if (Array.isArray(node)) {
+    return node.map((n) => n?.label || n?.value || '未知').join(' / ')
+  }
+  return node?.label || node?.value || '未知'
+}
+
+const handleGetChecked = () => {
+  const nodes = cascaderRef.value?.getCheckedNodes(false) || []
+  // 将对象转换为可序列化的格式
+  checkedNodes.value = nodes.map((node: any) => {
+    if (Array.isArray(node)) {
+      return node.map((n) => ({ label: n?.label, value: n?.value }))
+    }
+    return { label: node?.label, value: node?.value }
+  })
+}
+
+const handleClear = () => {
+  cascaderRef.value?.clearCheckedNodes()
+  checkedNodes.value = []
+  value.value = ''
+}
+</script>

package/docs/examples/cascader-select/multiple.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <j-cascader-select
+      v-model="value"
+      :options="options"
+      placeholder="请选择（支持多选）"
+      :multiple="true"
+      style="width: 300px"
+    />
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+      { label: '广州', value: 'guangzhou' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+      { label: '人事部', value: 'hr' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/slot.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <j-cascader-select
+      v-model="value"
+      :options="options"
+      placeholder="请选择（自定义内容）"
+      style="width: 300px"
+    >
+      <!-- 自定义节点内容 -->
+      <template #default="{ data }">
+        <span>{{ data.label }} <el-tag style="margin-left: 8px">自定义</el-tag></span>
+      </template>
+
+      <!-- 自定义空状态 -->
+      <template #empty>
+        <div style="padding: 10px; text-align: center; color: #909399">暂无可选项</div>
+      </template>
+    </j-cascader-select>
+    <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/checkbox/basic.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <j-checkbox v-model="checkedValue" :options="options" />
+    <p>Selected: {{ checkedValue }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+]
+</script>

package/docs/examples/checkbox/button.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <p>按钮样式</p>
+    <j-checkbox v-model="checkedValue" :options="options" type="button" />
+    <p>Selected: {{ checkedValue }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: '选项 1', value: 'option1' },
+  { label: '选项 2', value: 'option2' },
+  { label: '选项 3', value: 'option3' },
+]
+</script>

package/docs/examples/checkbox/color.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>自定义颜色（按钮样式）</p>
+    <j-checkbox
+      v-model="checkedValue"
+      :options="options"
+      type="button"
+      text-color="#fff"
+      fill="#ff7875"
+    />
+    <p>Selected: {{ checkedValue }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: '选项 1', value: 'option1' },
+  { label: '选项 2', value: 'option2' },
+  { label: '选项 3', value: 'option3' },
+]
+</script>

package/docs/examples/checkbox/disabled.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-checkbox v-model="checkedValue" :options="options" disabled />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2', disabled: true },
+  { label: 'Option 3', value: 'option3' },
+]
+</script>

package/docs/examples/checkbox/min-max.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>最少选择1个，最多选择2个</p>
+    <j-checkbox v-model="checkedValue" :options="options" :min="1" :max="2" />
+    <p>Selected: {{ checkedValue }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: '选项 1', value: 'option1' },
+  { label: '选项 2', value: 'option2' },
+  { label: '选项 3', value: 'option3' },
+  { label: '选项 4', value: 'option4' },
+]
+</script>

package/docs/examples/checkbox/mixed.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div>
+      <h4>组合示例 1: 按钮样式 + 自定义颜色 + 尺寸</h4>
+      <j-checkbox
+        v-model="value1"
+        :options="options1"
+        type="button"
+        size="large"
+        text-color="#fff"
+        fill="#722ed1"
+      />
+      <p>Selected: {{ value1 }}</p>
+    </div>
+
+    <div style="margin-top: 20px">
+      <h4>组合示例 2: 最小/最大选择 + 大尺寸</h4>
+      <j-checkbox v-model="value2" :options="options2" :min="1" :max="3" size="large" />
+      <p>Selected: {{ value2 }}</p>
+    </div>
+
+    <div style="margin-top: 20px">
+      <h4>组合示例 3: 部分禁用 + 只读</h4>
+      <j-checkbox v-model="value3" :options="options3" readonly />
+      <p>Selected: {{ value3 }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(['option1', 'option2'])
+const value2 = ref(['option1'])
+const value3 = ref(['option1', 'option3'])
+
+const options1 = [
+  { label: 'Python', value: 'option1' },
+  { label: 'JavaScript', value: 'option2' },
+  { label: 'TypeScript', value: 'option3' },
+]
+
+const options2 = [
+  { label: '春天', value: 'option1' },
+  { label: '夏天', value: 'option2' },
+  { label: '秋天', value: 'option3' },
+  { label: '冬天', value: 'option4' },
+]
+
+const options3 = [
+  { label: '选项 1', value: 'option1' },
+  { label: '选项 2', value: 'option2', disabled: true },
+  { label: '选项 3', value: 'option3' },
+  { label: '选项 4', value: 'option4', disabled: true },
+]
+</script>

package/docs/examples/checkbox/size.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div>
+      <p>Large Size:</p>
+      <j-checkbox v-model="checkedValue" :options="options" size="large" />
+    </div>
+    <div>
+      <p>Default Size:</p>
+      <j-checkbox v-model="checkedValue" :options="options" size="default" />
+    </div>
+    <div>
+      <p>Small Size:</p>
+      <j-checkbox v-model="checkedValue" :options="options" size="small" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const checkedValue = ref(['option1'])
+
+const options = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+]
+</script>

package/docs/examples/code-mirror/basic.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <j-code-mirror :value="code" :height="300" mode="text/x-sql" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref('SELECT * FROM users WHERE id = 1;')
+</script>

package/docs/examples/code-mirror/events.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="demo-container">
+    <el-space direction="vertical" :fill="true" style="width: 100%">
+      <div>
+        <el-button type="primary" @click="handleChange">更新代码</el-button>
+        <el-button @click="handleClear">清空</el-button>
+      </div>
+      <j-code-mirror :value="code" :height="250" mode="text/x-sql" @change="handleCodeChange" />
+      <div style="color: #666; font-size: 14px">
+        <div>代码长度: {{ codeLength }} 字符</div>
+        <div>最后修改时间: {{ lastModified }}</div>
+      </div>
+    </el-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const code = ref('SELECT * FROM users WHERE id = 1;')
+const lastModified = ref(new Date().toLocaleTimeString())
+
+const codeLength = computed(() => code.value.length)
+
+const handleCodeChange = (data: { value: string }) => {
+  lastModified.value = new Date().toLocaleTimeString()
+  console.log('代码已更改:', data.value)
+}
+
+const handleChange = () => {
+  code.value = `SELECT u.name, o.total
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE o.created_at > '2024-01-01'
+ORDER BY o.total DESC
+LIMIT 10;`
+}
+
+const handleClear = () => {
+  code.value = ''
+}
+</script>

package/docs/examples/code-mirror/height.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="demo-container">
+    <el-space direction="vertical" :fill="true" style="width: 100%">
+      <div>
+        <span style="margin-right: 10px">自定义高度：</span>
+        <el-slider v-model="height" :min="150" :max="500" style="width: 300px" />
+        <span style="margin-left: 10px">{{ height }}px</span>
+      </div>
+      <j-code-mirror :value="code" :height="height" mode="application/javascript" />
+    </el-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const height = ref(300)
+const code = ref(`// 可以通过 height 属性调整编辑器高度
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+console.log(fibonacci(10));`)
+</script>

package/docs/examples/code-mirror/mode.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo-container">
+    <el-space direction="vertical" :fill="true" style="width: 100%">
+      <div>
+        <span style="margin-right: 10px">选择语言模式：</span>
+        <el-radio-group v-model="mode">
+          <el-radio value="application/javascript">JavaScript</el-radio>
+          <el-radio value="text/x-sql">SQL</el-radio>
+        </el-radio-group>
+      </div>
+      <j-code-mirror :value="code" :height="250" :mode="mode" />
+    </el-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const mode = ref('application/javascript')
+const code = ref(`function greet(name) {
+  return 'Hello, ' + name + '!';
+}`)
+
+watch(mode, (newMode) => {
+  if (newMode === 'text/x-sql') {
+    code.value = 'SELECT * FROM users WHERE status = "active";'
+  } else {
+    code.value = `function greet(name) {
+  return 'Hello, ' + name + '!';
+}`
+  }
+})
+</script>

package/docs/examples/code-mirror/readonly.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <j-code-mirror :value="code" :height="200" mode="application/javascript" :readonly="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref(`function hello() {
+  console.log('Hello, World!');
+  return 'This is readonly mode';
+}`)
+</script>