rrj-astra-ui 1.0.2

package/README.en.md

@@ -0,0 +1,36 @@
+# astra-ui
+
+#### Description
+uniapp-ui
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,37 @@
+# astra-ui
+
+#### 介绍
+uniapp-ui
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/components/AuiBadge.vue

@@ -0,0 +1,50 @@
+<template>
+    <span :class="['aui-badge', `aui-badge-${type}`]">
+        <slot></slot>
+    </span>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const __name = 'AuiBadge';
+
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-badge {
+    display: inline-block;
+    padding: 3px 6px;
+    font-size: 12px;
+    border-radius: 3px;
+    color: white;
+}
+
+.aui-badge-primary {
+    background-color: $aui-primary-color;
+}
+
+.aui-badge-success {
+    background-color: $aui-success-color;
+}
+
+.aui-badge-warning {
+    background-color: $aui-warning-color;
+}
+
+.aui-badge-danger {
+    background-color: $aui-danger-color;
+}
+</style>

package/components/AuiBlockBox.vue

@@ -0,0 +1,85 @@
+<template>
+    <view :class="`aui-block-box-theme-${theme}`" >
+        <view class="aui-block-box_head">
+            <view :class="`aui-block-box-radio-theme-${radioTheme}`" v-if="theme!='none'"></view>
+            <view class="aui-block-box-head_title" :style="titleStyle">{{ title }}</view>
+        </view>
+            <view class="aui-block-box_content">
+                <slot></slot>
+            </view>
+    </view>
+
+</template>
+
+<script setup>
+
+import { defineProps } from 'vue';
+const __name = 'AuiBlockBox';
+
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    titleStyle: {
+        type: String,
+        default: ''
+    },
+    radioTheme: {
+        type: String,
+        default: 'none',
+        validator: (value) => ['none','primary'].includes(value)
+    },
+     theme:{
+        type:String,
+        default:'primary'
+    }
+})
+</script>
+<style scoped lang="scss">
+@import '../style.scss';
+.aui-block-box {
+    display: block;
+    overflow: hidden;
+    margin: 20px 0;
+}
+
+.aui-block-box_head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.aui-block-box-head_title {
+    flex:1;
+    font-size: 16px;
+    color: $aui-text-color;
+}
+
+.aui-block-box-head_right {
+    display: flex;
+    align-items: center; 
+}
+.aui-block-box_content {
+    display: block;
+    overflow: hidden;
+    margin-top: 10px; 
+}
+.aui-block-box-radio-theme-primary {
+    width:4px;height: 16px;
+   background-color: #2563EB; 
+   border-radius: 999px;
+   margin-right: 10px;
+}
+.aui-block-box-theme-cyan{
+    background-color: #F5F5F5;
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding:13px
+}
+.aui-block-box-theme-cyan .aui-block-box-head_title{color:#4B5563;font-size: 14px;}
+</style>

package/components/AuiButton.vue

@@ -0,0 +1,210 @@
+<template>
+    <button
+       :style="{height}" :class="['aui-button', { 'aui-button--disabled': disabled }, `aui-button-${size}`, `aui-button-type-${type}`, `aui-button-type-${type}`, { 'aui-button-plain': plain }, `aui-button-shape-${shape}`]">
+        <slot></slot>
+    </button>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const __name = 'AuiButton';
+
+
+defineOptions({
+    name: __name
+})
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    size: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'small', 'large', 'mini'].includes(value)
+    },
+    type: {
+        type: String,
+        default: 'primary',
+        validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
+    },
+    plain: {
+        type: Boolean,
+        default: false
+    },
+    icon: {
+        type: String,
+        default: ''
+    },
+    shape: {
+        type: String,
+        default: 'normal',
+        validator: (value) => ['normal', 'circle', 'astra'].includes(value)
+    },
+    height:{
+        type: String,
+        default: '44px',
+    }
+});
+</script>
+
+<style scoped lang="scss">
+@import '../style.scss';
+
+.aui-button {
+    display: block;
+    padding: 10px 0px;
+    width: 100%;
+    font-size: $aui-font-size;
+    background-color: $aui-primary-color;
+    color: white;
+    border: none !important;
+    border-radius: 3px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.aui-button--disabled {
+    background-color: $aui-disabled-color;
+    border: 1px solid $aui-disabled-color;
+    cursor: not-allowed;
+}
+
+.aui-button-small {
+    padding: 5px 10px;
+    font-size: 12px;
+}
+
+.aui-button-large {
+    padding: 15px 30px;
+    font-size: 18px;
+}
+
+.aui-button-mini {
+    padding: 3px 6px;
+    font-size: 10px;
+}
+
+.aui-button-normal {
+    padding: 3px 20px;
+    font-size: $aui-font-size;
+}
+
+.aui-button-type-primary {
+    background-color: $aui-primary-color;
+    border: 1px solid $aui-primary-color;
+
+    &:hover:not(.aui-button--disabled) {
+        background-color: $aui-primary-color-hover;
+        border-color: $aui-primary-color-hover;
+    }
+}
+
+.aui-button-type-primary-gradient {
+    background: linear-gradient(135deg, #007bff, #0056b3);
+}
+
+.aui-button-type-success {
+    background-color: $aui-success-color;
+    border: 1px solid $aui-success-color;
+
+    &:hover:not(.aui-button--disabled) {
+        background-color: $aui-success-color-hover;
+        border-color: $aui-success-color-hover;
+    }
+}
+.aui-button-type-success-gradient {
+    background: linear-gradient(135deg, #28a745, #1e7e34); 
+}
+
+.aui-button-type-warning {
+    background-color: $aui-warning-color;
+    border: 1px solid $aui-warning-color;
+
+    &:hover:not(.aui-button--disabled) {
+        background-color: $aui-warning-color-hover;
+        border-color: $aui-warning-color-hover;
+    }
+}
+.aui-button-type-warning-gradient {
+    background: linear-gradient(135deg, #ffc107, #d39e00); 
+}
+
+.aui-button-type-danger {
+    background-color: $aui-danger-color;
+    border: 1px solid $aui-danger-color;
+
+    &:hover:not(.aui-button--disabled) {
+        background-color: $aui-danger-color-hover;
+        border-color: $aui-danger-color-hover;
+    }
+}
+.aui-button-type-danger-gradient {
+    background: linear-gradient(135deg, #dc3545, #b02a37); 
+}
+
+.aui-button-plain {
+    background-color: transparent;
+    color: inherit;
+
+    &.aui-button-type-primary {
+        border: 1px solid $aui-primary-color;
+        color: $aui-primary-color;
+
+        &:hover:not(.aui-button--disabled) {
+            background-color: $aui-primary-color-hover;
+            border-color: $aui-primary-color-hover;
+            color: white;
+        }
+    }
+
+    &.aui-button-type-success {
+        border: 1px solid $aui-success-color;
+        color: $aui-success-color;
+
+        &:hover:not(.aui-button--disabled) {
+            background-color: $aui-success-color-hover;
+            border-color: $aui-success-color-hover;
+            color: white;
+        }
+    }
+
+    &.aui-button-type-warning {
+        border: 1px solid $aui-warning-color;
+        color: $aui-warning-color;
+
+        &:hover:not(.aui-button--disabled) {
+            background-color: $aui-warning-color-hover;
+            border-color: $aui-warning-color-hover;
+            color: white;
+        }
+    }
+
+    &.aui-button-type-danger {
+        border: 1px solid $aui-danger-color;
+        color: $aui-danger-color;
+
+        &:hover:not(.aui-button--disabled) {
+            background-color: $aui-danger-color-hover;
+            border-color: $aui-danger-color-hover;
+            color: white;
+        }
+    }
+}
+
+.aui-button-shape-circle {
+    border-radius: 50%;
+}
+
+.aui-button-shape-astra {
+    border-radius: 0 50%;
+}
+
+.aui-button i {
+    margin-right: 5px;
+}
+</style>