zant-admin 1.0.1 → 2.0.0

package/src/views/demo/button.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="demo-container">
+    <h1>ZCUI 自定义按钮样式示例</h1>
+
+    <!-- 官方组件链接 -->
+    <div class="section">
+      <h2>官方组件库</h2>
+      <div class="demo-block">
+        <p>
+          Ant Design Vue 按钮组件文档：<a
+            href="https://www.antdv.com/components/button-cn"
+            target="_blank"
+            class="doc-link"
+            >https://www.antdv.com/components/button-cn</a
+          >
+        </p>
+        <p>如需查看官方按钮组件示例，请访问上述链接。</p>
+      </div>
+    </div>
+
+    <!-- ZCUI 自定义按钮（基于 Ant Design Vue） -->
+    <div class="section">
+      <h2>ZCUI 自定义按钮（Ant Design Vue + zcui.css 样式）</h2>
+
+      <div class="demo-block">
+        <h3>基础功能色</h3>
+        <div class="button-group">
+          <a-button class="btn-primary">Primary</a-button>
+          <a-button class="btn-success">Success</a-button>
+          <a-button class="btn-warning">Warning</a-button>
+          <a-button class="btn-error">Error</a-button>
+        </div>
+      </div>
+
+      <div class="demo-block">
+        <h3>扩展颜色系</h3>
+        <div class="button-group">
+          <a-button class="btn-red">Red</a-button>
+          <a-button class="btn-orangered">Orange Red</a-button>
+          <a-button class="btn-orange">Orange</a-button>
+          <a-button class="btn-gold">Gold</a-button>
+          <a-button class="btn-yellow">Yellow</a-button>
+          <a-button class="btn-lime">Lime</a-button>
+          <a-button class="btn-green">Green</a-button>
+          <a-button class="btn-cyan">Cyan</a-button>
+        </div>
+        <div class="button-group">
+          <a-button class="btn-blue">Blue</a-button>
+          <a-button class="btn-arcoblue">Arco Blue</a-button>
+          <a-button class="btn-purple">Purple</a-button>
+          <a-button class="btn-pinkpurple">Pink Purple</a-button>
+          <a-button class="btn-magenta">Magenta</a-button>
+        </div>
+      </div>
+
+      <div class="demo-block">
+        <h3>尺寸变化</h3>
+        <div class="button-group">
+          <a-button class="btn-success" size="small">Small</a-button>
+          <a-button class="btn-warning">Default</a-button>
+          <a-button class="btn-error" size="large">Large</a-button>
+        </div>
+      </div>
+
+      <div class="demo-block">
+        <h3>边框按钮样式</h3>
+        <div class="button-group">
+          <a-button class="btn-bordered-primary">Primary</a-button>
+          <a-button class="btn-bordered-success">Success</a-button>
+          <a-button class="btn-bordered-warning">Warning</a-button>
+          <a-button class="btn-bordered-error">Error</a-button>
+        </div>
+        <div class="button-group">
+          <a-button class="btn-bordered-red">Red</a-button>
+          <a-button class="btn-bordered-orangered">Orange Red</a-button>
+          <a-button class="btn-bordered-orange">Orange</a-button>
+          <a-button class="btn-bordered-gold">Gold</a-button>
+          <a-button class="btn-bordered-yellow">Yellow</a-button>
+          <a-button class="btn-bordered-lime">Lime</a-button>
+          <a-button class="btn-bordered-green">Green</a-button>
+          <a-button class="btn-bordered-cyan">Cyan</a-button>
+        </div>
+        <div class="button-group">
+          <a-button class="btn-bordered-blue">Blue</a-button>
+          <a-button class="btn-bordered-arcoblue">Arco Blue</a-button>
+          <a-button class="btn-bordered-purple">Purple</a-button>
+          <a-button class="btn-bordered-pinkpurple">Pink Purple</a-button>
+          <a-button class="btn-bordered-magenta">Magenta</a-button>
+        </div>
+      </div>
+
+      <div class="demo-block">
+        <h3>虚线按钮样式</h3>
+        <div class="button-group">
+          <a-button class="btn-dashed-primary">Primary</a-button>
+          <a-button class="btn-dashed-success">Success</a-button>
+          <a-button class="btn-dashed-warning">Warning</a-button>
+          <a-button class="btn-dashed-error">Error</a-button>
+        </div>
+        <div class="button-group">
+          <a-button class="btn-dashed-red">Red</a-button>
+          <a-button class="btn-dashed-orangered">Orange Red</a-button>
+          <a-button class="btn-dashed-orange">Orange</a-button>
+          <a-button class="btn-dashed-gold">Gold</a-button>
+          <a-button class="btn-dashed-yellow">Yellow</a-button>
+          <a-button class="btn-dashed-lime">Lime</a-button>
+          <a-button class="btn-dashed-green">Green</a-button>
+          <a-button class="btn-dashed-cyan">Cyan</a-button>
+        </div>
+        <div class="button-group">
+          <a-button class="btn-dashed-blue">Blue</a-button>
+          <a-button class="btn-dashed-arcoblue">Arco Blue</a-button>
+          <a-button class="btn-dashed-purple">Purple</a-button>
+          <a-button class="btn-dashed-pinkpurple">Pink Purple</a-button>
+          <a-button class="btn-dashed-magenta">Magenta</a-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用说明 -->
+    <div class="section">
+      <h2>使用说明</h2>
+      <div class="demo-block">
+        <h3>类名组合方式</h3>
+        <div class="usage-example">
+          <h4>1. 基础填充按钮</h4>
+          <code
+            >&lt;a-button class="btn-primary"&gt;Primary
+            Button&lt;/a-button&gt;</code
+          >
+
+          <h4>2. 虚线按钮</h4>
+          <code
+            >&lt;a-button class="btn-dashed-primary"&gt;Dashed
+            Primary&lt;/a-button&gt;</code
+          >
+
+          <h4>3. 圆角按钮（组合使用）</h4>
+          <code
+            >&lt;a-button class="btn-primary border-radius"&gt;Rounded
+            Primary&lt;/a-button&gt;</code
+          >
+
+          <h4>4. 尺寸调整（使用 Ant Design Vue 原生属性）</h4>
+          <code
+            >&lt;a-button class="btn-success" size="small"&gt;Small
+            Button&lt;/a-button&gt;<br />
+            &lt;a-button class="btn-warning" size="large"&gt;Large
+            Button&lt;/a-button&gt;</code
+          >
+
+          <h4>5. 结合 Ant Design Vue 原生属性</h4>
+          <code
+            >&lt;a-button class="btn-primary" loading&gt;Loading
+            Button&lt;/a-button&gt;<br />
+            &lt;a-button class="btn-success" disabled&gt;Disabled
+            Button&lt;/a-button&gt;</code
+          >
+        </div>
+      </div>
+
+      <div class="demo-block">
+        <h3>颜色选择</h3>
+        <p>ZCUI 提供了丰富的颜色选择：</p>
+        <ul class="color-list">
+          <li><strong>基础颜色</strong>: primary, success, warning, error</li>
+          <li>
+            <strong>扩展颜色</strong>: red, orangered, orange, gold, yellow, lime,
+            green, cyan, blue, arcoblue, purple, pinkpurple, magenta
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// ZCUI 按钮组件无需额外 JavaScript 代码
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+h1 {
+  color: #1890ff;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.section {
+  margin-bottom: 40px;
+  background: white;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section h2 {
+  color: #262626;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #1890ff;
+  font-size: 18px;
+}
+
+.demo-block {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #fafafa;
+  border-radius: 6px;
+  border-left: 4px solid #1890ff;
+}
+
+.demo-block h3 {
+  color: #595959;
+  margin-bottom: 15px;
+  font-size: 16px;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Ant Design Vue 按钮间距调整 */
+:deep(.ant-btn) {
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+/* ZCUI 按钮样式保持 */
+:deep(.btn-nobor) {
+  margin: 0 3px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .demo-container {
+    padding: 16px;
+  }
+
+  .button-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  :deep(.ant-btn) {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
+/* 悬停效果展示区域 */
+.demo-block:hover {
+  background: #f0f9ff;
+  transition: all 0.3s ease;
+}
+
+.demo-block h3::before {
+  content: '🎨 ';
+  margin-right: 5px;
+}
+</style>

package/src/views/demo/importexport.vue

@@ -8,8 +8,6 @@
   >
     <!-- 可以通过插槽自定义单元格 -->
   </form-table>
-
-
 </template>
 <script setup>
 import { ref, inject } from 'vue'
@@ -25,13 +23,12 @@ const menuinit = inject('menuinit')
 const permissionModulePath = ref('demo:importexport')
 
 const formState = ref({
-  name: { label: '角色名称', value: '',defaultvalue:'', type: 'text' },
+  name: { label: '角色名称', value: '', defaultvalue: '', type: 'text' },
 })
 const columns = ref([
   {
     title: '角色名称',
     dataIndex: 'name',
-
   },
   {
     title: '备注',
@@ -44,7 +41,7 @@ const columns = ref([
   {
     title: '创建时间',
     dataIndex: 'createTime',
-  }
+  },
 ])
 const childRef = ref(null)
 
@@ -94,7 +91,7 @@ const onTreeCheck = (checkedKeysValue, e) => {
 const empowerSave = () => {
   var data = {
     Id: recordId.value,
-    Menus:checkedKeys.value.checked,
+    Menus: checkedKeys.value.checked,
   }
   sysRole.savePower(data).then(() => {
     const menu = menuStore()
@@ -104,13 +101,12 @@ const empowerSave = () => {
         menu.menus = res.data
         message.success('成功', 1, () => {
           if (menuinit) {
-                refreshRoutes().then(() => {
-                // 重新加载菜单树（如果你有菜单组件）
-                 menuinit()
-                // 跳转到新菜单页面，或者刷新当前页
+            refreshRoutes().then(() => {
+              // 重新加载菜单树（如果你有菜单组件）
+              menuinit()
+              // 跳转到新菜单页面，或者刷新当前页
               // router.replace(router.currentRoute.value.fullPath)
-              })
-
+            })
           }
           empoweropen.value = false
         })

package/src/views/demo/region.vue

@@ -1,5 +1,29 @@
 <template>
-  <div class="region-container">
+  <div class="region-container" >
+    <!-- 数据来源说明 -->
+    <a-card title="数据来源" class="margin-bottom-10">
+      <div class="data-source-content">
+        <a-alert
+          message="数据来源：中华人民共和国国家统计局"
+          description="本页面提供的省市区数据来源于中华人民共和国国家统计局发布的2023年统计用区划代码和城乡划分代码，确保数据的准确性和权威性。"
+          type="info"
+          show-icon
+          :closable="false"
+        />
+        <!-- <div class="source-details">
+          <div class="source-item">
+            <strong>发布机构：</strong>中华人民共和国国家统计局
+          </div>
+          <div class="source-item">
+            <strong>数据版本：</strong>2023年统计用区划代码和城乡划分代码
+          </div>
+          <div class="source-item">
+            <strong>数据说明：</strong>全国省、市、区/县三级行政区划标准数据，支持省市区三级联动选择功能
+          </div>
+        </div> -->
+      </div>
+    </a-card>
+
     <a-card title="省市区联动选择" class="region-card">
       <div class="region-selector">
         <a-form layout="inline">
@@ -41,11 +65,20 @@
         </a-form>
         <div class="selected-result" v-if="selectedAddress">
           <a-alert :message="selectedAddress" type="success" show-icon />
-          <div class="code-display" v-if="selectedProvince || selectedCity || selectedArea">
+          <div
+            class="code-display"
+            v-if="selectedProvince || selectedCity || selectedArea"
+          >
             <a-descriptions title="区域代码" :column="3" size="small">
-              <a-descriptions-item label="省份代码">{{ selectedProvince || '-' }}</a-descriptions-item>
-              <a-descriptions-item label="城市代码">{{ selectedCity || '-' }}</a-descriptions-item>
-              <a-descriptions-item label="区县代码">{{ selectedArea || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="省份代码">{{
+                selectedProvince || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{
+                selectedCity || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{
+                selectedArea || '-'
+              }}</a-descriptions-item>
             </a-descriptions>
           </div>
         </div>
@@ -69,16 +102,27 @@
         </a-form>
         <div class="cascader-result" v-if="cascaderAddress">
           <a-alert :message="cascaderAddress" type="info" show-icon />
-          <div class="code-display" v-if="cascaderValue && cascaderValue.length > 0">
+          <div
+            class="code-display"
+            v-if="cascaderValue && cascaderValue.length > 0"
+          >
             <a-descriptions title="区域代码" :column="3" size="small">
-              <a-descriptions-item label="省份代码">{{ cascaderValue[0] || '-' }}</a-descriptions-item>
-              <a-descriptions-item label="城市代码">{{ cascaderValue[1] || '-' }}</a-descriptions-item>
-              <a-descriptions-item label="区县代码">{{ cascaderValue[2] || '-' }}</a-descriptions-item>
+              <a-descriptions-item label="省份代码">{{
+                cascaderValue[0] || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="城市代码">{{
+                cascaderValue[1] || '-'
+              }}</a-descriptions-item>
+              <a-descriptions-item label="区县代码">{{
+                cascaderValue[2] || '-'
+              }}</a-descriptions-item>
             </a-descriptions>
           </div>
         </div>
       </div>
     </a-card>
+
+
   </div>
 </template>
 
@@ -100,7 +144,11 @@ const cascaderOptions = ref([])
 
 // 计算属性：获取选中的完整地址
 const selectedAddress = computed(() => {
-  return regionUtils.getFullAddressName(selectedProvince.value, selectedCity.value, selectedArea.value)
+  return regionUtils.getFullAddressName(
+    selectedProvince.value,
+    selectedCity.value,
+    selectedArea.value,
+  )
 })
 
 // 计算属性：获取组合框选中的完整地址
@@ -114,7 +162,7 @@ const cascaderAddress = computed(() => {
  * 处理省份选择变化
  * @param {string} value - 选中的省份代码
  */
-const handleProvinceChange = (value) => {
+const handleProvinceChange = value => {
   // 重置城市和区县选择
   selectedCity.value = ''
   selectedArea.value = ''
@@ -128,7 +176,7 @@ const handleProvinceChange = (value) => {
  * 处理城市选择变化
  * @param {string} value - 选中的城市代码
  */
-const handleCityChange = (value) => {
+const handleCityChange = value => {
   // 重置区县选择
   selectedArea.value = ''
 
@@ -140,7 +188,7 @@ const handleCityChange = (value) => {
  * 处理区县选择变化
  * @param {string} value - 选中的区县代码
  */
-const handleAreaChange = (value) => {
+const handleAreaChange = value => {
   // 这里可以添加区县选择后的处理逻辑
   console.log('选中的区县代码:', value)
 }
@@ -149,7 +197,7 @@ const handleAreaChange = (value) => {
  * 处理组合框选择变化
  * @param {Array} value - 选中的值数组 [省份代码, 城市代码, 区县代码]
  */
-const handleCascaderChange = (value) => {
+const handleCascaderChange = value => {
   console.log('组合框选中的值:', value)
 }
 
@@ -170,7 +218,9 @@ const filterOption = (input, option) => {
  * @returns {boolean} 是否匹配
  */
 const filterCascaderOption = (inputValue, pathNode) => {
-  return pathNode.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0)
+  return pathNode.some(
+    option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0,
+  )
 }
 
 /**
@@ -178,7 +228,7 @@ const filterCascaderOption = (inputValue, pathNode) => {
  * @param {Array} provinces - 省份数据
  * @returns {Array} 级联选择器选项数据
  */
-const buildCascaderOptions = (provinces) => {
+const buildCascaderOptions = provinces => {
   return provinces.map(province => {
     // 获取省份下的所有城市
     const cities = regionUtils.getCitiesByProvinceCode(province.value)
@@ -193,9 +243,9 @@ const buildCascaderOptions = (provinces) => {
         return {
           label: city.label,
           value: city.value,
-          children: areas.length > 0 ? areas : undefined
+          children: areas.length > 0 ? areas : undefined,
         }
-      })
+      }),
     }
   })
 }
@@ -218,16 +268,17 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-
 .region-card {
   margin-bottom: 20px;
 }
 
-.region-selector, .region-cascader {
+.region-selector,
+.region-cascader {
   padding: 20px 0;
 }
 
-.selected-result, .cascader-result {
+.selected-result,
+.cascader-result {
   margin-top: 20px;
 }
 
@@ -237,4 +288,35 @@ onMounted(async () => {
   background-color: #f5f5f5;
   border-radius: 6px;
 }
+
+.data-source-card {
+  margin-top: 20px;
+  background-color: #fafafa;
+}
+
+.data-source-content {
+  padding: 10px 0;
+}
+
+.source-details {
+  margin-top: 15px;
+  padding: 15px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+}
+
+.source-item {
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.source-item:last-child {
+  margin-bottom: 0;
+}
+
+.source-item strong {
+  color: #1890ff;
+  font-weight: 600;
+}
 </style>

package/src/views/demo/statistics.vue

@@ -16,7 +16,7 @@
       </a-col>
     </a-row>
 
-    <a-row :gutter="16" style="margin-top: 16px;">
+    <a-row :gutter="16" style="margin-top: 16px">
       <!-- 折线图 -->
       <a-col :span="24">
         <a-card title="月度趋势分析" class="chart-card">
@@ -29,7 +29,14 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { initBarChart, updateBarChart, initPieChart, updatePieChart, initLineChart, updateLineChart } from '@/utils/baseEcharts'
+import {
+  initBarChart,
+  updateBarChart,
+  initPieChart,
+  updatePieChart,
+  initLineChart,
+  updateLineChart,
+} from '@/utils/baseEcharts'
 
 // 图表DOM引用
 const barChartRef = ref(null)
@@ -68,22 +75,35 @@ const generateMockData = () => {
   // 柱状图数据
   const barData = {
     xAxis: {
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      data: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
     },
     series: [
       {
         name: '产品A',
-        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290]
+        data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290],
       },
       {
         name: '产品B',
-        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290]
+        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
       },
       {
         name: '产品C',
-        data: [150, 232, 201, 154, 190, 330, 410, 320, 282, 291, 334, 390]
-      }
-    ]
+        data: [150, 232, 201, 154, 190, 330, 410, 320, 282, 291, 334, 390],
+      },
+    ],
   }
 
   // 饼图数据
@@ -92,28 +112,28 @@ const generateMockData = () => {
     { name: '家居用品', value: 310 },
     { name: '服装鞋帽', value: 234 },
     { name: '食品饮料', value: 135 },
-    { name: '图书音像', value: 1048 }
+    { name: '图书音像', value: 1048 },
   ]
 
   // 折线图数据
   const lineData = {
     xAxis: {
-      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
     },
     series: [
       {
         name: '网站访问量',
-        data: [820, 932, 901, 934, 1290, 1330, 1320]
+        data: [820, 932, 901, 934, 1290, 1330, 1320],
       },
       {
         name: 'APP访问量',
-        data: [620, 732, 701, 734, 1090, 1130, 1120]
+        data: [620, 732, 701, 734, 1090, 1130, 1120],
       },
       {
         name: '小程序访问量',
-        data: [420, 532, 501, 534, 890, 930, 920]
-      }
-    ]
+        data: [420, 532, 501, 534, 890, 930, 920],
+      },
+    ],
   }
 
   return { barData, pieData, lineData }
@@ -130,7 +150,7 @@ const updateCharts = () => {
     updateBarChart({
       chartInstance: barChartInstance,
       data: barData,
-      shouldShowSlider: false
+      shouldShowSlider: false,
     })
   }
 
@@ -138,7 +158,7 @@ const updateCharts = () => {
   if (pieChartInstance) {
     updatePieChart({
       chartInstance: pieChartInstance,
-      data: pieData
+      data: pieData,
     })
   }
 
@@ -147,7 +167,7 @@ const updateCharts = () => {
     updateLineChart({
       chartInstance: lineChartInstance,
       data: lineData,
-      shouldShowSlider: false
+      shouldShowSlider: false,
     })
   }
 }
@@ -183,7 +203,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-
 .chart-card {
   margin-bottom: 16px;
 }

package/src/views/home.vue

@@ -1,7 +1,6 @@
 <script setup>
-import MainPage from '../components/MainPage.vue';
+import MainPage from '../components/MainPage.vue'
 </script>
 <template>
-     <MainPage/>
+  <MainPage />
 </template>
-