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