feat: change to copy entire folder assets to bundle
This commit is contained in:
parent
3b4f0fe0fe
commit
2077378bf9
@ -30,10 +30,10 @@ export async function build() {
|
|||||||
}
|
}
|
||||||
if (fs.existsSync("assets")) {
|
if (fs.existsSync("assets")) {
|
||||||
const assets = await fs.promises.readdir("assets")
|
const assets = await fs.promises.readdir("assets")
|
||||||
|
await Shell.exec("cp", ["-rf", "assets", "bundle/"]);
|
||||||
for (let asset of assets) {
|
for (let asset of assets) {
|
||||||
const assetFile = path.resolve("assets", asset);
|
const assetFile = path.resolve("assets", asset);
|
||||||
const stat = await fs.promises.stat(assetFile);
|
const stat = await fs.promises.stat(assetFile);
|
||||||
await Shell.exec("cp", ["-rf", assetFile, "bundle"]);
|
|
||||||
if (stat.isDirectory()) {
|
if (stat.isDirectory()) {
|
||||||
console.log(`Asset -> ${asset.yellow}`);
|
console.log(`Asset -> ${asset.yellow}`);
|
||||||
} else {
|
} else {
|
||||||
|
BIN
doric-demo/bundle/assets/DINPro.ttf
Normal file
BIN
doric-demo/bundle/assets/DINPro.ttf
Normal file
Binary file not shown.
BIN
doric-demo/bundle/assets/Hanabi.ttf
Normal file
BIN
doric-demo/bundle/assets/Hanabi.ttf
Normal file
Binary file not shown.
BIN
doric-demo/bundle/assets/iconfont copy.ttf
Normal file
BIN
doric-demo/bundle/assets/iconfont copy.ttf
Normal file
Binary file not shown.
BIN
doric-demo/bundle/assets/iconfont.ttf
Normal file
BIN
doric-demo/bundle/assets/iconfont.ttf
Normal file
Binary file not shown.
351
doric-demo/src/FunnyColorsDemo.tsx
Normal file
351
doric-demo/src/FunnyColorsDemo.tsx
Normal file
@ -0,0 +1,351 @@
|
|||||||
|
import {
|
||||||
|
Group,
|
||||||
|
layoutConfig,
|
||||||
|
Panel,
|
||||||
|
VMPanel,
|
||||||
|
LayoutSpec,
|
||||||
|
Color,
|
||||||
|
gravity,
|
||||||
|
jsx,
|
||||||
|
Text,
|
||||||
|
VLayout,
|
||||||
|
List,
|
||||||
|
ViewHolder,
|
||||||
|
ViewModel,
|
||||||
|
createRef,
|
||||||
|
ListItem,
|
||||||
|
Gravity,
|
||||||
|
HLayout,
|
||||||
|
Stack,
|
||||||
|
popover,
|
||||||
|
animate,
|
||||||
|
Image,
|
||||||
|
} from "doric";
|
||||||
|
|
||||||
|
interface ColorsModel {
|
||||||
|
colors: {
|
||||||
|
color: Color;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
imageUrl?: string;
|
||||||
|
}[];
|
||||||
|
}
|
||||||
|
|
||||||
|
class ColorsVH extends ViewHolder {
|
||||||
|
list = createRef<List>();
|
||||||
|
build(root: Group) {
|
||||||
|
<VLayout parent={root} layoutConfig={layoutConfig().most()}>
|
||||||
|
<Text
|
||||||
|
parent={root}
|
||||||
|
layoutConfig={layoutConfig().configWidth(LayoutSpec.MOST)}
|
||||||
|
textSize={30}
|
||||||
|
textAlignment={gravity().center()}
|
||||||
|
height={50}
|
||||||
|
>
|
||||||
|
有趣的颜色
|
||||||
|
</Text>
|
||||||
|
<List
|
||||||
|
ref={this.list}
|
||||||
|
layoutConfig={layoutConfig().mostWidth().justHeight().configWeight(1)}
|
||||||
|
/>
|
||||||
|
</VLayout>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class ColorsVM extends ViewModel<ColorsModel, ColorsVH> {
|
||||||
|
onAttached(state: ColorsModel, vh: ColorsVH) {
|
||||||
|
vh.list.current.apply({
|
||||||
|
renderItem: (idx) => {
|
||||||
|
const descRef = createRef<HLayout>();
|
||||||
|
return (
|
||||||
|
<ListItem
|
||||||
|
layoutConfig={layoutConfig().mostWidth().justHeight()}
|
||||||
|
backgroundColor={state.colors[idx].color}
|
||||||
|
height={100}
|
||||||
|
padding={{ left: 20, right: 20 }}
|
||||||
|
alpha={1}
|
||||||
|
onClick={async () => {
|
||||||
|
const popedView = createRef<Stack>();
|
||||||
|
const descLayout = createRef<HLayout>();
|
||||||
|
const imageRef = createRef<Image>();
|
||||||
|
const position = await descRef.current.getLocationOnScreen(
|
||||||
|
this.context
|
||||||
|
);
|
||||||
|
const rootPosition = await (this.context.entity as Panel)
|
||||||
|
.getRootView()
|
||||||
|
.getLocationOnScreen(this.context);
|
||||||
|
const offsetX = position.x + rootPosition.x;
|
||||||
|
const offsetY = position.y - rootPosition.y;
|
||||||
|
|
||||||
|
await popover(this.context).show(
|
||||||
|
<Stack
|
||||||
|
ref={popedView}
|
||||||
|
layoutConfig={layoutConfig().most()}
|
||||||
|
onClick={async () => {
|
||||||
|
await animate(this.context)({
|
||||||
|
duration: 500,
|
||||||
|
animations: () => {
|
||||||
|
popedView.current.alpha = 0;
|
||||||
|
descLayout.current.y = offsetY;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
popover(this.context).dismiss();
|
||||||
|
}}
|
||||||
|
alpha={0}
|
||||||
|
backgroundColor={state.colors[idx].color}
|
||||||
|
>
|
||||||
|
<VLayout
|
||||||
|
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||||
|
>
|
||||||
|
<HLayout
|
||||||
|
ref={descLayout}
|
||||||
|
left={offsetX}
|
||||||
|
top={offsetY}
|
||||||
|
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||||
|
gravity={Gravity.CenterY.left()}
|
||||||
|
space={20}
|
||||||
|
padding={{ right: 20 }}
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
backgroundColor={Color.WHITE}
|
||||||
|
layoutConfig={layoutConfig().justWidth().mostHeight()}
|
||||||
|
width={4}
|
||||||
|
/>
|
||||||
|
<VLayout space={5}>
|
||||||
|
<Text
|
||||||
|
textSize={30}
|
||||||
|
textColor={Color.WHITE}
|
||||||
|
textAlignment={Gravity.CenterY.left()}
|
||||||
|
>
|
||||||
|
{state.colors[idx].name}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
textSize={16}
|
||||||
|
textColor={Color.WHITE}
|
||||||
|
maxLines={-1}
|
||||||
|
hidden={!!!state.colors[idx].description}
|
||||||
|
textAlignment={Gravity.CenterY.left()}
|
||||||
|
>
|
||||||
|
{state.colors[idx].description}
|
||||||
|
</Text>
|
||||||
|
</VLayout>
|
||||||
|
</HLayout>
|
||||||
|
<Image
|
||||||
|
ref={imageRef}
|
||||||
|
layoutConfig={layoutConfig().mostWidth().fitHeight()}
|
||||||
|
imageUrl={state.colors[idx].imageUrl}
|
||||||
|
alpha={0}
|
||||||
|
></Image>
|
||||||
|
</VLayout>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
popedView.current.alpha = 1;
|
||||||
|
await animate(this.context)({
|
||||||
|
duration: 500,
|
||||||
|
animations: () => {
|
||||||
|
popedView.current.alpha = 1;
|
||||||
|
descLayout.current.y = 50;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await animate(this.context)({
|
||||||
|
duration: 500,
|
||||||
|
animations: () => {
|
||||||
|
imageRef.current.alpha = 1;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HLayout
|
||||||
|
ref={descRef}
|
||||||
|
layoutConfig={layoutConfig()
|
||||||
|
.mostWidth()
|
||||||
|
.fitHeight()
|
||||||
|
.configAlignment(Gravity.Center)}
|
||||||
|
gravity={Gravity.CenterY.left()}
|
||||||
|
space={20}
|
||||||
|
>
|
||||||
|
<Stack
|
||||||
|
backgroundColor={Color.WHITE}
|
||||||
|
layoutConfig={layoutConfig().justWidth().mostHeight()}
|
||||||
|
width={4}
|
||||||
|
/>
|
||||||
|
<VLayout space={5}>
|
||||||
|
<Text
|
||||||
|
textSize={30}
|
||||||
|
textColor={Color.WHITE}
|
||||||
|
textAlignment={Gravity.CenterY.left()}
|
||||||
|
>
|
||||||
|
{state.colors[idx].name}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
textSize={16}
|
||||||
|
maxLines={-1}
|
||||||
|
textColor={Color.WHITE}
|
||||||
|
hidden={!!!state.colors[idx].description}
|
||||||
|
textAlignment={Gravity.CenterY.left()}
|
||||||
|
>
|
||||||
|
{state.colors[idx].description}
|
||||||
|
</Text>
|
||||||
|
</VLayout>
|
||||||
|
</HLayout>
|
||||||
|
</ListItem>
|
||||||
|
) as ListItem;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onBind(state: ColorsModel, vh: ColorsVH) {
|
||||||
|
vh.list.current.apply({
|
||||||
|
itemCount: state.colors.length,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rgb(r: number, g: number, b: number) {
|
||||||
|
return new Color((r << 16) + (g << 8) + b + 0xff000000);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Entry
|
||||||
|
export class FunnyColors extends VMPanel<ColorsModel, ColorsVH> {
|
||||||
|
getViewModelClass() {
|
||||||
|
return ColorsVM;
|
||||||
|
}
|
||||||
|
getState() {
|
||||||
|
return {
|
||||||
|
colors: [
|
||||||
|
{
|
||||||
|
color: rgb(76, 0, 9),
|
||||||
|
name: "波尔多红",
|
||||||
|
description: "深樱桃红,因法国波尔多红酒得名",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(0, 49, 83),
|
||||||
|
name: "普鲁士蓝",
|
||||||
|
description: "又称 “柏林蓝”",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(128, 0, 32),
|
||||||
|
name: "勃艮第红",
|
||||||
|
description: "因法国出产的勃艮第酒颜色而得名",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(0, 149, 182),
|
||||||
|
name: "邦迪蓝",
|
||||||
|
description: "源自澳大利亚邦迪海滩",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(143, 75, 40),
|
||||||
|
name: "木乃伊棕",
|
||||||
|
description: "从古老的木乃伊中提炼出的颜色",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(26, 85, 153),
|
||||||
|
name: "卡布里蓝",
|
||||||
|
description: "来自意大利卡布里岛的蓝洞湖水色",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(176, 89, 35),
|
||||||
|
name: "提香红",
|
||||||
|
description: "来自于精彩描绘金红发的画家提香",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(129, 216, 208),
|
||||||
|
name: "蒂凡尼蓝",
|
||||||
|
description: "纽约珠宝公司蒂芙尼所拥有的颜色俗称, 为较浅的知更鸟淡蓝",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(158, 46, 36),
|
||||||
|
name: "覆盆子红",
|
||||||
|
imageUrl:
|
||||||
|
"https://pica.zhimg.com/80/v2-972e907fee9f990b637f3d4e1622c50a_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(226, 175, 66),
|
||||||
|
name: "虎皮黄",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic3.zhimg.com/80/v2-4839404bda1774a272d7517eaaf894e1_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(64, 125, 82),
|
||||||
|
name: "薄荷绿",
|
||||||
|
imageUrl:
|
||||||
|
"https://pica.zhimg.com/80/v2-805684e47d49dcc9d846abd84f229d69_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(207, 182, 74),
|
||||||
|
name: "草黄",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-2dfa7bfac90205c17a8efc89daa1ce89_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(154, 180, 205),
|
||||||
|
name: "星蓝",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic3.zhimg.com/80/v2-523760352171e05fcc36df97b3570061_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(65, 138, 180),
|
||||||
|
name: "鸢尾蓝",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-57c9b41f1d5fb4cef6d4dbf60ff149de_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(142, 41, 97),
|
||||||
|
name: "苋菜紫",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic3.zhimg.com/80/v2-10207175a72cfe149fe4362f295dd7d6_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(16, 20, 32),
|
||||||
|
name: "钢蓝",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-05068fce3176c3c8fd01a7aa96634842_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(218, 227, 230),
|
||||||
|
name: "云峰白",
|
||||||
|
imageUrl:
|
||||||
|
"https://pica.zhimg.com/80/v2-786a9d8ebaa73d4e48d8ddfbecf6fded_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(140, 80, 44),
|
||||||
|
name: "岩石棕",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-22b8d1d13f5a63aac70ed0e5f6b13b0d_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(184, 206, 142),
|
||||||
|
name: "橄榄石绿",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic2.zhimg.com/80/v2-a9df63bcfc76ba6548e6994adafcaec2_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(79, 164, 133),
|
||||||
|
name: "竹绿",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-608dd7ec8f0dc9129741987e32ced732_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(70, 146, 185),
|
||||||
|
name: "钴蓝",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-eb0280e893337d76d4491e8980a36e27_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(194, 196, 195),
|
||||||
|
name: "月影白",
|
||||||
|
imageUrl:
|
||||||
|
"https://pic1.zhimg.com/80/v2-e7d3999963ee8c6d99d2817d927e2b4e_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: rgb(107, 51, 26),
|
||||||
|
name: "笋皮棕",
|
||||||
|
imageUrl:
|
||||||
|
"https://pica.zhimg.com/80/v2-12619e9d73411ab0c2c434d5f99e14db_720w.jpg?source=1940ef5c",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
getViewHolderClass() {
|
||||||
|
return ColorsVH;
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user