feat(其它变更): 组件gate与gateContent分拆

docs/examples-bk/button/basic.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-row class="mb-4">
+        <!-- <el-button>Default</el-button>
+        <el-button type="primary">Primary</el-button>
+        <el-button type="success">Success</el-button>
+        <el-button type="info">Info</el-button>
+        <el-button type="warning">Warning</el-button>
+        <el-button type="danger">Danger</el-button> -->
+
+        <UIButton>button1 </UIButton>
+        <UIButton :width="100">button2</UIButton>
+    </el-row>
+</template>
+
+<script lang="ts" setup>
+// import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
+import { UIButton } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/dist/index.css'
+</script>

docs/examples-bk/button/custom.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { isDark } from '~/composables/dark'
+</script>
+
+<template>
+    <div class="flex">
+        <el-button color="#626aef" :dark="isDark">Default</el-button>
+        <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
+
+        <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
+        <el-button color="#626aef" :dark="isDark" disabled plain>Disabled Plain</el-button>
+    </div>
+</template>

docs/examples-bk/button/disabled.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-row class="mb-4">
+        <el-button disabled>Default</el-button>
+        <el-button type="primary" disabled>Primary</el-button>
+        <el-button type="success" disabled>Success</el-button>
+        <el-button type="info" disabled>Info</el-button>
+        <el-button type="warning" disabled>Warning</el-button>
+        <el-button type="danger" disabled>Danger</el-button>
+    </el-row>
+
+    <el-row>
+        <el-button plain disabled>Plain</el-button>
+        <el-button type="primary" plain disabled>Primary</el-button>
+        <el-button type="success" plain disabled>Success</el-button>
+        <el-button type="info" plain disabled>Info</el-button>
+        <el-button type="warning" plain disabled>Warning</el-button>
+        <el-button type="danger" plain disabled>Danger</el-button>
+    </el-row>
+</template>

docs/examples-bk/button/group.vue

@@ -0,0 +1,18 @@
+<template>
+    <el-button-group>
+        <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
+        <el-button type="primary">
+            Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+        </el-button>
+    </el-button-group>
+
+    <el-button-group class="ml-4">
+        <el-button type="primary" :icon="Edit" />
+        <el-button type="primary" :icon="Share" />
+        <el-button type="primary" :icon="Delete" />
+    </el-button-group>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue'
+</script>

docs/examples-bk/button/icon.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="flex">
+        <el-button type="primary" :icon="Edit" />
+        <el-button type="primary" :icon="Share" />
+        <el-button type="primary" :icon="Delete" />
+        <el-button type="primary" :icon="Search">Search</el-button>
+        <el-button type="primary">
+            Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+    </div>
+</template>
+<script setup lang="ts">
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
+</script>

docs/examples-bk/button/link.vue

@@ -0,0 +1,22 @@
+<template>
+    <p>Basic link button</p>
+    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
+        <el-button v-for="button in buttons" :key="button.text" :type="button.type" link>{{ button.text }}</el-button>
+    </div>
+
+    <p>Disabled link button</p>
+    <div class="flex justify-space-between flex-wrap gap-4">
+        <el-button v-for="button in buttons" :key="button.text" :type="button.type" link disabled>{{ button.text }}</el-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+const buttons = [
+    { type: '', text: 'plain' },
+    { type: 'primary', text: 'primary' },
+    { type: 'success', text: 'success' },
+    { type: 'info', text: 'info' },
+    { type: 'warning', text: 'warning' },
+    { type: 'danger', text: 'danger' },
+] as const
+</script>

docs/examples-bk/button/loading.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-button type="primary" loading>Loading</el-button>
+    <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
+    <el-button type="primary" loading>
+        <template #loading>
+            <div class="custom-loading">
+                <svg class="circular" viewBox="-10, -10, 50, 50">
+                    <path
+                        class="path"
+                        d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          "
+                        style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+                    />
+                </svg>
+            </div>
+        </template>
+        Loading
+    </el-button>
+</template>
+
+<script lang="ts" setup>
+import { Eleme } from '@element-plus/icons-vue'
+</script>
+
+<style scoped>
+.el-button .custom-loading .circular {
+    margin-right: 6px;
+    width: 18px;
+    height: 18px;
+    animation: loading-rotate 2s linear infinite;
+}
+.el-button .custom-loading .circular .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: var(--el-button-text-color);
+    stroke-linecap: round;
+}
+</style>

docs/examples-bk/button/size.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-row>
+        <el-button size="large">Large</el-button>
+        <el-button>Default</el-button>
+        <el-button size="small">Small</el-button>
+        <el-button size="large" :icon="Search">Search</el-button>
+        <el-button :icon="Search">Search</el-button>
+        <el-button size="small" :icon="Search">Search</el-button>
+    </el-row>
+    <el-row class="my-4">
+        <el-button size="large" round>Large</el-button>
+        <el-button round>Default</el-button>
+        <el-button size="small" round>Small</el-button>
+        <el-button size="large" :icon="Search" round>Search</el-button>
+        <el-button :icon="Search" round>Search</el-button>
+        <el-button size="small" :icon="Search" round>Search</el-button>
+    </el-row>
+    <el-row>
+        <el-button :icon="Search" size="large" circle />
+        <el-button :icon="Search" circle />
+        <el-button :icon="Search" size="small" circle />
+    </el-row>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+</script>

docs/examples-bk/button/text.vue

@@ -0,0 +1,27 @@
+<template>
+    <p>Basic text button</p>
+    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
+        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>{{ button.text }}</el-button>
+    </div>
+
+    <p>Background color always on</p>
+    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
+        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>{{ button.text }}</el-button>
+    </div>
+
+    <p>Disabled text button</p>
+    <div class="flex justify-space-between flex-wrap gap-4">
+        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>{{ button.text }}</el-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+const buttons = [
+    { type: '', text: 'plain' },
+    { type: 'primary', text: 'primary' },
+    { type: 'success', text: 'success' },
+    { type: 'info', text: 'info' },
+    { type: 'warning', text: 'warning' },
+    { type: 'danger', text: 'danger' },
+] as const
+</script>