zant-admin 2.0.2 → 2.0.4

package/src/views/demo/button.vue

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