oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-04 17:31:49 +08:00
1 parent 068fcb7649
commit 1a33497c5d
29 files changed
+889 -306
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/_styles/_variables.scss
+70 -30
View File
@@ -2,45 +2,85 @@
$prefix: 'ao' !default;
// 基础颜色
$primary: var(--ao-primary); // 色彩-品牌-可操作
$warning: var(--ao-warning); // 色彩-功能-警告
$danger: var(--ao-danger); // 色彩-功能-失败
$success: var(--ao-success); // 色彩-功能-成功
$default-color: var(--ao-default-color); // 色彩-品牌-可操作
$primary-color: var(--ao-primary-color); // 色彩-品牌-可操作
$warning-color: var(--ao-warning-color); // 色彩-功能-警告
$danger-color: var(--ao-danger-color); // 色彩-功能-失败
$success-color: var(--ao-success-color); // 色彩-功能-成功
// 默认颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
$default-color-hover: var(--ao-default-color-hover); // hover态
$default-color-focus: var(--ao-default-color-focus); // focus态，包括鼠标和键盘
$default-color-active: var(--ao-default-color-active); // 点击态
$default-color-disabled: var(--ao-default-color-disabled); // 禁用态
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
$primary-hover: var(--ao-primary-hover); // hover态
$primary-focus: var(--ao-primary-focus); // focus态，包括鼠标和键盘
$primary-active: var(--ao-primary-active); // 点击态
$primary-disabled: var(--ao-primary-disabled); // 禁用态
$primary-color-hover: var(--ao-primary-color-hover); // hover态
$primary-color-focus: var(--ao-primary-color-focus); // focus态，包括鼠标和键盘
$primary-color-active: var(--ao-primary-color-active); // 点击态
$primary-color-disabled: var(--ao-primary-color-disabled); // 禁用态
// 警告色扩展
$warning-hover: var(--ao-warning-hover);
$warning-focus: var(--ao-warning-focus);
$warning-active: var(--ao-warning-active);
$warning-disabled: var(--ao-warning-disabled);
$warning-color-hover: var(--ao-warning-color-hover);
$warning-color-focus: var(--ao-warning-color-focus);
$warning-color-active: var(--ao-warning-color-active);
$warning-color-disabled: var(--ao-warning-color-disabled);
// 失败/错误色扩展
$danger-hover: var(--ao-danger-hover);
$danger-focus: var(--ao-danger-focus);
$danger-active: var(--ao-danger-active);
$danger-disabled: var(--ao-danger-disabled);
$danger-color-hover: var(--ao-danger-color-hover);
$danger-color-focus: var(--ao-danger-color-focus);
$danger-color-active: var(--ao-danger-color-active);
$danger-color-disabled: var(--ao-danger-color-disabled);
// 成功色扩展
$success-hover: var(--ao-success-hover);
$success-focus: var(--ao-success-focus);
$success-active: var(--ao-success-active);
$success-disabled: var(--ao-success-disabled);
$success-color-hover: var(--ao-success-color-hover);
$success-color-focus: var(--ao-success-color-focus);
$success-color-active: var(--ao-success-color-active);
$success-color-disabled: var(--ao-success-color-disabled);
// 文本颜色
$text-primary: var(--ao-text-primary); // 色彩-文字-主要
$text-secondary: var(--ao-text-secondary); // 色彩-文字-次要
$text-assist: var(--ao-text-secondary); // 色彩-文字-次要
$text-placeholder: var(--ao-text-placeholder); // 色彩-文字-占位符/说明
$text-disabled: var(--ao-text-disabled); // 色彩-文字-禁用
$text-anti: var(--ao-text-anti); // 色彩-文字-反色
$text-primary: var(--ao-text-primary); // 色彩-文字-品牌
$text-link: var(--ao-text-link); // 色彩-文字-链接
$text-color-base: var(--ao-text-color-base); // 色彩-文字-主要
$text-color-secondary: var(--ao-text-color-secondary); // 色彩-文字-次要
$text-color-assist: var(--ao-text-color-assist); // 色彩-文字-次要
$text-color-placeholder: var(--ao-text-color-placeholder); // 色彩-文字-占位符/说明
$text-color-disabled: var(--ao-text-color-disabled); // 色彩-文字-禁用
$text-color-anti: var(--ao-text-color-anti); // 色彩-文字-反色
$text-color-link: var(--ao-text-color-link); // 色彩-文字-链接
$border-radius: 2px;
$border-divider: var(--ao-stroke); // 分割线（内容区域之间的分隔，如列表、面板内部）
$border-component: var(--ao-border); // 组件边框（Input、Select、Card 等容器的外部边框）
$stroke-color: var(--ao-stroke-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
$border-color: var(--ao-border-color); // 组件边框（Input、Select、Card 等容器的外部边框）
$bg-color-control: var(
--ao-bg-color-control
); // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 高度
$size-height-small: 24px;
$size-height-medium: 28px;
$size-height-large: 32px;
// 字体大小
$size-font-small: 12px;
$size-font-medium: 13px;
$size-font-large: 14px;
// 滚动条颜色
$scrollbar-color: var(--ao-scrollbar-color);
// 滚动条悬浮颜色
$scrollbar-hover-color: var(--ao-scrollbar-hover-color);
// 滚动条轨道颜色
$scroll-track-color: var(--ao-scroll-track-color);
// 容器颜色，使用的组件：popup
$bg-color-container: var(--ao-bg-color-container);
$bg-color-container-hover: var(--ao-bg-color-container-hover);
$bg-color-container-active: var(--ao-bg-color-container-active);
// shadow
// 基础/下层 投影 hover 使用的组件包括：表格 /
$shadow-surface: var(--ao-shadow-surface);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
$shadow-popup: var(--ao-shadow-popup);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
$shadow-overlay: var(--ao-shadow-overlay);
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_dark.scss
+58 -31
View File
@@ -1,39 +1,66 @@
:root[theme-mode='dark'] {
--ao-primary: #4582e6;
--ao-warning: #cf6e2d;
--ao-danger: #c64751;
--ao-success: #059465;
--ao-default-color: #393939;
--ao-primary-color: #4582e6;
--ao-warning-color: #cf6e2d;
--ao-danger-color: #c64751;
--ao-success-color: #059465;
--ao-primary-hover: #2667d4;
--ao-primary-focus: #173463;
--ao-primary-active: #699ef5;
--ao-primary-disabled: #143975;
--ao-default-color-hover: #4b4b4b;
--ao-default-color-focus: #505050;
--ao-default-color-active: #5c5c5c;
--ao-default-color-disabled: #2c2c2c;
--ao-warning-hover: #a75d2b;
--ao-warning-focus: #582f21;
--ao-warning-active: #dc7633;
--ao-warning-disabled: #733c23;
--ao-primary-color-hover: #2667d4;
--ao-primary-color-focus: #173463;
--ao-primary-color-active: #699ef5;
--ao-primary-color-disabled: #143975;
--ao-danger-hover: #a03f46;
--ao-danger-focus: #5e2a2d;
--ao-danger-active: #de6670;
--ao-danger-disabled: #703439;
--ao-warning-color-hover: #a75d2b;
--ao-warning-color-focus: #582f21;
--ao-warning-color-active: #dc7633;
--ao-warning-color-disabled: #733c23;
--ao-success-hover: #0d7a55;
--ao-success-focus: #1a4230;
--ao-success-active: #43af8a;
--ao-success-disabled: #17533d;
--ao-danger-color-hover: #a03f46;
--ao-danger-color-focus: #5e2a2d;
--ao-danger-color-active: #de6670;
--ao-danger-color-disabled: #703439;
--ao-text-primary: rgba(255, 255, 255, 90%); /* 主要文字 */
--ao-text-secondary: rgba(255, 255, 255, 55%); /* 次要文字 / 辅助信息 */
--ao-text-assist: rgba(255, 255, 255, 45%); /* 输入框内部辅助元素（icon/count） */
--ao-text-placeholder: rgba(255, 255, 255, 35%); /* 占位符 / 说明文字 */
--ao-text-disabled: rgba(255, 255, 255, 22%); /* 禁用文字 */
--ao-text-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-brand: #4582e6; /* 品牌色文字 / 主操作色 */
--ao-text-link: #4582e6; /* 链接文字 */
--ao-text-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
--ao-success-color-hover: #0d7a55;
--ao-success-color-focus: #1a4230;
--ao-success-color-active: #43af8a;
--ao-success-color-disabled: #17533d;
--ao-stroke: #393939; // 分割线
--ao-border: #5e5e5e; // 边框
--ao-text-color-base: rgba(255, 255, 255, 90%); /* 主要文字 */
--ao-text-color-secondary: rgba(255, 255, 255, 55%); /* 次要文字 / 辅助信息 */
--ao-text-color-assist: rgba(255, 255, 255, 45%); /* 输入框内部辅助元素（icon/count） */
--ao-text-color-placeholder: rgba(255, 255, 255, 35%); /* 占位符 / 说明文字 */
--ao-text-color-disabled: rgba(255, 255, 255, 22%); /* 禁用文字 */
--ao-text-color-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-color-link: #4582e6; /* 链接文字 */
--ao-text-color-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #393939; // 分割线
--ao-border-color: #5e5e5e; // 边框
--ao-bg-color-control: transparent; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 滚动条颜色
--ao-scrollbar-color: rgba(255, 255, 255, 10%);
// 滚动条悬浮颜色（ hover ）
--ao-scrollbar-hover-color: rgba(255, 255, 255, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--ao-scroll-track-color: #333;
// 容器颜色，使用的组件：popup
--ao-bg-color-container: #242424;
--ao-bg-color-container-hover: #2c2c2c;
--ao-bg-color-container-active: #4b4b4b;
// shadow阴影
// 基础/下层 投影 hover 使用的组件包括：表格 /
--ao-shadow-surface: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--ao-shadow-popup: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--ao-shadow-overlay: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
}
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_light.scss
+60 -31
View File
@@ -1,40 +1,69 @@
:root,
:root[theme-mode='light'] {
--ao-primary: #0052d9;
--ao-warning: #e37318;
--ao-danger: #d54941;
--ao-success: #2ba471;
--ao-default-color: #e7e7e7;
--ao-primary-color: #0052d9;
--ao-warning-color: #e37318;
--ao-danger-color: #d54941;
--ao-success-color: #2ba471;
--ao-primary-hover: #366ef4;
--ao-primary-focus: #d9e1ff;
--ao-primary-active: #003cab;
--ao-primary-disabled: #b5c7ff;
--ao-default-color-hover: #dddddd;
--ao-default-color-focus: #cfcfcf;
--ao-default-color-active: #ababab;
--ao-default-color-disabled: #eeeeee;
--ao-warning-hover: #fa9550;
--ao-warning-focus: #ffd9c2;
--ao-warning-active: #be5a00;
--ao-warning-disabled: #ffb98c;
--ao-primary-color-hover: #366ef4;
--ao-primary-color-focus: #d9e1ff;
--ao-primary-color-active: #003cab;
--ao-primary-color-disabled: #b5c7ff;
--ao-danger-hover: #f6685d;
--ao-danger-focus: #ffd8d2;
--ao-danger-active: #ad352f;
--ao-danger-disabled: #ffb9b0;
--ao-warning-color-hover: #fa9550;
--ao-warning-color-focus: #ffd9c2;
--ao-warning-color-active: #be5a00;
--ao-warning-color-disabled: #ffb98c;
--ao-success-hover: #56c08d;
--ao-success-focus: #c6f3d7;
--ao-success-active: #008858;
--ao-success-disabled: #92dab2;
--ao-danger-color-hover: #f6685d;
--ao-danger-color-focus: #ffd8d2;
--ao-danger-color-active: #ad352f;
--ao-danger-color-disabled: #ffb9b0;
--ao-text-primary: rgba(0, 0, 0, 90%); /* 主要文字 */
--ao-text-secondary: rgba(0, 0, 0, 60%); /* 次要文字 / 辅助信息 */
--ao-text-assist: rgba(0, 0, 0, 50%); /* 输入框内部辅助元素（icon/count） */
--ao-text-placeholder: rgba(0, 0, 0, 40%); /* 占位符 / 说明文字 */
--ao-text-disabled: rgba(0, 0, 0, 26%); /* 禁用文字 */
--ao-text-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-brand: #0052d9; /* 品牌色文字 / 主操作色 */
--ao-text-link: #003cab; /* 链接文字 */
--ao-text-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
--ao-success-color-hover: #56c08d;
--ao-success-color-focus: #c6f3d7;
--ao-success-color-active: #008858;
--ao-success-color-disabled: #92dab2;
--ao-stroke: #e8e8e8; // 分割线
--ao-border: #ddd; // 边框
--ao-text-color-base: rgba(0, 0, 0, 90%); /* 主要文字 */
--ao-text-color-secondary: rgba(0, 0, 0, 60%); /* 次要文字 / 辅助信息 */
--ao-text-color-assist: rgba(0, 0, 0, 50%); /* 输入框内部辅助元素（icon/count） */
--ao-text-color-placeholder: rgba(0, 0, 0, 40%); /* 占位符 / 说明文字 */
--ao-text-color-disabled: rgba(0, 0, 0, 26%); /* 禁用文字 */
--ao-text-color-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-color-link: #003cab; /* 链接文字 */
--ao-text-color-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #e8e8e8; // 分割线
--ao-border-color: #ddd; // 边框
--ao-bg-color-control: #fff; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 滚动条颜色
--ao-scrollbar-color: rgba(0, 0, 0, 10%);
// 滚动条悬浮颜色（ hover ）
--ao-scrollbar-hover-color: rgba(0, 0, 0, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--ao-scroll-track-color: #fff;
// 容器颜色，使用的组件：popup
--ao-bg-color-container: #fff;
--ao-bg-color-container-hover: #f3f3f3;
--ao-bg-color-container-active: #e8e8e8;
// shadow阴影
// 基础/下层 投影 hover 使用的组件包括：表格 /
--ao-shadow-surface: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--ao-shadow-popup:
0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--ao-shadow-overlay:
0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
}
code/base-project/base-vue/packages/ao-design/src/button/demo.vue
+13 -14
View File
@@ -1,7 +1,6 @@
<template>
<!-- 状态按钮 (solid) -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal">
<div style="display: flex; gap: 8px;">
<AButton>
Normal
</AButton>
<AButton status="primary">
@@ -18,8 +17,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="outline">
<div style="display: flex; gap: 8px;">
<AButton type="outline">
Normal
</AButton>
<AButton status="primary" type="outline">
@@ -36,8 +35,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="dashed">
<div style="display: flex; gap: 8px;">
<AButton type="dashed">
Normal
</AButton>
<AButton status="primary" type="dashed">
@@ -54,8 +53,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="text">
<div style="display: flex; gap: 8px;">
<AButton type="text">
Normal
</AButton>
<AButton status="primary" type="text">
@@ -72,8 +71,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" disabled>
<div style="display: flex; gap: 8px;">
<AButton disabled>
禁用
</AButton>
<AButton status="primary" disabled>
@@ -90,8 +89,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" loading>
<div style="display: flex; gap: 8px;">
<AButton loading>
loading
</AButton>
<AButton status="primary" loading>
@@ -107,7 +106,7 @@
loading
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<div style="display: flex; gap: 8px;">
<AButton status="primary" size="small">
small
</AButton>
code/base-project/base-vue/packages/ao-design/src/button/index.scss
+222 -17
View File
@@ -17,6 +17,7 @@ $btn-prefix: #{$prefix}-btn;
transition: all 0.2s ease;
font-weight: 500;
border: 1px solid transparent;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
&-small {
height: 24px;
@@ -64,47 +65,47 @@ $btn-prefix: #{$prefix}-btn;
}
&-solid {
&.#{$btn-prefix}-status-normal {
background: $bg-color-component;
color: $text-color-primary;
&.#{$btn-prefix}-status-default {
background: $default-color;
color: $text-color-base;
&:hover:enabled {
background: $bg-color-component-hover;
background: $default-color-hover;
}
&:active:enabled {
background: $bg-color-component-active;
background: $default-color-active;
}
}
&.#{$btn-prefix}-status-primary {
background: $primary;
color: $text-anti;
background: $primary-color;
color: $text-color-anti;
&:hover:enabled {
background: $primary-hover;
background: $primary-color-hover;
}
&:active:enabled {
background: $primary-active;
background: $primary-color-active;
}
}
&.#{$btn-prefix}-status-danger {
background: $danger;
color: $text-anti;
background: $danger-color;
color: $text-color-anti;
&:hover:enabled {
background: $danger-hover;
background: $danger-color-hover;
}
&:active:enabled {
background: $danger-active;
background: $danger-color-active;
}
}
&.#{$btn-prefix}-status-warning {
background: $danger;
color: $text-anti;
background: $warning-color;
color: $text-color-anti;
&:hover:enabled {
background: $danger-hover;
background: $warning-color-hover;
}
&:active:enabled {
background: $danger-active;
background: $warning-color-active;
}
}
&.#{$btn-prefix}-status-success {
@@ -118,4 +119,208 @@ $btn-prefix: #{$prefix}-btn;
}
}
}
&-outline {
&.#{$btn-prefix}-status-default {
background: $bg-color-control;
color: $text-color-base;
border-color: $border-color;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-primary {
background: $bg-color-control;
color: $primary-color;
border-color: $primary-color;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-danger {
background: $bg-color-control;
color: $danger-color;
border-color: $danger-color;
&:hover:enabled {
color: $danger-color-hover;
border-color: $danger-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-warning {
background: $bg-color-control;
color: $warning-color;
border-color: $warning-color;
&:hover:enabled {
color: $warning-color-hover;
border-color: $warning-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-success {
background: $bg-color-control;
color: $success-color;
border-color: $success-color;
&:hover:enabled {
color: $success-color-hover;
border-color: $success-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
}
&-dashed {
&.#{$btn-prefix}-status-default {
background: $bg-color-control;
color: $text-color-base;
border-color: $border-color;
border-style: dashed;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-primary {
background: $bg-color-control;
color: $primary-color;
border-color: $primary-color;
border-style: dashed;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-danger {
background: $bg-color-control;
color: $danger-color;
border-color: $danger-color;
border-style: dashed;
&:hover:enabled {
color: $danger-color-hover;
border-color: $danger-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-warning {
background: $bg-color-control;
color: $warning-color;
border-color: $warning-color;
border-style: dashed;
&:hover:enabled {
color: $warning-color-hover;
border-color: $warning-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-success {
background: $bg-color-control;
color: $success-color;
border-color: $success-color;
border-style: dashed;
&:hover:enabled {
color: $success-color-hover;
border-color: $success-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
}
&-text {
&.#{$btn-prefix}-status-default {
color: $text-color-base;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $text-color-base;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-primary {
color: $primary-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $primary-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-danger {
color: $danger-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $danger-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-warning {
color: $warning-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $warning-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-success {
color: $success-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $success-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
}
}
code/base-project/base-vue/packages/ao-design/src/button/index.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ export default defineComponent({
default: 'solid',
},
status: {
type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'normal',
default: 'normal',
type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'default',
default: 'default',
},
disabled: { type: Boolean, default: false },
loading: { type: Boolean, default: false },
code/base-project/base-vue/packages/ao-design/src/components.ts
+1
View File
@@ -3,5 +3,6 @@ export { default as Button } from './button'
export { default as Group } from './group'
export { default as Icon } from './icon'
export { default as Input } from './input'
export { default as Popup } from './popup'
export { default as Spin } from './spin'
export { default as Textarea } from './textarea'
code/base-project/base-vue/packages/ao-design/src/date-picker/index.scss
+4
View File
@@ -0,0 +1,4 @@
@use 'sass:color';
@use '../_styles/_variables.scss' as *;
$btn-prefix: #{$prefix}-btn;
code/base-project/base-vue/packages/ao-design/src/date-picker/index.tsx
View File
Whitespace-only changes.
code/base-project/base-vue/packages/ao-design/src/group/index.scss
+41 -11
View File
@@ -3,36 +3,66 @@
$group-prefix: #{$prefix}-group;
.#{$group-prefix}-size {
&-small {
height: $size-height-small;
font-size: $size-font-small;
}
&-medium {
height: $size-height-medium;
font-size: $size-font-medium;
}
&-large {
height: $size-height-large;
font-size: $size-font-large;
}
}
.#{$group-prefix}-wrapper {
display: flex;
width: 100%;
border-radius: $border-radius;
overflow: hidden;
position: relative;
.#{$group-prefix}-prepend,
.#{$group-prefix}-append {
background-color: $default-color;
color: $text-color-base;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $border-color;
}
> * {
flex: 1;
margin: 0;
border-radius: 0;
position: relative;
border-radius: 0;
z-index: 0;
border: $border-outline-color;
border-left: none;
box-shadow: none;
&:hover {
border-left: $brand-color;
z-index: 1;
box-shadow: none;
// 抵消左边 border，避免叠加
& + * {
margin-left: -1px;
}
// hover / focus / active 高亮
&:hover,
&:focus-within,
&:active {
border-left: $brand-color;
z-index: 1;
box-shadow: none;
// 高亮边框
outline: 1px solid $primary-color;
outline-offset: -1px;
}
}
// 首尾圆角
> *:first-child {
border-left: $border-outline-color;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
code/base-project/base-vue/packages/ao-design/src/group/index.tsx
+17 -3
View File
@@ -1,16 +1,30 @@
import type { PropType } from 'vue'
import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
export default defineComponent({
name: 'Group',
props: {},
props: {
prepend: { type: String, default: '' },
append: { type: String, default: '' },
size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
},
setup(props, { slots }) {
const prefixCls = getPrefixCls('group')
const renderNode = (slotName: 'prepend' | 'append', propValue: string) => {
// slot 优先
if (slots[slotName])
return slots[slotName]!()
if (propValue)
return <div class={`${prefixCls}-${slotName}`}>{propValue}</div>
return null
}
return () => (
<div class={[`${prefixCls}-wrapper`]}>
<div class={[`${prefixCls}-wrapper`, `${prefixCls}-size-${props.size}`]}>
{renderNode('prepend', props.prepend)}
{slots.default?.()}
{renderNode('append', props.append)}
</div>
)
},
code/base-project/base-vue/packages/ao-design/src/icon/index.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { getPrefixCls } from '../_utils/getPrefixCls'
import './index.scss'
export default defineComponent({
name: 'AIcon',
name: 'Icon',
props: {
icon: { type: String as PropType<string>, required: true },
size: { type: Number, default: 16 },
code/base-project/base-vue/packages/ao-design/src/index.scss
+1 -6
View File
@@ -4,10 +4,5 @@
@use './input/index.scss' as *;
@use './textarea/index.scss' as *;
@use './group/index.scss' as *;
@use "./popup/tooltip.scss" as *;
input,
button,
select,
textarea {
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
code/base-project/base-vue/packages/ao-design/src/input/index.scss
+21 -19
View File
@@ -5,18 +5,18 @@ $input-prefix: #{$prefix}-input;
.#{$input-prefix}-size {
&-small {
height: 24px;
font-size: 12px;
height: $size-height-small;
font-size: $size-font-small;
}
&-medium {
height: 28px;
font-size: 13px;
height: $size-height-medium;
font-size: $size-font-medium;
}
&-large {
height: 32px;
font-size: 14px;
height: $size-height-large;
font-size: $size-font-large;
}
}
@@ -24,21 +24,22 @@ $input-prefix: #{$prefix}-input;
display: flex;
align-items: center;
width: 100%;
border: 1px solid $border-outline-color;
border: 1px solid $border-color;
border-radius: $border-radius;
box-sizing: border-box;
padding: 0 8px;
background: $bg-color-control;
transition:
border cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
.#{$input-prefix}-inner {
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
border: none;
outline: none;
background: transparent;
box-sizing: border-box;
padding: 0;
font-size: inherit;
@@ -46,19 +47,20 @@ $input-prefix: #{$prefix}-input;
display: flex;
align-items: center;
height: 100%;
color: $text-color-base;
background-color: transparent;
&::placeholder {
color: $text-color-placeholder;
}
}
&:hover {
border-color: $brand-color;
border-color: $primary-color;
}
&:focus-within {
border-color: $brand-color;
box-shadow: 0 0 0 2px $brand-color-focus;
border-color: $primary-color;
box-shadow: 0 0 0 2px $primary-color-focus;
}
.#{$input-prefix}-align {
@@ -90,7 +92,7 @@ $input-prefix: #{$prefix}-input;
}
&.#{$input-prefix}-disabled {
background-color: $bg-color-component-disabled;
background-color: $default-color-disabled;
cursor: not-allowed;
.#{$input-prefix}-input {
@@ -106,13 +108,13 @@ $input-prefix: #{$prefix}-input;
&:hover,
&:focus-within {
border: $border-outline-color;
border: $border-color;
box-shadow: none;
}
}
&.#{$input-prefix}-readonly {
background-color: $bg-color-component-readonly;
// background-color: $bg-color-component-readonly;
}
.#{$input-prefix}-icon {
@@ -120,7 +122,7 @@ $input-prefix: #{$prefix}-input;
transition:
color 0.2s,
background-color 0.2s;
color: $text-color-secondary;
color: $text-color-assist;
display: inline-flex;
align-items: center;
@@ -130,7 +132,7 @@ $input-prefix: #{$prefix}-input;
border-radius: 50%;
&:hover {
background-color: $bg-color-component-hover;
background-color: $default-color-hover;
}
}
@@ -138,6 +140,6 @@ $input-prefix: #{$prefix}-input;
flex-shrink: 0;
margin-left: 4px;
white-space: nowrap;
color: $text-color-secondary;
color: $text-color-assist;
}
}
code/base-project/base-vue/packages/ao-design/src/input/index.tsx
+3 -1
View File
@@ -25,7 +25,7 @@ export default defineComponent({
maxlength: Number,
password: Boolean,
},
emits: ['update:modelValue'],
emits: ['update:modelValue', 'focus', 'blur'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('input')
const inputValue = ref(props.modelValue || '')
@@ -85,6 +85,8 @@ export default defineComponent({
disabled={props.disabled}
readonly={props.readonly}
onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
onFocus={e => emit('focus', e)}
onBlur={e => emit('blur', e)}
/>
{props.clearable && inputValue.value && !props.disabled && !props.readonly && (
code/base-project/base-vue/packages/ao-design/src/popup/index.tsx
+140
View File
@@ -0,0 +1,140 @@
import type { PropType } from 'vue'
import { cloneVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
interface Position {
top: number
left: number
}
export default defineComponent({
name: 'Tooltip',
props: {
content: { type: String, required: true },
placement: { type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, default: 'top' },
trigger: { type: String as PropType<'hover' | 'click'>, default: 'hover' },
offset: { type: Number, default: 6 },
},
setup(props, { slots }) {
const visible = ref(false)
const targetEl = ref<HTMLElement | null>(null)
const tooltipEl = ref<HTMLDivElement | null>(null)
const createTooltip = () => {
const el = document.createElement('div')
el.className = `tooltip tooltip-${props.placement}` // 初始隐藏，不加 visible
el.innerHTML = `${props.content}<div class="tooltip-arrow"></div>`
document.body.appendChild(el)
tooltipEl.value = el
}
const updatePosition = () => {
const target = targetEl.value
const tooltip = tooltipEl.value
if (!target || !tooltip)
return
let dom: HTMLElement | null = null
if (target instanceof HTMLElement)
dom = target
else if ((target as any)?.$el instanceof HTMLElement)
dom = (target as any).$el
if (!dom)
return
const rect = dom.getBoundingClientRect()
const tooltipRect = tooltip.getBoundingClientRect()
const scrollX = window.scrollX || window.pageXOffset
const scrollY = window.scrollY || window.pageYOffset
let top = 0
let left = 0
const offset = props.offset
switch (props.placement) {
case 'top':
top = rect.top + scrollY - tooltipRect.height - offset
left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2
break
case 'bottom':
top = rect.bottom + scrollY + offset
left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2
break
case 'left':
top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2
left = rect.left + scrollX - tooltipRect.width - offset
break
case 'right':
top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2
left = rect.right + scrollX + offset
break
}
tooltip.style.top = `${top}px`
tooltip.style.left = `${left}px`
}
const show = () => {
const tooltip = tooltipEl.value
if (!tooltip || !targetEl.value)
return
visible.value = true
nextTick(() => {
updatePosition()
tooltip.classList.add('visible') // CSS 控制动画
})
}
const hide = () => {
const tooltip = tooltipEl.value
if (!tooltip)
return
visible.value = false
tooltip.classList.remove('visible')
}
const toggle = () => {
visible.value ? hide() : show()
}
onMounted(() => {
createTooltip()
window.addEventListener('scroll', () => {
if (visible.value)
updatePosition()
})
window.addEventListener('resize', () => {
if (visible.value)
updatePosition()
})
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', () => {
if (visible.value)
updatePosition()
})
window.removeEventListener('resize', () => {
if (visible.value)
updatePosition()
})
if (tooltipEl.value && tooltipEl.value.parentNode) {
tooltipEl.value.parentNode.removeChild(tooltipEl.value)
}
})
return () => {
const child = slots.default?.()[0]
if (!child)
return null
return cloneVNode(child, {
ref: targetEl,
onMouseenter: props.trigger === 'hover' ? show : undefined,
onMouseleave: props.trigger === 'hover' ? hide : undefined,
onClick: props.trigger === 'click' ? toggle : undefined,
})
}
},
})
code/base-project/base-vue/packages/ao-design/src/popup/tooltip.scss
+56
View File
@@ -0,0 +1,56 @@
@use '../_styles/_variables.scss' as *;
.tooltip {
position: absolute;
z-index: 9999;
padding: 6px 10px;
background: #fff;
border-radius: 4px;
color: #333;
font-size: 12px;
white-space: nowrap;
pointer-events: none;
/* ---------------- 动画 ---------------- */
opacity: 0;
transition: opacity 0.2s ease-in-out;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
&.visible {
opacity: 1;
pointer-events: auto;
}
.tooltip-arrow {
position: absolute;
width: 8px;
height: 8px;
background: #fff;
transform: rotate(45deg);
z-index: 0;
}
&.tooltip-top .tooltip-arrow {
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
&.tooltip-bottom .tooltip-arrow {
top: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
&.tooltip-left .tooltip-arrow {
right: -4px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
&.tooltip-right .tooltip-arrow {
left: -4px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
}
code/base-project/base-vue/packages/ao-design/src/spin/index.scss
+2 -2
View File
@@ -20,13 +20,13 @@ $spin-prefix: #{$prefix}-spin;
flex-direction: column;
justify-content: center;
align-items: center;
color: $brand-color;
color: $text-color-base;
}
&-tip {
margin-top: 4px;
font-size: 12px;
color: #000;
color: $text-color-base;
}
&.rounded {
code/base-project/base-vue/packages/ao-design/src/textarea/index.scss
+17 -14
View File
@@ -12,6 +12,8 @@ $textarea-prefix: #{$prefix}-textarea;
width: 100%;
.#{$textarea-prefix}-inner {
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
width: 100%;
display: flex;
padding: 5px 8px;
@@ -23,20 +25,21 @@ $textarea-prefix: #{$prefix}-textarea;
transition:
all cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
height 0s;
border: 1px solid $border-outline-color;
border: 1px solid $border-color;
border-radius: $border-radius;
background-color: $bg-color-control;
color: $text-color-base;
&::placeholder {
color: $text-color-placeholder;
}
&:hover {
border-color: $brand-color;
border-color: $primary-color;
}
&:focus-within {
border-color: $brand-color;
box-shadow: 0 0 0 2px $brand-color-focus;
border-color: $primary-color;
box-shadow: 0 0 0 2px $primary-color-focus;
}
&::-webkit-scrollbar {
@@ -44,33 +47,33 @@ $textarea-prefix: #{$prefix}-textarea;
}
&::-webkit-scrollbar-track {
background: transparent;
background: $scroll-track-color;
}
&::-webkit-scrollbar-thumb {
background-color: #e5e5e5;
background-color: $scrollbar-color;
border-radius: 0px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #b2b2b2;
background-color: $scrollbar-hover-color;
}
}
.#{$textarea-prefix}-disabled {
background-color: $bg-color-component-disabled;
background-color: $default-color-disabled;
cursor: not-allowed;
color: $text-color-disabled;
&:hover,
&:focus-within {
border: $border-outline-color;
border: $border-color;
box-shadow: none;
}
}
.#{$textarea-prefix}-readonly {
background-color: $bg-color-component-readonly;
// background-color: $bg-color-component-readonly;
}
.#{$textarea-prefix}-clear {
@@ -88,13 +91,13 @@ $textarea-prefix: #{$prefix}-textarea;
align-items: center;
justify-content: center;
color: $text-color-secondary;
color: $text-color-assist;
transition:
color 0.2s,
background-color 0.2s;
&:hover {
background-color: $bg-color-component-hover;
background-color: $default-color-hover;
}
}
@@ -103,6 +106,6 @@ $textarea-prefix: #{$prefix}-textarea;
right: 8px;
bottom: 0px;
font-size: 12px;
color: $text-color-secondary;
color: $text-color-assist;
}
}