@a2simcode/ui 0.0.158 → 0.0.160

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

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

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

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

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

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

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