feat(uikit): 新增通用 UI 组件库与主题 token
This commit is contained in:
17
uikit/BuildProfile.ets
Normal file
17
uikit/BuildProfile.ets
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Use these variables when you tailor your ArkTS code. They must be of the const type.
|
||||
*/
|
||||
export const HAR_VERSION = '1.0.0';
|
||||
export const BUILD_MODE_NAME = 'debug';
|
||||
export const DEBUG = true;
|
||||
export const TARGET_NAME = 'default';
|
||||
|
||||
/**
|
||||
* BuildProfile Class is used only for compatibility purposes.
|
||||
*/
|
||||
export default class BuildProfile {
|
||||
static readonly HAR_VERSION = HAR_VERSION;
|
||||
static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
|
||||
static readonly DEBUG = DEBUG;
|
||||
static readonly TARGET_NAME = TARGET_NAME;
|
||||
}
|
||||
1
uikit/Index.ets
Normal file
1
uikit/Index.ets
Normal file
@@ -0,0 +1 @@
|
||||
export * from './src/main/ets/Index.ets';
|
||||
10
uikit/build-profile.json5
Normal file
10
uikit/build-profile.json5
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"apiType": "stageMode",
|
||||
"buildOption": {
|
||||
},
|
||||
"targets": [
|
||||
{
|
||||
"name": "default"
|
||||
}
|
||||
]
|
||||
}
|
||||
6
uikit/hvigorfile.ts
Normal file
6
uikit/hvigorfile.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { harTasks } from '@ohos/hvigor-ohos-plugin';
|
||||
|
||||
export default {
|
||||
system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
|
||||
plugins: [] /* Custom plugin to extend the functionality of Hvigor. */
|
||||
}
|
||||
9
uikit/oh-package.json5
Normal file
9
uikit/oh-package.json5
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "uikit",
|
||||
"version": "1.0.0",
|
||||
"description": "通用 UI 组件库与主题",
|
||||
"main": "Index.ets",
|
||||
"author": "",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {}
|
||||
}
|
||||
4
uikit/src/main/ets/Index.ets
Normal file
4
uikit/src/main/ets/Index.ets
Normal file
@@ -0,0 +1,4 @@
|
||||
export { AppColor, AppSpacing, AppFontSize } from './theme/Theme';
|
||||
export { AppButton, ButtonVariant } from './components/AppButton';
|
||||
export { LoadingView } from './components/LoadingView';
|
||||
export { EmptyView } from './components/EmptyView';
|
||||
33
uikit/src/main/ets/components/AppButton.ets
Normal file
33
uikit/src/main/ets/components/AppButton.ets
Normal file
@@ -0,0 +1,33 @@
|
||||
import { AppColor } from '../theme/Theme';
|
||||
|
||||
export enum ButtonVariant {
|
||||
Primary = 'primary',
|
||||
Secondary = 'secondary'
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用按钮:@ComponentV2 + @Param 输入 + @Event 输出回调。
|
||||
*/
|
||||
@ComponentV2
|
||||
export struct AppButton {
|
||||
@Param text: string = '';
|
||||
@Param variant: ButtonVariant = ButtonVariant.Primary;
|
||||
@Param disabled: boolean = false;
|
||||
@Event onTap: () => void;
|
||||
|
||||
build() {
|
||||
Button(this.text)
|
||||
.width('100%')
|
||||
.height(48)
|
||||
.fontSize(16)
|
||||
.fontColor(this.variant === ButtonVariant.Primary ? AppColor.white : AppColor.primary)
|
||||
.backgroundColor(this.variant === ButtonVariant.Primary ? AppColor.primary : AppColor.white)
|
||||
.borderRadius(8)
|
||||
.enabled(!this.disabled)
|
||||
.onClick(() => {
|
||||
if (!this.disabled) {
|
||||
this.onTap();
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
20
uikit/src/main/ets/components/EmptyView.ets
Normal file
20
uikit/src/main/ets/components/EmptyView.ets
Normal file
@@ -0,0 +1,20 @@
|
||||
import { AppColor, AppFontSize } from '../theme/Theme';
|
||||
|
||||
/**
|
||||
* 通用空态组件。
|
||||
*/
|
||||
@ComponentV2
|
||||
export struct EmptyView {
|
||||
@Param text: string = '暂无数据';
|
||||
|
||||
build() {
|
||||
Column({ space: 8 }) {
|
||||
Text('暂无内容')
|
||||
.fontSize(AppFontSize.headline)
|
||||
.fontColor(AppColor.textSecondary)
|
||||
Text(this.text)
|
||||
.fontSize(AppFontSize.body)
|
||||
.fontColor(AppColor.textSecondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
21
uikit/src/main/ets/components/LoadingView.ets
Normal file
21
uikit/src/main/ets/components/LoadingView.ets
Normal file
@@ -0,0 +1,21 @@
|
||||
import { AppColor, AppFontSize } from '../theme/Theme';
|
||||
|
||||
/**
|
||||
* 通用加载态组件。
|
||||
*/
|
||||
@ComponentV2
|
||||
export struct LoadingView {
|
||||
@Param text: string = '加载中...';
|
||||
|
||||
build() {
|
||||
Column({ space: 8 }) {
|
||||
LoadingProgress()
|
||||
.width(32)
|
||||
.height(32)
|
||||
.color(AppColor.primary)
|
||||
Text(this.text)
|
||||
.fontSize(AppFontSize.body)
|
||||
.fontColor(AppColor.textSecondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
29
uikit/src/main/ets/theme/Theme.ets
Normal file
29
uikit/src/main/ets/theme/Theme.ets
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 主题 token:颜色 / 间距 / 字号。
|
||||
* 全 App 统一从这里取值,避免散落魔法值。
|
||||
*/
|
||||
export class AppColor {
|
||||
static readonly primary: string = '#0A59F7';
|
||||
static readonly primaryPressed: string = '#094CCB';
|
||||
static readonly textPrimary: string = '#182431';
|
||||
static readonly textSecondary: string = '#66182431';
|
||||
static readonly background: string = '#F1F3F5';
|
||||
static readonly white: string = '#FFFFFF';
|
||||
static readonly divider: string = '#0D182431';
|
||||
static readonly danger: string = '#E84026';
|
||||
}
|
||||
|
||||
export class AppSpacing {
|
||||
static readonly xs: number = 4;
|
||||
static readonly sm: number = 8;
|
||||
static readonly md: number = 16;
|
||||
static readonly lg: number = 24;
|
||||
static readonly xl: number = 32;
|
||||
}
|
||||
|
||||
export class AppFontSize {
|
||||
static readonly caption: number = 12;
|
||||
static readonly body: number = 14;
|
||||
static readonly title: number = 16;
|
||||
static readonly headline: number = 20;
|
||||
}
|
||||
10
uikit/src/main/module.json5
Normal file
10
uikit/src/main/module.json5
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"module": {
|
||||
"name": "uikit",
|
||||
"type": "har",
|
||||
"description": "$string:module_desc",
|
||||
"deviceTypes": [
|
||||
"phone"
|
||||
]
|
||||
}
|
||||
}
|
||||
8
uikit/src/main/resources/base/element/string.json
Normal file
8
uikit/src/main/resources/base/element/string.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"string": [
|
||||
{
|
||||
"name": "module_desc",
|
||||
"value": "uikit module"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user