@a2simcode/ui 0.0.46 → 0.0.48

package/docs/examples/layout/min-size.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="layout-demo">
+    <j-layout
+      :left="200"
+      :right="200"
+      :top="80"
+      :bottom="80"
+      :mid-min-width="300"
+      :mid-min-height="200"
+    >
+      <template #left>
+        <div class="demo-block">
+          <h3>左侧区域</h3>
+          <p>尝试拖动边界调整大小</p>
+        </div>
+      </template>
+      <template #top>
+        <div class="demo-block">
+          <h3>顶部区域</h3>
+          <p>拖动下边界向下调整</p>
+        </div>
+      </template>
+      <template #default>
+        <div class="demo-block">
+          <h3>中间主体区域</h3>
+          <p>最小宽度: 300px</p>
+          <p>最小高度: 200px</p>
+          <p style="color: #1890ff; margin-top: 20px">
+            💡 无论如何拖动四周的分隔线，中间区域都不会小于设置的最小尺寸
+          </p>
+        </div>
+      </template>
+      <template #bottom>
+        <div class="demo-block">
+          <h3>底部区域</h3>
+          <p>拖动上边界向上调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-block">
+          <h3>右侧区域</h3>
+          <p>尝试拖动边界调整大小</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  height: 600px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.demo-block {
+  padding: 20px;
+  height: 100%;
+  background: #f5f5f5;
+  overflow: auto;
+}
+
+.demo-block h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.demo-block p {
+  margin: 5px 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>

package/docs/examples/layout/percent-size.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="layout-demo">
+    <j-layout left="20%" right="25%" top="15%" bottom="12%">
+      <template #left>
+        <div class="demo-content">
+          <h3>左侧区域</h3>
+          <p>宽度: 20%</p>
+          <p>可随窗口大小自动调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-content">
+          <h3>右侧区域</h3>
+          <p>宽度: 25%</p>
+          <p>响应式布局</p>
+        </div>
+      </template>
+      <template #top>
+        <div class="demo-content">
+          <h3>顶部区域</h3>
+          <p>高度: 15%</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div class="demo-content">
+          <h3>底部区域</h3>
+          <p>高度: 12%</p>
+        </div>
+      </template>
+      <div class="demo-main">
+        <h2>中间主体区域</h2>
+        <p>使用百分比设置各区域大小，布局会随窗口大小自动调整。</p>
+        <p>注意：拖动调整大小后，会自动转换为像素值。</p>
+      </div>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  height: 500px;
+  border: 1px solid #dcdfe6;
+}
+
+.demo-content {
+  padding: 20px;
+  background: #f5f7fa;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.demo-content h3 {
+  margin: 0 0 10px 0;
+  color: #303133;
+}
+
+.demo-content p {
+  margin: 5px 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.demo-main {
+  padding: 40px;
+  height: 100%;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.demo-main h2 {
+  margin: 0 0 20px 0;
+  color: #303133;
+}
+
+.demo-main p {
+  margin: 10px 0;
+  color: #606266;
+  line-height: 1.6;
+}
+</style>

package/docs/examples/layout/simple.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout>
+      <template #left>
+        <div style="padding: 20px; background: #001529; color: #fff; height: 100%">
+          <h3 style="margin: 0 0 10px">导航菜单</h3>
+          <div>菜单项 1</div>
+          <div>菜单项 2</div>
+          <div>菜单项 3</div>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
+          <h2>欢迎使用 Layout 组件</h2>
+          <p>这是一个简单的左右布局示例</p>
+          <p>左侧是导航菜单区域，右侧是内容展示区域</p>
+          <p>可以通过拖拽中间的分隔线来调整左侧区域的宽度</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/top-side.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout>
+      <template #top>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #001529;
+            color: #fff;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <h3 style="margin: 0">网站标题</h3>
+          <div style="display: flex; gap: 20px">
+            <span>首页</span>
+            <span>产品</span>
+            <span>关于</span>
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
+          <h2>顶部导航布局</h2>
+          <p>这是一个经典的顶部导航布局示例</p>
+          <p>顶部区域通常用于放置网站标题、导航菜单等内容</p>
+          <p>可以通过拖拽分隔线调整顶部区域的高度</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/map/basic.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="height: 400px; display: flex; flex-direction: column; gap: 10px">
+    <j-map v-model:address="address" v-model:lng="lng" v-model:lat="lat" @change="handleChange" />
+    <div>
+      <p>地址: {{ address }}</p>
+      <p>经度: {{ lng }}</p>
+      <p>纬度: {{ lat }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const address = ref('')
+const lng = ref(0)
+const lat = ref(0)
+
+const handleChange = (data: any) => {
+  console.log('Map change:', data)
+}
+</script>

package/docs/examples/menu/basic.vue

@@ -0,0 +1,58 @@
+<template>
+  <div style="height: 300px">
+    <j-menu :menus="menuList" :active-id="activeId" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: '数据管理',
+    value: '3',
+    icon: 'material-symbols-light:database',
+    children: [
+      {
+        label: '数据列表',
+        value: '3-1',
+        icon: 'material-symbols-light:table',
+      },
+      {
+        label: '数据导入',
+        value: '3-2',
+        icon: 'material-symbols-light:upload',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/collapsed.vue

@@ -0,0 +1,49 @@
+<template>
+  <div style="display: flex; gap: 20px">
+    <div style="height: 300px; width: 200px">
+      <j-button
+        style="margin-bottom: 10px"
+        :label="collapsed ? '展开' : '折叠'"
+        @click="collapsed = !collapsed"
+      />
+      <j-menu :menus="menuList" :active-id="activeId" :collapsed="collapsed" @click="handleClick" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+const collapsed = ref(false)
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/horizontal.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <j-menu :menus="menuList" :active-id="activeId" mode="horizontal" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '产品',
+    value: '2',
+    icon: 'material-symbols-light:apps',
+    children: [
+      {
+        label: '产品列表',
+        value: '2-1',
+      },
+      {
+        label: '新增产品',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '关于',
+    value: '3',
+    icon: 'material-symbols-light:info',
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/selection-test.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="menu-selection-test">
+    <div class="controls">
+      <p>Current Active ID: {{ activeId }}</p>
+      <div class="buttons">
+        <j-button @click="changeSelection('1')" label="Select Home (1)" />
+        <j-button @click="changeSelection('2-1')" label="Select User Manage (2-1)" />
+        <j-button @click="changeSelection('3-2')" label="Select Data Import (3-2)" />
+        <j-button @click="changeSelection('999')" label="Select Non-existent" />
+        <j-button
+          @click="collapsed = !collapsed"
+          :label="collapsed ? 'Expand Menu' : 'Collapse Menu'"
+        />
+      </div>
+    </div>
+
+    <div class="menu-container" style="height: 400px; border: 1px solid #eee; margin-top: 20px">
+      <j-menu
+        v-model:active-id="activeId"
+        :menus="menuList"
+        :collapsed="collapsed"
+        @click="handleClick"
+        @expand-change="handleExpandChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+const collapsed = ref(false)
+
+const menuList = ref([
+  {
+    label: 'Home',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: 'System',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: 'User',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: 'Role',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: 'Data',
+    value: '3',
+    icon: 'material-symbols-light:database',
+    children: [
+      {
+        label: 'List',
+        value: '3-1',
+        icon: 'material-symbols-light:table',
+      },
+      {
+        label: 'Import',
+        value: '3-2',
+        icon: 'material-symbols-light:upload',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('Menu clicked:', item)
+}
+
+const handleExpandChange = (detail: any) => {
+  console.log('Expand changed:', detail)
+}
+
+const changeSelection = (id: string) => {
+  console.log('Manually changing selection to:', id)
+  activeId.value = id
+}
+</script>
+
+<style scoped>
+.menu-selection-test {
+  padding: 20px;
+}
+.controls {
+  margin-bottom: 20px;
+}
+.buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+</style>

package/docs/examples/menu/theme.vue

@@ -0,0 +1,46 @@
+<template>
+  <div style="display: flex; gap: 20px">
+    <div style="height: 300px; width: 200px">
+      <j-menu :menus="menuList" :active-id="activeId" theme="light" @click="handleClick" />
+    </div>
+    <div style="height: 300px; width: 200px">
+      <j-menu :menus="menuList" :active-id="activeId" theme="dark" @click="handleClick" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/vertical.vue

@@ -0,0 +1,46 @@
+<template>
+  <div style="height: 300px; width: 200px">
+    <j-menu :menus="menuList" :active-id="activeId" mode="vertical" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '工作台',
+    value: '2',
+    icon: 'material-symbols-light:dashboard',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: '系统设置',
+    value: '3',
+    icon: 'material-symbols-light:settings',
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>